feat(models): add support for color variables with swatch model (#157)

Fixes #141

Co-authored-by: Lindsay Evans <lindsay.evans@boomworks.com.au>

Author: halffullheart

docs/models.md

@@ -40,14 +40,19 @@ class Color {
 
   /**
    *
-   * @param {String|Object} args This is passed to tinycolor 2. As long as tinycolor2 can understand this argument, the color will work.
+   * @param {String|Object|Color} args If a Color, used as-is, otherwised passed to tinycolor2. As long as tinycolor2 can understand this argument, the color will work.
    * @param {Color.Model} json
    */
   constructor(args, json) {
     if (json) {
       Object.assign(this, json);
     } else {
       const color = TinyColor(args || '#000').toRgb();
+
+      if (args && args.swatchID) {
+        this.swatchID = args.swatchID;
+      }
+
       Object.assign(this, Color.Model, {
         alpha: color.a,
         blue: color.b / 255,

models/Color/Color.js

@@ -12,6 +12,7 @@
  */
 
 const Color = require('./index');
+const { Swatch } = require('../index');
 
 const json = {
   _class: 'color',
@@ -42,4 +43,21 @@ describe('Color', () => {
     color.lighten(100);
     expect(color.toHexString()).toEqual('#ffffff');
   });
+
+  it('should accept swatchID as property along with color components', () => {
+    const swatchID = '6D02695C-C1FF-471B-9948-A13985E7618E';
+    const alpha = 0.77;
+    const color = new Color({ swatchID, r: 1, g: 0, b: 0, a: alpha });
+    expect(color.swatchID).toEqual(swatchID);
+    expect(color.alpha).toEqual(alpha);
+    expect(color.blue).toEqual(0);
+  });
+
+  it('should accept result of swatch.asColor()', () => {
+    const swatch = new Swatch({ color: new Color('purple') });
+    const refColor = swatch.asColor();
+    const color = new Color(refColor);
+    expect(color.swatchID).toEqual(swatch.do_objectID);
+    expect(color.red).toEqual(refColor.r / 255);
+  });
 });

models/Color/Color.test.js

@@ -6,6 +6,7 @@ declare class Color {
   blue: number;
   green: number;
   red: number;
+  swatchID?: string;
 
   constructor(args?: any, json?: any);
 

models/Color/index.d.ts

@@ -49,6 +49,10 @@ class Document {
         _class: 'sharedTextStyleContainer',
         objects: [],
       },
+      sharedSwatches: {
+        _class: 'swatchContainer',
+        objects: [],
+      },
       pages: [],
     };
   }
@@ -119,6 +123,23 @@ class Document {
     return this;
   }
 
+  /**
+   * @returns {Swatch[]} An array of Swatches
+   */
+  getSwatches() {
+    return this.sharedSwatches.objects;
+  }
+
+  /**
+   *
+   * @param {Swatch} swatch
+   * @returns {this}
+   */
+  addSwatch(swatch) {
+    this.sharedSwatches.objects = this.sharedSwatches.objects.concat(swatch);
+    return this;
+  }
+
   /**
    *
    * @param {String} pageID

models/Document/Document.js

@@ -1,6 +1,7 @@
 import Color from '../Color';
 import Page from '../Page';
 import SharedStyle from '../SharedStyle';
+import Swatch from '../Swatch';
 
 declare class Document {
   _class: 'document';
@@ -32,6 +33,10 @@ declare class Document {
     _class: 'sharedTextStyleContainer';
     objects: SharedStyle[];
   };
+  sharedSwatches: {
+    _class: 'swatchContainer';
+    objects: Swatch[];
+  };
   pages: Page[];
 
   constructor(args?: any, json?: any);
@@ -46,6 +51,10 @@ declare class Document {
 
   addTextStyle(style: SharedStyle): Document;
 
+  getSwatches(): Swatch[];
+
+  addSwatch(swatch: Swatch): Document;
+
   addPage(pageID: string): Document;
 }
 

models/Document/index.d.ts

@@ -135,6 +135,14 @@ class Sketch {
     return this.document.getTextStyles();
   }
 
+  addSwatch(swatch) {
+    this.document.addSwatch(swatch);
+  }
+
+  getSwatches() {
+    return this.document.getSwatches();
+  }
+
   addPage(page, args) {
     if (!(page instanceof Page)) {
       page = new Page(page);

models/Sketch/Sketch.js

@@ -5,6 +5,7 @@ import User from '../User';
 import Document from '../Document';
 import Page from '../Page';
 import SharedStyle from '../SharedStyle';
+import Swatch from '../Swatch';
 
 declare class Sketch {
   static fromFile(path: fs.PathLike): Promise<Sketch>;
@@ -35,6 +36,10 @@ declare class Sketch {
 
   getTextStyles(): SharedStyle[];
 
+  addSwatch(swatch: Swatch): void;
+
+  getSwatches(): Swatch[];
+
   addPage(page: any, args?: any): void;
 
   addArtboard(pageID: string, artboard: any): void;

models/Sketch/index.d.ts

@@ -0,0 +1,45 @@
+const uuid = require('uuid-v4');
+const Color = require('../Color/Color');
+
+/**
+ * Also known as 'Color Variables'
+ */
+class Swatch {
+  static get Model() {
+    return {
+      _class: 'swatch',
+    };
+  }
+
+  /**
+   *
+   * @param {Object} args
+   * @param {String} args.name
+   * @param {Color} args.color
+   * @param {Color.Model} json
+   */
+  constructor(args, json) {
+    if (json) {
+      Object.assign(this, Swatch.Model, json);
+      this.value = new Color(this.value);
+    } else {
+      const id = args.id || uuid().toUpperCase();
+      const name = args.name || args.color.toHex().toUpperCase();
+      Object.assign(this, Swatch.Model, {
+        name,
+        do_objectID: id,
+        value: args.color,
+      });
+    }
+  }
+
+  /**
+   * Get an object suitable for use in constructing colors
+   * @returns {Color} A color with the `swatchID` set
+   */
+  asColor() {
+    return { ...this.value.toRgb(), swatchID: this.do_objectID };
+  }
+}
+
+module.exports = Swatch;

models/Swatch/Swatch.js

@@ -0,0 +1,35 @@
+const Color = require('../Color');
+const Swatch = require('./index');
+
+const json = {
+  name: 'Test Color',
+  value: new Color('#c9c'),
+};
+
+describe('Swatch', () => {
+  it('should work from raw JSON', () => {
+    const swatch = new Swatch(null, json);
+    expect(swatch._class).toBe('swatch');
+  });
+
+  it('should have a default name when no name is given', () => {
+    const lime = new Color('limegreen');
+    const unnamedSwatch = new Swatch({ color: lime });
+    expect(unnamedSwatch.name).toBe('32CD32');
+
+    const namedSwatch = new Swatch({ name: 'Lime', color: lime });
+    expect(namedSwatch.name).toBe('Lime');
+  });
+
+  it('asColor should work', () => {
+    const color = new Color('#F00');
+    const swatch = new Swatch({ color });
+    const refColor = swatch.asColor();
+    expect(refColor.swatchID).not.toBeUndefined();
+    expect(refColor.swatchID).toBe(swatch.do_objectID);
+    expect(refColor.r).toBe(255);
+    expect(refColor.g).toBe(0);
+    expect(refColor.b).toBe(0);
+    expect(refColor.a).toBe(1);
+  });
+});