From 700b5fb54e0410340aa0a832a98c53b8382d5ecd Mon Sep 17 00:00:00 2001 From: zengyue Date: Fri, 31 May 2024 10:24:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=87=E7=BA=A7=20G=20=E5=88=B0=206.?= =?UTF-8?q?0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jest.config.js | 1 + packages/f-engine/package.json | 14 ++-- packages/f-engine/src/canvas/index.ts | 5 +- .../f-engine/src/canvas/render/animation.ts | 8 +-- .../f-engine/src/canvas/render/createShape.ts | 4 ++ packages/f-engine/src/canvas/shape/rect.ts | 5 +- packages/f-engine/src/shape/arc.ts | 4 +- packages/f-engine/src/shape/marker.ts | 2 +- packages/f-engine/src/shape/sector.ts | 4 +- packages/f-engine/src/shape/smoothPolyline.ts | 4 +- .../f-engine/test/canvas/animation.test.tsx | 4 +- .../f-engine/test/canvas/svg/svg.test.tsx | 2 +- packages/f-engine/test/g.test.tsx | 65 ++++++++----------- packages/f-engine/test/shape/index.test.tsx | 1 + .../f-engine/test/shape/registerTag.test.tsx | 4 +- packages/f-lottie/package.json | 2 +- 16 files changed, 62 insertions(+), 67 deletions(-) diff --git a/jest.config.js b/jest.config.js index 9f03aa4d..2295c180 100644 --- a/jest.config.js +++ b/jest.config.js @@ -29,4 +29,5 @@ module.exports = { }, }, }, + transformIgnorePatterns: ['/node_modules/(?!d3-color/)'], }; diff --git a/packages/f-engine/package.json b/packages/f-engine/package.json index 4e664909..2bdbf74d 100644 --- a/packages/f-engine/package.json +++ b/packages/f-engine/package.json @@ -7,13 +7,13 @@ "miniprogram": "dist", "sideEffects": false, "dependencies": { - "@antv/g-gesture": "~2.2.0", - "@antv/g-lite": "~1.2.0", - "@antv/g-mobile-canvas": "~0.11.0", - "@antv/g-mobile-canvas-element": "~0.8.0", - "@antv/g-mobile-svg": "~0.10.0", - "@antv/g-mobile-webgl": "~0.9.0", - "@antv/g-web-animations-api": "~1.2.0", + "@antv/g-gesture": "~3.0.0", + "@antv/g-lite": "~2.0.0", + "@antv/g-mobile-canvas": "~1.0.0", + "@antv/g-mobile-canvas-element": "~1.0.0", + "@antv/g-mobile-svg": "~1.0.0", + "@antv/g-mobile-webgl": "~1.0.0", + "@antv/g-web-animations-api": "~2.0.0", "@antv/util": "^3.0.6", "@babel/runtime": "^7.12.5", "eventemitter3": "^4.0.0", diff --git a/packages/f-engine/src/canvas/index.ts b/packages/f-engine/src/canvas/index.ts index 7d008dad..ef064509 100644 --- a/packages/f-engine/src/canvas/index.ts +++ b/packages/f-engine/src/canvas/index.ts @@ -294,8 +294,9 @@ class Canvas

{ const layout = computeLayout(style); const { left, top } = layout; // 设置 container 的位置 - this.container.setAttribute('x', left); - this.container.setAttribute('y', top); + // this.container.setAttribute('x', left); + // this.container.setAttribute('y', top); + this.container.setAttribute('transform', `translate(${left}, ${top})`); this.context = { ...this.context, diff --git a/packages/f-engine/src/canvas/render/animation.ts b/packages/f-engine/src/canvas/render/animation.ts index 58932702..11677c22 100644 --- a/packages/f-engine/src/canvas/render/animation.ts +++ b/packages/f-engine/src/canvas/render/animation.ts @@ -49,22 +49,22 @@ function morphShape(lastNode: VNode, nextNode: VNode, animator?: Animator) { const startStyle = { ...lastStyle, ...start, - path: lastPath, + d: lastPath, }; const endStyle = { ...nextStyle, ...end, - path: nextPath, + d: nextPath, }; - const pathShape = createShape('path', { style: { ...startStyle, path: '' } }); + const pathShape = createShape('path', { style: { ...startStyle, d: '' } }); // 形变双方都有的属性才能动画 const animateProperty = property .filter((key) => { return nextParsedStyle.hasOwnProperty(key) && lastParsedStyle.hasOwnProperty(key); }) - .concat('path'); + .concat(['d']); animator.animate(pathShape, startStyle, endStyle, { ...animationEffect, diff --git a/packages/f-engine/src/canvas/render/createShape.ts b/packages/f-engine/src/canvas/render/createShape.ts index f7108534..ec9b258a 100644 --- a/packages/f-engine/src/canvas/render/createShape.ts +++ b/packages/f-engine/src/canvas/render/createShape.ts @@ -10,6 +10,7 @@ import { DisplayObject, CSS, PropertySyntax, + runtime, } from '@antv/g-lite'; import { Arc, Marker, Sector, SmoothPolyline } from '../../shape'; import Gesture from '../../gesture'; @@ -91,6 +92,9 @@ SECTOR_CSS_PROPERTY.forEach((property) => { CSS.registerProperty(property); }); +// https://github.com/antvis/G/releases/tag/%40antv%2Fg%406.0.0 +runtime.enableCSSParsing = true; + function createShape(type: string, props) { if (!type) return null; const ShapeClass = getTag(type); diff --git a/packages/f-engine/src/canvas/shape/rect.ts b/packages/f-engine/src/canvas/shape/rect.ts index 95d0bb0d..febd5596 100644 --- a/packages/f-engine/src/canvas/shape/rect.ts +++ b/packages/f-engine/src/canvas/shape/rect.ts @@ -1,9 +1,10 @@ export default (layout) => { const { left, top, width, height } = layout; return { - x: left, - y: top, + // x: left, + // y: top, width, height, + transform: `translate(${left}, ${top})`, }; }; diff --git a/packages/f-engine/src/shape/arc.ts b/packages/f-engine/src/shape/arc.ts index 855db11a..99f0cb40 100644 --- a/packages/f-engine/src/shape/arc.ts +++ b/packages/f-engine/src/shape/arc.ts @@ -62,12 +62,12 @@ export class Arc extends Path { const { cx = 0, cy = 0, startAngle, endAngle, r, anticlockwise } = this.parsedStyle; if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) { - super.setAttribute('path', ''); + super.setAttribute('d', ''); return; } const path = this.createPath(cx, cy, deg2rad(startAngle), deg2rad(endAngle), r, anticlockwise); - super.setAttribute('path', path); + super.setAttribute('d', path); } private createPath( diff --git a/packages/f-engine/src/shape/marker.ts b/packages/f-engine/src/shape/marker.ts index 2f34e3bc..2748f20c 100644 --- a/packages/f-engine/src/shape/marker.ts +++ b/packages/f-engine/src/shape/marker.ts @@ -62,6 +62,6 @@ export class Marker extends Path { const path = method(x, y, radius); - super.setAttribute('path', path); + super.setAttribute('d', path); } } diff --git a/packages/f-engine/src/shape/sector.ts b/packages/f-engine/src/shape/sector.ts index 0323cf1d..45b63bf5 100644 --- a/packages/f-engine/src/shape/sector.ts +++ b/packages/f-engine/src/shape/sector.ts @@ -135,7 +135,7 @@ export class Sector extends Path { const { cx, cy, startAngle, endAngle, r, r0, radius, anticlockwise = false } = this.parsedStyle; if (isNil(startAngle) || isNil(endAngle) || startAngle === endAngle || isNil(r) || r <= 0) { - super.setAttribute('path', ''); + super.setAttribute('d', ''); return; } @@ -149,7 +149,7 @@ export class Sector extends Path { radius ? radius : [0, 0, 0, 0], anticlockwise, ); - super.setAttribute('path', path); + super.setAttribute('d', path); } private createPath( diff --git a/packages/f-engine/src/shape/smoothPolyline.ts b/packages/f-engine/src/shape/smoothPolyline.ts index cd2e37cb..e755449d 100644 --- a/packages/f-engine/src/shape/smoothPolyline.ts +++ b/packages/f-engine/src/shape/smoothPolyline.ts @@ -38,7 +38,7 @@ export class SmoothPolyline extends Path { }; }), false, - constaint + constaint, ); for (let i = 0, n = sps.length; i < n; i++) { @@ -82,6 +82,6 @@ export class SmoothPolyline extends Path { } d.push(['L', pos[l][0], pos[l][1]]); } - super.setAttribute('path', d); + super.setAttribute('d', d); } } diff --git a/packages/f-engine/test/canvas/animation.test.tsx b/packages/f-engine/test/canvas/animation.test.tsx index 9973226a..b3beeb20 100644 --- a/packages/f-engine/test/canvas/animation.test.tsx +++ b/packages/f-engine/test/canvas/animation.test.tsx @@ -90,7 +90,7 @@ describe('动画', () => { opacity: 0, }, easing: 'ease', - duration: 50, + duration: 100, delay: 10, property: ['opacity'], }, @@ -106,7 +106,7 @@ describe('动画', () => { const update2 = ; await canvas.update(update2.props); - await delay(200); + await delay(2000); expect(context).toMatchImageSnapshot(); }); diff --git a/packages/f-engine/test/canvas/svg/svg.test.tsx b/packages/f-engine/test/canvas/svg/svg.test.tsx index b4af444a..4cec4e09 100644 --- a/packages/f-engine/test/canvas/svg/svg.test.tsx +++ b/packages/f-engine/test/canvas/svg/svg.test.tsx @@ -26,7 +26,7 @@ describe('svg', () => { const dataURL = await canvas.toDataURL(); expect(dataURL).toBe( - 'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cg%20transform%3D%22matrix(1%2C0%2C0%2C1%2C0%2C0)%22%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + 'data:image/svg+xml;charset=utf8,%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%22%20color-interpolation-filters%3D%22sRGB%22%20style%3D%22background%3A%20transparent%3B%22%3E%3Cdefs%2F%3E%3Cg%20id%3D%22g-svg-camera%22%3E%3Cg%20id%3D%22g-root%22%20fill%3D%22none%22%20stroke%3D%22none%22%20visibility%3D%22visible%22%20font-size%3D%2212px%22%20font-family%3D%22%26quot%3BHelvetica%20Neue%26quot%3B%2C%20Helvetica%2C%20%26quot%3BPingFang%20SC%26quot%3B%2C%20%26quot%3BHiragino%20Sans%20GB%26quot%3B%2C%20%26quot%3BMicrosoft%20YaHei%26quot%3B%2C%20Arial%2C%20sans-serif%22%20font-style%3D%22normal%22%20font-weight%3D%22normal%22%20font-variant%3D%22normal%22%20text-anchor%3D%22left%22%20stroke-dashoffset%3D%220px%22%3E%3Cg%3E%3Cpath%20id%3D%22g-svg-1%22%20fill%3D%22rgba(255%2C0%2C0%2C1)%22%20d%3D%22M%200%2C0%20l%20100%2C0%20l%200%2C100%20l-100%200%20z%22%20stroke%3D%22none%22%20width%3D%22100px%22%20height%3D%22100px%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', ); }); }); diff --git a/packages/f-engine/test/g.test.tsx b/packages/f-engine/test/g.test.tsx index e761dde6..3a17059e 100644 --- a/packages/f-engine/test/g.test.tsx +++ b/packages/f-engine/test/g.test.tsx @@ -1,4 +1,4 @@ -import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect } from '@antv/g-lite'; +import { Canvas, CanvasEvent, Circle, convertToPath, Path, Rect, Text } from '@antv/g-lite'; import { Renderer as CanvasRenderer } from '@antv/g-mobile-canvas'; import '@antv/g-web-animations-api'; import { createContext, delay } from './util'; @@ -19,55 +19,42 @@ describe('G 的测试使用', () => { await delay(1000); - /** - * Path -> Circle - */ - const circle = new Circle({ - style: { - cx: 50, - cy: 50, - r: 20, - fill: 'red', - }, - }); - const circlePathStr = convertToPath(circle); + // const text = new Text({ + // style: { + // x: 20, + // y: 20, + // text: 'Hello World', + // fill: 'red', + // }, + // }); + // const container = canvas.getRoot(); + // container.setAttribute('fontSize', 30); + + // canvas.appendChild(text); + + // console.log(text); - /** - * Rect -> Circle - */ const rect = new Rect({ style: { x: 10, - y: 10, - width: 60, - height: 50, + y: 20, + width: 50, + height: 100, fill: 'red', }, }); - canvas.appendChild(rect); - const rectPathStr = convertToPath(rect); - - const path = new Path({ + const rect1 = new Rect({ style: { - fill: 'red', + x: 10, + y: 20, + width: 50, + height: 100, + fill: '#1890FF', }, }); - rect.replaceWith(path); - - path.style.fill = 'red'; - path.style.path = rectPathStr; - - // canvas.appendChild(pathF); - - path.animate([{ path: rectPathStr }, { path: circlePathStr }], { - duration: 2500, - easing: 'ease', - // iterations: Infinity, - // direction: 'alternate', - fill: 'both', - }); + rect.appendChild(rect1); - await delay(1000); + canvas.appendChild(rect); }); }); diff --git a/packages/f-engine/test/shape/index.test.tsx b/packages/f-engine/test/shape/index.test.tsx index e34f7378..d8c6d01b 100644 --- a/packages/f-engine/test/shape/index.test.tsx +++ b/packages/f-engine/test/shape/index.test.tsx @@ -106,6 +106,7 @@ class View1 extends Component { x: 150, y: 100, symbol: 'arrow', + transformOrigin: 'left top', transform: 'rotate(90deg)', }} /> diff --git a/packages/f-engine/test/shape/registerTag.test.tsx b/packages/f-engine/test/shape/registerTag.test.tsx index e16c46b5..46aef62d 100644 --- a/packages/f-engine/test/shape/registerTag.test.tsx +++ b/packages/f-engine/test/shape/registerTag.test.tsx @@ -16,7 +16,7 @@ describe('自定义标签', () => { { ); const canvas = new Canvas(props); - canvas.render(); + await canvas.render(); await delay(200); expect(context).toMatchImageSnapshot(); }); diff --git a/packages/f-lottie/package.json b/packages/f-lottie/package.json index 34a789d6..14de1537 100644 --- a/packages/f-lottie/package.json +++ b/packages/f-lottie/package.json @@ -16,7 +16,7 @@ ], "dependencies": { "@antv/f-engine": "1.3.1", - "@antv/g-lottie-player": "~0.2.0", + "@antv/g-lottie-player": "~1.0.0", "@babel/runtime": "^7.12.5", "tslib": "^2.3.1" },