@idraw/util 0.4.3 → 1.0.0-alpha.1

package/dist/esm/converter/data-svg.d.ts

@@ -0,0 +1,2 @@
+import { Data } from '@idraw/types';
+export declare function dataToSVG(data: Data): string;

package/dist/esm/converter/data-svg.js

@@ -0,0 +1,19 @@
+import { calcMaterialListSize } from '@idraw/util';
+import { materialToSVG } from './material-svg';
+export function dataToSVG(data) {
+    const { layout, materials } = data;
+    const size = calcMaterialListSize(data.materials);
+    let { x, y, width, height } = size;
+    if (layout) {
+        x = layout.x;
+        y = layout.y;
+        width = layout.width;
+        height = layout.height;
+    }
+    let result = `<svg viewBox="0 0 ${width} ${height}">`;
+    materials.forEach((mtrl) => {
+        result += materialToSVG(Object.assign(Object.assign({}, mtrl), { x: mtrl.x - x, y: mtrl.y - y }));
+    });
+    result += '</svg>';
+    return result;
+}

package/dist/esm/converter/material-svg.d.ts

@@ -0,0 +1,2 @@
+import type { Material } from '@idraw/types';
+export declare function materialToSVG(mtrl: Material): string;

package/dist/esm/converter/material-svg.js

