paper 0.12.20 → 0.14.0

package/dist/docs/classes/View.html

@@ -16,6 +16,8 @@
 <h1>View</h1>
 
 <p>The View object wraps an HTML element and handles drawing and user interaction through mouse and keyboard for it. It offer means to scroll the view, find the currently visible bounds in project coordinates, or the center, both useful for constructing artwork that should appear centered on screen.</p>
+<p>If the canvas element has a <code>resize</code> or <code>data-paper-resize</code> attribute, the view adjusts its size to the size of the element whenever the window is resized. The element itself needs to be sized through CSS, e.g. with <code>html, body { height: 100%; }</code> and <code>canvas[resize] { width: 100%; height:
+100%; }</code> for a canvas that fills the window. Without such CSS, the view does not follow the window, and on HiDPI screens it grows with each resize. Without the attribute, the view sets the element&rsquo;s CSS width and height to its own size, see <a href="../classes/View.html#viewsize"><tt>viewSize</tt></a>.</p>
 
 </div>
 
@@ -76,6 +78,62 @@
     
 	
 	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="project" class="member">
+<div class="member-link">
+<a name="project" href="#project"><tt><b>project</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The project that this view displays.</p>
+	
+		<p>Read only.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<a href="../classes/Project.html"><tt>Project</tt></a>
+		</li>
+	</ul>
+    
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="scope" class="member">
+<div class="member-link">
+<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The scope that this view belongs to.</p>
+	
+		<p>Read only.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
+		</li>
+	</ul>
+    
+	
+	
 </div>
 
 </div>
@@ -253,7 +311,7 @@
 <div class="member-description hidden">
 
 <div class="member-text">
-	<p>The view&rsquo;s zoom factor by which the project coordinates are magnified.</p>
+	<p>The view&rsquo;s zoom factor by which the project coordinates are magnified. Setting it to a value that isn&rsquo;t a positive number has no effect.</p>
 	
 	
 	
