@aibee/owlly 1.0.25

package/src/owlly/element/map-kit/block.ts

@@ -0,0 +1,417 @@
+import {
+  Mesh, MeshBasicMaterial, Color, MeshStandardMaterial,
+} from 'three';
+import { LineSegments2 } from '../../../external/lines/line-segments-2';
+import { LineMaterial } from '../../../external/lines/line-material';
+import { BufferGeometryUtils } from '../../../external/util/buffer-geometry-utils';
+import { Externals, NS_THREE } from '../../stage/externals';
+import { Element, ElementFrameContext } from '../element';
+import { BasicTools } from '../../utils/basic-tools';
+import { Shape } from './shape';
+import { MapUtils } from '../../utils/map-utils';
+import { Env, EnvironmentUtils } from '../../utils/environment-utils';
+
+import { ExtrudeGeometry2 } from '../../geometries/ExtrudeGeometry2';
+import { PathUtils } from '../../utils/path-utils';
+
+interface BlockBorderOptions{
+  surface: NS_THREE.Shape;
+  closed: boolean;
+  color?: number|string;
+  splitPoints?: NS_THREE.Vector2[];
+  splitWidth?: number | number[];
+  opacity?: number;
+}
+
+enum StrokeType{
+  all,
+  up,
+  down,
+}
+
+/**
+ * 块状模型
+ * @noInheritDoc
+ */
+class Block extends Element {
+  static SharedResourceMap: Map<string, { count: number; material?: NS_THREE.Material; mesh?: NS_THREE.Mesh }>;
+
+  static StrokeType = StrokeType.up;
+
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  public shape!: Shape;
+
+  private line!: LineSegments2;
+
+  private viewWidth!: number;
+
+  private viewHeight!: number;
+
+  private lowPerformance: boolean;
+
+  private tag: string;
+
+  private renderStroke: boolean;
+
+  private borderOptions: BlockBorderOptions|undefined;
+
+  private shapeMesh: Mesh | undefined;
+
+  private borderMesh?: Mesh;
+
+  private needUpdate = false;
+
+  /**
+   * 块状模型通用类
+   * @param shape 块状模型基础图形
+   * @example
+   * ```typescript
+   * // 以使用svg生成Shape对象为例, 首先将svg解析为Shape对象
+   * const shapes = await SvgUtils.parseSVG(
+   *   <svg url>,
+   *   [0.02, 0, 0, 0, 0, -0.02, 0, 0, 0, 0, 0, 0, -40, 40, 0, 1], // 对齐矩阵
+   * );
+   * // 用每个shape生成对应的block
+   * const blocks = shapes.map((s) => new Block(s));
+   * // 绑定block
+   * blocks.forEach((b) => { stage.bindElement(b); });
+   * ```
+   */
+  constructor(shape: Shape, lowPerformance = false, tag = '', renderStroke = true, borderOptions?: BlockBorderOptions) {
+    super();
+    this.initialized = false;
+    this.loaded = false;
+    this.lowPerformance = lowPerformance;
+    this.tag = tag;
+    this.renderStroke = renderStroke;
+    this.borderOptions = borderOptions;
+    if (shape) this.load(shape, this.lowPerformance, this.renderStroke, borderOptions);
+  }
+
+  public load(
+    shape: Shape, lowPerformance = false, renderStroke = true, borderOptions?: BlockBorderOptions,
+  ): void {
+    this.initialized = false;
+    this.loaded = false;
+    this.shape = shape;
+    this.lowPerformance = lowPerformance;
+    this.renderStroke = renderStroke;
+    const shapeData = shape.getData();
+
+    const threeShape = MapUtils.GenerateShapeFromSteps(shape.getSteps());
+    const { THREE } = Externals.getInstance();
+
+    const label = `${this.tag}-${shapeData.fill}-${shapeData.fillOpacity}`;
+
+    if (!Block.SharedResourceMap) Block.SharedResourceMap = new Map();
+
+    /** 如果是低性能模式，直接用Mesh做渲染 */
+    if (this.lowPerformance && !Block.SharedResourceMap.has(label)) {
+      const material = new THREE.MeshStandardMaterial({
+        color: shapeData.fill,
+        transparent: true,
+        opacity: shapeData.fillOpacity,
+        depthWrite: false,
+      });
+      Block.SharedResourceMap.set(
+        label,
+        {
+          count: 0,
+          material,
+        },
+      );
+    }
+    let geometry;
+    if (this.lowPerformance) {
+      geometry = new THREE.ExtrudeBufferGeometry(threeShape, {
+        steps: 1,
+        bevelEnabled: false,
+        depth: shapeData.height,
+        curveSegments: 4,
+      });
+      const resource = Block.SharedResourceMap.get(label);
+      const count = resource!.count + 1;
+      const material = resource!.material;
+      let mesh;
+      if (resource!.mesh) {
+        mesh = resource!.mesh;
+        const newGeometry = BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, geometry], true);
+        mesh.geometry = newGeometry!;
+      } else {
+        mesh = new THREE.Mesh(geometry, material);
+        this.add(mesh);
+        this.position.set(shapeData.x, shapeData.y, shapeData.zIndex);
+      }
+      Block.SharedResourceMap.set(
+        label,
+        { count, mesh, material },
+      );
+    } else {
+      geometry = new THREE.ExtrudeBufferGeometry(threeShape, {
+        steps: 1,
+        bevelEnabled: false,
+        depth: shapeData.height,
+        curveSegments: 4,
+      });
+      const material = new THREE.MeshStandardMaterial({
+        color: shapeData.fill,
+        roughness: 1,
+        transparent: true,
+        opacity: shapeData.fillOpacity,
+        depthWrite: true,
+        // polygonOffset:true,
+        // polygonOffsetFactor:1,
+        // polygonOffsetUnits:4,
+      });
+      let materials: MeshStandardMaterial | MeshStandardMaterial[] = material;
+      if (shapeData.sideColor !== undefined) {
+        const sideMaterial = new THREE.MeshStandardMaterial({
+          color: shapeData.sideColor,
+          transparent: true,
+          opacity: shapeData.sideOpacity || 1,
+        });
+        materials = [material, sideMaterial];
+      }
+      const mesh = this.shapeMesh = new THREE.Mesh(geometry, materials);
+      this.add(mesh);
+      this.position.set(shapeData.x, shapeData.y, shapeData.zIndex);
+    }
+
+    this.loaded = true;
+    try {
+      if (EnvironmentUtils.GetEnv() === Env.Miniapp) {
+        return;
+      }
+    } catch (e) {
+      // do nothing
+    }
+
+    if (renderStroke) {
+      if (!(Block.StrokeType === StrokeType.all)) {
+        geometry = new THREE.ShapeBufferGeometry(threeShape, 4);
+      }
+      const edgesGeometry = new THREE.EdgesGeometry(geometry);
+      edgesGeometry.translate(0, 0, shapeData.height + 0.001 || 0);
+      // const lineSegmentsGeometry = new LineSegmentsGeometry();
+      // lineSegmentsGeometry.fromEdgesGeometry(edgesGeometry);
+      const line = new THREE.LineSegments(edgesGeometry, new THREE.LineBasicMaterial({
+        color: new THREE.Color(shapeData.stroke).getHex(),
+        opacity: shapeData.strokeOpacity,
+        transparent: true,
+        depthWrite: false,
+      }));
+      // const lineMaterial = new LineMaterial({
+      //   color: new THREE.Color(shapeData.stroke).getHex(),
+      //   opacity: shapeData.strokeOpacity,
+      //   transparent: true,
+      //   linewidth: shapeData.strokeWidth || 1,
+      //   dashed: false,
+      //   depthWrite: false,
+      // });
+      // const line = new LineSegments2(
+      //   lineSegmentsGeometry,
+      //   lineMaterial,
+      // );
+      // if (Block.StrokeType === StrokeType.up) {
+      //   line.position.z = shapeData.height || 0;
+      // }
+      // line.computeLineDistances();
+      // line.scale.set(1, 1, 1);
+      //
+      // this.line = line;
+      // if (this.viewWidth && this.viewHeight) {
+      //   lineMaterial.resolution.set(this.viewWidth, this.viewHeight);
+      // }
+      this.add(line);
+    }
+
+    this.updateBorderOptions(borderOptions, threeShape);
+  }
+
+  public updateShape(
+    shape: Shape, lowPerformance = false, renderStroke = true,
+    borderOptions?: BlockBorderOptions,
+  ): void {
+    this.disposeChildren();
+    this.load(shape, lowPerformance, renderStroke, borderOptions);
+    this.needUpdate = true;
+  }
+
+  public updateBorderOptions(borderOptions?: BlockBorderOptions, threeShape?: NS_THREE.Shape): void {
+    if (this.borderMesh) {
+      BasicTools.dispose(this.borderMesh, true);
+      this.remove(this.borderMesh);
+      this.borderMesh = undefined;
+    }
+    if (borderOptions) {
+      const { THREE } = Externals.getInstance();
+      // console.log(this.shape.shape.z);
+      const shapeData = this.shape.getData();
+      // eslint-disable-next-line no-param-reassign
+      threeShape = threeShape || MapUtils.GenerateShapeFromSteps(this.shape.getSteps());
+      const borderColor = borderOptions.color != null ? borderOptions.color : 0x000;
+      const surface = borderOptions.surface;
+      const splitPoints = borderOptions.splitPoints;
+      const widths = borderOptions.splitWidth;
+      const shapePath = threeShape.getPoints().map((v2) => (new THREE.Vector3(v2.x, v2.y, shapeData.zIndex)));
+      const paths = [] as NS_THREE.Vector3[][];
+      let split = false;
+      let closed = borderOptions.closed;
+      if (splitPoints && widths) {
+        PathUtils.mergeSamePoint3(shapePath);
+        PathUtils.mergePathSameVectorPoint3(shapePath);
+        if (PathUtils.nearlyEqualsV3(shapePath[0], shapePath[shapePath.length - 1])) {
+          closed = true;
+          shapePath.splice(shapePath.length - 1, 1);
+        }
+        const ps = splitPoints.map(((v) => new THREE.Vector3(v.x, v.y, shapeData.zIndex)));
+        const shapePathsObj = PathUtils.splitPathByPoints(shapePath, closed, ps, widths);
+        split = shapePathsObj.split;
+        paths.push(...shapePathsObj.paths);
+      } else {
+        paths.push(shapePath);
+      }
+      if (paths.length) {
+        const { opacity = 1 } = borderOptions;
+        const material2 = new THREE.MeshLambertMaterial({
+          color: borderColor, wireframe: false, opacity, transparent: true,
+        });
+        paths.forEach((pPath) => {
+          const extrudeSettings = {
+            closed: closed && !split,
+            extrudePath: pPath,
+          };
+          // const geometry2 = new THREE.ExtrudeBufferGeometry(surface, extrudeSettings);
+          const geometry2 = new ExtrudeGeometry2(surface, extrudeSettings);
+
+          const mesh2 = this.borderMesh = new THREE.Mesh(geometry2, material2);
+          this.add(mesh2);
+        });
+      }
+    }
+    this.needUpdate = true;
+  }
+
+  public resize(width: number, height: number): void {
+    if (this.viewWidth === width && this.viewHeight === height) return;
+    if (this.line) {
+      (this.line.material as LineMaterial).resolution.set(width, height);
+      this.viewWidth = width;
+      this.viewHeight = height;
+    }
+  }
+
+  public updateColor(options: {
+    fill?: number|string;
+    fillOpacity?: number;
+    stroke?: number|string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    borderColor?: number | string;
+    sideColor?: number | string;
+    sideOpacity?: number;
+  }): void {
+    if (this.shapeMesh) {
+      const materials = this.shapeMesh.material as MeshBasicMaterial | MeshBasicMaterial[];
+      const materialIsArray = Array.isArray(materials);
+      const meshMaterial: MeshBasicMaterial = materialIsArray
+        ? (materials as MeshBasicMaterial[])[0]
+        : materials as MeshBasicMaterial;
+      if (options.fill !== undefined) {
+        meshMaterial.color = new Color(options.fill);
+        meshMaterial.needsUpdate = true;
+      }
+      if (options.fillOpacity !== undefined) {
+        meshMaterial.opacity = options.fillOpacity;
+        meshMaterial.needsUpdate = true;
+      }
+      if (options.sideColor && materialIsArray) {
+        (materials as MeshBasicMaterial[])[1].color = new Color(options.sideColor);
+        (materials as MeshBasicMaterial[])[1].needsUpdate = true;
+      }
+      if (options.sideOpacity && materialIsArray) {
+        (materials as MeshBasicMaterial[])[1].opacity = options.sideOpacity;
+        (materials as MeshBasicMaterial[])[1].needsUpdate = true;
+      }
+    }
+    if (this.line) {
+      const material = this.line.material as LineMaterial;
+      if (options.stroke !== undefined) {
+        material.color = new Color(options.stroke);
+        material.needsUpdate = true;
+      }
+      if (options.strokeOpacity !== undefined) {
+        material.opacity = options.strokeOpacity;
+        material.needsUpdate = true;
+      }
+      if (options.strokeWidth !== undefined) {
+        material.linewidth = options.strokeWidth;
+        material.needsUpdate = true;
+      }
+    }
+    if (this.borderMesh) {
+      const material = this.borderMesh.material as MeshBasicMaterial;
+      if (options.borderColor !== undefined) {
+        material.color = new Color(options.borderColor);
+        material.needsUpdate = true;
+      }
+    }
+    this.needUpdate = true;
+  }
+
+  public setVisible(visible: boolean): void {
+    if (this.visible !== visible) {
+      this.visible = visible;
+      this.needUpdate = true;
+    }
+  }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loaded) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    if (this.needUpdate) {
+      frameContext.needUpdate = true;
+      this.needUpdate = false;
+    }
+
+    return frameContext;
+  }
+
+  public disposeChildren(): void {
+    if (this.lowPerformance) {
+      const shapeData = this.shape.getData();
+      const label = `${this.tag}-${shapeData.fill}-${shapeData.fillOpacity}`;
+      const resource = Block.SharedResourceMap.get(label);
+      if (resource && resource.count === 1 && resource.mesh) {
+        BasicTools.dispose(resource.mesh, true);
+      }
+      Block.SharedResourceMap.delete(label);
+    }
+    BasicTools.dispose(this, true);
+    const children = this.children;
+    if (children) {
+      this.remove(...children);
+    }
+    this.borderMesh = undefined;
+    this.shapeMesh = undefined;
+    // children.forEach((child) => {
+    //   this.remove(child);
+    // });
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.disposeChildren();
+  }
+}
+
+export { Block, BlockBorderOptions, StrokeType };

