@visactor/vstory 0.0.7 → 0.0.8-alpha.1

package/es/story/character/component/graphic/unit.js

@@ -0,0 +1,103 @@
+import { createGroup, createSymbol } from "@visactor/vrender";
+
+import { Graphic } from "./graphic";
+
+import { getLayoutFromWidget } from "../../../utils/layout";
+
+import { logger } from "../../../../util/output";
+
+export class GraphicUnit extends Graphic {
+    getInitialAttributes() {
+        return {
+            padding: {
+                top: 50,
+                bottom: 50,
+                right: 50,
+                left: 50
+            },
+            count: 250,
+            styleFunc: index => ({
+                symbolType: "circle",
+                fill: "#4e8ae0"
+            }),
+            gap: [ .5, .5 ],
+            aspect: 1,
+            direction: "horizontal"
+        };
+    }
+    init() {
+        var _a, _b;
+        if (!this._graphic) {
+            const {width: width, height: height} = this._getContainerSize(this._character.spec.position, null === (_a = this._character.spec.options) || void 0 === _a ? void 0 : _a.graphic), attributes = Object.assign(Object.assign(Object.assign({}, this.getInitialAttributes()), null === (_b = this._character.spec.options) || void 0 === _b ? void 0 : _b.graphic), {
+                width: width,
+                height: height
+            }), gridConfig = this._calculateGrid(attributes);
+            this._graphic = createGroup(Object.assign(Object.assign({}, getLayoutFromWidget(this._character.spec.position)), {
+                angle: this._character.spec.options.angle,
+                zIndex: this._character.spec.zIndex
+            })), this._addUnitsToGraphic(gridConfig, attributes), this._character.getGraphicParent().add(this._graphic);
+        }
+    }
+    _getContainerSize(position, graphic) {
+        return graphic.width && graphic.height ? {
+            width: graphic.width,
+            height: graphic.height
+        } : "width" in position && "height" in position ? {
+            width: position.width,
+            height: position.height
+        } : "bottom" in position && "right" in position ? {
+            width: position.right - position.left,
+            height: position.bottom - position.top
+        } : void logger("error", "Invalid IWidgetData type");
+    }
+    _calculateGrid(attributes) {
+        const {width: width, height: height, padding: padding, count: count, gap: gap, aspect: aspect, direction: direction} = attributes, innerWidth = width - padding.left - padding.right, innerHeight = height - padding.top - padding.bottom, isHorizontal = "horizontal" === direction, primaryLength = isHorizontal ? innerHeight : innerWidth, secondaryLength = isHorizontal ? innerWidth : innerHeight, adjustedAspect = isHorizontal ? aspect : 1 / aspect, adjustedGap = isHorizontal ? gap : [ gap[1], gap[0] ], minPrimaryCount = this._calculateMinPrimaryCount(primaryLength, secondaryLength, adjustedAspect, adjustedGap, count), {primaryCount: primaryCount, secondaryCount: secondaryCount, unitPrimarySize: unitPrimarySize, unitSecondarySize: unitSecondarySize} = this._convergeGrid(minPrimaryCount, count, primaryLength, secondaryLength, adjustedAspect, adjustedGap), offset = (secondaryLength - secondaryCount * unitSecondarySize - (secondaryCount - 1) * adjustedGap[0] * unitSecondarySize) / (secondaryCount - 1);
+        let primaryOffset;
+        primaryOffset = secondaryCount <= 1 ? count <= 1 ? (primaryLength - unitPrimarySize) / 2 : (primaryLength - count * unitPrimarySize - (count - 1) * unitPrimarySize * adjustedGap[1]) / (count - 1) : 0;
+        const secondaryOffset = secondaryCount <= 1 ? (secondaryLength - unitSecondarySize) / 2 : offset;
+        return isHorizontal ? {
+            rows: primaryCount,
+            cols: secondaryCount,
+            unitWidth: unitSecondarySize,
+            unitHeight: unitPrimarySize,
+            offsetX: secondaryOffset,
+            offsetY: primaryOffset
+        } : {
+            rows: secondaryCount,
+            cols: primaryCount,
+            unitWidth: unitPrimarySize,
+            unitHeight: unitSecondarySize,
+            offsetX: primaryOffset,
+            offsetY: secondaryOffset
+        };
+    }
+    _calculateMinPrimaryCount(primaryLength, secondaryLength, aspect, gap, count) {
+        const a = Math.pow(secondaryLength * (1 + gap[1]), 2), b = gap[0] * aspect * primaryLength - secondaryLength * gap[1], c = -count * primaryLength * aspect * (1 + gap[0]) * (1 + gap[1]), delta = Math.sqrt(b * b - 4 * a * c);
+        return Math.ceil((-b + delta) / (2 * a));
+    }
+    _convergeGrid(minPrimaryCount, count, primaryLength, secondaryLength, aspect, gap) {
+        let unitPrimarySize, unitSecondarySize, secondaryCount, totalWidth, primaryCount = minPrimaryCount;
+        do {
+            unitPrimarySize = primaryLength / (primaryCount * (1 + gap[1]) - gap[1]), unitSecondarySize = aspect * unitPrimarySize, 
+            secondaryCount = Math.ceil(count / primaryCount), totalWidth = secondaryCount * unitSecondarySize + (secondaryCount - 1) * gap[0] * unitSecondarySize;
+        } while (totalWidth > secondaryLength && primaryCount++);
+        return {
+            primaryCount: primaryCount,
+            secondaryCount: secondaryCount,
+            unitPrimarySize: unitPrimarySize,
+            unitSecondarySize: unitSecondarySize
+        };
+    }
+    _addUnitsToGraphic(gridConfig, attributes) {
+        const {rows: rows, cols: cols, unitWidth: unitWidth, unitHeight: unitHeight, offsetX: offsetX, offsetY: offsetY} = gridConfig, {count: count, styleFunc: unitStyle, padding: padding, gap: gap, direction: direction} = attributes, startX = padding.left + unitWidth / 2, startY = padding.top + unitHeight / 2, isHorizontal = "horizontal" === direction;
+        for (let i = 0; i < count; i++) {
+            const col = isHorizontal ? Math.floor(i / rows) : i % cols, row = isHorizontal ? i % rows : Math.floor(i / cols), dx = startX + col * (unitWidth + gap[0] * unitWidth + offsetX) + (isHorizontal && cols <= 1 ? offsetX : 0) + (!isHorizontal && rows <= 1 ? offsetX : 0), dy = startY + row * (unitHeight + gap[1] * unitHeight + offsetY) + (!isHorizontal && rows <= 1 ? offsetY : 0) + (isHorizontal && cols <= 1 ? offsetY : 0), graphic = createSymbol(Object.assign(Object.assign({}, unitStyle(i)), {
+                dx: dx,
+                dy: dy,
+                size: Math.max(unitWidth, unitHeight)
+            }));
+            graphic.name = `unit-${i}`, this._graphic.add(graphic);
+        }
+    }
+}
+//# sourceMappingURL=unit.js.map