@@ -721,6 +779,97 @@ view.onResize = function(event) {
 	</ul>
 
 	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onkeydown" class="member">
+<div class="member-link">
+<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The function to be called when the user presses a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
+<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    
+	
+	<h4>Example:<span class="description">Scaling a path whenever the user presses the space bar:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path:
+var path = new Path.Circle({
+    center: new Point(50, 50),
+    radius: 30,
+    fillColor: 'red'
+});
+
+view.onKeyDown = function(event) {
+    if (event.key == 'space') {
+        // Scale the path by 110%:
+        path.scale(1.1);
+
+        // Prevent the key event from bubbling
+        return false;
+    }
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onkeyup" class="member">
+<div class="member-link">
+<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The function to be called when the user releases a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
+<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    
+	
+	<h4>Example:</h4>
+
+
+<pre><code>view.onKeyUp = function(event) {
+    if (event.key == 'space') {
+        console.log('The spacebar was released!');
+    }
+}</code></pre>
+
 </div>
 
 </div>
@@ -758,13 +907,25 @@ view.onResize = function(event) {
 	
 <div id="update" class="member">
 <div class="member-link">
-<a name="update" href="#update"><tt><b>update</b>()</tt></a>
+<a name="update" href="#update"><tt><b>update</b>([force])</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Updates the view if there are changes. Note that when using built-in event hanlders for interaction, animation and load events, this method is invoked for you automatically at the end.</p>
+	<p>Updates the view if there are changes. Note that when using built-in event handlers for interaction, animation and load events, this method is invoked for you automatically at the end.</p>
     
 	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>force:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;whether to redraw the view even if nothing has changed, e.g. after a web font used by text items has finished loading
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+	
+</ul>
+
 	
 	<ul class="member-list">
 		<h4>Returns:</h4>
@@ -1282,6 +1443,66 @@ view.onResize = function(event) {
 
 	
 	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle" class="member">
+<div class="member-link">
+<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Transform the view so that the specified rectangle is centered in it and fitted to it as described by <code>fit</code>, keeping the view&rsquo;s rotation and mirroring.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;the rectangle to fit, in project coordinates
+
+</li>
+	
+	<li>
+<tt>fit:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;how to fit the rectangle, as in CSS&rsquo;s <code>object-fit</code>: <code>&#39;contain&#39;</code> shows all of it, and <code>&#39;cover&#39;</code> fills the whole view with it, cropping the parts that don&rsquo;t fit
+&mdash;&nbsp;optional, default: <tt>&lsquo;contain&rsquo;</tt>
+</li>
+	
+</ul>
+
+	
+
+
+	
+	<h4>Example:<span class="description">Fitting the view to the bounds of an item:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle shaped path around the top left corner of the view:
+var path = new Path.Circle({
+    center: [0, 0],
+    radius: 50,
+    fillColor: 'orange'
+});
+
+// Make the view show the whole circle:
+view.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
 </div>
 </div>
 </div>
@@ -1462,7 +1683,7 @@ view.onResize = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-1">
+<script type="text/paperscript" canvas="canvas-3">
 var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
 path.fillColor = 'black';
 
@@ -1473,7 +1694,7 @@ var frameHandler = function(event) {
 
 view.on('frame', frameHandler);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
 </div>
 
 
@@ -1525,7 +1746,7 @@ view.on('frame', frameHandler);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-2">
+<script type="text/paperscript" canvas="canvas-4">
 var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
 path.fillColor = 'black';
 
@@ -1538,7 +1759,7 @@ view.on({
     frame: frameHandler
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
 </div>
 
 
@@ -1597,7 +1818,7 @@ view.on({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-3">
+<script type="text/paperscript" canvas="canvas-5">
 var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
 path.fillColor = 'black';
 
@@ -1616,7 +1837,7 @@ function onMouseDown(event) {
     view.off('frame');
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
 </div>
 
 
@@ -1750,6 +1971,120 @@ function onMouseDown(event) {
 
 	
 	
+</div>
+</div>
+</div>
+
+	
+<div id="dispatchmouseevent-type-point" class="member">
+<div class="member-link">
+<a name="dispatchmouseevent-type-point" href="#dispatchmouseevent-type-point"><tt><b>dispatchMouseEvent</b>(type, point[, options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Handles a mouse event that the host provides, for hosts without a DOM, such as workers, or with their own event source. It runs the same handling as the DOM&rsquo;s mouse events: the active tool&rsquo;s handlers, with <a href="../classes/Tool.html#mindistance"><tt>tool.minDistance</tt></a> and the like, then those of the items under the point and of the view, including the events that Paper.js derives itself: <code>&#39;mousedrag&#39;</code>, <code>&#39;click&#39;</code>, <code>&#39;doubleclick&#39;</code>, <code>&#39;mouseenter&#39;</code> and <code>&#39;mouseleave&#39;</code>.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li>[options.modifiers] {Object} the state of the modifier keys,
+    see {@link Key#modifiers}</li>
+<li><tt>options.button: <tt>Number</tt></tt> &mdash; the mouse button &mdash;&nbsp;default: <tt>0</tt></li>
+<li><tt>options.timeStamp: <tt>Number</tt></tt> &mdash; the time stamp &mdash;&nbsp;default: <tt>Date.now()</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>type:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;the type of the event: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>
+
+</li>
+	
+	<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the location of the mouse in project coordinates
+
+</li>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the details of the event
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if a handler prevented the event&rsquo;s default, <tt>false</tt> otherwise
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="dispatchkeyevent-type-key" class="member">
+<div class="member-link">
+<a name="dispatchkeyevent-type-key" href="#dispatchkeyevent-type-key"><tt><b>dispatchKeyEvent</b>(type, key[, options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Handles a key event that the host provides, for hosts without a DOM, such as workers, or with their own event source. It updates <tt>Key#modifiers</tt> and <tt>Key#isDown(key)</tt>, and calls the view&rsquo;s and the active tool&rsquo;s handlers, as the DOM&rsquo;s key events do.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li>[options.character] {String} the character that the key
+    produces. By default, keydown takes the key itself if it is a
+    single character, and keyup the character of its keydown</li>
+<li>[options.modifiers] {Object} the state of the modifier keys,
+    see {@link Key#modifiers}</li>
+<li><tt>options.timeStamp: <tt>Number</tt></tt> &mdash; the time stamp &mdash;&nbsp;default: <tt>Date.now()</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>type:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;the type of the event: <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
+
+</li>
+	
+	<li>
+<tt>key:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;the key, as in <a href="../classes/KeyEvent.html#key"><tt>keyEvent.key</tt></a>
+
+</li>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the details of the event
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+
+
+	
+	
 </div>
 </div>
 </div>
@@ -1763,7 +2098,7 @@ function onMouseDown(event) {
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.12.20<br>
+Paper.js v0.14.0<br>
 Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
 <div class="content-end"></div>
 

package/dist/docs/classes/global.html

@@ -416,7 +416,7 @@
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.12.20<br>
+Paper.js v0.14.0<br>
 Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
 <div class="content-end"></div>
 

package/dist/docs/classes/index.html

@@ -2,13 +2,13 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<title>Paper.js v0.12.20</title>
+<title>Paper.js v0.14.0</title>
 <base target="class-frame">
 <link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
 </head>
 <body class="reference">
 <div class="reference-index">
-<h1>Paper.js<span class="version">0.12.20</span></h1>
+<h1>Paper.js<span class="version">0.14.0</span></h1>
 <ul class="reference-classes"><li><a href="../classes/global.html">Global Scope</a></li>
 <li>
 <h2>Basic Types</h2>

package/dist/docs/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 <meta charset="UTF-8">
-<title>Paper.js v0.12.20</title>
+<title>Paper.js v0.14.0</title>
 </head>
 <frameset cols="230,*">
 <frame src="classes/index.html" name="packageListFrame" title="All Packages">

package/dist/node/canvas.js

@@ -24,7 +24,7 @@ module.exports = function(self, requireName) {
         // Check the required module's name to see if it contains canvas, and
         // only complain about its lack if the module requires it.
         if (/\bcanvas\b/.test(requireName)) {
-            throw new Error('Unable to load canvas module.');
+            throw new Error('Unable to load canvas module.', { cause: error });
         }
         return false;
     }

package/dist/node/self.js

@@ -18,7 +18,9 @@ var path = require('path');
 // 'paper-jsdom' or 'paper-jsdom-canvas'), and use this to determine if error
 // exceptions should be thrown or if loading should fail silently.
 var parent = module.parent && module.parent.parent,
-    requireName = parent && path.basename(path.dirname(parent.filename));
+    // The REPL's module has no filename:
+    requireName = parent && parent.filename &&
+            path.basename(path.dirname(parent.filename));
 requireName = /^paper/.test(requireName) ? requireName : 'paper';
 
 var jsdom,
@@ -30,7 +32,7 @@ try {
     // Check the required module's name to see if it contains jsdom, and only
     // complain about its lack if the module requires it.
     if (/\bjsdom\b/.test(requireName)) {
-        throw new Error('Unable to load jsdom module.');
+        throw new Error('Unable to load jsdom module.', { cause: e });
     }
 }
 
@@ -53,7 +55,6 @@ if (jsdom) {
         // jsdom's window can't be removed from itself, so inherit from it:
         self = Object.create(self, { window: { value: null } });
     }
-    require('./xml.js')(self);
 } else {
     self = {
         navigator: {