Skip to content

Commit 8f4e16f

Browse files
kacperzolkiewskikacperzolkiewski
committed
fix: transformToRn.pegjs matrix() function
1 parent 331a689 commit 8f4e16f

File tree

5 files changed

+90
-60
lines changed

5 files changed

+90
-60
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ android/
99
apple/
1010
windows/
1111
src/lib/extract/transform.js
12+
src/lib/extract/transformToRn.js

‎apps/common/example/examples/Transforms.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ function PatternTransformExample() {
3838
width="0.25"
3939
height="0.25"
4040
patternTransform={[
41-
{rotate: '20'},
42-
{skewX: '30'},
41+
{rotate: '20deg'},
42+
{skewX: '30deg'},
4343
{scaleX: 1},
4444
{scaleY: 0.5},
4545
]}>

‎src/elements/Svg.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export default class Svg extends Shape<SvgProps> {
110110
width,
111111
height,
112112
focusable,
113-
transform,
113+
transform: transformProp,
114114

115115
// Inherited G properties
116116
font,
@@ -126,6 +126,7 @@ export default class Svg extends Shape<SvgProps> {
126126
strokeLinejoin,
127127
strokeMiterlimit,
128128
} = stylesAndProps;
129+
let transform;
129130
if (width === undefined && height === undefined) {
130131
width = height = '100%';
131132
}
@@ -177,13 +178,16 @@ export default class Svg extends Shape<SvgProps> {
177178
}
178179

179180
const gStyle = Object.assign({}, StyleSheet.flatten(style));
180-
if (transform) {
181+
if (transformProp) {
181182
if (gStyle.transform) {
182-
props.transform = gStyle.transform;
183+
transform = gStyle.transform;
183184
gStyle.transform = undefined;
184185
}
185186
// eslint-disable-next-line @typescript-eslint/no-explicit-any
186-
props.transform = extractTransformSvgView(props as any);
187+
transform = extractTransformSvgView(props as any);
188+
if (transform) {
189+
props.style = [props.style, { transform }];
190+
}
187191
}
188192

189193
const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;

‎src/lib/extract/transformToRn.js‎

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -266,36 +266,43 @@ function peg$parse(input, options) {
266266
return results;
267267
};
268268
var peg$f1 = function (a, b, c, d, e, f, g, h, i) {
269-
return { matrix: [a, b, c, d, e, f, g, h, i] };
269+
return [g, h, i];
270270
};
271-
var peg$f2 = function (x, y) {
271+
var peg$f2 = function (a, b, c, d, e, f, ghi) {
272+
if (ghi) {
273+
return { matrix: [a, b, c, d, e, f, ghi[0], ghi[1], ghi[2]] };
274+
} else {
275+
return { matrix: [a, b, c, d, e, f, 0, 0, 1] };
276+
}
277+
};
278+
var peg$f3 = function (x, y) {
272279
if (y == undefined) {
273-
return { translate: x };
280+
return { translateX: x };
274281
}
275282
return { translate: [x, y] };
276283
};
277-
var peg$f3 = function (x, y) {
284+
var peg$f4 = function (x, y) {
278285
if (y == undefined) {
279286
return { scale: x };
280287
}
281288
return [{ scaleX: x }, { scaleY: y }];
282289
};
283-
var peg$f4 = function (x, yz) {
290+
var peg$f5 = function (x, yz) {
284291
if (yz !== null) {
285292
return { rotate: `${x}deg` };
286293
}
287294
return [{ rotate: `${x}deg` }];
288295
};
289-
var peg$f5 = function (y, z) {
296+
var peg$f6 = function (y, z) {
290297
return [y, z];
291298
};
292-
var peg$f6 = function (x) {
299+
var peg$f7 = function (x) {
293300
return [{ skewX: `${x}deg` }];
294301
};
295-
var peg$f7 = function (y) {
302+
var peg$f8 = function (y) {
296303
return [{ skewY: `${y}deg` }];
297304
};
298-
var peg$f8 = function () {
305+
var peg$f9 = function () {
299306
return parseFloat(text());
300307
};
301308
var peg$currPos = options.peg$currPos | 0;
@@ -588,9 +595,7 @@ function peg$parse(input, options) {
588595
s18,
589596
s19,
590597
s20,
591-
s21,
592-
s22,
593-
s23;
598+
s21;
594599

595600
peg$silentFails++;
596601
s0 = peg$currPos;
@@ -623,41 +628,47 @@ function peg$parse(input, options) {
623628
s13 = peg$parsespaceOrComma();
624629
s14 = peg$parseNUM();
625630
if (s14 !== peg$FAILED) {
626-
s15 = peg$parsespaceOrComma();
627-
s16 = peg$parseNUM();
628-
if (s16 !== peg$FAILED) {
629-
s17 = peg$parsespaceOrComma();
630-
s18 = peg$parseNUM();
631-
if (s18 !== peg$FAILED) {
632-
s19 = peg$parsespaceOrComma();
633-
s20 = peg$parseNUM();
634-
if (s20 !== peg$FAILED) {
635-
s21 = peg$parse_();
636-
if (input.charCodeAt(peg$currPos) === 41) {
637-
s22 = peg$c1;
638-
peg$currPos++;
639-
} else {
640-
s22 = peg$FAILED;
641-
if (peg$silentFails === 0) {
642-
peg$fail(peg$e5);
643-
}
644-
}
645-
if (s22 !== peg$FAILED) {
646-
s23 = peg$parse_();
647-
peg$savedPos = s0;
648-
s0 = peg$f1(s4, s6, s8, s10, s12, s14, s16, s18, s20);
649-
} else {
650-
peg$currPos = s0;
651-
s0 = peg$FAILED;
652-
}
631+
s15 = peg$currPos;
632+
s16 = peg$parsespaceOrComma();
633+
s17 = peg$parseNUM();
634+
if (s17 !== peg$FAILED) {
635+
s18 = peg$parsespaceOrComma();
636+
s19 = peg$parseNUM();
637+
if (s19 !== peg$FAILED) {
638+
s20 = peg$parsespaceOrComma();
639+
s21 = peg$parseNUM();
640+
if (s21 !== peg$FAILED) {
641+
peg$savedPos = s15;
642+
s15 = peg$f1(s4, s6, s8, s10, s12, s14, s17, s19, s21);
653643
} else {
654-
peg$currPos = s0;
655-
s0 = peg$FAILED;
644+
peg$currPos = s15;
645+
s15 = peg$FAILED;
656646
}
657647
} else {
658-
peg$currPos = s0;
659-
s0 = peg$FAILED;
648+
peg$currPos = s15;
649+
s15 = peg$FAILED;
660650
}
651+
} else {
652+
peg$currPos = s15;
653+
s15 = peg$FAILED;
654+
}
655+
if (s15 === peg$FAILED) {
656+
s15 = null;
657+
}
658+
s16 = peg$parse_();
659+
if (input.charCodeAt(peg$currPos) === 41) {
660+
s17 = peg$c1;
661+
peg$currPos++;
662+
} else {
663+
s17 = peg$FAILED;
664+
if (peg$silentFails === 0) {
665+
peg$fail(peg$e5);
666+
}
667+
}
668+
if (s17 !== peg$FAILED) {
669+
s18 = peg$parse_();
670+
peg$savedPos = s0;
671+
s0 = peg$f2(s4, s6, s8, s10, s12, s14, s15);
661672
} else {
662673
peg$currPos = s0;
663674
s0 = peg$FAILED;
@@ -738,7 +749,7 @@ function peg$parse(input, options) {
738749
if (s8 !== peg$FAILED) {
739750
s9 = peg$parse_();
740751
peg$savedPos = s0;
741-
s0 = peg$f2(s4, s6);
752+
s0 = peg$f3(s4, s6);
742753
} else {
743754
peg$currPos = s0;
744755
s0 = peg$FAILED;
@@ -799,7 +810,7 @@ function peg$parse(input, options) {
799810
if (s8 !== peg$FAILED) {
800811
s9 = peg$parse_();
801812
peg$savedPos = s0;
802-
s0 = peg$f3(s4, s6);
813+
s0 = peg$f4(s4, s6);
803814
} else {
804815
peg$currPos = s0;
805816
s0 = peg$FAILED;
@@ -859,7 +870,7 @@ function peg$parse(input, options) {
859870
if (s7 !== peg$FAILED) {
860871
s8 = peg$parse_();
861872
peg$savedPos = s0;
862-
s0 = peg$f4(s4, s5);
873+
s0 = peg$f5(s4, s5);
863874
} else {
864875
peg$currPos = s0;
865876
s0 = peg$FAILED;
@@ -895,7 +906,7 @@ function peg$parse(input, options) {
895906
s4 = peg$parseNUM();
896907
if (s4 !== peg$FAILED) {
897908
peg$savedPos = s0;
898-
s0 = peg$f5(s2, s4);
909+
s0 = peg$f6(s2, s4);
899910
} else {
900911
peg$currPos = s0;
901912
s0 = peg$FAILED;
@@ -947,7 +958,7 @@ function peg$parse(input, options) {
947958
if (s6 !== peg$FAILED) {
948959
s7 = peg$parse_();
949960
peg$savedPos = s0;
950-
s0 = peg$f6(s4);
961+
s0 = peg$f7(s4);
951962
} else {
952963
peg$currPos = s0;
953964
s0 = peg$FAILED;
@@ -1003,7 +1014,7 @@ function peg$parse(input, options) {
10031014
if (s6 !== peg$FAILED) {
10041015
s7 = peg$parse_();
10051016
peg$savedPos = s0;
1006-
s0 = peg$f7(s4);
1017+
s0 = peg$f8(s4);
10071018
} else {
10081019
peg$currPos = s0;
10091020
s0 = peg$FAILED;
@@ -1276,7 +1287,7 @@ function peg$parse(input, options) {
12761287
s3 = null;
12771288
}
12781289
peg$savedPos = s0;
1279-
s0 = peg$f8();
1290+
s0 = peg$f9();
12801291
} else {
12811292
peg$currPos = s0;
12821293
s0 = peg$FAILED;

‎src/lib/extract/transformToRn.pegjs‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,28 @@ function "transform function"
2323
/ skewY
2424

2525
matrix "matrix"
26-
= _ "matrix(" _ a:NUM spaceOrComma b:NUM spaceOrComma c:NUM spaceOrComma d:NUM spaceOrComma e:NUM spaceOrComma f:NUM spaceOrComma g:NUM spaceOrComma h:NUM spaceOrComma i:NUM _ ")" _ {
27-
return { matrix: [a, b, c, d, e, f, g, h, i]};
26+
= _ "matrix(" _
27+
a:NUM spaceOrComma
28+
b:NUM spaceOrComma
29+
c:NUM spaceOrComma
30+
d:NUM spaceOrComma
31+
e:NUM spaceOrComma
32+
f:NUM
33+
ghi:(
34+
spaceOrComma g:NUM spaceOrComma h:NUM spaceOrComma i:NUM { return [g, h, i]; }
35+
)?
36+
_ ")" _
37+
{
38+
if (ghi) {
39+
return { matrix: [a, b, c, d, e, f, ghi[0], ghi[1], ghi[2]] };
40+
} else {
41+
return { matrix: [a, b, c, d, e, f, 0, 0, 1] };
2842
}
29-
43+
}
3044
translate "translate"
3145
= _ "translate(" _ x:NUM spaceOrComma y:NUM? _ ")" _ {
3246
if (y == undefined) {
33-
return { translate: x };
47+
return { translateX: x };
3448
}
3549
return { translate: [x, y] };
3650
}

0 commit comments

Comments
 (0)