fix overrides and images on nodejs (#413)

* fix overrides and images on nodejs * Fix Border-radius clipping incorrectly calculated (#279) * fix setting text override * version 3.0.0-beta-3
airbnb · Feb 12, 2019 · 19173f4 · 19173f4
1 parent 42291a6
commit 19173f4
Show file tree

Hide file tree

Showing 27 changed files with 677 additions and 622 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/). Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/airbnb/react-sketchapp/releases) page.
 
+## Version 3.0.0-beta.3
+
+- Fix setting overrides (#409)
+- Fix images on NodeJS
+- Fix Border-radius clipping incorrectly calculated (#279)
+
 ## Version 3.0.0-beta.1
 
 - Fix ShapeGroup on nodejs (#387)

diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 
 ## Quick-start 🏃‍
 
-First, make sure you have installed [Sketch](http://sketchapp.com) version 43+, & a recent [npm](https://nodejs.org/en/download/).
+First, make sure you have installed [Sketch](http://sketchapp.com) version 50+, & a recent [npm](https://nodejs.org/en/download/).
 
 Open a new Sketch file, then in a terminal:
 

diff --git a/__tests__/jest/index.js b/__tests__/jest/index.js
@@ -4,7 +4,10 @@ let ReactSketch;
 describe('public API', () => {
   beforeEach(() => {
     // jest.resetModules();
-    jest.mock('../../src/jsonUtils/hacksForJSONImpl');
+    jest.mock('../../src/jsonUtils/sketchImpl/createStringMeasurer');
+    jest.mock('../../src/jsonUtils/sketchImpl/findFontName');
+    jest.mock('../../src/jsonUtils/sketchImpl/makeImageDataFromUrl');
+    jest.mock('../../src/jsonUtils/sketchImpl/makeSvgLayer');
     ReactSketch = require('../../src');
   });
 

diff --git a/__tests__/jest/jsonUtils/hacksForJSONImpl.js b/__tests__/jest/jsonUtils/hacksForJSONImpl.js
diff --git a/__tests__/jest/sharedStyles/TextStyles.js b/__tests__/jest/sharedStyles/TextStyles.js
@@ -12,7 +12,7 @@ beforeEach(() => {
   }));
 
   jest.mock('../../../src/utils/getSketchVersion.js', () => ({
-    default: jest.fn(() => 47),
+    default: jest.fn(() => 51),
   }));
 
   TextStyles = require('../../../src/sharedStyles/TextStyles');
@@ -21,7 +21,10 @@ beforeEach(() => {
 
   jest.mock('../../../src/wrappers/sharedTextStyles');
 
-  jest.mock('../../../src/jsonUtils/hacksForJSONImpl');
+  jest.mock('../../../src/jsonUtils/sketchImpl/createStringMeasurer');
+  jest.mock('../../../src/jsonUtils/sketchImpl/findFontName');
+  jest.mock('../../../src/jsonUtils/sketchImpl/makeImageDataFromUrl');
+  jest.mock('../../../src/jsonUtils/sketchImpl/makeSvgLayer');
 
   TextStyles = TextStyles.default;
   sharedTextStyles = sharedTextStyles.default;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-sketchapp",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "A React renderer for Sketch.app",
   "main": "lib/index.js",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "airbnb-prop-types": "^2.10.0",
     "error-stack-parser": "^2.0.0",
     "invariant": "^2.2.2",
+    "js-sha1": "^0.6.0",
     "murmur2js": "^1.0.0",
     "normalize-css-color": "^1.0.1",
     "pegjs": "^0.10.0",
@@ -118,7 +119,7 @@
     "react": "^16.3.2",
     "react-test-renderer": "^16.3.2",
     "rimraf": "^2.5.4",
-    "sketchapp-json-flow-types": "^0.3.4"
+    "sketchapp-json-flow-types": "^0.3.5"
   },
   "skpm": {
     "test": {

diff --git a/src/jsonUtils/borders.js b/src/jsonUtils/borders.js
@@ -59,10 +59,21 @@ export const createBorders = (
           isEnabled: true,
           color: makeColorFromCSS(borderTopColor),
           fillType: FillType.Solid,
-          position: BorderPosition.Inside,
+          position: BorderPosition.Outside,
           thickness: borderTopWidth,
         },
       ];
+      const backingLayer = content.layers ? content.layers[0] : undefined;
+      if (backingLayer) {
+        // $FlowFixMe
+        backingLayer.frame.x += borderTopWidth;
+        // $FlowFixMe
+        backingLayer.frame.y += borderTopWidth;
+        // $FlowFixMe
+        backingLayer.frame.width -= borderTopWidth * 2;
+        // $FlowFixMe
+        backingLayer.frame.height -= borderTopWidth * 2;
+      }
     }
 
     return [content];

diff --git a/src/jsonUtils/hacksForJSONImpl.js b/src/jsonUtils/hacksForJSONImpl.js
diff --git a/src/jsonUtils/models.js b/src/jsonUtils/models.js
@@ -115,23 +115,33 @@ export const makeRect = (x: number, y: number, width: number, height: number): S
   height,
 });
 
-export const makeJSONDataReference = (image: MSImageData): SJImageDataReference => ({
+export const makeJSONDataReference = (image: {
+  data: string,
+  sha1: string,
+}): SJImageDataReference => ({
   _class: 'MSJSONOriginalDataReference',
   _ref: `images/${generateID()}`,
   _ref_class: 'MSImageData',
   data: {
-    _data: image
-      .data()
-      .base64EncodedStringWithOptions(NSDataBase64EncodingEndLineWithCarriageReturn),
+    _data: image.data,
     // TODO(gold): can I just declare this as a var instead of using Cocoa?
   },
   sha1: {
-    _data: image
-      .sha1()
-      .base64EncodedStringWithOptions(NSDataBase64EncodingEndLineWithCarriageReturn),
+    _data: image.sha1,
   },
 });
 
+export const makeOverride = (
+  path: string,
+  type: 'symbolID' | 'stringValue' | 'layerStyle' | 'textStyle' | 'flowDestination' | 'image',
+  value: string | SJImageDataReference,
+) => ({
+  _class: 'overrideValue',
+  do_objectID: generateID(),
+  overrideName: `${path}_${type}`,
+  value,
+});
+
 export const makeSymbolInstance = (
   frame: SJRect,
   symbolID: string,