package/es/story/character/component/graphic/unit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/story/character/component/graphic/unit.ts"],"names":[],"mappings":"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","file":"unit.js","sourcesContent":["import { createGroup, createSymbol, type IGroup, type ISymbolGraphicAttribute } from '@visactor/vrender';\nimport { Graphic } from './graphic';\nimport { getLayoutFromWidget } from '../../../utils/layout';\nimport type { IWidgetData } from '../../dsl-interface';\nimport { logger } from '../../../../util/output';\n\ninterface IGraphicUnitAttributes {\n  /**\n   * The width of the container.\n   * Defaults to the width defined by the position of the character.\n   */\n  width?: number;\n\n  /**\n   * The height of the container.\n   * Defaults to the height defined by the position of the character.\n   */\n  height?: number;\n\n  /**\n   * The padding inside the container, specifying space between the container border and its content.\n   * @default { top: 50, bottom: 50, right: 50, left: 50 }\n   */\n  padding?: {\n    top?: number;\n    bottom?: number;\n    right?: number;\n    left?: number;\n  };\n\n  /**\n   * The total number of units to be rendered within the container.\n   * @default 250\n   */\n  count?: number;\n\n  /**\n   * A function defining the style of each unit based on its index.\n   * @default { symbolType: 'circle', fill: '#4e8ae0' }\n   */\n  styleFunc?: (index: number) => ISymbolGraphicAttribute;\n\n  /**\n   * The gap between units, represented as a percentage of the unit's width and height.\n   * The first value specifies the horizontal gap, and the second value specifies the vertical gap.\n   * @default [0.5, 0.5]\n   */\n  gap?: [number, number];\n\n  /**\n   * The aspect ratio of the units, defined as width divided by height.\n   * @default 1\n   */\n  aspect?: number;\n\n  /**\n   * The direction in which units are laid out within the container.\n   * @default 'horizontal'\n   */\n  direction?: 'horizontal' | 'vertical';\n}\n\ninterface IGridConfig {\n  rows: number;\n  cols: number;\n  unitWidth: number;\n  unitHeight: number;\n  offsetX: number;\n  offsetY: number;\n}\n\nexport class GraphicUnit extends Graphic {\n  protected _graphic: IGroup;\n\n  getInitialAttributes(): IGraphicUnitAttributes {\n    return {\n      padding: {\n        top: 50,\n        bottom: 50,\n        right: 50,\n        left: 50\n      },\n      count: 250,\n      styleFunc: (index: number) => ({\n        symbolType: 'circle',\n        fill: '#4e8ae0'\n      }),\n      gap: [0.5, 0.5],\n      aspect: 1,\n      direction: 'horizontal'\n    };\n  }\n\n  init() {\n    if (!this._graphic) {\n      const { width, height } = this._getContainerSize(\n        this._character.spec.position,\n        this._character.spec.options?.graphic\n      );\n      const attributes = { ...this.getInitialAttributes(), ...this._character.spec.options?.graphic, width, height };\n      const gridConfig = this._calculateGrid(attributes);\n      this._graphic = createGroup({\n        ...getLayoutFromWidget(this._character.spec.position),\n        angle: this._character.spec.options.angle,\n        zIndex: this._character.spec.zIndex\n      });\n      this._addUnitsToGraphic(gridConfig, attributes);\n      this._character.getGraphicParent().add(this._graphic);\n    }\n  }\n\n  private _getContainerSize(position: IWidgetData, graphic: IGraphicUnitAttributes) {\n    if (graphic.width && graphic.height) {\n      return { width: graphic.width, height: graphic.height };\n    }\n    if ('width' in position && 'height' in position) {\n      return { width: position.width, height: position.height };\n    }\n    if ('bottom' in position && 'right' in position) {\n      return { width: position.right - position.left, height: position.bottom - position.top };\n    }\n    logger('error', 'Invalid IWidgetData type');\n  }\n\n  private _calculateGrid(attributes: IGraphicUnitAttributes): IGridConfig {\n    const { width, height, padding, count, gap, aspect, direction } = attributes;\n    const innerWidth = width - padding.left - padding.right;\n    const innerHeight = height - padding.top - padding.bottom;\n\n    const isHorizontal = direction === 'horizontal';\n    const primaryLength = isHorizontal ? innerHeight : innerWidth;\n    const secondaryLength = isHorizontal ? innerWidth : innerHeight;\n    const adjustedAspect = isHorizontal ? aspect : 1 / aspect;\n    const adjustedGap: [number, number] = isHorizontal ? gap : [gap[1], gap[0]];\n\n    const minPrimaryCount = this._calculateMinPrimaryCount(\n      primaryLength,\n      secondaryLength,\n      adjustedAspect,\n      adjustedGap,\n      count\n    );\n    const { primaryCount, secondaryCount, unitPrimarySize, unitSecondarySize } = this._convergeGrid(\n      minPrimaryCount,\n      count,\n      primaryLength,\n      secondaryLength,\n      adjustedAspect,\n      adjustedGap\n    );\n\n    const offset =\n      (secondaryLength -\n        secondaryCount * unitSecondarySize -\n        (secondaryCount - 1) * adjustedGap[0] * unitSecondarySize) /\n      (secondaryCount - 1);\n\n    let primaryOffset;\n    if (secondaryCount <= 1) {\n      if (count <= 1) {\n        primaryOffset = (primaryLength - unitPrimarySize) / 2;\n      } else {\n        primaryOffset =\n          (primaryLength - count * unitPrimarySize - (count - 1) * unitPrimarySize * adjustedGap[1]) / (count - 1);\n      }\n    } else {\n      primaryOffset = 0;\n    }\n    const secondaryOffset = secondaryCount <= 1 ? (secondaryLength - unitSecondarySize) / 2 : offset;\n\n    return isHorizontal\n      ? {\n          rows: primaryCount,\n          cols: secondaryCount,\n          unitWidth: unitSecondarySize,\n          unitHeight: unitPrimarySize,\n          offsetX: secondaryOffset,\n          offsetY: primaryOffset\n        }\n      : {\n          rows: secondaryCount,\n          cols: primaryCount,\n          unitWidth: unitPrimarySize,\n          unitHeight: unitSecondarySize,\n          offsetX: primaryOffset,\n          offsetY: secondaryOffset\n        };\n  }\n\n  private _calculateMinPrimaryCount(\n    primaryLength: number,\n    secondaryLength: number,\n    aspect: number,\n    gap: [number, number],\n    count: number\n  ): number {\n    const a = Math.pow(secondaryLength * (1 + gap[1]), 2);\n    const b = gap[0] * aspect * primaryLength - secondaryLength * gap[1];\n    const c = -count * primaryLength * aspect * (1 + gap[0]) * (1 + gap[1]);\n    const delta = Math.sqrt(b * b - 4 * a * c);\n    return Math.ceil((-b + delta) / (2 * a));\n  }\n\n  private _convergeGrid(\n    minPrimaryCount: number,\n    count: number,\n    primaryLength: number,\n    secondaryLength: number,\n    aspect: number,\n    gap: [number, number]\n  ) {\n    let primaryCount = minPrimaryCount;\n    let unitPrimarySize;\n    let unitSecondarySize;\n    let secondaryCount;\n    let totalWidth;\n\n    do {\n      unitPrimarySize = primaryLength / (primaryCount * (1 + gap[1]) - gap[1]);\n      unitSecondarySize = aspect * unitPrimarySize;\n      secondaryCount = Math.ceil(count / primaryCount);\n      totalWidth = secondaryCount * unitSecondarySize + (secondaryCount - 1) * gap[0] * unitSecondarySize;\n    } while (totalWidth > secondaryLength && primaryCount++);\n\n    return { primaryCount, secondaryCount, unitPrimarySize, unitSecondarySize };\n  }\n\n  private _addUnitsToGraphic(gridConfig: IGridConfig, attributes: IGraphicUnitAttributes) {\n    const { rows, cols, unitWidth, unitHeight, offsetX, offsetY } = gridConfig;\n    const { count, styleFunc: unitStyle, padding, gap, direction } = attributes;\n    const startX = padding.left + unitWidth / 2;\n    const startY = padding.top + unitHeight / 2;\n    const isHorizontal = direction === 'horizontal';\n\n    for (let i = 0; i < count; i++) {\n      const col = isHorizontal ? Math.floor(i / rows) : i % cols;\n      const row = isHorizontal ? i % rows : Math.floor(i / cols);\n      const dx =\n        startX +\n        col * (unitWidth + gap[0] * unitWidth + offsetX) +\n        (isHorizontal && cols <= 1 ? offsetX : 0) +\n        (!isHorizontal && rows <= 1 ? offsetX : 0);\n      const dy =\n        startY +\n        row * (unitHeight + gap[1] * unitHeight + offsetY) +\n        (!isHorizontal && rows <= 1 ? offsetY : 0) +\n        (isHorizontal && cols <= 1 ? offsetY : 0);\n\n      const graphic = createSymbol({ ...unitStyle!(i), dx, dy, size: Math.max(unitWidth, unitHeight) });\n      graphic.name = `unit-${i}`;\n      this._graphic.add(graphic);\n    }\n  }\n}\n"]}

