@idraw/util 0.4.0-beta.1 → 0.4.0-beta.11

package/dist/esm/index.d.ts

@@ -1,20 +1,20 @@
-export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+export { delay, compose, throttle, debounce } from './lib/time';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './lib/file';
 export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
-export { deepClone, sortDataAsserts } from './lib/data';
+export { deepClone, sortDataAsserts, deepCloneElement, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
 export { check } from './lib/check';
-export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
+export { createBoardContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
 export { EventEmitter } from './lib/event';
 export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
 export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
 export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, calcElementListSize } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
 export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
@@ -28,3 +28,5 @@ export { matrixToAngle, matrixToRadian } from './lib/matrix';
 export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
 export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';
+export { deepResizeGroupElement } from './lib/resize-element';
+export { calcViewCenterContent, calcViewCenter } from './lib/view-content';

package/dist/esm/index.js

@@ -1,20 +1,20 @@
-export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+export { delay, compose, throttle, debounce } from './lib/time';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './lib/file';
 export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
-export { deepClone, sortDataAsserts } from './lib/data';
+export { deepClone, sortDataAsserts, deepCloneElement, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
 export { check } from './lib/check';
-export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
+export { createBoardContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
 export { EventEmitter } from './lib/event';
 export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
 export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
 export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, calcElementListSize } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
 export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
@@ -28,3 +28,5 @@ export { matrixToAngle, matrixToRadian } from './lib/matrix';
 export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
 export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';
+export { deepResizeGroupElement } from './lib/resize-element';
+export { calcViewCenterContent, calcViewCenter } from './lib/view-content';

package/dist/esm/lib/canvas.d.ts

@@ -1,4 +1,4 @@
-import type { ViewContent } from '@idraw/types';
+import type { BoardContent, ViewContext2D } from '@idraw/types';
 import { Context2D } from './context2d';
 export declare function createContext2D(opts: {
     ctx?: CanvasRenderingContext2D;
@@ -11,9 +11,14 @@ export declare function createOffscreenContext2D(opts: {
     height: number;
     devicePixelRatio: number;
 }): Context2D;
-export declare function createViewContent(canvas: HTMLCanvasElement, opts: {
+export declare function createBoardContent(canvas: HTMLCanvasElement, opts: {
     width: number;
     height: number;
     devicePixelRatio: number;
     offscreen?: boolean;
-}): ViewContent;
+    createCustomContext2D?: (opts: {
+        width: number;
+        height: number;
+        devicePixelRatio: number;
+    }) => ViewContext2D;
+}): BoardContent;

package/dist/esm/lib/canvas.js

@@ -22,15 +22,39 @@ export function createOffscreenContext2D(opts) {
     });
     return context2d;
 }
-export function createViewContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+export function createBoardContent(canvas, opts) {
+    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
     const ctxOpts = {
         width,
         height,
         devicePixelRatio
     };
+    const ctx = canvas.getContext('2d');
+    if (createCustomContext2D) {
+        const viewContext = createCustomContext2D(ctxOpts);
+        const helperContext = createCustomContext2D(ctxOpts);
+        const underContext = createCustomContext2D(ctxOpts);
+        const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
+        const drawView = () => {
+            const { width: w, height: h } = viewContext.$getSize();
+            boardContext.clearRect(0, 0, w, h);
+            boardContext.drawImage(underContext.canvas, 0, 0, w, h);
+            boardContext.drawImage(viewContext.canvas, 0, 0, w, h);
+            boardContext.drawImage(helperContext.canvas, 0, 0, w, h);
+            underContext.clearRect(0, 0, w, h);
+            viewContext.clearRect(0, 0, w, h);
+            helperContext.clearRect(0, 0, w, h);
+        };
+        const content = {
+            underContext,
+            viewContext,
+            helperContext,
+            boardContext,
+            drawView
+        };
+        return content;
+    }
     if (offscreen === true) {
-        const ctx = canvas.getContext('2d');
         const viewContext = createOffscreenContext2D(ctxOpts);
         const helperContext = createOffscreenContext2D(ctxOpts);
         const underContext = createOffscreenContext2D(ctxOpts);
@@ -55,7 +79,6 @@ export function createViewContent(canvas, opts) {
         return content;
     }
     else {
-        const ctx = canvas.getContext('2d');
         const viewContext = createContext2D(ctxOpts);
         const helperContext = createContext2D(ctxOpts);
         const underContext = createContext2D(ctxOpts);

package/dist/esm/lib/config.d.ts

@@ -1,14 +1,9 @@
-import type { ViewScaleInfo, DefaultElementDetailConfig, ElementRectDetail, ElementCircleDetail, ElementTextDetail, ElementSVGDetail, ElementImageDetail, ElementGroupDetail } from '@idraw/types';
+import type { DefaultElementDetailConfig, ElementSize, ElementRectDetail, ElementCircleDetail, ElementTextDetail, ElementSVGDetail, ElementImageDetail, ElementGroupDetail } from '@idraw/types';
+export declare const defaultText = "Text Element";
 export declare function getDefaultElementDetailConfig(): DefaultElementDetailConfig;
 export declare function getDefaultElementRectDetail(): ElementRectDetail;
-export declare function getDefaultElementCircleDetail(opts: {
-    radius: number;
-}): ElementCircleDetail;
-export declare function getDefaultElementTextDetail(opts?: {
-    viewScaleInfo: ViewScaleInfo;
-}): ElementTextDetail;
+export declare function getDefaultElementCircleDetail(): ElementCircleDetail;
+export declare function getDefaultElementTextDetail(elementSize: ElementSize): ElementTextDetail;
 export declare function getDefaultElementSVGDetail(): ElementSVGDetail;
 export declare function getDefaultElementImageDetail(): ElementImageDetail;
-export declare function getDefaultElementGroupDetail(opts?: {
-    viewScaleInfo: ViewScaleInfo;
-}): ElementGroupDetail;
+export declare function getDefaultElementGroupDetail(): ElementGroupDetail;

package/dist/esm/lib/config.js

@@ -1,3 +1,4 @@
+export const defaultText = 'Text Element';
 export function getDefaultElementDetailConfig() {
     const config = {
         boxSizing: 'border-box',
@@ -27,24 +28,22 @@ export function getDefaultElementRectDetail() {
     };
     return detail;
 }
-export function getDefaultElementCircleDetail(opts) {
+export function getDefaultElementCircleDetail() {
     const detail = {
         background: '#D9D9D9',
         radius: 0
     };
     return detail;
 }
-export function getDefaultElementTextDetail(opts) {
-    var _a;
+export function getDefaultElementTextDetail(elementSize) {
     const detailConfig = getDefaultElementDetailConfig();
-    const scale = ((_a = opts === null || opts === void 0 ? void 0 : opts.viewScaleInfo) === null || _a === void 0 ? void 0 : _a.scale) || 1;
     const detail = {
-        text: 'Text Element',
+        text: defaultText,
         color: detailConfig.color,
         fontFamily: detailConfig.fontFamily,
         fontWeight: detailConfig.fontWeight,
-        lineHeight: detailConfig.fontSize * scale,
-        fontSize: detailConfig.fontSize * scale,
+        lineHeight: elementSize.w / defaultText.length,
+        fontSize: elementSize.w / defaultText.length,
         textAlign: 'center',
         verticalAlign: 'middle'
     };
@@ -62,7 +61,7 @@ export function getDefaultElementImageDetail() {
     };
     return detail;
 }
-export function getDefaultElementGroupDetail(opts) {
+export function getDefaultElementGroupDetail() {
     const detail = {
         children: [],
         background: '#D9D9D9',

package/dist/esm/lib/context2d.d.ts

@@ -5,6 +5,7 @@ export declare class Context2D implements ViewContext2D {
     $undoPixelRatio(num: number): number;
     $doPixelRatio(num: number): number;
     $getContext(): CanvasRenderingContext2D;
+    $setContext(ctx: CanvasRenderingContext2D): void;
     $setFont(opts: {
         fontSize: number;
         fontFamily?: string;

package/dist/esm/lib/context2d.js

@@ -26,6 +26,9 @@ export class Context2D {
     $getContext() {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f");
     }
+    $setContext(ctx) {
+        __classPrivateFieldSet(this, _Context2D_ctx, ctx, "f");
+    }
     $setFont(opts) {
         const strList = [];
         if (opts.fontWeight) {

package/dist/esm/lib/controller.js

@@ -44,6 +44,10 @@ export function calcElementSizeController(elemSize, opts) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
@@ -56,6 +60,10 @@ export function calcElementSizeController(elemSize, opts) {
     const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
     const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
     const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
     const sizeController = {
         elementWrapper: vertexes,
         left: {
@@ -97,6 +105,26 @@ export function calcElementSizeController(elemSize, opts) {
             type: 'bottom-right',
             vertexes: bottomRightVertexes,
             center: bottomRightCenter
+        },
+        leftMiddle: {
+            type: 'left-middle',
+            vertexes: leftMiddleVertexes,
+            center: leftCenter
+        },
+        rightMiddle: {
+            type: 'right-middle',
+            vertexes: rightMiddleVertexes,
+            center: rightCenter
+        },
+        topMiddle: {
+            type: 'top-middle',
+            vertexes: topMiddleVertexes,
+            center: topCenter
+        },
+        bottomMiddle: {
+            type: 'bottom-middle',
+            vertexes: bottomMiddleVertexes,
+            center: bottomCenter
         }
     };
     return sizeController;

package/dist/esm/lib/data.d.ts

@@ -1,5 +1,9 @@
-import type { Data } from '@idraw/types';
-export declare function deepClone<T extends any = any>(target: T): T;
+import type { Data, Element, LoadItemMap } from '@idraw/types';
+export declare function deepClone<T = any>(target: T): T;
+export declare function deepCloneElement<T extends Element = Element>(element: T): T;
 export declare function sortDataAsserts(data: Data, opts?: {
     clone?: boolean;
 }): Data;
+export declare function filterCompactData(data: Data, opts?: {
+    loadItemMap?: LoadItemMap;
+}): Data<Record<string, any>>;

package/dist/esm/lib/data.js

@@ -1,4 +1,4 @@
-import { createAssetId } from './uuid';
+import { createAssetId, createUUID, isAssetId } from './uuid';
 export function deepClone(target) {
     function _clone(t) {
         const type = is(t);
@@ -27,6 +27,19 @@ export function deepClone(target) {
     }
     return _clone(target);
 }
+export function deepCloneElement(element) {
+    const elem = deepClone(element);
+    const _resetUUID = (e) => {
+        e.uuid = createUUID();
+        if (e.type === 'group' && e.detail.children) {
+            e.detail.children.forEach((child) => {
+                _resetUUID(child);
+            });
+        }
+    };
+    _resetUUID(elem);
+    return elem;
+}
 function is(target) {
     return Object.prototype.toString
         .call(target)
@@ -68,7 +81,7 @@ export function sortDataAsserts(data, opts) {
                 const assetUUID = createAssetId(html);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
-                        type: 'svg',
+                        type: 'html',
                         value: html
                     };
                 }
@@ -90,3 +103,83 @@ export function sortDataAsserts(data, opts) {
     sortedData.assets = assets;
     return sortedData;
 }
+export function filterCompactData(data, opts) {
+    const assets = data.assets || {};
+    const sortedData = deepClone(data);
+    const loadItemMap = (opts === null || opts === void 0 ? void 0 : opts.loadItemMap) || {};
+    const _scanElements = (elems) => {
+        elems.forEach((elem) => {
+            var _a, _b, _c;
+            if (elem.type === 'image' && elem.detail.src) {
+                const src = elem.detail.src;
+                if (isAssetId(src) && !assets[src] && loadItemMap[src] && typeof ((_a = loadItemMap[src]) === null || _a === void 0 ? void 0 : _a.source) === 'string') {
+                    assets[src] = {
+                        type: 'image',
+                        value: loadItemMap[src].source
+                    };
+                }
+                else if (!assets[src]) {
+                    const assetUUID = createAssetId(src);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'image',
+                            value: src
+                        };
+                    }
+                    elem.detail.src = assetUUID;
+                }
+            }
+            else if (elem.type === 'svg') {
+                const svg = elem.detail.svg;
+                if (isAssetId(svg) && !assets[svg] && loadItemMap[svg] && typeof ((_b = loadItemMap[svg]) === null || _b === void 0 ? void 0 : _b.source) === 'string') {
+                    assets[svg] = {
+                        type: 'svg',
+                        value: loadItemMap[svg].source
+                    };
+                }
+                else if (!assets[svg]) {
+                    const assetUUID = createAssetId(svg);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'svg',
+                            value: svg
+                        };
+                    }
+                    elem.detail.svg = assetUUID;
+                }
+            }
+            else if (elem.type === 'html') {
+                const html = elem.detail.html;
+                if (isAssetId(html) && !assets[html] && loadItemMap[html] && typeof ((_c = loadItemMap[html]) === null || _c === void 0 ? void 0 : _c.source) === 'string') {
+                    assets[html] = {
+                        type: 'html',
+                        value: loadItemMap[html].source
+                    };
+                }
+                else if (!assets[html]) {
+                    const assetUUID = createAssetId(html);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'html',
+                            value: html
+                        };
+                    }
+                    elem.detail.html = assetUUID;
+                }
+            }
+            else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+                const groupAssets = elem.detail.assets || {};
+                Object.keys(groupAssets).forEach((assetId) => {
+                    if (!assets[assetId]) {
+                        assets[assetId] = groupAssets[assetId];
+                    }
+                });
+                delete elem.detail.assets;
+                _scanElements(elem.detail.children);
+            }
+        });
+    };
+    _scanElements(sortedData.elements);
+    sortedData.assets = assets;
+    return sortedData;
+}

package/dist/esm/lib/element.d.ts

@@ -1,6 +1,7 @@
 import type { Data, Element, Elements, ElementType, ElementSize, ViewContextSize, ViewSizeInfo, ElementAssets, ElementAssetsItem, LoadElementType, ElementPosition } from '@idraw/types';
 export declare function getSelectedElementUUIDs(data: Data, indexes: Array<number | string>): string[];
 export declare function validateElements(elements: Array<Element<ElementType>>): boolean;
+export declare function calcElementListSize(list: Elements): ElementSize;
 export declare function calcElementsContextSize(elements: Array<Element<ElementType>>, opts?: {
     viewWidth: number;
     viewHeight: number;
@@ -25,4 +26,5 @@ export declare function filterElementAsset<T extends Element<LoadElementType>>(e
 export declare function isResourceElement(elem: Element): boolean;
 export declare function findElementsFromListByPositions(positions: ElementPosition[], list: Element[]): Element[];
 export declare function findElementFromListByPosition(position: ElementPosition, list: Element[]): Element | null;
+export declare function findElementQueueFromListByPosition(position: ElementPosition, list: Element[]): Element[];
 export declare function getElementPositionFromList(uuid: string, elements: Element<ElementType>[]): ElementPosition;

package/dist/esm/lib/element.js

@@ -66,6 +66,59 @@ export function validateElements(elements) {
     }
     return isValid;
 }
+export function calcElementListSize(list) {
+    var _a;
+    const area = { x: 0, y: 0, w: 0, h: 0 };
+    let prevElemSize = null;
+    for (let i = 0; i < list.length; i++) {
+        const elem = list[i];
+        if ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
+            continue;
+        }
+        const elemSize = {
+            x: elem.x,
+            y: elem.y,
+            w: elem.w,
+            h: elem.h,
+            angle: elem.angle || 0
+        };
+        if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
+            const ves = rotateElementVertexes(elemSize);
+            if (ves.length === 4) {
+                const xList = [ves[0].x, ves[1].x, ves[2].x, ves[3].x];
+                const yList = [ves[0].y, ves[1].y, ves[2].y, ves[3].y];
+                elemSize.x = Math.min(...xList);
+                elemSize.y = Math.min(...yList);
+                elemSize.w = Math.abs(Math.max(...xList) - Math.min(...xList));
+                elemSize.h = Math.abs(Math.max(...yList) - Math.min(...yList));
+            }
+        }
+        if (prevElemSize) {
+            const areaStartX = Math.min(elemSize.x, area.x);
+            const areaStartY = Math.min(elemSize.y, area.y);
+            const areaEndX = Math.max(elemSize.x + elemSize.w, area.x + area.w);
+            const areaEndY = Math.max(elemSize.y + elemSize.h, area.y + area.h);
+            area.x = areaStartX;
+            area.y = areaStartY;
+            area.w = Math.abs(areaEndX - areaStartX);
+            area.h = Math.abs(areaEndY - areaStartY);
+        }
+        else {
+            area.x = elemSize.x;
+            area.y = elemSize.y;
+            area.w = elemSize.w;
+            area.h = elemSize.h;
+        }
+        prevElemSize = elemSize;
+    }
+    const listSize = {
+        x: Math.floor(area.x),
+        y: Math.floor(area.y),
+        w: Math.ceil(area.w),
+        h: Math.ceil(area.h)
+    };
+    return listSize;
+}
 export function calcElementsContextSize(elements, opts) {
     const area = { x: 0, y: 0, w: 0, h: 0 };
     elements.forEach((elem) => {
@@ -307,8 +360,29 @@ export function findElementFromListByPosition(position, list) {
     }
     return result;
 }
+export function findElementQueueFromListByPosition(position, list) {
+    const result = [];
+    let tempList = list;
+    for (let i = 0; i < position.length; i++) {
+        const pos = position[i];
+        const item = tempList[pos];
+        if (item) {
+            result.push(item);
+        }
+        else {
+            break;
+        }
+        if (i < position.length - 1 && item.type === 'group') {
+            tempList = item.detail.children;
+        }
+        else {
+            break;
+        }
+    }
+    return result;
+}
 export function getElementPositionFromList(uuid, elements) {
-    let result = [];
+    const result = [];
     let over = false;
     const _loop = (list) => {
         var _a;

package/dist/esm/lib/event.d.ts

@@ -1,9 +1,11 @@
 import type { UtilEventEmitter } from '@idraw/types';
 export declare class EventEmitter<T extends Record<string, any>> implements UtilEventEmitter<T> {
-    private _listeners;
+    #private;
     constructor();
     on<K extends keyof T>(eventKey: K, callback: (e: T[K]) => void): void;
     off<K extends keyof T>(eventKey: K, callback: (e: T[K]) => void): void;
-    trigger<K extends keyof T>(eventKey: K, e: T[K]): boolean;
+    trigger<K extends keyof T>(eventKey: K, e?: T[K]): boolean;
     has<K extends keyof T>(name: K | string): boolean;
+    destroy(): void;
+    clear(): void;
 }

package/dist/esm/lib/event.js

@@ -1,20 +1,33 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EventEmitter_listeners;
 export class EventEmitter {
     constructor() {
-        this._listeners = new Map();
+        _EventEmitter_listeners.set(this, void 0);
+        __classPrivateFieldSet(this, _EventEmitter_listeners, new Map(), "f");
     }
     on(eventKey, callback) {
-        if (this._listeners.has(eventKey)) {
-            const callbacks = this._listeners.get(eventKey) || [];
+        if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(eventKey)) {
+            const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey) || [];
             callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
-            this._listeners.set(eventKey, callbacks);
+            __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, callbacks);
         }
         else {
-            this._listeners.set(eventKey, [callback]);
+            __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, [callback]);
         }
     }
     off(eventKey, callback) {
-        if (this._listeners.has(eventKey)) {
-            const callbacks = this._listeners.get(eventKey);
+        if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(eventKey)) {
+            const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey);
             if (Array.isArray(callbacks)) {
                 for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
                     if (callbacks[i] === callback) {
@@ -23,11 +36,11 @@ export class EventEmitter {
                     }
                 }
             }
-            this._listeners.set(eventKey, callbacks || []);
+            __classPrivateFieldGet(this, _EventEmitter_listeners, "f").set(eventKey, callbacks || []);
         }
     }
     trigger(eventKey, e) {
-        const callbacks = this._listeners.get(eventKey);
+        const callbacks = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(eventKey);
         if (Array.isArray(callbacks)) {
             callbacks.forEach((cb) => {
                 cb(e);
@@ -39,12 +52,19 @@ export class EventEmitter {
         }
     }
     has(name) {
-        if (this._listeners.has(name)) {
-            const list = this._listeners.get(name);
+        if (__classPrivateFieldGet(this, _EventEmitter_listeners, "f").has(name)) {
+            const list = __classPrivateFieldGet(this, _EventEmitter_listeners, "f").get(name);
             if (Array.isArray(list) && list.length > 0) {
                 return true;
             }
         }
         return false;
     }
+    destroy() {
+        this.clear();
+    }
+    clear() {
+        __classPrivateFieldGet(this, _EventEmitter_listeners, "f").clear();
+    }
 }
+_EventEmitter_listeners = new WeakMap();

package/dist/esm/lib/file.d.ts

@@ -1,14 +1,19 @@
 type ImageType = 'image/jpeg' | 'image/png';
 export declare function downloadImageFromCanvas(canvas: HTMLCanvasElement, opts: {
-    filename: string;
+    fileName: string;
     type: ImageType;
 }): void;
 export declare function pickFile(opts: {
+    accept?: string;
     success: (data: {
         file: File;
     }) => void;
-    error?: (err: ErrorEvent) => void;
+    error?: (err: Error | any) => void;
 }): void;
 export declare function parseFileToBase64(file: File): Promise<string | ArrayBuffer>;
 export declare function parseFileToText(file: File): Promise<string | ArrayBuffer>;
+export declare function parseTextToBlobURL(text: string): string;
+export declare function downloadFileFromText(text: string, opts: {
+    fileName: string;
+}): void;
 export {};