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
@@ -220,6 +220,37 @@ function onMouseMove(event) {
220
220
 
221
221
 
222
222
 
223
+ </div>
224
+
225
+ </div>
226
+ </div>
227
+
228
+
229
+ <div id="tracking" class="member">
230
+ <div class="member-link">
231
+ <a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
232
+ </div>
233
+ <div class="member-description hidden">
234
+
235
+ <div class="member-text">
236
+ <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>
237
+
238
+
239
+
240
+ <ul class="member-list">
241
+ <h4>Default:</h4>
242
+ <li><tt>0</tt></li>
243
+ </ul>
244
+
245
+ <ul class="member-list">
246
+ <h4>Type:</h4>
247
+ <li>
248
+ <tt>Number</tt>
249
+ </li>
250
+ </ul>
251
+
252
+
253
+
223
254
  </div>
224
255
 
225
256
  </div>
@@ -276,6 +307,32 @@ function onMouseMove(event) {
276
307
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
277
308
 
278
309
 
310
+ <div id="key" class="member">
311
+ <div class="member-link">
312
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
313
+ </div>
314
+ <div class="member-description hidden">
315
+
316
+ <div class="member-text">
317
+ <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>
318
+
319
+
320
+
321
+ <ul class="member-list">
322
+ <h4>Type:</h4>
323
+ <li>
324
+ <tt>Number</tt>
325
+ </li>
326
+ </ul>
327
+
328
+
329
+
330
+ </div>
331
+
332
+ </div>
333
+ </div>
334
+
335
+
279
336
  <div id="id" class="member">
280
337
  <div class="member-link">
281
338
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -395,6 +452,7 @@ group.children['example'].fillColor = 'red';
395
452
 
396
453
  <div class="member-text">
397
454
  <p>The path style of the item.</p>
455
+ <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>
398
456
 
399
457
 
400
458
 
@@ -737,6 +795,37 @@ circle2.opacity = 0.5;
737
795
  </div>
738
796
 
739
797
 
798
+ </div>
799
+
800
+ </div>
801
+ </div>
802
+
803
+
804
+ <div id="guide" class="member">
805
+ <div class="member-link">
806
+ <a name="guide" href="#guide"><tt><b>guide</b></tt></a>
807
+ </div>
808
+ <div class="member-description hidden">
809
+
810
+ <div class="member-text">
811
+ <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>
812
+
813
+
814
+
815
+ <ul class="member-list">
816
+ <h4>Default:</h4>
817
+ <li><tt>false</tt></li>
818
+ </ul>
819
+
820
+ <ul class="member-list">
821
+ <h4>Type:</h4>
822
+ <li>
823
+ <tt>Boolean</tt>
824
+ </li>
825
+ </ul>
826
+
827
+
828
+
740
829
  </div>
741
830
 
742
831
  </div>
@@ -1327,6 +1416,34 @@ circle.position.x += 100;
1327
1416
 
1328
1417
 
1329
1418
 
1419
+ </div>
1420
+
1421
+ </div>
1422
+ </div>
1423
+
1424
+
1425
+ <div id="scope" class="member">
1426
+ <div class="member-link">
1427
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
1428
+ </div>
1429
+ <div class="member-description hidden">
1430
+
1431
+ <div class="member-text">
1432
+ <p>The scope that this item belongs to, through its project.</p>
1433
+
1434
+ <p>Read only.</p>
1435
+
1436
+
1437
+
1438
+ <ul class="member-list">
1439
+ <h4>Type:</h4>
1440
+ <li>
1441
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
1442
+ </li>
1443
+ </ul>
1444
+
1445
+
1446
+
1330
1447
  </div>
1331
1448
 
1332
1449
  </div>
@@ -1440,6 +1557,7 @@ console.log(group.children[0] == path); // true</code></pre>
1440
1557
 
1441
1558
  <div class="member-text">
1442
1559
  <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>
1560
+ <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>
1443
1561
  <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>
1444
1562
 
1445
1563
 
@@ -1941,7 +2059,7 @@ path3.strokeJoin = 'bevel';
1941
2059
  <div class="member-description hidden">
1942
2060
 
1943
2061
  <div class="member-text">
1944
- <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>
2062
+ <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>
1945
2063
 
1946
2064
 
1947
2065
 
@@ -3380,22 +3498,22 @@ function onMouseDown(event) {
3380
3498
  <div class="member-description hidden">
3381
3499
  <div class="member-text">
3382
3500
  <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>
3383
- <p>The options object allows you to control the specifics of the hit- test and may contain a combination of the following values:</p>
3501
+ <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>
3384
3502
  <ul class="member-list">
3385
3503
  <h4>Options:</h4>
3386
- <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>
3504
+ <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>
3387
3505
  <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>
3388
3506
  <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>
3389
- <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items &mdash;&nbsp;default: <tt>true</tt></li>
3390
- <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>
3391
- <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>
3507
+ <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items</li>
3508
+ <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>
3509
+ <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>
3392
3510
  <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>
3393
3511
  <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>
3394
3512
  <li><tt>options.ends: <tt>Boolean</tt></tt> &mdash; only hit-test for the first or last segment points of open path items</li>
3395
3513
  <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>
3396
3514
  <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>
3397
3515
  <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>
3398
- <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
3516
+ <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>
3399
3517
  <li><tt>options.selected: <tt>Boolean</tt></tt> &mdash; only hit selected items</li>
3400
3518
  </ul>
3401
3519
 
@@ -3634,7 +3752,7 @@ function onMouseDown(event) {
3634
3752
  <h4>Returns:</h4>
3635
3753
 
3636
3754
  <li>
3637
- <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching descendant items
3755
+ <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
3638
3756
  </li>
3639
3757
 
3640
3758
 
@@ -3807,6 +3925,8 @@ function onMouseDown(event) {
3807
3925
  <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>
3808
3926
  <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>
3809
3927
  <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>
3928
+ <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>
3929
+ <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>
3810
3930
  <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>
3811
3931
  </ul>
3812
3932
 
@@ -3849,9 +3969,13 @@ function onMouseDown(event) {
3849
3969
  <div class="member-description hidden">
3850
3970
  <div class="member-text">
3851
3971
  <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>
3972
+ <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>
3852
3973
  <ul class="member-list">
3853
3974
  <h4>Options:</h4>
3854
3975
  <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>
3976
+ <li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
3977
+ value of the rasters created for `<image>` elements, to load their
3978
+ images with CORS</li>
3855
3979
  <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>
3856
3980
  <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>
3857
3981
  <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>
@@ -4327,9 +4451,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4327
4451
  </div>
4328
4452
 
4329
4453
 
4330
- <div id="reduce-options" class="member">
4454
+ <div id="reduce" class="member">
4331
4455
  <div class="member-link">
4332
- <a name="reduce-options" href="#reduce-options"><tt><b>reduce</b>(options)</tt></a>
4456
+ <a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
4333
4457
  </div>
4334
4458
  <div class="member-description hidden">
4335
4459
  <div class="member-text">
@@ -4341,9 +4465,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4341
4465
 
4342
4466
  <li>
4343
4467
  <tt>options:</tt>
4344
-
4345
-
4346
-
4468
+ <tt>Object</tt>
4469
+ &mdash;&nbsp;the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
4470
+ &mdash;&nbsp;optional
4347
4471
  </li>
4348
4472
 
4349
4473
  </ul>
@@ -4585,7 +4709,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4585
4709
  </div>
4586
4710
  <div class="member-description hidden">
4587
4711
  <div class="member-text">
4588
- <p>Checks whether the item has a fill.</p>
4712
+ <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>
4589
4713
 
4590
4714
 
4591
4715
 
@@ -4593,7 +4717,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4593
4717
  <h4>Returns:</h4>
4594
4718
 
4595
4719
  <li>
4596
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
4720
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
4597
4721
  </li>
4598
4722
 
4599
4723
 
@@ -4732,7 +4856,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4732
4856
  </div>
4733
4857
  <div class="member-description hidden">
4734
4858
  <div class="member-text">
4735
- <p>Checks if this item is above the specified item in the stacking order of the project.</p>
4859
+ <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>
4736
4860
 
4737
4861
 
4738
4862
  <ul class="member-list">
@@ -4773,7 +4897,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4773
4897
  </div>
4774
4898
  <div class="member-description hidden">
4775
4899
  <div class="member-text">
4776
- <p>Checks if the item is below the specified item in the stacking order of the project.</p>
4900
+ <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>
4777
4901
 
4778
4902
 
4779
4903
  <ul class="member-list">
@@ -5731,11 +5855,11 @@ circle.scale(3, 1);
5731
5855
 
5732
5856
  <div id="fitbounds-rectangle" class="member">
5733
5857
  <div class="member-link">
5734
- <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
5858
+ <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
5735
5859
  </div>
5736
5860
  <div class="member-description hidden">
5737
5861
  <div class="member-text">
5738
- <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>
5862
+ <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>
5739
5863
 
5740
5864
 
5741
5865
  <ul class="member-list">
@@ -5749,10 +5873,10 @@ circle.scale(3, 1);
5749
5873
  </li>
5750
5874
 
5751
5875
  <li>
5752
- <tt>fill:</tt>
5753
- <tt>Boolean</tt>
5754
-
5755
- &mdash;&nbsp;optional, default: <tt>false</tt>
5876
+ <tt>fit:</tt>
5877
+ <tt>String</tt>⟋<tt>Boolean</tt>
5878
+ &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>.
5879
+ &mdash;&nbsp;optional, default: <tt>&lsquo;contain&rsquo;</tt>
5756
5880
  </li>
5757
5881
 
5758
5882
  </ul>
@@ -5794,7 +5918,7 @@ circlePath.fitBounds(path.bounds);
5794
5918
  </div>
5795
5919
 
5796
5920
 
5797
- <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>
5921
+ <h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
5798
5922
 
5799
5923
  <div class="paperscript split">
5800
5924
 
@@ -5821,7 +5945,7 @@ var circlePath = new Path.Circle({
5821
5945
 
5822
5946
  // Fit the circlePath to the bounding rectangle of
5823
5947
  // the rectangular path:
5824
- circlePath.fitBounds(path.bounds, true);
5948
+ circlePath.fitBounds(path.bounds, 'cover');
5825
5949
  </script>
5826
5950
  <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
5827
5951
  </div>
@@ -6471,7 +6595,7 @@ function onMouseDown(event) {
6471
6595
  <ul class="member-list">
6472
6596
  <h4>Options:</h4>
6473
6597
  <li><tt>options.duration: <tt>Number</tt></tt> &mdash; the duration of the tweening</li>
6474
- <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>
6598
+ <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>
6475
6599
  <li><tt>options.start: <tt>Boolean</tt></tt> &mdash; whether to start tweening automatically &mdash;&nbsp;default: <tt>true</tt></li>
6476
6600
  </ul>
6477
6601
 
@@ -6859,7 +6983,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6859
6983
 
6860
6984
  <!-- =========================== copyright notice ========================== -->
6861
6985
  <p class="footer">
6862
- Paper.js v0.12.20<br>
6986
+ Paper.js v0.14.0<br>
6863
6987
  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>
6864
6988
  <div class="content-end"></div>
6865
6989
 
@@ -59,6 +59,34 @@ tool.onMouseDrag = function(event) {
59
59
  <h2>Properties</h2>
60
60
 
61
61
 
62
+ <div id="scope" class="member">
63
+ <div class="member-link">
64
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
65
+ </div>
66
+ <div class="member-description hidden">
67
+
68
+ <div class="member-text">
69
+ <p>The scope that this tool belongs to.</p>
70
+
71
+ <p>Read only.</p>
72
+
73
+
74
+
75
+ <ul class="member-list">
76
+ <h4>Type:</h4>
77
+ <li>
78
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
79
+ </li>
80
+ </ul>
81
+
82
+
83
+
84
+ </div>
85
+
86
+ </div>
87
+ </div>
88
+
89
+
62
90
  <div id="mindistance" class="member">
63
91
  <div class="member-link">
64
92
  <a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
@@ -111,6 +139,41 @@ tool.onMouseDrag = function(event) {
111
139
  </div>
112
140
 
113
141
 
142
+ <div id="eventinterval" class="member">
143
+ <div class="member-link">
144
+ <a name="eventinterval" href="#eventinterval"><tt><b>eventInterval</b></tt></a>
145
+ </div>
146
+ <div class="member-description hidden">
147
+
148
+ <div class="member-text">
149
+ <p>The interval in milliseconds at which the onMouseDrag event fires again while the mouse button is held, also when the mouse doesn&rsquo;t move. The repeated events are at the last point, with a zero <a href="../classes/ToolEvent.html#delta"><tt>toolEvent.delta</tt></a>. <code>null</code>, the default, or anything up to 0 turns it off.</p>
150
+
151
+
152
+
153
+ <ul class="member-list">
154
+ <h4>Default:</h4>
155
+ <li><tt>null</tt></li>
156
+ </ul>
157
+
158
+ <ul class="member-list">
159
+ <h4>Type:</h4>
160
+ <li>
161
+ <tt>Number</tt>
162
+ </li>
163
+ </ul>
164
+
165
+
166
+ <h4>Example:<span class="description">Fire the onMouseDrag event 10 times a second, while the mouse button is held:</span></h4>
167
+
168
+
169
+ <pre><code>tool.eventInterval = 100;</code></pre>
170
+
171
+ </div>
172
+
173
+ </div>
174
+ </div>
175
+
176
+
114
177
  <div id="fixeddistance" class="member">
115
178
  <div class="member-link">
116
179
  <a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
@@ -243,6 +306,7 @@ tool.onMouseDrag = function(event) {
243
306
 
244
307
  <div class="member-text">
245
308
  <p>The function to be called the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
309
+ <p>While the mouse button is held down, the tool calls <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a> instead, if it defines one, and <code>onMouseMove</code> only otherwise.</p>
246
310
 
247
311
 
248
312
 
@@ -421,6 +485,68 @@ tool.onKeyDown = function(event) {
421
485
  }
422
486
  }</code></pre>
423
487
 
488
+ </div>
489
+
490
+ </div>
491
+ </div>
492
+
493
+
494
+ <h3>Activation Event Handlers</h3>
495
+
496
+ <div id="onactivate" class="member">
497
+ <div class="member-link">
498
+ <a name="onactivate" href="#onactivate"><tt><b>onActivate</b></tt></a>
499
+ </div>
500
+ <div class="member-description hidden">
501
+
502
+ <div class="member-text">
503
+ <p>The function to be called when the tool is activated through <a href="../classes/Tool.html#activate"><tt>activate</tt></a>(). The function receives the previously active tool, which is the tool itself when it was already active.</p>
504
+
505
+
506
+
507
+ <ul class="member-list">
508
+ <h4>Type:</h4>
509
+ <li>
510
+ <tt>Function</tt>⟋<tt>null</tt>
511
+ </li>
512
+ </ul>
513
+
514
+
515
+ <h4>Example:</h4>
516
+
517
+
518
+ <pre><code>tool.onActivate = function(previous) {
519
+ if (previous == tool) {
520
+ console.log('The tool was activated again!');
521
+ }
522
+ }</code></pre>
523
+
524
+ </div>
525
+
526
+ </div>
527
+ </div>
528
+
529
+
530
+ <div id="ondeactivate" class="member">
531
+ <div class="member-link">
532
+ <a name="ondeactivate" href="#ondeactivate"><tt><b>onDeactivate</b></tt></a>
533
+ </div>
534
+ <div class="member-description hidden">
535
+
536
+ <div class="member-text">
537
+ <p>The function to be called when another tool is activated through <a href="../classes/Tool.html#activate"><tt>activate</tt></a>(), while this one is active.</p>
538
+
539
+
540
+
541
+ <ul class="member-list">
542
+ <h4>Type:</h4>
543
+ <li>
544
+ <tt>Function</tt>⟋<tt>null</tt>
545
+ </li>
546
+ </ul>
547
+
548
+
549
+
424
550
  </div>
425
551
 
426
552
  </div>
@@ -752,7 +878,7 @@ tool.onKeyDown = function(event) {
752
878
 
753
879
  <!-- =========================== copyright notice ========================== -->
754
880
  <p class="footer">
755
- Paper.js v0.12.20<br>
881
+ Paper.js v0.14.0<br>
756
882
  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>
757
883
  <div class="content-end"></div>
758
884
 
@@ -55,6 +55,32 @@
55
55
 
56
56
 
57
57
 
58
+ </div>
59
+
60
+ </div>
61
+ </div>
62
+
63
+
64
+ <div id="tool" class="member">
65
+ <div class="member-link">
66
+ <a name="tool" href="#tool"><tt><b>tool</b></tt></a>
67
+ </div>
68
+ <div class="member-description hidden">
69
+
70
+ <div class="member-text">
71
+ <p>The tool that fired the event.</p>
72
+
73
+
74
+
75
+ <ul class="member-list">
76
+ <h4>Type:</h4>
77
+ <li>
78
+ <a href="../classes/Tool.html"><tt>Tool</tt></a>
79
+ </li>
80
+ </ul>
81
+
82
+
83
+
58
84
  </div>
59
85
 
60
86
  </div>
@@ -437,7 +463,7 @@ function onMouseUp(event) {
437
463
 
438
464
  <!-- =========================== copyright notice ========================== -->
439
465
  <p class="footer">
440
- Paper.js v0.12.20<br>
466
+ Paper.js v0.14.0<br>
441
467
  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>
442
468
  <div class="content-end"></div>
443
469
 
@@ -365,7 +365,7 @@ setTimeout(function(){
365
365
 
366
366
  <!-- =========================== copyright notice ========================== -->
367
367
  <p class="footer">
368
- Paper.js v0.12.20<br>
368
+ Paper.js v0.14.0<br>
369
369
  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>
370
370
  <div class="content-end"></div>
371
371