@@ -0,0 +1,63 @@
+export function materialToSVG(mtrl) {
+    return serializeNode(mtrl);
+}
+const materialTypeMap = {
+    group: 'g',
+};
+function serializeNode(node, indent = '', level = 0) {
+    const tagName = materialTypeMap[node.type] || node.type;
+    const attributes = serializeAttributes(node);
+    const children = node.children || [];
+    const textContent = node.text || '';
+    const selfClosingTags = ['circle', 'rect', 'path', 'line', 'polygon', 'polyline', 'ellipse', 'use'];
+    const isSelfClosing = selfClosingTags.includes(tagName) && children.length === 0 && !textContent;
+    if (isSelfClosing) {
+        return `${indent}<${tagName}${attributes} />`;
+    }
+    let result = `${indent}<${tagName}${attributes}`;
+    if (children.length === 0 && !textContent) {
+        result += `></${tagName}>`;
+    }
+    else {
+        result += '>';
+        if (textContent) {
+            result += escapeMaterialText(textContent);
+        }
+        if (children.length > 0) {
+            const childIndent = indent + '  ';
+            result += '\n';
+            result += children.map((child) => serializeNode(child, childIndent, level + 1)).join('\n');
+            result += `\n${indent}`;
+        }
+        result += `</${tagName}>`;
+    }
+    return result;
+}
+function serializeAttributes(node) {
+    const reservedProps = ['type', 'children', 'textContent'];
+    const attributes = [];
+    for (const key in node) {
+        if (reservedProps.includes(key))
+            continue;
+        const value = node[key];
+        if (value !== undefined && value !== null) {
+            const attrName = camelToKebabCase(key);
+            attributes.push(`${attrName}="${escapeMaterialAttribute(String(value))}"`);
+        }
+    }
+    return attributes.length > 0 ? ' ' + attributes.join(' ') : '';
+}
+function camelToKebabCase(str) {
+    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+function escapeMaterialText(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function escapeMaterialAttribute(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}

package/dist/esm/converter/svg-material.d.ts

@@ -0,0 +1,2 @@
+import type { StrictMaterial } from '@idraw/types';
+export declare function svgToMaterial(svg: string): StrictMaterial<'group'>;

package/dist/esm/converter/svg-material.js

@@ -0,0 +1,188 @@
+import { createUUID } from '@idraw/util';
+const svgMaterialTypeMap = {
+    svg: 'group',
+    g: 'group',
+};
+const validAttributes = [
+    'x',
+    'y',
+    'width',
+    'height',
+    'angle',
+    'id',
+    'name',
+    'transform',
+    'opacity',
+    'display',
+    'visibility',
+    'overflow',
+    'fill',
+    'fillOpacity',
+    'fillRule',
+    'stroke',
+    'strokeWidth',
+    'strokeOpacity',
+    'strokeLinecap',
+    'strokeLinejoin',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'fontSize',
+    'fontFamily',
+    'fontWeight',
+    'fontStyle',
+    'textAnchor',
+    'textDecoration',
+    'letterSpacing',
+    'wordSpacing',
+    'writingMode',
+    'textAlign',
+    'verticalAlign',
+    'cornerRadius',
+    'commands',
+    'children',
+    'rx',
+    'ry',
+    'cx',
+    'cy',
+    'r',
+];
+const numArrAttrKeys = ['strokeDasharray'];
+const numAttrKeys = [
+    'x',
+    'y',
+    'width',
+    'height',
+    'opacity',
+    'fillOpacity',
+    'strokeWidth',
+    'strokeOpacity',
+    'strokeDashoffset',
+    'fontSize',
+    'fontWeight',
+    'rx',
+    'ry',
+    'cx',
+    'cy',
+    'r',
+];
+function parseAttrValue(key, value) {
+    var _a;
+    if (numAttrKeys.includes(key) && /^[0-9.]{0,}$/.test(value)) {
+        return parseFloat(value);
+    }
+    if (numArrAttrKeys.includes(key)) {
+        return (_a = value
+            .match(/[0-9.]{0,}/g)) === null || _a === void 0 ? void 0 : _a.filter((str) => !!str).map((str) => parseFloat(str));
+    }
+    return value;
+}
+function prepareSVGString(svgString) {
+    return svgString
+        .replace(/<\?xml[^>]*\?>/g, '')
+        .replace(/<!DOCTYPE[^>]*>/g, '')
+        .trim();
+}
+function kebabToCamelCase(str) {
+    return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+}
+function setNodeProperty(node, key, value) {
+    node[key] = parseAttrValue(key, value);
+}
+function parseStyleAttribute(style, node) {
+    const stylePairs = style.split(';');
+    for (const pair of stylePairs) {
+        const [key, value] = pair.split(':').map((s) => s.trim());
+        if (key && value) {
+            const camelCaseKey = kebabToCamelCase(key);
+            setNodeProperty(node, camelCaseKey, value);
+        }
+    }
+}
+function processTransformAttribute(element, node) {
+    const transform = element.getAttribute('transform');
+    if (transform) {
+        setNodeProperty(node, 'transform', transform);
+    }
+}
+function processAttributes(element, node) {
+    for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes[i];
+        const camelCaseKey = kebabToCamelCase(attr.name);
+        if (validAttributes.includes(camelCaseKey)) {
+            setNodeProperty(node, camelCaseKey, attr.value);
+        }
+    }
+    if (!node.id) {
+        node.id = createUUID();
+    }
+    const style = element.getAttribute('style');
+    if (style) {
+        parseStyleAttribute(style, node);
+    }
+    processTransformAttribute(element, node);
+}
+function getTextContent(element) {
+    var _a;
+    let text = '';
+    for (const node of Array.from(element.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        }
+    }
+    return text;
+}
+function parseElement(element) {
+    const tagName = element.tagName;
+    const node = {
+        type: (svgMaterialTypeMap[tagName] || tagName),
+        children: [],
+    };
+    if (tagName === 'svg') {
+        const viewBox = element.getAttribute('viewBox') || '';
+        const items = viewBox.split(' ');
+        const nums = [];
+        if (items.length) {
+            items.forEach((str) => {
+                const num = parseFloat(str);
+                if (num >= 0 || num < 0) {
+                    nums.push(num);
+                }
+            });
+        }
+        if (nums.length >= 4) {
+            node.x = nums[0];
+            node.y = nums[1];
+            node.width = nums[2];
+            node.height = nums[3];
+        }
+    }
+    processAttributes(element, node);
+    const text = getTextContent(element);
+    if (text) {
+        node.text = text;
+    }
+    node.children = [];
+    for (let i = 0; i < element.children.length; i++) {
+        const child = element.children[i];
+        const mtrl = parseElement(child);
+        if (mtrl) {
+            node.children.push(mtrl);
+        }
+    }
+    return node;
+}
+export function svgToMaterial(svg) {
+    const parser = new DOMParser();
+    const cleanSVGString = prepareSVGString(svg);
+    const xmlDoc = parser.parseFromString(cleanSVGString, 'image/svg+xml');
+    const parseError = xmlDoc.getElementsByTagName('parsererror')[0];
+    if (parseError) {
+        throw new Error(`SVG parsing error: ${parseError.textContent}`);
+    }
+    const svgElement = xmlDoc.documentElement;
+    if (svgElement.tagName.toLowerCase() !== 'svg') {
+        throw new Error('Input is not a valid SVG document');
+    }
+    return parseElement(svgElement);
+}

package/dist/esm/index.d.ts

@@ -1,46 +1,57 @@
 export { delay, compose, throttle, debounce } from './tool/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './tool/file';
-export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './tool/color';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText, } from './tool/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha, } from './tool/color';
 export { createUUID, isAssetId, createAssetId } from './tool/uuid';
