@idraw/util 0.4.0-beta.4 → 0.4.0-beta.40

package/dist/esm/lib/flat.js

@@ -0,0 +1,132 @@
+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 { calcElementVertexesInGroup } from './vertex';
+import { limitAngle, parseAngleToRadian, calcElementCenterFromVertexes, rotatePoint } from './rotate';
+function flatElementSize(elemSize, opts) {
+    const { groupQueue } = opts;
+    let { x, y, w, h, angle = 0 } = elemSize;
+    let totalAngle = 0;
+    groupQueue.forEach((group) => {
+        x += group.x;
+        y += group.y;
+        totalAngle += group.angle || 0;
+    });
+    totalAngle = limitAngle(totalAngle);
+    if (totalAngle === 0) {
+        return {
+            x,
+            y,
+            w,
+            h,
+            angle
+        };
+    }
+    totalAngle += elemSize.angle || 0;
+    totalAngle = limitAngle(totalAngle);
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const center = calcElementCenterFromVertexes(vertexes);
+    const start = rotatePoint(center, vertexes[0], parseAngleToRadian(0 - totalAngle));
+    x = start.x;
+    y = start.y;
+    return {
+        x,
+        y,
+        w,
+        h,
+        angle: totalAngle
+    };
+}
+function isValidElement(elem) {
+    var _a;
+    if (['rect', 'circle'].includes(elem.type)) {
+        const detail = elem.detail;
+        if (!detail.background && !detail.borderWidth) {
+            return false;
+        }
+        if (detail.background === 'transparent' && !detail.borderWidth) {
+            return false;
+        }
+    }
+    if (['group'].includes(elem.type)) {
+        const detail = elem.detail || {};
+        const { children } = detail;
+        if (!(children.length > 0) && !detail.background && !detail.borderWidth) {
+            return false;
+        }
+        if (!(children.length > 0) && detail.background === 'transparent' && !detail.borderWidth) {
+            return false;
+        }
+    }
+    if (elem.type === 'text') {
+        if (!elem.detail.text) {
+            return false;
+        }
+    }
+    if (elem.type === 'image') {
+        if (!elem.detail.src) {
+            return false;
+        }
+    }
+    if (elem.type === 'html') {
+        if (!elem.detail.html) {
+            return false;
+        }
+    }
+    if (elem.type === 'svg') {
+        if (!elem.detail.svg) {
+            return false;
+        }
+    }
+    if (elem.type === 'path') {
+        const detail = elem.detail;
+        if (!(((_a = detail === null || detail === void 0 ? void 0 : detail.commands) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function flatElementList(list) {
+    const elemeList = [];
+    const currentGroupQueue = [];
+    const _resetElemSize = (elem) => {
+        if (!isValidElement(elem)) {
+            return;
+        }
+        const newSize = flatElementSize(elem, { groupQueue: currentGroupQueue });
+        const resizeElem = Object.assign(Object.assign({}, elem), newSize);
+        elemeList.push(resizeElem);
+    };
+    const _walk = (elem) => {
+        var _a;
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+            return;
+        }
+        if (elem.type === 'group') {
+            const { detail } = elem;
+            const { children } = detail, restDetail = __rest(detail, ["children"]);
+            _resetElemSize(Object.assign(Object.assign({}, elem), { detail: Object.assign(Object.assign({}, restDetail), { children: [] }) }));
+            currentGroupQueue.push(elem);
+            children.forEach((child) => {
+                _walk(child);
+            });
+            currentGroupQueue.pop();
+        }
+        else {
+            _resetElemSize(elem);
+        }
+    };
+    for (let i = 0; i < list.length; i++) {
+        const elem = list[i];
+        _walk(elem);
+    }
+    return elemeList;
+}

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

@@ -0,0 +1,3 @@
+import type { Elements, ElementPosition } from '@idraw/types';
+export declare function groupElementsByPosition(list: Elements, positions: ElementPosition[]): Elements;
+export declare function ungroupElementsByPosition(list: Elements, position: ElementPosition): Elements;

package/dist/esm/lib/group.js

@@ -0,0 +1,81 @@
+import { findElementFromListByPosition, calcElementListSize } from './element';
+import { deleteElementInListByPosition, insertElementToListByPosition } from './handle-element';
+import { createUUID } from './uuid';
+export function groupElementsByPosition(list, positions) {
+    if (positions.length > 1) {
+        let isValidPositions = true;
+        let lastIndexs = [];
+        for (let i = 1; i < positions.length; i++) {
+            const prevPosition = positions[i - 1];
+            const position = positions[i];
+            if (!(prevPosition.length > 0 && position.length > 0)) {
+                isValidPositions = false;
+                break;
+            }
+            if (prevPosition.length !== position.length) {
+                isValidPositions = false;
+                break;
+            }
+            const temp1 = [...prevPosition];
+            const temp2 = [...position];
+            const lastIndex1 = temp1.pop();
+            const lastIndex2 = temp2.pop();
+            if (i === 1 && typeof lastIndex1 === 'number' && lastIndex1 >= 0) {
+                lastIndexs.push(lastIndex1);
+            }
+            if (typeof lastIndex2 === 'number' && lastIndex2 >= 0) {
+                lastIndexs.push(lastIndex2);
+            }
+        }
+        if (isValidPositions !== true) {
+            console.error('[idraw]: The grouped elements are not siblings!');
+            return list;
+        }
+        lastIndexs.sort((a, b) => a - b);
+        const groupParentPosition = [...positions[0]].splice(0, positions[0].length - 1);
+        const groupChildren = [];
+        const groupPosition = [...groupParentPosition, lastIndexs[0]];
+        for (let i = 0; i < lastIndexs.length; i++) {
+            const position = [...groupParentPosition, lastIndexs[i]];
+            const elem = findElementFromListByPosition(position, list);
+            if (elem) {
+                groupChildren.push(elem);
+            }
+        }
+        const groupSize = calcElementListSize(groupChildren);
+        for (let i = 0; i < groupChildren.length; i++) {
+            const elem = groupChildren[i];
+            if (elem) {
+                elem.x -= groupSize.x;
+                elem.y -= groupSize.y;
+            }
+        }
+        for (let i = lastIndexs.length - 1; i >= 0; i--) {
+            const position = [...groupParentPosition, lastIndexs[i]];
+            deleteElementInListByPosition(position, list);
+        }
+        const group = Object.assign(Object.assign({ name: 'Group', uuid: createUUID(), type: 'group' }, groupSize), { detail: {
+                children: groupChildren
+            } });
+        insertElementToListByPosition(group, groupPosition, list);
+    }
+    return list;
+}
+export function ungroupElementsByPosition(list, position) {
+    var _a;
+    const elem = findElementFromListByPosition(position, list);
+    if (!(elem && (elem === null || elem === void 0 ? void 0 : elem.type) === 'group' && Array.isArray((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children))) {
+        console.error('[idraw]: The ungrouped element is not a group element!');
+    }
+    const groupParentPosition = [...position].splice(0, position.length - 1);
+    const groupLastIndex = position[position.length - 1];
+    const { x, y } = elem;
+    deleteElementInListByPosition(position, list);
+    elem.detail.children.forEach((child, i) => {
+        child.x += x;
+        child.y += y;
+        const elemPosition = [...groupParentPosition, groupLastIndex + i];
+        insertElementToListByPosition(child, elemPosition, list);
+    });
+    return list;
+}

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

@@ -10,5 +10,10 @@ export declare function deleteElementInList(uuid: string, list: Element[]): bool
 export declare function moveElementPosition(elements: Elements, opts: {
     from: ElementPosition;
     to: ElementPosition;
-}): Elements;
+}): {
+    elements: Elements;
+    from: ElementPosition;
+    to: ElementPosition;
+};
 export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element[]): Element | null;
+export declare function updateElementInListByPosition(position: ElementPosition, updateContent: RecursivePartial<Element<ElementType>>, elements: Element[]): Element | null;

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

@@ -1,10 +1,10 @@
 import { createUUID } from './uuid';
-import { getDefaultElementDetailConfig, getDefaultElementRectDetail, getDefaultElementCircleDetail, getDefaultElementTextDetail, getDefaultElementSVGDetail, getDefaultElementImageDetail, getDefaultElementGroupDetail } from './config';
+import { defaultText, getDefaultElementRectDetail, getDefaultElementCircleDetail, getDefaultElementTextDetail, getDefaultElementSVGDetail, getDefaultElementImageDetail, getDefaultElementGroupDetail } from './config';
 import { istype } from './istype';
 import { findElementFromListByPosition, getElementPositionFromList } from './element';
+import { deepResizeGroupElement } from './resize-element';
 const defaultViewWidth = 200;
 const defaultViewHeight = 200;
-const defaultDetail = getDefaultElementDetailConfig();
 function createElementSize(type, opts) {
     let x = 0;
     let y = 0;
@@ -14,29 +14,26 @@ function createElementSize(type, 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;
+        const limitViewWidth = width / 4;
+        const limitViewHeight = height / 4;
+        if (defaultViewWidth >= limitViewWidth) {
+            w = limitViewWidth / scale;
         }
         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);
-            }
+            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);
+        }
+        else if (type === 'text') {
+            const fontSize = w / defaultText.length;
+            h = fontSize * 2;
         }
         x = (0 - offsetLeft + width / 2 - (w * scale) / 2) / scale;
         y = (0 - offsetTop + height / 2 - (h * scale) / 2) / scale;
