@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/utils/svgutils.d.ts

@@ -0,0 +1,138 @@
+import Snap from '@aibee/snapsvg';
+import { 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;
+}
+declare type ArrayFixed<T, L extends number> = [T, ...Array<T>] & {
+    length: L;
+};
+/** @ignore */
+interface SvgNode {
+    name: string;
+    type: string;
+    value: string;
+    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 */
+declare type CommandChar = 'C' | 'M' | 'L' | 'Z';
+declare 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 parseSVG(url: string, alignMatrix: ArrayFixed<number, 16>): Promise<Shape[]>;
+    static parseSVGString(svgStr: string, alignMatrix: ArrayFixed<number, 16>): Promise<Shape[]>;
+    /** @ignore */
+    static getShapesFromCanvasNode(canvasNode: CanvasNode): Shape[];
+    /** @ignore */
+    static planCoordinateToWorldCoordinate(planX: number, planY: number, mapping: ModelSvgMapping): {
+        x: number;
+        y: number;
+    };
+    /** @ignore */
+    static getPathCommands(path: string, translate: number[], mapping: ModelSvgMapping): Command[];
+    /** @ignore */
+    static svgNode2Canvas(node: SvgNode, mapping: ModelSvgMapping, isRoot?: boolean, fill?: string | null, fillRule?: string | null, translate?: number[], tag?: string | null): CanvasNode | null;
+    /** @ignore */
+    static svg2canvas(svg: SvgNode, mapping: ModelSvgMapping): CanvasNode | null;
+    /** @ignore */
+    static getPathCommandsWithAlignment(path: string, translate: number[], alignMatrix: ArrayFixed<number, 16>): Command[];
+    static get3DPositionsFrom2D([x, y]: [number, number], m: ArrayFixed<number, 16>): {
+        x: number;
+        y: number;
+    };
+    /**
+     * 获取对齐矩阵指向北方转动的弧度
+     * @param m 对齐矩阵
+     */
+    static getRotateRadiusToNorth(m: ArrayFixed<number, 16>): number;
+    /** @ignore */
+    private static generateCanvasNodeFromSvg;
+    /** @ignore */
+    static getCanvasNodeFromSvg(svg: SvgNode, alignMatrix: ArrayFixed<number, 16>): CanvasNode | null;
+    /** @ignore */
+    static generateNewShape(path: string, id: string, options?: {
+        tag?: string;
+        fill?: string;
+        ownTag?: string;
+    }): Shape;
+    /** @ignore */
+    static parseRectElementToShape(node: Snap.Element, alignMatrix: ArrayFixed<number, 16>, { tag, fill, ownTag }: {
+        tag?: string;
+        fill?: string;
+        ownTag?: string;
+    }): Shape;
+    /** @ignore */
+    static parsePolygonElementToShape(node: Snap.Element, alignMatrix: ArrayFixed<number, 16>, { tag, fill, ownTag }: {
+        tag?: string;
+        fill?: string;
+        ownTag?: string;
+    }): Shape;
+    /** @ignore */
+    static parsePathElementToShape(node: Snap.Element, alignMatrix: ArrayFixed<number, 16>, { tag, fill, ownTag }: {
+        tag?: string;
+        fill?: string;
+        ownTag?: string;
+    }): Shape;
+    /** @ignore */
+    static parseSnapSvgToShapes(node: Snap.Element, alignMatrix: ArrayFixed<number, 16>, options?: {
+        tag?: string;
+        fill?: string;
+    }): Shape[];
+    /** @ignore */
+    static getCompsFromMat4(mat: ArrayFixed<number, 16>): SvgTransComps;
+    /**
+     * 将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?: number): Promise<Shape[]>;
+    static calcHeightFromMat(height: number, alignMatrix: ArrayFixed<number, 16>): number;
+}
+export { CanvasNode, SvgNode, SvgUtils, ModelSvgMapping, };

package/lib/owlly/utils/svgutils.js

@@ -0,0 +1,561 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { parse } from 'svgson';
+import { vec4, mat4 } from 'gl-matrix';
+import Snap from '@aibee/snapsvg';
+import { Externals } from '../stage/externals';
+import { Shape } from '../element/map-kit/shape';
+/** 图形标记 */
+class GraphicTag {
+}
+/** 地面 */
+GraphicTag.Ground = 'ground';
+/** 区域 */
+GraphicTag.Area = 'area';
+/** 店铺 */
+GraphicTag.Store = 'store';
+/** 不可逾越 */
+GraphicTag.Impassable = 'impassable';
+/** 停车位 */
+GraphicTag.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 parseSVG(url, alignMatrix) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { THREE } = Externals.getInstance();
+            const svg = yield new Promise((resolve) => {
+                const fileLoader = new THREE.FileLoader();
+                fileLoader.load(url, (data) => {
+                    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 parseSVGString(svgStr, alignMatrix) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const svgNode = yield parse(svgStr);
+            const canvasNode = this.getCanvasNodeFromSvg(svgNode, alignMatrix);
+            if (!canvasNode)
+                return [];
+            return SvgUtils.getShapesFromCanvasNode(canvasNode);
+        });
+    }
+    /** @ignore */
+    static getShapesFromCanvasNode(canvasNode) {
+        const result = [];
+        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 = [];
+            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,
+            };
+            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, planY, mapping) {
+        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, translate, mapping) {
+        const commands = [];
+        // 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) => {
+                const positions = [];
+                const commandChar = step[0];
+                step.substring(1).split(' ').forEach((pos) => {
+                    positions.push(pos.split(',').map((v) => parseFloat(v)));
+                });
+                const worldPositions = [];
+                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,
+                    });
+                }
+            });
+        }
+        return commands;
+    }
+    /** @ignore */
+    static svgNode2Canvas(node, mapping, isRoot = false, fill = null, fillRule = null, translate = [0, 0], tag = null) {
+        const nodeTag = node.name === 'g' ? node.attributes.name || node.attributes.id || tag : tag;
+        const canvasNode = { children: [], commands: [], tag: nodeTag };
+        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],
+                    });
+                }
+                else {
+                    canvasNode.commands.push({
+                        command: 'L',
+                        args: [x, y],
+                    });
+                }
+            }
+            canvasNode.fill = node.attributes.fill || fill;
+            canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+        }
+        return canvasNode;
+    }
+    /** @ignore */
+    static svg2canvas(svg, mapping) {
+        return SvgUtils.svgNode2Canvas(svg, mapping, true);
+    }
+    /** @ignore */
+    static getPathCommandsWithAlignment(path, translate, alignMatrix) {
+        const commands = [];
+        // 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) => {
+                const positions = [];
+                const commandChar = step[0];
+                step.substring(1).split(' ').forEach((pos) => {
+                    positions.push(pos.split(',').map((v) => parseFloat(v)));
+                });
+                const worldPositions = [];
+                const list = [];
+                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) => {
+                    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,
+                    });
+                }
+            });
+        }
+        return commands;
+    }
+    static get3DPositionsFrom2D([x, y], m) {
+        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 对齐矩阵
+     */
+    static getRotateRadiusToNorth(m) {
+        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 */
+    static generateCanvasNodeFromSvg(node, alignMatrix, isRoot = false, fill = null, fillRule = null, translate = [0, 0], tag = null) {
+        const nodeTag = node.name === 'g' ? node.attributes.name || node.attributes.id || tag : tag;
+        const canvasNode = {
+            children: [], commands: [], tag: nodeTag, id: node.attributes.id,
+        };
+        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],
+                    });
+                }
+                else {
+                    canvasNode.commands.push({
+                        command: 'L',
+                        args: [x, y],
+                    });
+                }
+            }
+            canvasNode.fill = node.attributes.fill || fill;
+            canvasNode.fillRule = node.attributes['fill-rule'] || fillRule || 'nonzero';
+        }
+        return canvasNode;
+    }
+    /** @ignore */
+    static getCanvasNodeFromSvg(svg, alignMatrix) {
+        return SvgUtils.generateCanvasNodeFromSvg(svg, alignMatrix, true);
+    }
+    /** @ignore */
+    static generateNewShape(path, id, options) {
+        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, alignMatrix, { tag, fill, ownTag }) {
+        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 = [];
+        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 = [];
+            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, alignMatrix, { tag, fill, ownTag }) {
+        const { points, id } = node.attr();
+        const pointList = points.split(' ').map(parseFloat);
+        const alignedPathCommands = [];
+        const matrix = node.transform().totalMatrix;
+        for (let i = 0; i < pointList.length; i += 2) {
+            const step = [];
+            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, alignMatrix, { tag, fill, ownTag }) {
+        const { d, id } = node.attr();
+        const pathCommands = Snap.parsePathString(d);
+        const alignedPathCommands = [];
+        const matrix = node.transform().totalMatrix;
+        pathCommands.forEach(([commandChar, ...coords]) => {
+            if (commandChar === 'Z')
+                return;
+            const step = [];
+            step.push(commandChar.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, alignMatrix, options) {
+        try {
+            const { tag, fill } = options || {};
+            const { type } = node;
+            const result = [];
+            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) {
+        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, alignMatrix, coefficient = 1) {
+        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) => {
+                    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, alignMatrix) {
+        const { scale } = SvgUtils.getCompsFromMat4(alignMatrix);
+        const muliNum = 20 * scale.x;
+        return height * muliNum;
+    }
+}
+export { SvgUtils, };