@idraw/util 0.4.0-alpha.5 → 0.4.0-alpha.7

package/dist/esm/lib/element.js

@@ -1,6 +1,5 @@
 import { rotateElementVertexes } from './rotate';
 import { isAssetId, createAssetId } from './uuid';
-import { istype } from './istype';
 function getGroupUUIDs(elements, index) {
     var _a;
     const uuids = [];
@@ -208,54 +207,6 @@ export function getGroupQueueFromList(uuid, elements) {
     _scan(uuid, elements);
     return groupQueue;
 }
-function mergeElement(originElem, updateContent) {
-    var _a;
-    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])) {
-                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
-                    originElem[commonKey] = {};
-                }
-                if (istype.json(originElem[commonKey])) {
-                    originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
-                }
-            }
-            else if (istype.array(updateContent[commonKey])) {
-                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
-                    originElem[commonKey] = [];
-                }
-                if (istype.array(originElem[commonKey])) {
-                    (_a = updateContent === null || updateContent === void 0 ? void 0 : updateContent[commonKey]) === null || _a === void 0 ? void 0 : _a.forEach((item, i) => {
-                        originElem[commonKey][i] = item;
-                    });
-                    originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
-                }
-            }
-        }
-    }
-    return originElem;
-}
-export function updateElementInList(uuid, updateContent, elements) {
-    var _a;
-    let targetElement = null;
-    for (let i = 0; i < elements.length; i++) {
-        const elem = elements[i];
-        if (elem.uuid === uuid) {
-            mergeElement(elem, updateContent);
-            targetElement = elem;
-            break;
-        }
-        else if (elem.type === 'group') {
-            targetElement = updateElementInList(uuid, updateContent, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
-        }
-    }
-    return targetElement;
-}
 export function getElementSize(elem) {
     const { x, y, w, h, angle } = elem;
     const size = { x, y, w, h, angle };
@@ -328,3 +279,58 @@ export function filterElementAsset(element) {
 export function isResourceElement(elem) {
     return ['image', 'svg', 'html'].includes(elem === null || elem === void 0 ? void 0 : elem.type);
 }
+export function findElementsFromListByPositions(positions, list) {
+    const elements = [];
+    positions.forEach((pos) => {
+        const elem = findElementFromListByPosition(pos, list);
+        if (elem) {
+            elements.push(elem);
+        }
+    });
+    return elements;
+}
+export function findElementFromListByPosition(position, list) {
+    let result = null;
+    let tempList = 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') {
+            tempList = item.detail.children;
+        }
+        else if (i === position.length - 1) {
+            result = item;
+        }
+        else {
+            break;
+        }
+    }
+    return result;
+}
+export function getElementPositionFromList(uuid, elements) {
+    let result = [];
+    let over = false;
+    const _loop = (list) => {
+        var _a;
+        for (let i = 0; i < list.length; i++) {
+            if (over === true) {
+                break;
+            }
+            result.push(i);
+            const elem = list[i];
+            if (elem.uuid === uuid) {
+                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;
+            }
+            result.pop();
+        }
+    };
+    _loop(elements);
+    return result;
+}

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

@@ -0,0 +1,14 @@
+import type { RecursivePartial, Element, Elements, ElementPosition, ElementType, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function createElement<T extends ElementType>(type: T, baseElem: RecursivePartial<Element<T>>, opts?: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    limitRatio?: boolean;
+}): Element<T>;
+export declare function insertElementToListByPosition(element: Element, position: ElementPosition, list: Element[]): boolean;
+export declare function deleteElementInListByPosition(position: ElementPosition, list: Element[]): boolean;
+export declare function deleteElementInList(uuid: string, list: Element[]): boolean;
+export declare function moveElementPosition(elements: Elements, opts: {
+    from: ElementPosition;
+    to: ElementPosition;
+}): Elements;
+export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element[]): Element | null;

package/dist/esm/lib/handle-element.js

