Skip to content

Commit fae2bf7

Browse files
jemgolddchen
jemgold
authored and
dchen
committed
fix flow bugs in SymbolInstanceRenderer (#110)
1 parent bac86fd commit fae2bf7

File tree

3 files changed

+109
-65
lines changed

3 files changed

+109
-65
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"normalize-css-color": "^1.0.1",
3939
"prop-types": "^15.5.8",
4040
"sketch-constants": "^1.0.2",
41-
"sketchapp-json-flow-types": "git://github.com/lukewestby/sketchapp-json-flow-types.git#address_5_comments",
41+
"sketchapp-json-flow-types": "github:jongold/sketchapp-json-flow-types#gold/fix-SJShapeLayer",
4242
"sketchapp-json-plugin": "^0.0.3"
4343
},
4444
"peerDependencies": {

‎src/renderers/SketchRenderer.js

+17-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import type { LayoutInfo, ViewStyle, TextStyle, SketchJSON } from '../types';
66
const DEFAULT_OPACITY = 1.0;
77

88
class SketchRenderer {
9-
getDefaultGroupName(/* props: any, value: ?string */) {
9+
getDefaultGroupName(
10+
props: any,
11+
// eslint-disable-next-line no-unused-vars
12+
value: ?string,
13+
) {
1014
return 'Group';
1115
}
1216
renderGroupLayer(
@@ -15,7 +19,7 @@ class SketchRenderer {
1519
textStyle: TextStyle,
1620
props: any,
1721
// eslint-disable-next-line no-unused-vars
18-
value: ?string
22+
value: ?string,
1923
): SketchJSON {
2024
// Default SketchRenderer just renders an empty group
2125

@@ -24,10 +28,18 @@ class SketchRenderer {
2428
// processTransform(layer, layout, style.transform);
2529
// }
2630

27-
const opacity = style.opacity !== undefined ? style.opacity : DEFAULT_OPACITY;
31+
const opacity = style.opacity !== undefined
32+
? style.opacity
33+
: DEFAULT_OPACITY;
2834

2935
return {
30-
...layerGroup(layout.left, layout.top, layout.width, layout.height, opacity),
36+
...layerGroup(
37+
layout.left,
38+
layout.top,
39+
layout.width,
40+
layout.height,
41+
opacity,
42+
),
3143
name: props.name || this.getDefaultGroupName(props, value),
3244
};
3345
}
@@ -37,7 +49,7 @@ class SketchRenderer {
3749
textStyle: TextStyle,
3850
props: any,
3951
// eslint-disable-next-line no-unused-vars
40-
value: ?string
52+
value: ?string,
4153
): Array<SketchJSON> {
4254
return [];
4355
}

‎src/renderers/SymbolInstanceRenderer.js

+91-59
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,76 @@
11
/* @flow */
2-
import type { SJSymbolInstanceLayer, SJLayer, SJObjectId } from 'sketchapp-json-flow-types';
2+
// import type { SJSymbolInstanceLayer, SJLayer, SJObjectId } from 'sketchapp-json-flow-types';
33
import SketchRenderer from './SketchRenderer';
4-
import { makeSymbolInstance, makeRect, makeJSONDataReference } from '../jsonUtils/models';
4+
import {
5+
makeSymbolInstance,
6+
makeRect,
7+
makeJSONDataReference,
8+
} from '../jsonUtils/models';
59
import type { ViewStyle, LayoutInfo, TextStyle } from '../types';
610
import { getSymbolMasterByName, getSymbolMasterById } from '../symbol';
711
import { makeImageDataFromUrl } from '../jsonUtils/hacksForJSONImpl';
812

9-
type OverrideReferenceBase = {
10-
objectId: SJObjectId,
11-
name: string
12-
};
13-
14-
type OverrideReference =
15-
| ({ type: 'text' } & OverrideReferenceBase)
16-
| ({ type: 'image' } & OverrideReferenceBase)
17-
| ({
18-
type: 'symbolInstance',
19-
symbolId: string,
20-
width: number,
21-
height: number
22-
} & OverrideReferenceBase);
23-
24-
const extractOverridesHelp = (subLayer: SJLayer, output: Array<OverrideReference>) => {
25-
if (subLayer._class === 'text' && !output.some(r => r.objectId === subLayer.do_objectID)) {
26-
output.push({ type: 'text', objectId: subLayer.do_objectID, name: subLayer.name });
13+
// type OverrideReferenceBase = {
14+
// objectId: SJObjectId,
15+
// name: string
16+
// };
17+
18+
// type OverrideReference =
19+
// | ({ type: 'text' } & OverrideReferenceBase)
20+
// | ({ type: 'image' } & OverrideReferenceBase)
21+
// | ({
22+
// type: 'symbolInstance',
23+
// symbolId: string,
24+
// width: number,
25+
// height: number
26+
// } & OverrideReferenceBase);
27+
28+
const extractOverridesHelp = (subLayer: any, output: any) => {
29+
if (
30+
subLayer._class === 'text' &&
31+
!output.some(r => r.objectId === subLayer.do_objectID)
32+
) {
33+
output.push({
34+
type: 'text',
35+
objectId: subLayer.do_objectID,
36+
name: subLayer.name,
37+
});
2738
return;
2839
}
2940

30-
if (subLayer._class === 'group') {
31-
if (subLayer.layers && subLayer.layers.length) {
32-
// here we're doing some look-ahead to see if this group contains a group
33-
// that contains text. this is the structure that will appear if the user
34-
// creates a `<Text />` element with a custom name
35-
const subGroup = subLayer.layers.find(l => l._class === 'group');
36-
const textLayer = subGroup && subGroup.layers
37-
? subGroup.layers.find(l => l._class === 'text')
38-
: null;
39-
if (textLayer) {
40-
output.push({ type: 'text', objectId: textLayer.do_objectID, name: subLayer.name });
41-
return;
42-
}
41+
if (subLayer._class === 'group' && subLayer.layers) {
42+
// here we're doing some look-ahead to see if this group contains a group
43+
// that contains text. this is the structure that will appear if the user
44+
// creates a `<Text />` element with a custom name
45+
const subGroup = subLayer.layers.find(l => l._class === 'group');
46+
const textLayer = subGroup && subGroup.layers
47+
? subGroup.layers.find(l => l._class === 'text')
48+
: null;
49+
if (textLayer) {
50+
output.push({
51+
type: 'text',
52+
objectId: textLayer.do_objectID,
53+
name: subLayer.name,
54+
});
55+
return;
56+
}
4357

44-
// here we're doing look-ahead to see if this group contains a shapeGroup
45-
// with an image fill. if it does we can do an image override on that
46-
// fill
47-
const shapeGroup = subLayer.layers.find(l => l._class === 'shapeGroup');
48-
if (
49-
shapeGroup &&
50-
shapeGroup._class === 'shapeGroup' &&
51-
shapeGroup.style &&
52-
shapeGroup.style.fills.some(f => f.image)
53-
) {
54-
output.push({ type: 'image', objectId: shapeGroup.do_objectID, name: subLayer.name });
55-
}
58+
const shapeGroup =
59+
subLayer.layers && subLayer.layers.find(l => l._class === 'shapeGroup');
60+
// here we're doing look-ahead to see if this group contains a shapeGroup
61+
// with an image fill. if it does we can do an image override on that
62+
// fill
63+
if (
64+
shapeGroup &&
65+
shapeGroup._class === 'shapeGroup' &&
66+
shapeGroup.style != null &&
67+
shapeGroup.style.fills.some(f => f.image)
68+
) {
69+
output.push({
70+
type: 'image',
71+
objectId: shapeGroup.do_objectID,
72+
name: subLayer.name,
73+
});
5674
}
5775
}
5876

@@ -73,11 +91,13 @@ const extractOverridesHelp = (subLayer: SJLayer, output: Array<OverrideReference
7391
subLayer._class === 'group') &&
7492
subLayer.layers
7593
) {
76-
subLayer.layers.forEach(subSubLayer => extractOverridesHelp(subSubLayer, output));
94+
subLayer.layers.forEach(subSubLayer =>
95+
extractOverridesHelp(subSubLayer, output),
96+
);
7797
}
7898
};
7999

80-
const extractOverrides = (subLayers: Array<SJLayer>): Array<OverrideReference> => {
100+
const extractOverrides = (subLayers: any) => {
81101
const output = [];
82102
subLayers.forEach(subLayer => extractOverridesHelp(subLayer, output));
83103
return output;
@@ -90,14 +110,14 @@ class SymbolInstanceRenderer extends SketchRenderer {
90110
textStyle: TextStyle,
91111
props: any,
92112
// eslint-disable-next-line no-unused-vars
93-
value: ?string
94-
): SJSymbolInstanceLayer {
113+
value: ?string,
114+
): any {
95115
const masterTree = getSymbolMasterByName(props.masterName);
96116

97117
const symbolInstance = makeSymbolInstance(
98118
makeRect(layout.left, layout.top, layout.width, layout.height),
99119
masterTree.symbolID,
100-
props.name
120+
props.name,
101121
);
102122

103123
if (!props.overrides) {
@@ -106,31 +126,39 @@ class SymbolInstanceRenderer extends SketchRenderer {
106126

107127
const overridableLayers = extractOverrides(masterTree.layers);
108128

109-
const overrides = overridableLayers.reduce(function inject(memo, reference) {
129+
const overrides = overridableLayers.reduce(function inject(
130+
memo,
131+
reference,
132+
) {
110133
if (reference.type === 'symbolInstance') {
111134
// eslint-disable-next-line
112135
if (props.overrides.hasOwnProperty(reference.name)) {
113136
const overrideValue = props.overrides[reference.name];
114-
if (typeof overrideValue !== 'function' || typeof overrideValue.masterName !== 'string') {
137+
if (
138+
typeof overrideValue !== 'function' ||
139+
typeof overrideValue.masterName !== 'string'
140+
) {
115141
throw new Error(
116-
'##FIXME## SYMBOL INSTANCE SUBSTITUTIONS MUST BE PASSED THE CONSTRUCTOR OF THE OTHER SYMBOL'
142+
'##FIXME## SYMBOL INSTANCE SUBSTITUTIONS MUST BE PASSED THE CONSTRUCTOR OF THE OTHER SYMBOL',
117143
);
118144
}
119145

120146
const originalMaster = getSymbolMasterById(reference.symbolId);
121-
const replacementMaster = getSymbolMasterByName(overrideValue.masterName);
147+
const replacementMaster = getSymbolMasterByName(
148+
overrideValue.masterName,
149+
);
122150

123151
if (
124152
originalMaster.frame.width !== replacementMaster.frame.width ||
125153
originalMaster.frame.height !== replacementMaster.frame.height
126154
) {
127155
throw new Error(
128-
'##FIXME## SYMBOL MASTER SUBSTITUTIONS REQUIRE THAT MASTERS HAVE THE SAME DIMENSIONS'
156+
'##FIXME## SYMBOL MASTER SUBSTITUTIONS REQUIRE THAT MASTERS HAVE THE SAME DIMENSIONS',
129157
);
130158
}
131159

132160
const nestedOverrides = extractOverrides(
133-
getSymbolMasterByName(overrideValue.masterName).layers
161+
getSymbolMasterByName(overrideValue.masterName).layers,
134162
).reduce(inject, {});
135163

136164
return {
@@ -143,7 +171,7 @@ class SymbolInstanceRenderer extends SketchRenderer {
143171
}
144172

145173
const nestedOverrides = extractOverrides(
146-
getSymbolMasterById(reference.symbolId).layers
174+
getSymbolMasterById(reference.symbolId).layers,
147175
).reduce(inject, {});
148176

149177
return {
@@ -168,11 +196,15 @@ class SymbolInstanceRenderer extends SketchRenderer {
168196

169197
if (reference.type === 'image') {
170198
if (typeof overrideValue !== 'string') {
171-
throw new Error('##FIXME"" IMAGE OVERRIDE VALUES MUST BE VALID IMAGE HREFS');
199+
throw new Error(
200+
'##FIXME"" IMAGE OVERRIDE VALUES MUST BE VALID IMAGE HREFS',
201+
);
172202
}
173203
return {
174204
...memo,
175-
[reference.objectId]: makeJSONDataReference(makeImageDataFromUrl(overrideValue)),
205+
[reference.objectId]: makeJSONDataReference(
206+
makeImageDataFromUrl(overrideValue),
207+
),
176208
};
177209
}
178210

0 commit comments

Comments
 (0)