package/src/owlly/element/map-kit/index.ts

@@ -0,0 +1,6 @@
+// #if WEB_ONLY
+export * from './area';
+// #endif
+export * from './shape';
+export * from './block';
+export * from './block-set';

package/src/owlly/element/map-kit/shape.ts

@@ -0,0 +1,285 @@
+import UUID from 'uuid-js';
+import Bezier from 'bezier-js';
+import { GeometryUtils } from '../../utils/geometry-utils';
+
+/**
+ * 图形结构描述体
+ */
+interface ShapeData {
+  /** 图形ID */
+  id: string;
+  /** 图形位置X坐标 */
+  x: number;
+  /** 图形位置Y坐标 */
+  y: number;
+  /** 图形半径 */
+  radius: number;
+  /** 图形位置Z起始高度 */
+  zIndex: number;
+  // TODO(jyfang): calculate centroid
+  //   https://jingsam.github.io/2016/10/05/centroid.html
+  /** @ignore 图形几何中心 */
+  centroid: [number, number];
+  // Dimensions
+  /** 图形在三维空间(Z轴)高度 */
+  height: number; // z
+  // Shape description
+  /** 图形类型, 分别有: shape(闭合图形), line(线段集), point(点) */
+  shapeType: 'point' | 'line' | 'shape';
+  /**
+   * 图形路径, 路径描述采取以下规范:
+   * 采取类path的指令式描述, 指令结构为 `<command><position>,<position>[,<position>]...`, path为指令的连续组合.
+   * 其中, command分为三种, 每种command后跟随数对x, y坐标:
+   *   - m: 移动, 结构为 `m<x>,<y>`, 移动至x, y坐标
+   *   - l: 直线, 结构为 `l<x>,<y>`, 从当前所在位置连线到x, y坐标
+   *   - c: 二次贝塞尔曲线, 结构为 `c<cp0x>,<cp0y>,<cp1x>,<cp1y>,<x>,<y>`, 从当前所在位置连线到x, y, 并通过控制点cp0, cp1生成曲线
+   */
+  path: string;
+  /**
+   * 缺口索引描述, 针对shape与line,可以配置缺口.
+   * 结构为`<from i0>,<to i1>,<from i2>, <to i3>, ...`
+   * 每两个索引成为一组, 该组所对应的path指令将不会被绘制.
+   */
+  hollows: string;
+  /** 填充颜色, 接受HEX, 默认 #FFFFFF */
+  fill: string;
+  /** 描边颜色, 接受HEX, 默认 #444444 */
+  stroke: string;
+  /** 描边宽度, 接受整数, 默认 1 */
+  strokeWidth: number;
+  /** @ignore 整体透明度, 范围为 [0 - 1] */
+  opacity: number;
+  /** 填充透明度, 范围为 [0 - 1] */
+  fillOpacity: number;
+  /** 透明度, 范围为 [0 - 1] */
+  strokeOpacity: number;
+  /** @ignore 缩放, 数组元素分别对应X, Y, Z轴缩放 */
+  scale: [number, number, number];
+  /** @ignore 旋转, 数组元素描述一个四元数 */
+  rotation: [number, number, number, number];
+  /** @ignore 天花板是否可见 */
+  ceilingVisible: boolean;
+  /** 节点标签 from id/name, [ground, impassable, store] */
+  tag: string;
+  /** 父级名称 from group, [ground, impassable, store] */
+  parentName: string;
+  /** 3D侧面颜色 */
+  sideColor?: string;
+  /** 3D侧面透明度 */
+  sideOpacity?: number;
+}
+
+/**
+ * PathCommand
+ * @ignore
+ */
+enum PathCommand {
+  MOVE = 'm',
+  LINE = 'l',
+  CURVE = 'c',
+}
+
+/**
+ * PathStep
+ * @ignore
+ */
+interface PathStep {
+  command: PathCommand;
+  coords: [number, number][];
+}
+
+class ShapeUtils {
+  static GenerateStepsFromPath(path: string): PathStep[] {
+    const commands = path.match(/([MLCmlc](?:(?:-?\d+(?:\.\d+)?(?:[eE]\d+)?)(?:,-?\d+(?:\.\d+)?(?:[eE]\d+)?)+))/g);
+    if (!commands) return [];
+
+    const steps = commands.map((command) => {
+      const c = command[0].toLowerCase() as PathCommand;
+      const coordStrings = command.slice(1).split(',');
+      const coordCount = coordStrings.length;
+      const coords = [] as [number, number][];
+
+      for (let i = 0; i < coordCount; i += 2) {
+        coords.push([
+          parseFloat(coordStrings[i]),
+          parseFloat(coordStrings[i + 1]),
+        ]);
+      }
+
+      return { command: c, coords } as PathStep;
+    });
+    for (let i = 1; i < steps.length; i++) {
+      const q = steps[i - 1];
+      const h = steps[i];
+      if (q.command === h.command && q.coords[0] === h.coords[0] && q.coords[1] === h.coords[i]) {
+        steps.splice(i, 1);
+        i--;
+      }
+    }
+    return steps;
+  }
+
+  static GeneratePathFromSteps(steps: PathStep[]): string {
+    return steps.map(({ command, coords }) => (`${command}${coords.flat(2).join(',')}`)).join('');
+  }
+
+  static ParseHollows(hollowString: string): [number, number][] {
+    const result: [number, number][] = [];
+    const indices = hollowString.split(',');
+    const l = indices.length;
+    for (let i = 0; i < l; i += 2) {
+      if (indices[i].length && indices[i + 1].length) {
+        result.push([parseInt(indices[i], 10), parseInt(indices[i + 1], 10)]);
+      }
+    }
+    return result;
+  }
+
+  static UnparseHollows(hollows: [number, number][]): string {
+    return hollows.flat(2).join(',');
+  }
+
+  static PolyonOfPathStep(pathSteps: PathStep[]): [number, number][][] {
+    const ret: [number, number][][] = [];
+    let loop: [number, number][] = [];
+    pathSteps.forEach((pathStep: PathStep) => {
+      if (pathStep.command === PathCommand.MOVE) {
+        if (loop && loop.length > 0) {
+          if (loop.length > 2) loop.push(loop[0]);
+          ret.push(loop);
+        }
+        loop = [...pathStep.coords];
+      } else if (pathStep.command === PathCommand.LINE) {
+        loop.push(...pathStep.coords);
+      } else if (pathStep.command === PathCommand.CURVE) {
+        const coords: number[] = [];
+        pathStep.coords.forEach((coord: [number, number]) => {
+          coords.push(...coord);
+        });
+        const bezier = new Bezier(coords);
+        const points = bezier.getLUT(10);
+        // console.info(points);
+        points.forEach((point) => {
+          loop.push([point.x, point.y]);
+        });
+        // loop.push(pathStep.coords[0]);
+        // loop.push(pathStep.coords[pathStep.coords.length - 1]);
+      }
+    });
+    if (loop && loop.length > 0) {
+      if (loop.length > 2) loop.push(loop[0]);
+      ret.push(loop);
+    }
+    return ret;
+  }
+
+  static PolygonOfShape(shape: Shape): [number, number][][] {
+    const pathSteps = shape.getSteps();
+    return ShapeUtils.PolyonOfPathStep(pathSteps);
+  }
+}
+
+/**
+ * 图形, 用作地图图形描述
+ * @noInheritDoc
+ */
+class Shape {
+  private data: ShapeData;
+
+  private steps: PathStep[];
+
+  private hollows: [number, number][];
+
+  public autoCalculateCentroid: boolean;
+
+  /**
+   * @param data 基于ShapeData结构的描述.
+   * @param autoCalculateCentroid 自动计算图形的视觉中心.
+   * @example
+   * ```typescript
+   * // 将svg解析为Shape对象数组
+   * const shapes = await SvgUtils.parseSVG(
+   *   <svg url>,
+   *   [0.02, 0, 0, 0, 0, -0.02, 0, 0, 0, 0, 0, 0, -40, 40, 0, 1], // 对齐矩阵
+   * );
+   * // 也可以直接传入配置生成shape
+   * const shape = new Shape({ path: 'm0,0l1,0l1,1l0,1' }); // 正方形
+   * // 或
+   * shape.updateData({ fill: '#ff0000' });
+   * ```
+   */
+  constructor(data?: object, autoCalculateCentroid = true) {
+    this.data = {
+      id: UUID.create().toString(),
+      x: 0,
+      y: 0,
+      radius: 0,
+      zIndex: 0,
+      centroid: [0, 0],
+      height: 1,
+      shapeType: 'point',
+      path: '',
+      hollows: '',
+      fill: '#ffffff',
+      stroke: '#444444',
+      strokeWidth: 1,
+      opacity: 1,
+      fillOpacity: 1.0,
+      strokeOpacity: 0.2,
+      scale: [0, 0, 0],
+      rotation: [0, 0, 0, 1],
+      tag: '',
+      parentName: '',
+    } as ShapeData;
+    if (data) this.updateData(data, autoCalculateCentroid);
+  }
+
+  /**
+   * 更新图形数据
+   * @param data 基于ShapeData结构的描述
+   */
+  updateData(data: object, autoCalculateCentroid = false): void {
+    Object.assign(this.data, data as ShapeData);
+    this.steps = ShapeUtils.GenerateStepsFromPath(this.data.path);
+    if (this.data.shapeType === 'shape') this.hollows = ShapeUtils.ParseHollows(this.data.hollows);
+
+    if (this.steps.length <= 2 || !autoCalculateCentroid) return;
+    const polygon = ShapeUtils.PolygonOfShape(this);
+    if (polygon && polygon.length > 2) {
+      this.data.centroid = GeometryUtils.CentroidForPOI(polygon);
+      // this.data.centroid = GeometryUtils.Centroid(polygon[0]);
+    }
+  }
+
+  updatePathFromSelfSteps(): void {
+    if (this.data.shapeType === 'point') return;
+
+    this.data.path = this.steps.map((step) => (`${step.command}${step.coords.join(',')}`)).join('');
+  }
+
+  /**
+   * 获得图形数据
+   */
+  getData(): ShapeData {
+    return this.data;
+  }
+
+  /** @ignore */
+  getHollows(): [number, number][] {
+    return this.hollows;
+  }
+
+  /** @ignore */
+  getSteps(): PathStep[] {
+    return this.steps;
+  }
+
+  /** 获得图形类型 */
+  getShapeType(): 'point' | 'line' | 'shape' {
+    return this.data.shapeType;
+  }
+}
+
+export {
+  ShapeData, Shape, PathStep, PathCommand, ShapeUtils,
+};