From 0e5ba2c5d7fb1d9ab80557397cde3bda033f1118 Mon Sep 17 00:00:00 2001 From: xiaoiver Date: Tue, 18 Jul 2023 21:08:19 +0800 Subject: [PATCH] Release (#1421) * fix: draw empty Path correctly with webgl #1417 #1408 (#1418) * fix: draw empty Path correctly with webgl #1417 #1408 * chore: commit changeset * Fix globalthis (#1420) * fix: return empty object for globalthis * chore: commit changeset * chore(release): bump version (#1419) Co-authored-by: github-actions[bot] --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] --- packages/g-camera-api/CHANGELOG.md | 8 + packages/g-camera-api/package.json | 2 +- packages/g-canvas/CHANGELOG.md | 14 + packages/g-canvas/package.json | 2 +- packages/g-canvaskit/CHANGELOG.md | 14 + packages/g-canvaskit/package.json | 2 +- packages/g-components/CHANGELOG.md | 8 + packages/g-components/package.json | 2 +- .../g-dom-mutation-observer-api/CHANGELOG.md | 8 + .../g-dom-mutation-observer-api/package.json | 2 +- packages/g-gesture/CHANGELOG.md | 8 + packages/g-gesture/package.json | 2 +- packages/g-image-exporter/CHANGELOG.md | 8 + packages/g-image-exporter/package.json | 2 +- packages/g-lite/CHANGELOG.md | 7 + packages/g-lite/package.json | 2 +- packages/g-lite/src/Canvas.ts | 5 + packages/g-lite/src/global-runtime.ts | 9 +- .../src/services/OffscreenCanvasCreator.ts | 5 +- packages/g-lite/src/services/TextService.ts | 8 +- .../g-lite/src/services/aabb/TextUpdater.ts | 5 +- packages/g-lottie-player/CHANGELOG.md | 8 + packages/g-lottie-player/package.json | 2 +- packages/g-mobile-canvas-element/CHANGELOG.md | 8 + packages/g-mobile-canvas-element/package.json | 2 +- packages/g-mobile-canvas/CHANGELOG.md | 14 + packages/g-mobile-canvas/package.json | 2 +- packages/g-mobile-svg/CHANGELOG.md | 12 + packages/g-mobile-svg/package.json | 2 +- packages/g-mobile-webgl/CHANGELOG.md | 14 + packages/g-mobile-webgl/package.json | 2 +- packages/g-pattern/CHANGELOG.md | 8 + packages/g-pattern/package.json | 2 +- packages/g-plugin-3d/CHANGELOG.md | 9 + packages/g-plugin-3d/package.json | 2 +- packages/g-plugin-a11y/CHANGELOG.md | 8 + packages/g-plugin-a11y/package.json | 2 +- packages/g-plugin-annotation/CHANGELOG.md | 8 + packages/g-plugin-annotation/package.json | 2 +- packages/g-plugin-box2d/CHANGELOG.md | 8 + packages/g-plugin-box2d/package.json | 2 +- .../CHANGELOG.md | 8 + .../package.json | 2 +- packages/g-plugin-canvas-picker/CHANGELOG.md | 12 + packages/g-plugin-canvas-picker/package.json | 2 +- .../src/CanvasPickerPlugin.ts | 2 +- packages/g-plugin-canvas-picker/src/Image.ts | 5 +- .../g-plugin-canvas-renderer/CHANGELOG.md | 12 + .../g-plugin-canvas-renderer/package.json | 2 +- .../src/shapes/styles/Default.ts | 9 +- .../g-plugin-canvaskit-renderer/CHANGELOG.md | 9 + .../g-plugin-canvaskit-renderer/package.json | 2 +- packages/g-plugin-control/CHANGELOG.md | 8 + packages/g-plugin-control/package.json | 2 +- packages/g-plugin-css-select/CHANGELOG.md | 8 + packages/g-plugin-css-select/package.json | 2 +- .../g-plugin-device-renderer/CHANGELOG.md | 11 + .../g-plugin-device-renderer/package.json | 2 +- .../src/TexturePool.ts | 13 +- .../src/meshes/Instanced.ts | 13 +- .../src/meshes/InstancedPath.ts | 208 ++++++------ .../src/meshes/Line.ts | 160 ++++----- .../src/platform/utils/hash.ts | 3 +- .../src/renderer/BatchManager.ts | 68 ++-- .../src/utils/tiny-sdf.ts | 4 +- .../g-plugin-dom-interaction/CHANGELOG.md | 8 + .../g-plugin-dom-interaction/package.json | 2 +- packages/g-plugin-dragndrop/CHANGELOG.md | 8 + packages/g-plugin-dragndrop/package.json | 2 +- packages/g-plugin-gpgpu/CHANGELOG.md | 9 + packages/g-plugin-gpgpu/package.json | 2 +- packages/g-plugin-html-renderer/CHANGELOG.md | 8 + packages/g-plugin-html-renderer/package.json | 2 +- packages/g-plugin-image-loader/CHANGELOG.md | 8 + packages/g-plugin-image-loader/package.json | 2 +- packages/g-plugin-matterjs/CHANGELOG.md | 8 + packages/g-plugin-matterjs/package.json | 2 +- .../g-plugin-mobile-interaction/CHANGELOG.md | 8 + .../g-plugin-mobile-interaction/package.json | 2 +- packages/g-plugin-physx/CHANGELOG.md | 8 + packages/g-plugin-physx/package.json | 2 +- .../CHANGELOG.md | 9 + .../package.json | 2 +- .../g-plugin-rough-svg-renderer/CHANGELOG.md | 9 + .../g-plugin-rough-svg-renderer/package.json | 2 +- packages/g-plugin-svg-picker/CHANGELOG.md | 9 + packages/g-plugin-svg-picker/package.json | 2 +- packages/g-plugin-svg-renderer/CHANGELOG.md | 8 + packages/g-plugin-svg-renderer/package.json | 2 +- packages/g-plugin-webgl-device/CHANGELOG.md | 9 + packages/g-plugin-webgl-device/package.json | 2 +- packages/g-plugin-webgpu-device/CHANGELOG.md | 9 + packages/g-plugin-webgpu-device/package.json | 2 +- packages/g-plugin-yoga/CHANGELOG.md | 8 + packages/g-plugin-yoga/package.json | 2 +- .../CHANGELOG.md | 9 + .../package.json | 2 +- .../g-plugin-zdog-svg-renderer/CHANGELOG.md | 10 + .../g-plugin-zdog-svg-renderer/package.json | 2 +- packages/g-svg/CHANGELOG.md | 11 + packages/g-svg/package.json | 2 +- packages/g-web-animations-api/CHANGELOG.md | 8 + packages/g-web-animations-api/package.json | 2 +- packages/g-web-components/CHANGELOG.md | 10 + packages/g-web-components/package.json | 2 +- packages/g-webgl/CHANGELOG.md | 13 + packages/g-webgl/package.json | 2 +- packages/g-webgpu/CHANGELOG.md | 13 + packages/g-webgpu/package.json | 2 +- packages/g/CHANGELOG.md | 11 + packages/g/package.json | 2 +- packages/react-g/CHANGELOG.md | 6 + packages/react-g/package.json | 2 +- .../perf/animation/demo/webgl-text.js | 151 +++++++++ site/examples/shape/text/demo/meta.json | 7 + .../shape/text/demo/text-single-canvas.js | 96 ++++++ .../style/gradient/demo/gradient-path.js | 313 ++++++++++++++++++ site/examples/style/gradient/demo/meta.json | 14 + .../style/gradient/demo/radial-gradient.js | 76 +++++ 119 files changed, 1430 insertions(+), 299 deletions(-) create mode 100644 site/examples/perf/animation/demo/webgl-text.js create mode 100644 site/examples/shape/text/demo/text-single-canvas.js create mode 100644 site/examples/style/gradient/demo/gradient-path.js create mode 100644 site/examples/style/gradient/demo/radial-gradient.js diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md index 39fc08dc3..cfa87ce00 100644 --- a/packages/g-camera-api/CHANGELOG.md +++ b/packages/g-camera-api/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-camera-api +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json index 91b518a5a..ba24eced9 100644 --- a/packages/g-camera-api/package.json +++ b/packages/g-camera-api/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-camera-api", - "version": "1.2.4", + "version": "1.2.5", "description": "A simple implementation of Camera API.", "keywords": [ "antv", diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md index eeccd45c4..8c8736f78 100644 --- a/packages/g-canvas/CHANGELOG.md +++ b/packages/g-canvas/CHANGELOG.md @@ -1,5 +1,19 @@ # @antv/g-canvas +## 1.11.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-canvas-renderer@1.9.5 + - @antv/g-plugin-canvas-picker@1.10.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-canvas-path-generator@1.3.5 + - @antv/g-plugin-dom-interaction@1.9.5 + - @antv/g-plugin-html-renderer@1.9.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.11.4 ### Patch Changes diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json index 29ec55569..57b0126e7 100644 --- a/packages/g-canvas/package.json +++ b/packages/g-canvas/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-canvas", - "version": "1.11.4", + "version": "1.11.5", "description": "A renderer implemented by Canvas 2D API", "keywords": [ "antv", diff --git a/packages/g-canvaskit/CHANGELOG.md b/packages/g-canvaskit/CHANGELOG.md index 022ae9763..b5be877fc 100644 --- a/packages/g-canvaskit/CHANGELOG.md +++ b/packages/g-canvaskit/CHANGELOG.md @@ -1,5 +1,19 @@ # @antv/g-canvaskit +## 0.10.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-canvas-picker@1.10.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-canvas-path-generator@1.3.5 + - @antv/g-plugin-canvaskit-renderer@1.3.5 + - @antv/g-plugin-dom-interaction@1.9.5 + - @antv/g-plugin-html-renderer@1.9.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 0.10.4 ### Patch Changes diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json index afbefcc07..0fa983d1b 100644 --- a/packages/g-canvaskit/package.json +++ b/packages/g-canvaskit/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-canvaskit", - "version": "0.10.4", + "version": "0.10.5", "description": "A renderer implemented by CanvasKit", "keywords": [ "antv", diff --git a/packages/g-components/CHANGELOG.md b/packages/g-components/CHANGELOG.md index 5ac79402f..aad1ad8cb 100644 --- a/packages/g-components/CHANGELOG.md +++ b/packages/g-components/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-components +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-components/package.json b/packages/g-components/package.json index 03ba7f07f..27122f63e 100644 --- a/packages/g-components/package.json +++ b/packages/g-components/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-components", - "version": "1.9.4", + "version": "1.9.5", "description": "Components for g", "keywords": [ "antv", diff --git a/packages/g-dom-mutation-observer-api/CHANGELOG.md b/packages/g-dom-mutation-observer-api/CHANGELOG.md index 6604da9f3..2fe4168ba 100644 --- a/packages/g-dom-mutation-observer-api/CHANGELOG.md +++ b/packages/g-dom-mutation-observer-api/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-dom-mutation-observer-api +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json index ecc36aaba..eb8ce6aa0 100644 --- a/packages/g-dom-mutation-observer-api/package.json +++ b/packages/g-dom-mutation-observer-api/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-dom-mutation-observer-api", - "version": "1.2.4", + "version": "1.2.5", "description": "A simple implementation of DOM MutationObserver API.", "keywords": [ "antv", diff --git a/packages/g-gesture/CHANGELOG.md b/packages/g-gesture/CHANGELOG.md index d23927082..4e41b7621 100644 --- a/packages/g-gesture/CHANGELOG.md +++ b/packages/g-gesture/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-gesture +## 2.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 2.2.4 ### Patch Changes diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json index 5b09bb507..adf799b81 100644 --- a/packages/g-gesture/package.json +++ b/packages/g-gesture/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-gesture", - "version": "2.2.4", + "version": "2.2.5", "description": "G Gesture", "keywords": [ "antv", diff --git a/packages/g-image-exporter/CHANGELOG.md b/packages/g-image-exporter/CHANGELOG.md index 75d0b5672..1bba4d692 100644 --- a/packages/g-image-exporter/CHANGELOG.md +++ b/packages/g-image-exporter/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-image-exporter +## 0.7.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.7.4 ### Patch Changes diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json index a42b2c51f..3da0fb112 100644 --- a/packages/g-image-exporter/package.json +++ b/packages/g-image-exporter/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-image-exporter", - "version": "0.7.4", + "version": "0.7.5", "description": "A image exporter for G using DOM API", "keywords": [ "antv", diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md index 09e8c08ca..2e06b4b1e 100644 --- a/packages/g-lite/CHANGELOG.md +++ b/packages/g-lite/CHANGELOG.md @@ -1,5 +1,12 @@ # @antv/g-lite +## 1.2.5 + +### Patch Changes + +- ff2f4585: Return empty object for globalthis. +- 6fa21f84: Override offscreen canvas in runtime. + ## 1.2.4 ### Patch Changes diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json index fcc832cbb..3cfbba4f8 100644 --- a/packages/g-lite/package.json +++ b/packages/g-lite/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-lite", - "version": "1.2.4", + "version": "1.2.5", "description": "A core module for rendering engine implements DOM API.", "keywords": [ "antv", diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts index ded778205..404f14af1 100644 --- a/packages/g-lite/src/Canvas.ts +++ b/packages/g-lite/src/Canvas.ts @@ -184,6 +184,11 @@ export class Canvas extends EventTarget implements ICanvas { canvasHeight = height || getHeight(canvas) || canvas.height / dpr; } + // override it in runtime + if (offscreenCanvas) { + runtime.offscreenCanvas = offscreenCanvas; + } + /** * implements `Window` interface */ diff --git a/packages/g-lite/src/global-runtime.ts b/packages/g-lite/src/global-runtime.ts index d90db0d55..ae2a8ac84 100644 --- a/packages/g-lite/src/global-runtime.ts +++ b/packages/g-lite/src/global-runtime.ts @@ -44,7 +44,7 @@ import { TextService, TextUpdater, } from './services'; -import { Shape } from './types'; +import { CanvasLike, Shape } from './types'; export const runtime: GlobalRuntime = {} as GlobalRuntime; @@ -53,7 +53,8 @@ export interface GlobalRuntime { // AnimationTimeline: new (doc: IDocument) => IAnimationTimeline; AnimationTimeline: any; EasingFunction: (...args: any[]) => (t: number) => number; - offscreenCanvas: OffscreenCanvasCreator; + offscreenCanvasCreator: OffscreenCanvasCreator; + offscreenCanvas: CanvasLike; sceneGraphSelector: SceneGraphSelector; sceneGraphService: SceneGraphService; textService: TextService; @@ -143,10 +144,10 @@ const getGlobalThis = () => { if (typeof window !== 'undefined') return window; // @ts-ignore if (typeof global !== 'undefined') return global; + return {}; // [!] Error: The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten // @see https://rollupjs.org/troubleshooting/#error-this-is-undefined // if (typeof this !== 'undefined') return this; - throw new Error('Unable to locate global `this`'); }; /** @@ -162,7 +163,7 @@ runtime.AnimationTimeline = null; runtime.EasingFunction = null; -runtime.offscreenCanvas = new OffscreenCanvasCreator(); +runtime.offscreenCanvasCreator = new OffscreenCanvasCreator(); runtime.nativeHTMLMap = new WeakMap(); diff --git a/packages/g-lite/src/services/OffscreenCanvasCreator.ts b/packages/g-lite/src/services/OffscreenCanvasCreator.ts index 8e28440ad..072e85d6e 100644 --- a/packages/g-lite/src/services/OffscreenCanvasCreator.ts +++ b/packages/g-lite/src/services/OffscreenCanvasCreator.ts @@ -1,4 +1,5 @@ import type { CanvasLike } from '..'; +import { runtime } from '..'; /** * used in following scenes: @@ -21,8 +22,8 @@ export class OffscreenCanvasCreator { } // user-defined offscreen canvas - if (offscreenCanvas) { - this.canvas = offscreenCanvas; + if (offscreenCanvas || runtime.offscreenCanvas) { + this.canvas = offscreenCanvas || runtime.offscreenCanvas; this.context = this.canvas.getContext('2d', contextAttributes); } else { try { diff --git a/packages/g-lite/src/services/TextService.ts b/packages/g-lite/src/services/TextService.ts index 8a17c8461..036fd1ca9 100644 --- a/packages/g-lite/src/services/TextService.ts +++ b/packages/g-lite/src/services/TextService.ts @@ -100,8 +100,8 @@ export class TextService { }; const canvas = - this.runtime.offscreenCanvas.getOrCreateCanvas(offscreenCanvas); - const context = this.runtime.offscreenCanvas.getOrCreateContext( + this.runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + const context = this.runtime.offscreenCanvasCreator.getOrCreateContext( offscreenCanvas, { willReadFrequently: true, @@ -209,7 +209,7 @@ export class TextService { // } const context = - this.runtime.offscreenCanvas.getOrCreateContext(offscreenCanvas); + this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); context.font = font; // no overflowing by default @@ -354,7 +354,7 @@ export class TextService { textOverflow, } = parsedStyle; const context = - this.runtime.offscreenCanvas.getOrCreateContext(offscreenCanvas); + this.runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); const maxWidth = wordWrapWidth + letterSpacing; let ellipsis = ''; diff --git a/packages/g-lite/src/services/aabb/TextUpdater.ts b/packages/g-lite/src/services/aabb/TextUpdater.ts index 86e8f39ab..10e14fc4b 100644 --- a/packages/g-lite/src/services/aabb/TextUpdater.ts +++ b/packages/g-lite/src/services/aabb/TextUpdater.ts @@ -37,9 +37,6 @@ export class TextUpdater implements GeometryAABBUpdater { update(parsedStyle: ParsedTextStyleProps, object: DisplayObject) { const { text, textAlign, lineWidth, textBaseline, dx, dy } = parsedStyle; - const { offscreenCanvas } = - object?.ownerDocument?.defaultView?.getConfig() || {}; - if (!this.isReadyToMeasure(parsedStyle, object)) { parsedStyle.metrics = { font: '', @@ -66,6 +63,8 @@ export class TextUpdater implements GeometryAABBUpdater { }; } + const { offscreenCanvas } = + object?.ownerDocument?.defaultView?.getConfig() || {}; const metrics = this.globalRuntime.textService.measureText( text, parsedStyle, diff --git a/packages/g-lottie-player/CHANGELOG.md b/packages/g-lottie-player/CHANGELOG.md index 0f8d6b93c..f8b05731c 100644 --- a/packages/g-lottie-player/CHANGELOG.md +++ b/packages/g-lottie-player/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-lottie-player +## 0.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.2.4 ### Patch Changes diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json index 21b30e23c..022e76414 100644 --- a/packages/g-lottie-player/package.json +++ b/packages/g-lottie-player/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-lottie-player", - "version": "0.2.4", + "version": "0.2.5", "description": "A lottie player for G", "keywords": [ "antv", diff --git a/packages/g-mobile-canvas-element/CHANGELOG.md b/packages/g-mobile-canvas-element/CHANGELOG.md index 530cbf45d..4c69a8f93 100644 --- a/packages/g-mobile-canvas-element/CHANGELOG.md +++ b/packages/g-mobile-canvas-element/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-mobile-canvas-element +## 0.8.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.8.4 ### Patch Changes diff --git a/packages/g-mobile-canvas-element/package.json b/packages/g-mobile-canvas-element/package.json index 12b80d8f1..39688b572 100644 --- a/packages/g-mobile-canvas-element/package.json +++ b/packages/g-mobile-canvas-element/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-mobile-canvas-element", - "version": "0.8.4", + "version": "0.8.5", "description": "Create a CanvasLike element from existed context in mobile environment", "keywords": [ "antv", diff --git a/packages/g-mobile-canvas/CHANGELOG.md b/packages/g-mobile-canvas/CHANGELOG.md index 1220e8a56..3b62b7836 100644 --- a/packages/g-mobile-canvas/CHANGELOG.md +++ b/packages/g-mobile-canvas/CHANGELOG.md @@ -1,5 +1,19 @@ # @antv/g-mobile-canvas +## 0.10.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-canvas-renderer@1.9.5 + - @antv/g-plugin-canvas-picker@1.10.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-canvas-path-generator@1.3.5 + - @antv/g-plugin-dragndrop@1.8.5 + - @antv/g-plugin-image-loader@1.3.5 + - @antv/g-plugin-mobile-interaction@0.9.5 + ## 0.10.4 ### Patch Changes diff --git a/packages/g-mobile-canvas/package.json b/packages/g-mobile-canvas/package.json index 22b6bc6a7..56ebf7b5c 100644 --- a/packages/g-mobile-canvas/package.json +++ b/packages/g-mobile-canvas/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-mobile-canvas", - "version": "0.10.4", + "version": "0.10.5", "description": "A renderer implemented with Canvas2D API in mobile environment", "keywords": [ "antv", diff --git a/packages/g-mobile-svg/CHANGELOG.md b/packages/g-mobile-svg/CHANGELOG.md index bf1d68c64..ae20789b6 100644 --- a/packages/g-mobile-svg/CHANGELOG.md +++ b/packages/g-mobile-svg/CHANGELOG.md @@ -1,5 +1,17 @@ # @antv/g-mobile-svg +## 0.10.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-dragndrop@1.8.5 + - @antv/g-plugin-mobile-interaction@0.9.5 + - @antv/g-plugin-svg-picker@1.9.5 + - @antv/g-plugin-svg-renderer@1.10.5 + ## 0.10.4 ### Patch Changes diff --git a/packages/g-mobile-svg/package.json b/packages/g-mobile-svg/package.json index 1b6da405a..8df5ec3af 100644 --- a/packages/g-mobile-svg/package.json +++ b/packages/g-mobile-svg/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-mobile-svg", - "version": "0.10.4", + "version": "0.10.5", "description": "A renderer implemented by SVG in mobile environment", "keywords": [ "antv", diff --git a/packages/g-mobile-webgl/CHANGELOG.md b/packages/g-mobile-webgl/CHANGELOG.md index fa32c3d16..c9909d903 100644 --- a/packages/g-mobile-webgl/CHANGELOG.md +++ b/packages/g-mobile-webgl/CHANGELOG.md @@ -1,5 +1,19 @@ # @antv/g-mobile-webgl +## 0.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-webgl-device@1.9.5 + - @antv/g-plugin-dragndrop@1.8.5 + - @antv/g-plugin-html-renderer@1.9.5 + - @antv/g-plugin-image-loader@1.3.5 + - @antv/g-plugin-mobile-interaction@0.9.5 + ## 0.9.4 ### Patch Changes diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json index 62e0f329c..dbcd36395 100644 --- a/packages/g-mobile-webgl/package.json +++ b/packages/g-mobile-webgl/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-mobile-webgl", - "version": "0.9.4", + "version": "0.9.5", "description": "A renderer implemented by WebGL1/2 in mobile environment", "keywords": [ "antv", diff --git a/packages/g-pattern/CHANGELOG.md b/packages/g-pattern/CHANGELOG.md index c6f8a9e9f..f2c7b657b 100644 --- a/packages/g-pattern/CHANGELOG.md +++ b/packages/g-pattern/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-pattern +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-pattern/package.json b/packages/g-pattern/package.json index f13110c7a..ab1e49660 100644 --- a/packages/g-pattern/package.json +++ b/packages/g-pattern/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-pattern", - "version": "1.2.4", + "version": "1.2.5", "description": "A pattern libs for G", "keywords": [ "antv", diff --git a/packages/g-plugin-3d/CHANGELOG.md b/packages/g-plugin-3d/CHANGELOG.md index 737be0cd2..d563bb615 100644 --- a/packages/g-plugin-3d/CHANGELOG.md +++ b/packages/g-plugin-3d/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-3d +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-3d/package.json b/packages/g-plugin-3d/package.json index e79ccf7a3..1819034b9 100644 --- a/packages/g-plugin-3d/package.json +++ b/packages/g-plugin-3d/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-3d", - "version": "1.9.4", + "version": "1.9.5", "description": "Provide 3D extension for G", "keywords": [ "antv", diff --git a/packages/g-plugin-a11y/CHANGELOG.md b/packages/g-plugin-a11y/CHANGELOG.md index c2fbb4728..380e0592d 100644 --- a/packages/g-plugin-a11y/CHANGELOG.md +++ b/packages/g-plugin-a11y/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-a11y +## 0.6.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.6.4 ### Patch Changes diff --git a/packages/g-plugin-a11y/package.json b/packages/g-plugin-a11y/package.json index 8e0ea4429..eac84d52c 100644 --- a/packages/g-plugin-a11y/package.json +++ b/packages/g-plugin-a11y/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-a11y", - "version": "0.6.4", + "version": "0.6.5", "description": "A G plugin for accessibility", "keywords": [ "antv", diff --git a/packages/g-plugin-annotation/CHANGELOG.md b/packages/g-plugin-annotation/CHANGELOG.md index da6c5b5ff..a1ea78aa6 100644 --- a/packages/g-plugin-annotation/CHANGELOG.md +++ b/packages/g-plugin-annotation/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-annotation +## 0.4.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.4.4 ### Patch Changes diff --git a/packages/g-plugin-annotation/package.json b/packages/g-plugin-annotation/package.json index 026998823..286b0f89d 100644 --- a/packages/g-plugin-annotation/package.json +++ b/packages/g-plugin-annotation/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-annotation", - "version": "0.4.4", + "version": "0.4.5", "description": "A G plugin for annotation", "keywords": [ "antv", diff --git a/packages/g-plugin-box2d/CHANGELOG.md b/packages/g-plugin-box2d/CHANGELOG.md index 3842aab8a..6d937c1da 100644 --- a/packages/g-plugin-box2d/CHANGELOG.md +++ b/packages/g-plugin-box2d/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-box2d +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-box2d/package.json b/packages/g-plugin-box2d/package.json index f92b86b61..7411d09e0 100644 --- a/packages/g-plugin-box2d/package.json +++ b/packages/g-plugin-box2d/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-box2d", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for Box2D", "keywords": [ "antv", diff --git a/packages/g-plugin-canvas-path-generator/CHANGELOG.md b/packages/g-plugin-canvas-path-generator/CHANGELOG.md index f94bd841f..9ed340881 100644 --- a/packages/g-plugin-canvas-path-generator/CHANGELOG.md +++ b/packages/g-plugin-canvas-path-generator/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-canvas-path-generator +## 1.3.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.3.4 ### Patch Changes diff --git a/packages/g-plugin-canvas-path-generator/package.json b/packages/g-plugin-canvas-path-generator/package.json index 34c699df6..669c4642b 100644 --- a/packages/g-plugin-canvas-path-generator/package.json +++ b/packages/g-plugin-canvas-path-generator/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-canvas-path-generator", - "version": "1.3.4", + "version": "1.3.5", "description": "A G plugin of path generator with Canvas2D API", "keywords": [ "antv", diff --git a/packages/g-plugin-canvas-picker/CHANGELOG.md b/packages/g-plugin-canvas-picker/CHANGELOG.md index 0f01e62e3..08d8d39c2 100644 --- a/packages/g-plugin-canvas-picker/CHANGELOG.md +++ b/packages/g-plugin-canvas-picker/CHANGELOG.md @@ -1,5 +1,17 @@ # @antv/g-plugin-canvas-picker +## 1.10.5 + +### Patch Changes + +- ff2f4585: Return empty object for globalthis. +- 6fa21f84: Override offscreen canvas in runtime. +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-canvas-renderer@1.9.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-canvas-path-generator@1.3.5 + ## 1.10.4 ### Patch Changes diff --git a/packages/g-plugin-canvas-picker/package.json b/packages/g-plugin-canvas-picker/package.json index 2b66ceabb..ade327981 100644 --- a/packages/g-plugin-canvas-picker/package.json +++ b/packages/g-plugin-canvas-picker/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-canvas-picker", - "version": "1.10.4", + "version": "1.10.5", "description": "A G plugin for picking in canvas", "keywords": [ "antv", diff --git a/packages/g-plugin-canvas-picker/src/CanvasPickerPlugin.ts b/packages/g-plugin-canvas-picker/src/CanvasPickerPlugin.ts index 61f22c94a..ea8b09745 100644 --- a/packages/g-plugin-canvas-picker/src/CanvasPickerPlugin.ts +++ b/packages/g-plugin-canvas-picker/src/CanvasPickerPlugin.ts @@ -175,7 +175,7 @@ export class CanvasPickerPlugin implements RenderingPlugin { * @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath */ private isPointInPath = (displayObject: DisplayObject, position: Point) => { - const context = this.runtime.offscreenCanvas.getOrCreateContext( + const context = this.runtime.offscreenCanvasCreator.getOrCreateContext( this.context.config.offscreenCanvas, ) as CanvasRenderingContext2D; diff --git a/packages/g-plugin-canvas-picker/src/Image.ts b/packages/g-plugin-canvas-picker/src/Image.ts index 817bbd4e9..8c3825221 100644 --- a/packages/g-plugin-canvas-picker/src/Image.ts +++ b/packages/g-plugin-canvas-picker/src/Image.ts @@ -25,8 +25,9 @@ export function isPointInPath( if (pointerEvents === 'non-transparent-pixel') { const { offscreenCanvas } = renderingPluginContext.config; - const canvas = runtime.offscreenCanvas.getOrCreateCanvas(offscreenCanvas); - const context = runtime.offscreenCanvas.getOrCreateContext( + const canvas = + runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + const context = runtime.offscreenCanvasCreator.getOrCreateContext( offscreenCanvas, { willReadFrequently: true, diff --git a/packages/g-plugin-canvas-renderer/CHANGELOG.md b/packages/g-plugin-canvas-renderer/CHANGELOG.md index 92da69efd..8c701db8a 100644 --- a/packages/g-plugin-canvas-renderer/CHANGELOG.md +++ b/packages/g-plugin-canvas-renderer/CHANGELOG.md @@ -1,5 +1,17 @@ # @antv/g-plugin-canvas-renderer +## 1.9.5 + +### Patch Changes + +- ff2f4585: Return empty object for globalthis. +- 6fa21f84: Override offscreen canvas in runtime. +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-canvas-path-generator@1.3.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-canvas-renderer/package.json b/packages/g-plugin-canvas-renderer/package.json index 03607223e..0207dd9fe 100644 --- a/packages/g-plugin-canvas-renderer/package.json +++ b/packages/g-plugin-canvas-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-canvas-renderer", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin of renderer implementation with Canvas2D API", "keywords": [ "antv", diff --git a/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts b/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts index f921f1389..1b283c4ae 100644 --- a/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts +++ b/packages/g-plugin-canvas-renderer/src/shapes/styles/Default.ts @@ -206,16 +206,17 @@ export class DefaultRenderer implements StyleRenderer { const { width, height } = (pattern.image as Rect).parsedStyle; dpr = canvasContext.contextService.getDPR(); const { offscreenCanvas } = canvasContext.config; - $offscreenCanvas = runtime.offscreenCanvas.getOrCreateCanvas( + $offscreenCanvas = runtime.offscreenCanvasCreator.getOrCreateCanvas( offscreenCanvas, ) as HTMLCanvasElement; $offscreenCanvas.width = width * dpr; $offscreenCanvas.height = height * dpr; - const offscreenCanvasContext = runtime.offscreenCanvas.getOrCreateContext( - offscreenCanvas, - ) as CanvasRenderingContext2D; + const offscreenCanvasContext = + runtime.offscreenCanvasCreator.getOrCreateContext( + offscreenCanvas, + ) as CanvasRenderingContext2D; const restoreStack = []; diff --git a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md index a29af3264..da1a1a661 100644 --- a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md +++ b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-canvaskit-renderer +## 1.3.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.3.4 ### Patch Changes diff --git a/packages/g-plugin-canvaskit-renderer/package.json b/packages/g-plugin-canvaskit-renderer/package.json index db869b796..0a40882f3 100644 --- a/packages/g-plugin-canvaskit-renderer/package.json +++ b/packages/g-plugin-canvaskit-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-canvaskit-renderer", - "version": "1.3.4", + "version": "1.3.5", "description": "A G plugin of renderer implementation with CanvasKit", "keywords": [ "antv", diff --git a/packages/g-plugin-control/CHANGELOG.md b/packages/g-plugin-control/CHANGELOG.md index 7664f4b09..487abd26b 100644 --- a/packages/g-plugin-control/CHANGELOG.md +++ b/packages/g-plugin-control/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-control +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-control/package.json b/packages/g-plugin-control/package.json index 98c82fdb5..3577e4b03 100644 --- a/packages/g-plugin-control/package.json +++ b/packages/g-plugin-control/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-control", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for orbit control", "keywords": [ "antv", diff --git a/packages/g-plugin-css-select/CHANGELOG.md b/packages/g-plugin-css-select/CHANGELOG.md index 2f10bc0e3..a9f27b6cc 100644 --- a/packages/g-plugin-css-select/CHANGELOG.md +++ b/packages/g-plugin-css-select/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-css-select +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-css-select/package.json b/packages/g-plugin-css-select/package.json index cdb451eb4..69ee8a939 100644 --- a/packages/g-plugin-css-select/package.json +++ b/packages/g-plugin-css-select/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-css-select", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for using CSS select syntax in query selector", "keywords": [ "antv", diff --git a/packages/g-plugin-device-renderer/CHANGELOG.md b/packages/g-plugin-device-renderer/CHANGELOG.md index 067415ea7..a73f48ab5 100644 --- a/packages/g-plugin-device-renderer/CHANGELOG.md +++ b/packages/g-plugin-device-renderer/CHANGELOG.md @@ -1,5 +1,16 @@ # @antv/g-plugin-device-renderer +## 1.9.5 + +### Patch Changes + +- ff2f4585: Return empty object for globalthis. +- 6fa21f84: Override offscreen canvas in runtime. +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json index f3a7e8d1e..5ee4b2cff 100644 --- a/packages/g-plugin-device-renderer/package.json +++ b/packages/g-plugin-device-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-device-renderer", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin of renderer implementation with GPUDevice", "keywords": [ "antv", diff --git a/packages/g-plugin-device-renderer/src/TexturePool.ts b/packages/g-plugin-device-renderer/src/TexturePool.ts index 97e6719f2..ad86b6cfc 100644 --- a/packages/g-plugin-device-renderer/src/TexturePool.ts +++ b/packages/g-plugin-device-renderer/src/TexturePool.ts @@ -117,7 +117,7 @@ export class TexturePool { } getOrCreateCanvas() { - return runtime.offscreenCanvas.getOrCreateCanvas( + return runtime.offscreenCanvasCreator.getOrCreateCanvas( this.context.config.offscreenCanvas, ); } @@ -129,8 +129,9 @@ export class TexturePool { const height = halfExtents[1] * 2 || 1; const { offscreenCanvas } = this.context.config; - const canvas = runtime.offscreenCanvas.getOrCreateCanvas(offscreenCanvas); - const context = runtime.offscreenCanvas.getOrCreateContext( + const canvas = + runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + const context = runtime.offscreenCanvasCreator.getOrCreateContext( offscreenCanvas, ) as CanvasRenderingContext2D; @@ -171,8 +172,10 @@ export class TexturePool { const height = halfExtents[1] * 2 || 1; const { offscreenCanvas } = this.context.config; - const canvas = runtime.offscreenCanvas.getOrCreateCanvas(offscreenCanvas); - const context = runtime.offscreenCanvas.getOrCreateContext(offscreenCanvas); + const canvas = + runtime.offscreenCanvasCreator.getOrCreateCanvas(offscreenCanvas); + const context = + runtime.offscreenCanvasCreator.getOrCreateContext(offscreenCanvas); canvas.width = width; canvas.height = height; diff --git a/packages/g-plugin-device-renderer/src/meshes/Instanced.ts b/packages/g-plugin-device-renderer/src/meshes/Instanced.ts index 8737ce77f..66b687b5a 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Instanced.ts +++ b/packages/g-plugin-device-renderer/src/meshes/Instanced.ts @@ -104,6 +104,7 @@ export abstract class Instanced { protected renderHelper: RenderHelper, protected texturePool: TexturePool, protected lightPool: LightPool, + object: DisplayObject, ) {} context: BatchContext; @@ -150,12 +151,12 @@ export abstract class Instanced { */ protected mergeAnchorIntoModelMatrix = false; + protected abstract createMaterial(objects: DisplayObject[]): void; + /** - * Create a new instance when exceed. + * Get called when instance created or recreated. */ - protected maxInstance = 5000; - - protected abstract createMaterial(objects: DisplayObject[]): void; + onCreate(object: DisplayObject) {} get instance() { return this.objects[0]; @@ -245,10 +246,6 @@ export abstract class Instanced { return true; } - if (this.objects.length >= this.maxInstance) { - return false; - } - // Path / Polyline could be rendered as Line if ( this.instance.nodeName !== object.nodeName && diff --git a/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts b/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts index e01fd4952..4bc9813f0 100644 --- a/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts +++ b/packages/g-plugin-device-renderer/src/meshes/InstancedPath.ts @@ -43,33 +43,25 @@ export class InstancedPathMesh extends Instanced { const { path: { absolutePath }, } = object.parsedStyle as ParsedPathStyleProps; - if (absolutePath.length >= 2 && absolutePath.length <= 5) { + if (absolutePath.length >= 2) { return true; } } return false; } + onCreate(object: DisplayObject) { + this.segmentNum = this.calcSegmentNum(object); + } + protected mergeAnchorIntoModelMatrix = true; private segmentNum = -1; private calcSegmentNum(object: DisplayObject) { - return ( - object.parsedStyle as ParsedPathStyleProps - ).path.absolutePath.reduce((prev, cur) => { - let segment = 0; - if (cur[0] === 'M') { - segment = 0; - } else if (cur[0] === 'L') { - segment = 1; - } else if (cur[0] === 'A' || cur[0] === 'Q' || cur[0] === 'C') { - segment = SEGMENT_NUM; - } else if (cur[0] === 'Z') { - segment = 1; - } - return prev + segment; - }, 0); + // FIXME: only need to collect instanced count + const { instancedCount } = updateBuffer(object, false, SEGMENT_NUM); + return instancedCount; } /** * Paths with the same number of vertices should be merged. @@ -80,10 +72,6 @@ export class InstancedPathMesh extends Instanced { return false; } - if (this.segmentNum === -1) { - this.segmentNum = this.calcSegmentNum(this.instance); - } - const segmentNum = this.calcSegmentNum(object); return this.segmentNum === segmentNum; @@ -166,99 +154,101 @@ export class InstancedPathMesh extends Instanced { offset += 9; }); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.PACKED, - byteStride: 4 * (3 + 3 + 3 + 3), - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_RG, - bufferByteOffset: 4 * 0, - location: LineVertexAttributeLocation.PREV, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 3, - location: LineVertexAttributeLocation.POINT1, - divisor: 1, - }, - { - format: Format.F32_R, - bufferByteOffset: 4 * 5, - location: LineVertexAttributeLocation.VERTEX_JOINT, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 6, - location: LineVertexAttributeLocation.POINT2, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 9, - location: LineVertexAttributeLocation.NEXT, - divisor: 1, - }, - ], - data: new Float32Array(pointsBuffer), - }); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.VERTEX_NUM, - byteStride: 4 * 1, - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_R, - bufferByteOffset: 4 * 0, - byteStride: 4 * 1, - location: LineVertexAttributeLocation.VERTEX_NUM, - divisor: 0, - }, - ], - data: new Float32Array([0, 1, 2, 3, 4, 5, 6, 7, 8]), - }); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.TRAVEL, - byteStride: 4 * 1, - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_R, - bufferByteOffset: 4 * 0, - byteStride: 4 * 1, - location: LineVertexAttributeLocation.TRAVEL, - divisor: 1, - }, - ], - data: new Float32Array(travelBuffer), - }); + if (pointsBuffer.length) { + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.PACKED, + byteStride: 4 * (3 + 3 + 3 + 3), + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_RG, + bufferByteOffset: 4 * 0, + location: LineVertexAttributeLocation.PREV, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 3, + location: LineVertexAttributeLocation.POINT1, + divisor: 1, + }, + { + format: Format.F32_R, + bufferByteOffset: 4 * 5, + location: LineVertexAttributeLocation.VERTEX_JOINT, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 6, + location: LineVertexAttributeLocation.POINT2, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 9, + location: LineVertexAttributeLocation.NEXT, + divisor: 1, + }, + ], + data: new Float32Array(pointsBuffer), + }); + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.VERTEX_NUM, + byteStride: 4 * 1, + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_R, + bufferByteOffset: 4 * 0, + byteStride: 4 * 1, + location: LineVertexAttributeLocation.VERTEX_NUM, + divisor: 0, + }, + ], + data: new Float32Array([0, 1, 2, 3, 4, 5, 6, 7, 8]), + }); + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.TRAVEL, + byteStride: 4 * 1, + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_R, + bufferByteOffset: 4 * 0, + byteStride: 4 * 1, + location: LineVertexAttributeLocation.TRAVEL, + divisor: 1, + }, + ], + data: new Float32Array(travelBuffer), + }); - // this attribute only changes for each n instance - this.divisor = instancedCount / objects.length; + // this attribute only changes for each n instance + this.divisor = instancedCount / objects.length; - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.DASH, - byteStride: 4 * 4, - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_RGBA, - bufferByteOffset: 4 * 0, - location: LineVertexAttributeLocation.DASH, - divisor: this.divisor, - }, - ], - data: new Float32Array(packedDash), - }); + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.DASH, + byteStride: 4 * 4, + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_RGBA, + bufferByteOffset: 4 * 0, + location: LineVertexAttributeLocation.DASH, + divisor: this.divisor, + }, + ], + data: new Float32Array(packedDash), + }); - // use default common attributes - super.createGeometry(objects); + // use default common attributes + super.createGeometry(objects); - this.geometry.vertexCount = 15; - this.geometry.instancedCount = instancedCount; - this.geometry.setIndexBuffer(new Uint32Array(indices)); + this.geometry.vertexCount = 15; + this.geometry.instancedCount = instancedCount; + this.geometry.setIndexBuffer(new Uint32Array(indices)); + } } updateAttribute( diff --git a/packages/g-plugin-device-renderer/src/meshes/Line.ts b/packages/g-plugin-device-renderer/src/meshes/Line.ts index 2d5c6aadd..da72754b1 100644 --- a/packages/g-plugin-device-renderer/src/meshes/Line.ts +++ b/packages/g-plugin-device-renderer/src/meshes/Line.ts @@ -308,86 +308,90 @@ export class LineMesh extends Instanced { const { pointsBuffer, travelBuffer, instancedCount } = updateBuffer(instance); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.PACKED, - byteStride: 4 * (3 + 3 + 3 + 3), - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_RG, - bufferByteOffset: 4 * 0, - byteStride: 4 * 3, - location: LineVertexAttributeLocation.PREV, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 3, - byteStride: 4 * 3, - location: LineVertexAttributeLocation.POINT1, - divisor: 1, - }, - { - format: Format.F32_R, - bufferByteOffset: 4 * 5, - byteStride: 4 * 3, - location: LineVertexAttributeLocation.VERTEX_JOINT, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 6, - byteStride: 4 * 3, - location: LineVertexAttributeLocation.POINT2, - divisor: 1, - }, - { - format: Format.F32_RG, - bufferByteOffset: 4 * 9, - byteStride: 4 * 3, - location: LineVertexAttributeLocation.NEXT, - divisor: 1, - }, - ], - data: new Float32Array(pointsBuffer), - }); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.VERTEX_NUM, - byteStride: 4 * 1, - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_R, - bufferByteOffset: 4 * 0, - byteStride: 4 * 1, - location: LineVertexAttributeLocation.VERTEX_NUM, - divisor: 0, - }, - ], - data: new Float32Array([0, 1, 2, 3, 4, 5, 6, 7, 8]), - }); - this.geometry.setVertexBuffer({ - bufferIndex: LineVertexAttributeBufferIndex.TRAVEL, - byteStride: 4 * 1, - frequency: VertexBufferFrequency.PerInstance, - attributes: [ - { - format: Format.F32_R, - bufferByteOffset: 4 * 0, - byteStride: 4 * 1, - location: LineVertexAttributeLocation.TRAVEL, - divisor: 1, - }, - ], - data: new Float32Array(travelBuffer), - }); + // Empty path definition will cause WebGL context lost. + // @see https://github.com/antvis/G/issues/1417 + if (pointsBuffer.length) { + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.PACKED, + byteStride: 4 * (3 + 3 + 3 + 3), + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_RG, + bufferByteOffset: 4 * 0, + byteStride: 4 * 3, + location: LineVertexAttributeLocation.PREV, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 3, + byteStride: 4 * 3, + location: LineVertexAttributeLocation.POINT1, + divisor: 1, + }, + { + format: Format.F32_R, + bufferByteOffset: 4 * 5, + byteStride: 4 * 3, + location: LineVertexAttributeLocation.VERTEX_JOINT, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 6, + byteStride: 4 * 3, + location: LineVertexAttributeLocation.POINT2, + divisor: 1, + }, + { + format: Format.F32_RG, + bufferByteOffset: 4 * 9, + byteStride: 4 * 3, + location: LineVertexAttributeLocation.NEXT, + divisor: 1, + }, + ], + data: new Float32Array(pointsBuffer), + }); + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.VERTEX_NUM, + byteStride: 4 * 1, + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_R, + bufferByteOffset: 4 * 0, + byteStride: 4 * 1, + location: LineVertexAttributeLocation.VERTEX_NUM, + divisor: 0, + }, + ], + data: new Float32Array([0, 1, 2, 3, 4, 5, 6, 7, 8]), + }); + this.geometry.setVertexBuffer({ + bufferIndex: LineVertexAttributeBufferIndex.TRAVEL, + byteStride: 4 * 1, + frequency: VertexBufferFrequency.PerInstance, + attributes: [ + { + format: Format.F32_R, + bufferByteOffset: 4 * 0, + byteStride: 4 * 1, + location: LineVertexAttributeLocation.TRAVEL, + divisor: 1, + }, + ], + data: new Float32Array(travelBuffer), + }); - this.geometry.vertexCount = 15; - this.geometry.instancedCount = instancedCount; + this.geometry.vertexCount = 15; + this.geometry.instancedCount = instancedCount; - this.geometry.setIndexBuffer( - new Uint32Array([0, 2, 1, 0, 3, 2, 4, 6, 5, 4, 7, 6, 4, 7, 8]), - ); + this.geometry.setIndexBuffer( + new Uint32Array([0, 2, 1, 0, 3, 2, 4, 6, 5, 4, 7, 6, 4, 7, 8]), + ); + } } } diff --git a/packages/g-plugin-device-renderer/src/platform/utils/hash.ts b/packages/g-plugin-device-renderer/src/platform/utils/hash.ts index ecfd6f044..b2c421b51 100644 --- a/packages/g-plugin-device-renderer/src/platform/utils/hash.ts +++ b/packages/g-plugin-device-renderer/src/platform/utils/hash.ts @@ -191,7 +191,8 @@ export function vertexAttributeDescriptorEquals( a.bufferIndex === b.bufferIndex && a.bufferByteOffset === b.bufferByteOffset && a.location === b.location && - a.format === b.format + a.format === b.format && + a.divisor === b.divisor ); } diff --git a/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts b/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts index 22aafec97..983972c5d 100644 --- a/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts +++ b/packages/g-plugin-device-renderer/src/renderer/BatchManager.ts @@ -13,6 +13,8 @@ import type { Batch } from './Batch'; let stencilRefCounter = 1; +const MAX_INSTANCES_PER_BATCH = 5000; + export type BatchContext = { device: Device } & RenderingPluginContext; export class BatchManager { @@ -101,6 +103,7 @@ export class BatchManager { (mesh) => meshTag === mesh.constructor && mesh.index === i && + mesh.objects.length < MAX_INSTANCES_PER_BATCH && mesh.shouldMerge(object, i), ); if ( @@ -112,6 +115,7 @@ export class BatchManager { this.texturePool, this.lightPool, ); + existedMesh.onCreate(object); existedMesh.renderer = renderer; existedMesh.index = i; this.meshes.push(existedMesh); @@ -160,9 +164,8 @@ export class BatchManager { newValue: any, immediately = false, ) { - // @ts-ignore - const renderable3D = object.renderable3D as Renderable3D; - const renderer = this.rendererFactory[object.nodeName]; + 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); @@ -189,10 +192,12 @@ export class BatchManager { (mesh) => meshCtor === mesh.constructor && mesh.index === i && + mesh.objects.length < MAX_INSTANCES_PER_BATCH && mesh.shouldMerge(object, i), ); if (!existedMesh) { + // @ts-ignore existedMesh = new meshCtor( this.renderHelper, this.texturePool, @@ -201,6 +206,7 @@ export class BatchManager { existedMesh.renderer = renderer; existedMesh.index = i; existedMesh.init(this.context); + existedMesh.onCreate(object); this.meshes.push(existedMesh); } else { existedMesh.geometryDirty = true; @@ -219,32 +225,40 @@ export class BatchManager { existedMesh.inited && !existedMesh.geometryDirty ) { - const objectIdx = existedMesh.objects.indexOf(object); - if (immediately) { - object.parsedStyle[attributeName] = newValue; - existedMesh.updateAttribute( - [object], - objectIdx, - attributeName, - newValue, - ); - } else { - const patchKey = existedMesh.id + attributeName; - if (!this.pendingUpdatePatches[patchKey]) { - this.pendingUpdatePatches[patchKey] = { - instance: existedMesh, - objectIndices: [], - name: attributeName, - value: newValue, - }; - } - if ( - this.pendingUpdatePatches[patchKey].objectIndices.indexOf( + const shouldMerge = existedMesh.shouldMerge(object, i); + if (shouldMerge) { + const objectIdx = existedMesh.objects.indexOf(object); + if (immediately) { + object.parsedStyle[attributeName] = newValue; + existedMesh.updateAttribute( + [object], objectIdx, - ) === -1 - ) { - this.pendingUpdatePatches[patchKey].objectIndices.push(objectIdx); + attributeName, + newValue, + ); + } else { + const patchKey = existedMesh.id + attributeName; + if (!this.pendingUpdatePatches[patchKey]) { + this.pendingUpdatePatches[patchKey] = { + instance: existedMesh, + objectIndices: [], + name: attributeName, + value: newValue, + }; + } + if ( + this.pendingUpdatePatches[patchKey].objectIndices.indexOf( + objectIdx, + ) === -1 + ) { + this.pendingUpdatePatches[patchKey].objectIndices.push( + objectIdx, + ); + } } + } else { + existedMesh.geometryDirty = true; + existedMesh.onCreate(object); } } }); 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 94bb89910..e681171a4 100644 --- a/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts +++ b/packages/g-plugin-device-renderer/src/utils/tiny-sdf.ts @@ -48,7 +48,7 @@ export class TinySDF { // for "halo", and account for some glyphs possibly being larger than their font size const size = (this.size = fontSize + buffer * 4); - const $offscreenCanvas = runtime.offscreenCanvas.getOrCreateCanvas( + const $offscreenCanvas = runtime.offscreenCanvasCreator.getOrCreateCanvas( canvas, ) as HTMLCanvasElement; @@ -58,7 +58,7 @@ export class TinySDF { $offscreenCanvas.width = size; $offscreenCanvas.height = size; - const ctx = runtime.offscreenCanvas.getOrCreateContext(canvas, { + const ctx = runtime.offscreenCanvasCreator.getOrCreateContext(canvas, { willReadFrequently: true, }) as CanvasRenderingContext2D; this.ctx = ctx; diff --git a/packages/g-plugin-dom-interaction/CHANGELOG.md b/packages/g-plugin-dom-interaction/CHANGELOG.md index 3132fe438..702c02949 100644 --- a/packages/g-plugin-dom-interaction/CHANGELOG.md +++ b/packages/g-plugin-dom-interaction/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-dom-interaction +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-dom-interaction/package.json b/packages/g-plugin-dom-interaction/package.json index 9518876e4..6cafa6042 100644 --- a/packages/g-plugin-dom-interaction/package.json +++ b/packages/g-plugin-dom-interaction/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-dom-interaction", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin", "keywords": [ "antv", diff --git a/packages/g-plugin-dragndrop/CHANGELOG.md b/packages/g-plugin-dragndrop/CHANGELOG.md index c78fcfd5f..f86c72013 100644 --- a/packages/g-plugin-dragndrop/CHANGELOG.md +++ b/packages/g-plugin-dragndrop/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-dragndrop +## 1.8.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.8.4 ### Patch Changes diff --git a/packages/g-plugin-dragndrop/package.json b/packages/g-plugin-dragndrop/package.json index c19f11380..2598c4ef3 100644 --- a/packages/g-plugin-dragndrop/package.json +++ b/packages/g-plugin-dragndrop/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-dragndrop", - "version": "1.8.4", + "version": "1.8.5", "description": "A G plugin for Drag n Drop implemented with PointerEvents", "keywords": [ "antv", diff --git a/packages/g-plugin-gpgpu/CHANGELOG.md b/packages/g-plugin-gpgpu/CHANGELOG.md index c7c80ee56..e30fe867b 100644 --- a/packages/g-plugin-gpgpu/CHANGELOG.md +++ b/packages/g-plugin-gpgpu/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-gpgpu +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-webgpu@1.9.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-gpgpu/package.json b/packages/g-plugin-gpgpu/package.json index 09bbed68d..55f6922f9 100644 --- a/packages/g-plugin-gpgpu/package.json +++ b/packages/g-plugin-gpgpu/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-gpgpu", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for GPGPU based on WebGPU", "keywords": [ "webgpu", diff --git a/packages/g-plugin-html-renderer/CHANGELOG.md b/packages/g-plugin-html-renderer/CHANGELOG.md index 778b85c4a..e3a8bd298 100644 --- a/packages/g-plugin-html-renderer/CHANGELOG.md +++ b/packages/g-plugin-html-renderer/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-html-renderer +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-html-renderer/package.json b/packages/g-plugin-html-renderer/package.json index 6da7f79d5..943709080 100644 --- a/packages/g-plugin-html-renderer/package.json +++ b/packages/g-plugin-html-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-html-renderer", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for rendering HTML", "keywords": [ "antv", diff --git a/packages/g-plugin-image-loader/CHANGELOG.md b/packages/g-plugin-image-loader/CHANGELOG.md index 7635e105d..e359d2c2e 100644 --- a/packages/g-plugin-image-loader/CHANGELOG.md +++ b/packages/g-plugin-image-loader/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-image-loader +## 1.3.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.3.4 ### Patch Changes diff --git a/packages/g-plugin-image-loader/package.json b/packages/g-plugin-image-loader/package.json index b23c5006c..84326e03f 100644 --- a/packages/g-plugin-image-loader/package.json +++ b/packages/g-plugin-image-loader/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-image-loader", - "version": "1.3.4", + "version": "1.3.5", "description": "A G plugin for loading image", "keywords": [ "antv", diff --git a/packages/g-plugin-matterjs/CHANGELOG.md b/packages/g-plugin-matterjs/CHANGELOG.md index 5d304b985..919c154c8 100644 --- a/packages/g-plugin-matterjs/CHANGELOG.md +++ b/packages/g-plugin-matterjs/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-matterjs +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-matterjs/package.json b/packages/g-plugin-matterjs/package.json index e2ed7b6cd..126e36046 100644 --- a/packages/g-plugin-matterjs/package.json +++ b/packages/g-plugin-matterjs/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-matterjs", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for matter.js physics engine", "keywords": [ "antv", diff --git a/packages/g-plugin-mobile-interaction/CHANGELOG.md b/packages/g-plugin-mobile-interaction/CHANGELOG.md index e05f61b05..be783bbc1 100644 --- a/packages/g-plugin-mobile-interaction/CHANGELOG.md +++ b/packages/g-plugin-mobile-interaction/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-mobile-interaction +## 0.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 0.9.4 ### Patch Changes diff --git a/packages/g-plugin-mobile-interaction/package.json b/packages/g-plugin-mobile-interaction/package.json index 8f56c82a6..84a2a553a 100644 --- a/packages/g-plugin-mobile-interaction/package.json +++ b/packages/g-plugin-mobile-interaction/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-mobile-interaction", - "version": "0.9.4", + "version": "0.9.5", "description": "A G plugin listening events in mobile environment", "keywords": [ "antv", diff --git a/packages/g-plugin-physx/CHANGELOG.md b/packages/g-plugin-physx/CHANGELOG.md index 648d8e695..a3282e317 100644 --- a/packages/g-plugin-physx/CHANGELOG.md +++ b/packages/g-plugin-physx/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-physx +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-physx/package.json b/packages/g-plugin-physx/package.json index dfe6a1154..b5359a343 100644 --- a/packages/g-plugin-physx/package.json +++ b/packages/g-plugin-physx/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-physx", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for PhysX", "keywords": [ "antv", diff --git a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md index f29488525..4310fa47a 100644 --- a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md +++ b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-rough-canvas-renderer +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-canvas@1.11.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-rough-canvas-renderer/package.json b/packages/g-plugin-rough-canvas-renderer/package.json index 26c9ba26a..d30128574 100644 --- a/packages/g-plugin-rough-canvas-renderer/package.json +++ b/packages/g-plugin-rough-canvas-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-rough-canvas-renderer", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin of renderer implementation with rough.js", "keywords": [ "antv", diff --git a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md index b3fd6bed7..0e57bb81b 100644 --- a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md +++ b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-rough-svg-renderer +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-svg@1.10.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-rough-svg-renderer/package.json b/packages/g-plugin-rough-svg-renderer/package.json index 25aa7a682..9e3823e3c 100644 --- a/packages/g-plugin-rough-svg-renderer/package.json +++ b/packages/g-plugin-rough-svg-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-rough-svg-renderer", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin of renderer implementation with rough.js", "keywords": [ "antv", diff --git a/packages/g-plugin-svg-picker/CHANGELOG.md b/packages/g-plugin-svg-picker/CHANGELOG.md index 4b62b5bf2..8a03155c8 100644 --- a/packages/g-plugin-svg-picker/CHANGELOG.md +++ b/packages/g-plugin-svg-picker/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-svg-picker +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-svg-renderer@1.10.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-svg-picker/package.json b/packages/g-plugin-svg-picker/package.json index 408dd5021..9515385a5 100644 --- a/packages/g-plugin-svg-picker/package.json +++ b/packages/g-plugin-svg-picker/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-svg-picker", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for picking in SVG", "keywords": [ "antv", diff --git a/packages/g-plugin-svg-renderer/CHANGELOG.md b/packages/g-plugin-svg-renderer/CHANGELOG.md index b3cf7e62e..a7629ab58 100644 --- a/packages/g-plugin-svg-renderer/CHANGELOG.md +++ b/packages/g-plugin-svg-renderer/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-svg-renderer +## 1.10.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.10.4 ### Patch Changes diff --git a/packages/g-plugin-svg-renderer/package.json b/packages/g-plugin-svg-renderer/package.json index 55cd9a251..4d9a9c113 100644 --- a/packages/g-plugin-svg-renderer/package.json +++ b/packages/g-plugin-svg-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-svg-renderer", - "version": "1.10.4", + "version": "1.10.5", "description": "A G plugin of renderer implementation with SVG", "keywords": [ "antv", diff --git a/packages/g-plugin-webgl-device/CHANGELOG.md b/packages/g-plugin-webgl-device/CHANGELOG.md index 9e0bf9764..3a73c4825 100644 --- a/packages/g-plugin-webgl-device/CHANGELOG.md +++ b/packages/g-plugin-webgl-device/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-webgl-device +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-webgl-device/package.json b/packages/g-plugin-webgl-device/package.json index 459013159..1cf51da27 100644 --- a/packages/g-plugin-webgl-device/package.json +++ b/packages/g-plugin-webgl-device/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-webgl-device", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin implements GPUDevice interface with WebGL API", "keywords": [ "antv", diff --git a/packages/g-plugin-webgpu-device/CHANGELOG.md b/packages/g-plugin-webgpu-device/CHANGELOG.md index 41b64e40f..f6fb9e5ef 100644 --- a/packages/g-plugin-webgpu-device/CHANGELOG.md +++ b/packages/g-plugin-webgpu-device/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-webgpu-device +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-webgpu-device/package.json b/packages/g-plugin-webgpu-device/package.json index 7e2335847..0dc35d88a 100644 --- a/packages/g-plugin-webgpu-device/package.json +++ b/packages/g-plugin-webgpu-device/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-webgpu-device", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin implements GPUDevice interface with WebGPU API", "keywords": [ "antv", diff --git a/packages/g-plugin-yoga/CHANGELOG.md b/packages/g-plugin-yoga/CHANGELOG.md index 58850412a..b34ed58f2 100644 --- a/packages/g-plugin-yoga/CHANGELOG.md +++ b/packages/g-plugin-yoga/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-plugin-yoga +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-plugin-yoga/package.json b/packages/g-plugin-yoga/package.json index c4e30bc68..3a796bbc6 100644 --- a/packages/g-plugin-yoga/package.json +++ b/packages/g-plugin-yoga/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-yoga", - "version": "1.9.4", + "version": "1.9.5", "description": "A G plugin for Yoga layout engine", "keywords": [ "antv", diff --git a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md index 6fc689277..cd230f72e 100644 --- a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md +++ b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md @@ -1,5 +1,14 @@ # @antv/g-plugin-zdog-canvas-renderer +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-canvas@1.11.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-plugin-zdog-canvas-renderer/package.json b/packages/g-plugin-zdog-canvas-renderer/package.json index a508d5d3b..a53007e8f 100644 --- a/packages/g-plugin-zdog-canvas-renderer/package.json +++ b/packages/g-plugin-zdog-canvas-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-zdog-canvas-renderer", - "version": "1.2.4", + "version": "1.2.5", "description": "A G plugin of renderer implementation with Zdog", "keywords": [ "antv", diff --git a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md index d66bc29e8..71c7182fb 100644 --- a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md +++ b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md @@ -1,5 +1,15 @@ # @antv/g-plugin-zdog-svg-renderer +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-svg-renderer@1.10.5 + - @antv/g-svg@1.10.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-plugin-zdog-svg-renderer/package.json b/packages/g-plugin-zdog-svg-renderer/package.json index a94683e78..8dd3b0f76 100644 --- a/packages/g-plugin-zdog-svg-renderer/package.json +++ b/packages/g-plugin-zdog-svg-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-plugin-zdog-svg-renderer", - "version": "1.2.4", + "version": "1.2.5", "description": "A G plugin of renderer implementation with Zdog", "keywords": [ "antv", diff --git a/packages/g-svg/CHANGELOG.md b/packages/g-svg/CHANGELOG.md index 71e31f2e3..a8701c4ac 100644 --- a/packages/g-svg/CHANGELOG.md +++ b/packages/g-svg/CHANGELOG.md @@ -1,5 +1,16 @@ # @antv/g-svg +## 1.10.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-plugin-dom-interaction@1.9.5 + - @antv/g-plugin-svg-picker@1.9.5 + - @antv/g-plugin-svg-renderer@1.10.5 + ## 1.10.4 ### Patch Changes diff --git a/packages/g-svg/package.json b/packages/g-svg/package.json index 9dfaf349c..a146b5ed3 100644 --- a/packages/g-svg/package.json +++ b/packages/g-svg/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-svg", - "version": "1.10.4", + "version": "1.10.5", "description": "A renderer implemented by SVG", "keywords": [ "antv", diff --git a/packages/g-web-animations-api/CHANGELOG.md b/packages/g-web-animations-api/CHANGELOG.md index 5038aee59..ff03695a6 100644 --- a/packages/g-web-animations-api/CHANGELOG.md +++ b/packages/g-web-animations-api/CHANGELOG.md @@ -1,5 +1,13 @@ # @antv/g-web-animations-api +## 1.2.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + ## 1.2.4 ### Patch Changes diff --git a/packages/g-web-animations-api/package.json b/packages/g-web-animations-api/package.json index 4f732b085..55a95dff3 100644 --- a/packages/g-web-animations-api/package.json +++ b/packages/g-web-animations-api/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-web-animations-api", - "version": "1.2.4", + "version": "1.2.5", "description": "A simple implementation of Web Animations API.", "keywords": [ "antv", diff --git a/packages/g-web-components/CHANGELOG.md b/packages/g-web-components/CHANGELOG.md index 542f37747..01b75b29b 100644 --- a/packages/g-web-components/CHANGELOG.md +++ b/packages/g-web-components/CHANGELOG.md @@ -1,5 +1,15 @@ # @antv/g-web-components +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-canvas@1.11.5 + - @antv/g-webgl@1.9.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-web-components/package.json b/packages/g-web-components/package.json index 9d498b46b..546c4d81b 100644 --- a/packages/g-web-components/package.json +++ b/packages/g-web-components/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-web-components", - "version": "1.9.4", + "version": "1.9.5", "description": "A declarative usage for G implemented with WebComponents", "keywords": [ "antv", diff --git a/packages/g-webgl/CHANGELOG.md b/packages/g-webgl/CHANGELOG.md index 051b669dd..e5ba8c703 100644 --- a/packages/g-webgl/CHANGELOG.md +++ b/packages/g-webgl/CHANGELOG.md @@ -1,5 +1,18 @@ # @antv/g-webgl +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-webgl-device@1.9.5 + - @antv/g-plugin-dom-interaction@1.9.5 + - @antv/g-plugin-html-renderer@1.9.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json index 8842b229d..e7e5d1fd2 100644 --- a/packages/g-webgl/package.json +++ b/packages/g-webgl/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-webgl", - "version": "1.9.4", + "version": "1.9.5", "description": "A renderer implemented by WebGL1/2", "keywords": [ "antv", diff --git a/packages/g-webgpu/CHANGELOG.md b/packages/g-webgpu/CHANGELOG.md index 870bdce7b..0e635ba8c 100644 --- a/packages/g-webgpu/CHANGELOG.md +++ b/packages/g-webgpu/CHANGELOG.md @@ -1,5 +1,18 @@ # @antv/g-webgpu +## 1.9.5 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-plugin-device-renderer@1.9.5 + - @antv/g-lite@1.2.5 + - @antv/g-plugin-webgpu-device@1.9.5 + - @antv/g-plugin-dom-interaction@1.9.5 + - @antv/g-plugin-html-renderer@1.9.5 + - @antv/g-plugin-image-loader@1.3.5 + ## 1.9.4 ### Patch Changes diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json index e04e6ac90..47848378e 100644 --- a/packages/g-webgpu/package.json +++ b/packages/g-webgpu/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g-webgpu", - "version": "1.9.4", + "version": "1.9.5", "description": "A renderer implemented by WebGPU", "keywords": [ "antv", diff --git a/packages/g/CHANGELOG.md b/packages/g/CHANGELOG.md index 112343028..2f711c3b0 100644 --- a/packages/g/CHANGELOG.md +++ b/packages/g/CHANGELOG.md @@ -1,5 +1,16 @@ # @antv/g +## 5.18.6 + +### Patch Changes + +- Updated dependencies [ff2f4585] +- Updated dependencies [6fa21f84] + - @antv/g-lite@1.2.5 + - @antv/g-camera-api@1.2.5 + - @antv/g-dom-mutation-observer-api@1.2.5 + - @antv/g-web-animations-api@1.2.5 + ## 5.18.5 ### Patch Changes diff --git a/packages/g/package.json b/packages/g/package.json index 1922028ad..088aae740 100644 --- a/packages/g/package.json +++ b/packages/g/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g", - "version": "5.18.5", + "version": "5.18.6", "description": "A core module for rendering engine implements DOM API.", "keywords": [ "antv", diff --git a/packages/react-g/CHANGELOG.md b/packages/react-g/CHANGELOG.md index a268b8858..cbea82bd7 100644 --- a/packages/react-g/CHANGELOG.md +++ b/packages/react-g/CHANGELOG.md @@ -1,5 +1,11 @@ # @antv/react-g +## 1.10.6 + +### Patch Changes + +- @antv/g@5.18.6 + ## 1.10.5 ### Patch Changes diff --git a/packages/react-g/package.json b/packages/react-g/package.json index ce85d047a..b415716b2 100644 --- a/packages/react-g/package.json +++ b/packages/react-g/package.json @@ -1,6 +1,6 @@ { "name": "@antv/react-g", - "version": "1.10.5", + "version": "1.10.6", "description": "react render for @antv/g", "keywords": [ "react", diff --git a/site/examples/perf/animation/demo/webgl-text.js b/site/examples/perf/animation/demo/webgl-text.js new file mode 100644 index 000000000..e7e29add1 --- /dev/null +++ b/site/examples/perf/animation/demo/webgl-text.js @@ -0,0 +1,151 @@ +import { Canvas, CanvasEvent, Text, runtime } from '@antv/g'; +import { Renderer } from '@antv/g-webgl'; +import Stats from 'stats.js'; + +runtime.enableCSSParsing = false; + +const canvas = new Canvas({ + container: 'container', + width: 600, + height: 500, + renderer: new Renderer(), +}); + +const text1 = new Text({ + style: { + x: 100, + y: 100, + fill: 'black', + text: 'Text1', + }, +}); + +const text2 = new Text({ + style: { + x: 200, + y: 100, + fill: 'black', + text: 'Text2', + }, +}); + +const text3 = new Text({ + style: { + x: 300, + y: 100, + fill: 'black', + text: 'Text3', + }, +}); + +const text4 = new Text({ + style: { + x: 200, + y: 200, + fill: 'black', + text: 'Text3', + }, +}); + +const text5 = new Text({ + style: { + x: 300, + y: 200, + fill: 'black', + text: 'Text3', + }, +}); + +canvas.addEventListener(CanvasEvent.READY, () => { + canvas.appendChild(text1); + text1.animate( + [ + { + opacity: 0, + transform: 'translate(0, 0)', + }, + { + opacity: 1, + transform: 'translate(100, 0)', + }, + ], + { + duration: 2000, + fill: 'both', + iterations: Infinity, + }, + ); + + canvas.appendChild(text2); + text2.animate( + [ + { opacity: 0, transform: 'translate(0, 0)' }, + { opacity: 1, transform: 'translate(100, 0)' }, + ], + { + duration: 2000, + fill: 'both', + iterations: Infinity, + }, + ); + + canvas.appendChild(text3); + text3.animate( + [ + { opacity: 0, transform: 'translate(0, 0)' }, + { opacity: 1, transform: 'translate(100, 0)' }, + ], + { + duration: 2000, + fill: 'both', + iterations: Infinity, + }, + ); + + canvas.appendChild(text4); + text4.animate( + [ + { opacity: 0, transform: 'translate(0, 0)' }, + { opacity: 1, transform: 'translate(100, 0)' }, + ], + { + duration: 2000, + fill: 'both', + iterations: Infinity, + }, + ); + + canvas.appendChild(text5); + text5.animate( + [ + { opacity: 0, transform: 'translate(0, 0)' }, + { opacity: 1, transform: 'translate(100, 0)' }, + ], + { + duration: 2000, + fill: 'both', + iterations: Infinity, + }, + ); + + text1.style.fontSize = 32; + text2.style.fontSize = 32; + text3.style.fontSize = 32; + text4.style.fontSize = 32; + text5.style.fontSize = 32; +}); + +// 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); +canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => { + if (stats) { + stats.update(); + } +}); diff --git a/site/examples/shape/text/demo/meta.json b/site/examples/shape/text/demo/meta.json index 7ae811ff7..65eb4bcc2 100644 --- a/site/examples/shape/text/demo/meta.json +++ b/site/examples/shape/text/demo/meta.json @@ -43,6 +43,13 @@ "en": "D3 Word Cloud" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3WR1RZMQrAQAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "text-single-canvas.js", + "title": { + "zh": "关闭精确度量", + "en": "Text Baseline" + } } ] } diff --git a/site/examples/shape/text/demo/text-single-canvas.js b/site/examples/shape/text/demo/text-single-canvas.js new file mode 100644 index 000000000..790104708 --- /dev/null +++ b/site/examples/shape/text/demo/text-single-canvas.js @@ -0,0 +1,96 @@ +import { + Canvas, + CanvasEvent, + Circle, + Rect, + Text, + Path, + runtime, +} from '@antv/g'; +import { Renderer as CanvasRenderer } from '@antv/g-canvas'; +import * as lil from 'lil-gui'; +import Stats from 'stats.js'; + +runtime.enableCSSParsing = false; + +// create a renderer +const canvasRenderer = new CanvasRenderer(); + +const $canvas = document.createElement('canvas'); +const dpr = window.devicePixelRatio; +$canvas.width = dpr * 600; +$canvas.height = dpr * 500; +$canvas.style.width = '600px'; +$canvas.style.height = '500px'; +document.getElementById('container').appendChild($canvas); + +// create a canvas +const canvas = new Canvas({ + canvas: $canvas, + renderer: canvasRenderer, + offscreenCanvas: $canvas, +}); + +runtime.offscreenCanvas = $canvas; + +// create a line of text +const text = new Text({ + style: { + x: 100, + y: 300, + fontFamily: 'PingFang SC', + text: '这是测试文本This is text', + fontSize: 60, + fill: '#1890FF', + stroke: '#F04864', + lineWidth: 5, + }, +}); + +console.log(text.getBounds()); + +// display anchor +const origin = new Circle({ + style: { + r: 20, + fill: 'red', + }, +}); +origin.setPosition(text.getPosition()); + +// display bounds +const bounds = new Rect({ + style: { + stroke: 'black', + lineWidth: 2, + }, +}); + +canvas.addEventListener(CanvasEvent.READY, () => { + canvas.appendChild(bounds); + canvas.appendChild(text); + canvas.appendChild(origin); +}); + +// 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); +canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => { + if (stats) { + stats.update(); + } + + const bounding = text.getBounds(); + if (bounding) { + const { center, halfExtents } = bounding; + bounds.attr('width', halfExtents[0] * 2); + bounds.attr('height', halfExtents[1] * 2); + bounds.setPosition(center[0] - halfExtents[0], center[1] - halfExtents[1]); + } +}); diff --git a/site/examples/style/gradient/demo/gradient-path.js b/site/examples/style/gradient/demo/gradient-path.js new file mode 100644 index 000000000..94d536fa9 --- /dev/null +++ b/site/examples/style/gradient/demo/gradient-path.js @@ -0,0 +1,313 @@ +import { + Canvas, + CanvasEvent, + HTML, + Line, + Rect, + Path, + convertToPath, +} from '@antv/g'; +import { Renderer as CanvasRenderer } from '@antv/g-canvas'; +import { Renderer as CanvaskitRenderer } from '@antv/g-canvaskit'; +import { Renderer as SVGRenderer } from '@antv/g-svg'; +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'; + +/** + * + * e.g. linear-gradient(0deg, blue, green 40%, red) + * radial-gradient(circle at center, red 0, blue, green 100%) + * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient + * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient + * + * interactive demo: + * @see https://observablehq.com/@danburzo/css-gradient-line + */ + +// create a renderer +const canvasRenderer = new CanvasRenderer(); +const svgRenderer = new SVGRenderer(); +const webglRenderer = new WebGLRenderer(); +const webgpuRenderer = new WebGPURenderer({ + shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm', +}); +const canvaskitRenderer = new CanvaskitRenderer({ + wasmDir: '/', +}); + +// create a canvas +const canvas = new Canvas({ + container: 'container', + width: 600, + height: 500, + renderer: canvasRenderer, +}); + +// single linear gradient +const rect1 = new Rect({ + style: { + x: 50, + y: 50, + width: 200, + height: 100, + fill: 'linear-gradient(0deg, blue, green 40%, red)', + }, +}); +const rectPath = convertToPath(rect1); +const path1 = new Path({ + style: { + d: rectPath, + fill: 'linear-gradient(0deg, blue, green 40%, red)', + }, +}); + +// multi linear gradients +const rect2 = new Rect({ + style: { + x: 50, + y: 250, + width: 200, + height: 100, + fill: `linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)`, + }, +}); + +// single radial gradient +const rect3 = new Rect({ + style: { + x: 350, + y: 50, + width: 200, + height: 100, + fill: 'radial-gradient(circle at center, red, blue, green 100%)', + }, +}); + +// hard stop +const rect4 = new Rect({ + style: { + x: 350, + y: 250, + width: 200, + height: 100, + fill: 'radial-gradient(red 50%, blue 50%)', + }, +}); + +const line1 = new Line({ + style: { + x1: 50, + y1: 180, + x2: 250, + y2: 180, + strokeWidth: 10, + stroke: 'linear-gradient(0deg, blue, green 40%, red)', + }, +}); +const line2 = new Line({ + style: { + x1: 350, + y1: 180, + x2: 550, + y2: 180, + strokeWidth: 10, + stroke: 'radial-gradient(circle at center, red, blue, green 100%)', + }, +}); + +canvas.addEventListener(CanvasEvent.READY, () => { + canvas.appendChild(line1); + canvas.appendChild(line2); + + canvas.appendChild(rect1); + canvas.appendChild(rect2); + canvas.appendChild(rect3); + canvas.appendChild(rect4); + + canvas.appendChild(path1); + + canvas.appendChild( + new HTML({ + style: { + x: 100, + y: 20, + height: 30, + width: 200, + innerHTML: 'linear gradient', + }, + }), + ); + canvas.appendChild( + new HTML({ + style: { + x: 60, + y: 220, + height: 30, + width: 200, + innerHTML: 'multiple linear gradients', + }, + }), + ); + canvas.appendChild( + new HTML({ + style: { + x: 350, + y: 20, + height: 30, + width: 200, + innerHTML: 'radial gradient', + }, + }), + ); + canvas.appendChild( + new HTML({ + style: { + x: 350, + y: 220, + height: 30, + width: 200, + innerHTML: 'hard color stop', + }, + }), + ); +}); + +// 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); +canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => { + if (stats) { + stats.update(); + } +}); + +// GUI +const gui = new lil.GUI({ autoPlace: false }); +$wrapper.appendChild(gui.domElement); +const rendererFolder = gui.addFolder('renderer'); +const rendererConfig = { + renderer: 'canvas', +}; +rendererFolder + .add(rendererConfig, 'renderer', [ + 'canvas', + 'svg', + 'webgl', + 'webgpu', + 'canvaskit', + ]) + .onChange((rendererName) => { + let renderer; + if (rendererName === 'canvas') { + renderer = canvasRenderer; + } else if (rendererName === 'svg') { + renderer = svgRenderer; + } else if (rendererName === 'webgl') { + renderer = webglRenderer; + } else if (rendererName === 'webgpu') { + renderer = webgpuRenderer; + } else if (rendererName === 'canvaskit') { + renderer = canvaskitRenderer; + } + canvas.setRenderer(renderer); + }); +rendererFolder.open(); + +const linearGradientFolder = gui.addFolder('linear gradient'); +const linearGradientConfig = { + angle: 0, + width: 200, + height: 100, + 'side or corner': 'to right', + 'green color stop(%)': 40, +}; +linearGradientFolder + .add(linearGradientConfig, 'angle', 0, 360) + .onChange((angle) => { + rect1.style.fill = `linear-gradient(${angle}deg, blue, green 40%, red)`; + }); +linearGradientFolder + .add(linearGradientConfig, 'side or corner', [ + 'to left', + 'to top', + 'to bottom', + 'to right', + 'to left top', + 'to top left', + 'to left bottom', + 'to bottom left', + 'to right top', + 'to top right', + 'to right bottom', + 'to bottom right', + ]) + .onChange((direction) => { + rect1.style.fill = `linear-gradient(${direction}, blue, green 40%, red)`; + }); +linearGradientFolder + .add(linearGradientConfig, 'green color stop(%)', 0, 100) + .onChange((percentage) => { + rect1.style.fill = `linear-gradient(0deg, blue, green ${percentage}%, red)`; + }); +linearGradientFolder + .add(linearGradientConfig, 'width', 50, 400) + .onChange((width) => { + rect1.style.width = width; + }); +linearGradientFolder + .add(linearGradientConfig, 'height', 50, 400) + .onChange((height) => { + rect1.style.height = height; + }); + +const radialGradientFolder = gui.addFolder('radial gradient'); +const radialGradientConfig = { + position: 'center', + size: 'farthest-corner', + 'green color stop(%)': 100, +}; +radialGradientFolder + .add(radialGradientConfig, 'position', [ + 'top', + 'left', + 'bottom', + 'right', + 'center', + 'top left', + 'left top', + 'top right', + 'bottom left', + 'bottom right', + '25% 25%', + '50% 50%', + '50px 50px', + ]) + .onChange((position) => { + rect3.style.fill = `radial-gradient(circle ${radialGradientConfig.size} at ${position}, red, blue, green ${radialGradientConfig['green color stop(%)']}%)`; + }); +radialGradientFolder + .add(radialGradientConfig, 'size', [ + 'closest-side', + 'closest-corner', + 'farthest-side', + 'farthest-corner', + '100px', + ]) + .onChange((size) => { + rect3.style.fill = `radial-gradient(circle ${size} at ${radialGradientConfig.position}, red, blue, green ${radialGradientConfig['green color stop(%)']}%)`; + }); +radialGradientFolder + .add(radialGradientConfig, 'green color stop(%)', 0, 100) + .onChange((percentage) => { + rect3.style.fill = `radial-gradient(circle ${radialGradientConfig.size} at ${radialGradientConfig.position}, red, blue, green ${percentage}%)`; + }); diff --git a/site/examples/style/gradient/demo/meta.json b/site/examples/style/gradient/demo/meta.json index 86d94da7f..3fe1a417d 100644 --- a/site/examples/style/gradient/demo/meta.json +++ b/site/examples/style/gradient/demo/meta.json @@ -8,6 +8,20 @@ }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rWIvR729TqwAAAAAAAAAAAAADmJ7AQ/original" }, + { + "filename": "gradient-path.js", + "title": { + "zh": "Gradient", + "en": "Gradient" + } + }, + { + "filename": "radial-gradient.js", + "title": { + "zh": "Radial Gradient", + "en": "Radial Gradient" + } + }, { "filename": "inner-shadow.js", "title": { diff --git a/site/examples/style/gradient/demo/radial-gradient.js b/site/examples/style/gradient/demo/radial-gradient.js new file mode 100644 index 000000000..98b33ef4c --- /dev/null +++ b/site/examples/style/gradient/demo/radial-gradient.js @@ -0,0 +1,76 @@ +import { Canvas, CanvasEvent, Circle, Path } from '@antv/g'; +import { Renderer as CanvasRenderer } from '@antv/g-canvas'; +import * as d3 from 'd3'; + +const arc = d3.arc(); +const arc1 = arc({ + innerRadius: 150, + outerRadius: 180, + startAngle: Math.PI / 4, + endAngle: Math.PI / 2, + padAngle: Math.PI / 200, +}); +const arc2 = arc({ + innerRadius: 150, + outerRadius: 180, + startAngle: 0, + endAngle: Math.PI / 4, + padAngle: Math.PI / 200, +}); +const arc3 = arc({ + innerRadius: 150, + outerRadius: 180, + startAngle: Math.PI / 2, + endAngle: Math.PI * 2, + padAngle: Math.PI / 200, +}); + +const canvasRenderer = new CanvasRenderer(); + +const canvas = new Canvas({ + container: 'container', + width: 400, + height: 400, + renderer: canvasRenderer, +}); + +const circle = new Circle({ + style: { + cx: 200, + cy: 200, + r: 100, + fill: 'red', + stroke: 'white', + lineWidth: 4, + shadowColor: 'red', + shadowBlur: 2, + cursor: 'pointer', + }, +}); + +[arc1, arc2, arc3].forEach((arc, i) => { + console.log(arc); + + const p = new Path({ + style: { + d: arc, + // shadowColor: "blue", + // shadowBlur: 20, + }, + }); + p.style.fill = `radial-gradient(circle at 0px 0px, blue 60%, rgba(0,0,200,0.3) 75%, rgba(0,0,200,0.3) 76%, blue 90%)`; + canvas.appendChild(p); + p.translate(200, 200); +}); + +canvas.addEventListener(CanvasEvent.READY, () => { + canvas.appendChild(circle); + + circle.animate([{ shadowBlur: 20 }, { shadowBlur: 60 }], { + duration: 2000, + fill: 'both', + direction: 'alternate', + easing: 'ease-in-out', + iterations: Infinity, + }); +});