@@ -50,18 +47,16 @@ function createElementSize(type, opts) {
     return elemSize;
 }
 export function createElement(type, baseElem, opts) {
-    const elemSize = createElementSize(type, opts);
+    const elementSize = createElementSize(type, opts);
     let detail = {};
     if (type === 'rect') {
         detail = getDefaultElementRectDetail();
     }
     else if (type === 'circle') {
-        detail = getDefaultElementCircleDetail({
-            radius: elemSize.w
-        });
+        detail = getDefaultElementCircleDetail();
     }
     else if (type === 'text') {
-        detail = getDefaultElementTextDetail(opts);
+        detail = getDefaultElementTextDetail(elementSize);
     }
     else if (type === 'svg') {
         detail = getDefaultElementSVGDetail();
@@ -72,7 +67,7 @@ export function createElement(type, baseElem, opts) {
     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 || {})) });
+    const elem = Object.assign(Object.assign(Object.assign({}, elementSize), baseElem), { uuid: createUUID(), type, detail: Object.assign(Object.assign({}, detail), (baseElem.detail || {})) });
     return elem;
 }
 export function insertElementToListByPosition(element, position, list) {
@@ -134,15 +129,16 @@ export function deleteElementInList(uuid, list) {
     return deleteElementInListByPosition(position, list);
 }
 export function moveElementPosition(elements, opts) {
-    const { from, to } = opts;
+    const from = [...opts.from];
+    const to = [...opts.to];
     if (from.length === 0 || to.length === 0) {
-        return elements;
+        return { elements, from, to };
     }
     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;
+                    return { elements, from, to };
                 }
                 continue;
             }
