Skip to content

Commit 08b2c63

Browse files
jonobr1jonobr1
committed
Update image and texture effect docs and code comments
Improves documentation for image and texture effects, clarifies code comments regarding SVG renderer and image modes, and adds a new wiki page for image effect. Also updates build files to reflect these changes.
1 parent ccde850 commit 08b2c63

20 files changed

Lines changed: 1226 additions & 344 deletions

File tree

‎build/two.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1220,7 +1220,7 @@ var Two = (() => {
12201220
* @name Two.PublishDate
12211221
* @property {String} - The automatically generated publish date in the build process to verify version release candidates.
12221222
*/
1223-
PublishDate: "2025-09-30T22:57:13.725Z",
1223+
PublishDate: "2025-09-30T23:07:29.635Z",
12241224
/**
12251225
* @name Two.Identifier
12261226
* @property {String} - String prefix for all Two.js object's ids. This trickles down to SVG ids.
@@ -1933,7 +1933,7 @@ var Two = (() => {
19331933
/**
19341934
* @name Two.Element#className
19351935
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
1936-
* @nota-bene Only available for the SVG renderer.
1936+
* @nota-bene Only rendered to DOM in the SVG renderer.
19371937
*/
19381938
_className = "";
19391939
/**
@@ -2196,7 +2196,7 @@ var Two = (() => {
21962196
static ImageRegistry = new Registry();
21972197
/**
21982198
* @name Two.Texture.getAbsoluteURL
2199-
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
2199+
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.Texture.ImageRegistry}.
22002200
* @param {String} path
22012201
* @returns {String} - The serialized absolute path.
22022202
*/
@@ -11284,12 +11284,12 @@ var Two = (() => {
1128411284
}
1128511285
/**
1128611286
* @name Two.Image.Modes
11287-
* @property {Object} mode - Different mode types to render an image inspired by Figma.
11288-
* @property {String} mode.fill - Scale image to fill the bounds while preserving aspect ratio.
11289-
* @property {String} mode.fit - Scale image to fit within bounds while preserving aspect ratio.
11290-
* @property {String} mode.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
11291-
* @property {String} mode.tile - Repeat image at original size to fill the bounds.
11292-
* @property {String} mode.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
11287+
* @property {Object} Modes - Different mode types to render an image inspired by Figma.
11288+
* @property {String} Modes.fill - Scale image to fill the bounds while preserving aspect ratio.
11289+
* @property {String} Modes.fit - Scale image to fit within bounds while preserving aspect ratio.
11290+
* @property {String} Modes.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
11291+
* @property {String} Modes.tile - Repeat image at original size to fill the bounds.
11292+
* @property {String} Modes.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
1129311293
*/
1129411294
static Modes = {
1129511295
fill: "fill",

‎build/two.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/two.module.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1228,7 +1228,7 @@ var Constants = {
12281228
* @name Two.PublishDate
12291229
* @property {String} - The automatically generated publish date in the build process to verify version release candidates.
12301230
*/
1231-
PublishDate: "2025-09-30T22:57:13.725Z",
1231+
PublishDate: "2025-09-30T23:07:29.635Z",
12321232
/**
12331233
* @name Two.Identifier
12341234
* @property {String} - String prefix for all Two.js object's ids. This trickles down to SVG ids.
@@ -1945,7 +1945,7 @@ var _Element = class _Element extends Events {
19451945
/**
19461946
* @name Two.Element#className
19471947
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
1948-
* @nota-bene Only available for the SVG renderer.
1948+
* @nota-bene Only rendered to DOM in the SVG renderer.
19491949
*/
19501950
__publicField(this, "_className", "");
19511951
/**
@@ -2191,7 +2191,7 @@ var _Texture = class _Texture extends Element {
21912191
}
21922192
/**
21932193
* @name Two.Texture.getAbsoluteURL
2194-
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
2194+
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.Texture.ImageRegistry}.
21952195
* @param {String} path
21962196
* @returns {String} - The serialized absolute path.
21972197
*/
@@ -11471,12 +11471,12 @@ var _Image = class _Image extends Rectangle {
1147111471
};
1147211472
/**
1147311473
* @name Two.Image.Modes
11474-
* @property {Object} mode - Different mode types to render an image inspired by Figma.
11475-
* @property {String} mode.fill - Scale image to fill the bounds while preserving aspect ratio.
11476-
* @property {String} mode.fit - Scale image to fit within bounds while preserving aspect ratio.
11477-
* @property {String} mode.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
11478-
* @property {String} mode.tile - Repeat image at original size to fill the bounds.
11479-
* @property {String} mode.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
11474+
* @property {Object} Modes - Different mode types to render an image inspired by Figma.
11475+
* @property {String} Modes.fill - Scale image to fill the bounds while preserving aspect ratio.
11476+
* @property {String} Modes.fit - Scale image to fit within bounds while preserving aspect ratio.
11477+
* @property {String} Modes.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
11478+
* @property {String} Modes.tile - Repeat image at original size to fill the bounds.
11479+
* @property {String} Modes.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
1148011480
*/
1148111481
__publicField(_Image, "Modes", {
1148211482
fill: "fill",

‎src/effects/image.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,12 @@ export class Image extends Rectangle {
7575

7676
/**
7777
* @name Two.Image.Modes
78-
* @property {Object} mode - Different mode types to render an image inspired by Figma.
79-
* @property {String} mode.fill - Scale image to fill the bounds while preserving aspect ratio.
80-
* @property {String} mode.fit - Scale image to fit within bounds while preserving aspect ratio.
81-
* @property {String} mode.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
82-
* @property {String} mode.tile - Repeat image at original size to fill the bounds.
83-
* @property {String} mode.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
78+
* @property {Object} Modes - Different mode types to render an image inspired by Figma.
79+
* @property {String} Modes.fill - Scale image to fill the bounds while preserving aspect ratio.
80+
* @property {String} Modes.fit - Scale image to fit within bounds while preserving aspect ratio.
81+
* @property {String} Modes.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
82+
* @property {String} Modes.tile - Repeat image at original size to fill the bounds.
83+
* @property {String} Modes.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
8484
*/
8585
static Modes = {
8686
fill: 'fill',

‎src/effects/texture.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export class Texture extends Element {
224224

225225
/**
226226
* @name Two.Texture.getAbsoluteURL
227-
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
227+
* @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.Texture.ImageRegistry}.
228228
* @param {String} path
229229
* @returns {String} - The serialized absolute path.
230230
*/

‎src/element.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export class Element extends Events {
3939
/**
4040
* @name Two.Element#className
4141
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
42-
* @nota-bene Only available for the SVG renderer.
42+
* @nota-bene Only rendered to DOM in the SVG renderer.
4343
*/
4444
_className = '';
4545

‎src/path.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ export class Path extends Shape {
341341
/**
342342
* @name Two.Path#className
343343
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
344-
* @nota-bene Only available for the SVG renderer.
344+
* @nota-bene Only rendered to DOM in the SVG renderer.
345345
*/
346346
this.className = '';
347347

‎src/shapes/points.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export class Points extends Shape {
133133
/**
134134
* @name Two.Points#className
135135
* @property {String} - A class to be applied to the element to be compatible with CSS styling.
136-
* @nota-bene Only available for the SVG renderer.
136+
* @nota-bene Only rendered to DOM in the SVG renderer.
137137
*/
138138
this.className = '';
139139

‎utils/source-files.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ var sourceFiles = [
2828
'src/effects/radial-gradient.js',
2929
'src/effects/texture.js',
3030
'src/effects/sprite.js',
31-
'src/effects/image-sequence.js',
31+
'src/effects/image.js',
3232
'src/group.js',
3333
'extras/jsm/arc.js',
3434
'extras/jsm/zui.js',
3535
'src/shapes/arc-segment.js',
36+
'src/effects/image-sequence.js',
3637
];
3738

3839
if (typeof module != 'undefined' && module.exports) {

‎wiki/docs/effects/image-sequence/README.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ A list of properties that are on every [Two.ImageSequence](/docs/effects/image-s
7171

7272
<div class="meta">
7373

74-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L169">
75-
image-sequence.js:169
74+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L171">
75+
image-sequence.js:171
7676
</a>
7777

7878
</div>
@@ -118,8 +118,8 @@ default frame rate that [Two.ImageSequence.frameRate](/docs/effects/image-sequen
118118

119119
<div class="meta">
120120

121-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L182">
122-
image-sequence.js:182
121+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L184">
122+
image-sequence.js:184
123123
</a>
124124

125125
</div>
@@ -178,8 +178,8 @@ Create a new [Two.ImageSequence](/docs/effects/image-sequence/) from an object n
178178

179179
<div class="meta">
180180

181-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L188">
182-
image-sequence.js:188
181+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L190">
182+
image-sequence.js:190
183183
</a>
184184

185185
</div>
@@ -235,8 +235,8 @@ A list of textures to be used as frames for animating the [Two.ImageSequence](/d
235235

236236
<div class="meta">
237237

238-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L137">
239-
image-sequence.js:137
238+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L139">
239+
image-sequence.js:139
240240
</a>
241241

242242
</div>
@@ -282,8 +282,8 @@ The number of frames to animate against per second.
282282

283283
<div class="meta">
284284

285-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L152">
286-
image-sequence.js:152
285+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L154">
286+
image-sequence.js:154
287287
</a>
288288

289289
</div>
@@ -329,8 +329,8 @@ The index of the current tile of the sprite to display. Defaults to `0`.
329329

330330
<div class="meta">
331331

332-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L162">
333-
image-sequence.js:162
332+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L164">
333+
image-sequence.js:164
334334
</a>
335335

336336
</div>
@@ -381,8 +381,8 @@ Copy the properties of one [Two.ImageSequence](/docs/effects/image-sequence/) on
381381

382382
<div class="meta">
383383

384-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L206">
385-
image-sequence.js:206
384+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L208">
385+
image-sequence.js:208
386386
</a>
387387

388388
</div>
@@ -435,8 +435,8 @@ Initiate animation playback of a [Two.ImageSequence](/docs/effects/image-sequenc
435435

436436
<div class="meta">
437437

438-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L225">
439-
image-sequence.js:225
438+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L227">
439+
image-sequence.js:227
440440
</a>
441441

442442
</div>
@@ -480,8 +480,8 @@ Halt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/).
480480

481481
<div class="meta">
482482

483-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L259">
484-
image-sequence.js:259
483+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L261">
484+
image-sequence.js:261
485485
</a>
486486

487487
</div>
@@ -525,8 +525,8 @@ Halt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/)
525525

526526
<div class="meta">
527527

528-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L269">
529-
image-sequence.js:269
528+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L271">
529+
image-sequence.js:271
530530
</a>
531531

532532
</div>
@@ -585,8 +585,8 @@ Create a new instance of [Two.ImageSequence](/docs/effects/image-sequence/) with
585585

586586
<div class="meta">
587587

588-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L281">
589-
image-sequence.js:281
588+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L283">
589+
image-sequence.js:283
590590
</a>
591591

592592
</div>
@@ -638,8 +638,8 @@ Return a JSON compatible plain object that represents the path.
638638

639639
<div class="meta">
640640

641-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L309">
642-
image-sequence.js:309
641+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L311">
642+
image-sequence.js:311
643643
</a>
644644

645645
</div>
@@ -695,8 +695,8 @@ re-attachment to a new renderer.
695695

696696
<div class="meta">
697697

698-
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L328">
699-
image-sequence.js:328
698+
<a class="lineno" target="_blank" rel="noopener noreferrer" href="https://github.com/jonobr1/two.js/blob/main/src/effects/image-sequence.js#L331">
699+
image-sequence.js:331
700700
</a>
701701

702702
</div>

0 commit comments

Comments
 (0)