Merge pull request #800 from jonobr1/792-object-signatures

792 Object Signatures

Author: jonobr1

build/two.js

@@ -123,6 +123,8 @@ export class ImageSequence extends Rectangle {
   constructor(paths, ox, oy, frameRate) {
     super(ox, oy, 0, 0);
 
+    this._renderer.type = 'image-sequence';
+
     for (let prop in proto) {
       Object.defineProperty(this, prop, proto[prop]);
     }
@@ -314,6 +316,7 @@ export class ImageSequence extends Rectangle {
    */
   toObject() {
     const object = super.toObject.call(this);
+    object.renderer.type = 'image-sequence';
     object.textures = this.textures.map(function (texture) {
       return texture.toObject();
     });
@@ -338,15 +341,15 @@ export class ImageSequence extends Rectangle {
   dispose() {
     // Call parent dispose to preserve renderer type and unbind events
     super.dispose();
-    
+
     // Stop animation if playing
     if (this._playing) {
       this._playing = false;
     }
-    
+
     // Clear animation callbacks
     this._onLastFrame = null;
-    
+
     // Unbind textures collection events
     if (this.textures && typeof this.textures.unbind === 'function') {
       try {
@@ -355,7 +358,7 @@ export class ImageSequence extends Rectangle {
         // Ignore unbind errors for incomplete Collection objects
       }
     }
-    
+
     // Dispose individual textures (more thorough than unbind)
     if (this.textures) {
       for (let i = 0; i < this.textures.length; i++) {
@@ -367,7 +370,7 @@ export class ImageSequence extends Rectangle {
         }
       }
     }
-    
+
     return this;
   }
 

build/two.min.js

@@ -47,6 +47,8 @@ export class Image extends Rectangle {
   constructor(path, ox, oy, width, height, mode) {
     super(ox, oy, width || 1, height || 1);
 
+    this._renderer.type = 'image';
+
     for (let prop in proto) {
       Object.defineProperty(this, prop, proto[prop]);
     }
@@ -72,34 +74,21 @@ export class Image extends Rectangle {
   }
 
   /**
-   * @name Two.Image.fill
-   * @property {String} - Scale image to fill the bounds while preserving aspect ratio.
-   */
-  static fill = 'fill';
-
-  /**
-   * @name Two.Image.fit
-   * @property {String} - Scale image to fit within bounds while preserving aspect ratio.
-   */
-  static fit = 'fit';
-
-  /**
-   * @name Two.Image.crop
-   * @property {String} - Scale image to fill bounds while preserving aspect ratio, cropping excess.
-   */
-  static crop = 'crop';
-
-  /**
-   * @name Two.Image.tile
-   * @property {String} - Repeat image at original size to fill the bounds.
-   */
-  static tile = 'tile';
-
-  /**
-   * @name Two.Image.stretch
-   * @property {String} - Stretch image to fill dimensions, ignoring aspect ratio.
+   * @name Two.Image.Modes
+   * @property {Object} mode - Different mode types to render an image inspired by Figma.
+   * @property {String} mode.fill - Scale image to fill the bounds while preserving aspect ratio.
+   * @property {String} mode.fit - Scale image to fit within bounds while preserving aspect ratio.
+   * @property {String} mode.crop - Scale image to fill bounds while preserving aspect ratio, cropping excess.
+   * @property {String} mode.tile - Repeat image at original size to fill the bounds.
+   * @property {String} mode.stretch - Stretch image to fill dimensions, ignoring aspect ratio.
    */
-  static stretch = 'stretch';
+  static Modes = {
+    fill: 'fill',
+    fit: 'fit',
+    crop: 'crop',
+    tile: 'tile',
+    stretch: 'stretch',
+  };
 
   /**
    * @name Two.Image.Properties
@@ -175,6 +164,7 @@ export class Image extends Rectangle {
    */
   toObject() {
     const object = super.toObject.call(this);
+    object.renderer.type = 'image';
     object.texture = this.texture.toObject();
     object.mode = this.mode;
     return object;
@@ -231,7 +221,7 @@ export class Image extends Rectangle {
 
         // Apply scaling based on mode
         switch (this._mode) {
-          case Image.fill: {
+          case Image.Modes.fill: {
             // Fill within bounds while preserving aspect ratio
             const scale = Math.max(scaleX, scaleY);
             effect.scale = scale;
@@ -241,7 +231,7 @@ export class Image extends Rectangle {
             break;
           }
 
-          case Image.fit: {
+          case Image.Modes.fit: {
             // Fit within bounds while preserving aspect ratio
             const scale = Math.min(scaleX, scaleY);
             effect.scale = scale; // TODO: For SVG this works `new Vector(scaleX, scaleY);`
@@ -251,21 +241,21 @@ export class Image extends Rectangle {
             break;
           }
 
-          case Image.crop: {
+          case Image.Modes.crop: {
             // Intentionally left blank to allow
             // external developer to control
             break;
           }
 
-          case Image.tile: {
+          case Image.Modes.tile: {
             // Repeat image and align it correctly
             effect.offset.x = (iw - rw) / 2;
             effect.offset.y = (ih - rh) / 2;
             effect.repeat = 'repeat';
             break;
           }
 
-          case Image.stretch:
+          case Image.Modes.stretch:
           default: {
             // Stretch the image texture to whatever the dimensions of the rect are
             effect.scale = new Vector(scaleX, scaleY);

build/two.module.js

@@ -151,6 +151,8 @@ export class Sprite extends Rectangle {
   constructor(path, ox, oy, cols, rows, frameRate) {
     super(ox, oy, 0, 0);
 
+    this._renderer.type = 'sprite';
+
     for (let prop in proto) {
       Object.defineProperty(this, prop, proto[prop]);
     }
@@ -351,6 +353,7 @@ export class Sprite extends Rectangle {
    */
   toObject() {
     const object = super.toObject.call(this);
+    object.renderer.type = 'sprite';
     object.texture = this.texture.toObject();
     object.columns = this.columns;
     object.rows = this.rows;
@@ -375,25 +378,25 @@ export class Sprite extends Rectangle {
   dispose() {
     // Call parent dispose for inherited cleanup (vertices, fill/stroke effects)
     super.dispose();
-    
+
     // Stop animation if playing
     if (this._playing) {
       this._playing = false;
     }
-    
+
     // Clear animation callbacks
     this._onLastFrame = null;
-    
+
     // Reset timing properties
     this._startTime = 0;
-    
+
     // Dispose texture (more thorough than unbind)
     if (this._texture && typeof this._texture.dispose === 'function') {
       this._texture.dispose();
     } else if (this._texture && typeof this._texture.unbind === 'function') {
       this._texture.unbind();
     }
-    
+
     return this;
   }
 

src/effects/image-sequence.js

@@ -15,6 +15,8 @@ import { RoundedRectangle } from './shapes/rounded-rectangle.js';
 import { Star } from './shapes/star.js';
 import { Text } from './text.js';
 import { Element } from './element.js';
+import { ImageSequence } from './effects/image-sequence.js';
+import { Sprite } from './effects/sprite.js';
 
 // Constants
 
@@ -317,8 +319,18 @@ export class Group extends Shape {
             return ArcSegment.fromObject(child);
           case 'circle':
             return Circle.fromObject(child);
+          case 'element':
+            return Element.fromObject(child);
           case 'ellipse':
             return Ellipse.fromObject(child);
+          case 'group':
+            return Group.fromObject(child);
+          case 'image':
+            return Image.fromObject(child);
+          case 'image-sequence':
+            return ImageSequence.fromObject(child);
+          case 'path':
+            return Path.fromObject(child);
           case 'points':
             return Points.fromObject(child);
           case 'polygon':
@@ -327,18 +339,14 @@ export class Group extends Shape {
             return Rectangle.fromObject(child);
           case 'rounded-rectangle':
             return RoundedRectangle.fromObject(child);
+          case 'shape':
+            return Shape.fromObject(child);
+          case 'sprite':
+            return Sprite.fromObject(child);
           case 'star':
             return Star.fromObject(child);
-          case 'path':
-            return Path.fromObject(child);
           case 'text':
             return Text.fromObject(child);
-          case 'group':
-            return Group.fromObject(child);
-          case 'shape':
-            return Shape.fromObject(child);
-          case 'element':
-            return Element.fromObject(child);
         }
       }
       // Commonly null for empty set
@@ -347,9 +355,24 @@ export class Group extends Shape {
     }
   }
 
+  /**
+   * @name Two.Group#copy
+   * @function
+   * @param {Two.Group} [group] - The reference {@link Two.Group}
+   * @returns {Two.Group}
+   * @description Copy the properties of one {@link Two.Group} onto another.
+   */
   copy(group) {
     super.copy.call(this, group);
-    console.warn('Two.Group.copy is not supported yet.');
+    console.warn(
+      'Two.js: attempting to copy group. Two.Group.children copying not supported.'
+    );
+    for (let i = 0; i < Group.Properties.length; i++) {
+      const k = Group.Properties[i];
+      if (k in group) {
+        this[k] = group[k];
+      }
+    }
     return this;
   }
 
@@ -434,7 +457,7 @@ export class Group extends Shape {
   dispose() {
     // Call parent dispose to preserve renderer type and unbind events
     super.dispose();
-    
+
     // Recursively dispose all children
     if (this.children) {
       for (let i = 0; i < this.children.length; i++) {
@@ -444,7 +467,7 @@ export class Group extends Shape {
         }
       }
     }
-    
+
     // Unbind children collection events
     if (this.children && typeof this.children.unbind === 'function') {
       try {
@@ -453,7 +476,7 @@ export class Group extends Shape {
         // Ignore unbind errors for incomplete Collection objects
       }
     }
-    
+
     return this;
   }