paper 0.13.0 → 0.15.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 (57) hide show
  1. package/CHANGELOG.md +337 -0
  2. package/README.md +19 -14
  3. package/dist/docs/assets/js/paper.js +7351 -1706
  4. package/dist/docs/classes/AreaText.html +8658 -0
  5. package/dist/docs/classes/ChangeFlag.html +385 -0
  6. package/dist/docs/classes/Color.html +2 -1
  7. package/dist/docs/classes/CompoundPath.html +208 -69
  8. package/dist/docs/classes/Curve.html +2 -1
  9. package/dist/docs/classes/CurveLocation.html +2 -1
  10. package/dist/docs/classes/Event.html +5 -4
  11. package/dist/docs/classes/Gradient.html +2 -1
  12. package/dist/docs/classes/GradientStop.html +2 -1
  13. package/dist/docs/classes/Group.html +204 -17
  14. package/dist/docs/classes/HitResult.html +4 -2
  15. package/dist/docs/classes/HostItem.html +6786 -0
  16. package/dist/docs/classes/Item.html +193 -17
  17. package/dist/docs/classes/Key.html +2 -1
  18. package/dist/docs/classes/KeyEvent.html +5 -4
  19. package/dist/docs/classes/Layer.html +201 -17
  20. package/dist/docs/classes/Matrix.html +2 -1
  21. package/dist/docs/classes/MouseEvent.html +5 -4
  22. package/dist/docs/classes/PaperScope.html +5 -2
  23. package/dist/docs/classes/PaperScript.html +6 -2
  24. package/dist/docs/classes/Path.html +183 -70
  25. package/dist/docs/classes/PathItem.html +326 -187
  26. package/dist/docs/classes/PathText.html +8528 -0
  27. package/dist/docs/classes/Point.html +13 -2
  28. package/dist/docs/classes/PointText.html +1404 -63
  29. package/dist/docs/classes/Project.html +221 -1
  30. package/dist/docs/classes/Raster.html +136 -17
  31. package/dist/docs/classes/Rectangle.html +3 -2
  32. package/dist/docs/classes/Segment.html +2 -1
  33. package/dist/docs/classes/Shape.html +136 -17
  34. package/dist/docs/classes/Size.html +4 -2
  35. package/dist/docs/classes/Style.html +768 -15
  36. package/dist/docs/classes/SymbolDefinition.html +2 -1
  37. package/dist/docs/classes/SymbolItem.html +136 -17
  38. package/dist/docs/classes/TextItem.html +1566 -222
  39. package/dist/docs/classes/TextRange.html +186 -0
  40. package/dist/docs/classes/TextStory.html +355 -0
  41. package/dist/docs/classes/Tool.html +127 -1
  42. package/dist/docs/classes/ToolEvent.html +57 -4
  43. package/dist/docs/classes/Tween.html +17 -1
  44. package/dist/docs/classes/View.html +148 -5
  45. package/dist/docs/classes/global.html +2 -1
  46. package/dist/docs/classes/index.html +2 -2
  47. package/dist/docs/index.html +1 -1
  48. package/dist/paper-core.js +7160 -1663
  49. package/dist/paper-core.min.js +3 -3
  50. package/dist/paper-full.js +7351 -1706
  51. package/dist/paper-full.min.js +3 -3
  52. package/dist/paper-hosted.js +24058 -0
  53. package/dist/paper.d.ts +1996 -155
  54. package/examples/Scripts/AreaText.html +65 -0
  55. package/examples/Scripts/PathText.html +48 -0
  56. package/examples/Scripts/TextRanges.html +51 -0
  57. package/package.json +8 -11
@@ -17,6 +17,7 @@
17
17
 
18
18
  <p>Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don&rsquo;t need to be updated with every transformation.</p>
19
19
 
20
+
20
21
  </div>
21
22
 
22
23
  <!-- =============================== constructors ========================== -->
