@idraw/util 0.3.0 → 0.4.0-alpha.1

package/dist/esm/lib/context2d.js

@@ -0,0 +1,226 @@
+export class Context2D {
+    constructor(ctx, opts) {
+        this._devicePixelRatio = 1;
+        const { devicePixelRatio = 1 } = opts;
+        this._ctx = ctx;
+        this._devicePixelRatio = devicePixelRatio;
+    }
+    $undoPixelRatio(num) {
+        return num / this._devicePixelRatio;
+    }
+    $doPixelRatio(num) {
+        return this._devicePixelRatio * num;
+    }
+    $getContext() {
+        return this._ctx;
+    }
+    $setFont(opts) {
+        const strList = [];
+        if (opts.fontWeight) {
+            strList.push(`${opts.fontWeight}`);
+        }
+        strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
+        strList.push(`${opts.fontFamily || 'sans-serif'}`);
+        this._ctx.font = `${strList.join(' ')}`;
+    }
+    $resize(opts) {
+        const { width, height, devicePixelRatio } = opts;
+        const { canvas } = this._ctx;
+        canvas.width = width * devicePixelRatio;
+        canvas.height = height * devicePixelRatio;
+        this._devicePixelRatio = devicePixelRatio;
+    }
+    get canvas() {
+        return this._ctx.canvas;
+    }
+    get fillStyle() {
+        return this._ctx.fillStyle;
+    }
+    set fillStyle(value) {
+        this._ctx.fillStyle = value;
+    }
+    get strokeStyle() {
+        return this._ctx.strokeStyle;
+    }
+    set strokeStyle(color) {
+        this._ctx.strokeStyle = color;
+    }
+    get lineWidth() {
+        return this.$undoPixelRatio(this._ctx.lineWidth);
+    }
+    set lineWidth(w) {
+        this._ctx.lineWidth = this.$doPixelRatio(w);
+    }
+    get textAlign() {
+        return this._ctx.textAlign;
+    }
+    set textAlign(align) {
+        this._ctx.textAlign = align;
+    }
+    get textBaseline() {
+        return this._ctx.textBaseline;
+    }
+    set textBaseline(baseline) {
+        this._ctx.textBaseline = baseline;
+    }
+    get globalAlpha() {
+        return this._ctx.globalAlpha;
+    }
+    set globalAlpha(alpha) {
+        this._ctx.globalAlpha = alpha;
+    }
+    get shadowColor() {
+        return this._ctx.shadowColor;
+    }
+    set shadowColor(color) {
+        this._ctx.shadowColor = color;
+    }
+    get shadowOffsetX() {
+        return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+    }
+    set shadowOffsetX(offsetX) {
+        this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+    }
+    get shadowOffsetY() {
+        return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+    }
+    set shadowOffsetY(offsetY) {
+        this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+    }
+    get shadowBlur() {
+        return this.$undoPixelRatio(this._ctx.shadowBlur);
+    }
+    set shadowBlur(blur) {
+        this._ctx.shadowBlur = this.$doPixelRatio(blur);
+    }
+    get lineCap() {
+        return this._ctx.lineCap;
+    }
+    set lineCap(lineCap) {
+        this._ctx.lineCap = lineCap;
+    }
+    get globalCompositeOperation() {
+        return this._ctx.globalCompositeOperation;
+    }
+    set globalCompositeOperation(operations) {
+        this._ctx.globalCompositeOperation = operations;
+    }
+    fill(...args) {
+        return this._ctx.fill(...args);
+    }
+    arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+        return this._ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+    }
+    rect(x, y, w, h) {
+        return this._ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    }
+    fillRect(x, y, w, h) {
+        return this._ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    }
+    clearRect(x, y, w, h) {
+        return this._ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    }
+    beginPath() {
+        return this._ctx.beginPath();
+    }
+    closePath() {
+        return this._ctx.closePath();
+    }
+    lineTo(x, y) {
+        return this._ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+    moveTo(x, y) {
+        return this._ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+    arcTo(x1, y1, x2, y2, radius) {
+        return this._ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+    }
+    getLineDash() {
+        return this._ctx.getLineDash();
+    }
+    setLineDash(nums) {
+        return this._ctx.setLineDash(nums.map((n) => this.$doPixelRatio(n)));
+    }
+    stroke(path) {
+        return path ? this._ctx.stroke(path) : this._ctx.stroke();
+    }
+    translate(x, y) {
+        return this._ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+    rotate(angle) {
+        return this._ctx.rotate(angle);
+    }
+    drawImage(...args) {
+        const image = args[0];
+        const sx = args[1];
+        const sy = args[2];
+        const sw = args[3];
+        const sh = args[4];
+        const dx = args[args.length - 4];
+        const dy = args[args.length - 3];
+        const dw = args[args.length - 2];
+        const dh = args[args.length - 1];
+        if (args.length === 9) {
+            return this._ctx.drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        }
+        else {
+            return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+        }
+    }
+    createPattern(image, repetition) {
+        return this._ctx.createPattern(image, repetition);
+    }
+    measureText(text) {
+        const textMetrics = this._ctx.measureText(text);
+        return textMetrics;
+    }
+    fillText(text, x, y, maxWidth) {
+        if (maxWidth !== undefined) {
+            return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+        }
+        else {
+            return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+        }
+    }
+    strokeText(text, x, y, maxWidth) {
+        if (maxWidth !== undefined) {
+            return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+        }
+        else {
+            return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+        }
+    }
+    save() {
+        this._ctx.save();
+    }
+    restore() {
+        this._ctx.restore();
+    }
+    scale(ratioX, ratioY) {
+        this._ctx.scale(ratioX, ratioY);
+    }
+    circle(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+        this._ctx.ellipse(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
+    }
+    isPointInPath(x, y) {
+        return this._ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+    clip(...args) {
+        return this._ctx.clip(...args);
+    }
+    setTransform(a, b, c, d, e, f) {
+        return this._ctx.setTransform(a, b, c, d, e, f);
+    }
+    getTransform() {
+        return this._ctx.getTransform();
+    }
+    createLinearGradient(x0, y0, x1, y1) {
+        return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+    }
+    createRadialGradient(x0, y0, r0, x1, y1, r1) {
+        return this._ctx.createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
+    }
+    createConicGradient(startAngle, x, y) {
+        return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+}

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

@@ -0,0 +1,6 @@
+import type { Element, ElementSize, ElementSizeController, ViewScaleInfo } from '@idraw/types';
+export declare function calcElementSizeController(elemSize: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+    controllerSize?: number;
+    viewScaleInfo: ViewScaleInfo;
+}): ElementSizeController;

package/dist/esm/lib/controller.js

@@ -0,0 +1,99 @@
+import { createUUID } from './uuid';
+import { getCenterFromTwoPoints } from './point';
+import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
+function createControllerElementSizeFromCenter(center, opts) {
+    const { x, y } = center;
+    const { size, angle } = opts;
+    return {
+        x: x - size / 2,
+        y: y - size / 2,
+        w: size,
+        h: size,
+        angle
+    };
+}
+export function calcElementSizeController(elemSize, opts) {
+    const { groupQueue, controllerSize, viewScaleInfo } = opts;
+    const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
+    const { x, y, w, h, angle = 0 } = elemSize;
+    const ctrlGroupQueue = [
+        ...[
+            {
+                uuid: createUUID(),
+                x,
+                y,
+                w,
+                h,
+                angle,
+                type: 'group',
+                detail: { children: [] }
+            }
+        ],
+        ...groupQueue
+    ];
+    let totalAngle = 0;
+    ctrlGroupQueue.forEach(({ angle = 0 }) => {
+        totalAngle += angle;
+    });
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const leftCenter = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeftCenter = vertexes[0];
+    const topRightCenter = vertexes[1];
+    const bottomRightCenter = vertexes[2];
+    const bottomLeftCenter = vertexes[3];
+    const topSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftSize = 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 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const sizeController = {
+        elementWrapper: vertexes,
+        left: {
+            type: 'left',
+            vertexes: calcElementVertexes(leftSize),
+            center: leftCenter
+        },
+        right: {
+            type: 'right',
+            vertexes: calcElementVertexes(rightSize),
+            center: rightCenter
+        },
+        top: {
+            type: 'top',
+            vertexes: calcElementVertexes(topSize),
+            center: topCenter
+        },
+        bottom: {
+            type: 'bottom',
+            vertexes: calcElementVertexes(bottomSize),
+            center: bottomCenter
+        },
+        topLeft: {
+            type: 'top-left',
+            vertexes: calcElementVertexes(topLeftSize),
+            center: topLeftCenter
+        },
+        topRight: {
+            type: 'top-right',
+            vertexes: calcElementVertexes(topRightSize),
+            center: topRightCenter
+        },
+        bottomLeft: {
+            type: 'bottom-left',
+            vertexes: calcElementVertexes(bottomLeftSize),
+            center: bottomLeftCenter
+        },
+        bottomRight: {
+            type: 'bottom-right',
+            vertexes: calcElementVertexes(bottomRightSize),
+            center: bottomRightCenter
+        }
+    };
+    return sizeController;
+}

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

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

package/dist/esm/lib/data.js

@@ -1,3 +1,4 @@
+import { createAssetId } from './uuid';
 export function deepClone(target) {
     function _clone(t) {
         const type = is(t);
@@ -17,11 +18,75 @@ export function deepClone(target) {
             keys.forEach((key) => {
                 obj[key] = _clone(t[key]);
             });
+            const symbolKeys = Object.getOwnPropertySymbols(t);
+            symbolKeys.forEach((key) => {
+                obj[key] = _clone(t[key]);
+            });
             return obj;
         }
     }
     return _clone(target);
 }
-function is(data) {
-    return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
+function is(target) {
+    return Object.prototype.toString
+        .call(target)
+        .replace(/[\]|\[]{1,1}/gi, '')
+        .split(' ')[1];
+}
+export function sortDataAsserts(data, opts) {
+    const assets = data.assets || {};
+    let sortedData = data;
+    if ((opts === null || opts === void 0 ? void 0 : opts.clone) === true) {
+        sortedData = deepClone(data);
+    }
+    const _scanElements = (elems) => {
+        elems.forEach((elem) => {
+            if (elem.type === 'image' && elem.detail.src) {
+                const src = elem.detail.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;
+                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;
+                const assetUUID = createAssetId(html);
+                if (!assets[assetUUID]) {
+                    assets[assetUUID] = {
+                        type: 'svg',
+                        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

@@ -0,0 +1,18 @@
+import type { Data, Element, Elements, ElementType, ViewContextSize, ViewSizeInfo, RecursivePartial } 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 calcElementsContextSize(elements: Array<Element<ElementType>>, opts?: {
+    viewWidth: number;
+    viewHeight: number;
+    extend?: boolean;
+}): ViewContextSize;
+export declare function calcElementsViewInfo(elements: Array<Element<ElementType>>, prevViewSize: ViewSizeInfo, options?: {
+    extend: boolean;
+}): {
+    contextSize: ViewContextSize;
+};
+export declare function getElemenetsAssetIds(elements: Elements): string[];
+export declare function findElementFromList(uuid: string, list: Element<ElementType>[]): Element<ElementType> | null;
+export declare function findElementsFromList(uuids: string[], list: Element<ElementType>[]): Element<ElementType>[];
+export declare function getGroupQueueFromList(uuid: string, elements: Element<ElementType>[]): Element<'group'>[];
+export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element<ElementType>[]): Element<ElementType>[];

package/dist/esm/lib/element.js

@@ -0,0 +1,241 @@
+import { rotateElementVertexes } from './rotate';
+import { isAssetId } from './uuid';
+function getGroupUUIDs(elements, index) {
+    var _a;
+    const uuids = [];
+    if (typeof index === 'string' && /^\d+(\.\d+)*$/.test(index)) {
+        const nums = index.split('.');
+        let target = elements;
+        while (nums.length > 0) {
+            const num = nums.shift();
+            if (typeof num === 'string') {
+                const elem = target[parseInt(num)];
+                if (elem && nums.length === 0) {
+                    uuids.push(elem.uuid);
+                }
+                else if (elem.type === 'group' && nums.length > 0) {
+                    target = ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || [];
+                }
+            }
+            break;
+        }
+    }
+    return uuids;
+}
+export function getSelectedElementUUIDs(data, indexes) {
+    var _a;
+    let uuids = [];
+    if (Array.isArray(data === null || data === void 0 ? void 0 : data.elements) && ((_a = data === null || data === void 0 ? void 0 : data.elements) === null || _a === void 0 ? void 0 : _a.length) > 0 && Array.isArray(indexes) && indexes.length > 0) {
+        indexes.forEach((idx) => {
+            var _a;
+            if (typeof idx === 'number') {
+                if ((_a = data === null || data === void 0 ? void 0 : data.elements) === null || _a === void 0 ? void 0 : _a[idx]) {
+                    uuids.push(data.elements[idx].uuid);
+                }
+            }
+            else if (typeof idx === 'string') {
+                uuids = uuids.concat(getGroupUUIDs(data.elements, idx));
+            }
+        });
+    }
+    return uuids;
+}
+export function validateElements(elements) {
+    let isValid = true;
+    if (Array.isArray(elements)) {
+        const uuids = [];
+        elements.forEach((elem) => {
+            var _a;
+            if (typeof elem.uuid === 'string' && elem.uuid) {
+                if (uuids.includes(elem.uuid)) {
+                    isValid = false;
+                    console.warn(`Duplicate uuids: ${elem.uuid}`);
+                }
+                else {
+                    uuids.push(elem.uuid);
+                }
+            }
+            else {
+                isValid = false;
+                console.warn('Element missing uuid', elem);
+            }
+            if (elem.type === 'group') {
+                isValid = validateElements((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children);
+            }
+        });
+    }
+    return isValid;
+}
+export function calcElementsContextSize(elements, opts) {
+    const area = { x: 0, y: 0, w: 0, h: 0 };
+    elements.forEach((elem) => {
+        const elemSize = {
+            x: elem.x,
+            y: elem.y,
+            w: elem.w,
+            h: elem.h,
+            angle: elem.angle
+        };
+        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));
+            }
+        }
+        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);
+    });
+    if (opts === null || opts === void 0 ? void 0 : opts.extend) {
+        area.x = Math.min(area.x, 0);
+        area.y = Math.min(area.y, 0);
+    }
+    const ctxSize = {
+        contextWidth: area.w,
+        contextHeight: area.h
+    };
+    if ((opts === null || opts === void 0 ? void 0 : opts.viewWidth) && (opts === null || opts === void 0 ? void 0 : opts.viewHeight) && (opts === null || opts === void 0 ? void 0 : opts.viewWidth) > 0 && (opts === null || opts === void 0 ? void 0 : opts.viewHeight) > 0) {
+        if (opts.viewWidth > area.x + area.w) {
+            ctxSize.contextWidth = opts.viewWidth - area.x;
+        }
+        if (opts.viewHeight > area.y + area.h) {
+            ctxSize.contextHeight = opts.viewHeight - area.y;
+        }
+    }
+    return ctxSize;
+}
+export function calcElementsViewInfo(elements, prevViewSize, options) {
+    const contextSize = calcElementsContextSize(elements, { viewWidth: prevViewSize.width, viewHeight: prevViewSize.height, extend: options === null || options === void 0 ? void 0 : options.extend });
+    if ((options === null || options === void 0 ? void 0 : options.extend) === true) {
+        contextSize.contextWidth = Math.max(contextSize.contextWidth, prevViewSize.contextWidth);
+        contextSize.contextHeight = Math.max(contextSize.contextHeight, prevViewSize.contextHeight);
+    }
+    return {
+        contextSize
+    };
+}
+export function getElemenetsAssetIds(elements) {
+    const assetIds = [];
+    const _scanElements = (elems) => {
+        elems.forEach((elem) => {
+            if (elem.type === 'image' && isAssetId(elem.detail.src)) {
+                assetIds.push(elem.detail.src);
+            }
+            else if (elem.type === 'svg' && isAssetId(elem.detail.svg)) {
+                assetIds.push(elem.detail.svg);
+            }
+            else if (elem.type === 'html' && elem.detail.html) {
+                assetIds.push(elem.detail.html);
+            }
+            else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+                _scanElements(elem.detail.children);
+            }
+        });
+    };
+    _scanElements(elements);
+    return assetIds;
+}
+export function findElementFromList(uuid, list) {
+    var _a;
+    let result = null;
+    for (let i = 0; i < list.length; i++) {
+        const elem = list[i];
+        if (elem.uuid === uuid) {
+            result = elem;
+            break;
+        }
+        else if (!result && elem.type === 'group') {
+            const resultInGroup = findElementFromList(uuid, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+            if ((resultInGroup === null || resultInGroup === void 0 ? void 0 : resultInGroup.uuid) === uuid) {
+                result = resultInGroup;
+                break;
+            }
+        }
+    }
+    return result;
+}
+export function findElementsFromList(uuids, list) {
+    const result = [];
+    function _find(elements) {
+        var _a;
+        for (let i = 0; i < elements.length; i++) {
+            const elem = elements[i];
+            if (uuids.includes(elem.uuid)) {
+                result.push(elem);
+            }
+            else if (elem.type === 'group') {
+                _find(((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+            }
+        }
+    }
+    _find(list);
+    return result;
+}
+export function getGroupQueueFromList(uuid, elements) {
+    const groupQueue = [];
+    function _scan(uuid, elements) {
+        var _a;
+        let result = null;
+        for (let i = 0; i < elements.length; i++) {
+            const elem = elements[i];
+            if (elem.uuid === uuid) {
+                result = elem;
+                break;
+            }
+            else if (!result && elem.type === 'group') {
+                groupQueue.push(elem);
+                const resultInGroup = _scan(uuid, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+                if ((resultInGroup === null || resultInGroup === void 0 ? void 0 : resultInGroup.uuid) === uuid) {
+                    result = resultInGroup;
+                    break;
+                }
+                groupQueue.pop();
+            }
+        }
+        return result;
+    }
+    _scan(uuid, elements);
+    return groupQueue;
+}
+function mergeElement(originElem, updateContent) {
+    const commonKeys = Object.keys(updateContent);
+    for (let i = 0; i < commonKeys.length; i++) {
+        const commonKey = commonKeys[i];
+        if (['x', 'y', 'w', 'h', 'angle', 'name'].includes(commonKey)) {
+            originElem[commonKey] = updateContent[commonKey];
+        }
+        else if (['detail', 'operations'].includes(commonKey)) {
+            if (istype.json(updateContent[commonKey]) && istype.json(originElem[commonKey])) {
+                originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+            }
+            else if (istype.array(updateContent[commonKey]) && istype.array(originElem[commonKey])) {
+                originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+            }
+        }
+    }
+    return originElem;
+}
+export function updateElementInList(uuid, updateContent, elements) {
+    var _a;
+    for (let i = 0; i < elements.length; i++) {
+        const elem = elements[i];
+        if (elem.uuid === uuid) {
+            mergeElement(elem, updateContent);
+            break;
+        }
+        else if (elem.type === 'group') {
+            updateElementInList(uuid, updateContent, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+        }
+    }
+    return elements;
+}

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

@@ -0,0 +1,9 @@
+import type { UtilEventEmitter } from '@idraw/types';
+export declare class EventEmitter<T extends Record<string, any>> implements UtilEventEmitter<T> {
+    private _listeners;
+    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;
+    has<K extends keyof T>(name: K | string): boolean;
+}