From 1196edd5746db1dd0e0cd2f2d5220c7450a92842 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 27 Sep 2024 11:20:31 +0800 Subject: [PATCH] refactor: use standard transform name --- __tests__/unit/css/parser/transform.spec.ts | 76 +++++++++---------- .../unit/css/properties/transform.spec.ts | 18 ++--- packages/g-lite/src/css/parser/transform.ts | 76 +++++++++---------- packages/g-lite/src/utils/transform-mat4.ts | 22 +++--- .../src/shapes/defs/Pattern.ts | 12 +-- 5 files changed, 102 insertions(+), 102 deletions(-) diff --git a/__tests__/unit/css/parser/transform.spec.ts b/__tests__/unit/css/parser/transform.spec.ts index 81da6e208..9719bea1d 100644 --- a/__tests__/unit/css/parser/transform.spec.ts +++ b/__tests__/unit/css/parser/transform.spec.ts @@ -22,13 +22,13 @@ describe('Property Transform', () => { expect(result[1].d[0].toString()).toBe('3'); expect(result[1].d[1].toString()).toBe('-4'); - expect(result[2].t).toBe('scalex'); + expect(result[2].t).toBe('scaleX'); expect(result[2].d[0].toString()).toBe('5'); - expect(result[3].t).toBe('scaley'); + expect(result[3].t).toBe('scaleY'); expect(result[3].d[0].toString()).toBe('-1'); - expect(result[4].t).toBe('scalez'); + expect(result[4].t).toBe('scaleZ'); expect(result[4].d[0].toString()).toBe('-3'); result = parseTransform('scale3d(-2, 0, 7)'); @@ -46,11 +46,11 @@ describe('Property Transform', () => { expect(result[0].d[0].toString()).toBe('10deg'); expect(result[1].t).toBe('rotate'); expect(result[1].d[0].toString()).toBe('1turn'); - expect(result[2].t).toBe('rotatex'); + expect(result[2].t).toBe('rotateX'); expect(result[2].d[0].toString()).toBe('0deg'); - expect(result[3].t).toBe('rotatey'); + expect(result[3].t).toBe('rotateY'); expect(result[3].d[0].toString()).toBe('1.5rad'); - expect(result[4].t).toBe('rotatez'); + expect(result[4].t).toBe('rotateZ'); expect(result[4].d[0].toString()).toBe('50grad'); expect(result[5].t).toBe('rotate3d'); expect(result[5].d[0].toString()).toBe('0'); @@ -68,25 +68,25 @@ describe('Property Transform', () => { expect(result[1].d[0].toString()).toBe('0px'); result = parseTransform('translateX(10px) translateX(20%) translateX(0)'); - expect(result[0].t).toBe('translatex'); + expect(result[0].t).toBe('translateX'); expect(result[0].d[0].toString()).toBe('10px'); - expect(result[1].t).toBe('translatex'); + expect(result[1].t).toBe('translateX'); expect(result[1].d[0].toString()).toBe('20%'); - expect(result[2].t).toBe('translatex'); + expect(result[2].t).toBe('translateX'); expect(result[2].d[0].toString()).toBe('0px'); result = parseTransform('translateY(10px) translateY(20%) translateY(0)'); - expect(result[0].t).toBe('translatey'); + expect(result[0].t).toBe('translateY'); expect(result[0].d[0].toString()).toBe('10px'); - expect(result[1].t).toBe('translatey'); + expect(result[1].t).toBe('translateY'); expect(result[1].d[0].toString()).toBe('20%'); - expect(result[2].t).toBe('translatey'); + expect(result[2].t).toBe('translateY'); expect(result[2].d[0].toString()).toBe('0px'); result = parseTransform('translateZ(10px) translateZ(0)'); - expect(result[0].t).toBe('translatez'); + expect(result[0].t).toBe('translateZ'); expect(result[0].d[0].toString()).toBe('10px'); - expect(result[1].t).toBe('translatez'); + expect(result[1].t).toBe('translateZ'); expect(result[1].d[0].toString()).toBe('0px'); result = parseTransform( @@ -200,7 +200,7 @@ describe('Property Transform', () => { expect(result).toStrictEqual([ { d: [CSS.rad(0.312)], - t: 'skewx', + t: 'skewX', }, ]); @@ -208,7 +208,7 @@ describe('Property Transform', () => { expect(result).toStrictEqual([ { d: [CSS.rad(0.312)], - t: 'skewy', + t: 'skewY', }, ]); }); @@ -224,10 +224,10 @@ describe('Property Transform', () => { expect(format([[1, 2]])).toBe('scale(1,2)'); }); - it('should merge transforms(scalex & scaley) correctly', () => { + it('should merge transforms(scaleX & scaleY) correctly', () => { const [left, right, format] = mergeTransforms( - [{ t: 'scalex', d: [new CSSUnitValue(2)] }], - [{ t: 'scaley', d: [new CSSUnitValue(3)] }], + [{ t: 'scaleX', d: [new CSSUnitValue(2)] }], + [{ t: 'scaleY', d: [new CSSUnitValue(3)] }], null, ); expect(left).toStrictEqual([[2, 1]]); @@ -235,10 +235,10 @@ describe('Property Transform', () => { expect(format([[1, 2]])).toBe('scale(1,2)'); }); - it('should merge transforms(scale & scaley) correctly', () => { + it('should merge transforms(scale & scaleY) correctly', () => { const [left, right, format] = mergeTransforms( [{ t: 'scale', d: [new CSSUnitValue(1), new CSSUnitValue(2)] }], - [{ t: 'scaley', d: [new CSSUnitValue(3)] }], + [{ t: 'scaleY', d: [new CSSUnitValue(3)] }], null, ); expect(left).toStrictEqual([[1, 2]]); @@ -246,10 +246,10 @@ describe('Property Transform', () => { expect(format([[1, 2]])).toBe('scale(1,2)'); }); - it('should merge transforms(scale & scaley) correctly', () => { + it('should merge transforms(scale & scaleY) correctly', () => { const [left, right, format] = mergeTransforms( [{ t: 'scale', d: [new CSSUnitValue(0.0001), new CSSUnitValue(1)] }], - [{ t: 'scaley', d: [new CSSUnitValue(1)] }], + [{ t: 'scaleY', d: [new CSSUnitValue(1)] }], null, ); expect(left).toStrictEqual([[0.0001, 1]]); @@ -257,15 +257,15 @@ describe('Property Transform', () => { expect(format([[0.0001, 1]])).toBe('scale(0.0001,1)'); }); - it('should merge transforms(translatex) correctly', () => { + it('should merge transforms(translateX) correctly', () => { const [left, right, format] = mergeTransforms( - [{ t: 'translatex', d: [new CSSUnitValue(1, 'px')] }], - [{ t: 'translatex', d: [new CSSUnitValue(10, 'px')] }], + [{ t: 'translateX', d: [new CSSUnitValue(1, 'px')] }], + [{ t: 'translateX', d: [new CSSUnitValue(10, 'px')] }], null, ); expect(left).toStrictEqual([[1]]); expect(right).toStrictEqual([[10]]); - expect(format([[10]])).toBe('translatex(10px)'); + expect(format([[10]])).toBe('translateX(10px)'); }); it('should merge transforms(translate) correctly', () => { @@ -347,39 +347,39 @@ describe('Property Transform', () => { [ { d: [CSS.deg(15)], - t: 'skewx', + t: 'skewX', }, ], [ { d: [CSS.deg(30)], - t: 'skewx', + t: 'skewX', }, ], null, ); expect(left).toStrictEqual([[15]]); expect(right).toStrictEqual([[30]]); - expect(format([[20]])).toBe('skewx(20deg)'); + expect(format([[20]])).toBe('skewX(20deg)'); [left, right, format] = mergeTransforms( [ { d: [CSS.deg(15)], - t: 'skewy', + t: 'skewY', }, ], [ { d: [CSS.deg(30)], - t: 'skewy', + t: 'skewY', }, ], null, ); expect(left).toStrictEqual([[15]]); expect(right).toStrictEqual([[30]]); - expect(format([[20]])).toBe('skewy(20deg)'); + expect(format([[20]])).toBe('skewY(20deg)'); [left, right, format] = mergeTransforms( [ @@ -391,7 +391,7 @@ describe('Property Transform', () => { [ { d: [CSS.deg(30)], - t: 'skewy', + t: 'skewY', }, ], null, @@ -410,7 +410,7 @@ describe('Property Transform', () => { [ { d: [CSS.deg(30)], - t: 'skewx', + t: 'skewX', }, ], null, @@ -424,14 +424,14 @@ describe('Property Transform', () => { const [left, right, format] = mergeTransforms( [ { - t: 'translatey', + t: 'translateY', d: [new CSSUnitValue(0, 'px')], }, { t: 'scale', d: [new CSSUnitValue(0.7), new CSSUnitValue(0.7)] }, ], [ { - t: 'translatey', + t: 'translateY', d: [new CSSUnitValue(0, 'px')], }, ], @@ -464,7 +464,7 @@ describe('Property Transform', () => { ], [ { - t: 'translatey', + t: 'translateY', d: [new CSSUnitValue(0, 'px')], }, ], diff --git a/__tests__/unit/css/properties/transform.spec.ts b/__tests__/unit/css/properties/transform.spec.ts index b13c5334c..84b513f78 100644 --- a/__tests__/unit/css/properties/transform.spec.ts +++ b/__tests__/unit/css/properties/transform.spec.ts @@ -60,7 +60,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([20, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('translatex'); + // expect(used[0].t).toBe('translateX'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.px(20))).toBeTruthy(); @@ -69,7 +69,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 20, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('translatey'); + // expect(used[0].t).toBe('translateY'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.px(20))).toBeTruthy(); @@ -78,7 +78,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 20]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('translatez'); + // expect(used[0].t).toBe('translateZ'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.px(20))).toBeTruthy(); @@ -98,7 +98,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('scalex'); + // expect(used[0].t).toBe('scaleX'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.number(2))).toBeTruthy(); @@ -107,7 +107,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('scaley'); + // expect(used[0].t).toBe('scaleY'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.number(2))).toBeTruthy(); @@ -116,7 +116,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('scalez'); + // expect(used[0].t).toBe('scaleZ'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.number(2))).toBeTruthy(); @@ -192,7 +192,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('rotatex'); + // expect(used[0].t).toBe('rotateX'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.deg(30))).toBeTruthy(); @@ -201,7 +201,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('rotatey'); + // expect(used[0].t).toBe('rotateY'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.deg(30))).toBeTruthy(); @@ -210,7 +210,7 @@ describe('CSSPropertyTransform', () => { // expect(circle.getLocalPosition()).toStrictEqual([0, 0, 0]); // used = circle.computedStyleMap().get('transform') as ParsedTransform[]; // expect(used.length).toBe(1); - // expect(used[0].t).toBe('rotatez'); + // expect(used[0].t).toBe('rotateZ'); // expect(used[0].d.length).toBe(1); // expect(used[0].d[0].equals(CSS.deg(30))).toBeTruthy(); // }); diff --git a/packages/g-lite/src/css/parser/transform.ts b/packages/g-lite/src/css/parser/transform.ts index 4032e3a24..f639d7299 100644 --- a/packages/g-lite/src/css/parser/transform.ts +++ b/packages/g-lite/src/css/parser/transform.ts @@ -27,19 +27,19 @@ type TransformType = | 'matrix' | 'matrix3d' | 'rotate' - | 'rotatex' - | 'rotatey' - | 'rotatez' + | 'rotateX' + | 'rotateY' + | 'rotateZ' | 'rotate3d' | 'scale' - | 'scalex' - | 'scaley' - | 'scalez' + | 'scaleX' + | 'scaleY' + | 'scaleZ' | 'scale3d' | 'translate' - | 'translatex' - | 'translatey' - | 'translatez' + | 'translateX' + | 'translateY' + | 'translateZ' | 'translate3d'; type PatternElement = string | number | null | CSSUnitValue; type CastFunction = @@ -71,31 +71,31 @@ const transformFunctions: Record< matrix: ['NNNNNN', [_, _, 0, 0, _, _, 0, 0, 0, 0, 1, 0, _, _, 0, 1], id], matrix3d: ['NNNNNNNNNNNNNNNN', id], rotate: ['A'], - rotatex: ['A'], - rotatey: ['A'], - rotatez: ['A'], + rotateX: ['A'], + rotateY: ['A'], + rotateZ: ['A'], rotate3d: ['NNNA'], perspective: ['L'], scale: ['Nn', cast([_, _, new CSSUnitValue(1)]), id], - scalex: [ + scaleX: [ 'N', cast([_, new CSSUnitValue(1), new CSSUnitValue(1)]), cast([_, new CSSUnitValue(1)]), ], - scaley: [ + scaleY: [ 'N', cast([new CSSUnitValue(1), _, new CSSUnitValue(1)]), cast([new CSSUnitValue(1), _]), ], - scalez: ['N', cast([new CSSUnitValue(1), new CSSUnitValue(1), _])], + scaleZ: ['N', cast([new CSSUnitValue(1), new CSSUnitValue(1), _])], scale3d: ['NNN', id], skew: ['Aa', null, id], - skewx: ['A', null, cast([_, Odeg])], - skewy: ['A', null, cast([Odeg, _])], + skewX: ['A', null, cast([_, Odeg])], + skewY: ['A', null, cast([Odeg, _])], translate: ['Tt', cast([_, _, Opx]), id], - translatex: ['T', cast([_, Opx, Opx]), cast([_, Opx])], - translatey: ['T', cast([Opx, _, Opx]), cast([Opx, _])], - translatez: ['L', cast([Opx, Opx, _])], + translateX: ['T', cast([_, Opx, Opx]), cast([_, Opx])], + translateY: ['T', cast([Opx, _, Opx]), cast([Opx, _])], + translateZ: ['L', cast([Opx, Opx, _])], translate3d: ['TTL', id], }; @@ -111,7 +111,7 @@ function parseArrayTransform(transform: TransformArray): ParsedTransform[] { if (!functionData) { return []; } - const parsedArgs = args.map(getOrCreateUnitValue); + const parsedArgs = args.map((value) => getOrCreateUnitValue(value)); result.push({ t: name, d: parsedArgs }); } @@ -130,7 +130,7 @@ export function parseTransform( return parseArrayTransform(transform); } - transform = (transform || 'none').toLowerCase().trim(); + transform = (transform || 'none').trim(); if (transform === 'none') { return []; } @@ -200,7 +200,7 @@ export function parseTransformUnmemoize( return parseArrayTransform(transform); } - transform = (transform || 'none').toLowerCase().trim(); + transform = (transform || 'none').trim(); if (transform === 'none') { return []; } @@ -269,7 +269,7 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { let z: number; let angle: number; switch (item.t) { - case 'rotatex': + case 'rotateX': angle = deg2rad(convertAngleUnit(item.d[0])); return [ 1, @@ -289,7 +289,7 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { 0, 1, ]; - case 'rotatey': + case 'rotateY': angle = deg2rad(convertAngleUnit(item.d[0])); return [ Math.cos(angle), @@ -310,7 +310,7 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { 1, ]; case 'rotate': - case 'rotatez': + case 'rotateZ': angle = deg2rad(convertAngleUnit(item.d[0])); return [ Math.cos(angle), @@ -391,11 +391,11 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { 0, 1, ]; - case 'scalex': + case 'scaleX': return [item.d[0].value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; - case 'scaley': + case 'scaleY': return [1, 0, 0, 0, 0, item.d[0].value, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; - case 'scalez': + case 'scaleZ': return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, item.d[0].value, 0, 0, 0, 0, 1]; case 'scale3d': return [ @@ -437,10 +437,10 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { 0, 1, ]; - case 'skewx': + case 'skewX': angle = deg2rad(convertAngleUnit(item.d[0])); return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; - case 'skewy': + case 'skewY': angle = deg2rad(convertAngleUnit(item.d[0])); return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; case 'translate': @@ -448,13 +448,13 @@ export function convertItemToMatrix(item: ParsedTransform): number[] { x = convertPercentUnit(item.d[0], 0, null) || 0; y = convertPercentUnit(item.d[1], 0, null) || 0; return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, 0, 1]; - case 'translatex': + case 'translateX': x = convertPercentUnit(item.d[0], 0, null) || 0; return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, 0, 0, 1]; - case 'translatey': + case 'translateY': y = convertPercentUnit(item.d[0], 0, null) || 0; return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, y, 0, 1]; - case 'translatez': + case 'translateZ': z = convertPercentUnit(item.d[0], 0, null) || 0; return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, z, 1]; case 'translate3d': @@ -736,14 +736,14 @@ function quat(fromQ: number[], toQ: number[], f: number): number[] { return quat; } -// scalex/y/z -> scale +// scaleX/Y/Z -> scale function typeTo2D(type: string) { - return type.replace(/[xy]/, ''); + return type.replace(/[XY]/, ''); } -// scalex/y/z -> scale3d +// scaleX/Y/Z -> scale3d function typeTo3D(type: string) { - return type.replace(/(x|y|z|3d)?$/, '3d'); + return type.replace(/(X|Y|Z|3d)?$/, '3d'); } const isMatrixOrPerspective = function (lt: string, rt: string) { diff --git a/packages/g-lite/src/utils/transform-mat4.ts b/packages/g-lite/src/utils/transform-mat4.ts index ded1f81f0..37aca2b9b 100644 --- a/packages/g-lite/src/utils/transform-mat4.ts +++ b/packages/g-lite/src/utils/transform-mat4.ts @@ -31,13 +31,13 @@ export function parsedTransformToMat4( 1, 1, ]; mat4.fromScaling(tmpMat2, [newScale[0], newScale[1], 1]); - } else if (t === 'scalex') { + } else if (t === 'scaleX') { const newScale = d?.map((s) => Math.max(s.value, SCALE_EPSILON)) || [1]; mat4.fromScaling(tmpMat2, [newScale[0], 1, 1]); - } else if (t === 'scaley') { + } else if (t === 'scaleY') { const newScale = d?.map((s) => Math.max(s.value, SCALE_EPSILON)) || [1]; mat4.fromScaling(tmpMat2, [1, newScale[0], 1]); - } else if (t === 'scalez') { + } else if (t === 'scaleZ') { const newScale = d?.map((s) => Math.max(s.value, SCALE_EPSILON)) || [1]; mat4.fromScaling(tmpMat2, [1, 1, newScale[0]]); } else if (t === 'scale3d') { @@ -52,13 +52,13 @@ export function parsedTransformToMat4( newTranslation[1].value, 0, ]); - } else if (t === 'translatex') { + } else if (t === 'translateX') { const newTranslation = d || [Opx]; mat4.fromTranslation(tmpMat2, [newTranslation[0].value, 0, 0]); - } else if (t === 'translatey') { + } else if (t === 'translateY') { const newTranslation = d || [Opx]; mat4.fromTranslation(tmpMat2, [0, newTranslation[0].value, 0]); - } else if (t === 'translatez') { + } else if (t === 'translateZ') { const newTranslation = d || [Opx]; mat4.fromTranslation(tmpMat2, [0, 0, newTranslation[0].value]); } else if (t === 'translate3d') { @@ -71,13 +71,13 @@ export function parsedTransformToMat4( } else if (t === 'rotate') { const newAngles = d || [Odeg]; mat4.fromZRotation(tmpMat2, deg2rad(convertAngleUnit(newAngles[0]))); - } else if (t === 'rotatex') { + } else if (t === 'rotateX') { const newAngles = d || [Odeg]; mat4.fromXRotation(tmpMat2, deg2rad(convertAngleUnit(newAngles[0]))); - } else if (t === 'rotatey') { + } else if (t === 'rotateY') { const newAngles = d || [Odeg]; mat4.fromYRotation(tmpMat2, deg2rad(convertAngleUnit(newAngles[0]))); - } else if (t === 'rotatez') { + } else if (t === 'rotateZ') { const newAngles = d || [Odeg]; mat4.fromZRotation(tmpMat2, deg2rad(convertAngleUnit(newAngles[0]))); } else if (t === 'rotate3d') { @@ -90,10 +90,10 @@ export function parsedTransformToMat4( } else if (t === 'skew') { const newSkew = d?.map((s) => s.value) || [0, 0]; createSkewMatrix(tmpMat2, deg2rad(newSkew[0]), deg2rad(newSkew[1])); - } else if (t === 'skewx') { + } else if (t === 'skewX') { const newSkew = d?.map((s) => s.value) || [0]; createSkewMatrix(tmpMat2, deg2rad(newSkew[0]), 0); - } else if (t === 'skewy') { + } else if (t === 'skewY') { const newSkew = d?.map((s) => s.value) || [0]; createSkewMatrix(tmpMat2, 0, deg2rad(newSkew[0])); } else if (t === 'matrix') { diff --git a/packages/g-plugin-svg-renderer/src/shapes/defs/Pattern.ts b/packages/g-plugin-svg-renderer/src/shapes/defs/Pattern.ts index 03ef66f61..051fa664b 100644 --- a/packages/g-plugin-svg-renderer/src/shapes/defs/Pattern.ts +++ b/packages/g-plugin-svg-renderer/src/shapes/defs/Pattern.ts @@ -147,9 +147,9 @@ function formatTransform(transform: string) { const { t, d } = parsed; if (t === 'translate') { return `translate(${d[0].value} ${d[1].value})`; - } else if (t === 'translatex') { + } else if (t === 'translateX') { return `translate(${d[0].value} 0)`; - } else if (t === 'translatey') { + } else if (t === 'translateY') { return `translate(0 ${d[0].value})`; } else if (t === 'rotate') { return `rotate(${d[0].value})`; @@ -157,19 +157,19 @@ function formatTransform(transform: string) { // scale(1) scale(1, 1) const newScale = d?.map((s) => s.value) || [1, 1]; return `scale(${newScale[0]}, ${newScale[1]})`; - } else if (t === 'scalex') { + } else if (t === 'scaleX') { const newScale = d?.map((s) => s.value) || [1]; return `scale(${newScale[0]}, 1)`; - } else if (t === 'scaley') { + } else if (t === 'scaleY') { const newScale = d?.map((s) => s.value) || [1]; return `scale(1, ${newScale[0]})`; } else if (t === 'skew') { const newSkew = d?.map((s) => s.value) || [0, 0]; return `skewX(${newSkew[0]}) skewY(${newSkew[1]})`; - } else if (t === 'skewx') { + } else if (t === 'skewZ') { const newSkew = d?.map((s) => s.value) || [0]; return `skewX(${newSkew[0]})`; - } else if (t === 'skewy') { + } else if (t === 'skewY') { const newSkew = d?.map((s) => s.value) || [0]; return `skewY(${newSkew[0]})`; } else if (t === 'matrix') {