-export { deepClone, sortDataAsserts, deepCloneElement, deepCloneData, filterCompactData } from './view/data';
+export { deepClone, sortDataAsserts, deepCloneMaterial, deepCloneData, filterCompactData } from './view/data';
 export { istype } from './tool/istype';
-export { loadImage, loadSVG, loadHTML } from './view/load';
+export { loadImage, loadSVGCode, loadForeignObject } from './view/load';
 export { is } from './view/is';
 export { check } from './view/check';
 export { createBoardContent, createContext2D, createOffscreenContext2D } from './view/canvas';
 export { EventEmitter } from './tool/event';
-export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './view/point';
+export { calcDistance, getCenterFromTwoPoints, } from './view/point';
 export { Store } from './tool/store';
-export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './view/middleware';
+export { parseXMLToDataURL, parseSVGCodeToDataURL } from './view/parser';
+export { convertSVGPathToContext2DCommands, convertPathCommandsToContext2DCommands, convertContext2DCommandsToSVGPath, } from './tool/path-to-command';
+export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, getMiddlewareValidStyles } from './view/middleware';
 export { Context2D } from './view/context2d';
-export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian } from './view/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getGroupQueueByElementPosition, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, getElementPositionMapFromList, calcElementListSize, isSameElementSize } from './view/element';
+export { rotateMaterial, parseRadianToAngle, parseAngleToRadian, rotateMaterialVertexes, getMaterialRotateVertexes, calcMaterialCenter, calcMaterialCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian, } from './view/rotate';
+export { getSelectedMaterialUUIDs, validateMaterials, calcMaterialsContextSize, calcMaterialsViewInfo, getMaterialsAssetIds, findMaterialFromList, findMaterialsFromList, findMaterialFromListByPosition, findMaterialQueueFromListByPosition, findMaterialsFromListByPositions, getGroupQueueFromList, getMaterialAndGroupQueueFromList, getGroupQueueByMaterialPosition, getMaterialSize, mergeMaterialAsset, filterMaterialAsset, isResourceMaterial, getMaterialPositionFromList, getMaterialPositionMapFromList, calcMaterialListSize, isSameMaterialSize, } from './view/material';
 export { checkRectIntersect } from './view/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo, calcElementViewRectInfo, calcElementOriginRectInfo, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './view/view-calc';
