From 443f808f63d94116bf82e511c936e12d30c5de2d Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Tue, 11 Jun 2024 15:48:24 +0800 Subject: [PATCH] feat: support zindex --- packages/vstory/demo/src/demos/StoryEdit.tsx | 8 +- .../src/story/character/chart/character.ts | 22 ++-- .../story/character/component/character.ts | 124 ++++++++++-------- .../visactor/data-temp-transform-base.ts | 1 - 4 files changed, 82 insertions(+), 73 deletions(-) diff --git a/packages/vstory/demo/src/demos/StoryEdit.tsx b/packages/vstory/demo/src/demos/StoryEdit.tsx index b28b2ed0..371bcfac 100644 --- a/packages/vstory/demo/src/demos/StoryEdit.tsx +++ b/packages/vstory/demo/src/demos/StoryEdit.tsx @@ -24,11 +24,11 @@ export const StoryEdit = () => { { type: 'RectComponent', id: 'test-graphics-0', - zIndex: 0, + zIndex: 10, position: { top: 40, left: 50, - width: 200, + width: 250, height: 100 }, options: { @@ -69,9 +69,9 @@ export const StoryEdit = () => { { type: 'BarChart', id: 'test-chart-0', - zIndex: 0, + zIndex: 9, position: { - top: 200, + top: 100, left: 100, width: 400, height: 400 diff --git a/packages/vstory/src/story/character/chart/character.ts b/packages/vstory/src/story/character/chart/character.ts index f0ef4ef1..5f9e5d3a 100644 --- a/packages/vstory/src/story/character/chart/character.ts +++ b/packages/vstory/src/story/character/chart/character.ts @@ -1,20 +1,20 @@ import { CommonSpecRuntime } from './runtime/common-spec'; import { ComponentSpecRuntime } from './runtime/component-spec'; -import { IChartCharacterRuntimeConstructor } from './runtime/interface'; +import type { IChartCharacterRuntimeConstructor } from './runtime/interface'; import { cloneDeep } from '@visactor/vutils'; import { VChart } from '@visactor/vchart'; -import { IChartCharacterSpec } from '../dsl-interface'; +import type { IChartCharacterSpec } from '../dsl-interface'; import { Chart } from './graphic/vchart-graphic'; import { getLayoutFromWidget } from '../../utils/layout'; import { CharacterVisactor } from '../visactor/character'; import { SpecProcess } from './spec-process/spec-process'; import { ChartDataTempTransform } from './spec-process/data-temp-transform'; -import { ITicker } from '@visactor/vrender-core'; +import type { ITicker } from '@visactor/vrender-core'; import { manualTicker } from '../../player/ticker'; -import { IChartTemp } from './temp/interface'; +import type { IChartTemp } from './temp/interface'; import { SeriesSpecRuntime } from './runtime/series-spec'; -import { StoryEvent } from '../../interface/runtime-interface'; -import { ICharacterPickInfo } from '../runtime-interface'; +import type { StoryEvent } from '../../interface/runtime-interface'; +import type { ICharacterPickInfo } from '../runtime-interface'; const tempSpec = { type: 'bar', @@ -82,6 +82,7 @@ export class CharacterChart extends CharacterVisactor { spec: spec, ClassType: VChart, vchart: null, + zIndex: this._spec.zIndex, mode: 'desktop-browser', dpr: window.devicePixelRatio, interactive: false, @@ -109,14 +110,15 @@ export class CharacterChart extends CharacterVisactor { } protected _afterRender(): void { - console.log('afterRender'); + // console.log('afterRender'); + return; } protected _updateVisactorSpec(): void { - console.log('_updateVisactorSpec', this._specProcess.getVisSpec()); + // console.log('_updateVisactorSpec', this._specProcess.getVisSpec()); this._graphic?.updateSpec(this._specProcess.getVisSpec()); } - public clearCharacter(): void { + clearCharacter(): void { this._graphic.vProduct.release(); this._graphic.parent.removeChild(this._graphic); } @@ -125,7 +127,7 @@ export class CharacterChart extends CharacterVisactor { this._ticker.tickAt(t); } - public checkEvent(event: StoryEvent): false | ICharacterPickInfo { + checkEvent(event: StoryEvent): false | ICharacterPickInfo { return false; } } diff --git a/packages/vstory/src/story/character/component/character.ts b/packages/vstory/src/story/character/component/character.ts index cfac913c..4484edce 100644 --- a/packages/vstory/src/story/character/component/character.ts +++ b/packages/vstory/src/story/character/component/character.ts @@ -34,7 +34,11 @@ export abstract class CharacterComponent extends CharacterBase { } protected _initGraphics(): void { - this._group = createGroup({ ...getLayoutFromWidget(this._spec.position), angle: this._spec.options.angle }); + this._group = createGroup({ + ...getLayoutFromWidget(this._spec.position), + angle: this._spec.options.angle, + zIndex: this._spec.zIndex + }); this.option.graphicParent.add(this._group); this._graphic = this._createGraphic(); @@ -91,60 +95,64 @@ export abstract class CharacterComponent extends CharacterBase { } } -export abstract class CharacterGraphicComponent extends CharacterBase { - protected declare _spec: IComponentCharacterSpec; - - get spec() { - return this._spec; - } - protected declare _graphic: Graphic; - get graphic() { - return this._graphic; - } - - protected declare _group: IGroup; - get group() { - return this._group; - } - - protected abstract _createGraphic(): Graphic; - - protected _initRuntime(): void { - return; - } - - protected _parserSpec(): void { - return; - } - - protected _initGraphics(): void { - this._group = createGroup({ ...getLayoutFromWidget(this._spec.position), angle: this._spec.options.angle }); - this.option.graphicParent.add(this._group); - - this._graphic = this._createGraphic(); - this._graphic.init(); - - this._graphic.applyGraphicAttribute(this._spec.options.graphic); - - this._graphic.applyLayoutData(this._spec.position); - this.hide(); - } - - show(): void { - this._graphic?.show(); - } - hide(): void { - this._graphic?.hide(); - } - - getGraphicParent() { - return this._group; - } - - clearCharacter(): void { - if (this._group) { - this._group.parent.removeChild(this._group); - this._graphic = null; - } - } -} +// export abstract class CharacterGraphicComponent extends CharacterBase { +// protected declare _spec: IComponentCharacterSpec; + +// get spec() { +// return this._spec; +// } +// protected declare _graphic: Graphic; +// get graphic() { +// return this._graphic; +// } + +// protected declare _group: IGroup; +// get group() { +// return this._group; +// } + +// protected abstract _createGraphic(): Graphic; + +// protected _initRuntime(): void { +// return; +// } + +// protected _parserSpec(): void { +// return; +// } + +// protected _initGraphics(): void { +// this._group = createGroup({ +// ...getLayoutFromWidget(this._spec.position), +// angle: this._spec.options.angle, +// zIndex: this._spec.zIndex +// }); +// this.option.graphicParent.add(this._group); + +// this._graphic = this._createGraphic(); +// this._graphic.init(); + +// this._graphic.applyGraphicAttribute(this._spec.options.graphic); + +// this._graphic.applyLayoutData(this._spec.position); +// this.hide(); +// } + +// show(): void { +// this._graphic?.show(); +// } +// hide(): void { +// this._graphic?.hide(); +// } + +// getGraphicParent() { +// return this._group; +// } + +// clearCharacter(): void { +// if (this._group) { +// this._group.parent.removeChild(this._group); +// this._graphic = null; +// } +// } +// } diff --git a/packages/vstory/src/story/character/visactor/data-temp-transform-base.ts b/packages/vstory/src/story/character/visactor/data-temp-transform-base.ts index 7c88a0ce..d5ab63cc 100644 --- a/packages/vstory/src/story/character/visactor/data-temp-transform-base.ts +++ b/packages/vstory/src/story/character/visactor/data-temp-transform-base.ts @@ -87,7 +87,6 @@ export class DataTempTransformBase implements IDataTempTransform { } getBaseSpec() { - console.log('this', this._character); return this._specTemp.getSpec(this._specProcess.getCharacterSpec().options.data, { character: this._character }); }