feat(symbol): added support for symbol overrides (#63)

fixes #60

* Updated createInstance to take in an optional list of overrides
* Added updateInstance function to update overrides for existing Symbol Instances
* Nested Symbol overrides are currently not supported

models/Layer/Layer.js

@@ -99,6 +99,35 @@ class Layer {
     return this.layers;
   }
 
+  /**
+   * Get all child, grandchild, etc layers, and optionally filter them by a predicate function.
+   * @param {function} [predicate] - Filter function if you want to only return certain layers
+   * @returns {Layer[]} An array of all layers. Will return all direct children, grandchildren, etc.
+   */
+  getAllLayers(predicate) {
+    function getRecursiveLayers(current, list) {
+      if (current === null || current === undefined) {
+        return list;
+      }
+      const childLayers = current.getLayers();
+      if (childLayers !== undefined) {
+        childLayers.forEach(layer => {
+          list.push(layer);
+          getRecursiveLayers(layer, list);
+        });
+      }
+      return list;
+    }
+
+    const allLayers = getRecursiveLayers(this, []);
+
+    if (predicate) {
+      return allLayers.filter(predicate);
+    }
+
+    return allLayers;
+  }
+
   getID() {
     return this.do_objectID;
   }

models/Layer/Layer.test.js

@@ -11,12 +11,74 @@
  * and limitations under the License.
  */
 
-const Layer = require('./index');
-
-const json = {};
+const Group = require('../Group');
+const Text = require('../Text');
 
 describe('Layer', () => {
   it('should work from raw JSON', () => {
     expect(true).toBeTruthy();
   });
 });
+
+describe('getLayers', () => {
+  it('should get all children layers', () => {
+    const group = new Group({
+      name: 'group',
+    });
+    const text1 = new Text({
+      name: 'text1',
+    });
+    const text2 = new Text({
+      name: 'text2',
+    });
+
+    group.addLayer(text1);
+    group.addLayer(text2);
+
+    const layers = group.getLayers().map(l => l.name);
+
+    expect(layers.sort()).toEqual(['text1', 'text2'].sort());
+  });
+
+  it('should only get direct children layers', () => {
+    const outerGroup = new Group({
+      name: 'outer group',
+    });
+
+    const innerGroup = new Group({
+      name: 'inner group',
+    });
+    const text = new Text({
+      name: 'text',
+    });
+
+    innerGroup.addLayer(text);
+    outerGroup.addLayer(innerGroup);
+
+    const layers = outerGroup.getLayers().map(l => l.name);
+
+    expect(layers.sort()).toEqual(['inner group'].sort());
+  });
+});
+
+describe('getAllLayers', () => {
+  it('should get all children layers', () => {
+    const outerGroup = new Group({
+      name: 'outer group',
+    });
+
+    const innerGroup = new Group({
+      name: 'inner group',
+    });
+    const text = new Text({
+      name: 'text',
+    });
+
+    innerGroup.addLayer(text);
+    outerGroup.addLayer(innerGroup);
+
+    const layers = outerGroup.getAllLayers().map(l => l.name);
+
+    expect(layers.sort()).toEqual(['inner group', 'text'].sort());
+  });
+});

models/Layer/index.d.ts

@@ -34,6 +34,8 @@ declare class Layer {
 
   getLayers(predicate?: string | RegExp): Layer[];
 
+  getAllLayers(predicate?: string | RegExp): Layer[];
+
   getID(): string;
 }
 

models/SymbolMaster/SymbolMaster.js

@@ -72,17 +72,100 @@ class SymbolMaster extends Artboard {
   }
 
   addLayer(layer, canOverride) {
-    this.overrideProperties.push(
-      Object.assign(MSImmutableOverrideProperty, {
+    const getOverrideNames = (prop, overrideNames) => {
+      switch (prop._class) {
+        case 'symbolInstance':
+          overrideNames.push(`${prop.do_objectID}_symbolID`);
+          break;
+        case 'text':
+          overrideNames.push(`${prop.do_objectID}_stringValue`);
+          if (prop.sharedStyleID !== null && prop.sharedStyleID !== undefined) {
+            overrideNames.push(`${prop.do_objectID}_textStyle`);
+          }
+          break;
+        case 'rectangle':
+        case 'star':
+        case 'triangle':
+        case 'polygon':
+        case 'shapePath':
+          if (prop.sharedStyleID !== null && prop.sharedStyleID !== undefined) {
+            overrideNames.push(`${prop.do_objectID}_layerStyle`);
+          }
+          break;
+        case 'group':
+          prop.layers.forEach(l => {
+            getOverrideNames(l, overrideNames);
+          });
+          break;
+        default:
+          break;
+      }
+      return overrideNames;
+    };
+
+    getOverrideNames(layer, []).forEach(name => {
+      this.overrideProperties.push({
+        ...MSImmutableOverrideProperty,
         canOverride,
-        overrideName: `${layer.do_objectID}_stringValue`,
-      })
-    );
+        overrideName: name,
+      });
+    });
+
     super.addLayer(layer);
   }
 
-  createInstance(args) {
-    const symbolInstance = new SymbolInstance({ ...args, symbolID: this.symbolID });
+  /**
+   * Update existing SymbolInstance
+   * Nested Symbols are not currently supported
+   * @property {symbolInstance} SymbolInstance
+   * @property {Object} args - overrides
+   * @property {string} args[].name - name of the override being set
+   * @property {string|Object} [args[].value] - the value set, for Layer Styles pass in object or do_objectID
+   * @property {string|Object} [args[].style] - for textStyles only, pass in TextStyle object or do_objectID
+   */
+  updateInstance(symbolInstance, args) {
+    args.forEach(arg => {
+      const overrideLayer = this.getAllLayers().find(l => l.name === arg.name);
+
+      if (overrideLayer !== undefined) {
+        const overrideName = overrideLayer.do_objectID;
+
+        symbolInstance.overrideValues
+          .filter(prop => prop.overrideName.split('_')[0] === overrideName)
+          .forEach(prop => {
+            if (prop.overrideName.includes('_stringValue')) {
+              prop.value = arg.value;
+            }
+            if (prop.overrideName.includes('_layerStyle')) {
+              prop.value = arg.value instanceof Object ? arg.value.do_objectID : arg.value;
+            }
+            if (arg.extStyle && prop.overrideName.includes('_textStyle')) {
+              prop.value = arg.style instanceof Object ? arg.style.do_objectID : arg.style.do_objectID;
+            }
+          });
+      }
+    });
+  }
+
+  /**
+   * Creates a new SymbolInstance with overrides
+   * Nested Symbols are not currently supported
+   * @property {Object} [args]
+   * @property {Object[]} [args.overrideValues] - overrides
+   * @property {string} [args.overrideValues[].name] - name of the override being set
+   * @property {string|Object} [args.overrideValues[].value] - the value set, for Layer Styles pass in object or do_objectID
+   * @property {string|Object} [args.overrideValues[].style] - for textStyles only, pass in TextStyle object or do_objectID
+   * @returns {SymbolInstance}
+   */
+  createInstance(args = {}) {
+    const symbolInstance = new SymbolInstance({
+      ...args,
+      symbolID: this.symbolID,
+      frame: new Rect(this.frame || {}),
+      name: args.name || '',
+      style: new Style(this.style),
+      allowsOverrides: this.allowsOverrides,
+    });
 
     symbolInstance.overrideValues = this.overrideProperties.map(prop => ({
       _class: 'overrideValue',
@@ -91,6 +174,10 @@ class SymbolMaster extends Artboard {
       value: '',
     }));
 
+    if (args && args.overrideValues) {
+      this.updateInstance(symbolInstance, args.overrideValues);
+    }
+
     return symbolInstance;
   }
 }