+export { viewScale, viewScroll, calcViewMaterialSize, calcViewPoint, calcPointFromView, calcViewVertexes, isViewPointInMaterial, getViewPointAtMaterial, isMaterialInView, calcViewScaleInfo, calcMaterialViewBoundingInfo, calcMaterialBoundingInfo, boundingInfoToRangeBoundingInfo, isViewPointInMaterialSize, isViewPointInVertexes, } from './view/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './view/rotate';
-export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './view/vertex';
-export { calcElementSizeController, calcLayoutSizeController } from './view/controller';
-export { generateSVGPath, parseSVGPath } from './view/svg-path';
+export { getMaterialVertexes, calcMaterialVertexesInGroup, calcMaterialVertexesQueueInGroup, calcMaterialQueueVertexesQueueInGroup, } from './view/vertex';
+export { calcMaterialSizeController, calcLayoutSizeController } from './view/controller';
+export { convertPathCommandsToStr, parseSVGPath } from './tool/svg-path';
 export { generateHTML, parseHTML } from './tool/html';
 export { compressImage } from './tool/image';
 export { formatNumber } from './tool/number';
 export { matrixToAngle, matrixToRadian } from './view/matrix';
-export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './view/config';
-export { calcViewBoxSize, calcVisiableViewSize } from './view/view-box';
-export { mergeElement, createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList, updateElementInListByPosition } from './view/handle-element';
-export { resizeEffectGroupElement } from './view/resize-element';
+export { getDefaultMaterialAttributes, getDefaultMaterialRectAttributes } from './view/static';
+export { calcVisiableViewSize } from './view/view-box';
+export { mergeMaterial, createMaterial, insertMaterialToListByPosition, deleteMaterialInListByPosition, deleteMaterialInList, moveMaterialPosition, updateMaterialInList, updateMaterialInListByPosition, } from './view/handle-material';
+export { resizeEffectGroupMaterial } from './view/resize-material';
 export { calcViewCenterContent, calcViewCenter } from './view/view-content';
-export { toFlattenElement, toFlattenLayout, toFlattenGlobal } from './view/modify-record';
+export { toFlattenMaterial, toFlattenLayout, toFlattenGlobal } from './view/modify-record';
 export { enhanceFontFamliy } from './view/text';
-export { flatElementList } from './view/flat';
-export { groupElementsByPosition, ungroupElementsByPosition } from './view/group';
-export { calcPointMoveElementInGroup } from './view/point-move-element';
+export { flatMaterialList } from './view/flat';
+export { groupMaterialsByPosition, ungroupMaterialsByPosition } from './view/group';
+export { calcPointMoveMaterialInGroup } from './view/point-move-material';
 export { mergeLayout } from './view/handle-layout';
 export { mergeGlobal } from './view/handle-global';
 export { calcRevertMovePosition, calcResultMovePosition } from './view/position';
+export { refinePathMaterial } from './view/path';
+export { createHTMLElement, assembleHTMLElement, setHTMLCSSProps, sanitizeHTMLStr, parseHTMLStr, addClassName, removeClassName, getHTMLElementRectInPage, bubbleHTMLElement, isPointInMiddlewareElement, } from './view/dom';
+export { parseStyles, injectStyles, removeStyles } from './view/styles';
 export { merge } from './tool/merge';
 export { omit } from './tool/omit';
-export { elementToBoxInfo } from './view/box';
 export { get, set, toPath } from './tool/get-set-del';
 export { flatObject } from './tool/flat-object';
 export { unflatObject } from './tool/unflat-object';
+export { calcSVGPathBoundingBox, calcPathCommondsBoundingBox } from './tool/path-to-box';
+export { createId } from './tool/id';
+export { shiftPathCommands, shiftPathCommand, scalePathCommands, convertPathCommandsToACLMZ, moveInAnchorCommands, moveCurveCtrlInAnchorCommands, convertLineToExactCurveCommand, } from './tool/path';
+export { svgToMaterial } from './converter/svg-material';
+export { materialToSVG } from './converter/material-svg';
+export { dataToSVG } from './converter/data-svg';
+export { ATTR_VALID_WATCH } from './static';

package/dist/esm/index.js

@@ -1,46 +1,57 @@
 export { delay, compose, throttle, debounce } from './tool/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './tool/file';
-export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './tool/color';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText, } from './tool/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha, } from './tool/color';
 export { createUUID, isAssetId, createAssetId } from './tool/uuid';
