Paperjs - Access classes in multiple paperscript files

Question

I want to use multiple .js files in one Paperscript scope as follows:

<script type="text/paperscript" src="block.js" canvas="canvas"></script>
<script type="text/paperscript" src="main.js" canvas="canvas"></script>

In block.js I define a class as follows:

function Block(point) {
  // create a Path.Rectangle here
}

And in main.js I want to create an instance of the Block class as follows:

function onMouseDown(event) {
  var myBlock = new Block(event.point);
  // do extra work here
}

However, I get the following error:

Uncaught ReferenceError: Block is not defined - in main.js

But if I instantiate the Block class within block.js it all works as expected.

How can I use multiple paperscript js files in the same scope and access classes defined in one file in another file?

I am using paperjs-v0.9.25 and testing using Chrome.

Answer 1

You have three choices:

1. concatenate all your JavaScript files so they are a single file.
2. use paper in JavaScript, not PaperScript, mode.
3. explicitly make your declarations global, e.g., window.Block = function(point) {...}.

I always use JavaScript so have never run into this. Here's a link to the paperjs tutorial: http://paperjs.org/tutorials/getting-started/using-javascript-directly/.

The problem is that paper wraps the code in code.js with a function call that supplies the paper objects that you reference. Here is what is generated by paper:

paper._execute = function(Rectangle,Path) {

function Block(point) {
    var r = new Path.Rectangle(point, [100, 100]);
    r.strokeColor = 'black';
    return r;
}

var b = new Block([100, 100]);


//# sourceMappingURL=data:application/json;base64,eyJ2ZXJza...JdfQ==
}

Because your declaration of Block is in a function its definition is local to that function.