@idraw/util 0.4.0-beta.9 → 0.4.0

package/dist/esm/view/controller.js

@@ -0,0 +1,321 @@
+import { createUUID } from '../tool/uuid';
+import { getCenterFromTwoPoints } from './point';
+import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
+import { calcViewElementSize } from './view-calc';
+import { calcElementCenter } from './rotate';
+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, rotateControllerSize, rotateControllerPosition } = opts;
+    const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
+    const { x, y, w, h, angle = 0 } = elemSize;
+    const rotateCtrlSize = rotateControllerSize;
+    const rotateCtrlPos = rotateControllerPosition;
+    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 rotateElemVertexes = calcElementVertexesInGroup({
+        x: x,
+        y: y - (rotateCtrlPos + rotateCtrlSize / 2) / viewScaleInfo.scale,
+        h: h + (rotateCtrlPos * 2 + rotateCtrlSize) / viewScaleInfo.scale,
+        w: w,
+        angle
+    }, { groupQueue: [...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 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 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, {
+        size: ctrlSize,
+        angle: totalAngle
+    });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [
+        topLeftVertexes[1],
+        topRightVertexes[0],
+        topRightVertexes[3],
+        topLeftVertexes[2]
+    ];
+    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 rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
+    const tempRotateSizeRepairRatio = 1.1;
+    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, {
+        size: (rotateControllerSize * tempRotateSizeRepairRatio) / viewScaleInfo.scale,
+        angle: totalAngle
+    });
+    const rotateVertexes = calcElementVertexes(rotateSize);
+    const sizeController = {
+        originalElementCenter: calcElementCenter(elemSize),
+        originalElementSize: Object.assign({}, elemSize),
+        elementWrapper: vertexes,
+        left: {
+            type: 'left',
+            vertexes: leftVertexes,
+            center: leftCenter,
+            size: ctrlSize
+        },
+        right: {
+            type: 'right',
+            vertexes: rightVertexes,
+            center: rightCenter,
+            size: ctrlSize
+        },
+        top: {
+            type: 'top',
+            vertexes: topVertexes,
+            center: topCenter,
+            size: ctrlSize
+        },
+        bottom: {
+            type: 'bottom',
+            vertexes: bottomVertexes,
+            center: bottomCenter,
+            size: ctrlSize
+        },
+        topLeft: {
+            type: 'top-left',
+            vertexes: topLeftVertexes,
+            center: topLeftCenter,
+            size: ctrlSize
+        },
+        topRight: {
+            type: 'top-right',
+            vertexes: topRightVertexes,
+            center: topRightCenter,
+            size: ctrlSize
+        },
+        bottomLeft: {
+            type: 'bottom-left',
+            vertexes: bottomLeftVertexes,
+            center: bottomLeftCenter,
+            size: ctrlSize
+        },
+        bottomRight: {
+            type: 'bottom-right',
+            vertexes: bottomRightVertexes,
+            center: bottomRightCenter,
+            size: ctrlSize
+        },
+        leftMiddle: {
+            type: 'left-middle',
+            vertexes: leftMiddleVertexes,
+            center: leftCenter,
+            size: ctrlSize
+        },
+        rightMiddle: {
+            type: 'right-middle',
+            vertexes: rightMiddleVertexes,
+            center: rightCenter,
+            size: ctrlSize
+        },
+        topMiddle: {
+            type: 'top-middle',
+            vertexes: topMiddleVertexes,
+            center: topCenter,
+            size: ctrlSize
+        },
+        bottomMiddle: {
+            type: 'bottom-middle',
+            vertexes: bottomMiddleVertexes,
+            center: bottomCenter,
+            size: ctrlSize
+        },
+        rotate: {
+            type: 'rotate',
+            vertexes: rotateVertexes,
+            center: rotateCenter,
+            size: rotateControllerSize
+        }
+    };
+    return sizeController;
+}
+export function calcLayoutSizeController(layoutSize, opts) {
+    const { controllerSize, viewScaleInfo } = opts;
+    const ctrlSize = controllerSize && controllerSize > 0 ? controllerSize : 8;
+    const { x, y, w, h } = calcViewElementSize(layoutSize, { viewScaleInfo });
+    const center = calcElementCenter({ x, y, w, h });
+    const topCenter = { x: center.x, y };
+    const rightCenter = { x: x + w, y: center.y };
+    const bottomCenter = { x: center.x, y: y + h };
+    const leftCenter = { x, y: center.y };
+    const topLeftCenter = { x, y };
+    const topRightCenter = { x: x + w, y };
+    const bottomRightCenter = { x: x + w, y: y + h };
+    const bottomLeftCenter = { x, y: y + h };
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
+    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
+    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
+    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [
+        topLeftVertexes[1],
+        topRightVertexes[0],
+        topRightVertexes[3],
+        topLeftVertexes[2]
+    ];
+    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 = {
+        left: {
+            type: 'left',
+            vertexes: leftVertexes,
+            center: leftCenter,
+            size: ctrlSize
+        },
+        right: {
+            type: 'right',
+            vertexes: rightVertexes,
+            center: rightCenter,
+            size: ctrlSize
+        },
+        top: {
+            type: 'top',
+            vertexes: topVertexes,
+            center: topCenter,
+            size: ctrlSize
+        },
+        bottom: {
+            type: 'bottom',
+            vertexes: bottomVertexes,
+            center: bottomCenter,
+            size: ctrlSize
+        },
+        topLeft: {
+            type: 'top-left',
+            vertexes: topLeftVertexes,
+            center: topLeftCenter,
+            size: ctrlSize
+        },
+        topRight: {
+            type: 'top-right',
+            vertexes: topRightVertexes,
+            center: topRightCenter,
+            size: ctrlSize
+        },
+        bottomLeft: {
+            type: 'bottom-left',
+            vertexes: bottomLeftVertexes,
+            center: bottomLeftCenter,
+            size: ctrlSize
+        },
+        bottomRight: {
+            type: 'bottom-right',
+            vertexes: bottomRightVertexes,
+            center: bottomRightCenter,
+            size: ctrlSize
+        },
+        leftMiddle: {
+            type: 'left-middle',
+            vertexes: leftMiddleVertexes,
+            center: leftCenter,
+            size: ctrlSize
+        },
+        rightMiddle: {
+            type: 'right-middle',
+            vertexes: rightMiddleVertexes,
+            center: rightCenter,
+            size: ctrlSize
+        },
+        topMiddle: {
+            type: 'top-middle',
+            vertexes: topMiddleVertexes,
+            center: topCenter,
+            size: ctrlSize
+        },
+        bottomMiddle: {
+            type: 'bottom-middle',
+            vertexes: bottomMiddleVertexes,
+            center: bottomCenter,
+            size: ctrlSize
+        }
+    };
+    return sizeController;
+}