-export { deepClone, sortDataAsserts, deepCloneElement, deepCloneData, filterCompactData } from './view/data';
+export { deepClone, sortDataAsserts, deepCloneMaterial, deepCloneData, filterCompactData } from './view/data';
 export { istype } from './tool/istype';
-export { loadImage, loadSVG, loadHTML } from './view/load';
+export { loadImage, loadSVGCode, loadForeignObject } from './view/load';
 export { is } from './view/is';
 export { check } from './view/check';
 export { createBoardContent, createContext2D, createOffscreenContext2D } from './view/canvas';
 export { EventEmitter } from './tool/event';
-export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './view/point';
+export { calcDistance, getCenterFromTwoPoints, } from './view/point';
 export { Store } from './tool/store';
-export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './view/middleware';
+export { parseXMLToDataURL, parseSVGCodeToDataURL } from './view/parser';
+export { convertSVGPathToContext2DCommands, convertPathCommandsToContext2DCommands, convertContext2DCommandsToSVGPath, } from './tool/path-to-command';
+export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, getMiddlewareValidStyles } from './view/middleware';
 export { Context2D } from './view/context2d';
-export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian } from './view/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getGroupQueueByElementPosition, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, getElementPositionMapFromList, calcElementListSize, isSameElementSize } from './view/element';
+export { rotateMaterial, parseRadianToAngle, parseAngleToRadian, rotateMaterialVertexes, getMaterialRotateVertexes, calcMaterialCenter, calcMaterialCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian, } from './view/rotate';
+export { getSelectedMaterialUUIDs, validateMaterials, calcMaterialsContextSize, calcMaterialsViewInfo, getMaterialsAssetIds, findMaterialFromList, findMaterialsFromList, findMaterialFromListByPosition, findMaterialQueueFromListByPosition, findMaterialsFromListByPositions, getGroupQueueFromList, getMaterialAndGroupQueueFromList, getGroupQueueByMaterialPosition, getMaterialSize, mergeMaterialAsset, filterMaterialAsset, isResourceMaterial, getMaterialPositionFromList, getMaterialPositionMapFromList, calcMaterialListSize, isSameMaterialSize, } from './view/material';
 export { checkRectIntersect } from './view/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo, calcElementViewRectInfo, calcElementOriginRectInfo, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './view/view-calc';
+export { viewScale, viewScroll, calcViewMaterialSize, calcViewPoint, calcPointFromView, calcViewVertexes, isViewPointInMaterial, getViewPointAtMaterial, isMaterialInView, calcViewScaleInfo, calcMaterialViewBoundingInfo, calcMaterialBoundingInfo, boundingInfoToRangeBoundingInfo, isViewPointInMaterialSize, isViewPointInVertexes, } from './view/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './view/rotate';
-export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './view/vertex';
-export { calcElementSizeController, calcLayoutSizeController } from './view/controller';
-export { generateSVGPath, parseSVGPath } from './view/svg-path';
+export { getMaterialVertexes, calcMaterialVertexesInGroup, calcMaterialVertexesQueueInGroup, calcMaterialQueueVertexesQueueInGroup, } from './view/vertex';
+export { calcMaterialSizeController, calcLayoutSizeController } from './view/controller';
+export { convertPathCommandsToStr, parseSVGPath } from './tool/svg-path';
 export { generateHTML, parseHTML } from './tool/html';
 export { compressImage } from './tool/image';
 export { formatNumber } from './tool/number';
 export { matrixToAngle, matrixToRadian } from './view/matrix';
-export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './view/config';
-export { calcViewBoxSize, calcVisiableViewSize } from './view/view-box';
-export { mergeElement, createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList, updateElementInListByPosition } from './view/handle-element';
-export { resizeEffectGroupElement } from './view/resize-element';
+export { getDefaultMaterialAttributes, getDefaultMaterialRectAttributes } from './view/static';
+export { calcVisiableViewSize } from './view/view-box';
+export { mergeMaterial, createMaterial, insertMaterialToListByPosition, deleteMaterialInListByPosition, deleteMaterialInList, moveMaterialPosition, updateMaterialInList, updateMaterialInListByPosition, } from './view/handle-material';
+export { resizeEffectGroupMaterial } from './view/resize-material';
 export { calcViewCenterContent, calcViewCenter } from './view/view-content';