package/es/story/index.js

@@ -30,6 +30,8 @@ import { CharacterComponentTimeline } from "./character/component/characters/cha
 
 import { RankingBarCharacter } from "./character/chart/characters/rankingBar";
 
+import { CharacterComponentUnit } from "./character/component/characters/character-unit";
+
 const splitModule = new ContainerModule((bind => {
     bind(VChartRender).toSelf().inSingletonScope(), bind(ChartRender).toService(VChartRender), 
     bind(GraphicRender).toService(ChartRender), bind(VChartPicker).to(VChartPicker).inSingletonScope(), 
@@ -50,6 +52,7 @@ export function registerCharacter() {
     StoryFactory.registerCharacter(StoryComponentType.IMAGE, CharacterComponentImage), 
     StoryFactory.registerCharacter(StoryComponentType.SHAPE, CharacterComponentShape), 
     StoryFactory.registerCharacter(StoryComponentType.TIMELINE, CharacterComponentTimeline), 
+    StoryFactory.registerCharacter(StoryComponentType.UNIT, CharacterComponentUnit), 
     container.load(splitModule), container.load(editPlugin));
 }
 

package/es/story/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/story/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { CharacterComponentQipao } from './character/component/characters/character-qipao';\nimport { CharacterComponentRect } from './character/component/characters/character-rect';\nimport { StoryFactory } from './factory/factory';\nimport { AutoEnablePlugins, ContainerModule, GraphicRender, RichTextEditPlugin, container } from '@visactor/vrender';\nimport { CanvasPickerContribution } from '@visactor/vrender';\nimport { ChartRender, VChartRender } from './character/chart/graphic/vchart-graphic-render';\nimport { CharacterComponentText } from './character/component/characters/character-text';\n// import { CharacterComponentRichText } from './character/component/characters/character-richtext';\nimport { VChartPicker } from './character/chart/graphic/vchart-graphic-picker';\nimport { StoryComponentType } from '../constants/character';\nimport { CharacterComponentLine } from './character/component/characters/character-line';\nimport { CharacterComponentImage } from './character/component/characters/character-image';\nimport { CharacterComponentShape } from './character/component/characters/character-shape';\nimport { VChartCharacter } from './character/chart/characters/vchart';\nimport { ComponentGroupRender } from './character/component/character-group/component-group-graphic-render';\nimport { CharacterComponentTimeline } from './character/component/characters/character-timeline';\nimport { RankingBarCharacter } from './character/chart/characters/rankingBar';\n\nconst splitModule = new ContainerModule(bind => {\n  // chart渲染器注入\n  bind(VChartRender).toSelf().inSingletonScope();\n  bind(ChartRender).toService(VChartRender);\n  bind(GraphicRender).toService(ChartRender);\n  bind(VChartPicker).to(VChartPicker).inSingletonScope();\n  bind(CanvasPickerContribution).toService(VChartPicker);\n\n  // component渲染器注入\n  bind(ComponentGroupRender).toSelf().inSingletonScope();\n  bind(GraphicRender).toService(ComponentGroupRender);\n});\n\nconst editPlugin = new ContainerModule(bind => {\n  bind(RichTextEditPlugin).toSelf();\n  bind(AutoEnablePlugins).toService(RichTextEditPlugin);\n});\n\nlet _register = false;\nexport function registerCharacter() {\n  if (_register) {\n    return;\n  }\n  _register = true;\n  StoryFactory.registerCharacter(VChartCharacter.type, VChartCharacter);\n  StoryFactory.registerCharacter(RankingBarCharacter.type, RankingBarCharacter);\n\n  // StoryFactory.registerCharacter('BarChart', CharacterChart);\n  // StoryFactory.registerCharacter('CharacterChart', CharacterChart);\n  // StoryFactory.registerCharacter('LineChart', CharacterChart);\n  StoryFactory.registerCharacter(StoryComponentType.RECT, CharacterComponentRect);\n  StoryFactory.registerCharacter(StoryComponentType.TEXT, CharacterComponentText);\n  // StoryFactory.registerCharacter(StoryComponentType.RICH_TEXT, CharacterComponentRichText);\n  StoryFactory.registerCharacter(StoryComponentType.QIPAO, CharacterComponentQipao);\n  StoryFactory.registerCharacter(StoryComponentType.LINE, CharacterComponentLine);\n  StoryFactory.registerCharacter(StoryComponentType.IMAGE, CharacterComponentImage);\n  StoryFactory.registerCharacter(StoryComponentType.SHAPE, CharacterComponentShape);\n  StoryFactory.registerCharacter(StoryComponentType.TIMELINE, CharacterComponentTimeline);\n\n  container.load(splitModule);\n  container.load(editPlugin);\n}\n\nregisterCharacter();\n\nexport * from './story';\n"]}
+{"version":3,"sources":["../src/story/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { CharacterComponentQipao } from './character/component/characters/character-qipao';\nimport { CharacterComponentRect } from './character/component/characters/character-rect';\nimport { StoryFactory } from './factory/factory';\nimport { AutoEnablePlugins, ContainerModule, GraphicRender, RichTextEditPlugin, container } from '@visactor/vrender';\nimport { CanvasPickerContribution } from '@visactor/vrender';\nimport { ChartRender, VChartRender } from './character/chart/graphic/vchart-graphic-render';\nimport { CharacterComponentText } from './character/component/characters/character-text';\n// import { CharacterComponentRichText } from './character/component/characters/character-richtext';\nimport { VChartPicker } from './character/chart/graphic/vchart-graphic-picker';\nimport { StoryComponentType } from '../constants/character';\nimport { CharacterComponentLine } from './character/component/characters/character-line';\nimport { CharacterComponentImage } from './character/component/characters/character-image';\nimport { CharacterComponentShape } from './character/component/characters/character-shape';\nimport { VChartCharacter } from './character/chart/characters/vchart';\nimport { ComponentGroupRender } from './character/component/character-group/component-group-graphic-render';\nimport { CharacterComponentTimeline } from './character/component/characters/character-timeline';\nimport { RankingBarCharacter } from './character/chart/characters/rankingBar';\nimport { CharacterComponentUnit } from './character/component/characters/character-unit';\n\nconst splitModule = new ContainerModule(bind => {\n  // chart渲染器注入\n  bind(VChartRender).toSelf().inSingletonScope();\n  bind(ChartRender).toService(VChartRender);\n  bind(GraphicRender).toService(ChartRender);\n  bind(VChartPicker).to(VChartPicker).inSingletonScope();\n  bind(CanvasPickerContribution).toService(VChartPicker);\n\n  // component渲染器注入\n  bind(ComponentGroupRender).toSelf().inSingletonScope();\n  bind(GraphicRender).toService(ComponentGroupRender);\n});\n\nconst editPlugin = new ContainerModule(bind => {\n  bind(RichTextEditPlugin).toSelf();\n  bind(AutoEnablePlugins).toService(RichTextEditPlugin);\n});\n\nlet _register = false;\nexport function registerCharacter() {\n  if (_register) {\n    return;\n  }\n  _register = true;\n  StoryFactory.registerCharacter(VChartCharacter.type, VChartCharacter);\n  StoryFactory.registerCharacter(RankingBarCharacter.type, RankingBarCharacter);\n\n  // StoryFactory.registerCharacter('BarChart', CharacterChart);\n  // StoryFactory.registerCharacter('CharacterChart', CharacterChart);\n  // StoryFactory.registerCharacter('LineChart', CharacterChart);\n  StoryFactory.registerCharacter(StoryComponentType.RECT, CharacterComponentRect);\n  StoryFactory.registerCharacter(StoryComponentType.TEXT, CharacterComponentText);\n  // StoryFactory.registerCharacter(StoryComponentType.RICH_TEXT, CharacterComponentRichText);\n  StoryFactory.registerCharacter(StoryComponentType.QIPAO, CharacterComponentQipao);\n  StoryFactory.registerCharacter(StoryComponentType.LINE, CharacterComponentLine);\n  StoryFactory.registerCharacter(StoryComponentType.IMAGE, CharacterComponentImage);\n  StoryFactory.registerCharacter(StoryComponentType.SHAPE, CharacterComponentShape);\n  StoryFactory.registerCharacter(StoryComponentType.TIMELINE, CharacterComponentTimeline);\n  StoryFactory.registerCharacter(StoryComponentType.UNIT, CharacterComponentUnit);\n\n  container.load(splitModule);\n  container.load(editPlugin);\n}\n\nregisterCharacter();\n\nexport * from './story';\n"]}

package/es/story/interface/dsl-interface.d.ts

@@ -3,7 +3,8 @@ import type { IChartAddAction, IChartUpdateAction } from '../../player/processor
 import type { IChartVisibilityAction, IComponentVisibilityAction } from '../../player/processor/interface/appear-action';
 import type { IComponentBounceAction, IComponentMoveToAction, IComponentScaleToAction, IComponentStyleAction } from '../../player/processor/interface/style-action';
 import type { ICharacterSpec } from '../character';
-export type IActionSpec = IComponentStyleAction | IComponentVisibilityAction | IComponentMoveToAction | IComponentScaleToAction | IComponentBounceAction | IChartVisibilityAction | IChartUpdateAction | IChartAddAction | IRankingBarPlayAction;
+import type { IUnitStyleAction, IUnitVisibilityAction } from '../../player/processor/interface/unit-action';
+export type IActionSpec = IComponentStyleAction | IComponentVisibilityAction | IComponentMoveToAction | IComponentScaleToAction | IComponentBounceAction | IChartVisibilityAction | IChartUpdateAction | IChartAddAction | IRankingBarPlayAction | IUnitStyleAction | IUnitVisibilityAction;
 export interface IStorySpec {
     acts: IActSpec[];
     characters: ICharacterSpec[];

package/es/story/interface/dsl-interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/story/interface/dsl-interface.ts"],"names":[],"mappings":"","file":"dsl-interface.js","sourcesContent":["import type { IRankingBarPlayAction } from './../../player/processor/chart/rankingBar/rankingBar';\nimport type { IChartAddAction, IChartUpdateAction } from '../../player/processor/chart/vchart';\nimport type {\n  IChartVisibilityAction,\n  IComponentVisibilityAction\n} from '../../player/processor/interface/appear-action';\nimport type {\n  IComponentBounceAction,\n  IComponentMoveToAction,\n  IComponentScaleToAction,\n  IComponentStyleAction\n} from '../../player/processor/interface/style-action';\nimport type { ICharacterSpec } from '../character';\n\nexport type IActionSpec =\n  | IComponentStyleAction\n  | IComponentVisibilityAction\n  | IComponentMoveToAction\n  | IComponentScaleToAction\n  | IComponentBounceAction\n  | IChartVisibilityAction\n  | IChartUpdateAction\n  | IChartAddAction\n  | IRankingBarPlayAction;\n\nexport interface IStorySpec {\n  acts: IActSpec[]; // 作品的章节\n  characters: ICharacterSpec[]; // 作品中的元素\n}\n\nexport interface IActionsLink {\n  characterId: string | string[];\n  characterActions: IActionSpec[];\n}\n\nexport type ISceneSpec = {\n  id: string;\n  delay?: number; // 入场延迟，可以是正数或者负数\n  actions: IActionsLink[];\n};\n\nexport interface IActSpec {\n  id: string;\n  scenes: ISceneSpec[];\n}\n"]}
+{"version":3,"sources":["../src/story/interface/dsl-interface.ts"],"names":[],"mappings":"","file":"dsl-interface.js","sourcesContent":["import type { IRankingBarPlayAction } from './../../player/processor/chart/rankingBar/rankingBar';\nimport type { IChartAddAction, IChartUpdateAction } from '../../player/processor/chart/vchart';\nimport type {\n  IChartVisibilityAction,\n  IComponentVisibilityAction\n} from '../../player/processor/interface/appear-action';\nimport type {\n  IComponentBounceAction,\n  IComponentMoveToAction,\n  IComponentScaleToAction,\n  IComponentStyleAction\n} from '../../player/processor/interface/style-action';\nimport type { ICharacterSpec } from '../character';\nimport type { IUnitStyleAction, IUnitVisibilityAction } from '../../player/processor/interface/unit-action';\n\nexport type IActionSpec =\n  | IComponentStyleAction\n  | IComponentVisibilityAction\n  | IComponentMoveToAction\n  | IComponentScaleToAction\n  | IComponentBounceAction\n  | IChartVisibilityAction\n  | IChartUpdateAction\n  | IChartAddAction\n  | IRankingBarPlayAction\n  | IUnitStyleAction\n  | IUnitVisibilityAction;\n\nexport interface IStorySpec {\n  acts: IActSpec[]; // 作品的章节\n  characters: ICharacterSpec[]; // 作品中的元素\n}\n\nexport interface IActionsLink {\n  characterId: string | string[];\n  characterActions: IActionSpec[];\n}\n\nexport type ISceneSpec = {\n  id: string;\n  delay?: number; // 入场延迟，可以是正数或者负数\n  actions: IActionsLink[];\n};\n\nexport interface IActSpec {\n  id: string;\n  scenes: ISceneSpec[];\n}\n"]}

package/es/story/interface/runtime-interface.d.ts

@@ -2,7 +2,10 @@ import type { IGraphic, IStage } from '@visactor/vrender';
 import type { ICharacter, ICharacterSpec } from '../character';
 import type { IPlayer } from '../../player/interface/player';
 export interface IStoryInitOption {
-    dom: string | HTMLDivElement;
+    dom?: string | HTMLDivElement;
+    canvas?: string | HTMLCanvasElement;
+    width?: number;
+    height?: number;
     playerOption?: {
         scaleX?: number;
         scaleY?: number;
@@ -11,6 +14,7 @@ export interface IStoryInitOption {
 export interface IStoryCanvas {
     getStage: () => IStage;
     getCanvas: () => HTMLCanvasElement;
+    resize: (w: number, height: number) => void;
     getEventDetail: (event: StoryEvent) => {
         character: ICharacter;
         characterInfo: undefined;

package/es/story/interface/runtime-interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/story/interface/runtime-interface.ts"],"names":[],"mappings":"","file":"runtime-interface.js","sourcesContent":["import type { IGraphic, IStage } from '@visactor/vrender';\nimport type { ICharacter, ICharacterSpec } from '../character';\nimport type { IPlayer } from '../../player/interface/player';\n\nexport interface IStoryInitOption {\n  dom: string | HTMLDivElement; // dom id\n  playerOption?: {\n    scaleX?: number;\n    scaleY?: number;\n  };\n}\n\nexport interface IStoryCanvas {\n  getStage: () => IStage;\n  getCanvas: () => HTMLCanvasElement;\n  getEventDetail: (event: StoryEvent) => {\n    character: ICharacter;\n    characterInfo: undefined;\n  };\n  release: () => void;\n}\n\nexport interface IStory {\n  readonly id: string;\n  readonly player: IPlayer;\n  canvas: IStoryCanvas;\n  getCharacters: () => { [key: string]: ICharacter };\n  getCharactersById: (key: string) => ICharacter | null;\n}\nexport interface ICharacterTree {\n  getCharacters: () => { [key: string]: ICharacter };\n  getCharactersById: (key: string) => ICharacter | null;\n  addCharacter: (spec: ICharacterSpec) => ICharacter;\n  initCharacters: (spec: ICharacterSpec[]) => void;\n}\n\nexport type StoryEvent = Event & {\n  detailPath: IGraphic[];\n  path: IGraphic[];\n  canvasX?: number;\n  canvasY?: number;\n};\n"]}
+{"version":3,"sources":["../src/story/interface/runtime-interface.ts"],"names":[],"mappings":"","file":"runtime-interface.js","sourcesContent":["import type { IGraphic, IStage } from '@visactor/vrender';\nimport type { ICharacter, ICharacterSpec } from '../character';\nimport type { IPlayer } from '../../player/interface/player';\n\nexport interface IStoryInitOption {\n  dom?: string | HTMLDivElement; // dom id\n  canvas?: string | HTMLCanvasElement; // canvas id\n  width?: number;\n  height?: number;\n  playerOption?: {\n    scaleX?: number;\n    scaleY?: number;\n  };\n}\n\nexport interface IStoryCanvas {\n  getStage: () => IStage;\n  getCanvas: () => HTMLCanvasElement;\n  resize: (w: number, height: number) => void;\n  getEventDetail: (event: StoryEvent) => {\n    character: ICharacter;\n    characterInfo: undefined;\n  };\n  release: () => void;\n}\n\nexport interface IStory {\n  readonly id: string;\n  readonly player: IPlayer;\n  canvas: IStoryCanvas;\n  getCharacters: () => { [key: string]: ICharacter };\n  getCharactersById: (key: string) => ICharacter | null;\n}\nexport interface ICharacterTree {\n  getCharacters: () => { [key: string]: ICharacter };\n  getCharactersById: (key: string) => ICharacter | null;\n  addCharacter: (spec: ICharacterSpec) => ICharacter;\n  initCharacters: (spec: ICharacterSpec[]) => void;\n}\n\nexport type StoryEvent = Event & {\n  detailPath: IGraphic[];\n  path: IGraphic[];\n  canvasX?: number;\n  canvasY?: number;\n};\n"]}

package/es/story/story.d.ts

@@ -11,7 +11,7 @@ export declare class Story implements IStory {
     protected _spec: IStorySpec;
     get canvas(): IStoryCanvas;
     get player(): IPlayer;
-    constructor(spec: IStorySpec, option: IStoryInitOption);
+    constructor(spec: IStorySpec | null, option: IStoryInitOption);
     load(spec: IStorySpec): void;
     getCharacters(): {
         [key: string]: ICharacter;

package/es/story/story.js

@@ -44,8 +44,12 @@ export class Story {
         return this._player;
     }
     constructor(spec, option) {
-        this.id = "test-mvp_" + Story._id_++, this._canvas = new StoryCanvas(this, isString(option.dom) ? document.getElementById(option.dom) : option.dom), 
-        this._player = new Player(this, option.playerOption), this._characterTree = new CharacterTree(this), 
+        this.id = "test-mvp_" + Story._id_++, this._canvas = new StoryCanvas(this, {
+            container: isString(option.dom) ? document.getElementById(option.dom) : option.dom,
+            canvas: isString(option.canvas) ? document.getElementById(option.canvas) : option.canvas,
+            width: option.width,
+            height: option.height
+        }), this._player = new Player(this, option.playerOption), this._characterTree = new CharacterTree(this), 
         spec && this.load(spec);
     }
     load(spec) {

package/es/story/story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/story/story.ts"],"names":[],"mappings":";;;;;;;;;AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,aAAa,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AAE3C,MAAM,OAAO,KAAK;IAahB,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,IAAgB,EAAE,MAAwB;QACpD,IAAI,CAAC,EAAE,GAAG,WAAW,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,OAAO,GAAG,IAAI,WAAW,CAC5B,IAAI,EACJ,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,CAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAC5F,CAAC;QACF,IAAI,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;QAErD,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,IAAI,CAAC,IAAgB;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;IAC7C,CAAC;IAED,iBAAiB,CAAC,GAAW;QAC3B,OAAO,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC;IAMD,IAAI,CAAC,OAAgB,IAAI;QAEvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACpB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAEK,aAAa,CAAC,YAAoB,EAAE,UAAkB,EAAE,GAAW;;YACvE,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrD,CAAC;KAAA;IAED,SAAS;QACP,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;;AAhFM,UAAI,GAAG,CAAC,CAAC","file":"story.js","sourcesContent":["import type { ICharacterSpec } from './character/dsl-interface';\nimport { isString } from '@visactor/vutils';\nimport type { ICharacterTree, IStory, IStoryCanvas, IStoryInitOption } from './interface/runtime-interface';\nimport type { ICharacter } from './character/runtime-interface';\nimport { StoryCanvas } from './canvas/canvas';\nimport type { IStorySpec, IActSpec } from './interface';\nimport { StoryFactory } from './factory/factory';\nimport { defaultTicker, defaultTimeline } from '@visactor/vrender';\nimport { CharacterTree } from './character-tree/character-tree';\nimport type { IPlayer } from '../player/interface/player';\nimport { Player } from '../player/player';\nimport { logger } from '../util/output';\n\ndefaultTicker.remTimeline(defaultTimeline);\n\nexport class Story implements IStory {\n  static _id_ = 0;\n\n  protected _player: IPlayer;\n\n  readonly id: string;\n\n  protected _canvas: IStoryCanvas;\n\n  protected _characterTree: ICharacterTree;\n\n  protected _spec: IStorySpec;\n\n  get canvas() {\n    return this._canvas;\n  }\n\n  get player(): IPlayer {\n    return this._player;\n  }\n\n  constructor(spec: IStorySpec, option: IStoryInitOption) {\n    this.id = 'test-mvp_' + Story._id_++;\n    this._canvas = new StoryCanvas(\n      this,\n      isString(option.dom) ? (document.getElementById(option.dom) as HTMLDivElement) : option.dom\n    );\n    this._player = new Player(this, option.playerOption);\n\n    this._characterTree = new CharacterTree(this);\n    spec && this.load(spec);\n  }\n\n  load(spec: IStorySpec) {\n    this._spec = spec;\n    if (!spec) {\n      return;\n    }\n    this._characterTree.initCharacters(spec.characters);\n    this._player.initActs(spec.acts);\n  }\n\n  getCharacters(): { [key: string]: ICharacter } {\n    return this._characterTree.getCharacters();\n  }\n\n  getCharactersById(key: string) {\n    return this._characterTree.getCharactersById(key);\n  }\n\n  // private _createAct(spec: IActSpec) {\n  //   this._player.addAct(spec, this._characters);\n  // }\n\n  play(loop: boolean = true) {\n    // player 开始播放\n    this._spec && this.load(this._spec);\n    this._player.play();\n    if (loop) {\n      this._player.once('onstop', () => {\n        this.play(loop);\n      });\n    }\n  }\n\n  pause() {\n    this._player.pause();\n    return;\n  }\n\n  async encodeToVideo(actIndexOrId: number, millsecond: number, fps: number) {\n    return this._player.encodeToVideo(millsecond, fps);\n  }\n\n  getPlayer() {\n    return this._player;\n  }\n\n  release() {\n    this._player.release();\n    this._canvas.release();\n  }\n}\n"]}
+{"version":3,"sources":["../src/story/story.ts"],"names":[],"mappings":"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","file":"story.js","sourcesContent":["import type { ICharacterSpec } from './character/dsl-interface';\nimport { isString } from '@visactor/vutils';\nimport type { ICharacterTree, IStory, IStoryCanvas, IStoryInitOption } from './interface/runtime-interface';\nimport type { ICharacter } from './character/runtime-interface';\nimport { StoryCanvas } from './canvas/canvas';\nimport type { IStorySpec, IActSpec } from './interface';\nimport { StoryFactory } from './factory/factory';\nimport { defaultTicker, defaultTimeline } from '@visactor/vrender';\nimport { CharacterTree } from './character-tree/character-tree';\nimport type { IPlayer } from '../player/interface/player';\nimport { Player } from '../player/player';\nimport { logger } from '../util/output';\n\ndefaultTicker.remTimeline(defaultTimeline);\n\nexport class Story implements IStory {\n  static _id_ = 0;\n\n  protected _player: IPlayer;\n\n  readonly id: string;\n\n  protected _canvas: IStoryCanvas;\n\n  protected _characterTree: ICharacterTree;\n\n  protected _spec: IStorySpec;\n\n  get canvas() {\n    return this._canvas;\n  }\n\n  get player(): IPlayer {\n    return this._player;\n  }\n\n  constructor(spec: IStorySpec | null, option: IStoryInitOption) {\n    this.id = 'test-mvp_' + Story._id_++;\n    this._canvas = new StoryCanvas(this, {\n      container: isString(option.dom) ? (document.getElementById(option.dom) as HTMLDivElement) : option.dom,\n      canvas: isString(option.canvas) ? (document.getElementById(option.canvas) as HTMLCanvasElement) : option.canvas,\n      width: option.width,\n      height: option.height\n    });\n    this._player = new Player(this, option.playerOption);\n\n    this._characterTree = new CharacterTree(this);\n    spec && this.load(spec);\n  }\n\n  load(spec: IStorySpec) {\n    this._spec = spec;\n    if (!spec) {\n      return;\n    }\n    this._characterTree.initCharacters(spec.characters);\n    this._player.initActs(spec.acts);\n  }\n\n  getCharacters(): { [key: string]: ICharacter } {\n    return this._characterTree.getCharacters();\n  }\n\n  getCharactersById(key: string) {\n    return this._characterTree.getCharactersById(key);\n  }\n\n  // private _createAct(spec: IActSpec) {\n  //   this._player.addAct(spec, this._characters);\n  // }\n\n  play(loop: boolean = true) {\n    // player 开始播放\n    this._spec && this.load(this._spec);\n    this._player.play();\n    if (loop) {\n      this._player.once('onstop', () => {\n        this.play(loop);\n      });\n    }\n  }\n\n  pause() {\n    this._player.pause();\n    return;\n  }\n\n  async encodeToVideo(actIndexOrId: number, millsecond: number, fps: number) {\n    return this._player.encodeToVideo(millsecond, fps);\n  }\n\n  getPlayer() {\n    return this._player;\n  }\n\n  release() {\n    this._player.release();\n    this._canvas.release();\n  }\n}\n"]}

package/es/template/unit/default.d.ts

@@ -0,0 +1,4 @@
+import type { IUnitTemplateSpec } from './type';
+export declare const DEFAULT_SCENE_DURATION = 5000;
+export declare const DEFAULT_ANIMATION_DURATION = 1000;
+export declare const defaultConfig: Partial<IUnitTemplateSpec>;

package/es/template/unit/default.js

@@ -0,0 +1,48 @@
+export const DEFAULT_SCENE_DURATION = 5e3;
+
+export const DEFAULT_ANIMATION_DURATION = 1e3;
+
+export const defaultConfig = {
+    layout: {
+        width: 1920,
+        height: 1080,
+        title: {
+            height: 250,
+            backgroundColor: "#ffffff",
+            style: {
+                fontSize: 40,
+                fontWeight: 200,
+                textAlign: "center",
+                fill: "black",
+                wordBreak: "break-word"
+            },
+            padding: {
+                left: 50,
+                right: 50,
+                top: 50,
+                bottom: 0
+            }
+        },
+        viz: {
+            backgroundColor: "#ffffff",
+            direction: "horizontal",
+            padding: {
+                left: 50,
+                right: 50,
+                top: 50,
+                bottom: 50
+            }
+        }
+    },
+    unit: {
+        gap: [ .5, .5 ],
+        aspect: 1,
+        defaultStyle: {
+            symbolType: "circle",
+            fill: "#ffffff"
+        }
+    },
+    data: [],
+    scenes: []
+};
+//# sourceMappingURL=default.js.map

package/es/template/unit/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/template/unit/default.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,0BAA0B,GAAG,IAAI,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,GAA+B;IACvD,MAAM,EAAE;QACN,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE;YACL,MAAM,EAAE,GAAG;YACX,eAAe,EAAE,SAAS;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,GAAG;gBACf,SAAS,EAAE,QAAQ;gBACnB,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,YAAY;aACxB;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,CAAC;aACV;SACF;QACD,GAAG,EAAE;YACH,eAAe,EAAE,SAAS;YAC1B,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE;gBACP,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;SACF;KACF;IACD,IAAI,EAAE;QACJ,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;QACf,MAAM,EAAE,CAAC;QACT,YAAY,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,SAAS;SAChB;KACF;IACD,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,EAAE;CACX,CAAC","file":"default.js","sourcesContent":["import type { IUnitTemplateSpec } from './type';\n\nexport const DEFAULT_SCENE_DURATION = 5000;\nexport const DEFAULT_ANIMATION_DURATION = 1000;\n\nexport const defaultConfig: Partial<IUnitTemplateSpec> = {\n  layout: {\n    width: 1920,\n    height: 1080,\n    title: {\n      height: 250,\n      backgroundColor: '#ffffff',\n      style: {\n        fontSize: 40,\n        fontWeight: 200,\n        textAlign: 'center',\n        fill: 'black',\n        wordBreak: 'break-word'\n      },\n      padding: {\n        left: 50,\n        right: 50,\n        top: 50,\n        bottom: 0\n      }\n    },\n    viz: {\n      backgroundColor: '#ffffff',\n      direction: 'horizontal',\n      padding: {\n        left: 50,\n        right: 50,\n        top: 50,\n        bottom: 50\n      }\n    }\n  },\n  unit: {\n    gap: [0.5, 0.5],\n    aspect: 1,\n    defaultStyle: {\n      symbolType: 'circle',\n      fill: '#ffffff'\n    }\n  },\n  data: [],\n  scenes: []\n};\n"]}

package/es/template/unit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './unit';

package/es/template/unit/index.js

@@ -0,0 +1,4 @@
+export * from "./type";
+
+export * from "./unit";
+//# sourceMappingURL=index.js.map

package/es/template/unit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/template/unit/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './type';\nexport * from './unit';\n"]}

package/es/template/unit/type.d.ts

@@ -0,0 +1,51 @@
+import type { ISymbolGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';
+import type { IEditorTextGraphicAttribute } from '../../story/character';
+export interface IUnitTemplateSpec {
+    layout?: {
+        width?: number;
+        height?: number;
+        title?: {
+            height?: number;
+            backgroundColor?: string;
+            style?: IEditorTextGraphicAttribute;
+            padding?: {
+                left?: number;
+                right?: number;
+                top?: number;
+                bottom?: number;
+            };
+        };
+        viz?: {
+            backgroundColor?: string;
+            direction?: 'horizontal' | 'vertical';
+            padding?: {
+                left?: number;
+                right?: number;
+                top?: number;
+                bottom?: number;
+            };
+        };
+    };
+    unit?: {
+        gap?: [number, number];
+        aspect?: number;
+        defaultStyle?: ISymbolGraphicAttribute | ((index: number) => ISymbolGraphicAttribute);
+    };
+    data: Record<string, any>[];
+    scenes: {
+        title: ITextGraphicAttribute[];
+        sceneDuration?: number;
+        animationDuration?: number;
+        nodes: QueryNode[];
+    }[];
+}
+export interface QueryNode {
+    query?: (datum: any) => boolean;
+    style?: ISymbolGraphicAttribute;
+    children?: QueryNode[];
+}
+export interface UnitNode {
+    style?: ISymbolGraphicAttribute;
+    count: number;
+    children?: UnitNode[];
+}

package/es/template/unit/type.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=type.js.map

package/es/template/unit/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/template/unit/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { ISymbolGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';\nimport type { IEditorTextGraphicAttribute } from '../../story/character';\n\nexport interface IUnitTemplateSpec {\n  layout?: {\n    width?: number;\n    height?: number;\n    title?: {\n      height?: number;\n      backgroundColor?: string;\n      style?: IEditorTextGraphicAttribute;\n      padding?: {\n        left?: number;\n        right?: number;\n        top?: number;\n        bottom?: number;\n      };\n    };\n    viz?: {\n      backgroundColor?: string;\n      direction?: 'horizontal' | 'vertical';\n      padding?: {\n        left?: number;\n        right?: number;\n        top?: number;\n        bottom?: number;\n      };\n    };\n  };\n  unit?: {\n    gap?: [number, number];\n    aspect?: number;\n    defaultStyle?: ISymbolGraphicAttribute | ((index: number) => ISymbolGraphicAttribute);\n  };\n  data: Record<string, any>[];\n  scenes: {\n    title: ITextGraphicAttribute[];\n    sceneDuration?: number;\n    animationDuration?: number;\n    nodes: QueryNode[];\n  }[];\n}\n\nexport interface QueryNode {\n  query?: (datum: any) => boolean;\n  style?: ISymbolGraphicAttribute;\n  children?: QueryNode[];\n}\n\nexport interface UnitNode {\n  style?: ISymbolGraphicAttribute;\n  count: number;\n  children?: UnitNode[];\n}\n"]}

package/es/template/unit/unit.d.ts

@@ -0,0 +1,3 @@
+import type { IUnitTemplateSpec } from './type';
+import type { IStorySpec } from '../../story/interface';
+export declare function generateSpec(input: IUnitTemplateSpec): IStorySpec;