paper 0.12.20 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.md +318 -0
  2. package/README.md +45 -26
  3. package/dist/docs/assets/js/paper.js +1210 -481
  4. package/dist/docs/classes/ChangeFlag.html +384 -0
  5. package/dist/docs/classes/Color.html +63 -47
  6. package/dist/docs/classes/CompoundPath.html +219 -62
  7. package/dist/docs/classes/Curve.html +9 -7
  8. package/dist/docs/classes/CurveLocation.html +1 -1
  9. package/dist/docs/classes/Event.html +1 -1
  10. package/dist/docs/classes/Gradient.html +1 -1
  11. package/dist/docs/classes/GradientStop.html +1 -1
  12. package/dist/docs/classes/Group.html +151 -27
  13. package/dist/docs/classes/HitResult.html +3 -2
  14. package/dist/docs/classes/HostItem.html +6721 -0
  15. package/dist/docs/classes/Item.html +120 -27
  16. package/dist/docs/classes/Key.html +1 -1
  17. package/dist/docs/classes/KeyEvent.html +1 -1
  18. package/dist/docs/classes/Layer.html +151 -27
  19. package/dist/docs/classes/Matrix.html +1 -1
  20. package/dist/docs/classes/MouseEvent.html +1 -1
  21. package/dist/docs/classes/PaperScope.html +88 -1
  22. package/dist/docs/classes/PaperScript.html +2 -1
  23. package/dist/docs/classes/Path.html +232 -72
  24. package/dist/docs/classes/PathItem.html +337 -180
  25. package/dist/docs/classes/Point.html +143 -21
  26. package/dist/docs/classes/PointText.html +151 -27
  27. package/dist/docs/classes/Project.html +201 -8
  28. package/dist/docs/classes/Raster.html +150 -38
  29. package/dist/docs/classes/Rectangle.html +12 -11
  30. package/dist/docs/classes/Segment.html +1 -1
  31. package/dist/docs/classes/Shape.html +120 -27
  32. package/dist/docs/classes/Size.html +81 -21
  33. package/dist/docs/classes/Style.html +35 -3
  34. package/dist/docs/classes/SymbolDefinition.html +1 -1
  35. package/dist/docs/classes/SymbolItem.html +121 -28
  36. package/dist/docs/classes/TextItem.html +151 -27
  37. package/dist/docs/classes/Tool.html +127 -1
  38. package/dist/docs/classes/ToolEvent.html +27 -1
  39. package/dist/docs/classes/Tween.html +1 -1
  40. package/dist/docs/classes/View.html +345 -10
  41. package/dist/docs/classes/global.html +1 -1
  42. package/dist/docs/classes/index.html +2 -2
  43. package/dist/docs/index.html +1 -1
  44. package/dist/node/canvas.js +1 -1
  45. package/dist/node/self.js +4 -3
  46. package/dist/paper-core.js +1182 -465
  47. package/dist/paper-core.min.js +3 -3
  48. package/dist/paper-full.js +1210 -481
  49. package/dist/paper-full.min.js +3 -3
  50. package/dist/paper-sourced.js +18631 -0
  51. package/dist/paper.d.ts +606 -78
  52. package/examples/Rasters/Smoothing.html +1 -1
  53. package/package.json +6 -17
  54. package/dist/node/xml.js +0 -40