-export { toFlattenElement, toFlattenLayout, toFlattenGlobal } from './view/modify-record';
+export { toFlattenMaterial, toFlattenLayout, toFlattenGlobal } from './view/modify-record';
 export { enhanceFontFamliy } from './view/text';
-export { flatElementList } from './view/flat';
-export { groupElementsByPosition, ungroupElementsByPosition } from './view/group';
-export { calcPointMoveElementInGroup } from './view/point-move-element';
+export { flatMaterialList } from './view/flat';
+export { groupMaterialsByPosition, ungroupMaterialsByPosition } from './view/group';
+export { calcPointMoveMaterialInGroup } from './view/point-move-material';
 export { mergeLayout } from './view/handle-layout';
 export { mergeGlobal } from './view/handle-global';
 export { calcRevertMovePosition, calcResultMovePosition } from './view/position';
+export { refinePathMaterial } from './view/path';
+export { createHTMLElement, assembleHTMLElement, setHTMLCSSProps, sanitizeHTMLStr, parseHTMLStr, addClassName, removeClassName, getHTMLElementRectInPage, bubbleHTMLElement, isPointInMiddlewareElement, } from './view/dom';
+export { parseStyles, injectStyles, removeStyles } from './view/styles';
 export { merge } from './tool/merge';
 export { omit } from './tool/omit';
-export { elementToBoxInfo } from './view/box';
 export { get, set, toPath } from './tool/get-set-del';
 export { flatObject } from './tool/flat-object';
 export { unflatObject } from './tool/unflat-object';
+export { calcSVGPathBoundingBox, calcPathCommondsBoundingBox } from './tool/path-to-box';
+export { createId } from './tool/id';
+export { shiftPathCommands, shiftPathCommand, scalePathCommands, convertPathCommandsToACLMZ, moveInAnchorCommands, moveCurveCtrlInAnchorCommands, convertLineToExactCurveCommand, } from './tool/path';
+export { svgToMaterial } from './converter/svg-material';
+export { materialToSVG } from './converter/material-svg';
+export { dataToSVG } from './converter/data-svg';
+export { ATTR_VALID_WATCH } from './static';

package/dist/esm/static.d.ts

@@ -0,0 +1 @@
+export declare const ATTR_VALID_WATCH = "data-idraw-valid-watch";

package/dist/esm/static.js

@@ -0,0 +1 @@
+export const ATTR_VALID_WATCH = 'data-idraw-valid-watch';

package/dist/esm/tool/file.js

@@ -18,7 +18,7 @@ export function pickFile(opts) {
         var _a;
         const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
         success({
-            file: file
+            file: file,
         });
         input = null;
     });
