Skip to content

Commit 11d53a2

Browse files
mathieudutourmathieudutour
authored
fix images rendering (#459)
fix images rendering
2 parents 2fef98d + daceaaa commit 11d53a2

File tree

9 files changed

+213
-73
lines changed

9 files changed

+213
-73
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
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.
44

5+
## Version 3.0.4
6+
7+
- Fix rendering images (#458)
8+
59
## Version 3.0.3
610

711
- Fix typo in Symbol (Thanks @antoni!)

‎__tests__/jest/components/nodeImpl/__snapshots__/Svg.tsx.snap

Lines changed: 156 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -225,10 +225,33 @@ Object {
225225
"gradient": Object {
226226
"_class": "gradient",
227227
"elipseLength": 0,
228-
"from": "{0, 0}",
228+
"from": "{0.5, 0}",
229229
"gradientType": 0,
230-
"stops": Array [],
231-
"to": "{1, 1}",
230+
"stops": Array [
231+
Object {
232+
"_class": "gradientStop",
233+
"color": Object {
234+
"_class": "color",
235+
"alpha": 1,
236+
"blue": 1,
237+
"green": 1,
238+
"red": 1,
239+
},
240+
"position": 0,
241+
},
242+
Object {
243+
"_class": "gradientStop",
244+
"color": Object {
245+
"_class": "color",
246+
"alpha": 1,
247+
"blue": 0,
248+
"green": 0,
249+
"red": 0,
250+
},
251+
"position": 1,
252+
},
253+
],
254+
"to": "{0.5, 1}",
232255
},
233256
"isEnabled": true,
234257
"noiseIndex": 0,
@@ -385,10 +408,33 @@ Object {
385408
"gradient": Object {
386409
"_class": "gradient",
387410
"elipseLength": 0,
388-
"from": "{0, 0}",
411+
"from": "{0.5, 0}",
389412
"gradientType": 0,
390-
"stops": Array [],
391-
"to": "{1, 1}",
413+
"stops": Array [
414+
Object {
415+
"_class": "gradientStop",
416+
"color": Object {
417+
"_class": "color",
418+
"alpha": 1,
419+
"blue": 1,
420+
"green": 1,
421+
"red": 1,
422+
},
423+
"position": 0,
424+
},
425+
Object {
426+
"_class": "gradientStop",
427+
"color": Object {
428+
"_class": "color",
429+
"alpha": 1,
430+
"blue": 0,
431+
"green": 0,
432+
"red": 0,
433+
},
434+
"position": 1,
435+
},
436+
],
437+
"to": "{0.5, 1}",
392438
},
393439
"isEnabled": true,
394440
"noiseIndex": 0,
@@ -545,10 +591,33 @@ Object {
545591
"gradient": Object {
546592
"_class": "gradient",
547593
"elipseLength": 0,
548-
"from": "{0, 0}",
594+
"from": "{0.5, 0}",
549595
"gradientType": 0,
550-
"stops": Array [],
551-
"to": "{1, 1}",
596+
"stops": Array [
597+
Object {
598+
"_class": "gradientStop",
599+
"color": Object {
600+
"_class": "color",
601+
"alpha": 1,
602+
"blue": 1,
603+
"green": 1,
604+
"red": 1,
605+
},
606+
"position": 0,
607+
},
608+
Object {
609+
"_class": "gradientStop",
610+
"color": Object {
611+
"_class": "color",
612+
"alpha": 1,
613+
"blue": 0,
614+
"green": 0,
615+
"red": 0,
616+
},
617+
"position": 1,
618+
},
619+
],
620+
"to": "{0.5, 1}",
552621
},
553622
"isEnabled": true,
554623
"noiseIndex": 0,
@@ -705,10 +774,33 @@ Object {
705774
"gradient": Object {
706775
"_class": "gradient",
707776
"elipseLength": 0,
708-
"from": "{0, 0}",
777+
"from": "{0.5, 0}",
709778
"gradientType": 0,
710-
"stops": Array [],
711-
"to": "{1, 1}",
779+
"stops": Array [
780+
Object {
781+
"_class": "gradientStop",
782+
"color": Object {
783+
"_class": "color",
784+
"alpha": 1,
785+
"blue": 1,
786+
"green": 1,
787+
"red": 1,
788+
},
789+
"position": 0,
790+
},
791+
Object {
792+
"_class": "gradientStop",
793+
"color": Object {
794+
"_class": "color",
795+
"alpha": 1,
796+
"blue": 0,
797+
"green": 0,
798+
"red": 0,
799+
},
800+
"position": 1,
801+
},
802+
],
803+
"to": "{0.5, 1}",
712804
},
713805
"isEnabled": true,
714806
"noiseIndex": 0,
@@ -952,10 +1044,33 @@ Object {
9521044
"gradient": Object {
9531045
"_class": "gradient",
9541046
"elipseLength": 0,
955-
"from": "{0, 0}",
1047+
"from": "{0.5, 0}",
9561048
"gradientType": 0,
957-
"stops": Array [],
958-
"to": "{1, 1}",
1049+
"stops": Array [
1050+
Object {
1051+
"_class": "gradientStop",
1052+
"color": Object {
1053+
"_class": "color",
1054+
"alpha": 1,
1055+
"blue": 1,
1056+
"green": 1,
1057+
"red": 1,
1058+
},
1059+
"position": 0,
1060+
},
1061+
Object {
1062+
"_class": "gradientStop",
1063+
"color": Object {
1064+
"_class": "color",
1065+
"alpha": 1,
1066+
"blue": 0,
1067+
"green": 0,
1068+
"red": 0,
1069+
},
1070+
"position": 1,
1071+
},
1072+
],
1073+
"to": "{0.5, 1}",
9591074
},
9601075
"isEnabled": true,
9611076
"noiseIndex": 0,
@@ -1179,10 +1294,33 @@ Object {
11791294
"gradient": Object {
11801295
"_class": "gradient",
11811296
"elipseLength": 0,
1182-
"from": "{0, 0}",
1297+
"from": "{0.5, 0}",
11831298
"gradientType": 0,
1184-
"stops": Array [],
1185-
"to": "{1, 1}",
1299+
"stops": Array [
1300+
Object {
1301+
"_class": "gradientStop",
1302+
"color": Object {
1303+
"_class": "color",
1304+
"alpha": 1,
1305+
"blue": 1,
1306+
"green": 1,
1307+
"red": 1,
1308+
},
1309+
"position": 0,
1310+
},
1311+
Object {
1312+
"_class": "gradientStop",
1313+
"color": Object {
1314+
"_class": "color",
1315+
"alpha": 1,
1316+
"blue": 0,
1317+
"green": 0,
1318+
"red": 0,
1319+
},
1320+
"position": 1,
1321+
},
1322+
],
1323+
"to": "{0.5, 1}",
11861324
},
11871325
"isEnabled": true,
11881326
"noiseIndex": 0,

‎examples/emotion/src/my-command.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Image = emotion.Image`
1919
padding: 40px;
2020
`;
2121

22-
const emotionLogo = 'https://emotion.sh/static/emotion-a76dfa0d18a0536af9e917cdb8f873b9-a69fb.png';
22+
const emotionLogo = 'https://avatars3.githubusercontent.com/u/31557565?s=400&v=4';
2323

2424
class App extends React.Component {
2525
render() {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-sketchapp",
3-
"version": "3.0.3",
3+
"version": "3.0.4",
44
"description": "A React renderer for Sketch.app",
55
"main": "lib/index.js",
66
"types": "lib/index.d.ts",

‎src/jsonUtils/borders.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
2-
import { makeColorFromCSS } from './models';
2+
import { makeColorFromCSS, emptyGradient } from './models';
33
import { ViewStyle, LayoutInfo, BorderStyle } from '../types';
44
import same from '../utils/same';
55
import { makeVerticalBorder, makeHorizontalBorder } from './shapeLayers';
@@ -31,14 +31,7 @@ export const createUniformBorder = (
3131
blendMode: FileFormat.BlendMode.Normal,
3232
opacity: 1,
3333
},
34-
gradient: {
35-
_class: 'gradient',
36-
gradientType: FileFormat.GradientType.Linear,
37-
elipseLength: 0,
38-
from: '{0, 0}',
39-
to: '{1, 1}',
40-
stops: [],
41-
},
34+
gradient: emptyGradient,
4235
},
4336
];
4437

‎src/jsonUtils/models.ts

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,38 @@ export const makeColorFromCSS = (input: Color, alpha: number = 1): FileFormat.Co
8888
};
8989
};
9090

91+
export const emptyGradient: FileFormat.Gradient = {
92+
_class: 'gradient',
93+
elipseLength: 0,
94+
from: '{0.5, 0}',
95+
gradientType: 0,
96+
to: '{0.5, 1}',
97+
stops: [
98+
{
99+
_class: 'gradientStop',
100+
position: 0,
101+
color: {
102+
_class: 'color',
103+
alpha: 1,
104+
blue: 1,
105+
green: 1,
106+
red: 1,
107+
},
108+
},
109+
{
110+
_class: 'gradientStop',
111+
position: 1,
112+
color: {
113+
_class: 'color',
114+
alpha: 1,
115+
blue: 0,
116+
green: 0,
117+
red: 0,
118+
},
119+
},
120+
],
121+
};
122+
91123
// Solid color fill
92124
export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
93125
_class: 'fill',
@@ -103,14 +135,7 @@ export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
103135
blendMode: FileFormat.BlendMode.Normal,
104136
opacity: 1,
105137
},
106-
gradient: {
107-
_class: 'gradient',
108-
gradientType: FileFormat.GradientType.Linear,
109-
elipseLength: 0,
110-
from: '{0, 0}',
111-
to: '{1, 1}',
112-
stops: [],
113-
},
138+
gradient: emptyGradient,
114139
});
115140

116141
export const makeImageFill = (
@@ -119,7 +144,7 @@ export const makeImageFill = (
119144
): FileFormat.Fill => ({
120145
_class: 'fill',
121146
isEnabled: true,
122-
fillType: FileFormat.FillType.Pattern,
147+
fillType: 4, // FileFormat.FillType.Pattern,
123148
// @ts-ignore
124149
image,
125150
noiseIndex: 0,
@@ -131,14 +156,7 @@ export const makeImageFill = (
131156
blendMode: FileFormat.BlendMode.Normal,
132157
opacity: 1,
133158
},
134-
gradient: {
135-
_class: 'gradient',
136-
gradientType: FileFormat.GradientType.Linear,
137-
elipseLength: 0,
138-
from: '{0, 0}',
139-
to: '{1, 1}',
140-
stops: [],
141-
},
159+
gradient: emptyGradient,
142160
});
143161

144162
// Used in frames, etc

‎src/jsonUtils/shapeLayers.ts

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
22
import makeResizeConstraint from './resizeConstraint';
3-
import { generateID, makeRect, makeColorFromCSS } from './models';
3+
import { generateID, makeRect, makeColorFromCSS, emptyGradient } from './models';
44
import { makeStyle } from './style';
55
import { Color, ResizeConstraints, ViewStyle } from '../types';
66

@@ -261,14 +261,7 @@ export const makeVerticalBorder = (
261261
blendMode: FileFormat.BlendMode.Normal,
262262
opacity: 1,
263263
},
264-
gradient: {
265-
_class: 'gradient',
266-
gradientType: FileFormat.GradientType.Linear,
267-
elipseLength: 0,
268-
from: '{0, 0}',
269-
to: '{1, 1}',
270-
stops: [],
271-
},
264+
gradient: emptyGradient,
272265
},
273266
];
274267
return content;
@@ -298,14 +291,7 @@ export const makeHorizontalBorder = (
298291
blendMode: FileFormat.BlendMode.Normal,
299292
opacity: 1,
300293
},
301-
gradient: {
302-
_class: 'gradient',
303-
gradientType: FileFormat.GradientType.Linear,
304-
elipseLength: 0,
305-
from: '{0, 0}',
306-
to: '{1, 1}',
307-
stops: [],
308-
},
294+
gradient: emptyGradient,
309295
},
310296
];
311297
return content;

0 commit comments

Comments
 (0)