From 043e083aedf9a9e909e7b5acbd369873d89b7a89 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 11:08:56 +0100 Subject: [PATCH 1/7] test: refactor parser name --- .../lib/sketch-style-parser.service.spec.ts | 178 ++++++++++++++++-- .../src/lib/sketch-style-parser.service.ts | 8 +- 2 files changed, 166 insertions(+), 20 deletions(-) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts index 64fa165c0..c8c10af2d 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts @@ -19,8 +19,8 @@ describe('SketchStyleParserService', () => { expect(sketchStyleParserService).toBeTruthy(); }); - describe('when parse text', () => { - it('should parse text font', () => { + describe('when transform text', () => { + it('should output font', () => { const obj = { style: { textStyle: { @@ -35,14 +35,14 @@ describe('SketchStyleParserService', () => { } } } - } as any; + } as SketchMSLayer; expect(sketchStyleParserService.transformTextFont(obj)).toEqual({ 'font-family': '\'Roboto-Medium\', \'Roboto\', \'sans-serif\'', 'font-size': '14px', }); }); - it('should not parse not configured font', () => { + it('should not output font when empty attribute', () => { const obj = { style: { textStyle: { @@ -56,7 +56,7 @@ describe('SketchStyleParserService', () => { expect(sketchStyleParserService.transformTextFont(obj)).toEqual({}); }); - it('should parse color', () => { + it('should output color', () => { const obj = { style: { textStyle: { @@ -90,7 +90,7 @@ describe('SketchStyleParserService', () => { }); }); - describe('when parse color', () => { + describe('when transform color', () => { it('should parse', () => { const color = { red: 0.53, @@ -137,7 +137,7 @@ describe('SketchStyleParserService', () => { expect(root).toEqual({ css: { 'background-color': color.toString() } }); }); - it('should parse shadow', () => { + it('should transform shadow', () => { const obj = { shadows: [{ offsetX: 123, @@ -151,8 +151,8 @@ describe('SketchStyleParserService', () => { expect(sketchStyleParserService.transformShadows(obj)).toEqual({ 'box-shadow': `123px 53px 12px 23px ${color.rgba}`}); }); - describe('when parse blur', () => { - it('should parse positive radius blur', () => { + describe('when transform blur', () => { + it('should output positive radius blur', () => { const obj = {blur: {radius: 96}} as SketchMSStyle; expect(sketchStyleParserService.transformBlur(obj)).toEqual({filter: `blur(${obj.blur.radius}px);`}); }); @@ -173,8 +173,8 @@ describe('SketchStyleParserService', () => { }); }); - describe('when parse border', () => { - it('should parse border', () => { + describe('when transform border', () => { + it('should output box shadow', () => { const obj = { borders: [{ thickness: 129, @@ -244,8 +244,8 @@ describe('SketchStyleParserService', () => { }); }); - describe('when parse fill', () => { - it('should parse fill', () => { + describe('when transform fill', () => { + it('should output background', () => { const obj = { fills: [{ color: getSketchColorMock(), @@ -257,7 +257,7 @@ describe('SketchStyleParserService', () => { }] } }] - } as SketchMSStyle; + } as any; // TODO: migrate @type isEnable to boolean const color = sketchStyleParserService['parseColors'](obj.fills[0].color); const colorStop = sketchStyleParserService['parseColors'](obj.fills[0].gradient.stops[0].color); expect(sketchStyleParserService.transformFills(obj)).toEqual({ @@ -270,7 +270,7 @@ describe('SketchStyleParserService', () => { const obj = { fills: [{ color: getSketchColorMock(), - isEnabled: true, + isEnabled: 1, // TODO: migrate @type isEnable to boolean gradient: { stops: [{ color: getSketchColorMock(), @@ -291,7 +291,7 @@ describe('SketchStyleParserService', () => { const obj = { fills: [{ color: getSketchColorMock(), - isEnabled: true, + isEnabled: 1, // TODO: migrate @type isEnable to boolean gradient: { stops: [{ color: getSketchColorMock(), @@ -308,4 +308,150 @@ describe('SketchStyleParserService', () => { }); }); }); + + describe('when parse solid', () => { + it('should transform triangle solid', () => { + const obj = { + style: {}, + frame: { + width: 1, + height: 2 + }, + points: [{ + point: '{0, 0}' + }, { + point: '{0, 1}' + }, { + point: '{1, 1}' + }, { + point: '{1, 0}' + }] + } as SketchMSPath; + expect(sketchStyleParserService.transformTriangleSolid(obj, {})).toEqual({ + shape: ``, + style: { + left: '0px', + position: 'absolute', + top: '0px' + } + }); + }); + + it('should transform triangle shape with shape solid transformer', () => { + const obj = { + style: {}, + frame: { + width: 1, + height: 2 + }, + points: [{ + curveFrom: '{0, 0}', + curveMode: 1, + curveTo: '{0, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 0}' + }, { + curveFrom: '{0, 1}', + curveMode: 1, + curveTo: '{0, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 1}' + }, { + curveFrom: '{1, 1}', + curveMode: 1, + curveTo: '{1, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 1}' + }, { + curveFrom: '{1, 0}', + curveMode: 1, + curveTo: '{1, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 0}' + }], + } as SketchMSPath; + expect(sketchStyleParserService.transformShapeSolid(obj, {})).toEqual({ + shape: ``, + style: { + left: '0px', + position: 'absolute', + top: '0px' + } + }); + }); + + it('should transform triangle shape with shape solid transformer', () => { + const obj = { + style: {}, + frame: { + width: 432, + height: 123 + }, + points: [{ + curveFrom: '{0.9932432432432432, 0}', + curveTo: '{0.9932432432432432, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0.9932432432432432, 0}' + }, { + curveFrom: '{0.0030405405405404635, 0}', + curveTo: '{0.0067567567567567571, 0}', + hasCurveFrom: true, + hasCurveTo: false, + point: '{0.0067567567567567571, 0}' + }, { + curveFrom: '{0, 0.027777777777777776}', + curveTo: '{0, 0.012499999999999685}', + hasCurveFrom: false, + hasCurveTo: true, + point: '{0, 0.027777777777777776}' + }, { + curveFrom: '{0, 1}', + curveTo: '{0, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 1}' + }, { + curveFrom: '{1, 1}', + curveTo: '{1, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 1}' + }, { + curveFrom: '{1, 0.012499999999999685}', + curveTo: '{1, 0.027777777777777776}', + hasCurveFrom: true, + hasCurveTo: false, + point: '{1, 0.027777777777777776}' + }, { + curveFrom: '{0.9932432432432432, 0}', + curveTo: '{0.99695945945945952, 0}', + hasCurveFrom: false, + hasCurveTo: true, + point: '{0.9932432432432432, 0}' + }] + } as SketchMSPath; + expect(sketchStyleParserService.transformShapeSolid(obj, {})).toEqual({ + shape: ``, + style: { + left: '0px', + position: 'absolute', + top: '0px' + } + }); + }); + + it('should transform oval solid', () => { + expect(sketchStyleParserService.transformOvalSolid()).toEqual({ + 'border-radius': '50%' + }); + }); + }); }); diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts index af14cdc44..d0a0645b1 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts @@ -305,7 +305,7 @@ export class SketchStyleParserService { return node.attributedString.string; } - transformTriangleSolid(node: SketchMSLayer, style: {[key: string]: string}) { + transformTriangleSolid(node: SketchMSPath, style: {[key: string]: string}) { const config = []; let offset = 0; @@ -346,7 +346,7 @@ export class SketchStyleParserService { }; } - transformShapeSolid(node: SketchMSLayer, style: {[key: string]: string}) { + transformShapeSolid(node: SketchMSPath, style: {[key: string]: string}) { const config = []; let offset = 0; @@ -559,7 +559,7 @@ export class SketchStyleParserService { return config; } - svgCanvas(node: SketchMSLayer, offset: number, paths: string) { + svgCanvas(node: SketchMSPath, offset: number, paths: string) { return { shape: `${paths}`, style: { @@ -570,7 +570,7 @@ export class SketchStyleParserService { }; } - parsePoint(point: string, offset: number, node: SketchMSLayer) { + parsePoint(point: string, offset: number, node: SketchMSPath) { const parsedPoint = point.slice(1, -1).split(', '); return { x: (node.frame.width * Number.parseFloat(parsedPoint[0]) + offset).toFixed(3), From 0e741111aebc67b01fa3389f9e01bd31ebd339a3 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 11:16:09 +0100 Subject: [PATCH 2/7] chore: remove missed type todo --- .../sketchapp-parser/src/lib/sketch-style-parser.service.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts index d0a0645b1..3e9dcfda5 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.ts @@ -374,8 +374,7 @@ export class SketchStyleParserService { segments.unshift(`M${origin.x} ${origin.y}`); - // TODO: isClosed to type - if ((node as any).isClosed) { + if (node.isClosed) { segments.push('z'); } From 81790d0a88ca36b1c00011ef39f65fbc130cab07 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 11:38:49 +0100 Subject: [PATCH 3/7] test: add parse point test --- .../lib/sketch-style-parser.service.spec.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts index c8c10af2d..14cdc456f 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts @@ -454,4 +454,43 @@ describe('SketchStyleParserService', () => { }); }); }); + + it('should parse point', () => { + const node = { + frame: { + width: 10, + height: 10 + } + } as SketchMSPath; + expect(sketchStyleParserService.parsePoint('{1, 0}', 2, node)).toEqual({ + x: '12.000', + y: '2.000' + }); + }); + + it('should parse 0 height point', () => { + const node = { + frame: { + width: 18, + height: 0 + } + } as SketchMSPath; + expect(sketchStyleParserService.parsePoint('{1, 0}', 4, node)).toEqual({ + x: '22.000', + y: '4.000' + }); + }); + + it('should parse point with negative offset', () => { + const node = { + frame: { + width: 18, + height: 0 + } + } as SketchMSPath; + expect(sketchStyleParserService.parsePoint('{1, 0}', -4, node)).toEqual({ + x: '14.000', + y: '-4.000' + }); + }); }); From 4d06d6eda4dd04f7f3e817b3e818723914eab578 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 11:42:13 +0100 Subject: [PATCH 4/7] test: add parse set text test --- .../src/lib/sketch-style-parser.service.spec.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts index 14cdc456f..73aa4a427 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts @@ -137,6 +137,15 @@ describe('SketchStyleParserService', () => { expect(root).toEqual({ css: { 'background-color': color.toString() } }); }); + it('should set text', () => { + const text = 'hello there'; + const obj = { css: {} }; + const root = {}; + sketchStyleParserService.setText(obj, root, text); + expect(obj).toEqual({ text }); + expect(root).toEqual({ text }); + }); + it('should transform shadow', () => { const obj = { shadows: [{ From 7977592f6a61362e0f20c0acfbfd22716af6e706 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 11:54:23 +0100 Subject: [PATCH 5/7] test: add set solid test --- .../lib/sketch-style-parser.service.spec.ts | 51 +++++++++++++++++-- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts index 73aa4a427..dd97838b5 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts @@ -139,13 +139,58 @@ describe('SketchStyleParserService', () => { it('should set text', () => { const text = 'hello there'; - const obj = { css: {} }; + const obj = {}; const root = {}; sketchStyleParserService.setText(obj, root, text); expect(obj).toEqual({ text }); expect(root).toEqual({ text }); }); + it('should set solid', () => { + const def = { + style: {}, + frame: { + width: 1, + height: 2 + }, + points: [{ + curveFrom: '{0, 0}', + curveMode: 1, + curveTo: '{0, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 0}' + }, { + curveFrom: '{0, 1}', + curveMode: 1, + curveTo: '{0, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 1}' + }, { + curveFrom: '{1, 1}', + curveMode: 1, + curveTo: '{1, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 1}' + }, { + curveFrom: '{1, 0}', + curveMode: 1, + curveTo: '{1, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 0}' + }], + } as SketchMSPath; + const shape = sketchStyleParserService.transformShapeSolid(def, {}).shape; + const obj = {}; + const root = {}; + sketchStyleParserService.setSolid(obj, root, shape); + expect(obj).toEqual({ shape }); + expect(root).toEqual({ shape }); + }); + it('should transform shadow', () => { const obj = { shadows: [{ @@ -346,7 +391,7 @@ describe('SketchStyleParserService', () => { }); }); - it('should transform triangle shape with shape solid transformer', () => { + it('should transform triangle solid with solid solid transformer', () => { const obj = { style: {}, frame: { @@ -393,7 +438,7 @@ describe('SketchStyleParserService', () => { }); }); - it('should transform triangle shape with shape solid transformer', () => { + it('should transform triangle solid with solid solid transformer', () => { const obj = { style: {}, frame: { From b1e9bc975bc60b4f5ffba92aa33c3a21f7aa1790 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Wed, 20 Mar 2019 15:37:56 +0100 Subject: [PATCH 6/7] test: reorder sketch parser test --- .../lib/sketch-style-parser.service.spec.ts | 127 +++++++++--------- 1 file changed, 64 insertions(+), 63 deletions(-) diff --git a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts index dd97838b5..4d5d6607c 100644 --- a/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts +++ b/packages/sketchapp-parser/src/lib/sketch-style-parser.service.spec.ts @@ -128,69 +128,6 @@ describe('SketchStyleParserService', () => { }); }); - it('should set style', () => { - const color = getSketchColorMock(); - const obj = { css: {} }; - const root = {}; - sketchStyleParserService.setStyle(obj, root, { 'background-color': color.toString() }); - expect(obj).toEqual({ css: { 'background-color': color.toString() } }); - expect(root).toEqual({ css: { 'background-color': color.toString() } }); - }); - - it('should set text', () => { - const text = 'hello there'; - const obj = {}; - const root = {}; - sketchStyleParserService.setText(obj, root, text); - expect(obj).toEqual({ text }); - expect(root).toEqual({ text }); - }); - - it('should set solid', () => { - const def = { - style: {}, - frame: { - width: 1, - height: 2 - }, - points: [{ - curveFrom: '{0, 0}', - curveMode: 1, - curveTo: '{0, 0}', - hasCurveFrom: false, - hasCurveTo: false, - point: '{0, 0}' - }, { - curveFrom: '{0, 1}', - curveMode: 1, - curveTo: '{0, 1}', - hasCurveFrom: false, - hasCurveTo: false, - point: '{0, 1}' - }, { - curveFrom: '{1, 1}', - curveMode: 1, - curveTo: '{1, 1}', - hasCurveFrom: false, - hasCurveTo: false, - point: '{1, 1}' - }, { - curveFrom: '{1, 0}', - curveMode: 1, - curveTo: '{1, 0}', - hasCurveFrom: false, - hasCurveTo: false, - point: '{1, 0}' - }], - } as SketchMSPath; - const shape = sketchStyleParserService.transformShapeSolid(def, {}).shape; - const obj = {}; - const root = {}; - sketchStyleParserService.setSolid(obj, root, shape); - expect(obj).toEqual({ shape }); - expect(root).toEqual({ shape }); - }); - it('should transform shadow', () => { const obj = { shadows: [{ @@ -547,4 +484,68 @@ describe('SketchStyleParserService', () => { y: '-4.000' }); }); + + it('should set style', () => { + const color = getSketchColorMock(); + const obj = { css: {} }; + const root = {}; + sketchStyleParserService.setStyle(obj, root, { 'background-color': color.toString() }); + expect(obj).toEqual({ css: { 'background-color': color.toString() } }); + expect(root).toEqual({ css: { 'background-color': color.toString() } }); + }); + + it('should set text', () => { + const text = 'hello there'; + const obj = {}; + const root = {}; + sketchStyleParserService.setText(obj, root, text); + expect(obj).toEqual({ text }); + expect(root).toEqual({ text }); + }); + + it('should set solid', () => { + const def = { + style: {}, + frame: { + width: 1, + height: 2 + }, + points: [{ + curveFrom: '{0, 0}', + curveMode: 1, + curveTo: '{0, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 0}' + }, { + curveFrom: '{0, 1}', + curveMode: 1, + curveTo: '{0, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{0, 1}' + }, { + curveFrom: '{1, 1}', + curveMode: 1, + curveTo: '{1, 1}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 1}' + }, { + curveFrom: '{1, 0}', + curveMode: 1, + curveTo: '{1, 0}', + hasCurveFrom: false, + hasCurveTo: false, + point: '{1, 0}' + }], + } as SketchMSPath; + const shape = sketchStyleParserService.transformShapeSolid(def, {}).shape; + const obj = {}; + const root = {}; + sketchStyleParserService.setSolid(obj, root, shape); + expect(obj).toEqual({ shape }); + expect(root).toEqual({ shape }); + }); + }); From 8ae1979b5cf83a5243a607a05f907624429da205 Mon Sep 17 00:00:00 2001 From: Shikanime Deva Date: Thu, 21 Mar 2019 14:04:43 +0100 Subject: [PATCH 7/7] chore: update sketchapp type --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 56cf97862..099b26216 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1811,9 +1811,9 @@ "dev": true }, "@types/sketchapp": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/sketchapp/-/sketchapp-1.0.1.tgz", - "integrity": "sha512-bKcGXWGxYLr5Msio+Pu2eMTLZA0oLnmQCNxQ2YjbxOhXVDAWyYgEK7KBhiqjjvIgV3rGtm+qW4jN0+qgpmTngg==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@types/sketchapp/-/sketchapp-1.0.3.tgz", + "integrity": "sha512-cXEtfd4WQukCsp4l20PoA5F4NMDPCZhqFLUsh7R27Rqst/+IFUNTxnyHyhbVMKsqbFbZwpYh3SErut6Z+dS77Q==", "dev": true }, "@types/source-list-map": { diff --git a/package.json b/package.json index 69b20716f..13630e0b5 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@ngxs/logger-plugin": "^3.4.1", "@types/highlight.js": "^9.12.3", "@types/node": "~11.9.2", - "@types/sketchapp": "^1.0.0", + "@types/sketchapp": "^1.0.3", "codelyzer": "~4.5.0", "conventional-changelog-cli": "^2.0.12", "husky": "^1.3.1",