@@ -0,0 +1,226 @@
+import { createUUID } from './uuid';
+import { getDefaultElementDetailConfig, getDefaultElementRectDetail, getDefaultElementCircleDetail, getDefaultElementTextDetail, getDefaultElementSVGDetail, getDefaultElementImageDetail, getDefaultElementGroupDetail } from './config';
+import { istype } from './istype';
+import { findElementFromListByPosition, getElementPositionFromList } from './element';
+const defaultViewWidth = 200;
+const defaultViewHeight = 200;
+const defaultDetail = getDefaultElementDetailConfig();
+function createElementSize(type, opts) {
+    let x = 0;
+    let y = 0;
+    let w = defaultViewWidth;
+    let h = defaultViewHeight;
+    if (opts) {
+        const { viewScaleInfo, viewSizeInfo } = opts;
+        const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+        const { width, height } = viewSizeInfo;
+        if (type === 'text') {
+            const textDetail = getDefaultElementTextDetail();
+            w = defaultDetail.fontSize * scale * textDetail.text.length;
+            h = defaultDetail.fontSize * scale * 2;
+        }
+        else {
+            const limitViewWidth = width / 4;
+            const limitViewHeight = height / 4;
+            if (defaultViewWidth >= limitViewWidth) {
+                w = limitViewWidth / scale;
+            }
+            else {
+                w = defaultViewWidth / scale;
+            }
+            if (defaultViewHeight >= limitViewHeight) {
+                h = limitViewHeight / scale;
+            }
+            else {
+                h = defaultViewHeight / scale;
+            }
+            if (['circle', 'svg', 'image'].includes(type)) {
+                w = h = Math.max(w, h);
+            }
+        }
+        x = (0 - offsetLeft + width / 2 - (w * scale) / 2) / scale;
+        y = (0 - offsetTop + height / 2 - (h * scale) / 2) / scale;
+    }
+    const elemSize = {
+        x,
+        y,
+        w,
+        h
+    };
+    return elemSize;
+}
+export function createElement(type, baseElem, opts) {
+    const elemSize = createElementSize(type, opts);
+    let detail = {};
+    if (type === 'rect') {
+        detail = getDefaultElementRectDetail();
+    }
+    else if (type === 'circle') {
+        detail = getDefaultElementCircleDetail({
+            radius: elemSize.w
+        });
+    }
+    else if (type === 'text') {
+        detail = getDefaultElementTextDetail(opts);
+    }
+    else if (type === 'svg') {
+        detail = getDefaultElementSVGDetail();
+    }
+    else if (type === 'image') {
+        detail = getDefaultElementImageDetail();
+    }
+    else if (type === 'group') {
+        detail = getDefaultElementGroupDetail();
+    }
+    const elem = Object.assign(Object.assign(Object.assign({}, elemSize), baseElem), { uuid: createUUID(), type, detail: Object.assign(Object.assign({}, detail), (baseElem.detail || {})) });
+    return elem;
+}
+export function insertElementToListByPosition(element, position, list) {
+    let result = false;
+    if (position.length === 1) {
+        const pos = position[0];
+        list.splice(pos, 0, element);
+        result = true;
+    }
+    else if (position.length > 1) {
+        let tempList = list;
+        for (let i = 0; i < position.length; i++) {
+            const pos = position[i];
+            const item = tempList[pos];
+            if (i === position.length - 1) {
+                const pos = position[i];
+                tempList.splice(pos, 0, element);
+                result = true;
+            }
+            else if (i < position.length - 1 && item.type === 'group') {
+                tempList = item.detail.children;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return result;
+}
+export function deleteElementInListByPosition(position, list) {
+    let result = false;
+    if (position.length === 1) {
+        const pos = position[0];
+        list.splice(pos, 1);
+        result = true;
+    }
+    else if (position.length > 1) {
+        let tempList = list;
+        for (let i = 0; i < position.length; i++) {
+            const pos = position[i];
+            const item = tempList[pos];
+            if (i === position.length - 1) {
+                const pos = position[i];
+                tempList.splice(pos, 1);
+                result = true;
+            }
+            else if (i < position.length - 1 && item.type === 'group') {
+                tempList = item.detail.children;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return result;
+}
+export function deleteElementInList(uuid, list) {
+    const position = getElementPositionFromList(uuid, list);
+    return deleteElementInListByPosition(position, list);
+}
+export function moveElementPosition(elements, opts) {
+    const { from, to } = opts;
+    if (from.length === 0 || to.length === 0) {
+        return elements;
+    }
+    if (from.length <= to.length) {
+        for (let i = 0; i < from.length; i++) {
+            if (to[i] === from[i]) {
+                if (i === from.length - 1) {
+                    return elements;
+                }
+                continue;
+            }
+        }
+    }
+    const target = findElementFromListByPosition(from, elements);
+    if (target) {
+        const insterResult = insertElementToListByPosition(target, to, elements);
+        if (!insterResult) {
+            return elements;
+        }
+        let trimDeletePosIndex = -1;
+        const trimDeletePosAction = 'down';
+        for (let i = 0; i < from.length; i++) {
+            if (!(to[i] >= 0)) {
+                break;
+            }
+            if (to[i] === from[i]) {
+                continue;
+            }
+            if (to[i] < from[i] && i == to.length - 1) {
+                trimDeletePosIndex = i;
+            }
+        }
+        if (trimDeletePosIndex >= 0) {
+            if (trimDeletePosAction === 'down') {
+                from[trimDeletePosIndex] = from[trimDeletePosIndex] + 1;
+            }
+        }
+        deleteElementInListByPosition(from, elements);
+    }
+    return elements;
+}
+function mergeElement(originElem, updateContent) {
+    var _a;
+    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])) {
+                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
+                    originElem[commonKey] = {};
+                }
+                if (istype.json(originElem[commonKey])) {
+                    originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+                }
+            }
+            else if (istype.array(updateContent[commonKey])) {
+                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
+                    originElem[commonKey] = [];
+                }
+                if (istype.array(originElem[commonKey])) {
+                    (_a = updateContent === null || updateContent === void 0 ? void 0 : updateContent[commonKey]) === null || _a === void 0 ? void 0 : _a.forEach((item, i) => {
+                        originElem[commonKey][i] = item;
+                    });
+                    originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
+                }
+            }
+        }
+    }
+    return originElem;
+}
+export function updateElementInList(uuid, updateContent, elements) {
+    var _a;
+    let targetElement = null;
+    for (let i = 0; i < elements.length; i++) {
+        const elem = elements[i];
+        if (elem.uuid === uuid) {
+            mergeElement(elem, updateContent);
+            targetElement = elem;
+            break;
+        }
+        else if (elem.type === 'group') {
+            targetElement = updateElementInList(uuid, updateContent, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+        }
+    }
+    return targetElement;
+}

package/dist/esm/lib/view-box.js

@@ -18,7 +18,7 @@ export function calcViewBoxSize(viewElem, opts) {
     }
     let bw = 0;
     if (typeof borderWidth === 'number') {
-        bw = (borderWidth || 1) * scale;
+        bw = (borderWidth || 0) * scale;
     }
     if (boxSizing === 'border-box') {
         x = viewElem.x + bw / 2;
@@ -38,6 +38,11 @@ export function calcViewBoxSize(viewElem, opts) {
         w = viewElem.w;
         h = viewElem.h;
     }
+    w = Math.max(w, 1);
+    h = Math.max(h, 1);
+    radiusList = radiusList.map((r) => {
+        return Math.min(r, w / 2, h / 2);
+    });
     return {
         x,
         y,

package/dist/esm/lib/view-calc.d.ts

@@ -1,4 +1,11 @@
 import { Point, PointSize, Data, ViewScaleInfo, ViewSizeInfo, Element, ElementType, ElementSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+export declare function calcViewScaleInfo(info: {
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+}, opts: {
+    viewSizeInfo: ViewSizeInfo;
+}): ViewScaleInfo;
 export declare function viewScale(opts: {
     scale: number;
     point: PointSize;

package/dist/esm/lib/view-calc.js

@@ -1,5 +1,24 @@
 import { rotateElementVertexes } from './rotate';
 import { checkRectIntersect } from './rect';
+export function calcViewScaleInfo(info, opts) {
+    const { scale, offsetX, offsetY } = info;
+    const { viewSizeInfo } = opts;
+    const { width, height, contextWidth, contextHeight } = viewSizeInfo;
+    const w = contextWidth * scale;
+    const h = contextHeight * scale;
+    const offsetLeft = 0 - offsetX * scale;
+    const offsetTop = 0 - offsetY * scale;
+    const offsetRight = width - (w + offsetLeft / scale);
+    const offsetBottom = height - (h + offsetTop / scale);
+    const newScaleInfo = {
+        scale,
+        offsetLeft,
+        offsetTop,
+        offsetRight,
+        offsetBottom
+    };
+    return newScaleInfo;
+}
 export function viewScale(opts) {
     const { scale, point, viewScaleInfo: prevViewScaleInfo } = opts;
     const { offsetLeft, offsetTop } = prevViewScaleInfo;