From 32ae640aa4b5870e0bc6ad6162931a6d593747d6 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 3 Sep 2024 17:48:49 +0800 Subject: [PATCH 01/18] feat: support merge initOption hook --- .../vstory/demo/src/demos/VChartGraphic.tsx | 15 +++- .../src/story/character/chart/character.ts | 3 +- .../character/chart/graphic/vchart-graphic.ts | 80 ++++++++++--------- packages/vstory/src/story/utils/chart.ts | 41 +++++++++- 4 files changed, 98 insertions(+), 41 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx index a497424d..3587f6f7 100644 --- a/packages/vstory/demo/src/demos/VChartGraphic.tsx +++ b/packages/vstory/demo/src/demos/VChartGraphic.tsx @@ -605,6 +605,7 @@ const storySpec: IStorySpec = { { type: 'VChart', id: '58e9a996-7460-44de-8c7a-eceae2260308', + zIndex: 200, position: { top: 125, left: 79.5, @@ -613,7 +614,19 @@ const storySpec: IStorySpec = { }, options: { spec: spec, - initOption: { animation: false, interactive: true, disableTriggerEvent: false } + initOption: { + animation: false, + interactive: true, + disableTriggerEvent: false, + performanceHook: { + afterInitializeChart: () => { + console.log('afterInitializeChart'); + }, + afterVRenderDraw: () => { + console.log('afterVRenderDraw'); + } + } + } } } ] diff --git a/packages/vstory/src/story/character/chart/character.ts b/packages/vstory/src/story/character/chart/character.ts index e1a0b4b8..9c91c4f7 100644 --- a/packages/vstory/src/story/character/chart/character.ts +++ b/packages/vstory/src/story/character/chart/character.ts @@ -15,6 +15,7 @@ import type { StoryEvent } from '../../interface/runtime-interface'; import type { ICharacterPickInfo } from '../runtime-interface'; import { getLayoutFromWidget } from '../../utils/layout'; import { getChartModelWithEvent } from '../../utils/vchart-pick'; +import { mergeChartOption } from '../../utils/chart'; export class CharacterChart extends CharacterVisactor { static type = 'CharacterChart'; @@ -67,7 +68,7 @@ export class CharacterChart extends CharacterVisactor { ticker: this._option.canvas.getStage().ticker, visibleAll: false, ...(this._spec.options.panel ?? {}), - chartInitOptions: merge( + chartInitOptions: mergeChartOption( { animation: true, disableTriggerEvent: true, diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index dcc3d16a..93f16503 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -4,6 +4,7 @@ import type { ISpec, IVChart } from '@visactor/vchart'; import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender'; import { genNumberType, Group } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; +import { mergeChartOption } from '../../../utils/chart'; export interface IChartGraphicAttribute extends IGroupGraphicAttribute { renderCanvas: HTMLCanvasElement; @@ -73,43 +74,48 @@ export class Chart extends Group implements IVisactorGraphic { // 创建chart if (!params.vchart) { - params.vchart = this._vchart = new params.ClassType(params.spec, { - renderCanvas: params.renderCanvas, - mode: params.mode, - modeParams: params.modeParams, - canvasControled: false, - // viewBox: params.vi - dpr: params.dpr, - interactive: params.interactive, - animation: false, - autoFit: false, - disableTriggerEvent: params.disableTriggerEvent, - disableDirtyBounds: params.disableDirtyBounds, - ticker: params.ticker, - beforeRender: () => { - if (!this.stage) { - return; - } - const chartStage = this._vchart.getStage(); - if (!(chartStage as any)._editor_needRender) { - chartStage.pauseRender(); - this.stage.dirtyBounds?.union(this.globalAABBBounds); - this.stage.renderNextFrame(); - } - }, - afterRender: () => { - if (!this._vchart) { - return; - } - if (!this.stage) { - return; - } - // @ts-ignore - this._vchart.getStage()._editor_needRender = false; - this._vchart.getStage().stage.resumeRender(); - }, - ...(params.chartInitOptions ?? {}) - }); + params.vchart = this._vchart = new params.ClassType( + params.spec, + mergeChartOption( + { + renderCanvas: params.renderCanvas, + mode: params.mode, + modeParams: params.modeParams, + canvasControled: false, + // viewBox: params.vi + dpr: params.dpr, + interactive: params.interactive, + animation: false, + autoFit: false, + disableTriggerEvent: params.disableTriggerEvent, + disableDirtyBounds: params.disableDirtyBounds, + ticker: params.ticker, + beforeRender: () => { + if (!this.stage) { + return; + } + const chartStage = this._vchart.getStage(); + if (!(chartStage as any)._editor_needRender) { + chartStage.pauseRender(); + this.stage.dirtyBounds?.union(this.globalAABBBounds); + this.stage.renderNextFrame(); + } + }, + afterRender: () => { + if (!this._vchart) { + return; + } + if (!this.stage) { + return; + } + // @ts-ignore + this._vchart.getStage()._editor_needRender = false; + this._vchart.getStage().stage.resumeRender(); + } + }, + params.chartInitOptions ?? {} + ) + ); } else { this._vchart = params.vchart; } diff --git a/packages/vstory/src/story/utils/chart.ts b/packages/vstory/src/story/utils/chart.ts index bea2cc90..02f1f562 100644 --- a/packages/vstory/src/story/utils/chart.ts +++ b/packages/vstory/src/story/utils/chart.ts @@ -1,5 +1,5 @@ -import { ISpec } from '@visactor/vchart'; -import { isArray, isArrayLike, isNil, isObject, isPlainObject, isString, isValid } from '@visactor/vutils'; +import type { ISpec, IInitOption } from '@visactor/vchart'; +import { isArray, isArrayLike, isNil, isObject, isPlainObject, isString, isValid, array } from '@visactor/vutils'; const directlyAssignSpecKeys = ['seriesId', 'text']; @@ -132,3 +132,40 @@ export function findChartSpec(s: any, vchartSpec: ISpec) { } return null; } + +export function mergeChartOption( + target: Partial, + ...sources: Partial[] +): Partial { + const performanceHook: { [key: string]: (() => void)[] } = {}; + + function pushHookToTemp(hooks: IInitOption['performanceHook']) { + Object.keys(hooks).forEach((k: string) => { + if (!performanceHook[k]) { + performanceHook[k] = []; + } + // @ts-ignore + performanceHook[k].push(hooks[k]); + }); + } + if (target.performanceHook) { + pushHookToTemp(target.performanceHook); + } + sources.forEach(source => { + if (!source) { + return; + } + if (source.performanceHook) { + pushHookToTemp(source.performanceHook); + delete source.performanceHook; + } + }); + target.performanceHook = {}; + Object.keys(performanceHook).forEach(k => { + // @ts-ignore + target.performanceHook[k] = () => { + performanceHook[k].forEach(f => f()); + }; + }); + return target; +} From bf6928cd5f5586c680f346c222fbf3dfb730de75 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 3 Sep 2024 17:53:06 +0800 Subject: [PATCH 02/18] feat: support merge initOption hook --- .../src/story/character/chart/graphic/vchart-graphic.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 93f16503..f3953aa7 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -1,6 +1,6 @@ import type { IVisactorGraphic } from '../../visactor/interface'; import { Bounds, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils'; -import type { ISpec, IVChart } from '@visactor/vchart'; +import type { IInitOption, ISpec, IVChart } from '@visactor/vchart'; import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender'; import { genNumberType, Group } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; @@ -11,7 +11,7 @@ export interface IChartGraphicAttribute extends IGroupGraphicAttribute { spec: any; ClassType: any; vchart: IVChart; - mode: string; + mode: IInitOption['mode']; modeParams?: any; dpr: number; interactive: boolean; @@ -89,6 +89,7 @@ export class Chart extends Group implements IVisactorGraphic { autoFit: false, disableTriggerEvent: params.disableTriggerEvent, disableDirtyBounds: params.disableDirtyBounds, + // @ts-ignore ticker: params.ticker, beforeRender: () => { if (!this.stage) { From 32dbe949f7da32cae662485851dd1af83b16d277 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 3 Sep 2024 18:03:19 +0800 Subject: [PATCH 03/18] feat: support merge initOption hook --- packages/vstory/src/story/utils/chart.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vstory/src/story/utils/chart.ts b/packages/vstory/src/story/utils/chart.ts index 02f1f562..d8efbd1c 100644 --- a/packages/vstory/src/story/utils/chart.ts +++ b/packages/vstory/src/story/utils/chart.ts @@ -1,5 +1,5 @@ import type { ISpec, IInitOption } from '@visactor/vchart'; -import { isArray, isArrayLike, isNil, isObject, isPlainObject, isString, isValid, array } from '@visactor/vutils'; +import { isArray, isArrayLike, isNil, isObject, isPlainObject, isString, isValid, merge } from '@visactor/vutils'; const directlyAssignSpecKeys = ['seriesId', 'text']; @@ -158,6 +158,7 @@ export function mergeChartOption( if (source.performanceHook) { pushHookToTemp(source.performanceHook); delete source.performanceHook; + merge(target, source); } }); target.performanceHook = {}; From c3162cb735a0d1d67c9440906539b5e85e1db31d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 4 Sep 2024 10:22:20 +0800 Subject: [PATCH 04/18] feat: support merge initOption hook --- packages/vstory/src/story/utils/chart.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vstory/src/story/utils/chart.ts b/packages/vstory/src/story/utils/chart.ts index d8efbd1c..3e19558c 100644 --- a/packages/vstory/src/story/utils/chart.ts +++ b/packages/vstory/src/story/utils/chart.ts @@ -164,8 +164,9 @@ export function mergeChartOption( target.performanceHook = {}; Object.keys(performanceHook).forEach(k => { // @ts-ignore - target.performanceHook[k] = () => { - performanceHook[k].forEach(f => f()); + target.performanceHook[k] = (...args) => { + // @ts-ignore + performanceHook[k].forEach(f => f(...args)); }; }); return target; From d1d3bd390f93d073eaf9065e594df6aca9cda36d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 4 Sep 2024 19:31:15 +0800 Subject: [PATCH 05/18] fix: fix the bugs of vchart graphic view box --- .../src/story/character/chart/graphic/vchart-graphic.ts | 6 +++++- packages/vstory/src/story/interface/runtime-interface.ts | 1 + packages/vstory/src/story/story.ts | 4 ++++ packages/vstory/src/story/utils/chart.ts | 8 ++++---- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index f3953aa7..3a7c9181 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -182,6 +182,10 @@ export class Chart extends Group implements IVisactorGraphic { return; } this._boundsChangeTag = true; + this._vchart.resize( + this._globalViewBox.x2 - this._globalViewBox.x1, + this._globalViewBox.y2 - this._globalViewBox.y1 + ); const rootBounds = this._getVChartRootMarkBounds(); this._vchart.getStage().defaultLayer.translateTo(-rootBounds.x1, -rootBounds.y1); this._BoundsViewBox = rootBounds; @@ -203,7 +207,7 @@ export class Chart extends Group implements IVisactorGraphic { viewBox.y2 -= viewBox.y1; viewBox.x1 = 0; viewBox.y1 = 0; - this._vchart.resize(viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1); + // this._vchart.resize(viewBox.x2 - viewBox.x1, viewBox.y2 - viewBox.y1); this._vchart.updateViewBox(viewBox); const renderViewBox = { ...rootBounds }; renderViewBox.x2 -= renderViewBox.x1; diff --git a/packages/vstory/src/story/interface/runtime-interface.ts b/packages/vstory/src/story/interface/runtime-interface.ts index 454f1f4e..279ea6c5 100644 --- a/packages/vstory/src/story/interface/runtime-interface.ts +++ b/packages/vstory/src/story/interface/runtime-interface.ts @@ -27,6 +27,7 @@ export interface IStoryCanvas { export interface IStory { readonly id: string; readonly player: IPlayer; + readonly characterTree: ICharacterTree; canvas: IStoryCanvas; getCharacters: () => { [key: string]: ICharacter }; getCharactersById: (key: string) => ICharacter | null; diff --git a/packages/vstory/src/story/story.ts b/packages/vstory/src/story/story.ts index 523a7cb5..edd0da96 100644 --- a/packages/vstory/src/story/story.ts +++ b/packages/vstory/src/story/story.ts @@ -34,6 +34,10 @@ export class Story implements IStory { return this._player; } + get characterTree() { + return this._characterTree; + } + constructor(spec: IStorySpec | null, option: IStoryInitOption) { this.id = 'test-mvp_' + Story._id_++; this._canvas = new StoryCanvas(this, { diff --git a/packages/vstory/src/story/utils/chart.ts b/packages/vstory/src/story/utils/chart.ts index 3e19558c..f7804033 100644 --- a/packages/vstory/src/story/utils/chart.ts +++ b/packages/vstory/src/story/utils/chart.ts @@ -155,11 +155,11 @@ export function mergeChartOption( if (!source) { return; } - if (source.performanceHook) { - pushHookToTemp(source.performanceHook); - delete source.performanceHook; - merge(target, source); + const { performanceHook, ...rest } = source; + if (performanceHook) { + pushHookToTemp(performanceHook); } + merge(target, rest); }); target.performanceHook = {}; Object.keys(performanceHook).forEach(k => { From a1e3d5b3e62df28985c6cacc9f172dc7441b19b3 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 4 Sep 2024 19:31:54 +0800 Subject: [PATCH 06/18] fix: fix the bugs of vchart graphic view box --- common/config/rush/pnpm-lock.yaml | 258 +++++++++++++++--------------- 1 file changed, 128 insertions(+), 130 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 61c65e7d..b5462db8 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1,10 +1,10 @@ lockfileVersion: 5.4 overrides: - '@visactor/vrender': 0.20.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vrender-components': 0.20.1 + '@visactor/vrender': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vrender-components': 0.20.1-alpha.5 importers: @@ -18,7 +18,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vstory': workspace:0.0.8-alpha.1 + '@visactor/vstory': workspace:0.0.5 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 chalk: ^3.0.0 @@ -75,13 +75,12 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.12.2 - '@visactor/vchart-extension': 0.0.2 - '@visactor/vdataset': ~0.18.4 - '@visactor/vrender': 0.20.1 - '@visactor/vrender-components': 0.20.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 + '@visactor/vchart': 1.12.1-alpha.1 + '@visactor/vchart-extension': 0.0.2-alpha.2 + '@visactor/vrender': 0.20.1-alpha.5 + '@visactor/vrender-components': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 '@visactor/vutils': ~0.18.4 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -97,13 +96,12 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.12.2 - '@visactor/vchart-extension': 0.0.2 - '@visactor/vdataset': 0.18.15 - '@visactor/vrender': 0.20.1 - '@visactor/vrender-components': 0.20.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 + '@visactor/vchart': 1.12.1-alpha.1 + '@visactor/vchart-extension': 0.0.2-alpha.2 + '@visactor/vrender': 0.20.1-alpha.5 + '@visactor/vrender-components': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 '@visactor/vutils': 0.18.8 devDependencies: '@douyinfe/semi-ui': 2.62.1_nnrd3gsncyragczmpvfhocinkq @@ -178,7 +176,7 @@ importers: '@rushstack/eslint-patch': ~1.1.4 '@types/node': '*' '@types/node-fetch': 2.6.4 - '@visactor/vstory': workspace:0.0.8-alpha.1 + '@visactor/vstory': workspace:0.0.5 eslint: ~8.18.0 form-data: ~4.0.0 node-fetch: 2.6.6 @@ -3215,41 +3213,41 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@visactor/vchart-extension/0.0.2: - resolution: {integrity: sha512-zorwgQ9kgNhmYl2fO538vDtXiM00O0Ag6LGWL9I/87dCGjlCf0ote+bIKEbQJDfDGrvIf+EykBPfZlBDgHUMIg==} + /@visactor/vchart-extension/0.0.2-alpha.2: + resolution: {integrity: sha512-my2RrzbmqJNMUSec3H8t5WGdHBa0BcyCtclrseL1+XIRvDMQ96W/jnuQcKUlai5Lxq6BS/xW2fS9K1HBHC8ImQ==} dependencies: - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vchart/1.12.2: - resolution: {integrity: sha512-dFrw9XjoaBr+oVAOBxc6qn+54uR2yg7x05SiAqoOXSM9/zrTCLlqAsVo2OvZWclvhOVeDpA04cKIX+8CtUEFQw==} + /@visactor/vchart/1.12.1-alpha.1: + resolution: {integrity: sha512-2BeIYFa43OOPgheNjpTkcrhy79FBoUsu71RUp/Pi5Weg7kE+z+I/Vv5QIyuFpbRpvD/TMJOln6oTK2/ckaMbIA==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-hierarchy': 0.14.2 - '@visactor/vgrammar-projection': 0.14.2 - '@visactor/vgrammar-sankey': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vgrammar-venn': 0.14.2 - '@visactor/vgrammar-wordcloud': 0.14.2 - '@visactor/vgrammar-wordcloud-shape': 0.14.2 - '@visactor/vrender-components': 0.20.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - '@visactor/vutils-extension': 1.12.2 + '@visactor/vdataset': 0.18.14 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-hierarchy': 0.14.0 + '@visactor/vgrammar-projection': 0.14.0 + '@visactor/vgrammar-sankey': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vgrammar-venn': 0.14.0 + '@visactor/vgrammar-wordcloud': 0.14.0 + '@visactor/vgrammar-wordcloud-shape': 0.14.0 + '@visactor/vrender-components': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vscale': 0.18.14 + '@visactor/vutils': 0.18.14 + '@visactor/vutils-extension': 1.12.1-alpha.1 dev: false - /@visactor/vdataset/0.18.15: - resolution: {integrity: sha512-LWaaunGetH8ThWjz6CE7NMG/LcFS41lTl76UCNJM1msfQxyIsbtoHim7t+Hdvud76oRZM0rxX/V4iB/+JpMRfw==} + /@visactor/vdataset/0.18.14: + resolution: {integrity: sha512-9Oov72NOR+elxRjvNVN7Ai4ipDy2/pFjRgB4BEQL436mkz9Z9zadM+qt/m/lry9SoVdZSa54HCW26rCHmtcZXA==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 0.18.14 d3-dsv: 2.0.0 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -3265,140 +3263,140 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.14.2: - resolution: {integrity: sha512-lhBDjS+nZURx7/vYR9JLZJnsTfEC4JhCQ+SMwu2kugnU2aXWIUIR5RRQw/ZUF5MBCI6QF6Jn7sWmOnpqUEyaAA==} + /@visactor/vgrammar-coordinate/0.14.0: + resolution: {integrity: sha512-9ZxQ0BQmcxi70Bl5oHRe2xd4UVPTbjdHhyQOIT1l4X6fVUwyIf2nRibQILHOlQj+KN8AhrdQIuYp1rD6khecpg==} dependencies: - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-core/0.14.2: - resolution: {integrity: sha512-WOP1sm/MRhlFDgKwN+OeMW22+GJjvHUFRlbKEBBgNDhSSIYAtCNKvMb4Tj2NnFcScMxeAjUQ8+Sqv15BPt7RPA==} + /@visactor/vgrammar-core/0.14.0: + resolution: {integrity: sha512-VZu/9cPkjrG6xVx4KeV5zJpEYKfqMR4vov3nIKqgXgIuKgqLcVSrsFsthoYu9qi8xCbPtgZSFI2yo0qiB9wN3g==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-coordinate': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-components': 0.20.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vdataset': 0.18.14 + '@visactor/vgrammar-coordinate': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-components': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vscale': 0.18.14 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-hierarchy/0.14.2: - resolution: {integrity: sha512-ISmD0AgdIaWIn+qthcA8aUiv5wgWHG/EIgHUVtO6SSzFyN09W87IberKzrsbHMMOOXXYp1Afo41w4nbTRbaUBQ==} + /@visactor/vgrammar-hierarchy/0.14.0: + resolution: {integrity: sha512-Tme/aCx3m+tKcUu5X5BJLqc654YzNXpCc29s6T97DEev1PCvyGeTf/lvBUirnfSBkgoCbrfDZVpK/zOAUtrC0g==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-projection/0.14.2: - resolution: {integrity: sha512-BmCcw4gK6RYJbpmi1eRkdp5ShuCqRBAiktXb84K/m9I2GcdxIFcvAhEPlaKPdB4mjkp0Auojdt2815sB1xmwMQ==} + /@visactor/vgrammar-projection/0.14.0: + resolution: {integrity: sha512-/Y1ffjMl1j8X7TXHrni9IBQJkL7q1yzVaFILhXUjY3NnYXWuDGJKEgK1BX3KbJhZzGLjDLeRVATvSYN1pzkO4A==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vutils': 0.18.14 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.14.2: - resolution: {integrity: sha512-+Xf1VAPNHAxTBm0EYg5cmjj0O2f7s6sEyYDsRgw/Fq/zZisYXtSEtvm3ypPsifohebexubrk3kImeqC5TaDrSg==} + /@visactor/vgrammar-sankey/0.14.0: + resolution: {integrity: sha512-VVnmi7znTYnDQNAxW0stK14LSVFKSQe/flnavkVds91tgtT5+RBLE09Vqz9eH45n23nxHEfwrWA4sHiWfQ8mLg==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-util/0.14.2: - resolution: {integrity: sha512-/2h+qXPJEuGeSeC5+O98im4mvs+T41cmxH3LSSq+Ssf9i14LPsEmnAuvGuYl8+0L7VW53PVc71zbvbw9+Lg9Eg==} + /@visactor/vgrammar-util/0.14.0: + resolution: {integrity: sha512-h838qgT6IFHYtugTf7sC+rRvz2aU/W0EEnXX/cEeyvMAkuBgdC0Jq6vmGYAbmm+hwbhUREC5QvxudwSEEKCelg==} dependencies: - '@visactor/vrender-core': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-venn/0.14.2: - resolution: {integrity: sha512-T6L41kvP8IWonjoP/QBYmi3xcdoHJYM0WlxblEQA/rlRGhPDg54esYQNUOBqknsh3wWUGkiAMh20g25T7oi5BQ==} + /@visactor/vgrammar-venn/0.14.0: + resolution: {integrity: sha512-l8w802GiSs3oRhn9lvt5YERyQwvgaCHXlOMU26tQqssrR0u6tbdH0Q+crqL6jzLktwzVVfbVPRC3q1pBQU6geQ==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-wordcloud-shape/0.14.2: - resolution: {integrity: sha512-UQcw+4n/mDkMBkKTCBLYWOBIibzHWARmlcGe69Sh+zXyPh6XztOUchm8mhb75ugo67yUOiDYnl5ULi3xe9erkw==} + /@visactor/vgrammar-wordcloud-shape/0.14.0: + resolution: {integrity: sha512-gDMTVaryB37uTZSXYpf0Zih894lHVJQRrPZYSiHvu5Jj9FZcisqBU+G8Q1Lo4WZJVhfWvCeuv9tYHtR9Gvuw3A==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vscale': 0.18.14 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vgrammar-wordcloud/0.14.2: - resolution: {integrity: sha512-n85qdUOAlv5pXeTdDPfeHJmBzZTezh5iP0tzlr3+TjyjpV2WwhBfcIRUsS0yE0IF5F3FRbZ/guw33vig8Qj9/A==} + /@visactor/vgrammar-wordcloud/0.14.0: + resolution: {integrity: sha512-NYzNS9vKuZJJUvqshxA88ScH7fB57tdO/wvtBYTDwRp249xqK/uzrAtaOgzNj4bJ5vwu//R+i5hYOjzdQABebw==} dependencies: - '@visactor/vgrammar-core': 0.14.2 - '@visactor/vgrammar-util': 0.14.2 - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vgrammar-core': 0.14.0 + '@visactor/vgrammar-util': 0.14.0 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vrender-components/0.20.1: - resolution: {integrity: sha512-VKjpViUpfadGjwyA44X+AWr3MnUmCDeszad41eslaamfORSgT4QJ0pNYuVvMTdUSucnaOFkGZWerfbNG0CEChQ==} + /@visactor/vrender-components/0.20.1-alpha.5: + resolution: {integrity: sha512-X/Ruo1aE3nyjbZKiXsKtnsNkrQJarM25W86g4GAL96m17Q23q0w2gGa/PVjRXg0K5JXE7Hh9BjOpYB9/7Ek4Iw==} dependencies: - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vscale': 0.18.14 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vrender-core/0.20.1: - resolution: {integrity: sha512-bFui7C+iGNt3OiMRQvl8+uq25np3MGiUlpZJHfZfr71Itizf+jn4FrnSbfy3MgzIEamxhYOMwp7qBwzs0/p2vA==} + /@visactor/vrender-core/0.20.1-alpha.5: + resolution: {integrity: sha512-3WzmT1wxRxuCnJA7QO7sLdrlq/1JkpsSbqqCnBYi/S8EKwDnJCcKaKFuz9HUQA6v1ZN9AD4B2iitrJOHvgX/7g==} dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 0.18.14 color-convert: 2.0.1 dev: false - /@visactor/vrender-kits/0.20.1: - resolution: {integrity: sha512-1l4GLMdESX+FAwBsZePyZqQKx7YBNDHJ+HGjeIxJVm5yrUQGC1T2P+Z3DVgWCh9clhNPCPwpMa6AC0a5RUXKSQ==} + /@visactor/vrender-kits/0.20.1-alpha.5: + resolution: {integrity: sha512-jlgmytPlVThNNQE8x4NsyORKGGEyxsdjTUgClY+7buFIbY1m+r+dDtloutZfai4hPpK62jKs2p6cVByyZYYQ4w==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.20.1 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vutils': 0.18.14 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.20.1: - resolution: {integrity: sha512-eeBFxcNTL+0P3J52Y1jX+8nQPiaCF0b4T0ED777hUBKLOCRl1GI5kCJWvldtE5KalafW/696tJqp6KTbfxXY9Q==} + /@visactor/vrender/0.20.1-alpha.5: + resolution: {integrity: sha512-DvCpHIbbzS3fd01BOatLFBcWj5beZYL6qeal+YJM0WlpSHRLc/wiv4MXPTnWKtNjGc3e0HAyV3+yEfMahWQNxA==} dependencies: - '@visactor/vrender-core': 0.20.1 - '@visactor/vrender-kits': 0.20.1 + '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-kits': 0.20.1-alpha.5 dev: false - /@visactor/vscale/0.18.15: - resolution: {integrity: sha512-09dDWc6muJbOMxzp4odCsyLjqAF6u3BOx9kAJJ0tEpKE1AuHL4BTejNe697mJAnXqAo2ynAA+dn+cgWYiW1WQg==} + /@visactor/vscale/0.18.14: + resolution: {integrity: sha512-uhyI8yqOPyMurdwqz1oqcqfTXZebpY5kYdnOM5xG79Lz54L95YNZ1J5BNu+SOxOBWbul5hnyjVpdTbZIoujveQ==} dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vutils-extension/1.12.2: - resolution: {integrity: sha512-79JdieFcMWTvz6FuI1QhB2ssIOy+mu8chUfBCjYgmf9qOuD0fBzbQk1YmB3a17fNy3RQ+9w03ymzcBrl3J7Egw==} + /@visactor/vutils-extension/1.12.1-alpha.1: + resolution: {integrity: sha512-cUB3r8yIWTVcu8+VUXgsJMVX9frI0qj7mHutjd365FLZMSO/aIqow95Tm9mV+JYvdoXn2WGJ2FZ4Nem9uwop9g==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vdataset': 0.18.14 + '@visactor/vutils': 0.18.14 dev: false - /@visactor/vutils/0.18.15: - resolution: {integrity: sha512-gTw8n14SU4avmqZ6VwpHwqoDfOCq044M2QA43rViNaHBnOQ/ePOPRZHl0heSfGQoMIJSZUD7SowLnn5NJjVXYw==} + /@visactor/vutils/0.18.14: + resolution: {integrity: sha512-Yf6v+utbMd7kK5F2UqZ3pw7xDpsvm24MQHzUzX3OUVFq+kAmYSPIc7j5YigShnn5se9uoghpNo62Vk0+we0W5Q==} dependencies: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 From 9c4f31c4ee89b06f9854b7af184076ecab314db8 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 5 Sep 2024 20:00:49 +0800 Subject: [PATCH 07/18] feat: expand vchart viewbox 1px --- packages/vstory/demo/src/demos/VChartGraphic.tsx | 14 +++++++++++--- .../character/chart/graphic/vchart-graphic.ts | 4 +++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx index 3587f6f7..1497595c 100644 --- a/packages/vstory/demo/src/demos/VChartGraphic.tsx +++ b/packages/vstory/demo/src/demos/VChartGraphic.tsx @@ -656,9 +656,17 @@ export const VChartGraphic = () => { story.canvas.getStage().on('pointerdown', (event: any) => { console.log('stage on pointerdown', [...event.detailPath]); }); - // setTimeout(() => { - // story.getCharactersById(storySpec.characters[0].id)?.graphic.updateSpec(spec1, null, false, false); - // }, 3000); + window.vchart = vchart; + window.chartGraphic = story.getCharactersById(storySpec.characters[0].id); + window.updateSpec1 = () => { + window.chartGraphic?.graphic.updateSpec(spec1, null, false, false); + }; + window.updateSpec0 = () => { + window.chartGraphic?.graphic.updateSpec(spec, null, false, false); + }; + setTimeout(() => { + window.chartGraphic?.graphic.updateSpec(spec1, null, false, false); + }, 3000); }, []); return
; diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 3a7c9181..672faa99 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -187,7 +187,7 @@ export class Chart extends Group implements IVisactorGraphic { this._globalViewBox.y2 - this._globalViewBox.y1 ); const rootBounds = this._getVChartRootMarkBounds(); - this._vchart.getStage().defaultLayer.translateTo(-rootBounds.x1, -rootBounds.y1); + this._vchart.getStage().defaultLayer.translateTo(-rootBounds.x1 + 1, -rootBounds.y1 + 1); this._BoundsViewBox = rootBounds; const viewBox = { ...this._globalViewBox }; @@ -214,6 +214,8 @@ export class Chart extends Group implements IVisactorGraphic { renderViewBox.y2 -= renderViewBox.y1; renderViewBox.x1 = 0; renderViewBox.y1 = 0; + renderViewBox.x2 += 2; + renderViewBox.y2 += 2; // @ts-ignore this._vchart._compiler._view.renderer.setViewBox(renderViewBox, true); } From 77cc209f27efc116f18ec894aeaa1ff10f3e1a32 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 5 Sep 2024 20:02:01 +0800 Subject: [PATCH 08/18] feat: expand vchart viewbox 1px --- .../story/character/chart/graphic/vchart-graphic.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 672faa99..66bf64aa 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -6,6 +6,8 @@ import { genNumberType, Group } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; import { mergeChartOption } from '../../../utils/chart'; +const VIEW_BOX_EXPEND = 4; + export interface IChartGraphicAttribute extends IGroupGraphicAttribute { renderCanvas: HTMLCanvasElement; spec: any; @@ -187,7 +189,9 @@ export class Chart extends Group implements IVisactorGraphic { this._globalViewBox.y2 - this._globalViewBox.y1 ); const rootBounds = this._getVChartRootMarkBounds(); - this._vchart.getStage().defaultLayer.translateTo(-rootBounds.x1 + 1, -rootBounds.y1 + 1); + this._vchart + .getStage() + .defaultLayer.translateTo(-rootBounds.x1 + VIEW_BOX_EXPEND, -rootBounds.y1 + VIEW_BOX_EXPEND); this._BoundsViewBox = rootBounds; const viewBox = { ...this._globalViewBox }; @@ -214,8 +218,8 @@ export class Chart extends Group implements IVisactorGraphic { renderViewBox.y2 -= renderViewBox.y1; renderViewBox.x1 = 0; renderViewBox.y1 = 0; - renderViewBox.x2 += 2; - renderViewBox.y2 += 2; + renderViewBox.x2 += VIEW_BOX_EXPEND * 2; + renderViewBox.y2 += VIEW_BOX_EXPEND * 2; // @ts-ignore this._vchart._compiler._view.renderer.setViewBox(renderViewBox, true); } From ae95e947dbe66dfd75777c2ef773e01ad5c608ea Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 6 Sep 2024 10:58:03 +0800 Subject: [PATCH 09/18] feat: set vchart viewbox to 0px --- .../vstory/src/story/character/chart/graphic/vchart-graphic.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 66bf64aa..75d77bd9 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -6,7 +6,7 @@ import { genNumberType, Group } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; import { mergeChartOption } from '../../../utils/chart'; -const VIEW_BOX_EXPEND = 4; +const VIEW_BOX_EXPEND = 0; export interface IChartGraphicAttribute extends IGroupGraphicAttribute { renderCanvas: HTMLCanvasElement; From 44cf368a73d552fd1c17f505df2d54faa9133f70 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 6 Sep 2024 17:51:21 +0800 Subject: [PATCH 10/18] feat: chart-graphic support actual bound --- .../character/chart/graphic/vchart-graphic.ts | 31 ++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 75d77bd9..461c9662 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -1,3 +1,4 @@ +import type { IGroup } from '@visactor/vrender-core'; import type { IVisactorGraphic } from '../../visactor/interface'; import { Bounds, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils'; import type { IInitOption, ISpec, IVChart } from '@visactor/vchart'; @@ -53,11 +54,29 @@ export class Chart extends Group implements IVisactorGraphic { drawTag = false; protected _boundsChangeTag: boolean = true; - private _getVChartRootMarkBounds() { + private _getVChartBounds() { const stage = this._vchart.getStage(); return stage.defaultLayer.getChildByName('root').AABBBounds.clone(); } + getVChartActualBounds() { + const stage = this._vchart.getStage(); + const layer = stage.defaultLayer; + const root = stage.defaultLayer.getChildByName('root') as IGroup; + const bounds = new Bounds(); + root.forEachChildren((child: IGroup) => { + if (child.attribute.width || child.attribute.height) { + child.forEachChildren((_child: IGroup) => { + bounds.union(_child.AABBBounds); + }); + } else { + bounds.union(child.AABBBounds); + } + }); + bounds.translate(this.attribute.x + layer.attribute.x, this.attribute.y + layer.attribute.y); + return bounds; + } + doUpdateAABBBounds(full?: boolean): IAABBBounds { if (!this._vchart) { return super.doUpdateAABBBounds(); @@ -188,10 +207,8 @@ export class Chart extends Group implements IVisactorGraphic { this._globalViewBox.x2 - this._globalViewBox.x1, this._globalViewBox.y2 - this._globalViewBox.y1 ); - const rootBounds = this._getVChartRootMarkBounds(); - this._vchart - .getStage() - .defaultLayer.translateTo(-rootBounds.x1 + VIEW_BOX_EXPEND, -rootBounds.y1 + VIEW_BOX_EXPEND); + const rootBounds = this._getVChartBounds(); + this._vchart.getStage().defaultLayer.translateTo(-rootBounds.x1, -rootBounds.y1); this._BoundsViewBox = rootBounds; const viewBox = { ...this._globalViewBox }; @@ -218,8 +235,8 @@ export class Chart extends Group implements IVisactorGraphic { renderViewBox.y2 -= renderViewBox.y1; renderViewBox.x1 = 0; renderViewBox.y1 = 0; - renderViewBox.x2 += VIEW_BOX_EXPEND * 2; - renderViewBox.y2 += VIEW_BOX_EXPEND * 2; + renderViewBox.x2 += VIEW_BOX_EXPEND; + renderViewBox.y2 += VIEW_BOX_EXPEND; // @ts-ignore this._vchart._compiler._view.renderer.setViewBox(renderViewBox, true); } From 8d9e579851a10a8cf05e228b013113feffbd095d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 9 Sep 2024 14:42:29 +0800 Subject: [PATCH 11/18] fix: set vchart-graphic expand to 4 --- .../vstory/src/story/character/chart/graphic/vchart-graphic.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 461c9662..d04995d4 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -7,7 +7,7 @@ import { genNumberType, Group } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; import { mergeChartOption } from '../../../utils/chart'; -const VIEW_BOX_EXPEND = 0; +const VIEW_BOX_EXPEND = 4; export interface IChartGraphicAttribute extends IGroupGraphicAttribute { renderCanvas: HTMLCanvasElement; From eacf803b84d53a7df79ff52b1b93ee754741434d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Sep 2024 16:06:56 +0800 Subject: [PATCH 12/18] fix: fix vchart pick bug --- .../vstory/demo/src/demos/VChartGraphic.tsx | 2 ++ .../chart/graphic/vchart-graphic-picker.ts | 18 +++++------------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx index 1497595c..a72ab138 100644 --- a/packages/vstory/demo/src/demos/VChartGraphic.tsx +++ b/packages/vstory/demo/src/demos/VChartGraphic.tsx @@ -650,6 +650,8 @@ export const VChartGraphic = () => { vchart.on('pointerdown', (event: any) => { console.log('vchart on pointerdown', event); }); + story.canvas.getStage().defaultLayer.translate(200, 100); + // story.canvas.getStage().defaultLayer.scale(2, 2); vchart.getStage().on('pointerdown', (event: any) => { console.log('vchart stage on pointerdown', [...event.detailPath]); }); diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts index dbdcefde..58217922 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts @@ -1,15 +1,5 @@ -import type { IPoint } from '@visactor/vutils'; -import { inject, injectable, getTheme, CircleRender, getScaledStroke, CIRCLE_NUMBER_TYPE } from '@visactor/vrender'; -import type { - IGraphicAttribute, - ICircle, - IContext2d, - IMarkAttribute, - IThemeAttribute, - IGraphicPicker, - IGraphicRender, - IPickParams -} from '@visactor/vrender'; +import { injectable } from '@visactor/vrender'; +import type { IGraphicPicker, IPickParams } from '@visactor/vrender'; import type { Chart } from './vchart-graphic'; import { CHART_NUMBER_TYPE } from './vchart-graphic'; @@ -20,7 +10,7 @@ export class VChartPicker implements IGraphicPicker { contains(chart: any, point: any, params?: IPickParams): boolean | any { // 将当前的point转化到global - const matrix = chart.transMatrix.clone(); + const matrix = chart.parent.globalTransMatrix.clone(); const stageMatrix = chart.stage.window.getViewBoxTransform(); matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f); const toGlobalMatrix = matrix.getInverse(); @@ -31,6 +21,8 @@ export class VChartPicker implements IGraphicPicker { const vChart = (chart as Chart).vchart; const vchartStage = vChart.getStage(); vchartStage.dirtyBounds?.clear(); + const toChartMatrix = vchartStage.window.getViewBoxTransform(); + toChartMatrix.transformPoint(nextP, nextP); const graphic = vchartStage.pick(nextP.x, nextP.y); return graphic; } From 70f575fcf1f20320269c877162b2f8c7cf403481 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Sep 2024 16:13:08 +0800 Subject: [PATCH 13/18] feat: upgrade vchart --- common/config/rush/pnpm-lock.yaml | 270 +++++++++++++++++------------- packages/vstory/package.json | 2 +- 2 files changed, 155 insertions(+), 117 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index b5462db8..bc15ccf3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1,10 +1,10 @@ lockfileVersion: 5.4 overrides: - '@visactor/vrender': 0.20.1-alpha.5 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vrender-components': 0.20.1-alpha.5 + '@visactor/vrender': 0.20.1 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vrender-components': 0.20.1 importers: @@ -18,7 +18,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vstory': workspace:0.0.5 + '@visactor/vstory': workspace:0.0.8-alpha.1 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 chalk: ^3.0.0 @@ -75,12 +75,13 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.12.1-alpha.1 - '@visactor/vchart-extension': 0.0.2-alpha.2 - '@visactor/vrender': 0.20.1-alpha.5 - '@visactor/vrender-components': 0.20.1-alpha.5 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vchart': 1.12.4-alpha.1 + '@visactor/vchart-extension': 0.0.2 + '@visactor/vdataset': ~0.18.4 + '@visactor/vrender': 0.20.1 + '@visactor/vrender-components': 0.20.1 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 '@visactor/vutils': ~0.18.4 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -96,12 +97,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.12.1-alpha.1 - '@visactor/vchart-extension': 0.0.2-alpha.2 - '@visactor/vrender': 0.20.1-alpha.5 - '@visactor/vrender-components': 0.20.1-alpha.5 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vchart': 1.12.4-alpha.1 + '@visactor/vchart-extension': 0.0.2 + '@visactor/vdataset': 0.18.14 + '@visactor/vrender': 0.20.1 + '@visactor/vrender-components': 0.20.1 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 '@visactor/vutils': 0.18.8 devDependencies: '@douyinfe/semi-ui': 2.62.1_nnrd3gsncyragczmpvfhocinkq @@ -176,7 +178,7 @@ importers: '@rushstack/eslint-patch': ~1.1.4 '@types/node': '*' '@types/node-fetch': 2.6.4 - '@visactor/vstory': workspace:0.0.5 + '@visactor/vstory': workspace:0.0.8-alpha.1 eslint: ~8.18.0 form-data: ~4.0.0 node-fetch: 2.6.6 @@ -3213,32 +3215,32 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@visactor/vchart-extension/0.0.2-alpha.2: - resolution: {integrity: sha512-my2RrzbmqJNMUSec3H8t5WGdHBa0BcyCtclrseL1+XIRvDMQ96W/jnuQcKUlai5Lxq6BS/xW2fS9K1HBHC8ImQ==} + /@visactor/vchart-extension/0.0.2: + resolution: {integrity: sha512-zorwgQ9kgNhmYl2fO538vDtXiM00O0Ag6LGWL9I/87dCGjlCf0ote+bIKEbQJDfDGrvIf+EykBPfZlBDgHUMIg==} dependencies: - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vchart/1.12.1-alpha.1: - resolution: {integrity: sha512-2BeIYFa43OOPgheNjpTkcrhy79FBoUsu71RUp/Pi5Weg7kE+z+I/Vv5QIyuFpbRpvD/TMJOln6oTK2/ckaMbIA==} + /@visactor/vchart/1.12.4-alpha.1: + resolution: {integrity: sha512-8v0JdXIj6CrjsGQSD6A9goiCOIxC0lccpKJSCFkY04M6w6COAUzIRrCg2BX6nZFBIh+mCobgGvvy7B3wv2ugsw==} dependencies: - '@visactor/vdataset': 0.18.14 - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-hierarchy': 0.14.0 - '@visactor/vgrammar-projection': 0.14.0 - '@visactor/vgrammar-sankey': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vgrammar-venn': 0.14.0 - '@visactor/vgrammar-wordcloud': 0.14.0 - '@visactor/vgrammar-wordcloud-shape': 0.14.0 - '@visactor/vrender-components': 0.20.1-alpha.5 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vscale': 0.18.14 - '@visactor/vutils': 0.18.14 - '@visactor/vutils-extension': 1.12.1-alpha.1 + '@visactor/vdataset': 0.18.15 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-hierarchy': 0.14.5 + '@visactor/vgrammar-projection': 0.14.5 + '@visactor/vgrammar-sankey': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vgrammar-venn': 0.14.5 + '@visactor/vgrammar-wordcloud': 0.14.5 + '@visactor/vgrammar-wordcloud-shape': 0.14.5 + '@visactor/vrender-components': 0.20.1 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vscale': 0.18.15 + '@visactor/vutils': 0.18.15 + '@visactor/vutils-extension': 1.12.4-alpha.1 dev: false /@visactor/vdataset/0.18.14: @@ -3263,123 +3265,145 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.14.0: - resolution: {integrity: sha512-9ZxQ0BQmcxi70Bl5oHRe2xd4UVPTbjdHhyQOIT1l4X6fVUwyIf2nRibQILHOlQj+KN8AhrdQIuYp1rD6khecpg==} + /@visactor/vdataset/0.18.15: + resolution: {integrity: sha512-LWaaunGetH8ThWjz6CE7NMG/LcFS41lTl76UCNJM1msfQxyIsbtoHim7t+Hdvud76oRZM0rxX/V4iB/+JpMRfw==} dependencies: - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.14 + '@turf/flatten': 6.5.0 + '@turf/helpers': 6.5.0 + '@turf/rewind': 6.5.0 + '@visactor/vutils': 0.18.15 + d3-dsv: 2.0.0 + d3-geo: 1.12.1 + d3-hexbin: 0.2.2 + d3-hierarchy: 3.1.2 + eventemitter3: 4.0.7 + geobuf: 3.0.2 + geojson-dissolve: 3.1.0 + path-browserify: 1.0.1 + pbf: 3.2.1 + point-at-length: 1.1.0 + simple-statistics: 7.8.3 + simplify-geojson: 1.0.5 + topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-core/0.14.0: - resolution: {integrity: sha512-VZu/9cPkjrG6xVx4KeV5zJpEYKfqMR4vov3nIKqgXgIuKgqLcVSrsFsthoYu9qi8xCbPtgZSFI2yo0qiB9wN3g==} + /@visactor/vgrammar-coordinate/0.14.5: + resolution: {integrity: sha512-nfGPvBCXbtsY2yupZSP76+kXnOalP0/Wv6WWiCWW8gWXluiC8pB1HjmmrI82CUxEtJPELF5hBABaaCRw35WZlg==} dependencies: - '@visactor/vdataset': 0.18.14 - '@visactor/vgrammar-coordinate': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-components': 0.20.1-alpha.5 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vscale': 0.18.14 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-hierarchy/0.14.0: - resolution: {integrity: sha512-Tme/aCx3m+tKcUu5X5BJLqc654YzNXpCc29s6T97DEev1PCvyGeTf/lvBUirnfSBkgoCbrfDZVpK/zOAUtrC0g==} + /@visactor/vgrammar-core/0.14.5: + resolution: {integrity: sha512-cVisa48ycJnRxGptBorVVfLEi62MqpBnchUz7qUffkFobTd5t0ACKUttZMSfZksWFnhIuJRNMwqZs4mR5Ne4DQ==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vdataset': 0.18.15 + '@visactor/vgrammar-coordinate': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-components': 0.20.1 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vscale': 0.18.15 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-projection/0.14.0: - resolution: {integrity: sha512-/Y1ffjMl1j8X7TXHrni9IBQJkL7q1yzVaFILhXUjY3NnYXWuDGJKEgK1BX3KbJhZzGLjDLeRVATvSYN1pzkO4A==} + /@visactor/vgrammar-hierarchy/0.14.5: + resolution: {integrity: sha512-0bqIR802PXeSucOBWSUOGeaWbe47ldqBf+NohycIVa/Wu+cCSgbk9GAaxh0/vTgHQiT384kjfuV+yUt/wlaG3A==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vutils': 0.18.15 + dev: false + + /@visactor/vgrammar-projection/0.14.5: + resolution: {integrity: sha512-O84R4HH0j2Et/No2LGMF3xu0+p0hyKMhifn4P2kCW4ts+vjw4xKYOfq/SbZuUUKSnBaCt2Kkait+E8hmSv9y4w==} + dependencies: + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vutils': 0.18.15 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.14.0: - resolution: {integrity: sha512-VVnmi7znTYnDQNAxW0stK14LSVFKSQe/flnavkVds91tgtT5+RBLE09Vqz9eH45n23nxHEfwrWA4sHiWfQ8mLg==} + /@visactor/vgrammar-sankey/0.14.5: + resolution: {integrity: sha512-ie8cG4xSG4O4sMNm3lKBoRsmIF/scGJ//j+fQ0otmRYDeG7hZJmnXzRPxhynJocE5UuAHyykXbGf7mJuexGXog==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-util/0.14.0: - resolution: {integrity: sha512-h838qgT6IFHYtugTf7sC+rRvz2aU/W0EEnXX/cEeyvMAkuBgdC0Jq6vmGYAbmm+hwbhUREC5QvxudwSEEKCelg==} + /@visactor/vgrammar-util/0.14.5: + resolution: {integrity: sha512-IjsDcdjaypiA8kUZR6a0L8yXdFhhvIabCezVfuoE6l39uOCPUPEiilzot7LNBG37Q4NWkxEPu359Ngh5XHYRpw==} dependencies: - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vrender-core': 0.20.1 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-venn/0.14.0: - resolution: {integrity: sha512-l8w802GiSs3oRhn9lvt5YERyQwvgaCHXlOMU26tQqssrR0u6tbdH0Q+crqL6jzLktwzVVfbVPRC3q1pBQU6geQ==} + /@visactor/vgrammar-venn/0.14.5: + resolution: {integrity: sha512-Omqk9uXZKos8x8mj4v3lm5aPIMqsJM+LnDGW4Oii2/0loWr9xcGu4TgBqpt4dn78thSEvbQQvssqAwVNrnqM/g==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-wordcloud-shape/0.14.0: - resolution: {integrity: sha512-gDMTVaryB37uTZSXYpf0Zih894lHVJQRrPZYSiHvu5Jj9FZcisqBU+G8Q1Lo4WZJVhfWvCeuv9tYHtR9Gvuw3A==} + /@visactor/vgrammar-wordcloud-shape/0.14.5: + resolution: {integrity: sha512-zXrttFEnPVvBv/RnsefM+396Cd21MrlRwiFs+mWM2GcqWs20qf72BceMORNnj1B+2u6kL1ouGqj2XyE2hQowPg==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vscale': 0.18.14 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vscale': 0.18.15 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vgrammar-wordcloud/0.14.0: - resolution: {integrity: sha512-NYzNS9vKuZJJUvqshxA88ScH7fB57tdO/wvtBYTDwRp249xqK/uzrAtaOgzNj4bJ5vwu//R+i5hYOjzdQABebw==} + /@visactor/vgrammar-wordcloud/0.14.5: + resolution: {integrity: sha512-uCCO8liBwTAuBE4wcWKLngpHiRy+JQM1W1Yq7sEF38t+hcPp/zheOkFiPcWoTpLiR+w/rjBDRjq1Z8CGuU2Qqg==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 - '@visactor/vutils': 0.18.14 + '@visactor/vgrammar-core': 0.14.5 + '@visactor/vgrammar-util': 0.14.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 + '@visactor/vutils': 0.18.15 dev: false - /@visactor/vrender-components/0.20.1-alpha.5: - resolution: {integrity: sha512-X/Ruo1aE3nyjbZKiXsKtnsNkrQJarM25W86g4GAL96m17Q23q0w2gGa/PVjRXg0K5JXE7Hh9BjOpYB9/7Ek4Iw==} + /@visactor/vrender-components/0.20.1: + resolution: {integrity: sha512-VKjpViUpfadGjwyA44X+AWr3MnUmCDeszad41eslaamfORSgT4QJ0pNYuVvMTdUSucnaOFkGZWerfbNG0CEChQ==} dependencies: - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 '@visactor/vscale': 0.18.14 '@visactor/vutils': 0.18.14 dev: false - /@visactor/vrender-core/0.20.1-alpha.5: - resolution: {integrity: sha512-3WzmT1wxRxuCnJA7QO7sLdrlq/1JkpsSbqqCnBYi/S8EKwDnJCcKaKFuz9HUQA6v1ZN9AD4B2iitrJOHvgX/7g==} + /@visactor/vrender-core/0.20.1: + resolution: {integrity: sha512-bFui7C+iGNt3OiMRQvl8+uq25np3MGiUlpZJHfZfr71Itizf+jn4FrnSbfy3MgzIEamxhYOMwp7qBwzs0/p2vA==} dependencies: '@visactor/vutils': 0.18.14 color-convert: 2.0.1 dev: false - /@visactor/vrender-kits/0.20.1-alpha.5: - resolution: {integrity: sha512-jlgmytPlVThNNQE8x4NsyORKGGEyxsdjTUgClY+7buFIbY1m+r+dDtloutZfai4hPpK62jKs2p6cVByyZYYQ4w==} + /@visactor/vrender-kits/0.20.1: + resolution: {integrity: sha512-1l4GLMdESX+FAwBsZePyZqQKx7YBNDHJ+HGjeIxJVm5yrUQGC1T2P+Z3DVgWCh9clhNPCPwpMa6AC0a5RUXKSQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1 '@visactor/vutils': 0.18.14 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.20.1-alpha.5: - resolution: {integrity: sha512-DvCpHIbbzS3fd01BOatLFBcWj5beZYL6qeal+YJM0WlpSHRLc/wiv4MXPTnWKtNjGc3e0HAyV3+yEfMahWQNxA==} + /@visactor/vrender/0.20.1: + resolution: {integrity: sha512-eeBFxcNTL+0P3J52Y1jX+8nQPiaCF0b4T0ED777hUBKLOCRl1GI5kCJWvldtE5KalafW/696tJqp6KTbfxXY9Q==} dependencies: - '@visactor/vrender-core': 0.20.1-alpha.5 - '@visactor/vrender-kits': 0.20.1-alpha.5 + '@visactor/vrender-core': 0.20.1 + '@visactor/vrender-kits': 0.20.1 dev: false /@visactor/vscale/0.18.14: @@ -3388,11 +3412,17 @@ packages: '@visactor/vutils': 0.18.14 dev: false - /@visactor/vutils-extension/1.12.1-alpha.1: - resolution: {integrity: sha512-cUB3r8yIWTVcu8+VUXgsJMVX9frI0qj7mHutjd365FLZMSO/aIqow95Tm9mV+JYvdoXn2WGJ2FZ4Nem9uwop9g==} + /@visactor/vscale/0.18.15: + resolution: {integrity: sha512-09dDWc6muJbOMxzp4odCsyLjqAF6u3BOx9kAJJ0tEpKE1AuHL4BTejNe697mJAnXqAo2ynAA+dn+cgWYiW1WQg==} dependencies: - '@visactor/vdataset': 0.18.14 - '@visactor/vutils': 0.18.14 + '@visactor/vutils': 0.18.15 + dev: false + + /@visactor/vutils-extension/1.12.4-alpha.1: + resolution: {integrity: sha512-OCFEyybAhJFxd3IrlLtedFG7NnvJ/3JJhBf3fPsxAU7DuXdZqeVwgKpgWhviXd2h0zTlwRVZqC54nDvX7gHr5g==} + dependencies: + '@visactor/vdataset': 0.18.15 + '@visactor/vutils': 0.18.15 dev: false /@visactor/vutils/0.18.14: @@ -3403,6 +3433,14 @@ packages: eventemitter3: 4.0.7 dev: false + /@visactor/vutils/0.18.15: + resolution: {integrity: sha512-gTw8n14SU4avmqZ6VwpHwqoDfOCq044M2QA43rViNaHBnOQ/ePOPRZHl0heSfGQoMIJSZUD7SowLnn5NJjVXYw==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + dev: false + /@visactor/vutils/0.18.8: resolution: {integrity: sha512-9+YODg9msVyObDbamt94lsEF/idV8gyW3lf31DhuKsLKbuB/ajvSg6jNKD/FTMoXpmCNwfZgZ0F6wXLwI5aIpw==} dependencies: diff --git a/packages/vstory/package.json b/packages/vstory/package.json index 2bc5d9b2..dcbf67ff 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -24,7 +24,7 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vchart": "1.12.2", + "@visactor/vchart": "1.12.4-alpha.1", "@visactor/vrender": "0.20.1", "@visactor/vrender-core": "0.20.1", "@visactor/vrender-kits": "0.20.1", From 762787b9bf9453962231cfb9308bcf8f32929f90 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Sep 2024 16:35:19 +0800 Subject: [PATCH 14/18] feat: release alpha --- packages/vstory/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vstory/package.json b/packages/vstory/package.json index dcbf67ff..7c6a8cc8 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory", - "version": "0.0.8-alpha.1", + "version": "0.0.8-alpha.2", "description": "", "sideEffects": true, "main": "cjs/index.js", From 092074910612f7dec9c111c108596302e1f2552d Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Sep 2024 18:12:09 +0800 Subject: [PATCH 15/18] fix: fix vchart pick bug by user Rect to be vchart-graphic parent class --- .../vstory/demo/src/demos/VChartGraphic.tsx | 130 ++++++++++++++---- .../chart/graphic/vchart-graphic-picker.ts | 7 +- .../character/chart/graphic/vchart-graphic.ts | 4 +- .../vstory/src/story/utils/vchart-pick.ts | 6 + 4 files changed, 117 insertions(+), 30 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx index a72ab138..a172261b 100644 --- a/packages/vstory/demo/src/demos/VChartGraphic.tsx +++ b/packages/vstory/demo/src/demos/VChartGraphic.tsx @@ -25,8 +25,7 @@ const spec = { bar: { style: { stroke: '', - lineWidth: 1, - fill: 'red' + lineWidth: 1 }, state: { hover: { @@ -576,7 +575,7 @@ const storySpec: IStorySpec = { id: 'scene0', actions: [ { - characterId: '58e9a996-7460-44de-8c7a-eceae2260308', + characterId: 'vchart', characterActions: [ { startTime: 0, @@ -595,6 +594,42 @@ const storySpec: IStorySpec = { } } ] + }, + { + characterId: 'vchart2', + characterActions: [ + { + startTime: 0, + action: 'appear', + selector: '*', + payload: { + style: {}, + animation: { + effect: 'fade', + move: { + pos: 'top' + }, + duration: 1000, + easing: 'linear' + } + } + } + ] + }, + { + characterId: 'rect', + characterActions: [ + { + startTime: 1, + duration: 800, + action: 'appear', + payload: { + animation: { + duration: 700 + } + } + } + ] } ] } @@ -602,15 +637,38 @@ const storySpec: IStorySpec = { } ], characters: [ + { + type: 'Rect', + id: 'rect', + zIndex: 0, + position: { + top: 50, + left: 10, + width: 500, + height: 200 + }, + options: { + graphic: { + fill: 'red', + visible: false + }, + text: { + text: 'title2', + fill: 'black' + }, + angle: 0, + shapePoints: [] + } + }, { type: 'VChart', - id: '58e9a996-7460-44de-8c7a-eceae2260308', - zIndex: 200, + id: 'vchart', + zIndex: 100, position: { - top: 125, - left: 79.5, - bottom: 419.8, - right: 679.5 + x: 100, + y: 100, + width: 400, + height: 400 }, options: { spec: spec, @@ -628,6 +686,33 @@ const storySpec: IStorySpec = { } } } + }, + { + type: 'VChart', + id: 'vchart2', + zIndex: 200, + position: { + x: 50, + y: 150, + width: 400, + height: 400 + }, + options: { + spec: { ...spec, color: ['red', 'blue'] }, + initOption: { + animation: false, + interactive: true, + disableTriggerEvent: false, + performanceHook: { + afterInitializeChart: () => { + console.log('afterInitializeChart'); + }, + afterVRenderDraw: () => { + console.log('afterVRenderDraw'); + } + } + } + } } ] }; @@ -644,31 +729,24 @@ export const VChartGraphic = () => { const edit = new Edit(story); window.edit = edit; - const vchart = story.getCharactersById('58e9a996-7460-44de-8c7a-eceae2260308')?.graphic.vchart; + const vchart = story.getCharactersById('vchart')?.graphic.vchart; window.vchart = vchart; + const vchart2 = story.getCharactersById('vchart2')?.graphic.vchart; + window.vchart2 = vchart2; console.log('vchart', vchart); vchart.on('pointerdown', (event: any) => { console.log('vchart on pointerdown', event); }); - story.canvas.getStage().defaultLayer.translate(200, 100); - // story.canvas.getStage().defaultLayer.scale(2, 2); - vchart.getStage().on('pointerdown', (event: any) => { - console.log('vchart stage on pointerdown', [...event.detailPath]); + vchart2.on('pointerdown', (event: any) => { + console.log('vchart2 on pointerdown', event); }); + story.canvas.getStage().defaultLayer.translate(200, 100); story.canvas.getStage().on('pointerdown', (event: any) => { - console.log('stage on pointerdown', [...event.detailPath]); + console.log('stage on pointerdown', [...event.detailPath], event.detailPath?.[2]?._uid); }); - window.vchart = vchart; - window.chartGraphic = story.getCharactersById(storySpec.characters[0].id); - window.updateSpec1 = () => { - window.chartGraphic?.graphic.updateSpec(spec1, null, false, false); - }; - window.updateSpec0 = () => { - window.chartGraphic?.graphic.updateSpec(spec, null, false, false); - }; - setTimeout(() => { - window.chartGraphic?.graphic.updateSpec(spec1, null, false, false); - }, 3000); + // setTimeout(() => { + // window.chartGraphic?.graphic.updateSpec(spec1, null, false, false); + // }, 3000); }, []); return
; diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts index 58217922..49461f76 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts @@ -23,7 +23,10 @@ export class VChartPicker implements IGraphicPicker { vchartStage.dirtyBounds?.clear(); const toChartMatrix = vchartStage.window.getViewBoxTransform(); toChartMatrix.transformPoint(nextP, nextP); - const graphic = vchartStage.pick(nextP.x, nextP.y); - return graphic; + const pick = vchartStage.pick(nextP.x, nextP.y); + if (pick.graphic === null && pick.group.name === 'root') { + return false; + } + return pick; } } diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index d04995d4..e3779ace 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -3,7 +3,7 @@ import type { IVisactorGraphic } from '../../visactor/interface'; import { Bounds, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils'; import type { IInitOption, ISpec, IVChart } from '@visactor/vchart'; import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender'; -import { genNumberType, Group } from '@visactor/vrender'; +import { genNumberType, Rect } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; import { mergeChartOption } from '../../../utils/chart'; @@ -30,7 +30,7 @@ export interface IChartGraphicAttribute extends IGroupGraphicAttribute { export const CHART_NUMBER_TYPE = genNumberType(); // @ts-ignore -export class Chart extends Group implements IVisactorGraphic { +export class Chart extends Rect implements IVisactorGraphic { type: GraphicType = 'chart' as any; declare attribute: IChartGraphicAttribute; protected _vchart: IVChart; diff --git a/packages/vstory/src/story/utils/vchart-pick.ts b/packages/vstory/src/story/utils/vchart-pick.ts index 530588f7..23868a75 100644 --- a/packages/vstory/src/story/utils/vchart-pick.ts +++ b/packages/vstory/src/story/utils/vchart-pick.ts @@ -196,6 +196,12 @@ export function getGraphicModelMark( graphicPath: IGraphic[], index: number ): IPickModelInfo { + if (!graphic) { + return null; + } + if (graphic.layer !== chart.getStage().layer) { + return null; + } const modelPick = modelCheck.find(mc => mc.check(graphic, graphicPath)); if (modelPick) { return modelPick.modelInfo(chart, graphic, graphicPath, index); From 8460a8cf260a08f20b620a94489994b0b007e8d0 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Wed, 11 Sep 2024 18:13:18 +0800 Subject: [PATCH 16/18] fix: fix vchart pick bug by user Rect to be vchart-graphic parent class --- common/config/rush/pnpm-lock.yaml | 4 ++-- docs/package.json | 2 +- tools/bugserver-trigger/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index bc15ccf3..eb3a06b2 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -18,7 +18,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vstory': workspace:0.0.8-alpha.1 + '@visactor/vstory': workspace:0.0.8-alpha.2 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 chalk: ^3.0.0 @@ -178,7 +178,7 @@ importers: '@rushstack/eslint-patch': ~1.1.4 '@types/node': '*' '@types/node-fetch': 2.6.4 - '@visactor/vstory': workspace:0.0.8-alpha.1 + '@visactor/vstory': workspace:0.0.8-alpha.2 eslint: ~8.18.0 form-data: ~4.0.0 node-fetch: 2.6.6 diff --git a/docs/package.json b/docs/package.json index df6ea2a3..085fb60d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@arco-design/web-react": "2.46.1", - "@visactor/vstory": "workspace:0.0.8-alpha.1", + "@visactor/vstory": "workspace:0.0.8-alpha.2", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", diff --git a/tools/bugserver-trigger/package.json b/tools/bugserver-trigger/package.json index 67c0241a..f856dba2 100644 --- a/tools/bugserver-trigger/package.json +++ b/tools/bugserver-trigger/package.json @@ -8,7 +8,7 @@ "ci": "ts-node --transpileOnly --skipProject ./scripts/trigger-test.ts" }, "dependencies": { - "@visactor/vstory": "workspace:0.0.8-alpha.1" + "@visactor/vstory": "workspace:0.0.8-alpha.2" }, "devDependencies": { "@rushstack/eslint-patch": "~1.1.4", From 525427e267545ca4aa43502e9734c227624654f6 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 12 Sep 2024 10:08:45 +0800 Subject: [PATCH 17/18] fix: fix vchart pick bug by user Graphic to be vchart-graphic parent class --- .../vstory/demo/src/demos/VChartGraphic.tsx | 120 +++++++++--------- .../character/chart/graphic/vchart-graphic.ts | 9 +- 2 files changed, 65 insertions(+), 64 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx index a172261b..c46e6f47 100644 --- a/packages/vstory/demo/src/demos/VChartGraphic.tsx +++ b/packages/vstory/demo/src/demos/VChartGraphic.tsx @@ -595,27 +595,27 @@ const storySpec: IStorySpec = { } ] }, - { - characterId: 'vchart2', - characterActions: [ - { - startTime: 0, - action: 'appear', - selector: '*', - payload: { - style: {}, - animation: { - effect: 'fade', - move: { - pos: 'top' - }, - duration: 1000, - easing: 'linear' - } - } - } - ] - }, + // { + // characterId: 'vchart2', + // characterActions: [ + // { + // startTime: 0, + // action: 'appear', + // selector: '*', + // payload: { + // style: {}, + // animation: { + // effect: 'fade', + // move: { + // pos: 'top' + // }, + // duration: 1000, + // easing: 'linear' + // } + // } + // } + // ] + // }, { characterId: 'rect', characterActions: [ @@ -686,34 +686,34 @@ const storySpec: IStorySpec = { } } } - }, - { - type: 'VChart', - id: 'vchart2', - zIndex: 200, - position: { - x: 50, - y: 150, - width: 400, - height: 400 - }, - options: { - spec: { ...spec, color: ['red', 'blue'] }, - initOption: { - animation: false, - interactive: true, - disableTriggerEvent: false, - performanceHook: { - afterInitializeChart: () => { - console.log('afterInitializeChart'); - }, - afterVRenderDraw: () => { - console.log('afterVRenderDraw'); - } - } - } - } } + // { + // type: 'VChart', + // id: 'vchart2', + // zIndex: 200, + // position: { + // x: 50, + // y: 150, + // width: 400, + // height: 400 + // }, + // options: { + // spec: { ...spec, color: ['red', 'blue'] }, + // initOption: { + // animation: false, + // interactive: true, + // disableTriggerEvent: false, + // performanceHook: { + // afterInitializeChart: () => { + // console.log('afterInitializeChart'); + // }, + // afterVRenderDraw: () => { + // console.log('afterVRenderDraw'); + // } + // } + // } + // } + // } ] }; @@ -729,18 +729,18 @@ export const VChartGraphic = () => { const edit = new Edit(story); window.edit = edit; - const vchart = story.getCharactersById('vchart')?.graphic.vchart; - window.vchart = vchart; - const vchart2 = story.getCharactersById('vchart2')?.graphic.vchart; - window.vchart2 = vchart2; - console.log('vchart', vchart); - vchart.on('pointerdown', (event: any) => { - console.log('vchart on pointerdown', event); - }); - vchart2.on('pointerdown', (event: any) => { - console.log('vchart2 on pointerdown', event); - }); - story.canvas.getStage().defaultLayer.translate(200, 100); + // const vchart = story.getCharactersById('vchart')?.graphic.vchart; + // window.vchart = vchart; + // const vchart2 = story.getCharactersById('vchart2')?.graphic.vchart; + // window.vchart2 = vchart2; + // console.log('vchart', vchart); + // vchart.on('pointerdown', (event: any) => { + // console.log('vchart on pointerdown', event); + // }); + // vchart2.on('pointerdown', (event: any) => { + // console.log('vchart2 on pointerdown', event); + // }); + // story.canvas.getStage().defaultLayer.translate(200, 100); story.canvas.getStage().on('pointerdown', (event: any) => { console.log('stage on pointerdown', [...event.detailPath], event.detailPath?.[2]?._uid); }); diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index e3779ace..30431307 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -2,14 +2,14 @@ import type { IGroup } from '@visactor/vrender-core'; import type { IVisactorGraphic } from '../../visactor/interface'; import { Bounds, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils'; import type { IInitOption, ISpec, IVChart } from '@visactor/vchart'; -import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender'; -import { genNumberType, Rect } from '@visactor/vrender'; +import type { GraphicType, IGraphicAttribute, ITicker } from '@visactor/vrender'; +import { genNumberType, Graphic } from '@visactor/vrender'; import { isPointInBounds } from '../../../../util/space'; import { mergeChartOption } from '../../../utils/chart'; const VIEW_BOX_EXPEND = 4; -export interface IChartGraphicAttribute extends IGroupGraphicAttribute { +export interface IChartGraphicAttribute extends IGraphicAttribute { renderCanvas: HTMLCanvasElement; spec: any; ClassType: any; @@ -25,12 +25,13 @@ export interface IChartGraphicAttribute extends IGroupGraphicAttribute { ticker?: ITicker; autoRender?: boolean; chartInitOptions?: any; + enablePickBounds?: boolean; } export const CHART_NUMBER_TYPE = genNumberType(); // @ts-ignore -export class Chart extends Rect implements IVisactorGraphic { +export class Chart extends Graphic implements IVisactorGraphic { type: GraphicType = 'chart' as any; declare attribute: IChartGraphicAttribute; protected _vchart: IVChart; From 0c00af6e05ebab38554ea8a6f006406a93ac4cc0 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Thu, 12 Sep 2024 10:47:10 +0800 Subject: [PATCH 18/18] fix: fix attribute type error --- .../src/story/character/chart/graphic/vchart-graphic-picker.ts | 1 + .../vstory/src/story/character/chart/graphic/vchart-graphic.ts | 3 +++ 2 files changed, 4 insertions(+) diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts index 49461f76..9167ee00 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-picker.ts @@ -24,6 +24,7 @@ export class VChartPicker implements IGraphicPicker { const toChartMatrix = vchartStage.window.getViewBoxTransform(); toChartMatrix.transformPoint(nextP, nextP); const pick = vchartStage.pick(nextP.x, nextP.y); + // @ts-ignore if (pick.graphic === null && pick.group.name === 'root') { return false; } diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts index 30431307..2e214fc2 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts @@ -26,6 +26,8 @@ export interface IChartGraphicAttribute extends IGraphicAttribute { autoRender?: boolean; chartInitOptions?: any; enablePickBounds?: boolean; + width: number; + height: number; } export const CHART_NUMBER_TYPE = genNumberType(); @@ -216,6 +218,7 @@ export class Chart extends Graphic implements IVisactorGraphic { this.setAttributes({ x: viewBox.x1 + rootBounds.x1, y: viewBox.y1 + rootBounds.y1, + // @ts-ignore width: rootBounds.x2 - rootBounds.x1, height: rootBounds.y2 - rootBounds.y1 });