@idraw/util 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/esm/lib/element.js

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

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

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

package/dist/esm/lib/event.js

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

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

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

package/dist/esm/lib/file.js

@@ -1,17 +1,19 @@
 export function downloadImageFromCanvas(canvas, opts) {
-    const { filename, type = 'image/jpeg' } = opts;
+    const { fileName, type = 'image/jpeg' } = opts;
     const stream = canvas.toDataURL(type);
-    const downloadLink = document.createElement('a');
+    let downloadLink = document.createElement('a');
     downloadLink.href = stream;
-    downloadLink.download = filename;
-    const downloadClickEvent = document.createEvent('MouseEvents');
-    downloadClickEvent.initEvent('click', true, false);
-    downloadLink.dispatchEvent(downloadClickEvent);
+    downloadLink.download = fileName;
+    downloadLink.click();
+    downloadLink = null;
 }
 export function pickFile(opts) {
-    const { success, error } = opts;
+    const { accept, success, error } = opts;
     let input = document.createElement('input');
     input.type = 'file';
+    if (accept) {
+        input.accept = accept;
+    }
     input.addEventListener('change', function () {
         var _a;
         const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -64,3 +66,20 @@ export function parseFileToText(file) {
         reader.readAsText(file);
     });
 }
+export function parseTextToBlobURL(text) {
+    const bytes = new TextEncoder().encode(text);
+    const blob = new Blob([bytes], {
+        type: 'text/plain;charset=utf-8'
+    });
+    const blobURL = window.URL.createObjectURL(blob);
+    return blobURL;
+}
+export function downloadFileFromText(text, opts) {
+    const { fileName } = opts;
+    const blobURL = parseTextToBlobURL(text);
+    let downloadLink = document.createElement('a');
+    downloadLink.href = blobURL;
+    downloadLink.download = fileName;
+    downloadLink.click();
+    downloadLink = null;
+}

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,7 +148,7 @@ 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';
@@ -174,7 +170,7 @@ export function moveElementPosition(elements, opts) {
         }
         deleteElementInListByPosition(from, elements);
     }
-    return elements;
+    return { elements, from, to };
 }
 function mergeElement(originElem, updateContent) {
     var _a;
@@ -209,18 +205,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/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/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;
+}