@@ -194,6 +194,32 @@ var text = new PointText({
194
194
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
195
195
 
196
196
 
197
+ <div id="key" class="member">
198
+ <div class="member-link">
199
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
200
+ </div>
201
+ <div class="member-description hidden">
202
+
203
+ <div class="member-text">
204
+ <p>The key of the host&rsquo;s node that the item represents, in a project backed by a host document, see <a href="../classes/Project.html#source"><tt>project.source</tt></a>. It can only be set once, on an item created by a script, to register the key that the host gave its new node.</p>
205
+
206
+
207
+
208
+ <ul class="member-list">
209
+ <h4>Type:</h4>
210
+ <li>
211
+ <tt>Number</tt>
212
+ </li>
213
+ </ul>
214
+
215
+
216
+
217
+ </div>
218
+
219
+ </div>
220
+ </div>
221
+
222
+
197
223
  <div id="id" class="member">
198
224
  <div class="member-link">
199
225
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -313,6 +339,7 @@ group.children['example'].fillColor = 'red';
313
339
 
314
340
  <div class="member-text">
315
341
  <p>The path style of the item.</p>
342
+ <p>Styles set on a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a> are applied to the children that it contains at that moment. Items added to it later do not receive them.</p>
316
343
 
317
344
 
318
345
 
@@ -655,6 +682,37 @@ circle2.opacity = 0.5;
655
682
  </div>
656
683
 
657
684
 
685
+ </div>
686
+
687
+ </div>
688
+ </div>
689
+
690
+
691
+ <div id="guide" class="member">
692
+ <div class="member-link">
693
+ <a name="guide" href="#guide"><tt><b>guide</b></tt></a>
694
+ </div>
695
+ <div class="member-description hidden">
696
+
697
+ <div class="member-text">
698
+ <p>Specifies whether the item functions as a guide. When set to <code>true</code>, the item is drawn as usual, but left out of hit-tests and mouse interactions. Hit-tests only find guides when <code>options.guides</code> is set, and then only them, see <a href="../classes/Item.html#hittest-point"><tt>hitTest(point[, options])</tt></a>.</p>
699
+
700
+
701
+
702
+ <ul class="member-list">
703
+ <h4>Default:</h4>
704
+ <li><tt>false</tt></li>
705
+ </ul>
706
+
707
+ <ul class="member-list">
708
+ <h4>Type:</h4>
709
+ <li>
710
+ <tt>Boolean</tt>
711
+ </li>
712
+ </ul>
713
+
714
+
715
+
658
716
  </div>
659
717
 
660
718
  </div>
@@ -1245,6 +1303,34 @@ circle.position.x += 100;
1245
1303
 
1246
1304
 
1247
1305
 
1306
+ </div>
1307
+
1308
+ </div>
1309
+ </div>
1310
+
1311
+
1312
+ <div id="scope" class="member">
1313
+ <div class="member-link">
1314
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
1315
+ </div>
1316
+ <div class="member-description hidden">
1317
+
1318
+ <div class="member-text">
1319
+ <p>The scope that this item belongs to, through its project.</p>
1320
+
1321
+ <p>Read only.</p>
1322
+
1323
+
1324
+
1325
+ <ul class="member-list">
1326
+ <h4>Type:</h4>
1327
+ <li>
1328
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
1329
+ </li>
1330
+ </ul>
1331
+
1332
+
1333
+
1248
1334
  </div>
1249
1335
 
1250
1336
  </div>
@@ -1358,6 +1444,7 @@ console.log(group.children[0] == path); // true</code></pre>
1358
1444
 
1359
1445
  <div class="member-text">
1360
1446
  <p>The children items contained within this item. Items that define a <a href="../classes/Item.html#name"><tt>name</tt></a> can also be accessed by name.</p>
1447
+ <p>Only <a href="../classes/Group.html"><tt>Group</tt></a>, <a href="../classes/Layer.html"><tt>Layer</tt></a> and <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items can have children. On all other items, such as <a href="../classes/Path.html"><tt>Path</tt></a>, <a href="../classes/Shape.html"><tt>Shape</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> and <a href="../classes/PointText.html"><tt>PointText</tt></a>, <code>children</code> is <code>undefined</code>.</p>
1361
1448
  <p><b>Please note:</b> The children array should not be modified directly using array functions. To remove single items from the children list, use <a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use <a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
1362
1449
 
1363
1450
 
@@ -1859,7 +1946,7 @@ path3.strokeJoin = 'bevel';
1859
1946
  <div class="member-description hidden">
1860
1947
 
1861
1948
  <div class="member-text">
1862
- <p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
1949
+ <p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke. On text, non-scaling strokes are exact for uniform scaling only, as the glyphs are always stroked through the transformation.</p>
1863
1950
 
1864
1951
 
1865
1952
 
@@ -3298,22 +3385,22 @@ function onMouseDown(event) {
3298
3385
  <div class="member-description hidden">
3299
3386
  <div class="member-text">
3300
3387
  <p>Performs a hit-test on the item and its children (if it is a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point, returning the first found hit.</p>
3301
- <p>The options object allows you to control the specifics of the hit- test and may contain a combination of the following values:</p>
3388
+ <p>The options object allows you to control the specifics of the hit-test. Without options, <code>fill</code>, <code>stroke</code> and <code>segments</code> are hit-tested. As soon as an options object is passed, only the hit-tests that it sets to <code>true</code> are performed. It may contain a combination of the following values:</p>
3302
3389
  <ul class="member-list">
3303
3390
  <h4>Options:</h4>
3304
- <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
3391
+ <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test, in project coordinates &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
3305
3392
  <li><tt>options.class: <tt>Function</tt></tt> &mdash; only hit-test against a specific item class, or any of its sub-classes, by providing the constructor function against which an <code>instanceof</code> check is performed: <tt>Group</tt>, <tt>Layer</tt>, <tt>Path</tt>, <tt>CompoundPath</tt>, <tt>Shape</tt>, <tt>Raster</tt>, <tt>SymbolItem</tt>, <tt>PointText</tt>, &hellip;</li>
3306
3393
  <li><tt>options.match: <tt>Function</tt></tt> &mdash; a match function to be called for each found hit result: Return <code>true</code> to return the result, <code>false</code> to keep searching</li>
3307
- <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items &mdash;&nbsp;default: <tt>true</tt></li>
3308
- <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width &mdash;&nbsp;default: <tt>true</tt></li>
3309
- <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items &mdash;&nbsp;default: <tt>true</tt></li>
3394
+ <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items</li>
3395
+ <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width</li>
3396
+ <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items</li>
3310
3397
  <li><tt>options.curves: <tt>Boolean</tt></tt> &mdash; hit-test the curves of path items, without taking the stroke color or width into account</li>
3311
3398
  <li><tt>options.handles: <tt>Boolean</tt></tt> &mdash; hit-test for the handles (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</li>
3312
3399
  <li><tt>options.ends: <tt>Boolean</tt></tt> &mdash; only hit-test for the first or last segment points of open path items</li>
3313
3400
  <li><tt>options.position: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Item.html#position"><tt>item.position</tt></a> of of items, which depends on the setting of <a href="../classes/Item.html#pivot"><tt>item.pivot</tt></a></li>
3314
3401
  <li><tt>options.center: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
3315
3402
  <li><tt>options.bounds: <tt>Boolean</tt></tt> &mdash; hit-test the corners and side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
3316
- <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
3403
+ <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; only hit-test items that have <a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <code>true</code></li>
3317
3404
  <li><tt>options.selected: <tt>Boolean</tt></tt> &mdash; only hit selected items</li>
3318
3405
  </ul>
3319
3406
 
@@ -3552,7 +3639,7 @@ function onMouseDown(event) {
3552
3639
  <h4>Returns:</h4>
3553
3640
 
3554
3641
  <li>
3555
- <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching descendant items
3642
+ <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching descendant items, in their stacking order from bottom to top, with each item listed before its own descendants
3556
3643
  </li>
3557
3644
 
3558
3645
 
@@ -3725,6 +3812,8 @@ function onMouseDown(event) {
3725
3812
  <li><tt>options.precision: <tt>Number</tt></tt> &mdash; the amount of fractional digits in numbers used in SVG data &mdash;&nbsp;default: <tt>5</tt></li>
3726
3813
  <li><tt>options.matchShapes: <tt>Boolean</tt></tt> &mdash; whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match &mdash;&nbsp;default: <tt>false</tt></li>
3727
3814
  <li><tt>options.embedImages: <tt>Boolean</tt></tt> &mdash; whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. &mdash;&nbsp;default: <tt>true</tt></li>
3815
+ <li><tt>options.reuseImages: <tt>Boolean</tt></tt> &mdash; whether raster images with the same content should only be exported once into the <code>&lt;defs&gt;</code> element, and placed through <code>&lt;use&gt;</code> elements referencing it &mdash;&nbsp;default: <tt>false</tt></li>
3816
+ <li><tt>options.idPrefix: <tt>String</tt></tt> &mdash; a prefix for the ids generated for definitions such as gradients, clip paths and symbols, to keep them unique when several exported SVGs are placed in one document &mdash;&nbsp;default: <tt>&rsquo;&rsquo;</tt></li>
3728
3817
  <li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> &mdash; wether to only include style attributes in the SVG output that differ from their parents, or to always include them (much faster but leading to redundancies). &mdash;&nbsp;default: <tt>true</tt></li>
3729
3818
  </ul>
3730
3819
 
@@ -3767,9 +3856,13 @@ function onMouseDown(event) {
3767
3856
  <div class="member-description hidden">
3768
3857
  <div class="member-text">
3769
3858
  <p>Converts the provided SVG content into Paper.js items and adds them to the this item&rsquo;s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
3859
+ <p><code>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
3770
3860
  <ul class="member-list">
3771
3861
  <h4>Options:</h4>
3772
3862
  <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape items should be expanded to path items &mdash;&nbsp;default: <tt>false</tt></li>
3863
+ <li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
3864
+ value of the rasters created for `<image>` elements, to load their
3865
+ images with CORS</li>
3773
3866
  <li><tt>options.onLoad: <tt>Function</tt></tt> &mdash; the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external resources.</li>
3774
3867
  <li><tt>options.onError: <tt>Function</tt></tt> &mdash; the callback function to call if an error occurs during loading. Only required when loading from external resources.</li>
3775
3868
  <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the imported items should be added to the item that <code>importSVG()</code> is called on &mdash;&nbsp;default: <tt>true</tt></li>
@@ -4245,9 +4338,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4245
4338
  </div>
4246
4339
 
4247
4340
 
4248
- <div id="reduce-options" class="member">
4341
+ <div id="reduce" class="member">
4249
4342
  <div class="member-link">
4250
- <a name="reduce-options" href="#reduce-options"><tt><b>reduce</b>(options)</tt></a>
4343
+ <a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
4251
4344
  </div>
4252
4345
  <div class="member-description hidden">
4253
4346
  <div class="member-text">
@@ -4259,9 +4352,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4259
4352
 
4260
4353
  <li>
4261
4354
  <tt>options:</tt>
4262
-
4263
-
4264
-
4355
+ <tt>Object</tt>
4356
+ &mdash;&nbsp;the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
4357
+ &mdash;&nbsp;optional
4265
4358
  </li>
4266
4359
 
4267
4360
  </ul>
@@ -4503,7 +4596,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4503
4596
  </div>
4504
4597
  <div class="member-description hidden">
4505
4598
  <div class="member-text">
4506
- <p>Checks whether the item has a fill.</p>
4599
+ <p>Checks whether the item has a visible fill, a fill color with an alpha above 0. Hit-tests also hit transparent fills, see <a href="../classes/Item.html#hittest"><tt>hitTest</tt></a>.</p>
4507
4600
 
4508
4601
 
4509
4602
 
@@ -4511,7 +4604,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4511
4604
  <h4>Returns:</h4>
4512
4605
 
4513
4606
  <li>
4514
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
4607
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
4515
4608
  </li>
4516
4609
 
4517
4610
 
@@ -4650,7 +4743,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4650
4743
  </div>
4651
4744
  <div class="member-description hidden">
4652
4745
  <div class="member-text">
4653
- <p>Checks if this item is above the specified item in the stacking order of the project.</p>
4746
+ <p>Checks if this item is above the specified item in the stacking order of the project. If one item is a descendant of the other, neither is above the other and <code>false</code> is returned.</p>
4654
4747
 
4655
4748
 
4656
4749
  <ul class="member-list">
@@ -4691,7 +4784,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4691
4784
  </div>
4692
4785
  <div class="member-description hidden">
4693
4786
  <div class="member-text">
4694
- <p>Checks if the item is below the specified item in the stacking order of the project.</p>
4787
+ <p>Checks if the item is below the specified item in the stacking order of the project. If one item is a descendant of the other, neither is below the other and <code>false</code> is returned.</p>
4695
4788
 
4696
4789
 
4697
4790
  <ul class="member-list">
@@ -5649,11 +5742,11 @@ circle.scale(3, 1);
5649
5742
 
5650
5743
  <div id="fitbounds-rectangle" class="member">
5651
5744
  <div class="member-link">
5652
- <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
5745
+ <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
5653
5746
  </div>
5654
5747
  <div class="member-description hidden">
5655
5748
  <div class="member-text">
5656
- <p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> fit within the specified rectangle, without changing its aspect ratio.</p>
5749
+ <p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> are centered in the specified rectangle and fitted to it as described by <code>fit</code>.</p>
5657
5750
 
5658
5751
 
5659
5752
  <ul class="member-list">
@@ -5667,10 +5760,10 @@ circle.scale(3, 1);
5667
5760
  </li>
5668
5761
 
5669
5762
  <li>
5670
- <tt>fill:</tt>
5671
- <tt>Boolean</tt>
5672
-
5673
- &mdash;&nbsp;optional, default: <tt>false</tt>
5763
+ <tt>fit:</tt>
5764
+ <tt>String</tt>⟋<tt>Boolean</tt>
5765
+ &mdash;&nbsp;how to fit the item, as in CSS&rsquo;s <code>object-fit</code>: <code>&#39;contain&#39;</code> fits all of it within the rectangle, <code>&#39;cover&#39;</code> makes it cover the whole rectangle, and <code>&#39;fill&#39;</code> stretches it to the rectangle, changing its aspect ratio. The deprecated <code>true</code> and <code>false</code> stand for <code>&#39;cover&#39;</code> and <code>&#39;contain&#39;</code>.
5766
+ &mdash;&nbsp;optional, default: <tt>&lsquo;contain&rsquo;</tt>
5674
5767
  </li>
5675
5768
 
5676
5769
  </ul>
@@ -5712,7 +5805,7 @@ circlePath.fitBounds(path.bounds);
5712
5805
  </div>
5713
5806
 
5714
5807
 
5715
- <h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:</span></h4>
5808
+ <h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
5716
5809
 
5717
5810
  <div class="paperscript split">
5718
5811
 
@@ -5739,7 +5832,7 @@ var circlePath = new Path.Circle({
5739
5832
 
5740
5833
  // Fit the circlePath to the bounding rectangle of
5741
5834
  // the rectangular path:
5742
- circlePath.fitBounds(path.bounds, true);
5835
+ circlePath.fitBounds(path.bounds, 'cover');
5743
5836
  </script>
5744
5837
  <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
5745
5838
  </div>
@@ -6389,7 +6482,7 @@ function onMouseDown(event) {
6389
6482
  <ul class="member-list">
6390
6483
  <h4>Options:</h4>
6391
6484
  <li><tt>options.duration: <tt>Number</tt></tt> &mdash; the duration of the tweening</li>
6392
- <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
6485
+ <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo; &lsquo;easeInSine&rsquo; &lsquo;easeOutSine&rsquo; &lsquo;easeInOutSine&rsquo; &lsquo;easeInExpo&rsquo; &lsquo;easeOutExpo&rsquo; &lsquo;easeInOutExpo&rsquo; &lsquo;easeInCirc&rsquo; &lsquo;easeOutCirc&rsquo; &lsquo;easeInOutCirc&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
6393
6486
  <li><tt>options.start: <tt>Boolean</tt></tt> &mdash; whether to start tweening automatically &mdash;&nbsp;default: <tt>true</tt></li>
6394
6487
  </ul>
6395
6488
 
@@ -6969,6 +7062,37 @@ function onMouseMove(event) {
6969
7062
 
6970
7063
 
6971
7064
 
7065
+ </div>
7066
+
7067
+ </div>
7068
+ </div>
7069
+
7070
+
7071
+ <div id="tracking" class="member">
7072
+ <div class="member-link">
7073
+ <a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
7074
+ </div>
7075
+ <div class="member-description hidden">
7076
+
7077
+ <div class="member-text">
7078
+ <p>The tracking of text content: the space added after each character, in thousandths of an em, as in Adobe Illustrator and InDesign. A tracking of 100 adds a tenth of the font size.</p>
7079
+
7080
+
7081
+
7082
+ <ul class="member-list">
7083
+ <h4>Default:</h4>
7084
+ <li><tt>0</tt></li>
7085
+ </ul>
7086
+
7087
+ <ul class="member-list">
7088
+ <h4>Type:</h4>
7089
+ <li>
7090
+ <tt>Number</tt>
7091
+ </li>
7092
+ </ul>
7093
+
7094
+
7095
+
6972
7096
  </div>
6973
7097
 
6974
7098
  </div>
@@ -7019,7 +7143,7 @@ function onMouseMove(event) {
7019
7143
 
7020
7144
  <!-- =========================== copyright notice ========================== -->
7021
7145
  <p class="footer">
7022
- Paper.js v0.12.20<br>
7146
+ Paper.js v0.14.0<br>
7023
7147
  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>
7024
7148
  <div class="content-end"></div>
7025
7149
 
@@ -79,6 +79,92 @@
79
79
  <h2>Properties</h2>
80
80
 
81
81
 
82
+ <div id="source" class="member">
83
+ <div class="member-link">
84
+ <a name="source" href="#source"><tt><b>source</b></tt></a>
85
+ </div>
86
+ <div class="member-description hidden">
87
+
88
+ <div class="member-text">
89
+ <p>The host document that the project&rsquo;s items come from. Setting it creates the project&rsquo;s layers from the source&rsquo;s records. All items are created as shells that load their content and children from the source on first access.</p>
90
+ <p>The source provides: - <code>getChildren(key)</code>, which returns the records of the children of the node with the given key, or of the top level for <code>null</code>, as columns: <code>keys</code>, <code>types</code> (indices into <code>typeNames</code>), <code>typeNames</code>, <code>flags</code> (selected: 1, visible: 2, locked: 4, strokeScaling: 8, clipMask: 64, guide: 128, empty: 256), <code>boxes</code> (bounds, strokeBounds and roughBounds in the item&rsquo;s coordinates, 12 numbers per item), and the sparse objects <code>names</code> and <code>matrices</code>. - <code>getItem(key)</code>, which returns the node&rsquo;s own content in the form of <a href="../classes/Item.html#importjson-json"><tt>item.importJSON(json)</tt></a>, without children. - <code>getAncestorKeys(key)</code>, which returns the keys from the top level down to the node&rsquo;s parent.</p>
91
+
92
+
93
+
94
+ <ul class="member-list">
95
+ <h4>Type:</h4>
96
+ <li>
97
+ <tt>Object</tt>
98
+ </li>
99
+ </ul>
100
+
101
+
102
+
103
+ </div>
104
+
105
+ </div>
106
+ </div>
107
+
108
+
109
+ <div id="trackchanges" class="member">
110
+ <div class="member-link">
111
+ <a name="trackchanges" href="#trackchanges"><tt><b>trackChanges</b></tt></a>
112
+ </div>
113
+ <div class="member-description hidden">
114
+
115
+ <div class="member-text">
116
+ <p>Specifies whether the project logs the changes of its items, to be retrieved through <a href="../classes/Project.html#takechanges"><tt>takeChanges</tt></a>(). This allows hosts that keep their own document to update only what has changed.</p>
117
+
118
+
119
+
120
+ <ul class="member-list">
121
+ <h4>Default:</h4>
122
+ <li><tt>false</tt></li>
123
+ </ul>
124
+
125
+ <ul class="member-list">
126
+ <h4>Type:</h4>
127
+ <li>
128
+ <tt>Boolean</tt>
129
+ </li>
130
+ </ul>
131
+
132
+
133
+
134
+ </div>
135
+
136
+ </div>
137
+ </div>
138
+
139
+
140
+ <div id="scope" class="member">
141
+ <div class="member-link">
142
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
143
+ </div>
144
+ <div class="member-description hidden">
145
+
146
+ <div class="member-text">
147
+ <p>The scope that this project belongs to.</p>
148
+
149
+ <p>Read only.</p>
150
+
151
+
152
+
153
+ <ul class="member-list">
154
+ <h4>Type:</h4>
155
+ <li>
156
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
157
+ </li>
158
+ </ul>
159
+
160
+
161
+
162
+ </div>
163
+
164
+ </div>
165
+ </div>
166
+
167
+
82
168
  <div id="view" class="member">
83
169
  <div class="member-link">
84
170
  <a name="view" href="#view"><tt><b>view</b></tt></a>
@@ -327,6 +413,107 @@ var path2 = new Path.Circle(new Point(175, 50), 20);
327
413
  <h2>Methods</h2>
328
414
 
329
415
 
416
+ <div id="getitembykey-key" class="member">
417
+ <div class="member-link">
418
+ <a name="getitembykey-key" href="#getitembykey-key"><tt><b>getItemByKey</b>(key)</tt></a>
419
+ </div>
420
+ <div class="member-description hidden">
421
+ <div class="member-text">
422
+ <p>Returns the item of the host&rsquo;s node with the given key, loading only the children of its ancestors.</p>
423
+
424
+
425
+ <ul class="member-list">
426
+ <h4>Parameters:</h4>
427
+
428
+ <li>
429
+ <tt>key:</tt>
430
+ <tt>Number</tt>
431
+ &mdash;&nbsp;the key of the host&rsquo;s node
432
+
433
+ </li>
434
+
435
+ </ul>
436
+
437
+
438
+ <ul class="member-list">
439
+ <h4>Returns:</h4>
440
+
441
+ <li>
442
+ <tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the item, or <code>null</code> if the source has no such node
443
+ </li>
444
+
445
+
446
+ </ul>
447
+
448
+
449
+
450
+
451
+
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+
457
+ <div id="invalidate-columns" class="member">
458
+ <div class="member-link">
459
+ <a name="invalidate-columns" href="#invalidate-columns"><tt><b>invalidate</b>(columns)</tt></a>
460
+ </div>
461
+ <div class="member-description hidden">
462
+ <div class="member-text">
463
+ <p>Updates the items of changed host nodes, given in the column format of the source&rsquo;s <code>getChildren()</code>, with two more flags: 16 when the node&rsquo;s own content changed, so the item loads it again on next access, and 32 when its list of children changed, so it loads them again right away if it had loaded them, keeping the items of nodes that remain. Nodes without items are skipped.</p>
464
+
465
+
466
+ <ul class="member-list">
467
+ <h4>Parameters:</h4>
468
+
469
+ <li>
470
+ <tt>columns:</tt>
471
+ <tt>Object</tt>
472
+ &mdash;&nbsp;the records of the changed nodes
473
+
474
+ </li>
475
+
476
+ </ul>
477
+
478
+
479
+
480
+
481
+
482
+
483
+ </div>
484
+ </div>
485
+ </div>
486
+
487
+
488
+ <div id="takechanges" class="member">
489
+ <div class="member-link">
490
+ <a name="takechanges" href="#takechanges"><tt><b>takeChanges</b>()</tt></a>
491
+ </div>
492
+ <div class="member-description hidden">
493
+ <div class="member-text">
494
+ <p>Returns the changes logged since tracking was activated or since the last call, and clears the log. Each item is listed once, with the <a href="../classes/ChangeFlag.html"><tt>ChangeFlag</tt></a> values of all its changes combined. Removed items are listed with the <code>ChangeFlag.INSERTION</code> flag.</p>
495
+
496
+
497
+
498
+ <ul class="member-list">
499
+ <h4>Returns:</h4>
500
+
501
+ <li>
502
+ <tt>Array of <tt>Object</tt> objects</tt>&nbsp;&mdash;&nbsp;the changes as <code>{ item, flags }</code> objects, or <code>null</code> if <a href="../classes/Project.html#trackchanges"><tt>trackChanges</tt></a> is off
503
+ </li>
504
+
505
+
506
+ </ul>
507
+
508
+
509
+
510
+
511
+
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+
330
517
  <div id="activate" class="member">
331
518
  <div class="member-link">
332
519
  <a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
@@ -551,22 +738,22 @@ var path2 = new Path.Circle(new Point(175, 50), 20);
551
738
  <div class="member-description hidden">
552
739
  <div class="member-text">
553
740
  <p>Performs a hit-test on the items contained within the project at the location of the specified point.</p>
554
- <p>The options object allows you to control the specifics of the hit-test and may contain a combination of the following values:</p>
741
+ <p>The options object allows you to control the specifics of the hit-test. Without options, <code>fill</code>, <code>stroke</code> and <code>segments</code> are hit-tested. As soon as an options object is passed, only the hit-tests that it sets to <code>true</code> are performed. It may contain a combination of the following values:</p>
555
742
  <ul class="member-list">
556
743
  <h4>Options:</h4>
557
- <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
744
+ <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test, in project coordinates &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
558
745
  <li><tt>options.class: <tt>Function</tt></tt> &mdash; only hit-test against a specific item class, or any of its sub-classes, by providing the constructor function against which an <code>instanceof</code> check is performed: <tt>Group</tt>, <tt>Layer</tt>, <tt>Path</tt>, <tt>CompoundPath</tt>, <tt>Shape</tt>, <tt>Raster</tt>, <tt>SymbolItem</tt>, <tt>PointText</tt>, &hellip;</li>
559
746
  <li><tt>options.match: <tt>Function</tt></tt> &mdash; a match function to be called for each found hit result: Return <code>true</code> to return the result, <code>false</code> to keep searching</li>
560
- <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items &mdash;&nbsp;default: <tt>true</tt></li>
561
- <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width &mdash;&nbsp;default: <tt>true</tt></li>
562
- <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items &mdash;&nbsp;default: <tt>true</tt></li>
747
+ <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items</li>
748
+ <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width</li>
749
+ <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items</li>
563
750
  <li><tt>options.curves: <tt>Boolean</tt></tt> &mdash; hit-test the curves of path items, without taking the stroke color or width into account</li>
564
751
  <li><tt>options.handles: <tt>Boolean</tt></tt> &mdash; hit-test for the handles (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</li>
565
752
  <li><tt>options.ends: <tt>Boolean</tt></tt> &mdash; only hit-test for the first or last segment points of open path items</li>
566
753
  <li><tt>options.position: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Item.html#position"><tt>item.position</tt></a> of of items, which depends on the setting of <a href="../classes/Item.html#pivot"><tt>item.pivot</tt></a></li>
567
754
  <li><tt>options.center: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
568
755
  <li><tt>options.bounds: <tt>Boolean</tt></tt> &mdash; hit-test the corners and side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
569
- <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
756
+ <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; only hit-test items that have <a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <code>true</code></li>
570
757
  <li><tt>options.selected: <tt>Boolean</tt></tt> &mdash; only hit selected items</li>
571
758
  </ul>
572
759
 
@@ -700,7 +887,7 @@ var path2 = new Path.Circle(new Point(175, 50), 20);
700
887
  <h4>Returns:</h4>
701
888
 
702
889
  <li>
703
- <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching items contained in the project
890
+ <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching items contained in the project, in their stacking order from bottom to top, with each item listed before its own descendants
704
891
  </li>
705
892
 
706
893
 
@@ -1151,6 +1338,8 @@ for (var i = 0; i < items.length; i++) {
1151
1338
  <li><tt>options.precision: <tt>Number</tt></tt> &mdash; the amount of fractional digits in numbers used in SVG data &mdash;&nbsp;default: <tt>5</tt></li>
1152
1339
  <li><tt>options.matchShapes: <tt>Boolean</tt></tt> &mdash; whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match &mdash;&nbsp;default: <tt>false</tt></li>
1153
1340
  <li><tt>options.embedImages: <tt>Boolean</tt></tt> &mdash; whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. &mdash;&nbsp;default: <tt>true</tt></li>
1341
+ <li><tt>options.reuseImages: <tt>Boolean</tt></tt> &mdash; whether raster images with the same content should only be exported once into the <code>&lt;defs&gt;</code> element, and placed through <code>&lt;use&gt;</code> elements referencing it &mdash;&nbsp;default: <tt>false</tt></li>
1342
+ <li><tt>options.idPrefix: <tt>String</tt></tt> &mdash; a prefix for the ids generated for definitions such as gradients, clip paths and symbols, to keep them unique when several exported SVGs are placed in one document &mdash;&nbsp;default: <tt>&rsquo;&rsquo;</tt></li>
1154
1343
  <li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> &mdash; wether to only include style attributes in the SVG output that differ from their parents, or to always include them (much faster but leading to redundancies). &mdash;&nbsp;default: <tt>true</tt></li>
1155
1344
  </ul>
1156
1345
 
@@ -1193,9 +1382,13 @@ for (var i = 0; i < items.length; i++) {
1193
1382
  <div class="member-description hidden">
1194
1383
  <div class="member-text">
1195
1384
  <p>Converts the provided SVG content into Paper.js items and adds them to the active layer of this project. Note that the project is not cleared first. You can call <a href="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
1385
+ <p><code>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
1196
1386
  <ul class="member-list">
1197
1387
  <h4>Options:</h4>
1198
1388
  <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape items should be expanded to path items &mdash;&nbsp;default: <tt>false</tt></li>
1389
+ <li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
1390
+ value of the rasters created for `<image>` elements, to load their
1391
+ images with CORS</li>
1199
1392
  <li><tt>options.onLoad: <tt>Function</tt></tt> &mdash; the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external resources.</li>
1200
1393
  <li><tt>options.onError: <tt>Function</tt></tt> &mdash; the callback function to call if an error occurs during loading. Only required when loading from external resources.</li>
1201
1394
  <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the imported items should be added to the project that <code>importSVG()</code> is called on &mdash;&nbsp;default: <tt>true</tt></li>
@@ -1297,7 +1490,7 @@ for (var i = 0; i < items.length; i++) {
1297
1490
 
1298
1491
  <!-- =========================== copyright notice ========================== -->
1299
1492
  <p class="footer">
1300
- Paper.js v0.12.20<br>
1493
+ Paper.js v0.14.0<br>
1301
1494
  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>
1302
1495
  <div class="content-end"></div>
1303
1496