package/dist/esm/{lib → view}/data.d.ts

@@ -1,6 +1,7 @@
 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 deepCloneData(data: Data): Data;
 export declare function sortDataAsserts(data: Data, opts?: {
     clone?: boolean;
 }): Data;

package/dist/esm/{lib → view}/data.js

@@ -1,4 +1,15 @@
-import { createAssetId, createUUID, isAssetId } from './uuid';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createAssetId, createUUID, isAssetId } from '../tool/uuid';
 export function deepClone(target) {
     function _clone(t) {
         const type = is(t);
@@ -40,11 +51,17 @@ export function deepCloneElement(element) {
     _resetUUID(elem);
     return elem;
 }
+export function deepCloneData(data) {
+    const { elements } = data, restData = __rest(data, ["elements"]);
+    return Object.assign(Object.assign({}, deepClone(restData)), {
+        elements: elements.map((elem) => deepCloneElement(elem))
+    });
+}
 function is(target) {
-    return Object.prototype.toString
+    return (Object.prototype.toString
         .call(target)
         .replace(/[\]|\[]{1,1}/gi, '')
-        .split(' ')[1];
+        .split(' ')[1]);
 }
 export function sortDataAsserts(data, opts) {
     const assets = data.assets || {};
@@ -56,7 +73,7 @@ export function sortDataAsserts(data, opts) {
         elems.forEach((elem) => {
             if (elem.type === 'image' && elem.detail.src) {
                 const src = elem.detail.src;
-                const assetUUID = createAssetId(src);
+                const assetUUID = createAssetId(src, elem.uuid);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
                         type: 'image',
@@ -67,7 +84,7 @@ export function sortDataAsserts(data, opts) {
             }
             else if (elem.type === 'svg') {
                 const svg = elem.detail.svg;
-                const assetUUID = createAssetId(svg);
+                const assetUUID = createAssetId(svg, elem.uuid);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
                         type: 'svg',
@@ -78,7 +95,7 @@ export function sortDataAsserts(data, opts) {
             }
             else if (elem.type === 'html') {
                 const html = elem.detail.html;
-                const assetUUID = createAssetId(html);
+                const assetUUID = createAssetId(html, elem.uuid);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
                         type: 'html',
@@ -118,8 +135,8 @@ export function filterCompactData(data, opts) {
                         value: loadItemMap[src].source
                     };
                 }
-                else {
-                    const assetUUID = createAssetId(src);
+                else if (!assets[src]) {
+                    const assetUUID = createAssetId(src, elem.uuid);
                     if (!assets[assetUUID]) {
                         assets[assetUUID] = {
                             type: 'image',
@@ -131,37 +148,41 @@ export function filterCompactData(data, opts) {
             }
             else if (elem.type === 'svg') {
                 const svg = elem.detail.svg;
-                const assetUUID = createAssetId(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[assetUUID]) {
-                    assets[assetUUID] = {
-                        type: 'svg',
-                        value: svg
-                    };
+                else if (!assets[svg]) {
+                    const assetUUID = createAssetId(svg, elem.uuid);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'svg',
+                            value: svg
+                        };
+                    }
+                    elem.detail.svg = assetUUID;
                 }
-                elem.detail.svg = assetUUID;
             }
             else if (elem.type === 'html') {
                 const html = elem.detail.html;
-                const assetUUID = createAssetId(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[assetUUID]) {
-                    assets[assetUUID] = {
-                        type: 'html',
-                        value: html
-                    };
+                else if (!assets[html]) {
+                    const assetUUID = createAssetId(html, elem.uuid);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'html',
+                            value: html
+                        };
+                    }
+                    elem.detail.html = assetUUID;
                 }
-                elem.detail.html = assetUUID;
             }
             else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
                 const groupAssets = elem.detail.assets || {};

package/dist/esm/{lib → view}/element.d.ts

@@ -16,6 +16,7 @@ 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 getGroupQueueByElementPosition(elements: Element<ElementType>[], position: ElementPosition): Element<'group'>[] | null;
 export declare function getElementSize(elem: Element): ElementSize;
 export declare function mergeElementAsset<T extends Element<LoadElementType>>(element: T, assets: ElementAssets): T;
 export declare function filterElementAsset<T extends Element<LoadElementType>>(element: T): {
@@ -28,3 +29,7 @@ export declare function findElementsFromListByPositions(positions: ElementPositi
 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;
+export declare function getElementPositionMapFromList(uuids: string[], elements: Element<ElementType>[]): {
+    [uuid: string]: ElementPosition;
+};
+export declare function isSameElementSize(elem1: ElementSize, elem2: ElementSize): boolean;

package/dist/esm/{lib → view}/element.js

@@ -1,5 +1,5 @@
-import { rotateElementVertexes } from './rotate';
-import { isAssetId, createAssetId } from './uuid';
+import { limitAngle, rotateElementVertexes } from './rotate';
+import { isAssetId, createAssetId } from '../tool/uuid';
 function getGroupUUIDs(elements, index) {
     var _a;
     const uuids = [];
@@ -168,7 +168,11 @@ export function calcElementsContextSize(elements, opts) {
     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 });
+    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);
@@ -260,6 +264,25 @@ export function getGroupQueueFromList(uuid, elements) {
     _scan(uuid, elements);
     return groupQueue;
 }
+export function getGroupQueueByElementPosition(elements, position) {
+    var _a;
+    const groupQueue = [];
+    let currentElements = elements;
+    if (position.length > 1) {
+        for (let i = 0; i < position.length - 1; i++) {
+            const index = position[i];
+            const group = currentElements[index];
+            if ((group === null || group === void 0 ? void 0 : group.type) === 'group' && Array.isArray((_a = group === null || group === void 0 ? void 0 : group.detail) === null || _a === void 0 ? void 0 : _a.children)) {
+                groupQueue.push(group);
+                currentElements = group.detail.children;
+            }
+            else {
+                return null;
+            }
+        }
+    }
+    return groupQueue;
+}
 export function getElementSize(elem) {
     const { x, y, w, h, angle } = elem;
     const size = { x, y, w, h, angle };
@@ -308,7 +331,7 @@ export function filterElementAsset(element) {
         resource = element.detail.html;
     }
     if (typeof resource === 'string' && !isAssetId(resource)) {
-        assetId = createAssetId(resource);
+        assetId = createAssetId(resource, element.uuid);
         assetItem = {
             type: element.type,
             value: resource
@@ -348,7 +371,7 @@ export function findElementFromListByPosition(position, list) {
     for (let i = 0; i < position.length; i++) {
         const pos = position[i];
         const item = tempList[pos];
-        if (i < position.length - 1 && item.type === 'group') {
+        if (i < position.length - 1 && (item === null || item === void 0 ? void 0 : item.type) === 'group') {
             tempList = item.detail.children;
         }
         else if (i === position.length - 1) {
@@ -408,3 +431,41 @@ export function getElementPositionFromList(uuid, elements) {
     _loop(elements);
     return result;
 }
+export function getElementPositionMapFromList(uuids, elements) {
+    const currentPosition = [];
+    const positionMap = {};
+    let over = false;
+    const _loop = (list) => {
+        var _a;
+        for (let i = 0; i < list.length; i++) {
+            if (over === true) {
+                break;
+            }
+            currentPosition.push(i);
+            const elem = list[i];
+            if (uuids.includes(elem.uuid)) {
+                positionMap[elem.uuid] = [...currentPosition];
+                if (Object.keys(positionMap).length === uuids.length) {
+                    over = true;
+                    break;
+                }
+            }
+            else if (elem.type === 'group') {
+                _loop(((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+            }
+            if (over) {
+                break;
+            }
+            currentPosition.pop();
+        }
+    };
+    _loop(elements);
+    return positionMap;
+}
+export function isSameElementSize(elem1, elem2) {
+    return (elem1.x === elem2.x &&
+        elem1.y === elem2.y &&
+        elem1.h === elem2.h &&
+        elem1.w === elem2.w &&
+        limitAngle(elem1.angle || 0) === limitAngle(elem2.angle || 0));
+}

package/dist/esm/view/flat.d.ts

@@ -0,0 +1,2 @@
+import type { Elements } from '@idraw/types';
+export declare function flatElementList(list: Elements): Elements;