@@ -302,7 +303,7 @@ for (var i = 0; i < 100; i++) {
302
303
 
303
304
  <!-- =========================== copyright notice ========================== -->
304
305
  <p class="footer">
305
- Paper.js v0.13.0<br>
306
+ Paper.js v0.15.0<br>
306
307
  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>
307
308
  <div class="content-end"></div>
308
309
 
@@ -19,6 +19,7 @@
19
19
 
20
20
  <p>A symbol item represents an instance of a symbol which has been placed in a Paper.js project. All instances share the symbol&rsquo;s definition, which they draw as it is: styles set on a symbol item don&rsquo;t reach the items of the definition, unlike <code>&lt;use&gt;</code> elements in SVG.</p>
21
21
 
22
+
22
23
  </div>
23
24
 
24
25
  <!-- =============================== constructors ========================== -->
@@ -162,6 +163,32 @@ for (var i = 0; i < 100; i++) {
162
163
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
163
164
 
164
165
 
166
+ <div id="key" class="member">
167
+ <div class="member-link">
168
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
169
+ </div>
170
+ <div class="member-description hidden">
171
+
172
+ <div class="member-text">
173
+ <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#host"><tt>project.host</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>
174
+
175
+
176
+
177
+ <ul class="member-list">
178
+ <h4>Type:</h4>
179
+ <li>
180
+ <tt>Number</tt>
181
+ </li>
182
+ </ul>
183
+
184
+
185
+
186
+ </div>
187
+
188
+ </div>
189
+ </div>
190
+
191
+
165
192
  <div id="id" class="member">
166
193
  <div class="member-link">
167
194
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -508,7 +535,7 @@ path.visible = false;
508
535
  <div class="member-description hidden">
509
536
 
510
537
  <div class="member-text">
511
- <p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. If blend-modes cannot be rendered natively, they are emulated. Be aware that emulation can have an impact on performance.</p>
538
+ <p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. Where the canvas doesn&rsquo;t support a CSS blend mode natively, it draws as <code>&#39;normal&#39;</code>. Paper.js&rsquo;s own modes <code>&#39;add&#39;</code>, <code>&#39;subtract&#39;</code>, <code>&#39;average&#39;</code>, <code>&#39;pin-light&#39;</code> and <code>&#39;negation&#39;</code> are emulated, which can have an impact on performance.</p>
512
539
 
513
540
 
514
541
  <ul class="member-list">
@@ -661,6 +688,42 @@ circle2.opacity = 0.5;
661
688
  </div>
662
689
 
663
690
 
691
+ <div id="textwrap" class="member">
692
+ <div class="member-link">
693
+ <a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
694
+ </div>
695
+ <div class="member-description hidden">
696
+
697
+ <div class="member-text">
698
+ <p>Specifies whether, and how, the item pushes aside the text of the <a href="../classes/AreaText.html"><tt>AreaText</tt></a> items below it in its layer: <code>null</code>, or an object with <code>offset</code>, the space kept between them, and <code>invert</code>, to let the text flow inside it instead. <code>true</code> sets the defaults.</p>
699
+
700
+
701
+
702
+ <ul class="member-list">
703
+ <h4>Default:</h4>
704
+ <li><tt>null</tt></li>
705
+ </ul>
706
+
707
+ <ul class="member-list">
708
+ <h4>Type:</h4>
709
+ <li>
710
+ <tt>Object</tt>
711
+ </li>
712
+ </ul>
713
+
714
+
715
+ <h4>Example:</h4>
716
+
717
+
718
+ <pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
719
+ circle.textWrap = { offset: 10 };</code></pre>
720
+
721
+ </div>
722
+
723
+ </div>
724
+ </div>
725
+
726
+
664
727
  <div id="selected" class="member">
665
728
  <div class="member-link">
666
729
  <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
@@ -718,6 +781,32 @@ path.selected = true; // Select the path
718
781
  </div>
719
782
 
720
783
 
784
+ </div>
785
+
786
+ </div>
787
+ </div>
788
+
789
+
790
+ <div id="fullyselected" class="member">
791
+ <div class="member-link">
792
+ <a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
793
+ </div>
794
+ <div class="member-description hidden">
795
+
796
+ <div class="member-text">
797
+ <p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
798
+
799
+
800
+
801
+ <ul class="member-list">
802
+ <h4>Type:</h4>
803
+ <li>
804
+ <tt>Boolean</tt>
805
+ </li>
806
+ </ul>
807
+
808
+
809
+
721
810
  </div>
722
811
 
723
812
  </div>
@@ -957,6 +1046,7 @@ circle.position.x += 100;
957
1046
 
958
1047
  <div class="member-text">
959
1048
  <p>The bounding rectangle of the item including stroke width.</p>
1049
+ <p>Setting it fits the item&rsquo;s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> into the given rectangle minus the extent of the stroke on each side, also where this extent changes with the item&rsquo;s proportions, as with miters. A rectangle smaller than the stroke itself shrinks the bounds to its center.</p>
960
1050
 
961
1051
 
962
1052
 
@@ -1245,6 +1335,34 @@ circle.position.x += 100;
1245
1335
 
1246
1336
 
1247
1337
 
1338
+ </div>
1339
+
1340
+ </div>
1341
+ </div>
1342
+
1343
+
1344
+ <div id="scope" class="member">
1345
+ <div class="member-link">
1346
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
1347
+ </div>
1348
+ <div class="member-description hidden">
1349
+
1350
+ <div class="member-text">
1351
+ <p>The scope that this item belongs to, through its project.</p>
1352
+
1353
+ <p>Read only.</p>
1354
+
1355
+
1356
+
1357
+ <ul class="member-list">
1358
+ <h4>Type:</h4>
1359
+ <li>
1360
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
1361
+ </li>
1362
+ </ul>
1363
+
1364
+
1365
+
1248
1366
  </div>
1249
1367
 
1250
1368
  </div>
@@ -1860,7 +1978,7 @@ path3.strokeJoin = 'bevel';
1860
1978
  <div class="member-description hidden">
1861
1979
 
1862
1980
  <div class="member-text">
1863
- <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>
1981
+ <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>
1864
1982
 
1865
1983
 
1866
1984
 
@@ -3068,9 +3186,9 @@ for (var i = 0; i < 20; i++) {
3068
3186
  <p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
3069
3187
  <ul class="member-list">
3070
3188
  <h4>Options:</h4>
3071
- <li><tt>resolution: <tt>Number</tt></tt> &mdash; the desired resolution to be used when rasterizing, in pixels per inch (DPI). If not specified, the value of <code>view.resolution</code> is used by default. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
3072
- <li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; specifies a raster to be reused when rasterizing. If the raster has the desired size already, then the underlying canvas is reused and no new memory needs to be allocated. If no raster is provided, a new raster item is created and returned instead. &mdash;&nbsp;default: <tt>null</tt></li>
3073
- <li><tt>insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
3189
+ <li><tt>options.resolution: <tt>Number</tt></tt> &mdash; the desired resolution to be used when rasterizing, in pixels per inch (DPI). If not specified, the value of <code>view.resolution</code> is used by default. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
3190
+ <li><tt>options.raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; specifies a raster to be reused when rasterizing. If the raster has the desired size already, then the underlying canvas is reused and no new memory needs to be allocated. If no raster is provided, a new raster item is created and returned instead. &mdash;&nbsp;default: <tt>null</tt></li>
3191
+ <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
3074
3192
  </ul>
3075
3193
 
3076
3194
  <ul class="member-list">
@@ -3255,7 +3373,7 @@ function onMouseDown(event) {
3255
3373
  </div>
3256
3374
  <div class="member-description hidden">
3257
3375
  <div class="member-text">
3258
-
3376
+ <p>Checks whether the item overlaps with the given item: whether their outlines cross, or one contains the other, as <a href="../classes/Rectangle.html#intersects-rect"><tt>rectangle.intersects(rect)</tt></a> does for rectangles. Items other than paths and shapes are checked through their bounds. To only check whether outlines cross, use <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>.</p>
3259
3377
 
3260
3378
 
3261
3379
  <ul class="member-list">
@@ -3275,7 +3393,7 @@ function onMouseDown(event) {
3275
3393
  <h4>Returns:</h4>
3276
3394
 
3277
3395
  <li>
3278
- <tt><tt>Boolean</tt></tt>
3396
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items overlap, <tt>false</tt> otherwise
3279
3397
  </li>
3280
3398
 
3281
3399
 
@@ -3771,6 +3889,7 @@ function onMouseDown(event) {
3771
3889
  <div class="member-text">
3772
3890
  <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>
3773
3891
  <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>
3892
+ <p>URLs are fetched as they are, so validate URLs that come from untrusted sources first, especially on servers, where they could reach internal addresses.</p>
3774
3893
  <ul class="member-list">
3775
3894
  <h4>Options:</h4>
3776
3895
  <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>
@@ -4324,11 +4443,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4324
4443
 
4325
4444
  <div id="replacewith-item" class="member">
4326
4445
  <div class="member-link">
4327
- <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
4446
+ <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
4328
4447
  </div>
4329
4448
  <div class="member-description hidden">
4330
4449
  <div class="member-text">
4331
- <p>Replaces this item with the provided new item which will takes its place in the project hierarchy instead.</p>
4450
+ <p>Replaces this item with the provided new items which will take its place in the project hierarchy instead, in the given order. This also ungroups a group, e.g. <code>group.replaceWith(…group.children)</code>, but note that the items keep their own matrices, see <a href="../classes/Group.html#ungroup"><tt>group.ungroup</tt></a>().</p>
4332
4451
 
4333
4452
 
4334
4453
  <ul class="member-list">
@@ -4337,7 +4456,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4337
4456
  <li>
4338
4457
  <tt>item:</tt>
4339
4458
  <a href="../classes/Item.html"><tt>Item</tt></a>
4340
- &mdash;&nbsp;the item that will replace this item
4459
+ &mdash;&nbsp;the items that will replace this item
4341
4460
 
4342
4461
  </li>
4343
4462
 
@@ -4510,7 +4629,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4510
4629
  </div>
4511
4630
  <div class="member-description hidden">
4512
4631
  <div class="member-text">
4513
- <p>Checks whether the item has a fill.</p>
4632
+ <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>
4514
4633
 
4515
4634
 
4516
4635
 
@@ -4518,7 +4637,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4518
4637
  <h4>Returns:</h4>
4519
4638
 
4520
4639
  <li>
4521
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
4640
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
4522
4641
  </li>
4523
4642
 
4524
4643
 
@@ -6152,10 +6271,10 @@ function onMouseDown(event) {
6152
6271
  <p>Removes the item when the events specified in the passed options object occur.</p>
6153
6272
  <ul class="member-list">
6154
6273
  <h4>Options:</h4>
6155
- <li><tt>options.move: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
6156
- <li><tt>options.drag: undefined</tt> &mdash; {Boolena) remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
6157
- <li><tt>options.down: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
6158
- <li><tt>options.up: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
6274
+ <li><tt>options.move: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
6275
+ <li><tt>options.drag: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
6276
+ <li><tt>options.down: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
6277
+ <li><tt>options.up: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
6159
6278
  </ul>
6160
6279
 
6161
6280
  <ul class="member-list">
@@ -6784,7 +6903,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6784
6903
 
6785
6904
  <!-- =========================== copyright notice ========================== -->
6786
6905
  <p class="footer">
6787
- Paper.js v0.13.0<br>
6906
+ Paper.js v0.15.0<br>
6788
6907
  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>
6789
6908
  <div class="content-end"></div>
6790
6909