@aibee/owlly 1.0.25

package/src/owlly/utils/svgutils.ts

@@ -0,0 +1,732 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { parse } from 'svgson';
+import { vec4, mat4 } from 'gl-matrix';
+import Snap from '@aibee/snapsvg';
+import { Externals, NS_THREE } from '../stage/externals';
+import { Shape } from '../element/map-kit/shape';
+
+interface ModelSvgMapping {
+  scale: number;
+  theta: number;
+  offsetRatioX: number;
+  offsetRatioY: number;
+  imageHeight?: number;
+  imageWidth?: number;
+}
+
+type ArrayFixed<T, L extends number> = [ T, ...Array<T> ] & { length: L }
+
+/** @ignore */
+interface SvgNode {
+  name: string;
+  type: string;
+  value: string;
+  // eslint-disable-next-line
+  attributes: any;
+  children: SvgNode[];
+}
+
+/** @ignore */
+interface Command {
+  command: CommandChar;
+  args: number[];
+}
+
+/** @ignore */
+interface CanvasNode {
+  id?: string;
+  children: CanvasNode[];
+  commands: Command[];
+  fill?: string;
+  fillRule?: string;
+  tag?: string;
+}
+
+/** @ignore */
+interface SvgTransComps {
+  position: NS_THREE.Vector3;
+  scale: NS_THREE.Vector3;
+  quaternion: NS_THREE.Quaternion;
+}
+
+/** @ignore */
+type CommandChar = 'C' | 'M' | 'L' | 'Z';
+
+/** 图形标记 */
+class GraphicTag {
+  /** 地面 */
+  static readonly Ground = 'ground';
+
+  /** 区域 */
+  static readonly Area = 'area';
+
+  /** 店铺 */
+  static readonly Store = 'store';
+
+  /** 不可逾越 */
+  static readonly Impassable = 'impassable';
+
+  /** 停车位 */
+  static readonly ParkingSpace = 'parking-space';
+}
+
+class SvgUtils {
+  /**
+   * @deprecated
+   * 将SVG文件解析为Owlly map-kit可用的格式
+   * @param url svg地址
+   * @param alignMatrix 对齐数组
+   * @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], // 对齐矩阵
+   * );
+   * ```
+   */
+  static async parseSVG(url: string, alignMatrix: ArrayFixed<number, 16>): Promise<Shape[]> {
+    const { THREE } = Externals.getInstance();
+    const svg: string = await new Promise((resolve) => {
+      const fileLoader = new THREE.FileLoader();
+      fileLoader.load(url, (data: string) => {
+        resolve(data);
+      });
+    });
+    // const svgNode = await parse(svg) as SvgNode;
+    // const canvasNode = this.getCanvasNodeFromSvg(svgNode, alignMatrix);
+    // if (!canvasNode) return [];
+    // return SvgUtils.getShapesFromCanvasNode(canvasNode);
+    return this.parseSVGString(svg, alignMatrix);
+  }
+
+  static async parseSVGString(svgStr: string, alignMatrix: ArrayFixed<number, 16>): Promise<Shape[]> {
+    const svgNode = await parse(svgStr) as SvgNode;
+    const canvasNode = this.getCanvasNodeFromSvg(svgNode, alignMatrix);
+    if (!canvasNode) return [];
+    return SvgUtils.getShapesFromCanvasNode(canvasNode);
+  }
+
+  /** @ignore */
+  static getShapesFromCanvasNode(canvasNode: CanvasNode): Shape[] {
+    const result: Shape[] = [];
+    if (canvasNode.children.length) {
+      const nodesList = canvasNode.children.map((child) => SvgUtils.getShapesFromCanvasNode(child));
+      nodesList.forEach((nodes) => {
+        nodes.forEach((n) => { result.push(n); });
+      });
+    }
+    if (canvasNode.commands.length) {
+      const pathSteps: string[] = [];
+      canvasNode.commands.forEach((command) => {
+        pathSteps.push(`${command.command.toLowerCase()}${command.args.join(',')}`);
+      });
+      let height = 2;
+      let zIndex = 0.01;
+      let fillOpacity = 0.9;
+
+      if (canvasNode.tag) {
+        if (canvasNode.tag.indexOf(GraphicTag.Ground) > -1) {
+          height = 0.00;
+          zIndex = 0;
+          fillOpacity = 1;
+        }
+        if (canvasNode.tag.indexOf(GraphicTag.Area) > -1) {
+          height = 0.00;
+          zIndex = 0.01;
+          fillOpacity = 1;
+        }
+        if (canvasNode.tag.indexOf(GraphicTag.ParkingSpace) > -1) {
+          height = 0.00;
+          zIndex = 0.02;
+          fillOpacity = 1;
+        }
+        if (canvasNode.tag.indexOf(GraphicTag.Store) > -1) {
+          height = 1.8;
+          zIndex = 0.03;
+          fillOpacity = 1;
+        }
+      }
+
+      const data = {
+        path: pathSteps.join(''),
+        shapeType: 'shape',
+        fill: canvasNode.fill,
+        fillOpacity,
+        strokeOpacity: 0.2,
+        height,
+        zIndex,
+        tag: canvasNode.tag,
+        parentName: canvasNode.tag,
+      } as any;
+      if (canvasNode.id) {
+        data.tag = canvasNode.id;
+        data.id = canvasNode.id;
+      }
+      const shape = new Shape(data);
+      result.push(shape);
+    }
+    return result;
+  }
+
+  /** @ignore */
+  static planCoordinateToWorldCoordinate(
+    planX: number, planY: number, mapping: ModelSvgMapping,
+  ): { x: number; y: number } {
+    const imageWidth = mapping.imageWidth || 4000;
+    const imageHeight = mapping.imageHeight || 4000;
+    const ratio = imageWidth / 4000;
+    const yOffset = (imageWidth - imageHeight) / 2;
+    const s = mapping.scale * (4000 / 1000);
+    const t = mapping.theta * (Math.PI / 180);
+    const w = 4000;
+    const h = 4000;
+    const x = (planX / ratio - w * mapping.offsetRatioX) / s;
+    const y = ((planY + yOffset) / ratio - h * mapping.offsetRatioY) / s;
+    const worldX = x * Math.cos(t) + y * Math.sin(t);
+    const worldY = x * Math.sin(t) - y * Math.cos(t);
+    return { x: worldX, y: worldY };
+  }
+
+  // TODO(jyfang): set scale, theta, etc. externally
+  /** @ignore */
+  static getPathCommands(
+    path: string,
+    translate: number[],
+    mapping: ModelSvgMapping,
+  ): Command[] {
+    const commands: Command[] = [];
+    // eslint-disable-next-line max-len
+    const regexp = /((?:(?:M|L)(?:(?:[0-9]|[.eE]|-)+,(?:[0-9]|[.-eE]|-)+))|(?:C(?:(?:[0-9]|[.-eE]|-)+,(?:[0-9]|[.-eE]|-)+\s){2}(?:(?:[0-9]|[.-eE]|-)+,(?:[0-9]|[.-eE]|-)+))|(?:Z|z))/gm;
+    const matches = path.match(regexp);
+    if (matches !== null) {
+      matches.forEach((step: string) => {
+        const positions: number[][] = [];
+        const commandChar: CommandChar = step[0] as CommandChar;
+        step.substring(1).split(' ').forEach((pos: string) => {
+          positions.push(pos.split(',').map((v: string) => parseFloat(v)));
+        });
+        const worldPositions: number[] = [];
+        positions.forEach((position) => {
+          if (position.length < 2) return;
+          const [planX, planY] = position;
+          const { x, y } = SvgUtils.planCoordinateToWorldCoordinate(
+            translate[0] + planX,
+            translate[1] + planY,
+            mapping,
+          );
+          worldPositions.push(x);
+          worldPositions.push(y);
+        });
+        if (commandChar !== 'Z') {
+          commands.push({
+            command: commandChar,
+            args: worldPositions,
+          } as Command);
+        }
+      });
+    }
+    return commands;
+  }
+
+  /** @ignore */
+  static svgNode2Canvas(
+    node: SvgNode,
+    mapping: ModelSvgMapping,
+    isRoot = false,
+    fill: string | null = null,
+    fillRule: string | null = null,
+    translate: number[] = [0, 0],
+    tag: string | null = null,
+  ): CanvasNode | null {
+    const nodeTag = node.name === 'g' ? node.attributes.name || node.attributes.id || tag : tag;
+    const canvasNode = { children: [], commands: [], tag: nodeTag } as CanvasNode;
+    if (node.children && node.children.length) {
+      const nodeFill = node.attributes.fill || fill;
+      const nodeFillRule = node.attributes['fill-rule'] || fillRule;
+      const nodeTranslate = translate.slice();
+      if (node.attributes.transform) {
+        const regexp = /(?:translate\(((?:[0-9]|[.-eE]|-)+),\s((?:[0-9]|[.-eE]|-)+)\))/g;
+        const matches = regexp.exec(node.attributes.transform);
+        if (matches && matches.length > 2) {
+          nodeTranslate[0] += parseFloat(matches[1]);
+          nodeTranslate[1] += parseFloat(matches[2]);
+        }
+      }
+      node.children.forEach((c) => {
+        if (isRoot && c.name !== 'g') return;
+        const childNode = SvgUtils.svgNode2Canvas(
+          c, mapping, false, nodeFill, nodeFillRule, nodeTranslate, nodeTag,
+        );
+        if (childNode) canvasNode.children.push(childNode);
+      });
+    }
+    if (node.name === 'path') {
+    // generate path commands
+      const path = node.attributes.d;
+      canvasNode.commands = SvgUtils.getPathCommands(path, translate, mapping);
+      canvasNode.fill = node.attributes.fill || fill;
+      canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+    }
+    if (node.name === 'polygon') {
+    // generate polygon commands
+      const flatPoints = node.attributes.points.split(' ');
+      for (let i = 0; i < flatPoints.length; i += 2) {
+        const { x, y } = SvgUtils.planCoordinateToWorldCoordinate(
+          translate[0] + parseFloat(flatPoints[i]),
+          translate[1] + parseFloat(flatPoints[i + 1]),
+          mapping,
+        );
+        if (i === 0) {
+          canvasNode.commands.push({
+            command: 'M',
+            args: [x, y],
+          } as Command);
+        } else {
+          canvasNode.commands.push({
+            command: 'L',
+            args: [x, y],
+          } as Command);
+        }
+      }
+      canvasNode.fill = node.attributes.fill || fill;
+      canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+    }
+    return canvasNode;
+  }
+
+  /** @ignore */
+  static svg2canvas(svg: SvgNode, mapping: ModelSvgMapping): CanvasNode | null{
+    return SvgUtils.svgNode2Canvas(svg, mapping, true);
+  }
+
+  /** @ignore */
+  static getPathCommandsWithAlignment(
+    path: string,
+    translate: number[],
+    alignMatrix: ArrayFixed<number, 16>,
+  ): Command[] {
+    const commands: Command[] = [];
+    // eslint-disable-next-line max-len
+    // const regexp = /((?:(?:M|L)(?:(?:[0-9]|[.eE]|-)+,(?:[0-9]|[.-eE]|-)+))|(?:C(?:(?:[0-9]|[.-eE]|-)+,(?:[0-9]|[.-eE]|-)+\s){2}(?:(?:[0-9]|[.-eE]|-)+,(?:[0-9]|[.-eE]|-)+))|(?:Z|z))/gm;
+    const regexp = /[a-z]|[A-Z](\S*)/gm;
+    const matches = path.match(regexp);
+    if (matches !== null) {
+      matches.forEach((step: string) => {
+        const positions: number[][] = [];
+        const commandChar: CommandChar = step[0] as CommandChar;
+        step.substring(1).split(' ').forEach((pos: string) => {
+          positions.push(pos.split(',').map((v: string) => parseFloat(v)));
+        });
+        const worldPositions: number[] = [];
+        const list: any = [];
+        positions.forEach((position) => {
+          if (position.length < 2) return;
+          for (let i = 0; i < position.length;) {
+            const a = position.slice(i, i += 2);
+            list.push(a);
+          }
+        });
+        list.forEach((e: any) => {
+          const [planX, planY] = e;
+          const { x, y } = SvgUtils.get3DPositionsFrom2D(
+            [translate[0] + planX, translate[1] + planY],
+            alignMatrix,
+          );
+          worldPositions.push(x);
+          worldPositions.push(y);
+        });
+        if (commandChar !== 'Z') {
+          commands.push({
+            command: commandChar,
+            args: worldPositions,
+          } as Command);
+        }
+      });
+    }
+    return commands;
+  }
+
+  public static get3DPositionsFrom2D(
+    [x, y]: [number, number],
+    m: ArrayFixed<number, 16>,
+  ): { x: number; y: number } {
+    const alignMat = mat4.fromValues(
+      m[0], m[1], m[2], m[3], m[4], m[5], m[6], m[7], m[8], m[9], m[10], m[11], m[12], m[13], m[14], m[15],
+    );
+    const v = vec4.create();
+    vec4.set(v, x, y, 0, 1);
+    const result = vec4.create();
+    vec4.transformMat4(result, v, alignMat);
+    return { x: result[0], y: result[1] };
+  }
+
+  /**
+   * 获取对齐矩阵指向北方转动的弧度
+   * @param m 对齐矩阵
+   */
+  public static getRotateRadiusToNorth(
+    m: ArrayFixed<number, 16>,
+  ): number {
+    const { THREE } = Externals.getInstance();
+    const position = new THREE.Vector3();
+    const scale = new THREE.Vector3();
+    const quaternion = new THREE.Quaternion();
+    new THREE.Matrix4().fromArray(m).decompose(position, quaternion, scale);
+
+    const targetAngle = new THREE.Euler().setFromQuaternion(quaternion).z;
+    return -targetAngle;
+  }
+
+  /** @ignore */
+  private static generateCanvasNodeFromSvg(
+    node: SvgNode,
+    alignMatrix: ArrayFixed<number, 16>,
+    isRoot = false,
+    fill: string | null = null,
+    fillRule: string | null = null,
+    translate: number[] = [0, 0],
+    tag: string | null = null,
+  ): CanvasNode | null {
+    const nodeTag = node.name === 'g' ? node.attributes.name || node.attributes.id || tag : tag;
+    const canvasNode = {
+      children: [], commands: [], tag: nodeTag, id: node.attributes.id,
+    } as CanvasNode;
+    if (node.children && node.children.length) {
+      const nodeFill = node.attributes.fill || fill;
+      const nodeFillRule = node.attributes['fill-rule'] || fillRule;
+      const nodeTranslate = translate.slice();
+      if (node.attributes.transform) {
+        const regexp = /(?:translate\(((?:[0-9]|[.-eE]|-)+),\s((?:[0-9]|[.-eE]|-)+)\))/g;
+        const matches = regexp.exec(node.attributes.transform);
+        if (matches && matches.length > 2) {
+          nodeTranslate[0] += parseFloat(matches[1]);
+          nodeTranslate[1] += parseFloat(matches[2]);
+        }
+      }
+      node.children.forEach((c) => {
+        if (isRoot && c.name !== 'g') return;
+        const childNode = SvgUtils.generateCanvasNodeFromSvg(
+          c, alignMatrix, false, nodeFill, nodeFillRule, nodeTranslate, nodeTag,
+        );
+        if (childNode) canvasNode.children.push(childNode);
+      });
+    }
+    if (node.name === 'path') {
+    // generate path commands
+      const path = node.attributes.d;
+      canvasNode.commands = SvgUtils.getPathCommandsWithAlignment(path, translate, alignMatrix);
+      canvasNode.fill = node.attributes.fill || fill;
+      canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+    }
+    if (node.name === 'polygon') {
+    // generate polygon commands
+      const flatPoints = node.attributes.points.split(' ');
+      for (let i = 0; i < flatPoints.length; i += 2) {
+        const { x, y } = SvgUtils.get3DPositionsFrom2D(
+          [
+            translate[0] + parseFloat(flatPoints[i]),
+            translate[1] + parseFloat(flatPoints[i + 1]),
+          ],
+          alignMatrix,
+        );
+        if (i === 0) {
+          canvasNode.commands.push({
+            command: 'M',
+            args: [x, y],
+          } as Command);
+        } else {
+          canvasNode.commands.push({
+            command: 'L',
+            args: [x, y],
+          } as Command);
+        }
+      }
+      canvasNode.fill = node.attributes.fill || fill;
+      canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+    }
+    return canvasNode;
+  }
+
+  /** @ignore */
+  static getCanvasNodeFromSvg(svg: SvgNode, alignMatrix: ArrayFixed<number, 16>): CanvasNode | null{
+    return SvgUtils.generateCanvasNodeFromSvg(svg, alignMatrix, true);
+  }
+
+  /** @ignore */
+  static generateNewShape(path: string, id: string, options?: { tag?: string; fill?: string; ownTag?: string }): Shape {
+    const { tag, fill, ownTag } = options || {};
+
+    let height = 2;
+    let zIndex = 0.01;
+    let fillOpacity = 0.9;
+    if (tag === GraphicTag.Ground) {
+      height = 0.00;
+      zIndex = 0;
+      fillOpacity = 1;
+    }
+    if (tag === GraphicTag.Area) {
+      height = 0.00;
+      zIndex = 0.01;
+      fillOpacity = 1;
+    }
+    if (tag === GraphicTag.ParkingSpace) {
+      height = 0.00;
+      zIndex = 0.02;
+      fillOpacity = 1;
+    }
+    if (tag === GraphicTag.Store) {
+      height = 1.8;
+      zIndex = 0.03;
+      fillOpacity = 1;
+    }
+
+    return new Shape({
+      id,
+      path,
+      shapeType: 'shape',
+      fill,
+      fillOpacity,
+      strokeOpacity: 0.2,
+      height,
+      zIndex,
+      tag: ownTag || tag,
+      parentName: tag,
+    });
+  }
+
+  /** @ignore */
+  static parseRectElementToShape(
+    node: Snap.Element,
+    alignMatrix: ArrayFixed<number, 16>,
+    { tag, fill, ownTag }: {
+      tag?: string;
+      fill?: string;
+      ownTag?: string;
+    },
+  ): Shape {
+    const {
+      x: xString, y: yString, width: widthString, height: heightString, id,
+    } = node.attr();
+    const [x, y, width, height] = [xString, yString, widthString, heightString].map(parseFloat);
+    const alignedPathCommands: (string|number)[][] = [];
+    const matrix = node.transform().totalMatrix;
+
+    const pointList = [x, y, x + width, y, x + width, y + height, x, y + height, x, y];
+
+    for (let i = 0; i < pointList.length; i += 2) {
+      const step: (string|number)[] = [];
+      step.push(i > 0 ? 'L' : 'M');
+      const localX = pointList[i];
+      const localY = pointList[i + 1];
+      const worldX = matrix.x(localX, localY);
+      const worldY = matrix.y(localX, localY);
+      const { x: xPos, y: yPos } = this.get3DPositionsFrom2D([worldX, worldY], alignMatrix);
+      step.push(xPos, yPos);
+      alignedPathCommands.push(step);
+    }
+
+    return this.generateNewShape(
+      alignedPathCommands.map(([command, ...coords]) => (`${command}${coords.join(',')}`)).join(''),
+      id,
+      { tag, fill, ownTag },
+    );
+  }
+
+  /** @ignore */
+  static parsePolygonElementToShape(
+    node: Snap.Element,
+    alignMatrix: ArrayFixed<number, 16>,
+    { tag, fill, ownTag }: {
+      tag?: string;
+      fill?: string;
+      ownTag?: string;
+    },
+  ): Shape {
+    const { points, id } = node.attr();
+    const pointList = points.split(' ').map(parseFloat);
+    const alignedPathCommands: (string|number)[][] = [];
+    const matrix = node.transform().totalMatrix;
+
+    for (let i = 0; i < pointList.length; i += 2) {
+      const step: (string|number)[] = [];
+      step.push(i > 0 ? 'L' : 'M');
+      const localX = pointList[i];
+      const localY = pointList[i + 1];
+      const worldX = matrix.x(localX, localY);
+      const worldY = matrix.y(localX, localY);
+      const { x, y } = this.get3DPositionsFrom2D([worldX, worldY], alignMatrix);
+      step.push(x, y);
+      alignedPathCommands.push(step);
+    }
+
+    return this.generateNewShape(
+      alignedPathCommands.map(([command, ...coords]) => (`${command}${coords.join(',')}`)).join(''),
+      id,
+      { tag, fill, ownTag },
+    );
+  }
+
+  /** @ignore */
+  static parsePathElementToShape(
+    node: Snap.Element,
+    alignMatrix: ArrayFixed<number, 16>,
+    { tag, fill, ownTag }: {
+      tag?: string;
+      fill?: string;
+      ownTag?: string;
+    },
+  ): Shape {
+    const { d, id } = node.attr();
+    const pathCommands = Snap.parsePathString(d);
+    const alignedPathCommands: (string|number)[][] = [];
+    const matrix = node.transform().totalMatrix;
+
+    pathCommands.forEach(([commandChar, ...coords]) => {
+      if (commandChar === 'Z') return;
+
+      const step: (string|number)[] = [];
+      step.push((commandChar as string).toLowerCase());
+      for (let i = 0; i < coords.length; i += 2) {
+        const localX = coords[i];
+        const localY = coords[i + 1];
+        const worldX = matrix.x(localX, localY);
+        const worldY = matrix.y(localX, localY);
+        const { x, y } = SvgUtils.get3DPositionsFrom2D([worldX, worldY], alignMatrix);
+        step.push(x, y);
+      }
+
+      alignedPathCommands.push(step);
+    });
+
+    return this.generateNewShape(
+      alignedPathCommands.map(([command, ...coords]) => (`${command}${coords.join(',')}`)).join(''),
+      id,
+      { tag, fill, ownTag },
+    );
+  }
+
+  /** @ignore */
+  static parseSnapSvgToShapes(
+    node: Snap.Element,
+    alignMatrix: ArrayFixed<number, 16>,
+    options?: {
+      tag?: string;
+      fill?: string;
+    },
+  ): Shape[] {
+    try {
+      const { tag, fill } = options || {};
+      const { type } = node;
+      const result: Shape[] = [];
+      const attr = node.attr();
+      const nodeTag = type === 'g' ? attr.name || attr.id || tag : tag;
+      const nodeOwnTag = attr.name || attr.id;
+      const nodeFill = attr.fill || fill || '';
+      const children = node.children();
+      for (let i = 0; i < children.length; i += 1) {
+        const childShapes = this.parseSnapSvgToShapes(children[i], alignMatrix, { tag: nodeTag, fill: nodeFill });
+        for (let j = 0; j < childShapes.length; j += 1) {
+          result.push(childShapes[j]);
+        }
+      }
+      if (type === 'path') {
+        result.push(this.parsePathElementToShape(node, alignMatrix, {
+          tag: nodeTag,
+          fill: nodeFill,
+          ownTag: nodeOwnTag,
+        }));
+      }
+      if (type === 'polygon') {
+        result.push(this.parsePolygonElementToShape(node, alignMatrix, {
+          tag: nodeTag,
+          fill: nodeFill,
+          ownTag: nodeOwnTag,
+        }));
+      }
+      if (type === 'rect') {
+        result.push(this.parseRectElementToShape(node, alignMatrix, {
+          tag: nodeTag,
+          fill: nodeFill,
+          ownTag: nodeOwnTag,
+        }));
+      }
+      return result;
+    } catch (error) {
+      // ignore
+      // console.log(node.type, node.attr('id'), 'not supported skip');
+    }
+    return [];
+  }
+
+  /** @ignore */
+  static getCompsFromMat4(mat: ArrayFixed<number, 16>): SvgTransComps {
+    const { THREE } = Externals.getInstance();
+    const position = new THREE.Vector3();
+    const scale = new THREE.Vector3();
+    const quaternion = new THREE.Quaternion();
+    new THREE.Matrix4().fromArray(mat).decompose(position, quaternion, scale);
+    return {
+      position,
+      scale,
+      quaternion,
+    };
+  }
+
+  /**
+   * 将svg解析为Shape对象数组
+   * @param url SVG文件url
+   * @param alignMatrix 对齐矩阵数组
+   * @param coefficient shape高度调整系数
+   * @example
+   * ```typescript
+   * // 将svg解析为Shape对象数组
+   * const shapes = await SvgUtils.parseSvgToShapes(
+   *   <svg url>,
+   *   [0.02, 0, 0, 0, 0, -0.02, 0, 0, 0, 0, 0, 0, -40, 40, 0, 1], // 对齐矩阵
+   * );
+   * ```
+   */
+  static parseSvgToShapes(
+    url: string,
+    alignMatrix: ArrayFixed<number, 16>,
+    coefficient = 1,
+  ): Promise<Shape[]> {
+    return new Promise((resolve) => {
+      // const tagsCounterMap: Map<string, number> = new Map();
+      Snap.load(
+        url,
+        (fragment) => {
+          let shapes = this.parseSnapSvgToShapes(fragment.select('svg'), alignMatrix);
+          shapes = shapes.map((s: Shape): Shape => {
+            const { height } = s.getData();
+            // if (parentName && !tagsCounterMap.get(parentName)) {
+            //   tagsCounterMap.set(parentName, 0);
+            // }
+            // const count = parentName ? tagsCounterMap.get(parentName) : 0;
+            // tagsCounterMap.set(parentName as string, count as number + 1);
+            const newH = SvgUtils.calcHeightFromMat(height, alignMatrix);
+            // const offset = count as number * 0.01;
+            const tHeight = newH * coefficient;
+            s.updateData({ height: tHeight });
+            return s;
+          });
+          resolve(shapes);
+        },
+      );
+    });
+  }
+
+  static calcHeightFromMat(height: number, alignMatrix: ArrayFixed<number, 16>): number {
+    const { scale } = SvgUtils.getCompsFromMat4(alignMatrix);
+    const muliNum = 20 * scale.x;
+    return height * muliNum;
+  }
+}
+
+export {
+  CanvasNode,
+  SvgNode,
+  SvgUtils,
+  ModelSvgMapping,
+};