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
@@ -19,6 +19,7 @@
19
19
 
20
20
  <p>A PointText item represents a piece of typography in your Paper.js project which starts from a certain point and extends by the amount of characters contained in it.</p>
21
21
 
22
+
22
23
  </div>
23
24
 
24
25
  <!-- =============================== constructors ========================== -->
@@ -194,6 +195,32 @@ var text = new PointText({
194
195
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
195
196
 
196
197
 
198
+ <div id="key" class="member">
199
+ <div class="member-link">
200
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
201
+ </div>
202
+ <div class="member-description hidden">
203
+
204
+ <div class="member-text">
205
+ <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>
206
+
207
+
208
+
209
+ <ul class="member-list">
210
+ <h4>Type:</h4>
211
+ <li>
212
+ <tt>Number</tt>
213
+ </li>
214
+ </ul>
215
+
216
+
217
+
218
+ </div>
219
+
220
+ </div>
221
+ </div>
222
+
223
+
197
224
  <div id="id" class="member">
198
225
  <div class="member-link">
199
226
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -540,7 +567,7 @@ path.visible = false;
540
567
  <div class="member-description hidden">
541
568
 
542
569
  <div class="member-text">
543
- <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>
570
+ <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>
544
571
 
545
572
 
546
573
  <ul class="member-list">
@@ -693,6 +720,42 @@ circle2.opacity = 0.5;
693
720
  </div>
694
721
 
695
722
 
723
+ <div id="textwrap" class="member">
724
+ <div class="member-link">
725
+ <a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
726
+ </div>
727
+ <div class="member-description hidden">
728
+
729
+ <div class="member-text">
730
+ <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>
731
+
732
+
733
+
734
+ <ul class="member-list">
735
+ <h4>Default:</h4>
736
+ <li><tt>null</tt></li>
737
+ </ul>
738
+
739
+ <ul class="member-list">
740
+ <h4>Type:</h4>
741
+ <li>
742
+ <tt>Object</tt>
743
+ </li>
744
+ </ul>
745
+
746
+
747
+ <h4>Example:</h4>
748
+
749
+
750
+ <pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
751
+ circle.textWrap = { offset: 10 };</code></pre>
752
+
753
+ </div>
754
+
755
+ </div>
756
+ </div>
757
+
758
+
696
759
  <div id="selected" class="member">
697
760
  <div class="member-link">
698
761
  <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
@@ -750,6 +813,32 @@ path.selected = true; // Select the path
750
813
  </div>
751
814
 
752
815
 
816
+ </div>
817
+
818
+ </div>
819
+ </div>
820
+
821
+
822
+ <div id="fullyselected" class="member">
823
+ <div class="member-link">
824
+ <a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
825
+ </div>
826
+ <div class="member-description hidden">
827
+
828
+ <div class="member-text">
829
+ <p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
830
+
831
+
832
+
833
+ <ul class="member-list">
834
+ <h4>Type:</h4>
835
+ <li>
836
+ <tt>Boolean</tt>
837
+ </li>
838
+ </ul>
839
+
840
+
841
+
753
842
  </div>
754
843
 
755
844
  </div>
@@ -989,6 +1078,7 @@ circle.position.x += 100;
989
1078
 
990
1079
  <div class="member-text">
991
1080
  <p>The bounding rectangle of the item including stroke width.</p>
1081
+ <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>
992
1082
 
993
1083
 
994
1084
 
@@ -1277,6 +1367,34 @@ circle.position.x += 100;
1277
1367
 
1278
1368
 
1279
1369
 
1370
+ </div>
1371
+
1372
+ </div>
1373
+ </div>
1374
+
1375
+
1376
+ <div id="scope" class="member">
1377
+ <div class="member-link">
1378
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
1379
+ </div>
1380
+ <div class="member-description hidden">
1381
+
1382
+ <div class="member-text">
1383
+ <p>The scope that this item belongs to, through its project.</p>
1384
+
1385
+ <p>Read only.</p>
1386
+
1387
+
1388
+
1389
+ <ul class="member-list">
1390
+ <h4>Type:</h4>
1391
+ <li>
1392
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
1393
+ </li>
1394
+ </ul>
1395
+
1396
+
1397
+
1280
1398
  </div>
1281
1399
 
1282
1400
  </div>
@@ -1892,7 +2010,7 @@ path3.strokeJoin = 'bevel';
1892
2010
  <div class="member-description hidden">
1893
2011
 
1894
2012
  <div class="member-text">
1895
- <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>
2013
+ <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>
1896
2014
 
1897
2015
 
1898
2016
 
@@ -3100,9 +3218,9 @@ for (var i = 0; i < 20; i++) {
3100
3218
  <p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
3101
3219
  <ul class="member-list">
3102
3220
  <h4>Options:</h4>
3103
- <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>
3104
- <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>
3105
- <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>
3221
+ <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>
3222
+ <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>
3223
+ <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>
3106
3224
  </ul>
3107
3225
 
3108
3226
  <ul class="member-list">
@@ -3287,7 +3405,7 @@ function onMouseDown(event) {
3287
3405
  </div>
3288
3406
  <div class="member-description hidden">
3289
3407
  <div class="member-text">
3290
-
3408
+ <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>
3291
3409
 
3292
3410
 
3293
3411
  <ul class="member-list">
@@ -3307,7 +3425,7 @@ function onMouseDown(event) {
3307
3425
  <h4>Returns:</h4>
3308
3426
 
3309
3427
  <li>
3310
- <tt><tt>Boolean</tt></tt>
3428
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items overlap, <tt>false</tt> otherwise
3311
3429
  </li>
3312
3430
 
3313
3431
 
@@ -3803,6 +3921,7 @@ function onMouseDown(event) {
3803
3921
  <div class="member-text">
3804
3922
  <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>
3805
3923
  <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>
3924
+ <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>
3806
3925
  <ul class="member-list">
3807
3926
  <h4>Options:</h4>
3808
3927
  <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>
@@ -4356,11 +4475,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4356
4475
 
4357
4476
  <div id="replacewith-item" class="member">
4358
4477
  <div class="member-link">
4359
- <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
4478
+ <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
4360
4479
  </div>
4361
4480
  <div class="member-description hidden">
4362
4481
  <div class="member-text">
4363
- <p>Replaces this item with the provided new item which will takes its place in the project hierarchy instead.</p>
4482
+ <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>
4364
4483
 
4365
4484
 
4366
4485
  <ul class="member-list">
@@ -4369,7 +4488,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4369
4488
  <li>
4370
4489
  <tt>item:</tt>
4371
4490
  <a href="../classes/Item.html"><tt>Item</tt></a>
4372
- &mdash;&nbsp;the item that will replace this item
4491
+ &mdash;&nbsp;the items that will replace this item
4373
4492
 
4374
4493
  </li>
4375
4494
 
@@ -4542,7 +4661,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4542
4661
  </div>
4543
4662
  <div class="member-description hidden">
4544
4663
  <div class="member-text">
4545
- <p>Checks whether the item has a fill.</p>
4664
+ <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>
4546
4665
 
4547
4666
 
4548
4667
 
@@ -4550,7 +4669,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4550
4669
  <h4>Returns:</h4>
4551
4670
 
4552
4671
  <li>
4553
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
4672
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
4554
4673
  </li>
4555
4674
 
4556
4675
 
@@ -6184,10 +6303,10 @@ function onMouseDown(event) {
6184
6303
  <p>Removes the item when the events specified in the passed options object occur.</p>
6185
6304
  <ul class="member-list">
6186
6305
  <h4>Options:</h4>
6187
- <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>
6188
- <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>
6189
- <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>
6190
- <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>
6306
+ <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>
6307
+ <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>
6308
+ <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>
6309
+ <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>
6191
6310
  </ul>
6192
6311
 
6193
6312
  <ul class="member-list">
@@ -6818,17 +6937,22 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6818
6937
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/TextItem.html"><tt>TextItem</tt></a></h2>
6819
6938
 
6820
6939
 
6821
- <div id="content" class="member">
6940
+ <div id="orientation" class="member">
6822
6941
  <div class="member-link">
6823
- <a name="content" href="#content"><tt><b>content</b></tt></a>
6942
+ <a name="orientation" href="#orientation"><tt><b>orientation</b></tt></a>
6824
6943
  </div>
6825
6944
  <div class="member-description hidden">
6826
6945
 
6827
6946
  <div class="member-text">
6828
- <p>The text contents of the text item.</p>
6947
+ <p>The direction the text&rsquo;s lines run in: <code>&#39;horizontal&#39;</code>, or <code>&#39;vertical&#39;</code> from top to bottom, with the lines from right to left.</p>
6829
6948
 
6830
6949
 
6831
6950
 
6951
+ <ul class="member-list">
6952
+ <h4>Default:</h4>
6953
+ <li><tt>'horizontal'</tt></li>
6954
+ </ul>
6955
+
6832
6956
  <ul class="member-list">
6833
6957
  <h4>Type:</h4>
6834
6958
  <li>
@@ -6837,51 +6961,175 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6837
6961
  </ul>
6838
6962
 
6839
6963
 
6840
- <h4>Example:<span class="description">Setting the content of a PointText item:</span></h4>
6964
+
6965
+ </div>
6841
6966
 
6842
- <div class="paperscript split">
6967
+ </div>
6968
+ </div>
6843
6969
 
6844
- <div class="buttons">
6845
- <div class="button run">Run</div>
6970
+
6971
+ <div id="textpath" class="member">
6972
+ <div class="member-link">
6973
+ <a name="textpath" href="#textpath"><tt><b>textPath</b></tt></a>
6846
6974
  </div>
6975
+ <div class="member-description hidden">
6847
6976
 
6848
- <script type="text/paperscript" canvas="canvas-61">
6849
- // Create a point-text item at {x: 30, y: 30}:
6850
- var text = new PointText(new Point(30, 30));
6851
- text.fillColor = 'black';
6977
+ <div class="member-text">
6978
+ <p>The path that the text flows in (<a href="../classes/AreaText.html"><tt>AreaText</tt></a>) or along (<a href="../classes/PathText.html"><tt>PathText</tt></a>). It guides the text and isn&rsquo;t drawn itself.</p>
6979
+
6980
+
6981
+
6982
+ <ul class="member-list">
6983
+ <h4>Type:</h4>
6984
+ <li>
6985
+ <a href="../classes/PathItem.html"><tt>PathItem</tt></a>
6986
+ </li>
6987
+ </ul>
6988
+
6989
+
6990
+
6991
+ </div>
6852
6992
 
6853
- // Set the content of the text item:
6854
- text.content = 'Hello world';
6855
- </script>
6856
- <div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
6993
+ </div>
6857
6994
  </div>
6858
6995
 
6996
+
6997
+ <h3>Linking</h3>
6859
6998
 
6860
- <h4>Example:<span class="description">Interactive example, move your mouse over the view below:</span></h4>
6999
+ <div id="story" class="member">
7000
+ <div class="member-link">
7001
+ <a name="story" href="#story"><tt><b>story</b></tt></a>
7002
+ </div>
7003
+ <div class="member-description hidden">
6861
7004
 
6862
- <div class="paperscript split">
7005
+ <div class="member-text">
7006
+ <p>The story the text item shows: the text of all the text items linked with it.</p>
7007
+
7008
+ <p>Read only.</p>
7009
+
7010
+
7011
+
7012
+ <ul class="member-list">
7013
+ <h4>Type:</h4>
7014
+ <li>
7015
+ <a href="../classes/TextStory.html"><tt>TextStory</tt></a>
7016
+ </li>
7017
+ </ul>
7018
+
7019
+
7020
+
7021
+ </div>
6863
7022
 
6864
- <div class="buttons">
6865
- <div class="button run">Run</div>
7023
+ </div>
6866
7024
  </div>
6867
7025
 
6868
- <script type="text/paperscript" canvas="canvas-62">
6869
- // Create a point-text item at {x: 30, y: 30}:
6870
- var text = new PointText(new Point(30, 30));
6871
- text.fillColor = 'black';
7026
+
7027
+ <div id="nexttextitem" class="member">
7028
+ <div class="member-link">
7029
+ <a name="nexttextitem" href="#nexttextitem"><tt><b>nextTextItem</b></tt></a>
7030
+ </div>
7031
+ <div class="member-description hidden">
7032
+
7033
+ <div class="member-text">
7034
+ <p>The text item after this one in its story, if any.</p>
7035
+
7036
+ <p>Read only.</p>
7037
+
7038
+
7039
+
7040
+ <ul class="member-list">
7041
+ <h4>Type:</h4>
7042
+ <li>
7043
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
7044
+ </li>
7045
+ </ul>
7046
+
7047
+
7048
+
7049
+ </div>
6872
7050
 
6873
- text.content = 'Move your mouse over the view, to see its position';
7051
+ </div>
7052
+ </div>
6874
7053
 
6875
- function onMouseMove(event) {
6876
- // Each time the mouse is moved, set the content of
6877
- // the point text to describe the position of the mouse:
6878
- text.content = 'Your position is: ' + event.point.toString();
6879
- }
6880
- </script>
6881
- <div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
7054
+
7055
+ <div id="previoustextitem" class="member">
7056
+ <div class="member-link">
7057
+ <a name="previoustextitem" href="#previoustextitem"><tt><b>previousTextItem</b></tt></a>
7058
+ </div>
7059
+ <div class="member-description hidden">
7060
+
7061
+ <div class="member-text">
7062
+ <p>The text item before this one in its story, if any.</p>
7063
+
7064
+ <p>Read only.</p>
7065
+
7066
+
7067
+
7068
+ <ul class="member-list">
7069
+ <h4>Type:</h4>
7070
+ <li>
7071
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
7072
+ </li>
7073
+ </ul>
7074
+
7075
+
7076
+
7077
+ </div>
7078
+
7079
+ </div>
7080
+ </div>
7081
+
7082
+
7083
+ <div id="visiblerange" class="member">
7084
+ <div class="member-link">
7085
+ <a name="visiblerange" href="#visiblerange"><tt><b>visibleRange</b></tt></a>
7086
+ </div>
7087
+ <div class="member-description hidden">
7088
+
7089
+ <div class="member-text">
7090
+ <p>The range of the story that this text item shows, as its layout flows the story through the linked text items: without the overflow, and without what the ones before it show.</p>
7091
+
7092
+ <p>Read only.</p>
7093
+
7094
+
7095
+
7096
+ <ul class="member-list">
7097
+ <h4>Type:</h4>
7098
+ <li>
7099
+ <a href="../classes/TextRange.html"><tt>TextRange</tt></a>
7100
+ </li>
7101
+ </ul>
7102
+
7103
+
7104
+
6882
7105
  </div>
6883
7106
 
7107
+ </div>
7108
+ </div>
7109
+
7110
+
7111
+ <div id="lines" class="member">
7112
+ <div class="member-link">
7113
+ <a name="lines" href="#lines"><tt><b>lines</b></tt></a>
7114
+ </div>
7115
+ <div class="member-description hidden">
6884
7116
 
7117
+ <div class="member-text">
7118
+ <p>The lines of the text, as its layout breaks them: each a range of its story, with its <code>baseline</code>, a <a href="../classes/undefined.html"><tt>Line</tt></a> along it, and its <code>bounds</code>, in the text item&rsquo;s own coordinates. A <a href="../classes/PathText.html"><tt>PathText</tt></a>&rsquo;s one line follows its path: these describe it laid out straight.</p>
7119
+
7120
+ <p>Read only.</p>
7121
+
7122
+
7123
+
7124
+ <ul class="member-list">
7125
+ <h4>Type:</h4>
7126
+ <li>
7127
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
7128
+ </li>
7129
+ </ul>
7130
+
7131
+
7132
+
6885
7133
  </div>
6886
7134
 
6887
7135
  </div>
@@ -6983,20 +7231,20 @@ function onMouseMove(event) {
6983
7231
  </div>
6984
7232
 
6985
7233
 
6986
- <div id="leading" class="member">
7234
+ <div id="lineheight" class="member">
6987
7235
  <div class="member-link">
6988
- <a name="leading" href="#leading"><tt><b>leading</b></tt></a>
7236
+ <a name="lineheight" href="#lineheight"><tt><b>lineHeight</b></tt></a>
6989
7237
  </div>
6990
7238
  <div class="member-description hidden">
6991
7239
 
6992
7240
  <div class="member-text">
6993
- <p>The text leading of text content.</p>
7241
+ <p>The line height of text content: the distance from one line&rsquo;s baseline to the next. Automatic, as <code>&#39;auto&#39;</code> (1.2) or another factor of the letters&rsquo; font size, each line moving down by its largest letters&rsquo;; or fixed, as a length with units as the font size takes them (<code>&#39;18px&#39;</code>, <code>&#39;12pt&#39;</code>). <code>leading</code>, as Paper.js had it before, sets and reads it as a fixed length in pixels.</p>
6994
7242
 
6995
7243
 
6996
7244
 
6997
7245
  <ul class="member-list">
6998
7246
  <h4>Default:</h4>
6999
- <li><tt>fontSize * 1.2</tt></li>
7247
+ <li><tt>'auto'</tt></li>
7000
7248
  </ul>
7001
7249
 
7002
7250
  <ul class="member-list">
@@ -7014,14 +7262,14 @@ function onMouseMove(event) {
7014
7262
  </div>
7015
7263
 
7016
7264
 
7017
- <div id="tracking" class="member">
7265
+ <div id="lettertracking" class="member">
7018
7266
  <div class="member-link">
7019
- <a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
7267
+ <a name="lettertracking" href="#lettertracking"><tt><b>letterTracking</b></tt></a>
7020
7268
  </div>
7021
7269
  <div class="member-description hidden">
7022
7270
 
7023
7271
  <div class="member-text">
7024
- <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>
7272
+ <p>The letter tracking of text content: the space added after each letter, along the line, in thousandths of an em, as in Adobe Illustrator and InDesign. A tracking of 100 adds a tenth of the font size. Also <code>tracking</code>, its former name.</p>
7025
7273
 
7026
7274
 
7027
7275
 
@@ -7045,27 +7293,253 @@ function onMouseMove(event) {
7045
7293
  </div>
7046
7294
 
7047
7295
 
7048
- <h3>Paragraph Style</h3>
7049
-
7050
- <div id="justification" class="member">
7296
+ <div id="letterkerning" class="member">
7051
7297
  <div class="member-link">
7052
- <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
7298
+ <a name="letterkerning" href="#letterkerning"><tt><b>letterKerning</b></tt></a>
7053
7299
  </div>
7054
7300
  <div class="member-description hidden">
7055
7301
 
7056
7302
  <div class="member-text">
7057
- <p>The justification of text paragraphs.</p>
7303
+ <p>The letter kerning of text content: the space added after a letter, along the line, in thousandths of an em, in place of the font&rsquo;s own kerning pair; <code>null</code> for the font&rsquo;s kerning.</p>
7304
+
7058
7305
 
7059
7306
 
7060
7307
  <ul class="member-list">
7061
- <h4>Values:</h4>
7062
- <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt></li>
7308
+ <h4>Default:</h4>
7309
+ <li><tt>null</tt></li>
7310
+ </ul>
7311
+
7312
+ <ul class="member-list">
7313
+ <h4>Type:</h4>
7314
+ <li>
7315
+ <tt>Number</tt>
7316
+ </li>
7317
+ </ul>
7318
+
7319
+
7320
+
7321
+ </div>
7322
+
7323
+ </div>
7324
+ </div>
7325
+
7326
+
7327
+ <div id="fontstyle" class="member">
7328
+ <div class="member-link">
7329
+ <a name="fontstyle" href="#fontstyle"><tt><b>fontStyle</b></tt></a>
7330
+ </div>
7331
+ <div class="member-description hidden">
7332
+
7333
+ <div class="member-text">
7334
+ <p>The font style of text content, as in CSS: upright or slanted. Together with the <a href="../classes/TextItem.html#fontweight"><tt>fontWeight</tt></a>, it says what a font&rsquo;s style name says, e.g. <code>&#39;Bold Italic&#39;</code>.</p>
7335
+
7336
+
7337
+ <ul class="member-list">
7338
+ <h4>Values:</h4>
7339
+ <li><tt>'normal'</tt>, <tt>'italic'</tt>, <tt>'oblique'</tt></li>
7063
7340
  </ul>
7064
7341
 
7065
7342
 
7066
7343
  <ul class="member-list">
7067
7344
  <h4>Default:</h4>
7068
- <li><tt>'left'</tt></li>
7345
+ <li><tt>'normal'</tt></li>
7346
+ </ul>
7347
+
7348
+ <ul class="member-list">
7349
+ <h4>Type:</h4>
7350
+ <li>
7351
+ <tt>String</tt>
7352
+ </li>
7353
+ </ul>
7354
+
7355
+
7356
+
7357
+ </div>
7358
+
7359
+ </div>
7360
+ </div>
7361
+
7362
+
7363
+ <div id="fontvariations" class="member">
7364
+ <div class="member-link">
7365
+ <a name="fontvariations" href="#fontvariations"><tt><b>fontVariations</b></tt></a>
7366
+ </div>
7367
+ <div class="member-description hidden">
7368
+
7369
+ <div class="member-text">
7370
+ <p>The settings of a variable font&rsquo;s axes, by their tags: <code>{ wght: 600,
7371
+ wdth: 80 }</code>. Kept for hosts that lay text out with its fonts; canvas doesn&rsquo;t draw them.</p>
7372
+
7373
+
7374
+
7375
+ <ul class="member-list">
7376
+ <h4>Default:</h4>
7377
+ <li><tt>null</tt></li>
7378
+ </ul>
7379
+
7380
+ <ul class="member-list">
7381
+ <h4>Type:</h4>
7382
+ <li>
7383
+ <tt>Object</tt>
7384
+ </li>
7385
+ </ul>
7386
+
7387
+
7388
+
7389
+ </div>
7390
+
7391
+ </div>
7392
+ </div>
7393
+
7394
+
7395
+ <div id="baselineshift" class="member">
7396
+ <div class="member-link">
7397
+ <a name="baselineshift" href="#baselineshift"><tt><b>baselineShift</b></tt></a>
7398
+ </div>
7399
+ <div class="member-description hidden">
7400
+
7401
+ <div class="member-text">
7402
+ <p>How far the letters move up from the baseline, in pixels.</p>
7403
+
7404
+
7405
+
7406
+ <ul class="member-list">
7407
+ <h4>Default:</h4>
7408
+ <li><tt>0</tt></li>
7409
+ </ul>
7410
+
7411
+ <ul class="member-list">
7412
+ <h4>Type:</h4>
7413
+ <li>
7414
+ <tt>Number</tt>
7415
+ </li>
7416
+ </ul>
7417
+
7418
+
7419
+
7420
+ </div>
7421
+
7422
+ </div>
7423
+ </div>
7424
+
7425
+
7426
+ <div id="baselineposition" class="member">
7427
+ <div class="member-link">
7428
+ <a name="baselineposition" href="#baselineposition"><tt><b>baselinePosition</b></tt></a>
7429
+ </div>
7430
+ <div class="member-description hidden">
7431
+
7432
+ <div class="member-text">
7433
+ <p>Whether the letters are set as superscripts or subscripts: smaller, and above or below the baseline.</p>
7434
+
7435
+
7436
+ <ul class="member-list">
7437
+ <h4>Values:</h4>
7438
+ <li><tt>'normal'</tt>, <tt>'superscript'</tt>, <tt>'subscript'</tt></li>
7439
+ </ul>
7440
+
7441
+
7442
+ <ul class="member-list">
7443
+ <h4>Default:</h4>
7444
+ <li><tt>'normal'</tt></li>
7445
+ </ul>
7446
+
7447
+ <ul class="member-list">
7448
+ <h4>Type:</h4>
7449
+ <li>
7450
+ <tt>String</tt>
7451
+ </li>
7452
+ </ul>
7453
+
7454
+
7455
+
7456
+ </div>
7457
+
7458
+ </div>
7459
+ </div>
7460
+
7461
+
7462
+ <div id="letterscaling" class="member">
7463
+ <div class="member-link">
7464
+ <a name="letterscaling" href="#letterscaling"><tt><b>letterScaling</b></tt></a>
7465
+ </div>
7466
+ <div class="member-description hidden">
7467
+
7468
+ <div class="member-text">
7469
+ <p>How much the letters are scaled, as <a href="../classes/Item.html#scaling"><tt>item.scaling</tt></a>: one factor for both directions, or a point with the horizontal and vertical ones.</p>
7470
+
7471
+
7472
+
7473
+ <ul class="member-list">
7474
+ <h4>Default:</h4>
7475
+ <li><tt>1</tt></li>
7476
+ </ul>
7477
+
7478
+ <ul class="member-list">
7479
+ <h4>Type:</h4>
7480
+ <li>
7481
+ <tt>Number</tt>⟋<a href="../classes/Point.html"><tt>Point</tt></a>
7482
+ </li>
7483
+ </ul>
7484
+
7485
+
7486
+
7487
+ </div>
7488
+
7489
+ </div>
7490
+ </div>
7491
+
7492
+
7493
+ <div id="letterrotation" class="member">
7494
+ <div class="member-link">
7495
+ <a name="letterrotation" href="#letterrotation"><tt><b>letterRotation</b></tt></a>
7496
+ </div>
7497
+ <div class="member-description hidden">
7498
+
7499
+ <div class="member-text">
7500
+ <p>The rotation of each letter about its origin on the baseline, in degrees.</p>
7501
+
7502
+
7503
+
7504
+ <ul class="member-list">
7505
+ <h4>Default:</h4>
7506
+ <li><tt>0</tt></li>
7507
+ </ul>
7508
+
7509
+ <ul class="member-list">
7510
+ <h4>Type:</h4>
7511
+ <li>
7512
+ <tt>Number</tt>
7513
+ </li>
7514
+ </ul>
7515
+
7516
+
7517
+
7518
+ </div>
7519
+
7520
+ </div>
7521
+ </div>
7522
+
7523
+
7524
+ <div id="capitals" class="member">
7525
+ <div class="member-link">
7526
+ <a name="capitals" href="#capitals"><tt><b>capitals</b></tt></a>
7527
+ </div>
7528
+ <div class="member-description hidden">
7529
+
7530
+ <div class="member-text">
7531
+ <p>Whether the letters are set as capitals, or as small capitals.</p>
7532
+
7533
+
7534
+ <ul class="member-list">
7535
+ <h4>Values:</h4>
7536
+ <li><tt>'normal'</tt>, <tt>'all'</tt>, <tt>'small'</tt></li>
7537
+ </ul>
7538
+
7539
+
7540
+ <ul class="member-list">
7541
+ <h4>Default:</h4>
7542
+ <li><tt>'normal'</tt></li>
7069
7543
  </ul>
7070
7544
 
7071
7545
  <ul class="member-list">
@@ -7082,14 +7556,881 @@ function onMouseMove(event) {
7082
7556
  </div>
7083
7557
  </div>
7084
7558
 
7559
+
7560
+ <div id="underline" class="member">
7561
+ <div class="member-link">
7562
+ <a name="underline" href="#underline"><tt><b>underline</b></tt></a>
7563
+ </div>
7564
+ <div class="member-description hidden">
7565
+
7566
+ <div class="member-text">
7567
+ <p>Whether the letters are underlined.</p>
7568
+
7569
+
7570
+
7571
+ <ul class="member-list">
7572
+ <h4>Default:</h4>
7573
+ <li><tt>false</tt></li>
7574
+ </ul>
7575
+
7576
+ <ul class="member-list">
7577
+ <h4>Type:</h4>
7578
+ <li>
7579
+ <tt>Boolean</tt>
7580
+ </li>
7581
+ </ul>
7582
+
7583
+
7584
+
7585
+ </div>
7586
+
7587
+ </div>
7588
+ </div>
7589
+
7590
+
7591
+ <div id="strikethrough" class="member">
7592
+ <div class="member-link">
7593
+ <a name="strikethrough" href="#strikethrough"><tt><b>strikethrough</b></tt></a>
7594
+ </div>
7595
+ <div class="member-description hidden">
7596
+
7597
+ <div class="member-text">
7598
+ <p>Whether the letters are struck through.</p>
7599
+
7600
+
7601
+
7602
+ <ul class="member-list">
7603
+ <h4>Default:</h4>
7604
+ <li><tt>false</tt></li>
7605
+ </ul>
7606
+
7607
+ <ul class="member-list">
7608
+ <h4>Type:</h4>
7609
+ <li>
7610
+ <tt>Boolean</tt>
7611
+ </li>
7612
+ </ul>
7613
+
7614
+
7615
+
7085
7616
  </div>
7086
7617
 
7618
+ </div>
7619
+ </div>
7620
+
7621
+
7622
+ <div id="features" class="member">
7623
+ <div class="member-link">
7624
+ <a name="features" href="#features"><tt><b>features</b></tt></a>
7625
+ </div>
7626
+ <div class="member-description hidden">
7627
+
7628
+ <div class="member-text">
7629
+ <p>The OpenType features to turn on (<code>&#39;dlig&#39;</code>) or off (<code>&#39;-liga&#39;</code>). Kept for hosts that lay text out with its fonts; canvas doesn&rsquo;t draw them.</p>
7630
+
7631
+
7632
+
7633
+ <ul class="member-list">
7634
+ <h4>Default:</h4>
7635
+ <li><tt>null</tt></li>
7636
+ </ul>
7637
+
7638
+ <ul class="member-list">
7639
+ <h4>Type:</h4>
7640
+ <li>
7641
+ Array of <tt>Strings</tt>
7642
+ </li>
7643
+ </ul>
7644
+
7645
+
7646
+
7647
+ </div>
7648
+
7649
+ </div>
7650
+ </div>
7651
+
7652
+
7653
+ <h3>Paragraph Style</h3>
7654
+
7655
+ <div id="justification" class="member">
7656
+ <div class="member-link">
7657
+ <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
7658
+ </div>
7659
+ <div class="member-description hidden">
7660
+
7661
+ <div class="member-text">
7662
+ <p>The justification of text paragraphs.</p>
7663
+
7664
+
7665
+ <ul class="member-list">
7666
+ <h4>Values:</h4>
7667
+ <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt>, <tt>'start'</tt>, <tt>'end'</tt>, <tt>'justify'</tt></li>
7668
+ </ul>
7669
+
7670
+
7671
+ <ul class="member-list">
7672
+ <h4>Default:</h4>
7673
+ <li><tt>'left'</tt></li>
7674
+ </ul>
7675
+
7676
+ <ul class="member-list">
7677
+ <h4>Type:</h4>
7678
+ <li>
7679
+ <tt>String</tt>
7680
+ </li>
7681
+ </ul>
7682
+
7683
+
7684
+
7685
+ </div>
7686
+
7687
+ </div>
7688
+ </div>
7689
+
7690
+
7691
+ <div id="justifylast" class="member">
7692
+ <div class="member-link">
7693
+ <a name="justifylast" href="#justifylast"><tt><b>justifyLast</b></tt></a>
7694
+ </div>
7695
+ <div class="member-description hidden">
7696
+
7697
+ <div class="member-text">
7698
+ <p>How the last line of a justified paragraph is aligned; <code>&#39;all&#39;</code> justifies it too.</p>
7699
+
7700
+
7701
+ <ul class="member-list">
7702
+ <h4>Values:</h4>
7703
+ <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt>, <tt>'start'</tt>, <tt>'end'</tt>, <tt>'all'</tt></li>
7704
+ </ul>
7705
+
7706
+
7707
+ <ul class="member-list">
7708
+ <h4>Default:</h4>
7709
+ <li><tt>'left'</tt></li>
7710
+ </ul>
7711
+
7712
+ <ul class="member-list">
7713
+ <h4>Type:</h4>
7714
+ <li>
7715
+ <tt>String</tt>
7716
+ </li>
7717
+ </ul>
7718
+
7719
+
7720
+
7721
+ </div>
7722
+
7723
+ </div>
7724
+ </div>
7725
+
7726
+
7727
+ <div id="justifyspacing" class="member">
7728
+ <div class="member-link">
7729
+ <a name="justifyspacing" href="#justifyspacing"><tt><b>justifySpacing</b></tt></a>
7730
+ </div>
7731
+ <div class="member-description hidden">
7732
+
7733
+ <div class="member-text">
7734
+ <p>How far justification may change the spacing, each as <code>[minimum, desired,
7735
+ maximum]</code> in percent: <code>{ word: [80, 100, 133], letter: [0, 0, 0], glyph:
7736
+ [100, 100, 100] }</code>; <code>null</code> for those. Kept for hosts: canvas text justifies by the word spacing alone.</p>
7737
+
7738
+
7739
+
7740
+ <ul class="member-list">
7741
+ <h4>Default:</h4>
7742
+ <li><tt>null</tt></li>
7743
+ </ul>
7744
+
7745
+ <ul class="member-list">
7746
+ <h4>Type:</h4>
7747
+ <li>
7748
+ <tt>Object</tt>
7749
+ </li>
7750
+ </ul>
7751
+
7752
+
7753
+
7754
+ </div>
7755
+
7756
+ </div>
7757
+ </div>
7758
+
7759
+
7760
+ <div id="startindent" class="member">
7761
+ <div class="member-link">
7762
+ <a name="startindent" href="#startindent"><tt><b>startIndent</b></tt></a>
7763
+ </div>
7764
+ <div class="member-description hidden">
7765
+
7766
+ <div class="member-text">
7767
+ <p>The indent where the paragraph&rsquo;s lines start: left in left-to-right text, right in right-to-left text.</p>
7768
+
7769
+
7770
+
7771
+ <ul class="member-list">
7772
+ <h4>Default:</h4>
7773
+ <li><tt>0</tt></li>
7774
+ </ul>
7775
+
7776
+ <ul class="member-list">
7777
+ <h4>Type:</h4>
7778
+ <li>
7779
+ <tt>Number</tt>
7780
+ </li>
7781
+ </ul>
7782
+
7783
+
7784
+
7785
+ </div>
7786
+
7787
+ </div>
7788
+ </div>
7789
+
7790
+
7791
+ <div id="endindent" class="member">
7792
+ <div class="member-link">
7793
+ <a name="endindent" href="#endindent"><tt><b>endIndent</b></tt></a>
7794
+ </div>
7795
+ <div class="member-description hidden">
7796
+
7797
+ <div class="member-text">
7798
+ <p>The indent where the paragraph&rsquo;s lines end.</p>
7799
+
7800
+
7801
+
7802
+ <ul class="member-list">
7803
+ <h4>Default:</h4>
7804
+ <li><tt>0</tt></li>
7805
+ </ul>
7806
+
7807
+ <ul class="member-list">
7808
+ <h4>Type:</h4>
7809
+ <li>
7810
+ <tt>Number</tt>
7811
+ </li>
7812
+ </ul>
7813
+
7814
+
7815
+
7816
+ </div>
7817
+
7818
+ </div>
7819
+ </div>
7820
+
7821
+
7822
+ <div id="firstlineindent" class="member">
7823
+ <div class="member-link">
7824
+ <a name="firstlineindent" href="#firstlineindent"><tt><b>firstLineIndent</b></tt></a>
7825
+ </div>
7826
+ <div class="member-description hidden">
7827
+
7828
+ <div class="member-text">
7829
+ <p>The indent of the paragraph&rsquo;s first line, added to its start indent.</p>
7830
+
7831
+
7832
+
7833
+ <ul class="member-list">
7834
+ <h4>Default:</h4>
7835
+ <li><tt>0</tt></li>
7836
+ </ul>
7837
+
7838
+ <ul class="member-list">
7839
+ <h4>Type:</h4>
7840
+ <li>
7841
+ <tt>Number</tt>
7842
+ </li>
7843
+ </ul>
7844
+
7845
+
7846
+
7847
+ </div>
7848
+
7849
+ </div>
7850
+ </div>
7851
+
7852
+
7853
+ <div id="spacebefore" class="member">
7854
+ <div class="member-link">
7855
+ <a name="spacebefore" href="#spacebefore"><tt><b>spaceBefore</b></tt></a>
7856
+ </div>
7857
+ <div class="member-description hidden">
7858
+
7859
+ <div class="member-text">
7860
+ <p>The space above the paragraph. Between two paragraphs, the larger of this one&rsquo;s and the space after the one before it is used.</p>
7861
+
7862
+
7863
+
7864
+ <ul class="member-list">
7865
+ <h4>Default:</h4>
7866
+ <li><tt>0</tt></li>
7867
+ </ul>
7868
+
7869
+ <ul class="member-list">
7870
+ <h4>Type:</h4>
7871
+ <li>
7872
+ <tt>Number</tt>
7873
+ </li>
7874
+ </ul>
7875
+
7876
+
7877
+
7878
+ </div>
7879
+
7880
+ </div>
7881
+ </div>
7882
+
7883
+
7884
+ <div id="spaceafter" class="member">
7885
+ <div class="member-link">
7886
+ <a name="spaceafter" href="#spaceafter"><tt><b>spaceAfter</b></tt></a>
7887
+ </div>
7888
+ <div class="member-description hidden">
7889
+
7890
+ <div class="member-text">
7891
+ <p>The space below the paragraph.</p>
7892
+
7893
+
7894
+
7895
+ <ul class="member-list">
7896
+ <h4>Default:</h4>
7897
+ <li><tt>0</tt></li>
7898
+ </ul>
7899
+
7900
+ <ul class="member-list">
7901
+ <h4>Type:</h4>
7902
+ <li>
7903
+ <tt>Number</tt>
7904
+ </li>
7905
+ </ul>
7906
+
7907
+
7908
+
7909
+ </div>
7910
+
7911
+ </div>
7912
+ </div>
7913
+
7914
+
7915
+ <div id="hyphenation" class="member">
7916
+ <div class="member-link">
7917
+ <a name="hyphenation" href="#hyphenation"><tt><b>hyphenation</b></tt></a>
7918
+ </div>
7919
+ <div class="member-description hidden">
7920
+
7921
+ <div class="member-text">
7922
+ <p>Whether words are hyphenated at the ends of lines, and how: <code>true</code>, or <code>{
7923
+ wordsLongerThan, afterFirst, beforeLast, limit, zone, capitalized }</code>. Kept for hosts: canvas text breaks only at soft hyphens.</p>
7924
+
7925
+
7926
+
7927
+ <ul class="member-list">
7928
+ <h4>Default:</h4>
7929
+ <li><tt>false</tt></li>
7930
+ </ul>
7931
+
7932
+ <ul class="member-list">
7933
+ <h4>Type:</h4>
7934
+ <li>
7935
+ <tt>Boolean</tt>⟋<tt>Object</tt>
7936
+ </li>
7937
+ </ul>
7938
+
7939
+
7940
+
7941
+ </div>
7942
+
7943
+ </div>
7944
+ </div>
7945
+
7946
+
7947
+ <div id="composer" class="member">
7948
+ <div class="member-link">
7949
+ <a name="composer" href="#composer"><tt><b>composer</b></tt></a>
7950
+ </div>
7951
+ <div class="member-description hidden">
7952
+
7953
+ <div class="member-text">
7954
+ <p>How lines are broken: one line at a time, or all of the paragraph&rsquo;s lines together, for the most even spacing. Kept for hosts: canvas text breaks one line at a time.</p>
7955
+
7956
+
7957
+ <ul class="member-list">
7958
+ <h4>Values:</h4>
7959
+ <li><tt>'line'</tt>, <tt>'paragraph'</tt></li>
7960
+ </ul>
7961
+
7962
+
7963
+ <ul class="member-list">
7964
+ <h4>Default:</h4>
7965
+ <li><tt>'paragraph'</tt></li>
7966
+ </ul>
7967
+
7968
+ <ul class="member-list">
7969
+ <h4>Type:</h4>
7970
+ <li>
7971
+ <tt>String</tt>
7972
+ </li>
7973
+ </ul>
7974
+
7975
+
7976
+
7977
+ </div>
7978
+
7979
+ </div>
7980
+ </div>
7981
+
7982
+
7983
+ <div id="linewrap" class="member">
7984
+ <div class="member-link">
7985
+ <a name="linewrap" href="#linewrap"><tt><b>lineWrap</b></tt></a>
7986
+ </div>
7987
+ <div class="member-description hidden">
7988
+
7989
+ <div class="member-text">
7990
+ <p>How the lines of a paragraph in an area are evened out: <code>&#39;normal&#39;</code> fills each line as far as it goes, <code>&#39;balance&#39;</code> makes them all about as long, and <code>&#39;pretty&#39;</code> balances the last four lines when the last one is shorter than a third of the one before. Both keep the paragraph&rsquo;s number of lines.</p>
7991
+
7992
+
7993
+ <ul class="member-list">
7994
+ <h4>Values:</h4>
7995
+ <li><tt>'normal'</tt>, <tt>'balance'</tt>, <tt>'pretty'</tt></li>
7996
+ </ul>
7997
+
7998
+
7999
+ <ul class="member-list">
8000
+ <h4>Default:</h4>
8001
+ <li><tt>'normal'</tt></li>
8002
+ </ul>
8003
+
8004
+ <ul class="member-list">
8005
+ <h4>Type:</h4>
8006
+ <li>
8007
+ <tt>String</tt>
8008
+ </li>
8009
+ </ul>
8010
+
8011
+
8012
+
8013
+ </div>
8014
+
8015
+ </div>
8016
+ </div>
8017
+
8018
+
8019
+ <div id="tabs" class="member">
8020
+ <div class="member-link">
8021
+ <a name="tabs" href="#tabs"><tt><b>tabs</b></tt></a>
8022
+ </div>
8023
+ <div class="member-description hidden">
8024
+
8025
+ <div class="member-text">
8026
+ <p>The paragraph&rsquo;s tab stops: <code>[{ position, align, leader }]</code>, with <code>align</code> one of <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code> and <code>&#39;decimal&#39;</code>. Kept for hosts: canvas text doesn&rsquo;t set tabs yet.</p>
8027
+
8028
+
8029
+
8030
+ <ul class="member-list">
8031
+ <h4>Default:</h4>
8032
+ <li><tt>null</tt></li>
8033
+ </ul>
8034
+
8035
+ <ul class="member-list">
8036
+ <h4>Type:</h4>
8037
+ <li>
8038
+ Array of <tt>Object</tt> objects
8039
+ </li>
8040
+ </ul>
8041
+
8042
+
8043
+
8044
+ </div>
8045
+
8046
+ </div>
8047
+ </div>
8048
+
8049
+
8050
+ <div id="direction" class="member">
8051
+ <div class="member-link">
8052
+ <a name="direction" href="#direction"><tt><b>direction</b></tt></a>
8053
+ </div>
8054
+ <div class="member-description hidden">
8055
+
8056
+ <div class="member-text">
8057
+ <p>The direction the paragraph&rsquo;s lines run in, which <code>&#39;start&#39;</code> and <code>&#39;end&#39;</code> follow; <code>null</code> for left to right.</p>
8058
+
8059
+
8060
+ <ul class="member-list">
8061
+ <h4>Values:</h4>
8062
+ <li><tt>'ltr'</tt>, <tt>'rtl'</tt></li>
8063
+ </ul>
8064
+
8065
+
8066
+ <ul class="member-list">
8067
+ <h4>Default:</h4>
8068
+ <li><tt>null</tt></li>
8069
+ </ul>
8070
+
8071
+ <ul class="member-list">
8072
+ <h4>Type:</h4>
8073
+ <li>
8074
+ <tt>String</tt>
8075
+ </li>
8076
+ </ul>
8077
+
8078
+
8079
+
8080
+ </div>
8081
+
8082
+ </div>
8083
+ </div>
8084
+
8085
+
8086
+ <h3>Content</h3>
8087
+
8088
+ <div id="content" class="member">
8089
+ <div class="member-link">
8090
+ <a name="content" href="#content"><tt><b>content</b></tt></a>
8091
+ </div>
8092
+ <div class="member-description hidden">
8093
+
8094
+ <div class="member-text">
8095
+ <p>The text of the item&rsquo;s story, see <a href="../classes/TextStory.html#content"><tt>textStory.content</tt></a>.</p>
8096
+
8097
+
8098
+
8099
+ <ul class="member-list">
8100
+ <h4>Type:</h4>
8101
+ <li>
8102
+ <tt>String</tt>
8103
+ </li>
8104
+ </ul>
8105
+
8106
+
8107
+
8108
+ </div>
8109
+
8110
+ </div>
8111
+ </div>
8112
+
8113
+
8114
+ <div id="runs" class="member">
8115
+ <div class="member-link">
8116
+ <a name="runs" href="#runs"><tt><b>runs</b></tt></a>
8117
+ </div>
8118
+ <div class="member-description hidden">
8119
+
8120
+ <div class="member-text">
8121
+ <p>The runs of the item&rsquo;s story, see <a href="../classes/TextStory.html#runs"><tt>textStory.runs</tt></a>.</p>
8122
+
8123
+
8124
+
8125
+ <ul class="member-list">
8126
+ <h4>Type:</h4>
8127
+ <li>
8128
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
8129
+ </li>
8130
+ </ul>
8131
+
8132
+
8133
+
8134
+ </div>
8135
+
8136
+ </div>
8137
+ </div>
8138
+
8139
+
8140
+ <div id="paragraphs" class="member">
8141
+ <div class="member-link">
8142
+ <a name="paragraphs" href="#paragraphs"><tt><b>paragraphs</b></tt></a>
8143
+ </div>
8144
+ <div class="member-description hidden">
8145
+
8146
+ <div class="member-text">
8147
+ <p>The paragraphs of the item&rsquo;s story, see <a href="../classes/TextStory.html#paragraphs"><tt>textStory.paragraphs</tt></a>.</p>
8148
+
8149
+
8150
+
8151
+ <ul class="member-list">
8152
+ <h4>Type:</h4>
8153
+ <li>
8154
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
8155
+ </li>
8156
+ </ul>
8157
+
8158
+
8159
+
8160
+ </div>
8161
+
8162
+ </div>
8163
+ </div>
8164
+
8165
+
8166
+ <div id="words" class="member">
8167
+ <div class="member-link">
8168
+ <a name="words" href="#words"><tt><b>words</b></tt></a>
8169
+ </div>
8170
+ <div class="member-description hidden">
8171
+
8172
+ <div class="member-text">
8173
+ <p>The words of the item&rsquo;s story, see <a href="../classes/TextStory.html#words"><tt>textStory.words</tt></a>.</p>
8174
+
8175
+
8176
+
8177
+ <ul class="member-list">
8178
+ <h4>Type:</h4>
8179
+ <li>
8180
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
8181
+ </li>
8182
+ </ul>
8183
+
8184
+
8185
+
8186
+ </div>
8187
+
8188
+ </div>
8189
+ </div>
8190
+
8191
+
8192
+ <div id="letters" class="member">
8193
+ <div class="member-link">
8194
+ <a name="letters" href="#letters"><tt><b>letters</b></tt></a>
8195
+ </div>
8196
+ <div class="member-description hidden">
8197
+
8198
+ <div class="member-text">
8199
+ <p>The letters of the item&rsquo;s story, see <a href="../classes/TextStory.html#letters"><tt>textStory.letters</tt></a>.</p>
8200
+
8201
+
8202
+
8203
+ <ul class="member-list">
8204
+ <h4>Type:</h4>
8205
+ <li>
8206
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
8207
+ </li>
8208
+ </ul>
8209
+
8210
+
8211
+
8212
+ </div>
8213
+
8214
+ </div>
8215
+ </div>
8216
+
8217
+ </div>
8218
+
8219
+
8220
+ <!-- =========================== inherited methods ========================= -->
8221
+ <div class="reference-members"><h2>Methods inherited from <a href="../classes/TextItem.html"><tt>TextItem</tt></a></h2>
8222
+
8223
+
8224
+ <div id="link-next" class="member">
8225
+ <div class="member-link">
8226
+ <a name="link-next" href="#link-next"><tt><b>link</b>(next)</tt></a>
8227
+ </div>
8228
+ <div class="member-description hidden">
8229
+ <div class="member-text">
8230
+ <p>Links the text item <code>next</code> after this one, so the story flows on into it. Its own story joins the end of this one.</p>
8231
+
8232
+
8233
+ <ul class="member-list">
8234
+ <h4>Parameters:</h4>
8235
+
8236
+ <li>
8237
+ <tt>next:</tt>
8238
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
8239
+ &mdash;&nbsp;the text item to link
8240
+
8241
+ </li>
8242
+
8243
+ </ul>
8244
+
8245
+
8246
+ <ul class="member-list">
8247
+ <h4>Returns:</h4>
8248
+
8249
+ <li>
8250
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the text item was linked, <tt>false</tt> otherwise
8251
+ </li>
8252
+
8253
+
8254
+ </ul>
8255
+
8256
+
8257
+
8258
+
8259
+
8260
+ </div>
8261
+ </div>
8262
+ </div>
8263
+
8264
+
8265
+ <div id="islinked" class="member">
8266
+ <div class="member-link">
8267
+ <a name="islinked" href="#islinked"><tt><b>isLinked</b>()</tt></a>
8268
+ </div>
8269
+ <div class="member-description hidden">
8270
+ <div class="member-text">
8271
+ <p><tt>true</tt> if the text item is linked with others, <tt>false</tt> otherwise</p>
8272
+
8273
+
8274
+
8275
+ <ul class="member-list">
8276
+ <h4>Returns:</h4>
8277
+
8278
+ <li>
8279
+ <tt><tt>Boolean</tt></tt>
8280
+ </li>
8281
+
8282
+
8283
+ </ul>
8284
+
8285
+
8286
+
8287
+
8288
+
8289
+ </div>
8290
+ </div>
8291
+ </div>
8292
+
8293
+
8294
+ <div id="unlink" class="member">
8295
+ <div class="member-link">
8296
+ <a name="unlink" href="#unlink"><tt><b>unlink</b>([which])</tt></a>
8297
+ </div>
8298
+ <div class="member-description hidden">
8299
+ <div class="member-text">
8300
+ <p>Unlinks the text item: <code>&#39;both&#39;</code> takes it out of its story, which flows on through the others, <code>&#39;before&#39;</code> and <code>&#39;after&#39;</code> break the story into two there.</p>
8301
+
8302
+
8303
+ <ul class="member-list">
8304
+ <h4>Parameters:</h4>
8305
+
8306
+ <li>
8307
+ <tt>which:</tt>
8308
+ <tt>String</tt>
8309
+ &mdash;&nbsp;<code>&#39;both&#39;</code>, <code>&#39;before&#39;</code> or <code>&#39;after&#39;</code>
8310
+ &mdash;&nbsp;optional, default: <tt>&lsquo;both&rsquo;</tt>
8311
+ </li>
8312
+
8313
+ </ul>
8314
+
8315
+
8316
+ <ul class="member-list">
8317
+ <h4>Returns:</h4>
8318
+
8319
+ <li>
8320
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the text item was unlinked, <tt>false</tt> otherwise
8321
+ </li>
8322
+
8323
+
8324
+ </ul>
8325
+
8326
+
8327
+
8328
+
8329
+
8330
+ </div>
8331
+ </div>
8332
+ </div>
8333
+
8334
+
8335
+ <div id="replace-content-start-end" class="member">
8336
+ <div class="member-link">
8337
+ <a name="replace-content-start-end" href="#replace-content-start-end"><tt><b>replace</b>(content, start, end)</tt></a>
8338
+ </div>
8339
+ <div class="member-description hidden">
8340
+ <div class="member-text">
8341
+ <p>Replaces the content from <code>start</code> to <code>end</code> of the item&rsquo;s story, see <a href="../classes/TextStory.html#replace-content-start-end"><tt>textStory.replace(content, start, end)</tt></a>.</p>
8342
+
8343
+
8344
+ <ul class="member-list">
8345
+ <h4>Parameters:</h4>
8346
+
8347
+ <li>
8348
+ <tt>content:</tt>
8349
+ <tt>String</tt>
8350
+ &mdash;&nbsp;the new content
8351
+
8352
+ </li>
8353
+
8354
+ <li>
8355
+ <tt>start:</tt>
8356
+ <tt>Number</tt>
8357
+ &mdash;&nbsp;the index of the first character to replace
8358
+
8359
+ </li>
8360
+
8361
+ <li>
8362
+ <tt>end:</tt>
8363
+ <tt>Number</tt>
8364
+ &mdash;&nbsp;the index after the last character to replace
8365
+
8366
+ </li>
8367
+
8368
+ </ul>
8369
+
8370
+
8371
+
8372
+
8373
+
8374
+
8375
+ </div>
8376
+ </div>
8377
+ </div>
8378
+
8379
+
8380
+ <div id="range-start-end" class="member">
8381
+ <div class="member-link">
8382
+ <a name="range-start-end" href="#range-start-end"><tt><b>range</b>(start, end)</tt></a>
8383
+ </div>
8384
+ <div class="member-description hidden">
8385
+ <div class="member-text">
8386
+ <p>The range of the item&rsquo;s story from <code>start</code> to <code>end</code>.</p>
8387
+
8388
+
8389
+ <ul class="member-list">
8390
+ <h4>Parameters:</h4>
8391
+
8392
+ <li>
8393
+ <tt>start:</tt>
8394
+ <tt>Number</tt>
8395
+ &mdash;&nbsp;the index of its first character
8396
+
8397
+ </li>
8398
+
8399
+ <li>
8400
+ <tt>end:</tt>
8401
+ <tt>Number</tt>
8402
+ &mdash;&nbsp;the index after its last character
8403
+
8404
+ </li>
8405
+
8406
+ </ul>
8407
+
8408
+
8409
+ <ul class="member-list">
8410
+ <h4>Returns:</h4>
8411
+
8412
+ <li>
8413
+ <tt><a href="../classes/TextRange.html"><tt>TextRange</tt></a></tt>
8414
+ </li>
8415
+
8416
+
8417
+ </ul>
8418
+
8419
+
8420
+
8421
+
8422
+
8423
+ </div>
8424
+ </div>
8425
+ </div>
8426
+
8427
+ </div>
7087
8428
 
7088
8429
 
7089
8430
 
7090
8431
  <!-- =========================== copyright notice ========================== -->
7091
8432
  <p class="footer">
7092
- Paper.js v0.13.0<br>
8433
+ Paper.js v0.15.0<br>
7093
8434
  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>
7094
8435
  <div class="content-end"></div>
7095
8436