Merge pull request #4 from VisActor/feat/player-zindex

feat: support zindex
VisActor · Jun 11, 2024 · a44651a · a44651a
2 parents d265b32 + 443f808
commit a44651a
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 73 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 });
   }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       getBaseSpec() {
-        console.log('this', this._character);
         return this._specTemp.getSpec(this._specProcess.getCharacterSpec().options.data, { character: this._character });
       }
@@ Expand Down @@