@@ -69,7 +69,7 @@ export function parseFileToText(file) {
 export function parseTextToBlobURL(text) {
     const bytes = new TextEncoder().encode(text);
     const blob = new Blob([bytes], {
-        type: 'text/plain;charset=utf-8'
+        type: 'text/plain;charset=utf-8',
     });
     const blobURL = window.URL.createObjectURL(blob);
     return blobURL;

package/dist/esm/tool/html.js

@@ -1,37 +1,37 @@
 const attrRegExp = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
-const elemRegExp = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+const mtrlRegExp = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
 const whitespaceReg = /^\s*$/;
-const singleElements = {};
-function parseElement(element) {
+const singleMaterials = {};
+function parseMaterial(material) {
     const node = {
-        type: 'element',
+        type: 'material',
         name: '',
         isVoid: false,
         attributes: {},
-        children: []
+        children: [],
     };
-    const elementMatch = element.match(/<\/?([^\s]+?)[/\s>]/);
-    if (elementMatch) {
-        node.name = elementMatch[1];
-        if (singleElements[elementMatch[1]] || element.charAt(element.length - 2) === '/') {
+    const materialMatch = material.match(/<\/?([^\s]+?)[/\s>]/);
+    if (materialMatch) {
+        node.name = materialMatch[1];
+        if (singleMaterials[materialMatch[1]] || material.charAt(material.length - 2) === '/') {
             node.isVoid = true;
         }
         if (node.name.startsWith('!--')) {
-            const endIndex = element.indexOf('-->');
+            const endIndex = material.indexOf('-->');
             return {
                 type: 'comment',
                 name: null,
                 attributes: {},
                 children: [],
                 isVoid: false,
-                comment: endIndex !== -1 ? element.slice(4, endIndex) : ''
+                comment: endIndex !== -1 ? material.slice(4, endIndex) : '',
             };
         }
     }
     const reg = new RegExp(attrRegExp);
     let result = null;
     while (true) {
-        result = reg.exec(element);
+        result = reg.exec(material);
         if (result === null) {
             break;
         }
@@ -59,33 +59,33 @@ export function parseHTML(html) {
     let current;
     let level = -1;
     let inComponent = false;
-    html.replace(elemRegExp, (element, index) => {
+    html.replace(mtrlRegExp, (material, index) => {
         if (inComponent && !Array.isArray(current)) {
-            if (element !== '</' + current.name + '>') {
-                return element;
+            if (material !== '</' + current.name + '>') {
+                return material;
             }
             else {
                 inComponent = false;
             }
         }
-        const isOpen = element.charAt(1) !== '/';
-        const isComment = element.startsWith('<!--');
-        const start = index + element.length;
+        const isOpen = material.charAt(1) !== '/';
+        const isComment = material.startsWith('<!--');
+        const start = index + material.length;
         const nextChar = html.charAt(start);
         let parent;
         if (isComment) {
-            const comment = parseElement(element);
+            const comment = parseMaterial(material);
             if (level < 0) {
                 result.push(comment);
-                return element;
+                return material;
             }
             parent = arr[level];
             parent.children.push(comment);
-            return element;
+            return material;
         }
         if (isOpen) {
             level++;
-            current = parseElement(element);
+            current = parseMaterial(material);
             if (!current.isVoid && !inComponent && nextChar && nextChar !== '<') {
                 const content = html.slice(start, html.indexOf('<', start));
                 if (content.trim()) {
@@ -95,7 +95,7 @@ export function parseHTML(html) {
                         attributes: {},
                         children: [],
                         isVoid: false,
-                        textContent: content.trim()
+                        textContent: content.trim(),
                     });
                 }
             }
@@ -109,7 +109,7 @@ export function parseHTML(html) {
             arr[level] = current;
         }
         if (!isOpen || (!Array.isArray(current) && current.isVoid)) {
-            if (level > -1 && !Array.isArray(current) && (current.isVoid || current.name === element.slice(2, -1))) {
+            if (level > -1 && !Array.isArray(current) && (current.isVoid || current.name === material.slice(2, -1))) {
                 level--;
                 current = level === -1 ? result : arr[level];
             }
@@ -128,13 +128,13 @@ export function parseHTML(html) {
                             attributes: {},
                             children: [],
                             isVoid: false,
-                            textContent: content.trim()
+                            textContent: content.trim(),
                         });
                     }
                 }
             }
         }
-        return element;
+        return material;
     });
     return result;
 }
@@ -152,7 +152,7 @@ function stringify(buff, htmlNode) {
     switch (htmlNode.type) {
         case 'text':
             return buff + htmlNode.textContent;
-        case 'element':
+        case 'material':
             buff +=
                 '<' +
                     htmlNode.name +

package/dist/esm/tool/id.d.ts

@@ -0,0 +1 @@
+export declare function createId(): string;

package/dist/esm/tool/id.js

@@ -0,0 +1,4 @@
+const id = () => Math.random().toString(36).substring(2);
+export function createId() {
+    return `${id()}${id()}`.substring(0, 16);
+}