diff --git a/.changeset/silver-boats-promise.md b/.changeset/silver-boats-promise.md new file mode 100644 index 000000000..50b27c3fd --- /dev/null +++ b/.changeset/silver-boats-promise.md @@ -0,0 +1,35 @@ +--- +'@antv/g-plugin-canvas-path-generator': patch +'@antv/g-plugin-rough-canvas-renderer': patch +'@antv/g-plugin-zdog-canvas-renderer': patch +'@antv/g-plugin-canvaskit-renderer': patch +'@antv/g-plugin-rough-svg-renderer': patch +'@antv/g-plugin-zdog-svg-renderer': patch +'@antv/g-plugin-canvas-renderer': patch +'@antv/g-plugin-device-renderer': patch +'@antv/g-plugin-canvas-picker': patch +'@antv/g-plugin-html-renderer': patch +'@antv/g-plugin-webgpu-device': patch +'@antv/g-plugin-image-loader': patch +'@antv/g-plugin-svg-renderer': patch +'@antv/g-plugin-webgl-device': patch +'@antv/g-web-animations-api': patch +'@antv/g-plugin-dragndrop': patch +'@antv/g-lottie-player': patch +'@antv/g-mobile-canvas': patch +'@antv/g-mobile-webgl': patch +'@antv/g-camera-api': patch +'@antv/g-components': patch +'@antv/g-mobile-svg': patch +'@antv/g-canvaskit': patch +'@antv/g-pattern': patch +'@antv/g-canvas': patch +'@antv/g-webgpu': patch +'@antv/g-webgl': patch +'@antv/react-g': patch +'@antv/g-lite': patch +'@antv/g-math': patch +'@antv/g-svg': patch +--- + +Split a path containing multiple segments into subpaths. diff --git a/__tests__/integration/__node__tests__/webgl/circle.spec.js b/__tests__/integration/__node__tests__/webgl/circle.spec.js index abceed1c0..5c067671f 100644 --- a/__tests__/integration/__node__tests__/webgl/circle.spec.js +++ b/__tests__/integration/__node__tests__/webgl/circle.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/cube.spec.js b/__tests__/integration/__node__tests__/webgl/cube.spec.js index e8ec1cc27..2eae57557 100644 --- a/__tests__/integration/__node__tests__/webgl/cube.spec.js +++ b/__tests__/integration/__node__tests__/webgl/cube.spec.js @@ -13,6 +13,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/d3-barchart.spec.js b/__tests__/integration/__node__tests__/webgl/d3-barchart.spec.js index 11de64307..48dc02c65 100644 --- a/__tests__/integration/__node__tests__/webgl/d3-barchart.spec.js +++ b/__tests__/integration/__node__tests__/webgl/d3-barchart.spec.js @@ -9,6 +9,7 @@ const weatherDataset = require('../../data/weather.json'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/d3-linechart.spec.js b/__tests__/integration/__node__tests__/webgl/d3-linechart.spec.js index 1ae48d158..f57c2807f 100644 --- a/__tests__/integration/__node__tests__/webgl/d3-linechart.spec.js +++ b/__tests__/integration/__node__tests__/webgl/d3-linechart.spec.js @@ -9,6 +9,7 @@ const weatherDataset = require('../../data/weather.json'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/d3-scatterchart.spec.js b/__tests__/integration/__node__tests__/webgl/d3-scatterchart.spec.js index f919e1b82..b24761df4 100644 --- a/__tests__/integration/__node__tests__/webgl/d3-scatterchart.spec.js +++ b/__tests__/integration/__node__tests__/webgl/d3-scatterchart.spec.js @@ -9,6 +9,7 @@ const weatherDataset = require('../../data/weather.json'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/ellipse.spec.js b/__tests__/integration/__node__tests__/webgl/ellipse.spec.js index 35eb90c8b..dc883a164 100644 --- a/__tests__/integration/__node__tests__/webgl/ellipse.spec.js +++ b/__tests__/integration/__node__tests__/webgl/ellipse.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/image.spec.js b/__tests__/integration/__node__tests__/webgl/image.spec.js index 3fd0b7caa..134415866 100644 --- a/__tests__/integration/__node__tests__/webgl/image.spec.js +++ b/__tests__/integration/__node__tests__/webgl/image.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/line.spec.js b/__tests__/integration/__node__tests__/webgl/line.spec.js index 2994c50f9..38c260a2f 100644 --- a/__tests__/integration/__node__tests__/webgl/line.spec.js +++ b/__tests__/integration/__node__tests__/webgl/line.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/marker.spec.js b/__tests__/integration/__node__tests__/webgl/marker.spec.js index b4df73c36..6b89227b1 100644 --- a/__tests__/integration/__node__tests__/webgl/marker.spec.js +++ b/__tests__/integration/__node__tests__/webgl/marker.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/material.spec.js b/__tests__/integration/__node__tests__/webgl/material.spec.js index ea7a540f5..1ee79384e 100644 --- a/__tests__/integration/__node__tests__/webgl/material.spec.js +++ b/__tests__/integration/__node__tests__/webgl/material.spec.js @@ -17,6 +17,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/path.spec.js b/__tests__/integration/__node__tests__/webgl/path.spec.js index b7f3bc743..499f8a0f4 100644 --- a/__tests__/integration/__node__tests__/webgl/path.spec.js +++ b/__tests__/integration/__node__tests__/webgl/path.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/polygon.spec.js b/__tests__/integration/__node__tests__/webgl/polygon.spec.js index 165170640..eb8e5181f 100644 --- a/__tests__/integration/__node__tests__/webgl/polygon.spec.js +++ b/__tests__/integration/__node__tests__/webgl/polygon.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/polyline.spec.js b/__tests__/integration/__node__tests__/webgl/polyline.spec.js index 779378694..c837076f5 100644 --- a/__tests__/integration/__node__tests__/webgl/polyline.spec.js +++ b/__tests__/integration/__node__tests__/webgl/polyline.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/rect.spec.js b/__tests__/integration/__node__tests__/webgl/rect.spec.js index 49b53cc11..f3a5bda40 100644 --- a/__tests__/integration/__node__tests__/webgl/rect.spec.js +++ b/__tests__/integration/__node__tests__/webgl/rect.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png b/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png index 01d881c00..cea7d2ef8 100644 Binary files a/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png and b/__tests__/integration/__node__tests__/webgl/snapshots/d3-barchart.png differ diff --git a/__tests__/integration/__node__tests__/webgl/snapshots/text.png b/__tests__/integration/__node__tests__/webgl/snapshots/text.png index db68465e1..623e05b4b 100644 Binary files a/__tests__/integration/__node__tests__/webgl/snapshots/text.png and b/__tests__/integration/__node__tests__/webgl/snapshots/text.png differ diff --git a/__tests__/integration/__node__tests__/webgl/sphere.spec.js b/__tests__/integration/__node__tests__/webgl/sphere.spec.js index 25319ade1..c2623d4f1 100644 --- a/__tests__/integration/__node__tests__/webgl/sphere.spec.js +++ b/__tests__/integration/__node__tests__/webgl/sphere.spec.js @@ -15,6 +15,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/integration/__node__tests__/webgl/text.spec.js b/__tests__/integration/__node__tests__/webgl/text.spec.js index 69f739d39..bc60ebdc1 100644 --- a/__tests__/integration/__node__tests__/webgl/text.spec.js +++ b/__tests__/integration/__node__tests__/webgl/text.spec.js @@ -7,6 +7,7 @@ const { createPNGFromRawdata, sleep, diff } = require('../../util'); // create a renderer, unregister plugin relative to DOM const renderer = new Renderer({ targets: ['webgl1'], + enableFXAA: false, }); const domInteractionPlugin = renderer.getPlugin('dom-interaction'); renderer.unregisterPlugin(domInteractionPlugin); diff --git a/__tests__/unit/css/parser/path.spec.ts b/__tests__/unit/css/parser/path.spec.ts index aca9ae7b2..9d3262bb2 100644 --- a/__tests__/unit/css/parser/path.spec.ts +++ b/__tests__/unit/css/parser/path.spec.ts @@ -73,11 +73,11 @@ describe('Property Path', () => { expect(left).toStrictEqual([ ['M', 0, 0], - ['C', 50, 0, 68.75, 0, 100, 0], + ['C', 50, 0, 100, 0, 100, 0], ]); expect(right).toStrictEqual([ ['M', 0, 0], - ['C', 100, 0, 137.5, 0, 200, 0], + ['C', 100, 0, 200, 0, 200, 0], ]); mergePaths(path1, path2); diff --git a/package.json b/package.json index 9e96e0bca..3b2ffbbd8 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "jest-environment-jsdom": "^26.6.2" }, "devDependencies": { - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "@commitlint/cli": "^8.3.6", "@commitlint/config-angular": "^9.1.2", "@changesets/cli": "^2.26.2", diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json index 2950be9e4..5f29cdcfb 100644 --- a/packages/g-camera-api/package.json +++ b/packages/g-camera-api/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json index f7787e5b5..9b0c6a12e 100644 --- a/packages/g-canvas/package.json +++ b/packages/g-canvas/package.json @@ -48,7 +48,7 @@ "@antv/g-plugin-dom-interaction": "workspace:*", "@antv/g-plugin-html-renderer": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json index 4ea1f414f..e4472e392 100644 --- a/packages/g-canvaskit/package.json +++ b/packages/g-canvaskit/package.json @@ -48,7 +48,7 @@ "@antv/g-plugin-dom-interaction": "workspace:*", "@antv/g-plugin-html-renderer": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "canvaskit-wasm": "^0.34.0", "tslib": "^2.5.3" }, diff --git a/packages/g-components/package.json b/packages/g-components/package.json index 16516880b..0cf933b6f 100644 --- a/packages/g-components/package.json +++ b/packages/g-components/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json index 7e9150644..05bb96bf1 100644 --- a/packages/g-lite/package.json +++ b/packages/g-lite/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@antv/g-math": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "d3-color": "^1.4.0", "eventemitter3": "^5.0.1", "gl-matrix": "^3.4.3", diff --git a/packages/g-lite/src/components/Renderable.ts b/packages/g-lite/src/components/Renderable.ts index 4dd8630eb..1bae6dcae 100644 --- a/packages/g-lite/src/components/Renderable.ts +++ b/packages/g-lite/src/components/Renderable.ts @@ -26,9 +26,4 @@ export interface Renderable { * dirty rectangle flag */ dirty: boolean; - - /** - * Rendering with other renderers, eg. simple Path/Polyline should be treated as instanced Line. - */ - proxyNodeName: string; } diff --git a/packages/g-lite/src/dom/Element.ts b/packages/g-lite/src/dom/Element.ts index 77f9804eb..2285cd0eb 100644 --- a/packages/g-lite/src/dom/Element.ts +++ b/packages/g-lite/src/dom/Element.ts @@ -80,7 +80,6 @@ export class Element< renderBoundsDirty: true, dirtyRenderBounds: undefined, dirty: false, - proxyNodeName: undefined, }; cullable: Cullable = { diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json index c76100b55..a7a3ffe9a 100644 --- a/packages/g-lottie-player/package.json +++ b/packages/g-lottie-player/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "publishConfig": { diff --git a/packages/g-math/package.json b/packages/g-math/package.json index be6ed7c4c..d9031c45f 100644 --- a/packages/g-math/package.json +++ b/packages/g-math/package.json @@ -38,7 +38,7 @@ "watch": "rollup -c -w" }, "dependencies": { - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-mobile-canvas/package.json b/packages/g-mobile-canvas/package.json index 18a27331f..85256ca12 100644 --- a/packages/g-mobile-canvas/package.json +++ b/packages/g-mobile-canvas/package.json @@ -45,7 +45,7 @@ "@antv/g-plugin-dragndrop": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", "@antv/g-plugin-mobile-interaction": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-mobile-svg/package.json b/packages/g-mobile-svg/package.json index d100dcbbc..cdbe908d4 100644 --- a/packages/g-mobile-svg/package.json +++ b/packages/g-mobile-svg/package.json @@ -43,7 +43,7 @@ "@antv/g-plugin-mobile-interaction": "workspace:*", "@antv/g-plugin-svg-picker": "workspace:*", "@antv/g-plugin-svg-renderer": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json index a33db548b..eb07fae84 100644 --- a/packages/g-mobile-webgl/package.json +++ b/packages/g-mobile-webgl/package.json @@ -45,7 +45,7 @@ "@antv/g-plugin-image-loader": "workspace:*", "@antv/g-plugin-mobile-interaction": "workspace:*", "@antv/g-plugin-webgl-device": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-pattern/package.json b/packages/g-pattern/package.json index 5ab00d405..074d140b9 100644 --- a/packages/g-pattern/package.json +++ b/packages/g-pattern/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "publishConfig": { diff --git a/packages/g-plugin-canvas-path-generator/package.json b/packages/g-plugin-canvas-path-generator/package.json index 015b925df..be020fe6b 100644 --- a/packages/g-plugin-canvas-path-generator/package.json +++ b/packages/g-plugin-canvas-path-generator/package.json @@ -40,7 +40,7 @@ "dependencies": { "@antv/g-lite": "workspace:*", "@antv/g-math": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "publishConfig": { diff --git a/packages/g-plugin-canvas-picker/package.json b/packages/g-plugin-canvas-picker/package.json index c6bf9916d..20d5f0af1 100644 --- a/packages/g-plugin-canvas-picker/package.json +++ b/packages/g-plugin-canvas-picker/package.json @@ -42,7 +42,7 @@ "@antv/g-math": "workspace:*", "@antv/g-plugin-canvas-path-generator": "workspace:*", "@antv/g-plugin-canvas-renderer": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-canvas-renderer/package.json b/packages/g-plugin-canvas-renderer/package.json index da90a1e3b..1873fe39b 100644 --- a/packages/g-plugin-canvas-renderer/package.json +++ b/packages/g-plugin-canvas-renderer/package.json @@ -42,7 +42,7 @@ "@antv/g-math": "workspace:*", "@antv/g-plugin-canvas-path-generator": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-canvas-renderer/src/shapes/styles/Text.ts b/packages/g-plugin-canvas-renderer/src/shapes/styles/Text.ts index a24ba9bb7..4d1493dca 100644 --- a/packages/g-plugin-canvas-renderer/src/shapes/styles/Text.ts +++ b/packages/g-plugin-canvas-renderer/src/shapes/styles/Text.ts @@ -1,19 +1,24 @@ import type { CSSRGB, + CanvasContext, DisplayObject, + GlobalRuntime, ParsedTextStyleProps, Rectangle, } from '@antv/g-lite'; -import { runtime } from '@antv/g-lite'; import { isNil } from '@antv/util'; import { setShadowAndFilter } from './Default'; import type { StyleRenderer } from './interfaces'; +import { CanvasRendererPlugin } from '../../CanvasRendererPlugin'; export class TextRenderer implements StyleRenderer { render( context: CanvasRenderingContext2D, parsedStyle: ParsedTextStyleProps, object: DisplayObject, + canvasContext: CanvasContext, + plugin: CanvasRendererPlugin, + runtime: GlobalRuntime, ) { const { lineWidth, diff --git a/packages/g-plugin-canvaskit-renderer/package.json b/packages/g-plugin-canvaskit-renderer/package.json index 6bfc1cc61..5dd51af26 100644 --- a/packages/g-plugin-canvaskit-renderer/package.json +++ b/packages/g-plugin-canvaskit-renderer/package.json @@ -41,7 +41,7 @@ "@antv/g-lite": "workspace:*", "@antv/g-math": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "canvaskit-wasm": "^0.34.0", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" diff --git a/packages/g-plugin-control/src/ControlPlugin.ts b/packages/g-plugin-control/src/ControlPlugin.ts index a8eb9b2c8..8999d57ff 100644 --- a/packages/g-plugin-control/src/ControlPlugin.ts +++ b/packages/g-plugin-control/src/ControlPlugin.ts @@ -5,13 +5,9 @@ import type { RenderingPlugin, RenderingPluginContext, } from '@antv/g-lite'; -import { runtime } from '@antv/g-lite'; import Hammer from 'hammerjs'; const MOTION_FACTOR = 10; -// https://gist.github.com/handleman/3c99e754065f647b082f -const isMac = - runtime.globalThis.navigator.platform.toUpperCase().indexOf('MAC') >= 0; export class ControlPlugin implements RenderingPlugin { static tag = 'Control'; @@ -27,11 +23,13 @@ export class ControlPlugin implements RenderingPlugin { private ctrlKey: boolean; private shiftKey: boolean; private altKey: boolean; + private context: RenderingPluginContext; apply(context: RenderingPluginContext) { const { config, camera, renderingService, renderingContext } = context; this.canvasConfig = config; this.camera = camera; + this.context = context; renderingService.hooks.init.tap(ControlPlugin.tag, () => { const root = renderingContext.root.ownerDocument.defaultView; @@ -66,6 +64,11 @@ export class ControlPlugin implements RenderingPlugin { }; private onPanmove = (e: HammerInput) => { + // https://gist.github.com/handleman/3c99e754065f647b082f + const isMac = + this.context.globalThis.navigator.platform.toUpperCase().indexOf('MAC') >= + 0; + this.ctrlKey = e.srcEvent.ctrlKey; if (isMac && e.srcEvent.metaKey) { this.ctrlKey = true; diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json index c13eb6307..0718f5d52 100644 --- a/packages/g-plugin-device-renderer/package.json +++ b/packages/g-plugin-device-renderer/package.json @@ -42,7 +42,7 @@ "@antv/g-math": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", "@antv/g-shader-components": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "@webgpu/types": "^0.1.6", "earcut": "^2.2.3", "eventemitter3": "^5.0.1", diff --git a/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts b/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts index 7c41ad3e5..effe0770d 100644 --- a/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts +++ b/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts @@ -11,7 +11,7 @@ import { CanvasEvent, ElementEvent, parseColor } from '@antv/g-lite'; import { Renderable3D } from './components/Renderable3D'; import type { LightPool } from './LightPool'; import { Fog, Light } from './lights'; -// import { pushFXAAPass } from './passes/FXAA'; +import { pushFXAAPass } from './passes/FXAA'; import { Device, SwapChain, @@ -37,6 +37,7 @@ import { } from './render'; import type { BatchManager } from './renderer'; import type { TexturePool } from './TexturePool'; +import { DeviceRendererPluginOptions } from './interfaces'; // scene uniform block index export const SceneUniformBufferIndex = 0; @@ -62,6 +63,7 @@ export class RenderGraphPlugin implements RenderingPlugin { private lightPool: LightPool, private texturePool: TexturePool, private batchManager: BatchManager, + private options: Partial, ) {} private device: Device; @@ -306,13 +308,15 @@ export class RenderGraphPlugin implements RenderingPlugin { }); // TODO: other post-processing passes - // FXAA - // pushFXAAPass( - // this.builder, - // this.renderHelper, - // renderInput, - // mainColorTargetID, - // ); + if (this.options?.enableFXAA) { + // FXAA + pushFXAAPass( + this.builder, + this.renderHelper, + renderInput, + mainColorTargetID, + ); + } // output to screen this.builder.resolveRenderTargetToExternalTexture( diff --git a/packages/g-plugin-device-renderer/src/TexturePool.ts b/packages/g-plugin-device-renderer/src/TexturePool.ts index ad86b6cfc..edc5d4d01 100644 --- a/packages/g-plugin-device-renderer/src/TexturePool.ts +++ b/packages/g-plugin-device-renderer/src/TexturePool.ts @@ -2,13 +2,13 @@ import { CanvasContext, CSSGradientValue, DisplayObject, + GlobalRuntime, isBrowser, LinearGradient, parsedTransformToMat4, parseTransform, Pattern, RadialGradient, - runtime, } from '@antv/g-lite'; import type { ImagePool } from '@antv/g-plugin-image-loader'; import { isString } from '@antv/util'; @@ -28,7 +28,7 @@ export interface GradientParams { } export class TexturePool { - constructor(public context: CanvasContext) {} + constructor(public context: CanvasContext, private runtime: GlobalRuntime) {} private textureCache: Record = {}; @@ -89,8 +89,8 @@ export class TexturePool { } }; - if (runtime.globalThis.createImageBitmap) { - runtime.globalThis + if (this.runtime.globalThis.createImageBitmap) { + this.runtime.globalThis .createImageBitmap(image) .then((bitmap: ImageBitmap) => onSuccess(bitmap)) .catch(() => { @@ -117,7 +117,7 @@ export class TexturePool { } getOrCreateCanvas() { - return runtime.offscreenCanvasCreator.getOrCreateCanvas( + return this.runtime.offscreenCanvasCreator.getOrCreateCanvas( this.context.config.offscreenCanvas, ); } @@ -130,8 +130,8 @@ export class TexturePool { const { offscreenCanvas } = this.context.config; const canvas = - runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); - const context = runtime.offscreenCanvasCreator.getOrCreateContext( + this.runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + const context = this.runtime.offscreenCanvasCreator.getOrCreateContext( offscreenCanvas, ) as CanvasRenderingContext2D; @@ -173,9 +173,9 @@ export class TexturePool { const { offscreenCanvas } = this.context.config; const canvas = - runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + this.runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); const context = - runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); + this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); canvas.width = width; canvas.height = height; diff --git a/packages/g-plugin-device-renderer/src/components/Renderable3D.ts b/packages/g-plugin-device-renderer/src/components/Renderable3D.ts index 8662b388c..8c84f47b3 100644 --- a/packages/g-plugin-device-renderer/src/components/Renderable3D.ts +++ b/packages/g-plugin-device-renderer/src/components/Renderable3D.ts @@ -1,4 +1,4 @@ -import type { Instanced } from '../meshes'; +import type { Instanced } from '../drawcalls'; export class Renderable3D { static tag = 'c-renderable-3d'; @@ -7,5 +7,5 @@ export class Renderable3D { encodedPickingColor: [number, number, number]; - meshes: Instanced[] = []; + drawcalls: Instanced[] = []; } diff --git a/packages/g-plugin-device-renderer/src/meshes/Image.ts b/packages/g-plugin-device-renderer/src/drawcalls/Image.ts similarity index 97% rename from packages/g-plugin-device-renderer/src/meshes/Image.ts rename to packages/g-plugin-device-renderer/src/drawcalls/Image.ts index 4c8a68b63..610c0963c 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Image.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/Image.ts @@ -3,12 +3,12 @@ import { Instanced, VertexAttributeBufferIndex, VertexAttributeLocation, -} from '../meshes/Instanced'; +} from './Instanced'; import { Format, VertexBufferFrequency } from '../platform'; import frag from '../shader/image.frag'; import vert from '../shader/image.vert'; -export class ImageMesh extends Instanced { +export class ImageDrawcall extends Instanced { shouldMerge(object: DisplayObject, index: number) { const shouldMerge = super.shouldMerge(object, index); diff --git a/packages/g-plugin-device-renderer/src/meshes/Instanced.ts b/packages/g-plugin-device-renderer/src/drawcalls/Instanced.ts similarity index 98% rename from packages/g-plugin-device-renderer/src/meshes/Instanced.ts rename to packages/g-plugin-device-renderer/src/drawcalls/Instanced.ts index beec10c8a..e857ab1e3 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Instanced.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/Instanced.ts @@ -95,20 +95,22 @@ export abstract class Instanced { */ key: string; - /** - * index in renderer.meshes - */ - index = -1; - constructor( protected renderHelper: RenderHelper, protected texturePool: TexturePool, protected lightPool: LightPool, object: DisplayObject, + /** + * All drawcall constructors. + */ + protected drawcallCtors: (new (..._: any) => Instanced)[], + /** + * index in renderer.meshes + */ + public index = -1, + public context: BatchContext, ) {} - context: BatchContext; - /** * instances */ @@ -151,6 +153,8 @@ export abstract class Instanced { */ protected mergeAnchorIntoModelMatrix = false; + protected checkNodeName = true; + /** * Create a new batch if the number of instances exceeds. */ @@ -163,13 +167,12 @@ export abstract class Instanced { } inited = false; - init(context: BatchContext) { + init() { if (this.inited) { return; } this.renderer.beforeInitMesh(this); - this.context = context; this.material = new ShaderMaterial(this.context.device); this.material.defines = { ...enumToObject(VertexAttributeLocation), @@ -247,12 +250,7 @@ export abstract class Instanced { } // Path / Polyline could be rendered as Line - if ( - this.instance.nodeName !== object.nodeName && - this.instance.nodeName !== object.renderable.proxyNodeName && - this.instance.renderable.proxyNodeName !== object.nodeName && - this.instance.renderable.proxyNodeName !== object.renderable.proxyNodeName - ) { + if (this.checkNodeName && this.instance.nodeName !== object.nodeName) { return false; } @@ -698,7 +696,7 @@ export abstract class Instanced { renderInst.setProgram(program); renderInst.setInputLayoutAndState(inputLayout, this.inputState); - this.renderer.beforeUploadUBO(renderInst, this, this.index); + this.renderer.beforeUploadUBO(renderInst, this); // upload uniform buffer object this.uploadUBO(renderInst); @@ -1028,7 +1026,6 @@ export abstract class Instanced { protected beforeUploadUBO( renderInst: RenderInst, objects: DisplayObject[], - i: number, ): void {} private uploadUBO(renderInst: RenderInst): void { const numUniformBuffers = 1; // Scene UBO diff --git a/packages/g-plugin-device-renderer/src/meshes/InstancedFill.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts similarity index 81% rename from packages/g-plugin-device-renderer/src/meshes/InstancedFill.ts rename to packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts index 43c6660c7..38bbe8c93 100644 --- a/packages/g-plugin-device-renderer/src/meshes/InstancedFill.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts @@ -1,9 +1,9 @@ -import type { DisplayObject } from '@antv/g-lite'; +import { DisplayObject, Shape } from '@antv/g-lite'; import { Instanced, VertexAttributeBufferIndex, VertexAttributeLocation, -} from '../meshes/Instanced'; +} from './Instanced'; import { Format, VertexBufferFrequency } from '../platform'; import meshFrag from '../shader/mesh.frag'; import meshVert from '../shader/mesh.vert'; @@ -11,26 +11,50 @@ import { updateBuffer } from './InstancedPath'; import { RenderHelper } from '../render'; import { TexturePool } from '../TexturePool'; import { LightPool } from '../LightPool'; +import { BatchContext } from '../renderer'; const SEGMENT_NUM = 12; -export class InstancedFillMesh extends Instanced { +export class InstancedFillDrawcall extends Instanced { constructor( protected renderHelper: RenderHelper, protected texturePool: TexturePool, protected lightPool: LightPool, object: DisplayObject, + drawcallCtors: (new (..._: any) => Instanced)[], + index: number, + context: BatchContext, ) { - super(renderHelper, texturePool, lightPool, object); + super( + renderHelper, + texturePool, + lightPool, + object, + drawcallCtors, + index, + context, + ); this.trianglesHash = this.calcSegmentNum(object); } private trianglesHash: [number[], number[]] = [[], []]; private calcSegmentNum(object: DisplayObject): [number[], number[]] { - const { triangles, pointsBuffer } = updateBuffer(object, true, SEGMENT_NUM); + const { triangles, pointsBuffer } = updateBuffer( + object, + true, + SEGMENT_NUM, + this.calcSubpathIndex(object), + ); return [triangles, pointsBuffer]; } + private calcSubpathIndex(object: DisplayObject) { + if (object.nodeName === Shape.PATH) { + return this.index; + } + return 0; + } + private compareTrianglesHash(hash: [number[], number[]]) { const [triangles, points] = this.trianglesHash; const [t, p] = hash; @@ -54,6 +78,10 @@ export class InstancedFillMesh extends Instanced { return false; } + if (this.index !== index) { + return false; + } + const trianglesHash = this.calcSegmentNum(object); return this.compareTrianglesHash(trianglesHash); } @@ -71,6 +99,7 @@ export class InstancedFillMesh extends Instanced { object, true, SEGMENT_NUM, + this.calcSubpathIndex(object), ); const { halfExtents } = object.getGeometryBounds(); diff --git a/packages/g-plugin-device-renderer/src/meshes/InstancedLine.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts similarity index 91% rename from packages/g-plugin-device-renderer/src/meshes/InstancedLine.ts rename to packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts index 7b7b95197..02cce45d9 100644 --- a/packages/g-plugin-device-renderer/src/meshes/InstancedLine.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedLine.ts @@ -46,18 +46,32 @@ const LineCap_MAP = { square: 3, }; -export class InstancedLineMesh extends Instanced { - static isLine(object: DisplayObject) { +export class InstancedLineDrawcall extends Instanced { + static isLine(object: DisplayObject, subpathIndex: number) { if (object.nodeName === Shape.PATH) { const { path: { absolutePath }, } = object.parsedStyle as ParsedPathStyleProps; + let mSegmentCount = 0; + let mCommandIndex = 0; + for (let i = 0; i < absolutePath.length; i++) { + const segment = absolutePath[i]; + if (segment[0] === 'M') { + if (mSegmentCount === subpathIndex) { + mCommandIndex = i; + break; + } + mSegmentCount++; + } + } + // only contains M & L commands if ( - absolutePath.length === 2 && - absolutePath[0][0] === 'M' && - absolutePath[1][0] === 'L' + absolutePath[mCommandIndex][0] === 'M' && + absolutePath[mCommandIndex + 1][0] === 'L' && + (absolutePath[mCommandIndex + 2] === undefined || + absolutePath[mCommandIndex + 2][0] === 'M') ) { return true; } @@ -161,11 +175,23 @@ export class InstancedLineMesh extends Instanced { markerStartOffset, markerEndOffset, } = (object as Path).parsedStyle; + let mSegmentCount = 0; + let mCommandIndex = 0; + for (let i = 0; i < absolutePath.length; i++) { + const segment = absolutePath[i]; + if (segment[0] === 'M') { + if (mSegmentCount === this.index) { + mCommandIndex = i; + break; + } + mSegmentCount++; + } + } parsedLineStyleProps = { - x1: absolutePath[0][1], - y1: absolutePath[0][2], - x2: absolutePath[1][1], - y2: absolutePath[1][2], + x1: absolutePath[mCommandIndex][1], + y1: absolutePath[mCommandIndex][2], + x2: absolutePath[mCommandIndex + 1][1], + y2: absolutePath[mCommandIndex + 1][2], z1: 0, z2: 0, defX, @@ -323,10 +349,7 @@ export class InstancedLineMesh extends Instanced { let parsedLineStyleProps: Partial; if (object.nodeName === Shape.LINE) { parsedLineStyleProps = (object as Line).parsedStyle; - } else if ( - object.nodeName === Shape.POLYLINE && - object.renderable.proxyNodeName === Shape.LINE - ) { + } else if (object.nodeName === Shape.POLYLINE) { const { points: { points }, defX, @@ -353,10 +376,7 @@ export class InstancedLineMesh extends Instanced { markerStartOffset, markerEndOffset, }; - } else if ( - object.nodeName === Shape.PATH && - object.renderable.proxyNodeName === Shape.LINE - ) { + } else if (object.nodeName === Shape.PATH) { const { path: { absolutePath }, defX, diff --git a/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts similarity index 86% rename from packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts rename to packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts index b076a26eb..8def9c4ae 100644 --- a/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts @@ -30,6 +30,8 @@ import { RenderHelper } from '../render'; import { TexturePool } from '../TexturePool'; import { LightPool } from '../LightPool'; import { bezierCurveTo, quadCurveTo } from '../utils'; +import { InstancedFillDrawcall } from './InstancedFill'; +import { BatchContext } from '../renderer'; enum LineVertexAttributeBufferIndex { PACKED = VertexAttributeBufferIndex.POSITION + 1, @@ -54,14 +56,36 @@ const SEGMENT_NUM = 12; /** * Used for Curve only contains 2 commands, e.g. [[M], [C | Q | A]] */ -export class InstancedPathMesh extends Instanced { +export class InstancedPathDrawcall extends Instanced { + static calcSubpathNum(object: DisplayObject) { + if (object.nodeName === Shape.PATH) { + const { + path: { absolutePath }, + } = object.parsedStyle as ParsedPathStyleProps; + return absolutePath.filter((d) => d[0] === 'M').length; + } + + return 1; + } + constructor( protected renderHelper: RenderHelper, protected texturePool: TexturePool, protected lightPool: LightPool, object: DisplayObject, + drawcallCtors: (new (..._: any) => Instanced)[], + index: number, + context: BatchContext, ) { - super(renderHelper, texturePool, lightPool, object); + super( + renderHelper, + texturePool, + lightPool, + object, + drawcallCtors, + index, + context, + ); this.segmentNum = this.calcSegmentNum(object); } @@ -71,9 +95,25 @@ export class InstancedPathMesh extends Instanced { private calcSegmentNum(object: DisplayObject) { // FIXME: only need to collect instanced count - const { instancedCount } = updateBuffer(object, false, SEGMENT_NUM); + const { instancedCount } = updateBuffer( + object, + false, + SEGMENT_NUM, + this.calcSubpathIndex(object), + ); return instancedCount; } + + private calcSubpathIndex(object: DisplayObject) { + if (object.nodeName === Shape.PATH) { + const fillDrawcallCount = this.drawcallCtors.filter( + (ctor) => ctor === InstancedFillDrawcall, + ).length; + return this.index - fillDrawcallCount; + } + return 0; + } + /** * Paths with the same number of vertices should be merged. */ @@ -83,6 +123,10 @@ export class InstancedPathMesh extends Instanced { return false; } + if (this.index !== index) { + return false; + } + const segmentNum = this.calcSegmentNum(object); return this.segmentNum === segmentNum; @@ -110,7 +154,12 @@ export class InstancedPathMesh extends Instanced { pointsBuffer: pBuffer, travelBuffer: tBuffer, instancedCount: count, - } = updateBuffer(object, false, SEGMENT_NUM); + } = updateBuffer( + object, + false, + SEGMENT_NUM, + this.calcSubpathIndex(object), + ); const { lineDash, lineDashOffset, isBillboard } = (object as Path) .parsedStyle; @@ -300,7 +349,12 @@ export class InstancedPathMesh extends Instanced { pointsBuffer: pBuffer, travelBuffer: tBuffer, instancedCount: iCount, - } = updateBuffer(object, false, SEGMENT_NUM); + } = updateBuffer( + object, + false, + SEGMENT_NUM, + this.calcSubpathIndex(object), + ); instancedCount = iCount; // Can't use interleaved buffer here, we should spread them like: @@ -388,6 +442,7 @@ export function updateBuffer( object: DisplayObject, needEarcut = false, segmentNum?: number, + subPathIndex = 0, ) { const { lineCap, lineJoin } = object.parsedStyle as ParsedBaseStyleProps; let { defX, defY } = object.parsedStyle; @@ -662,10 +717,7 @@ export function updateBuffer( }); if (needEarcut) { - const pointsBuffer = points.reduce((prev, cur) => { - prev.push(...cur); - return prev; - }, []); + const pointsBuffer = points[subPathIndex]; // use earcut for triangulation triangles = earcut(pointsBuffer, [], 2); return { @@ -690,73 +742,60 @@ export function updateBuffer( endJoint = JOINT_TYPE.JOINT_CAP_SQUARE; } - let j = (Math.round(0 / stridePoints) + 2) * strideFloats; - return points - .map((points) => { - // const needDash = !isNil(lineDash); - let dist = 0; - const pointsBuffer: number[] = []; - const travelBuffer: number[] = []; - for (let i = 0; i < points.length; i += stridePoints) { - // calc travel - // if (needDash) { - if (i > 1) { - dist += Math.sqrt( - Math.pow(points[i] - points[i - 2], 2) + - Math.pow(points[i + 1] - points[i + 1 - 2], 2), - ); - } - travelBuffer.push(dist); - // } else { - // travelBuffer.push(0); - // } - - pointsBuffer[j++] = points[i]; - pointsBuffer[j++] = points[i + 1]; - pointsBuffer[j] = jointType; - if (i == 0 && capType !== JOINT_TYPE.CAP_ROUND) { - pointsBuffer[j] += capType; - } - if (i + stridePoints * 2 >= points.length) { - pointsBuffer[j] += endJoint - jointType; - } else if (i + stridePoints >= points.length) { - pointsBuffer[j] = 0; - } - j++; + const subPath = points[subPathIndex]; + { + const points = subPath; + let j = (Math.round(0 / stridePoints) + 2) * strideFloats; + // const needDash = !isNil(lineDash); + let dist = 0; + const pointsBuffer: number[] = []; + const travelBuffer: number[] = []; + for (let i = 0; i < points.length; i += stridePoints) { + // calc travel + // if (needDash) { + if (i > 1) { + dist += Math.sqrt( + Math.pow(points[i] - points[i - 2], 2) + + Math.pow(points[i + 1] - points[i + 1 - 2], 2), + ); } - pointsBuffer[j++] = points[points.length - 4]; - pointsBuffer[j++] = points[points.length - 3]; - pointsBuffer[j++] = 0; - pointsBuffer[0] = points[0]; - pointsBuffer[1] = points[1]; - pointsBuffer[2] = 0; - pointsBuffer[3] = points[2]; - pointsBuffer[4] = points[3]; - pointsBuffer[5] = capType === JOINT_TYPE.CAP_ROUND ? capType : 0; - - const instancedCount = Math.round(points.length / stridePoints); - - return { - pointsBuffer, - travelBuffer, - triangles, - instancedCount, - }; - }) - .reduce( - (prev, cur) => { - prev.pointsBuffer.push(...cur.pointsBuffer); - prev.travelBuffer.push(...cur.travelBuffer); - prev.instancedCount += cur.instancedCount; - return prev; - }, - { - pointsBuffer: [], - travelBuffer: [], - triangles, - instancedCount: 0, - }, - ); + travelBuffer.push(dist); + // } else { + // travelBuffer.push(0); + // } + + pointsBuffer[j++] = points[i]; + pointsBuffer[j++] = points[i + 1]; + pointsBuffer[j] = jointType; + if (i == 0 && capType !== JOINT_TYPE.CAP_ROUND) { + pointsBuffer[j] += capType; + } + if (i + stridePoints * 2 >= points.length) { + pointsBuffer[j] += endJoint - jointType; + } else if (i + stridePoints >= points.length) { + pointsBuffer[j] = 0; + } + j++; + } + pointsBuffer[j++] = points[points.length - 4]; + pointsBuffer[j++] = points[points.length - 3]; + pointsBuffer[j++] = 0; + pointsBuffer[0] = points[0]; + pointsBuffer[1] = points[1]; + pointsBuffer[2] = 0; + pointsBuffer[3] = points[2]; + pointsBuffer[4] = points[3]; + pointsBuffer[5] = capType === JOINT_TYPE.CAP_ROUND ? capType : 0; + + const instancedCount = Math.round(points.length / stridePoints); + + return { + pointsBuffer, + travelBuffer, + triangles, + instancedCount, + }; + } } function getJointType(lineJoin: CanvasLineJoin) { diff --git a/packages/g-plugin-device-renderer/src/meshes/Mesh.ts b/packages/g-plugin-device-renderer/src/drawcalls/Mesh.ts similarity index 96% rename from packages/g-plugin-device-renderer/src/meshes/Mesh.ts rename to packages/g-plugin-device-renderer/src/drawcalls/Mesh.ts index 329f8ef0e..8a74945b6 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Mesh.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/Mesh.ts @@ -2,7 +2,7 @@ import type { DisplayObject } from '@antv/g-lite'; import { Shape } from '@antv/g-lite'; import type { Mesh } from '../Mesh'; import { Instanced } from './Instanced'; -export class MeshMesh extends Instanced { +export class MeshDrawcall extends Instanced { protected lightReceived = true; shouldMerge(object: DisplayObject, index: number) { diff --git a/packages/g-plugin-device-renderer/src/meshes/SDF.ts b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts similarity index 99% rename from packages/g-plugin-device-renderer/src/meshes/SDF.ts rename to packages/g-plugin-device-renderer/src/drawcalls/SDF.ts index a6a64a2a6..b84358f10 100644 --- a/packages/g-plugin-device-renderer/src/meshes/SDF.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts @@ -33,7 +33,7 @@ const SDF_Shape: string[] = [Shape.CIRCLE, Shape.ELLIPSE, Shape.RECT]; * Use SDF to render 2D shapes, eg. circle, ellipse. * Use less triangles(2) and vertices compared with normal triangulation. */ -export class SDFMesh extends Instanced { +export class SDFDrawcall extends Instanced { shouldMerge(object: DisplayObject, index: number) { const shouldMerge = super.shouldMerge(object, index); diff --git a/packages/g-plugin-device-renderer/src/meshes/Text.ts b/packages/g-plugin-device-renderer/src/drawcalls/Text.ts similarity index 90% rename from packages/g-plugin-device-renderer/src/meshes/Text.ts rename to packages/g-plugin-device-renderer/src/drawcalls/Text.ts index ba18add77..7dc540661 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Text.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/Text.ts @@ -4,7 +4,7 @@ import type { Text as TextShape, Tuple4Number, } from '@antv/g-lite'; -import { isCSSRGB, runtime } from '@antv/g-lite'; +import { isCSSRGB } from '@antv/g-lite'; import { mat4 } from 'gl-matrix'; import { CullMode, Format, VertexBufferFrequency } from '../platform'; import { RENDER_ORDER_SCALE } from '../renderer/Batch'; @@ -23,6 +23,7 @@ import { packUint8ToFloat } from '../utils/compression'; import { LightPool } from '../LightPool'; import { TexturePool } from '../TexturePool'; import { RenderHelper } from '../render'; +import { BatchContext } from '../renderer'; enum TextVertexAttributeBufferIndex { INSTANCED = VertexAttributeBufferIndex.POSITION + 1, @@ -43,8 +44,8 @@ export enum TextUniform { HAS_STROKE = 'u_HasStroke', } -export class TextMesh extends Instanced { - private glyphManager = new GlyphManager(); +export class TextDrawcall extends Instanced { + private glyphManager: GlyphManager; private packedBufferObjectMap = new WeakMap< DisplayObject, @@ -60,9 +61,21 @@ export class TextMesh extends Instanced { protected texturePool: TexturePool, protected lightPool: LightPool, object: DisplayObject, + drawcallCtors: (new (..._: any) => Instanced)[], + index: number, + context: BatchContext, ) { - super(renderHelper, texturePool, lightPool, object); + super( + renderHelper, + texturePool, + lightPool, + object, + drawcallCtors, + index, + context, + ); this.fontHash = this.calcFontHash(object); + this.glyphManager = new GlyphManager(this.context); } private calcFontHash(object: DisplayObject) { @@ -124,7 +137,7 @@ export class TextMesh extends Instanced { linePositionY = 0; } else if (textBaseline === 'alphabetic') { linePositionY = -height + lineHeight * 0.25; - if (!runtime.enableCSSParsing) { + if (!this.context.enableCSSParsing) { linePositionY = -height; } // linePositionY = -height + fontProperties.ascent; @@ -387,30 +400,30 @@ export class TextMesh extends Instanced { const [start, end] = this.packedBufferObjectMap.get(object); const sliced = vertice.slice(start, end); for (let i = 0; i < end - start; i += bytes) { - if (name === 'modelMatrix') { - sliced[i + 0] = modelMatrix[0]; - sliced[i + 1] = modelMatrix[1]; - sliced[i + 2] = modelMatrix[2]; - sliced[i + 3] = modelMatrix[3]; - sliced[i + 4] = modelMatrix[4]; - sliced[i + 5] = modelMatrix[5]; - sliced[i + 6] = modelMatrix[6]; - sliced[i + 7] = modelMatrix[7]; - sliced[i + 8] = modelMatrix[8]; - sliced[i + 9] = modelMatrix[9]; - sliced[i + 10] = modelMatrix[10]; - sliced[i + 11] = modelMatrix[11]; - sliced[i + 12] = modelMatrix[12]; - sliced[i + 13] = modelMatrix[13]; - sliced[i + 14] = modelMatrix[14]; - sliced[i + 15] = modelMatrix[15]; - } else if (name === 'fill') { - sliced[i + 16] = packUint8ToFloat(fillColor[0], fillColor[1]); - sliced[i + 17] = packUint8ToFloat(fillColor[2], fillColor[3]); - } else if (name === 'stroke') { - sliced[i + 18] = packUint8ToFloat(strokeColor[0], strokeColor[1]); - sliced[i + 19] = packUint8ToFloat(strokeColor[2], strokeColor[3]); - } + // if (name === 'modelMatrix') { + sliced[i + 0] = modelMatrix[0]; + sliced[i + 1] = modelMatrix[1]; + sliced[i + 2] = modelMatrix[2]; + sliced[i + 3] = modelMatrix[3]; + sliced[i + 4] = modelMatrix[4]; + sliced[i + 5] = modelMatrix[5]; + sliced[i + 6] = modelMatrix[6]; + sliced[i + 7] = modelMatrix[7]; + sliced[i + 8] = modelMatrix[8]; + sliced[i + 9] = modelMatrix[9]; + sliced[i + 10] = modelMatrix[10]; + sliced[i + 11] = modelMatrix[11]; + sliced[i + 12] = modelMatrix[12]; + sliced[i + 13] = modelMatrix[13]; + sliced[i + 14] = modelMatrix[14]; + sliced[i + 15] = modelMatrix[15]; + // } else if (name === 'fill') { + sliced[i + 16] = packUint8ToFloat(fillColor[0], fillColor[1]); + sliced[i + 17] = packUint8ToFloat(fillColor[2], fillColor[3]); + // } else if (name === 'stroke') { + sliced[i + 18] = packUint8ToFloat(strokeColor[0], strokeColor[1]); + sliced[i + 19] = packUint8ToFloat(strokeColor[2], strokeColor[3]); + // } sliced[i + 20] = opacity; sliced[i + 21] = fillOpacity; sliced[i + 22] = strokeOpacity; diff --git a/packages/g-plugin-device-renderer/src/meshes/index.ts b/packages/g-plugin-device-renderer/src/drawcalls/index.ts similarity index 100% rename from packages/g-plugin-device-renderer/src/meshes/index.ts rename to packages/g-plugin-device-renderer/src/drawcalls/index.ts diff --git a/packages/g-plugin-device-renderer/src/meshes/symbol/AlphaImage.ts b/packages/g-plugin-device-renderer/src/drawcalls/symbol/AlphaImage.ts similarity index 100% rename from packages/g-plugin-device-renderer/src/meshes/symbol/AlphaImage.ts rename to packages/g-plugin-device-renderer/src/drawcalls/symbol/AlphaImage.ts diff --git a/packages/g-plugin-device-renderer/src/meshes/symbol/GlyphAtlas.ts b/packages/g-plugin-device-renderer/src/drawcalls/symbol/GlyphAtlas.ts similarity index 100% rename from packages/g-plugin-device-renderer/src/meshes/symbol/GlyphAtlas.ts rename to packages/g-plugin-device-renderer/src/drawcalls/symbol/GlyphAtlas.ts diff --git a/packages/g-plugin-device-renderer/src/meshes/symbol/GlyphManager.ts b/packages/g-plugin-device-renderer/src/drawcalls/symbol/GlyphManager.ts similarity index 94% rename from packages/g-plugin-device-renderer/src/meshes/symbol/GlyphManager.ts rename to packages/g-plugin-device-renderer/src/drawcalls/symbol/GlyphManager.ts index 3bf058850..2281ae49f 100644 --- a/packages/g-plugin-device-renderer/src/meshes/symbol/GlyphManager.ts +++ b/packages/g-plugin-device-renderer/src/drawcalls/symbol/GlyphManager.ts @@ -1,4 +1,4 @@ -import { CanvasLike } from '@antv/g-lite'; +import { CanvasLike, GlobalRuntime } from '@antv/g-lite'; import type { Device, Texture } from '../../platform'; import { Format, makeTextureDescriptor2D } from '../../platform'; import { TinySDF } from '../../utils'; @@ -46,6 +46,8 @@ export class GlyphManager { private glyphMap: Record> = {}; private glyphAtlasTexture: Texture; + constructor(private runtime: GlobalRuntime) {} + getMap() { return this.glyphMap; } @@ -191,16 +193,19 @@ export class GlyphManager { // 创建 SDF sdfGenerator = this.sdfGeneratorCache[fontStack] = // TODO: use OffscreenCanvas in TextService - new TinySDF({ - canvas, - fontSize, - fontFamily, - fontWeight, - fontStyle, - buffer, - radius, - cutoff, - }); + new TinySDF( + { + canvas, + fontSize, + fontFamily, + fontWeight, + fontStyle, + buffer, + radius, + cutoff, + }, + this.runtime, + ); } if (!this.textMetricsCache[fontStack]) { diff --git a/packages/g-plugin-device-renderer/src/meshes/symbol/SymbolQuad.ts b/packages/g-plugin-device-renderer/src/drawcalls/symbol/SymbolQuad.ts similarity index 100% rename from packages/g-plugin-device-renderer/src/meshes/symbol/SymbolQuad.ts rename to packages/g-plugin-device-renderer/src/drawcalls/symbol/SymbolQuad.ts diff --git a/packages/g-plugin-device-renderer/src/index.ts b/packages/g-plugin-device-renderer/src/index.ts index 12f21111d..2977ea385 100644 --- a/packages/g-plugin-device-renderer/src/index.ts +++ b/packages/g-plugin-device-renderer/src/index.ts @@ -21,13 +21,17 @@ import { } from './renderer'; import { RenderGraphPlugin } from './RenderGraphPlugin'; import { TexturePool } from './TexturePool'; -import { RendererParameters, ToneMapping } from './interfaces'; +import { + DeviceRendererPluginOptions, + RendererParameters, + ToneMapping, +} from './interfaces'; export * from './geometries'; export * from './interfaces'; export * from './lights'; export * from './materials'; -export * from './meshes'; +export * from './drawcalls'; export * from './passes'; export * from './platform'; export * from './render'; @@ -47,12 +51,16 @@ export class Plugin extends AbstractRendererPlugin { toneMappingExposure: 1, }; + constructor(private options: Partial = {}) { + super(); + } + init(runtime: GlobalRuntime): void { runtime.geometryUpdaterFactory[Shape.MESH] = new MeshUpdater(); const renderHelper = new RenderHelper(this.parameters); const lightPool = new LightPool(); - const texturePool = new TexturePool(this.context); + const texturePool = new TexturePool(this.context, runtime); const pickingIdGenerator = new PickingIdGenerator(); const circleRenderer = new CircleRenderer(); @@ -84,6 +92,7 @@ export class Plugin extends AbstractRendererPlugin { lightPool, texturePool, batchManager, + this.options, ); this.addRenderingPlugin(renderGraphPlugin); this.addRenderingPlugin( diff --git a/packages/g-plugin-device-renderer/src/interfaces.ts b/packages/g-plugin-device-renderer/src/interfaces.ts index f6cc99391..f6eabf9a6 100644 --- a/packages/g-plugin-device-renderer/src/interfaces.ts +++ b/packages/g-plugin-device-renderer/src/interfaces.ts @@ -17,3 +17,7 @@ export interface RendererParameters { toneMapping: ToneMapping; toneMappingExposure: number; } + +export interface DeviceRendererPluginOptions { + enableFXAA: boolean; +} diff --git a/packages/g-plugin-device-renderer/src/passes/FXAA.ts b/packages/g-plugin-device-renderer/src/passes/FXAA.ts index 78c41b669..b102dc31a 100644 --- a/packages/g-plugin-device-renderer/src/passes/FXAA.ts +++ b/packages/g-plugin-device-renderer/src/passes/FXAA.ts @@ -87,8 +87,7 @@ export function pushFXAAPass( ], // rendering a fullscreen triangle instead of quad // @see https://www.saschawillems.de/blog/2016/08/13/vulkan-tutorial-on-rendering-a-fullscreen-quad-without-buffers/ - // data: new Float32Array([-4, -4, 4, -4, 0, 4]), - data: new Float32Array([-1, -3, -1, 1, 3, -1]), + data: new Float32Array([1, 3, -3, -1, 1, -1]), }); geometry.vertexCount = 3; diff --git a/packages/g-plugin-device-renderer/src/renderer/Batch.ts b/packages/g-plugin-device-renderer/src/renderer/Batch.ts index d0d8e6f49..0c0ea6006 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Batch.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Batch.ts @@ -1,5 +1,5 @@ import type { DisplayObject } from '@antv/g-lite'; -import type { Instanced } from '../meshes/Instanced'; +import type { Instanced } from '../drawcalls/Instanced'; import type { RenderInst } from '../render/RenderInst'; /** @@ -16,14 +16,11 @@ export abstract class Batch { * describe render insts used in this draw call * eg. a Polygon with stroke will use 2 renderInsts */ - meshes: (typeof Instanced)[] = []; - private clipPathMeshCreated = false; + abstract getDrawcallCtors(object: DisplayObject): (typeof Instanced)[]; - shouldSubmitRenderInst(object: DisplayObject, index: number): boolean { - return true; - } + private clipPathMeshCreated = false; - beforeUploadUBO(renderInst: RenderInst, mesh: Instanced, index: number) {} + beforeUploadUBO(renderInst: RenderInst, mesh: Instanced) {} beforeInitMesh(mesh: Instanced) {} afterInitMesh(mesh: Instanced) {} diff --git a/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts b/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts index 2320b0197..ad26ec2aa 100644 --- a/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts +++ b/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts @@ -5,7 +5,7 @@ import type { } from '@antv/g-lite'; import type { Renderable3D } from '../components/Renderable3D'; import type { LightPool } from '../LightPool'; -import type { Instanced } from '../meshes/Instanced'; +import type { Instanced } from '../drawcalls/Instanced'; import type { Device } from '../platform'; import type { RenderInstList, RenderHelper } from '../render'; import type { TexturePool } from '../TexturePool'; @@ -31,7 +31,7 @@ export class BatchManager { /** * draw calls */ - private meshes: Instanced[] = []; + private drawcalls: Instanced[] = []; /** * update patches which can be merged before rendering @@ -54,9 +54,9 @@ export class BatchManager { this.updatePendingPatches(); } - this.meshes.forEach((mesh) => { + this.drawcalls.forEach((mesh) => { // init rendering service, create geometry & material - mesh.init(this.context); + mesh.init(); let objects = mesh.objects; if (mesh.clipPathTarget) { @@ -89,48 +89,54 @@ export class BatchManager { } add(object: DisplayObject) { - // @ts-ignore - const renderable3D = object.renderable3D as Renderable3D; - if (renderable3D && !renderable3D.meshes.length) { - const renderer = this.rendererFactory[object.nodeName]; + const renderable3D = (object as any).renderable3D as Renderable3D; + if (renderable3D && !renderable3D.drawcalls.length) { + const renderer = this.rendererFactory[object.nodeName] as Batch; if (renderer) { - renderer.meshes.forEach((meshTag, i) => { - renderable3D.meshes[i] = undefined; - const shouldSubmit = renderer.shouldSubmitRenderInst(object, i); - if (shouldSubmit) { - let existedMesh = this.meshes.find( - (mesh) => - meshTag === mesh.constructor && - mesh.index === i && - mesh.objects.length < mesh.maxInstances && - mesh.shouldMerge(object, i), - ); - if ( - !existedMesh || - existedMesh.key !== object.parsedStyle.batchKey - ) { - existedMesh = new meshTag( - this.renderHelper, - this.texturePool, - this.lightPool, - object, + // A complex Path can be splitted into multple sub paths. + renderer + .getDrawcallCtors(object) + .forEach( + ( + drawcallCtor: new (..._: any) => Instanced, + i: number, + drawcallCtors: (new (..._: any) => Instanced)[], + ) => { + let existedDrawcall = this.drawcalls.find( + (mesh) => + drawcallCtor === mesh.constructor && + mesh.index === i && + mesh.objects.length < mesh.maxInstances && + mesh.shouldMerge(object, i), ); - existedMesh.renderer = renderer; - existedMesh.index = i; - this.meshes.push(existedMesh); + if ( + !existedDrawcall || + existedDrawcall.key !== object.parsedStyle.batchKey + ) { + existedDrawcall = new drawcallCtor( + this.renderHelper, + this.texturePool, + this.lightPool, + object, + drawcallCtors, + i, + this.context, + ); + existedDrawcall.renderer = renderer; + this.drawcalls.push(existedDrawcall); - if (object.parsedStyle.batchKey) { - existedMesh.key = object.parsedStyle.batchKey; + if (object.parsedStyle.batchKey) { + existedDrawcall.key = object.parsedStyle.batchKey; + } } - } - if (existedMesh) { - existedMesh.objects.push(object); - renderable3D.meshes[i] = existedMesh; - existedMesh.geometryDirty = true; - } - } - }); + if (existedDrawcall) { + existedDrawcall.objects.push(object); + renderable3D.drawcalls[i] = existedDrawcall; + existedDrawcall.geometryDirty = true; + } + }, + ); } } } @@ -139,7 +145,7 @@ export class BatchManager { // @ts-ignore const renderable3D = object.renderable3D as Renderable3D; if (renderable3D) { - renderable3D.meshes.forEach((mesh) => { + renderable3D.drawcalls.forEach((mesh) => { if (mesh) { // remove from mesh const index = mesh.objects.indexOf(object); @@ -149,11 +155,11 @@ export class BatchManager { } if (mesh.objects.length === 0) { - this.meshes.splice(this.meshes.indexOf(mesh), 1); + this.drawcalls.splice(this.drawcalls.indexOf(mesh), 1); } } }); - renderable3D.meshes = []; + renderable3D.drawcalls = []; } } @@ -166,76 +172,82 @@ export class BatchManager { const renderable3D = (object as any).renderable3D as Renderable3D; const renderer = this.rendererFactory[object.nodeName] as Batch; if (renderer) { - renderer.meshes.forEach((meshCtor, i) => { - const shouldSubmit = renderer.shouldSubmitRenderInst(object, i); - let existedMesh = renderable3D.meshes.find( - (mesh) => mesh && mesh.index === i && mesh.constructor === meshCtor, + const drawcallCtors = renderer.getDrawcallCtors(object); + drawcallCtors.forEach((drawcallCtor, i, drawcallCtors) => { + let existedDrawcall = renderable3D.drawcalls.find( + (mesh) => + mesh && mesh.index === i && mesh.constructor === drawcallCtor, ); - // is this mesh already rendered in current displayobject? - if (shouldSubmit !== !!existedMesh) { - if (existedMesh) { - // remove from mesh - existedMesh.objects.splice(existedMesh.objects.indexOf(object), 1); - existedMesh.geometryDirty = true; - if (existedMesh.objects.length === 0) { - this.meshes.splice(this.meshes.indexOf(existedMesh), 1); - } - renderable3D.meshes[renderable3D.meshes.indexOf(existedMesh)] = - undefined; - } + if (!existedDrawcall) { + // Clear invalid drawcall. + existedDrawcall = renderable3D.drawcalls[i]; - if (shouldSubmit) { - // clear first - existedMesh = this.meshes.find( - (mesh) => - meshCtor === mesh.constructor && - mesh.index === i && - mesh.objects.length < mesh.maxInstances && - mesh.shouldMerge(object, i), + if (existedDrawcall) { + // remove from mesh + existedDrawcall.objects.splice( + existedDrawcall.objects.indexOf(object), + 1, ); + existedDrawcall.geometryDirty = true; - if (!existedMesh) { - // @ts-ignore - existedMesh = new meshCtor( - this.renderHelper, - this.texturePool, - this.lightPool, - object, - ); - existedMesh.renderer = renderer; - existedMesh.index = i; - existedMesh.init(this.context); - this.meshes.push(existedMesh); - } else { - existedMesh.geometryDirty = true; + if (existedDrawcall.objects.length === 0) { + this.drawcalls.splice(this.drawcalls.indexOf(existedDrawcall), 1); } + renderable3D.drawcalls[ + renderable3D.drawcalls.indexOf(existedDrawcall) + ] = undefined; + } - if (existedMesh) { - existedMesh.objects.push(object); - renderable3D.meshes[i] = existedMesh; - } + // We should create a new drawcall from scratch. + existedDrawcall = this.drawcalls.find( + (mesh) => + drawcallCtor === mesh.constructor && + mesh.index === i && + mesh.objects.length < mesh.maxInstances && + mesh.shouldMerge(object, i), + ); + + if (!existedDrawcall) { + // @ts-ignore + existedDrawcall = new drawcallCtor( + this.renderHelper, + this.texturePool, + this.lightPool, + object, + drawcallCtors, + i, + this.context, + ); + existedDrawcall.renderer = renderer; + existedDrawcall.init(); + this.drawcalls.push(existedDrawcall); + } else { + existedDrawcall.geometryDirty = true; } + + existedDrawcall.objects.push(object); + renderable3D.drawcalls[i] = existedDrawcall; } - if (shouldSubmit && existedMesh) { - if (existedMesh.inited && !existedMesh.geometryDirty) { - const shouldMerge = existedMesh.shouldMerge(object, i); + if (existedDrawcall) { + if (existedDrawcall.inited && !existedDrawcall.geometryDirty) { + const shouldMerge = existedDrawcall.shouldMerge(object, i); if (shouldMerge) { - const objectIdx = existedMesh.objects.indexOf(object); + const objectIdx = existedDrawcall.objects.indexOf(object); if (immediately) { object.parsedStyle[attributeName] = newValue; - existedMesh.updateAttribute( + existedDrawcall.updateAttribute( [object], objectIdx, attributeName, newValue, ); } else { - const patchKey = existedMesh.id + attributeName; + const patchKey = existedDrawcall.id + attributeName; if (!this.pendingUpdatePatches[patchKey]) { this.pendingUpdatePatches[patchKey] = { - instance: existedMesh, + instance: existedDrawcall, objectIndices: [], name: attributeName, value: newValue, @@ -255,26 +267,39 @@ export class BatchManager { this.remove(object); this.add(object); } - } else { - this.remove(object); - this.add(object); } } }); + + // Clear redundant drawcalls. + if (renderable3D.drawcalls.length > drawcallCtors.length) { + const drawcallNum = renderable3D.drawcalls.length; + for (let i = drawcallNum - 1; i >= drawcallCtors.length; i--) { + const existedDrawcall = renderable3D.drawcalls[i]; + + // remove from mesh + existedDrawcall.objects.splice( + existedDrawcall.objects.indexOf(object), + 1, + ); + existedDrawcall.geometryDirty = true; + + if (existedDrawcall.objects.length === 0) { + this.drawcalls.splice(this.drawcalls.indexOf(existedDrawcall), 1); + } + renderable3D.drawcalls.pop(); + } + } } } changeRenderOrder(object: DisplayObject, renderOrder: number) { // @ts-ignore const renderable3D = object.renderable3D as Renderable3D; - if (renderable3D && renderable3D.meshes.length) { - renderable3D.meshes.forEach((mesh) => { + if (renderable3D && renderable3D.drawcalls.length) { + renderable3D.drawcalls.forEach((mesh) => { if (mesh && mesh.inited && !mesh.geometryDirty) { - const shouldSubmit = mesh.renderer.shouldSubmitRenderInst( - object, - mesh.index, - ); - if (shouldSubmit && mesh.inited) { + if (mesh.inited) { mesh.changeRenderOrder(object, renderOrder); } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Circle.ts b/packages/g-plugin-device-renderer/src/renderer/Circle.ts index b4456ef3d..f974c57c7 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Circle.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Circle.ts @@ -3,30 +3,26 @@ import type { DisplayObject, ParsedCircleStyleProps, } from '@antv/g-lite'; -import { InstancedPathMesh, SDFMesh } from '../meshes'; +import { Instanced, InstancedPathDrawcall, SDFDrawcall } from '../drawcalls'; import { Batch } from './Batch'; /** * Use 2 meshes: * * SDF to draw fill & simple stroke if needed. - * * InstancedPathMesh to draw stroke separately. + * * InstancedPathDrawcall to draw stroke separately. */ export class CircleRenderer extends Batch { - meshes = [SDFMesh, InstancedPathMesh]; - - shouldSubmitRenderInst(object: DisplayObject, index: number) { - if (index === 0) { - const { fill } = object.parsedStyle as ParsedCircleStyleProps; - if ((fill as CSSRGB).isNone) { - return false; - } + getDrawcallCtors(object: DisplayObject) { + const drawcalls: (typeof Instanced)[] = []; + const { fill } = object.parsedStyle as ParsedCircleStyleProps; + if (!(fill as CSSRGB).isNone) { + drawcalls.push(SDFDrawcall); } - - if (index === 1) { - return this.needDrawStrokeSeparately(object); + if (this.needDrawStrokeSeparately(object)) { + drawcalls.push(InstancedPathDrawcall); } - return true; + return drawcalls; } /** diff --git a/packages/g-plugin-device-renderer/src/renderer/Group.ts b/packages/g-plugin-device-renderer/src/renderer/Group.ts index b5396ccd1..d97e282a5 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Group.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Group.ts @@ -1,9 +1,6 @@ -import type { DisplayObject } from '@antv/g-lite'; import { Batch } from './Batch'; export class GroupRenderer extends Batch { - meshes = []; - - shouldSubmitRenderInst(object: DisplayObject, index: number) { - return true; + getDrawcallCtors() { + return []; } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Image.ts b/packages/g-plugin-device-renderer/src/renderer/Image.ts index 2ae213083..bdb7ea642 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Image.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Image.ts @@ -1,10 +1,7 @@ -import type { DisplayObject } from '@antv/g-lite'; -import { ImageMesh } from '../meshes'; +import { ImageDrawcall } from '../drawcalls'; import { Batch } from './Batch'; export class ImageRenderer extends Batch { - meshes = [ImageMesh]; - - shouldSubmitRenderInst(object: DisplayObject, index: number) { - return true; + getDrawcallCtors() { + return [ImageDrawcall]; } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Line.ts b/packages/g-plugin-device-renderer/src/renderer/Line.ts index 4cdeb9309..38fa9df2b 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Line.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Line.ts @@ -1,5 +1,4 @@ -import type { DisplayObject } from '@antv/g-lite'; -import { InstancedLineMesh } from '../meshes'; +import { InstancedLineDrawcall } from '../drawcalls'; import { Batch } from './Batch'; /** @@ -10,9 +9,7 @@ import { Batch } from './Batch'; * TODO: joint & cap */ export class LineRenderer extends Batch { - meshes = [InstancedLineMesh]; - - shouldSubmitRenderInst(object: DisplayObject, index: number) { - return true; + getDrawcallCtors() { + return [InstancedLineDrawcall]; } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Mesh.ts b/packages/g-plugin-device-renderer/src/renderer/Mesh.ts index 0b1e66b8c..14b3e450d 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Mesh.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Mesh.ts @@ -1,5 +1,7 @@ -import { MeshMesh } from '../meshes'; +import { MeshDrawcall } from '../drawcalls'; import { Batch } from './Batch'; export class MeshRenderer extends Batch { - meshes = [MeshMesh]; + getDrawcallCtors() { + return [MeshDrawcall]; + } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Path.ts b/packages/g-plugin-device-renderer/src/renderer/Path.ts index 36f1bc4ff..586da087b 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Path.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Path.ts @@ -4,55 +4,53 @@ import type { CSSRGB, DisplayObject, ParsedBaseStyleProps } from '@antv/g-lite'; import { Shape } from '@antv/g-lite'; import { - InstancedFillMesh, - InstancedLineMesh, - InstancedPathMesh, -} from '../meshes'; + Instanced, + InstancedFillDrawcall, + InstancedLineDrawcall, + InstancedPathDrawcall, +} from '../drawcalls'; import { Batch } from './Batch'; /** * Use the following perf enhancements: - * * Downgrading the "simple" Path / Polyline to {@link InstancedLineMesh}, e.g. 'M 0 0 L 100 0' - * * Merge the Path into {@link InstancedPathMesh} which contains only one curve command, e.g 'M 0 0 Q 10 10 100 100' + * * Downgrading the "simple" Path / Polyline to {@link InstancedLineDrawcall}, e.g. 'M 0 0 L 100 0' + * * Merge the Path into {@link InstancedPathDrawcall} which contains only one curve command, e.g 'M 0 0 Q 10 10 100 100' * @see https://github.com/antvis/G/issues/1113 */ export class PathRenderer extends Batch { - meshes = [InstancedFillMesh, InstancedLineMesh, InstancedPathMesh]; + // meshes = [ + // InstancedFillDrawcall ?, + // (InstancedLineDrawcall | InstancedPathDrawcall) *, // sub paths + // ]; - shouldSubmitRenderInst(object: DisplayObject, index: number) { + getDrawcallCtors(object: DisplayObject) { const { fill, stroke, opacity, strokeOpacity, lineWidth } = object.parsedStyle as ParsedBaseStyleProps; const hasStroke = stroke && !(stroke as CSSRGB).isNone; - const isLine = InstancedLineMesh.isLine(object); + const subpathNum = InstancedPathDrawcall.calcSubpathNum(object); - object.renderable.proxyNodeName = isLine ? Shape.LINE : null; + const drawcalls: (typeof Instanced)[] = []; // Polyline don't need fill - if ( - index === 0 && - (object.nodeName === Shape.POLYLINE || (fill as CSSRGB).isNone) - ) { - return false; - } - - // use Line for simple Path - if (index === 1) { - return isLine; + if (!(object.nodeName === Shape.POLYLINE || (fill as CSSRGB).isNone)) { + for (let i = 0; i < subpathNum; i++) { + drawcalls.push(InstancedFillDrawcall); + } } - if (index === 2) { + for (let i = 0; i < subpathNum; i++) { if ( - isLine || - strokeOpacity === 0 || - opacity === 0 || - lineWidth === 0 || - !hasStroke + !(strokeOpacity === 0 || opacity === 0 || lineWidth === 0 || !hasStroke) ) { - return false; + const isLine = InstancedLineDrawcall.isLine(object, i); + if (isLine) { + drawcalls.push(InstancedLineDrawcall); + } else { + drawcalls.push(InstancedPathDrawcall); + } } - return true; } - return true; + return drawcalls; } } diff --git a/packages/g-plugin-device-renderer/src/renderer/Rect.ts b/packages/g-plugin-device-renderer/src/renderer/Rect.ts index b38788b8d..0aed8c15e 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Rect.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Rect.ts @@ -1,38 +1,42 @@ import type { CSSRGB, DisplayObject, ParsedRectStyleProps } from '@antv/g-lite'; -import { InstancedFillMesh, InstancedPathMesh, SDFMesh } from '../meshes'; +import { + Instanced, + InstancedFillDrawcall, + InstancedPathDrawcall, + SDFDrawcall, +} from '../drawcalls'; import { Batch } from './Batch'; /** * Use 2 meshes: - * * For simple Rect with fill & simple stroke, we use SDFMesh to draw which has a better performance. + * * For simple Rect with fill & simple stroke, we use SDFDrawcall to draw which has a better performance. * * FillMesh & LineMesh to draw rounded rect with different radius. */ export class RectRenderer extends Batch { - meshes = [SDFMesh, InstancedFillMesh, InstancedPathMesh]; + getDrawcallCtors(object: DisplayObject) { + const drawcalls: (typeof Instanced)[] = []; - shouldSubmitRenderInst(object: DisplayObject, index: number) { - const { radius } = object.parsedStyle as ParsedRectStyleProps; + const { fill, radius } = object.parsedStyle as ParsedRectStyleProps; const hasDifferentRadius = radius && radius.length && radius.some((r) => r !== radius[0]); - if (index === 0) { - const { fill } = object.parsedStyle as ParsedRectStyleProps; - if ((fill as CSSRGB).isNone || hasDifferentRadius) { - return false; - } + if (!((fill as CSSRGB).isNone || hasDifferentRadius)) { + drawcalls.push(SDFDrawcall); } - if (index === 1) { - return hasDifferentRadius; + if (hasDifferentRadius) { + drawcalls.push(InstancedFillDrawcall); } - if (index === 2) { - return hasDifferentRadius + if ( + hasDifferentRadius ? hasDifferentRadius - : this.needDrawStrokeSeparately(object); + : this.needDrawStrokeSeparately(object) + ) { + drawcalls.push(InstancedPathDrawcall); } - return true; + return drawcalls; } /** diff --git a/packages/g-plugin-device-renderer/src/renderer/Text.ts b/packages/g-plugin-device-renderer/src/renderer/Text.ts index f30f5dee3..d0f19490e 100644 --- a/packages/g-plugin-device-renderer/src/renderer/Text.ts +++ b/packages/g-plugin-device-renderer/src/renderer/Text.ts @@ -1,29 +1,34 @@ import type { CSSRGB, DisplayObject, ParsedTextStyleProps } from '@antv/g-lite'; -import type { Instanced } from '../meshes'; -import { TextMesh, TextUniform } from '../meshes'; +import type { Instanced } from '../drawcalls'; +import { TextDrawcall, TextUniform } from '../drawcalls'; import type { RenderInst } from '../render/RenderInst'; import { Batch } from './Batch'; +import { Renderable3D } from '../components/Renderable3D'; export class TextRenderer extends Batch { /** * one for fill, one for stroke */ - meshes = [TextMesh, TextMesh]; + getDrawcallCtors(object: DisplayObject) { + const drawcalls: (typeof Instanced)[] = []; - shouldSubmitRenderInst(object: DisplayObject, index: number) { const { stroke, lineWidth } = object.parsedStyle as ParsedTextStyleProps; const hasStroke = !!(stroke && !(stroke as CSSRGB).isNone && lineWidth); - if (!hasStroke && index === 0) { - // skip rendering stroke - return false; + if (hasStroke) { + drawcalls.push(TextDrawcall); } - return true; + + drawcalls.push(TextDrawcall); + return drawcalls; } - beforeUploadUBO(renderInst: RenderInst, mesh: Instanced, index: number) { + beforeUploadUBO(renderInst: RenderInst, mesh: Instanced) { + const drawcallNum = ((mesh.instance as any).renderable3D as Renderable3D) + .drawcalls.length; + mesh.material.setUniforms({ - [TextUniform.HAS_STROKE]: 1 - mesh.index, + [TextUniform.HAS_STROKE]: drawcallNum === 1 ? 0 : 1 - mesh.index, }); } } diff --git a/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts b/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts index e681171a4..55c4f0eea 100644 --- a/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts +++ b/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts @@ -2,7 +2,7 @@ * Borrow from https://github.com/mapbox/tiny-sdf */ -import { CanvasLike, runtime } from '@antv/g-lite'; +import { CanvasLike, GlobalRuntime } from '@antv/g-lite'; const INF = 1e20; @@ -29,7 +29,7 @@ export class TinySDF { private gridInner: Float64Array; private ctx: CanvasRenderingContext2D; - constructor(options: TinySDFOptions) { + constructor(options: TinySDFOptions, runtime: GlobalRuntime) { const { fontSize = 24, buffer = 3, diff --git a/packages/g-plugin-dragndrop/package.json b/packages/g-plugin-dragndrop/package.json index 350663c02..c2d6fb5a1 100644 --- a/packages/g-plugin-dragndrop/package.json +++ b/packages/g-plugin-dragndrop/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "publishConfig": { diff --git a/packages/g-plugin-html-renderer/package.json b/packages/g-plugin-html-renderer/package.json index 5de139e5f..18e0545b7 100644 --- a/packages/g-plugin-html-renderer/package.json +++ b/packages/g-plugin-html-renderer/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts index 4ec7200ce..a2dd6304a 100644 --- a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts +++ b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts @@ -6,7 +6,6 @@ import { MutationEvent, RenderingPlugin, RenderingPluginContext, - runtime, } from '@antv/g-lite'; import { CanvasEvent, @@ -77,7 +76,7 @@ export class HTMLRenderingPlugin implements RenderingPlugin { setTransform(object, $el); - runtime.nativeHTMLMap.set($el, object); + this.context.nativeHTMLMap.set($el, object); } }; @@ -87,7 +86,7 @@ export class HTMLRenderingPlugin implements RenderingPlugin { const $el = this.getOrCreateEl(object); if ($el) { $el.remove(); - runtime.nativeHTMLMap.delete($el); + this.context.nativeHTMLMap.delete($el); } // const existedId = this.getId(object); @@ -257,23 +256,25 @@ export class HTMLRenderingPlugin implements RenderingPlugin { ] = `${transformOrigin[0].value} ${transformOrigin[1].value}`; break; case 'width': - if (runtime.enableCSSParsing) { + if (this.context.enableCSSParsing) { const width = object.computedStyleMap().get('width'); $el.style.width = width.toString(); } else { const { width } = object.parsedStyle; - $el.style.width = isNumber(width) ? `${width}px` : width.toString(); + $el.style.width = isNumber(width) + ? `${width}px` + : (width as string).toString(); } break; case 'height': - if (runtime.enableCSSParsing) { + if (this.context.enableCSSParsing) { const height = object.computedStyleMap().get('height'); $el.style.height = height.toString(); } else { const { height } = object.parsedStyle; $el.style.height = isNumber(height) ? `${height}px` - : height.toString(); + : (height as string).toString(); } break; case 'zIndex': diff --git a/packages/g-plugin-image-loader/package.json b/packages/g-plugin-image-loader/package.json index a1f311af9..297d3d39d 100644 --- a/packages/g-plugin-image-loader/package.json +++ b/packages/g-plugin-image-loader/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-rough-canvas-renderer/package.json b/packages/g-plugin-rough-canvas-renderer/package.json index c3dee947f..bcf570dad 100644 --- a/packages/g-plugin-rough-canvas-renderer/package.json +++ b/packages/g-plugin-rough-canvas-renderer/package.json @@ -40,7 +40,7 @@ "dependencies": { "@antv/g-canvas": "workspace:*", "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "roughjs": "^4.5.2", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-rough-svg-renderer/package.json b/packages/g-plugin-rough-svg-renderer/package.json index 87a1e4799..2f7f8ce69 100644 --- a/packages/g-plugin-rough-svg-renderer/package.json +++ b/packages/g-plugin-rough-svg-renderer/package.json @@ -40,7 +40,7 @@ "dependencies": { "@antv/g-lite": "workspace:*", "@antv/g-svg": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "roughjs": "^4.5.2", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-rough-svg-renderer/src/RoughElementLifeCycleContribution.ts b/packages/g-plugin-rough-svg-renderer/src/RoughElementLifeCycleContribution.ts index 56bb85b98..e76ff1de4 100644 --- a/packages/g-plugin-rough-svg-renderer/src/RoughElementLifeCycleContribution.ts +++ b/packages/g-plugin-rough-svg-renderer/src/RoughElementLifeCycleContribution.ts @@ -1,6 +1,7 @@ import type { CanvasContext, DisplayObject, + GlobalRuntime, ParsedCircleStyleProps, ParsedEllipseStyleProps, ParsedLineStyleProps, @@ -18,7 +19,7 @@ import { generateRoughOptions, SUPPORTED_ROUGH_OPTIONS } from './util'; export class RoughElementLifeCycleContribution implements SVGRenderer.ElementLifeCycleContribution { - constructor(private context: CanvasContext) {} + constructor(private context: CanvasContext, private runtime: GlobalRuntime) {} createElement( object: DisplayObject, @@ -96,6 +97,7 @@ export class RoughElementLifeCycleContribution $el, parsedStyle, object as Text, + this.runtime, ); break; } diff --git a/packages/g-plugin-svg-renderer/package.json b/packages/g-plugin-svg-renderer/package.json index 05ba0d507..ccb53c4cc 100644 --- a/packages/g-plugin-svg-renderer/package.json +++ b/packages/g-plugin-svg-renderer/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-svg-renderer/src/DefaultElementLifeCycleContribution.ts b/packages/g-plugin-svg-renderer/src/DefaultElementLifeCycleContribution.ts index 5cd9c5a47..6f7959261 100644 --- a/packages/g-plugin-svg-renderer/src/DefaultElementLifeCycleContribution.ts +++ b/packages/g-plugin-svg-renderer/src/DefaultElementLifeCycleContribution.ts @@ -1,4 +1,9 @@ -import type { CanvasContext, DisplayObject, Text } from '@antv/g-lite'; +import type { + CanvasContext, + DisplayObject, + GlobalRuntime, + Text, +} from '@antv/g-lite'; import { Shape } from '@antv/g-lite'; import { updateImageElementAttribute, @@ -97,7 +102,7 @@ export const SHAPE_UPDATE_DEPS: Record = { export class DefaultElementLifeCycleContribution implements ElementLifeCycleContribution { - constructor(private context: CanvasContext) {} + constructor(private context: CanvasContext, private runtime: GlobalRuntime) {} createElement( object: DisplayObject, @@ -147,7 +152,12 @@ export class DefaultElementLifeCycleContribution break; } case Shape.TEXT: { - updateTextElementAttribute($el, parsedStyle, object as Text); + updateTextElementAttribute( + $el, + parsedStyle, + object as Text, + this.runtime, + ); break; } } diff --git a/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts b/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts index 10e430d78..5bc08da94 100644 --- a/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts +++ b/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts @@ -8,7 +8,6 @@ import { RenderingPlugin, RenderingPluginContext, ContextService, - runtime, } from '@antv/g-lite'; import { ElementEvent, @@ -466,6 +465,7 @@ export class SVGRendererPlugin implements RenderingPlugin { } private updateAttribute(object: DisplayObject, attributes: string[]) { + const { enableCSSParsing } = this.context; const { document } = this.context.config; // @ts-ignore @@ -499,7 +499,7 @@ export class SVGRendererPlugin implements RenderingPlugin { // update common attributes attributes.forEach((name) => { const usedName = SVG_ATTR_MAP[name]; - const computedValue = runtime.enableCSSParsing + const computedValue = enableCSSParsing ? computedStyle[name] : parsedStyle[name]; const computedValueStr = @@ -512,7 +512,7 @@ export class SVGRendererPlugin implements RenderingPlugin { if ( !usedName || ((nodeName === Shape.GROUP || object.isCustomElement) && - !runtime.enableCSSParsing && + !enableCSSParsing && (inherited || usedName === 'fill' || usedName === 'stroke')) ) { return; @@ -552,7 +552,7 @@ export class SVGRendererPlugin implements RenderingPlugin { this, ); } - } else if (runtime.enableCSSParsing && inherited) { + } else if (enableCSSParsing && inherited) { // use computed value // update `visibility` on if ( diff --git a/packages/g-plugin-svg-renderer/src/index.ts b/packages/g-plugin-svg-renderer/src/index.ts index 12d140264..d2c6dbdfa 100644 --- a/packages/g-plugin-svg-renderer/src/index.ts +++ b/packages/g-plugin-svg-renderer/src/index.ts @@ -1,4 +1,4 @@ -import { AbstractRendererPlugin } from '@antv/g-lite'; +import { AbstractRendererPlugin, GlobalRuntime } from '@antv/g-lite'; import { isNil } from '@antv/util'; import { ElementSVG } from './components/ElementSVG'; import { DefaultElementLifeCycleContribution } from './DefaultElementLifeCycleContribution'; @@ -20,28 +20,37 @@ export class Plugin extends AbstractRendererPlugin { super(); } - init(): void { + init(runtime: GlobalRuntime): void { const { outputSVGElementId, outputSVGElementName } = this.options; const defElementManager = new DefElementManager(this.context); // default implementation - const defaultElementLifeCycleContribution = new DefaultElementLifeCycleContribution( - this.context, - ); + const defaultElementLifeCycleContribution = + new DefaultElementLifeCycleContribution(this.context, runtime); // @ts-ignore - this.context.defaultElementLifeCycleContribution = defaultElementLifeCycleContribution; + this.context.defaultElementLifeCycleContribution = + defaultElementLifeCycleContribution; // @ts-ignore - this.context.SVGElementLifeCycleContribution = defaultElementLifeCycleContribution; + this.context.SVGElementLifeCycleContribution = + defaultElementLifeCycleContribution; const SVGRendererPluginOptions: SVGRendererPluginOptions = { - outputSVGElementId: !isNil(outputSVGElementId) ? !!outputSVGElementId : true, - outputSVGElementName: !isNil(outputSVGElementName) ? !!outputSVGElementName : true, + outputSVGElementId: !isNil(outputSVGElementId) + ? !!outputSVGElementId + : true, + outputSVGElementName: !isNil(outputSVGElementName) + ? !!outputSVGElementName + : true, }; this.addRenderingPlugin( // @ts-ignore - new SVGRendererPlugin(SVGRendererPluginOptions, defElementManager, this.context), + new SVGRendererPlugin( + SVGRendererPluginOptions, + defElementManager, + this.context, + ), ); } destroy(): void { diff --git a/packages/g-plugin-svg-renderer/src/shapes/paths/Text.ts b/packages/g-plugin-svg-renderer/src/shapes/paths/Text.ts index 951ea869f..3ec8478a0 100644 --- a/packages/g-plugin-svg-renderer/src/shapes/paths/Text.ts +++ b/packages/g-plugin-svg-renderer/src/shapes/paths/Text.ts @@ -1,5 +1,4 @@ -import type { ParsedTextStyleProps, Text } from '@antv/g-lite'; -import { runtime } from '@antv/g-lite'; +import type { GlobalRuntime, ParsedTextStyleProps, Text } from '@antv/g-lite'; import { TEXT_PATH_PREFIX } from '../../SVGRendererPlugin'; import { createSVGElement } from '../../utils/dom'; import { convertHTML } from '../../utils/format'; @@ -18,6 +17,7 @@ export function updateTextElementAttribute( $el: SVGElement, parsedStyle: ParsedTextStyleProps, text: Text, + runtime: GlobalRuntime, ) { const { lineWidth, diff --git a/packages/g-plugin-webgl-device/package.json b/packages/g-plugin-webgl-device/package.json index 03aaf0b15..ac157f34b 100644 --- a/packages/g-plugin-webgl-device/package.json +++ b/packages/g-plugin-webgl-device/package.json @@ -41,7 +41,7 @@ "dependencies": { "@antv/g-lite": "workspace:*", "@antv/g-plugin-device-renderer": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "eventemitter3": "^5.0.1", "tslib": "^2.5.3" }, diff --git a/packages/g-plugin-webgpu-device/package.json b/packages/g-plugin-webgpu-device/package.json index cb22fe0ea..29391e88c 100644 --- a/packages/g-plugin-webgpu-device/package.json +++ b/packages/g-plugin-webgpu-device/package.json @@ -41,7 +41,7 @@ "dependencies": { "@antv/g-lite": "workspace:*", "@antv/g-plugin-device-renderer": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "@webgpu/types": "^0.1.33", "eventemitter3": "^5.0.1", "tslib": "^2.5.3" diff --git a/packages/g-plugin-webgpu-device/src/WebGPUDeviceContribution.ts b/packages/g-plugin-webgpu-device/src/WebGPUDeviceContribution.ts index f964af383..5518d5ea2 100644 --- a/packages/g-plugin-webgpu-device/src/WebGPUDeviceContribution.ts +++ b/packages/g-plugin-webgpu-device/src/WebGPUDeviceContribution.ts @@ -1,19 +1,23 @@ -import { runtime } from '@antv/g-lite'; +import type { GlobalRuntime } from '@antv/g-lite'; import type { DeviceContribution } from '@antv/g-plugin-device-renderer'; import init, { glsl_compile } from '../../../rust/pkg/glsl_wgsl_compiler'; import type { WebGPUDeviceOptions } from './interfaces'; import { Device_WebGPU } from './platform/Device'; export class WebGPUDeviceContribution implements DeviceContribution { - constructor(private pluginOptions: Partial) {} + constructor( + private pluginOptions: Partial, + private runtime: GlobalRuntime, + ) {} async createSwapChain($canvas: HTMLCanvasElement) { - if ((runtime.globalThis.navigator as any).gpu === undefined) return null; + if ((this.runtime.globalThis.navigator as any).gpu === undefined) + return null; let adapter = null; try { adapter = await ( - runtime.globalThis.navigator as any + this.runtime.globalThis.navigator as any ).gpu.requestAdapter(); } catch (e) { console.log(e); diff --git a/packages/g-plugin-webgpu-device/src/index.ts b/packages/g-plugin-webgpu-device/src/index.ts index e01cea79b..408e0db71 100644 --- a/packages/g-plugin-webgpu-device/src/index.ts +++ b/packages/g-plugin-webgpu-device/src/index.ts @@ -1,4 +1,4 @@ -import { AbstractRendererPlugin } from '@antv/g-lite'; +import { AbstractRendererPlugin, GlobalRuntime } from '@antv/g-lite'; import type { WebGPUDeviceOptions } from './interfaces'; import { WebGPUDeviceContribution } from './WebGPUDeviceContribution'; export class Plugin extends AbstractRendererPlugin { @@ -7,11 +7,14 @@ export class Plugin extends AbstractRendererPlugin { super(); } - init(): void { - this.context.deviceContribution = new WebGPUDeviceContribution({ - shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm', - ...this.options, - }); + init(runtime: GlobalRuntime): void { + this.context.deviceContribution = new WebGPUDeviceContribution( + { + shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm', + ...this.options, + }, + runtime, + ); } destroy(): void { delete this.context.deviceContribution; diff --git a/packages/g-plugin-zdog-canvas-renderer/package.json b/packages/g-plugin-zdog-canvas-renderer/package.json index de2b75bec..a58ac3dcf 100644 --- a/packages/g-plugin-zdog-canvas-renderer/package.json +++ b/packages/g-plugin-zdog-canvas-renderer/package.json @@ -40,7 +40,7 @@ "dependencies": { "@antv/g-canvas": "workspace:*", "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3", "zdog": "^1.1.3" }, diff --git a/packages/g-plugin-zdog-svg-renderer/package.json b/packages/g-plugin-zdog-svg-renderer/package.json index 095f608bd..f46ae3ac2 100644 --- a/packages/g-plugin-zdog-svg-renderer/package.json +++ b/packages/g-plugin-zdog-svg-renderer/package.json @@ -41,7 +41,7 @@ "@antv/g-lite": "workspace:*", "@antv/g-plugin-svg-renderer": "workspace:*", "@antv/g-svg": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3", "zdog": "^1.1.3" }, diff --git a/packages/g-plugin-zdog-svg-renderer/src/ZdogElementLifeCycleContribution.ts b/packages/g-plugin-zdog-svg-renderer/src/ZdogElementLifeCycleContribution.ts index 91c4c3038..73e93a3b6 100644 --- a/packages/g-plugin-zdog-svg-renderer/src/ZdogElementLifeCycleContribution.ts +++ b/packages/g-plugin-zdog-svg-renderer/src/ZdogElementLifeCycleContribution.ts @@ -1,6 +1,7 @@ import type { CanvasContext, DisplayObject, + GlobalRuntime, Text, // ParsedCircleStyleProps, // ParsedEllipseStyleProps, @@ -16,7 +17,7 @@ import { SVGRenderer } from '@antv/g-svg'; export class ZdogElementLifeCycleContribution implements SVGRenderer.ElementLifeCycleContribution { - constructor(private context: CanvasContext) {} + constructor(private context: CanvasContext, private runtime: GlobalRuntime) {} createElement(object: DisplayObject): SVGElement { const { nodeName } = object; @@ -83,6 +84,7 @@ export class ZdogElementLifeCycleContribution $el, parsedStyle, object as Text, + this.runtime, ); break; } diff --git a/packages/g-svg/package.json b/packages/g-svg/package.json index 3730e59d0..9bdb49422 100644 --- a/packages/g-svg/package.json +++ b/packages/g-svg/package.json @@ -42,7 +42,7 @@ "@antv/g-plugin-dom-interaction": "workspace:*", "@antv/g-plugin-svg-picker": "workspace:*", "@antv/g-plugin-svg-renderer": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-web-animations-api/package.json b/packages/g-web-animations-api/package.json index 232f8c33e..f31492b6e 100644 --- a/packages/g-web-animations-api/package.json +++ b/packages/g-web-animations-api/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@antv/g-lite": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "publishConfig": { diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json index d22091611..7d2dd3891 100644 --- a/packages/g-webgl/package.json +++ b/packages/g-webgl/package.json @@ -44,7 +44,7 @@ "@antv/g-plugin-html-renderer": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", "@antv/g-plugin-webgl-device": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "tslib": "^2.5.3" }, "devDependencies": { diff --git a/packages/g-webgl/src/index.ts b/packages/g-webgl/src/index.ts index 3bec0061c..72922b886 100644 --- a/packages/g-webgl/src/index.ts +++ b/packages/g-webgl/src/index.ts @@ -14,13 +14,14 @@ interface WebGLRendererConfig extends RendererConfig { onContextLost: (e: Event) => void; onContextRestored: (e: Event) => void; onContextCreationError: (e: Event) => void; + enableFXAA: boolean; } export class Renderer extends AbstractRenderer { constructor(config?: Partial) { super(config); - const deviceRendererPlugin = new DeviceRenderer.Plugin(); + const deviceRendererPlugin = new DeviceRenderer.Plugin(config); this.registerPlugin(new ContextRegisterPlugin(deviceRendererPlugin)); this.registerPlugin(new ImageLoader.Plugin()); diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json index 906f121c6..149a62bcd 100644 --- a/packages/g-webgpu/package.json +++ b/packages/g-webgpu/package.json @@ -44,7 +44,7 @@ "@antv/g-plugin-html-renderer": "workspace:*", "@antv/g-plugin-image-loader": "workspace:*", "@antv/g-plugin-webgpu-device": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "@webgpu/types": "^0.1.6", "tslib": "^2.5.3" }, diff --git a/packages/g-webgpu/src/index.ts b/packages/g-webgpu/src/index.ts index 47dd5cd39..879ecbd1a 100644 --- a/packages/g-webgpu/src/index.ts +++ b/packages/g-webgpu/src/index.ts @@ -1,5 +1,4 @@ -import { ClipSpaceNearZ, RendererConfig } from '@antv/g-lite'; -import { AbstractRenderer } from '@antv/g-lite'; +import { AbstractRenderer, ClipSpaceNearZ, RendererConfig } from '@antv/g-lite'; import * as DeviceRenderer from '@antv/g-plugin-device-renderer'; import * as DomInteraction from '@antv/g-plugin-dom-interaction'; import * as HTMLRenderer from '@antv/g-plugin-html-renderer'; diff --git a/packages/react-g/package.json b/packages/react-g/package.json index 147c6aa48..e242a431f 100644 --- a/packages/react-g/package.json +++ b/packages/react-g/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@antv/g": "workspace:*", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "gl-matrix": "^3.4.3", "react-reconciler": "^0.26.2", "scheduler": "^0.20.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 11dcb4af2..09917bb4c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,8 +8,8 @@ importers: .: devDependencies: '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 '@changesets/cli': specifier: ^2.26.2 version: 2.26.2 @@ -161,8 +161,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -194,8 +194,8 @@ importers: specifier: workspace:* version: link:../g-plugin-image-loader '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -231,8 +231,8 @@ importers: specifier: workspace:* version: link:../g-plugin-image-loader '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 canvaskit-wasm: specifier: ^0.34.0 version: 0.34.0 @@ -250,8 +250,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -306,8 +306,8 @@ importers: specifier: workspace:* version: link:../g-math '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 d3-color: specifier: ^1.4.0 version: 1.4.0 @@ -343,8 +343,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -352,8 +352,8 @@ importers: packages/g-math: dependencies: '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -385,8 +385,8 @@ importers: specifier: workspace:* version: link:../g-plugin-mobile-interaction '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -425,8 +425,8 @@ importers: specifier: workspace:* version: link:../g-plugin-svg-renderer '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -459,8 +459,8 @@ importers: specifier: workspace:* version: link:../g-plugin-webgl-device '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -478,8 +478,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -557,8 +557,8 @@ importers: specifier: workspace:* version: link:../g-math '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -578,8 +578,8 @@ importers: specifier: workspace:* version: link:../g-plugin-canvas-renderer '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -602,8 +602,8 @@ importers: specifier: workspace:* version: link:../g-plugin-image-loader '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -623,8 +623,8 @@ importers: specifier: workspace:* version: link:../g-plugin-image-loader '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 canvaskit-wasm: specifier: ^0.34.0 version: 0.34.0 @@ -682,8 +682,8 @@ importers: specifier: workspace:* version: link:../g-shader-components '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 '@webgpu/types': specifier: ^0.1.6 version: 0.1.33 @@ -731,8 +731,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -755,8 +755,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -770,8 +770,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -828,8 +828,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 roughjs: specifier: ^4.5.2 version: 4.5.2 @@ -846,8 +846,8 @@ importers: specifier: workspace:* version: link:../g-svg '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 roughjs: specifier: ^4.5.2 version: 4.5.2 @@ -873,8 +873,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -891,8 +891,8 @@ importers: specifier: workspace:* version: link:../g-plugin-device-renderer '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 eventemitter3: specifier: ^5.0.1 version: 5.0.1 @@ -909,8 +909,8 @@ importers: specifier: workspace:* version: link:../g-plugin-device-renderer '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 '@webgpu/types': specifier: ^0.1.33 version: 0.1.33 @@ -942,8 +942,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -967,8 +967,8 @@ importers: specifier: workspace:* version: link:../g-svg '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -1001,8 +1001,8 @@ importers: specifier: workspace:* version: link:../g-plugin-svg-renderer '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -1017,8 +1017,8 @@ importers: specifier: workspace:* version: link:../g-lite '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -1066,8 +1066,8 @@ importers: specifier: workspace:* version: link:../g-plugin-webgl-device '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 tslib: specifier: ^2.5.3 version: 2.5.3 @@ -1100,8 +1100,8 @@ importers: specifier: workspace:* version: link:../g-plugin-webgpu-device '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 '@webgpu/types': specifier: ^0.1.6 version: 0.1.33 @@ -1122,8 +1122,8 @@ importers: specifier: workspace:* version: link:../g '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 gl-matrix: specifier: ^3.4.3 version: 3.4.3 @@ -1171,11 +1171,11 @@ importers: specifier: ^1.8.79 version: link:../packages/react-g '@antv/util': - specifier: ^3.3.1 - version: 3.3.1(gl-matrix@3.4.3) + specifier: ^3.3.4 + version: 3.3.4 '@antv/webgpu-graph': specifier: ^1.0.0 - version: 1.0.0(@antv/g-lite@packages+g-lite)(@antv/g-webgpu@packages+g-webgpu)(gl-matrix@3.4.3) + version: 1.0.0(@antv/g-lite@packages+g-lite)(@antv/g-webgpu@packages+g-webgpu) '@naoak/workerize-transferable': specifier: ^0.1.0 version: 0.1.0(workerize-loader@2.0.2) @@ -1565,7 +1565,7 @@ packages: '@antv/g-lite': ^1.0.0 dependencies: '@antv/g-lite': 1.2.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 gl-matrix: 3.4.3 dev: false @@ -1609,7 +1609,7 @@ packages: resolution: {integrity: sha512-NxSqvhK62fvm+r/SPM1CP0HdUl2mJarV6mM/l77paCgFaEMpU+1veWdF97N1cUQ8QFOmgaodr5aiZBz0rkn8ag==} dependencies: '@antv/g-math': 2.0.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 d3-color: 1.4.0 eventemitter3: 5.0.1 gl-matrix: 3.4.3 @@ -1627,7 +1627,7 @@ packages: /@antv/g-math@2.0.1: resolution: {integrity: sha512-Y1DREalYzUMaglD0m6V9s9UxsseXgSmwNA3l9zDHRH1CXDLcvtmrku+DQM9oCgPtbPWV43AdyAYoNT3WLyL/WA==} dependencies: - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 gl-matrix: 3.4.3 tslib: 2.5.3 dev: false @@ -1639,7 +1639,7 @@ packages: '@antv/g-math': 2.0.1 '@antv/g-plugin-image-loader': 1.3.1 '@antv/g-shader-components': 1.8.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 '@webgpu/types': 0.1.33 earcut: 2.2.3 eventemitter3: 5.0.1 @@ -1669,7 +1669,7 @@ packages: resolution: {integrity: sha512-bk94rLrQ2wclVt2aghWytTr8Ur9a0ImMcf2V2vmoatjD1+/k+EtsF230RcoflVk9MGr4Cn0LqFXVIiPSmckYHw==} dependencies: '@antv/g-lite': 1.2.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 gl-matrix: 3.4.3 tslib: 2.5.3 dev: false @@ -1678,12 +1678,12 @@ packages: resolution: {integrity: sha512-IdrlWjN6vBWjoqSu58ZbeL3Ta8q+Eq+686dMa0yCMCRnVlmym/mcW2JzCCA+IUcaCM39UEiDmyinJs8Ic04X9A==} dependencies: '@antv/g-lite': 1.2.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 gl-matrix: 3.4.3 tslib: 2.5.3 dev: false - /@antv/g-plugin-webgl-device@1.7.54(@antv/g-lite@packages+g-lite)(@antv/g-plugin-device-renderer@1.9.1)(gl-matrix@3.4.3): + /@antv/g-plugin-webgl-device@1.7.54(@antv/g-lite@packages+g-lite)(@antv/g-plugin-device-renderer@1.9.1): resolution: {integrity: sha512-1Bnf+eb5HcK7plBYSBAKQDc+KWW0VZ3paFv8rEfJCnp7nTt4kHH2j9wdjwHztft4eOaxdRH1hdV1Aom05sahqg==} peerDependencies: '@antv/g-lite': ^1.0.0 @@ -1691,11 +1691,9 @@ packages: dependencies: '@antv/g-lite': link:packages/g-lite '@antv/g-plugin-device-renderer': 1.9.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) + '@antv/util': 3.3.4 eventemitter3: 4.0.7 tslib: 2.5.3 - transitivePeerDependencies: - - gl-matrix dev: false /@antv/g-shader-components@1.8.1: @@ -1712,18 +1710,16 @@ packages: tslib: 2.5.3 dev: false - /@antv/g-web-animations-api@1.0.39(@antv/g-lite@1.2.1)(gl-matrix@3.4.3): + /@antv/g-web-animations-api@1.0.39(@antv/g-lite@1.2.1): resolution: {integrity: sha512-0QXVzjk8kKrVokxHLLphkJsMPvbhLgcQN8/eVUdPaj+A0Yf6Cpg/hquYaGBBuqzwoMVB0ROUsIvwXgRtoXQONA==} peerDependencies: '@antv/g-lite': ^1.0.0 dependencies: '@antv/g-lite': 1.2.1 - '@antv/util': 3.3.1(gl-matrix@3.4.3) - transitivePeerDependencies: - - gl-matrix + '@antv/util': 3.3.4 dev: false - /@antv/g-webgl@1.7.74(@antv/g-lite@packages+g-lite)(gl-matrix@3.4.3): + /@antv/g-webgl@1.7.74(@antv/g-lite@packages+g-lite): resolution: {integrity: sha512-efi5NjuUWcIQt1kxp9kQSPIC9xwVzHbKiXSjrl6SkZ7rXWekBWfPsfnRca0zEzZQ91M90/F0jvdRLe6uXXqrIQ==} peerDependencies: '@antv/g-lite': ^1.0.0 @@ -1733,10 +1729,8 @@ packages: '@antv/g-plugin-dom-interaction': 1.9.1 '@antv/g-plugin-html-renderer': 1.9.1 '@antv/g-plugin-image-loader': 1.3.1 - '@antv/g-plugin-webgl-device': 1.7.54(@antv/g-lite@packages+g-lite)(@antv/g-plugin-device-renderer@1.9.1)(gl-matrix@3.4.3) - '@antv/util': 3.3.1(gl-matrix@3.4.3) - transitivePeerDependencies: - - gl-matrix + '@antv/g-plugin-webgl-device': 1.7.54(@antv/g-lite@packages+g-lite)(@antv/g-plugin-device-renderer@1.9.1) + '@antv/util': 3.3.4 dev: false /@antv/g-webgpu-core@0.5.6: @@ -1851,7 +1845,7 @@ packages: '@antv/g6-pc': 0.5.2 dev: false - /@antv/g@5.16.33(gl-matrix@3.4.3): + /@antv/g@5.16.33: resolution: {integrity: sha512-11F82JsrXeJZTZSREiaPhnILkzoHqajkebA4fkPQ4XXjpoAcpIEow//NF8LbJOr3c1hogTyDh+aofwFeY+JnMw==} dependencies: '@antv/g-camera-api': 1.0.40(@antv/g-lite@1.2.1) @@ -1859,9 +1853,7 @@ packages: '@antv/g-css-typed-om-api': 1.0.38(@antv/g-lite@1.2.1) '@antv/g-dom-mutation-observer-api': 1.0.38(@antv/g-lite@1.2.1) '@antv/g-lite': 1.2.1 - '@antv/g-web-animations-api': 1.0.39(@antv/g-lite@1.2.1)(gl-matrix@3.4.3) - transitivePeerDependencies: - - gl-matrix + '@antv/g-web-animations-api': 1.0.39(@antv/g-lite@1.2.1) dev: false /@antv/hierarchy@0.6.11: @@ -1918,28 +1910,25 @@ packages: tslib: 2.5.3 dev: false - /@antv/util@3.3.1(gl-matrix@3.4.3): - resolution: {integrity: sha512-9p2SLovz4iBo6OsAdV1MU9lShwqCez2CMLCL0voIXNsIDxG2t17l8EN8/hoADCTH5AigC2U3ru9/HdD5YtOiQg==} - peerDependencies: - gl-matrix: ^3.3.0 + /@antv/util@3.3.4: + resolution: {integrity: sha512-NGRjPCPje8GIC14Ye7sjebamFIjxoZ+mCIqfXz6wD/M6fA9SgJivzmLB3Ry01Wq8PI36oOVv9BwrAGV1JD8vjA==} dependencies: fast-deep-equal: 3.1.3 gl-matrix: 3.4.3 tslib: 2.5.3 - /@antv/webgpu-graph@1.0.0(@antv/g-lite@packages+g-lite)(@antv/g-webgpu@packages+g-webgpu)(gl-matrix@3.4.3): + /@antv/webgpu-graph@1.0.0(@antv/g-lite@packages+g-lite)(@antv/g-webgpu@packages+g-webgpu): resolution: {integrity: sha512-zE9lyg+uJkOe/1O7EdfOesuqD6svKRhQCNMocpFwA7cka4jdBY5h6iE60FiHNGPza6/Cy7mXVDYuGT/t+8/F1g==} dependencies: - '@antv/g': 5.16.33(gl-matrix@3.4.3) + '@antv/g': 5.16.33 '@antv/g-plugin-gpgpu': 1.7.50(@antv/g-lite@packages+g-lite)(@antv/g-webgpu@packages+g-webgpu) - '@antv/g-webgl': 1.7.74(@antv/g-lite@packages+g-lite)(gl-matrix@3.4.3) + '@antv/g-webgl': 1.7.74(@antv/g-lite@packages+g-lite) '@types/offscreencanvas': 2019.6.4 '@webgpu/types': 0.1.33 tslib: 2.5.3 transitivePeerDependencies: - '@antv/g-lite' - '@antv/g-webgpu' - - gl-matrix dev: false /@babel/code-frame@7.12.11: diff --git a/site/examples/perf/webgl/demo/lines.js b/site/examples/perf/webgl/demo/lines.js new file mode 100644 index 000000000..d2c64b2d5 --- /dev/null +++ b/site/examples/perf/webgl/demo/lines.js @@ -0,0 +1,122 @@ +import { Canvas, CanvasEvent, Line } from '@antv/g'; +import { Renderer as WebGLRenderer } from '@antv/g-webgl'; +import { Renderer as WebGPURenderer } from '@antv/g-webgpu'; +import * as lil from 'lil-gui'; +import Stats from 'stats.js'; + +// create a renderer +const webglRenderer = new WebGLRenderer(); +const webgpuRenderer = new WebGPURenderer({ + shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm', +}); + +// create a canvas +const canvas = new Canvas({ + container: 'container', + width: 600, + height: 500, + renderer: webglRenderer, +}); + +canvas.addEventListener(CanvasEvent.READY, () => { + for (let i = 0; i < 5000; i++) { + const line = new Line({ + style: { + x1: Math.random() * 600, + y1: Math.random() * 500, + x2: Math.random() * 600, + y2: Math.random() * 500, + stroke: '#5B8FF9', + lineWidth: 2, + }, + }); + canvas.appendChild(line); + } +}); + +// stats +const stats = new Stats(); +stats.showPanel(0); +const $stats = stats.dom; +$stats.style.position = 'absolute'; +$stats.style.left = '0px'; +$stats.style.top = '0px'; +const $wrapper = document.getElementById('container'); +$wrapper.appendChild($stats); + +const camera = canvas.getCamera(); +canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => { + if (stats) { + stats.update(); + } + + // manipulate camera instead of the root of canvas + camera.rotate(0, 0, 1); +}); + +// update Camera's zoom +// @see https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js +const minZoom = 0; +const maxZoom = Infinity; +canvas + .getContextService() + .getDomElement() // g-canvas/webgl 为 ，g-svg 为 + .addEventListener( + 'wheel', + (e) => { + e.preventDefault(); + let zoom; + if (e.deltaY < 0) { + zoom = Math.max(minZoom, Math.min(maxZoom, camera.getZoom() / 0.95)); + } else { + zoom = Math.max(minZoom, Math.min(maxZoom, camera.getZoom() * 0.95)); + } + camera.setZoom(zoom); + }, + { passive: false }, + ); + +// GUI +const gui = new lil.GUI({ autoPlace: false }); +$wrapper.appendChild(gui.domElement); +const rendererFolder = gui.addFolder('renderer'); +const rendererConfig = { + renderer: 'webgl', +}; +rendererFolder + .add(rendererConfig, 'renderer', ['webgl', 'webgpu']) + .onChange((rendererName) => { + let renderer; + if (rendererName === 'webgl') { + renderer = webglRenderer; + } else if (rendererName === 'webgpu') { + renderer = webgpuRenderer; + } + canvas.setRenderer(renderer); + }); +rendererFolder.open(); + +const transformFolder = gui.addFolder('style'); +const transformConfig = { + lineWidth: 2, + lineDash: 10, + lineDashOffset: 0, +}; +transformFolder + .add(transformConfig, 'lineWidth', 0, 20) + .onChange((lineWidth) => { + const lines = canvas.document.querySelectorAll('line'); + lines.forEach((line) => { + line.style.lineWidth = lineWidth; + }); + }); +transformFolder.add(transformConfig, 'lineDash', 0, 50).onChange((dash) => { + const lines = canvas.document.querySelectorAll('line'); + lines[0].style.lineDash = [dash, dash]; +}); +transformFolder + .add(transformConfig, 'lineDashOffset', 0, 50) + .onChange((lineDashOffset) => { + const lines = canvas.document.querySelectorAll('line'); + lines[0].style.lineDashOffset = lineDashOffset; + }); diff --git a/site/examples/perf/webgl/demo/meta.json b/site/examples/perf/webgl/demo/meta.json index ab83dc796..49bbe6eeb 100644 --- a/site/examples/perf/webgl/demo/meta.json +++ b/site/examples/perf/webgl/demo/meta.json @@ -32,6 +32,14 @@ }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sQH_T5LdKdcAAAAAAAAAAAAADmJ7AQ/original" }, + { + "filename": "lines.js", + "title": { + "zh": "大量直线", + "en": "Instanced Lines" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNRuTqpp6BAAAAAAAAAAAAAADmJ7AQ/original" + }, { "filename": "polygons.js", "title": { diff --git a/site/examples/shape/path/demo/multi-segments.js b/site/examples/shape/path/demo/multi-segments.js index 5331435c2..152a03d43 100644 --- a/site/examples/shape/path/demo/multi-segments.js +++ b/site/examples/shape/path/demo/multi-segments.js @@ -26,14 +26,22 @@ const canvas = new Canvas({ const path = new Path({ style: { - transform: 'translate(200, 100) scale(10)', - d: 'M2 4C0.8954304997175604 3.9999999991219815 -1.3527075029566811e-16 4.895430499717561 0 6C0 6 0 9.9375 0 12C1.3527075029566811e-16 13.10456950028244 0.8954304997175604 14.00000000087802 2 14C8 14 10.25 14 14 14C15.104569499040734 13.99999999912198 16 13.104569499040734 16 12C16 9 16 7.875 16 6C16 4.895430500959266 15.104569499040734 4.0000000008780185 14 4C13.414 4 13.194249999999998 4 12.828 4C12.297610373455704 3.9998867247945213 11.788985462367364 3.7890987493850155 11.414 3.414C11 3 10.84475 2.8447500000000003 10.586 2.5860000000000003C10.211014537632636 2.210901250614985 9.702389626544296 2.0001132752054787 9.172 2.0000000000000004C8 2.0000000000000004 7.560500000000001 2.0000000000000004 6.828000000000001 2.0000000000000004C6.297610373455706 2.0001132752054787 5.788985462367367 2.210901250614985 5.4140000000000015 2.5860000000000003C5.000000000000002 3 4.844750000000001 3.1552499999999997 4.586000000000001 3.414C4.211014537632636 3.7890987493850155 3.7023896265442966 3.9998867247945213 3.1720000000000015 4C2.5860000000000016 4 2.3662500000000017 4 2.0000000000000018 4C2.000000000000001 4 2.000000000000001 4 2 4M10.5 8.5C10.5 6.575499102701247 8.416666666666666 5.372686041889527 6.75 6.334936490538903C5.976497308103742 6.781518477924107 5.5 7.606836025229591 5.5 8.5C5.5 10.424500897298753 7.583333333333334 11.627313958110474 9.25 10.665063509461097C10.023502691896258 10.218481522075892 10.5 9.39316397477041 10.5 8.5C10.5 8.5 10.5 8.5 10.5 8.5M2.5 6C2.1150998205402494 6.000000000305956 1.874537208444147 5.583333333830511 2.0669872979090567 5.2500000003442C2.1563036954051213 5.095299461648009 2.321367204761929 4.999999999858005 2.5 5C2.8849001794597506 5.000000000305956 3.125462791688336 5.416666667163845 2.933012701693495 5.7500000003442C2.8436963042354777 5.904700538406512 2.6786327946700927 5.999999999858005 2.5 6C2.5 6 2.5 6 2.5 6M11.5 8.5C11.5 11.194301256218253 8.583333333333334 12.878239541354663 6.250000000000001 11.531088913245537C5.167096231345241 10.90587413090625 4.5 9.750429564678573 4.5 8.5C4.5 5.805698743781747 7.416666666666667 4.121760458645338 9.75 5.468911086754464C10.832903768654761 6.094125869093751 11.5 7.249570435321427 11.5 8.5C11.5 8.5 11.5 8.5 11.5 8.5', + d: 'M 0 395.708 L 0.308 394.171 L 0.616 391.627 L 0.924 390.84 L 1.847 390.928 L 2.463 391.168 L 2.771 390.498 L 3.079 390.49 L 3.387 390.192 L 4.311 387.925 L 4.619 387.094 L 4.926 385.768 L 4.926 385.433 L 5.234 384.413 L 6.158 383.961 L 6.466 385.302 L 6.774 385.433 L 7.082 383.902 L 7.39 383.48 L 8.313 382.051 L 8.621 380.915 L 8.929 381.388 L 9.237 382.992 L 9.545 380.856 L 10.777 380.324 L 11.084 377.103 L 11.392 375.34 L 12.008 377.373 L 12.932 375.238 L 13.24 374.261 L 13.548 373.554 L 13.856 373.241 L 14.163 372.935 L 14.779 376.068 L 15.087 375.93 L 15.395 378.029 L 15.703 377.118 L 16.011 375.842 L 16.935 372.497 L 17.243 373.54 L 17.55 375.077 L 17.858 373.365 L 18.166 374.02 L 19.09 374.501 L 19.398 376.462 L 19.706 374.829 L 20.014 375.799 L 20.322 374.72 L 21.553 375.289 L 21.861 370.982 L 22.477 366.915 L 22.785 367.243 L 23.708 368.679 L 23.708 367.207 L 24.016 367.177 L 24.324 365.953 L 24.632 363.286 L 25.556 363.016 L 25.864 362.426 L 26.172 363.002 L 26.48 361.632 L 26.787 358.899 L 27.711 358.935 L 28.019 365.356 L 28.327 363.628 L 28.635 357.259 L 28.943 358.826 L 29.866 360.589 L 30.174 367.637 L 30.79 365.275 L 31.098 364.19 L 31.406 367.571 L 32.33 365.093 L 32.638 365.254 L 32.946 365.997 L 33.253 371.55 L 33.253 372.563 L 34.177 370.53 L 34.485 373.27 L 34.793 376.28 L 35.101 378.357 L 35.409 374.706 L 36.332 374.589 L 36.64 370.69 L 36.948 367.09 L 37.256 368.139 L 37.564 365.057 L 38.488 367.279 L 38.796 371.237 L 39.104 365.946 L 39.411 364.364 L 39.719 362.739 L 41.259 358.6 L 41.567 363.993 L 41.875 365.268 L 42.183 367.629 L 42.798 364.029 L 43.106 364.918 L 43.414 363.927 L 43.722 363.672 L 44.03 362.499 L 44.954 362.79 L 45.262 360.961 L 45.569 361.07 L 45.877 361.406 L 46.185 358.607 L 47.109 355.597 L 47.417 352.027 L 47.725 352.325 L 48.033 351.065 L 48.341 351.815 L 49.572 349.724 L 49.88 348.186 L 50.188 348.572 L 50.496 349.797 L 50.804 346 L 51.728 341.292 L 52.035 341.328 L 52.035 342.108 L 52.343 345.431 L 52.651 341.773 L 53.575 341.97 L 53.883 340.075 L 54.191 337.765 L 54.499 337.218 L 54.807 339.463 L 55.73 336.591 L 56.038 327.992 L 56.346 328.16 L 56.654 330.455 L 56.962 329.056 L 57.886 328.772 L 58.193 327.38 L 58.501 325.23 L 59.117 327.059 L 59.425 326.746 L 60.349 327.978 L 60.657 323.889 L 60.965 327.89 L 61.272 335.783 L 61.58 343.143 L 62.196 351.604 L 62.504 339.798 L 62.812 342.604 L 63.12 343.923 L 63.428 342.4 L 64.351 344.178 L 64.659 340.607 L 64.967 340.891 L 65.583 338.647 L 66.507 337.918 L 66.815 336.264 L 67.123 332.321 L 67.431 329.355 L 67.738 330.863 L 68.97 333.312 L 69.278 332.62 L 69.586 328.473 L 69.894 325.23 L 70.202 322.06 L 70.817 322.126 L 71.125 326.258 L 71.433 324.567 L 71.741 323.86 L 72.049 324.909 L 72.973 329.275 L 73.281 330.31 L 73.589 330.208 L 73.896 327.227 L 74.204 322.344 L 75.128 318.781 L 75.744 318.671 L 76.052 318.948 L 76.36 318.03 L 77.283 319.305 M 105.918 354.687 L 106.226 356.173 L 106.534 353.171 L 106.842 352.099 L 107.766 350.052 L 108.074 352.274 L 108.381 353.295 L 108.381 351.028 L 108.689 356.428 L 109.613 355.962 L 109.921 355.525 L 110.229 351.648 L 110.537 351.072 L 110.845 346.299 L 111.768 341.11 L 112.076 346.911 L 112.384 344.95 L 112.692 340.541 L 113 339.966 L 113.924 338.136 L 114.232 336.089 L 114.54 336.89 L 115.155 332.481 L 115.463 331.796 L 116.387 329.034 L 116.695 327.628 L 117.003 330.594 L 117.311 328.794 L 117.619 329.967 L 118.234 326.535 L 118.542 325.223 L 118.85 327.919 L 119.158 325.39 L 119.466 326.928 L 120.39 329.858 L 120.698 328.182 L 121.005 333.8 L 121.313 334.631 L 121.621 331.629 L 122.853 327.795 L 123.161 327.373 L 123.469 327.606 L 123.777 326.105 L 125.008 328.036 L 125.316 328.568 L 125.624 328.699 L 125.932 325.609 L 126.24 328.371 L 127.163 331.308 L 127.163 328.371 L 127.471 331.891 L 127.779 337.393 L 128.087 338.042 L 129.011 334.784 L 129.319 331.439 L 129.627 333.392 L 129.935 331.825 L 130.243 335.928 L 131.166 337.466 L 131.474 337.4 L 131.782 334.383 L 132.09 341.037 L 132.398 339.703 L 133.322 341.634 L 133.937 336.358 L 134.245 341.095 L 134.553 339.681 L 135.785 336.008 L 136.093 332.809 L 136.401 336.672 L 136.401 334.937 L 136.708 337.889 L 137.632 336.941 L 137.94 340.031 L 138.248 337.721 L 138.556 338.45 L 138.864 343.303 L 139.787 342.473 L 140.095 345.584 L 140.403 342.494 L 140.711 347.763 L 141.019 345.511 L 141.943 351.137 L 142.251 349.184 L 142.559 347.144 L 142.866 347.822 L 143.482 349.49 L 144.406 351.99 L 144.714 346.59 L 145.022 344.003 L 145.33 344.455 L 145.638 340.097 L 146.253 337.174 L 146.561 334.864 L 146.869 332.991 L 147.177 332.977 L 147.485 335.586 L 148.409 335.841 L 148.717 337.196 L 149.025 335.513 L 149.332 336.642 L 149.64 334.821 L 150.564 337.911 L 150.872 337.116 L 151.18 336.366 L 151.488 337.043 L 151.796 340.111 L 153.335 342.545 L 153.643 341.984 L 153.951 346.167 L 154.259 346.925 L 155.183 348.572 L 155.49 353.12 L 155.49 353.171 L 155.798 352.413 L 156.106 355.117 L 157.03 361.369 L 157.338 361.719 L 157.646 370.501 L 157.954 365.939 L 158.262 360.968 L 159.185 368.154 L 159.493 371.222 L 159.801 369.859 L 160.109 367.513 L 160.417 370.202 L 161.341 386.949 L 161.649 380.827 L 162.264 384.136 L 162.572 390.709 L 162.88 392.917 L 163.804 392.137 L 164.112 398.682 L 164.42 398.223 L 164.728 398.988 L 164.728 393.114 L 165.651 383.305 L 165.959 387.809 L 166.267 392.276 L 166.575 389.405 L 166.883 392.677 L 167.807 391.919 L 168.114 396.984 L 168.422 393.063 L 168.73 392.072 L 169.038 393.42 L 169.962 396.546 L 170.27 390.848 L 170.578 387.466 L 170.886 382.736 L 171.193 385.251 L 172.425 385.71 L 172.733 382.773 L 173.041 388.377 L 173.349 391.438 L 173.657 392.065 L 174.272 393.784 L 174.58 394.593 L 174.888 397.982 L 175.196 393.376 L 175.504 397.895 L 176.428 399.425 L 176.736 398.135 L 177.044 400.773 L 177.351 405 L 177.659 403.477 L 178.583 395.92 L 178.891 397.487 L 179.199 394.426 L 179.507 394.426 L 179.815 396.124 L 181.046 398.849 L 181.354 396.269 L 181.662 393.77 L 181.97 397.042 L 182.278 395.154 L 183.202 390.986 L 183.51 390.738 L 183.51 392.086 L 183.817 394.426 L 184.125 392.043 L 185.049 394.608 L 185.357 394.112 L 185.665 398.682 L 185.973 398.485 L 186.281 398.07 L 187.204 401.174 L 187.512 400.708 L 187.82 401.684 L 188.128 401.684 L 188.436 401.123 L 189.36 400.54 L 189.668 400.773 L 189.975 401.458 M 218.302 384.449 L 218.61 381.519 L 218.918 379.129 L 219.842 377.336 L 220.15 379.851 L 220.458 378.889 L 220.766 376.52 L 220.766 376.52 L 221.689 376.046 L 221.997 377.438 L 222.305 377.927 L 222.613 375.15 L 222.921 373.714 L 223.845 375.842 L 224.153 374.924 L 224.46 375.106 L 224.768 372.271 L 225.076 373.365 L 226 372.76 L 226.308 373.365 L 226.616 372.461 L 226.924 371.958 L 227.54 370.931 L 228.463 367.411 L 228.771 366.944 L 229.079 367.097 L 229.387 369.604 L 229.695 369.509 L 230.311 369.233 L 230.619 372.986 L 230.926 376.578 L 231.234 374.057 L 231.542 374.443 L 232.466 371.361 L 232.774 370.778 L 233.082 371.929 L 233.39 373.161 L 233.698 374.385 L 234.929 368.351 L 235.237 366.696 L 235.545 365.224 L 235.853 364.685 L 237.084 362.105 L 237.392 362.003 L 237.7 360.939 L 238.008 358.906 L 238.316 358.228 L 239.24 358.826 L 239.548 359.649 L 239.548 361.449 L 239.856 361.668 L 240.163 363.84 L 241.087 364.481 L 241.395 364.292 L 241.703 364.853 L 242.011 364.634 L 242.319 362.011 L 243.243 363.548 L 243.55 365.997 L 243.858 364.386 L 244.166 361.734 L 244.474 359.853 L 245.398 360.196 L 245.706 359.861 L 246.322 359.569 L 246.629 361.617 L 246.937 361.617 L 247.861 362.645 L 248.169 364.984 L 248.477 363.658 L 248.785 364.284 L 248.785 362.71 L 249.708 359.926 L 250.016 359.977 L 250.324 356.618 L 250.632 356.151 L 250.94 353.069 L 251.864 352.223 L 252.172 353.244 L 252.48 349.432 L 252.787 348.645 L 253.095 347.064 L 254.019 346.984 L 254.327 347.056 L 254.635 347.035 L 254.943 345.023 L 255.251 344.586 L 256.482 342.371 L 256.79 343.012 L 257.098 343.332 L 257.406 344.207 L 257.714 343.041 L 258.33 343.617 L 258.946 343.187 L 259.253 340.92 L 259.561 342.115 L 260.485 347.355 L 260.793 344.141 L 261.101 343.704 L 261.409 342.443 L 261.717 340.337 L 262.64 340.454 L 262.948 340.206 L 263.256 341.656 L 263.564 340.17 L 263.872 339.732 L 264.796 341.073 L 265.411 343.194 L 265.719 343.281 L 266.027 342.283 L 266.335 339.543 L 267.567 337.634 L 267.875 338.938 L 267.875 337.903 L 268.183 338.195 L 269.106 337.058 L 269.414 336.008 L 269.722 331.119 L 270.03 329.165 L 270.338 328.823 L 271.262 329.552 L 271.569 329.216 L 271.877 328.473 L 272.185 329.697 L 272.493 330.754 L 273.417 327.999 L 273.725 328.561 L 274.033 328.582 L 274.649 331.855 L 274.956 328.91 L 275.88 328.094 L 276.188 325.186 L 276.496 325.012 L 276.804 325.726 L 277.112 324.851 L 277.728 324.603 L 278.035 325.179 L 278.343 324.254 L 278.651 324.786 L 278.959 326.615 L 279.883 325.296 L 280.191 318.81 L 280.499 314.321 L 280.807 314.117 L 281.114 315.035 L 282.038 316.099 L 282.346 319.823 L 282.654 323.445 L 282.962 320.566 L 283.27 326.287 L 284.501 325.697 L 284.809 326.105 L 285.117 324.603 L 285.425 322.257 L 285.733 322.031 L 286.657 316.842 L 286.657 315.734 L 286.965 315.538 L 287.272 316.456 L 287.58 314.663 L 288.504 313.074 L 288.812 312.805 L 289.12 313.563 L 289.428 317.534 L 289.736 317.964 L 290.659 313.621 L 290.967 314.67 L 291.275 314.853 L 291.583 314.853 L 291.891 317.476 L 292.815 317.972 L 293.431 320.114 L 293.738 320.654 L 294.046 320.471 L 294.354 322.774 L 295.278 325.959 L 295.586 325.288 L 295.894 319.509 L 295.894 320.508 L 296.202 321.79 L 297.125 320.107 L 297.433 322.155 L 297.741 321.528 L 298.049 323.838 L 298.357 321.237 L 299.281 319.196 L 299.589 317.644 L 299.896 316.376 L 300.204 311.318 L 300.512 311.318 L 301.436 309.445 L 301.744 311.274 L 302.052 309.423 L 302.36 310.087 M 330.687 291.693 L 330.995 291.693 L 331.918 289.856 L 332.226 289.091 L 332.534 288.319 L 332.842 288.792 L 333.15 287.451 L 333.766 287.087 L 334.074 286.985 L 334.381 284.609 L 334.689 282.255 L 334.997 283.363 L 335.921 283.603 L 336.229 285.411 L 336.537 274.749 L 336.845 269.466 L 337.153 266.288 L 338.076 267.257 L 338.384 272.694 L 338.692 273.015 L 339 267.884 L 339.308 273.386 L 340.54 269.553 L 340.847 275.143 L 341.155 277.11 L 341.463 284.201 L 341.771 291.773 L 342.387 278.56 L 342.695 276.717 L 343.003 272.658 L 343.311 275.376 L 343.619 278.684 L 344.542 278.393 L 344.85 279.748 L 345.158 282.678 L 345.466 290.388 L 345.774 287.065 L 346.698 283.829 L 347.005 284.952 L 347.313 285.761 L 347.621 279.027 L 347.929 276.454 L 348.853 276.454 L 349.469 273.576 L 349.777 271.302 L 350.084 271.907 L 350.392 277.125 L 351.316 280.783 L 351.624 281.956 L 351.932 286.424 L 351.932 281.097 L 352.24 278.91 L 353.163 278.349 L 353.471 274.407 L 353.779 268.897 L 354.087 265.53 L 354.395 263.927 L 355.319 266.769 L 355.627 264.087 L 355.935 266.186 L 356.243 267.622 L 356.55 269.298 L 357.474 268.132 L 357.782 276.972 L 358.09 280.353 L 358.706 282.576 L 359.014 283.698 L 359.937 283.698 L 360.245 282.467 L 360.553 275.157 L 360.861 275.573 L 361.169 274.458 L 361.785 276.163 L 362.093 280.156 L 362.401 279.479 L 362.708 280.412 L 363.016 281.541 L 363.94 284.689 L 364.248 280.091 L 364.556 278.378 L 364.864 274.895 L 365.172 274.224 L 366.095 274.705 L 366.403 271.207 L 366.711 273.481 L 367.019 275.558 L 367.327 276.185 L 368.559 272.832 L 368.866 272.774 L 369.174 272.009 L 369.482 272.942 L 369.79 274.115 L 370.714 272.905 L 370.714 274.611 L 371.022 281.33 L 371.33 280.164 L 371.638 282.124 L 372.561 283.188 L 372.869 280.033 L 373.177 279.231 L 373.485 281.556 L 373.793 281.731 L 374.717 284.529 L 375.025 288.807 L 375.332 286.65 L 375.64 288.552 L 375.948 287.575 L 376.872 286.934 L 377.18 286.497 L 377.796 281.228 L 378.104 279.887 L 378.411 275.077 L 379.335 275.077 L 379.643 275.777 L 379.951 272.053 L 380.259 271.943 L 380.259 271.696 L 381.183 269.05 L 381.49 268.307 L 381.798 266.733 L 382.106 262.105 L 382.414 262.98 L 383.338 257.252 L 383.646 256.858 L 383.954 253.958 L 384.262 253.105 L 384.569 250.627 L 385.493 251.473 L 385.801 254.606 L 386.109 254.235 L 386.417 256.873 L 387.033 257.769 L 387.956 260.597 L 388.264 253.09 L 388.572 252.908 L 388.88 252.886 L 389.188 249.352 L 389.804 248.412 L 390.112 246.094 L 390.42 244.928 L 390.728 243.347 L 391.035 234.288 L 391.959 231.913 L 392.267 238.114 L 392.575 237.356 L 392.883 238.093 L 393.191 239.586 L 394.114 238.588 L 394.422 239.164 L 394.73 239.324 L 395.038 241.212 L 395.346 244.316 L 396.578 241.984 L 396.886 238.209 L 397.193 235.702 L 397.501 231.716 L 397.809 232.547 L 398.733 231.461 L 399.041 233.312 L 399.041 231.891 L 399.349 232.889 L 399.657 239.178 L 400.58 239.9 L 400.888 243.872 L 401.196 244.666 L 401.504 238.887 L 401.812 240.126 L 402.736 235.294 L 403.044 238.668 L 403.351 234.245 L 403.967 234.099 L 404.891 232.736 L 405.199 236.905 L 405.815 233.079 L 406.123 231.803 L 406.431 232.321 L 407.354 230.346 L 407.662 231.76 L 407.97 229.719 L 408.278 230.63 L 408.278 230.047 L 409.202 229.238 L 409.51 230.244 L 409.817 230.193 L 410.125 229.544 L 410.433 230.011 L 411.357 228.845 L 411.665 227.394 L 411.973 226.695 L 412.281 227.832 L 413.512 227.045 L 413.82 226.469 L 414.128 226.6 L 414.436 227.788 L 414.744 228.59 M 443.071 212.557 L 443.995 215.013 L 444.302 216.689 L 444.61 217.308 L 444.918 217.279 L 445.226 219.48 L 445.842 222.585 L 446.15 221.419 L 446.458 218.7 L 446.766 221.404 L 447.074 225.019 L 447.997 221.819 L 448.305 217.44 L 448.613 214.124 L 448.921 208.082 L 450.153 206.399 L 450.46 208.286 L 450.768 208.483 L 451.076 210.961 L 451.384 208.498 L 452.616 211.303 L 452.924 209.904 L 453.232 208.906 L 453.54 210.961 L 453.847 211.026 L 454.771 210.341 L 454.771 208.993 L 455.079 210.611 L 455.387 211.092 L 455.695 215.516 L 456.619 220.763 L 456.926 218.693 L 457.234 215.975 L 457.542 215.494 L 457.85 219.363 L 458.774 219.961 L 459.082 221.572 L 459.39 218.227 L 459.698 219.524 L 460.005 217.767 L 461.237 210.174 L 461.853 211.865 L 462.161 211.435 L 462.469 213.373 L 463.392 217.308 L 463.7 221.681 L 464.008 221.535 L 464.316 222.082 L 464.316 226.155 L 465.24 225.645 L 465.548 221.389 L 465.856 225.536 L 466.163 226.695 L 466.471 230.266 L 467.395 233.866 L 467.703 226.593 L 468.011 228.553 L 468.319 222.271 L 468.627 225.828 L 469.55 221.681 L 469.858 219.334 L 470.166 220.223 L 470.474 219.036 L 471.09 213.504 L 472.322 209.008 L 472.629 207.31 L 472.937 203.345 L 473.245 201.516 L 473.861 205.677 L 474.169 205.86 L 474.477 202.748 L 474.785 202.93 L 475.093 197.719 L 476.016 191.248 L 476.324 189.025 L 476.632 181.701 L 476.94 181.417 L 477.248 177.037 L 478.172 173.248 L 478.48 169.669 L 478.787 177.555 L 479.095 178.116 L 479.403 179.092 L 480.635 174.523 L 480.943 180.236 L 481.251 177.569 L 481.559 188.646 L 481.866 191.379 L 482.79 206.253 L 483.098 191.095 L 483.098 198.616 L 483.406 191.321 L 483.714 188.923 L 484.638 184.245 L 484.946 186.38 L 485.253 186.409 L 485.561 196.896 L 485.869 204.198 L 486.793 203.899 L 487.101 191.394 L 487.409 189.514 L 487.717 191.306 L 488.025 184.121 L 488.948 179.464 L 489.256 179.449 L 489.564 183.21 L 490.18 185.979 L 490.488 191.066 L 491.719 186.919 L 492.027 183.866 L 492.335 183.713 L 492.643 188.566 L 493.259 186.773 L 493.567 183.363 L 493.875 179.952 L 494.183 177.285 L 494.49 171.79 L 495.414 163.679 L 495.722 162.353 L 496.03 163.307 L 496.338 170.828 L 496.646 169.021 L 497.569 169.844 L 497.877 172.694 L 498.185 174.334 L 498.493 179.027 L 498.801 185.768 L 500.033 190.665 L 500.341 192.195 L 500.649 188.005 L 500.956 188.646 L 501.264 194.163 L 501.88 180.309 L 502.188 171.943 L 502.496 170.559 L 502.804 166.011 L 503.112 156.122 L 504.035 157.587 L 504.343 155.947 L 504.651 173.16 L 504.959 175.572 L 505.267 177.351 L 506.191 167.95 L 506.499 173.78 L 506.807 171.717 L 507.114 168.737 L 507.422 168.547 L 508.346 168.671 L 508.962 174.698 L 509.27 174.042 L 509.578 169.917 L 509.886 171.98 L 510.809 172.351 L 511.117 167.614 L 511.425 175.594 L 511.425 182.926 L 511.733 183.363 L 512.657 187.269 L 512.965 180.295 L 513.272 183.253 L 513.58 188.617 L 513.888 190.417 L 514.812 194.739 L 515.12 189.273 L 515.428 196.211 L 516.044 198.703 L 516.967 189.557 L 517.275 191.685 L 517.583 185.126 L 518.199 180.951 L 518.507 179.661 L 519.431 177.249 L 519.738 178.75 L 520.046 180.105 L 520.354 178.961 L 520.662 176.804 L 521.278 178.101 L 521.586 180.309 L 521.894 186.591 L 522.202 187.502 L 522.51 185.986 L 523.433 185.119 L 523.741 175.106 L 524.049 174.749 L 524.357 173.211 L 524.665 169.655 L 525.896 167.396 L 526.204 170.231 L 526.512 168.423 L 526.82 168.511 M 556.071 12.826 L 556.379 5.036 L 556.687 8.687 L 556.995 1.858 L 558.226 0 L 558.226 5.677 L 558.534 7.309 L 558.842 9.809 L 559.15 22.591 L 560.074 40.883 L 560.381 19.334 L 560.689 20.325 L 560.997 35.556 L 561.305 46.094 L 562.229 47.027 L 562.537 55.349 L 562.845 19.115 L 563.153 20.791 L 563.46 24.217 L 564.384 38.078 L 565 39.426', lineWidth: 1, lineJoin: 'round', stroke: '#54BECC', cursor: 'pointer', }, }); + +const path2 = new Path({ + style: { + d: 'M 100 100 L 200 100 L 200 200 z M 300 100 L 300 200 L 200 300 z', + // d: 'M 100 100 L 200 100 L 200 200 M 300 100 L 300 200 L 200 300', + fill: 'red', + // stroke: 'red', + }, +}); path.addEventListener('mouseenter', () => { path.style.stroke = 'red'; }); @@ -43,6 +51,7 @@ path.addEventListener('mouseleave', () => { canvas.addEventListener(CanvasEvent.READY, () => { canvas.appendChild(path); + canvas.appendChild(path2); }); // stats diff --git a/site/package.json b/site/package.json index 8788b8712..e4273ec2f 100644 --- a/site/package.json +++ b/site/package.json @@ -29,7 +29,7 @@ "@antv/g-plugin-image-loader": "^1.3.1", "@antv/g6": "^4.5.2", "@antv/react-g": "^1.8.79", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.4", "@antv/webgpu-graph": "^1.0.0", "@naoak/workerize-transferable": "^0.1.0", "@observablehq/plot": "0.5.2",