@@ -152,19 +148,64 @@ export function moveElementPosition(elements, opts) {
     if (target) {
         const insterResult = insertElementToListByPosition(target, to, elements);
         if (!insterResult) {
-            return elements;
+            return { elements, from, to };
         }
         let trimDeletePosIndex = -1;
         const trimDeletePosAction = 'down';
-        for (let i = 0; i < from.length; i++) {
-            if (!(to[i] >= 0)) {
-                break;
+        let isEffectToIndex = false;
+        if (from.length >= 1 && to.length >= 1) {
+            if (from.length <= to.length) {
+                if (from.length === 1) {
+                    if (from[0] < to[0]) {
+                        isEffectToIndex = true;
+                    }
+                }
+                else {
+                    for (let i = 0; i < from.length; i++) {
+                        if (from[i] === to[i]) {
+                            if (from.length === from.length - 1) {
+                                isEffectToIndex = true;
+                                break;
+                            }
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
             }
-            if (to[i] === from[i]) {
-                continue;
+            if (from.length >= to.length) {
+                if (to.length === 1) {
+                    if (to[0] < from[0]) {
+                        isEffectToIndex = true;
+                    }
+                }
+                else {
+                    for (let i = 0; i < to.length; i++) {
+                        if (i === to.length - 1 && to[i] < from[i]) {
+                            isEffectToIndex = true;
+                        }
+                        if (from[i] === to[i]) {
+                            continue;
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
             }
-            if (to[i] < from[i] && i == to.length - 1) {
-                trimDeletePosIndex = i;
+        }
+        if (isEffectToIndex === true) {
+            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) {
@@ -174,7 +215,7 @@ export function moveElementPosition(elements, opts) {
         }
         deleteElementInListByPosition(from, elements);
     }
-    return elements;
+    return { elements, from, to };
 }
 function mergeElement(originElem, updateContent) {
     var _a;
@@ -209,18 +250,42 @@ function mergeElement(originElem, updateContent) {
     return originElem;
 }
 export function updateElementInList(uuid, updateContent, elements) {
-    var _a;
+    var _a, _b;
     let targetElement = null;
     for (let i = 0; i < elements.length; i++) {
         const elem = elements[i];
         if (elem.uuid === uuid) {
+            if (elem.type === 'group' && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.deepResize) === true) {
+                if ((updateContent.w && updateContent.w > 0) || (updateContent.h && updateContent.h > 0)) {
+                    deepResizeGroupElement(elem, {
+                        w: updateContent.w,
+                        h: updateContent.h
+                    });
+                }
+            }
             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) || []);
+            targetElement = updateElementInList(uuid, updateContent, ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.children) || []);
         }
     }
     return targetElement;
 }
+export function updateElementInListByPosition(position, updateContent, elements) {
+    var _a;
+    const elem = findElementFromListByPosition(position, elements);
+    if (elem) {
+        if (elem.type === 'group' && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.deepResize) === true) {
+            if ((updateContent.w && updateContent.w > 0) || (updateContent.h && updateContent.h > 0)) {
+                deepResizeGroupElement(elem, {
+                    w: updateContent.w,
+                    h: updateContent.h
+                });
+            }
+        }
+        mergeElement(elem, updateContent);
+    }
+    return elem;
+}

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

@@ -1,3 +1,3 @@
 import { HTMLNode } from '@idraw/types';
 export declare function parseHTML(html: string): HTMLNode[];
-export declare function generateHTML(htmlNodes: HTMLNode[]): HTMLNode;
+export declare function generateHTML(htmlNodes: HTMLNode[]): string;

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

@@ -1,3 +1,4 @@
+declare function positiveNum(value: any): boolean;
 declare function number(value: any): boolean;
 declare function x(value: any): boolean;
 declare function y(value: any): boolean;
@@ -12,7 +13,7 @@ declare function imageBase64(value: any): boolean;
 declare function imageSrc(value: any): boolean;
 declare function svg(value: any): boolean;
 declare function html(value: any): boolean;
-declare function text(value: any): boolean;
+declare function text(value: any): value is string;
 declare function fontSize(value: any): boolean;
 declare function lineHeight(value: any): boolean;
 declare function strokeWidth(value: any): boolean;
@@ -21,6 +22,7 @@ declare function fontFamily(value: any): boolean;
 declare function fontWeight(value: any): boolean;
 declare function numberStr(value: any): boolean;
 export declare const is: {
+    positiveNum: typeof positiveNum;
     x: typeof x;
     y: typeof y;
     w: typeof w;

package/dist/esm/lib/is.js

@@ -1,4 +1,7 @@
 import { isColorStr } from './color';
+function positiveNum(value) {
+    return typeof value === 'number' && value >= 0;
+}
 function number(value) {
     return typeof value === 'number' && (value > 0 || value <= 0);
 }
@@ -9,19 +12,29 @@ function y(value) {
     return number(value);
 }
 function w(value) {
-    return typeof value === 'number' && value >= 0;
+    return positiveNum(value);
 }
 function h(value) {
-    return typeof value === 'number' && value >= 0;
+    return positiveNum(value);
 }
 function angle(value) {
     return typeof value === 'number' && value >= -360 && value <= 360;
 }
 function borderWidth(value) {
-    return w(value);
+    return (positiveNum(value) ||
+        (Array.isArray(value) &&
+            positiveNum(value[0]) &&
+            positiveNum(value[1]) &&
+            positiveNum(value[2]) &&
+            positiveNum(value[3])));
 }
 function borderRadius(value) {
-    return number(value) && value >= 0;
+    return (positiveNum(value) ||
+        (Array.isArray(value) &&
+            positiveNum(value[0]) &&
+            positiveNum(value[1]) &&
+            positiveNum(value[2]) &&
+            positiveNum(value[3])));
 }
 function color(value) {
     return isColorStr(value);
@@ -36,7 +49,9 @@ function imageSrc(value) {
     return imageBase64(value) || imageURL(value);
 }
 function svg(value) {
-    return typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
+    return (typeof value === 'string' &&
+        /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) &&
+        /<\/[\s]{0,}svg>$/i.test(`${value}`.trim()));
 }
 function html(value) {
     let result = false;
@@ -75,6 +90,7 @@ function numberStr(value) {
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
 }
 export const is = {
+    positiveNum,
     x,
     y,
     w,

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

@@ -4,6 +4,7 @@ export declare const istype: {
     json(data: any): boolean;
     function(data: any): boolean;
     asyncFunction(data: any): boolean;
+    boolean(data: any): boolean;
     string(data: any): boolean;
     number(data: any): boolean;
     undefined(data: any): boolean;

package/dist/esm/lib/istype.js

@@ -20,6 +20,9 @@ export const istype = {
     asyncFunction(data) {
         return parsePrototype(data) === 'AsyncFunction';
     },
+    boolean(data) {
+        return parsePrototype(data) === 'Boolean';
+    },
     string(data) {
         return parsePrototype(data) === 'String';
     },

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

@@ -0,0 +1 @@
+export declare function merge<T extends Record<string, any> = any, U extends Record<string, any> = any>(target: T, source: U): T & U;

package/dist/esm/lib/merge.js

@@ -0,0 +1,17 @@
+export function merge(target, source) {
+    const result = target;
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            if (typeof source[key] === 'object' &&
+                source[key] !== null &&
+                typeof result[key] === 'object' &&
+                result[key] !== null) {
+                result[key] = merge(result[key], source[key]);
+            }
+            else {
+                result[key] = source[key];
+            }
+        }
+    }
+    return target;
+}

package/dist/esm/lib/modify-recorder.d.ts

@@ -0,0 +1,15 @@
+import type { Data, ModifyType, ModifyOptions, ModifyRecord } from '@idraw/types';
+export interface ModifyRecorderOptions {
+    recordable: boolean;
+}
+export declare class ModifyRecorder {
+    #private;
+    constructor(opts: ModifyRecorderOptions);
+    $getDoStack(): ModifyRecord[];
+    $getUndoStack(): ModifyRecord[];
+    clear(): void;
+    destroy(): void;
+    do<T extends ModifyType>(data: Data, opts: ModifyOptions<T>): Data;
+    undo(data: Data): Data | null;
+    redo(data: Data): Data | null;
+}