@idraw/util 0.4.0-beta.1 → 0.4.0-beta.10

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.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) {
@@ -209,17 +204,25 @@ 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;

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

@@ -0,0 +1,2 @@
+import type { Element, ElementSize } from '@idraw/types';
+export declare function deepResizeGroupElement(elem: Element<'group'>, size: Pick<Partial<ElementSize>, 'w' | 'h'>): Element<'group'>;

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

@@ -0,0 +1,101 @@
+import { formatNumber } from './number';
+const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+};
+function resizeElementBaseDetail(elem, opts) {
+    const { detail } = elem;
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { borderWidth, borderRadius, borderDash, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (typeof borderWidth === 'number') {
+        detail.borderWidth = doNum(borderWidth * middleRatio);
+    }
+    else if (Array.isArray(detail.borderWidth)) {
+        const bw = borderWidth;
+        detail.borderWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+    }
+    if (typeof borderRadius === 'number') {
+        detail.borderRadius = doNum(borderRadius * middleRatio);
+    }
+    else if (Array.isArray(detail.borderRadius)) {
+        const br = borderRadius;
+        detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+    }
+    if (Array.isArray(borderDash)) {
+        borderDash.forEach((dash, i) => {
+            detail.borderDash[i] = doNum(dash * maxRatio);
+        });
+    }
+    if (typeof shadowOffsetX === 'number') {
+        detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+    }
+    if (typeof shadowOffsetY === 'number') {
+        detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+    }
+    if (typeof shadowBlur === 'number') {
+        detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+    }
+}
+function resizeElementBase(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { x, y, w, h } = elem;
+    elem.x = doNum(x * xRatio);
+    elem.y = doNum(y * yRatio);
+    elem.w = doNum(w * xRatio);
+    elem.h = doNum(h * yRatio);
+    resizeElementBaseDetail(elem, opts);
+}
+function resizeTextElementDetail(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize, lineHeight } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    if (fontSize && fontSize > 0) {
+        elem.detail.fontSize = doNum(fontSize * ratio);
+    }
+    if (lineHeight && lineHeight > 0) {
+        elem.detail.lineHeight = doNum(lineHeight * ratio);
+    }
+}
+function resizeElement(elem, opts) {
+    const { type } = elem;
+    resizeElementBase(elem, opts);
+    if (type === 'circle') {
+    }
+    else if (type === 'text') {
+        resizeTextElementDetail(elem, opts);
+    }
+    else if (type === 'image') {
+    }
+    else if (type === 'svg') {
+    }
+    else if (type === 'html') {
+    }
+    else if (type === 'path') {
+    }
+    else if (type === 'group' && Array.isArray(elem.detail.children)) {
+        elem.detail.children.forEach((child) => {
+            resizeElement(child, opts);
+        });
+    }
+}
+export function deepResizeGroupElement(elem, size) {
+    const resizeW = size.w && size.w > 0 ? size.w : elem.w;
+    const resizeH = size.h && size.h > 0 ? size.h : elem.h;
+    const xRatio = resizeW / elem.w;
+    const yRatio = resizeH / elem.h;
+    if (xRatio === yRatio && xRatio === 1) {
+        return elem;
+    }
+    const minRatio = Math.min(xRatio, yRatio);
+    const maxRatio = Math.max(xRatio, yRatio);
+    elem.w = resizeW;
+    elem.h = resizeH;
+    const opts = { xRatio, yRatio, minRatio, maxRatio };
+    if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+        elem.detail.children.forEach((child) => {
+            resizeElement(child, opts);
+        });
+    }
+    resizeElementBaseDetail(elem, opts);
+    return elem;
+}

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

@@ -1,6 +1,5 @@
-export declare class Store<T extends Record<string | symbol, any>> {
-    private _temp;
-    private _backUpDefaultStorage;
+export declare class Store<T extends Record<string | symbol, any> = Record<string | symbol, any>> {
+    #private;
     constructor(opts: {
         defaultStorage: T;
     });
@@ -8,5 +7,5 @@ export declare class Store<T extends Record<string | symbol, any>> {
     get<K extends keyof T>(name: K): T[K];
     getSnapshot(): T;
     clear(): void;
-    private _createTempStorage;
+    destroy(): void;
 }

package/dist/esm/lib/store.js

@@ -1,22 +1,40 @@
+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 _Store_instances, _Store_temp, _Store_backUpDefaultStorage, _Store_createTempStorage;
 import { deepClone } from './data';
 export class Store {
     constructor(opts) {
-        this._backUpDefaultStorage = deepClone(opts.defaultStorage);
-        this._temp = this._createTempStorage();
+        _Store_instances.add(this);
+        _Store_temp.set(this, void 0);
+        _Store_backUpDefaultStorage.set(this, void 0);
+        __classPrivateFieldSet(this, _Store_backUpDefaultStorage, deepClone(opts.defaultStorage), "f");
+        __classPrivateFieldSet(this, _Store_temp, __classPrivateFieldGet(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
     }
     set(name, value) {
-        this._temp[name] = value;
+        __classPrivateFieldGet(this, _Store_temp, "f")[name] = value;
     }
     get(name) {
-        return this._temp[name];
+        return __classPrivateFieldGet(this, _Store_temp, "f")[name];
     }
     getSnapshot() {
-        return deepClone(this._temp);
+        return deepClone(__classPrivateFieldGet(this, _Store_temp, "f"));
     }
     clear() {
-        this._temp = this._createTempStorage();
+        __classPrivateFieldSet(this, _Store_temp, __classPrivateFieldGet(this, _Store_instances, "m", _Store_createTempStorage).call(this), "f");
     }
-    _createTempStorage() {
-        return deepClone(this._backUpDefaultStorage);
+    destroy() {
+        __classPrivateFieldSet(this, _Store_temp, null, "f");
     }
 }
+_Store_temp = new WeakMap(), _Store_backUpDefaultStorage = new WeakMap(), _Store_instances = new WeakSet(), _Store_createTempStorage = function _Store_createTempStorage() {
+    return deepClone(__classPrivateFieldGet(this, _Store_backUpDefaultStorage, "f"));
+};

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

@@ -2,4 +2,5 @@ type Middleware = (ctx: any, next: Middleware) => any;
 export declare function compose(middleware: Middleware[]): (context: any, next?: Middleware) => any;
 export declare function delay(time: number): Promise<void>;
 export declare function throttle(fn: (...args: any[]) => any, timeout: number): (...args: any[]) => any;
+export declare function debounce(fn: (...args: any[]) => any, timeout: number): (...args: any[]) => any;
 export {};

package/dist/esm/lib/time.js

@@ -27,7 +27,7 @@ export function delay(time) {
 export function throttle(fn, timeout) {
     let timer = -1;
     return function (...args) {
-        if (timer > 0) {
+        if (timer >= 0) {
             return;
         }
         timer = setTimeout(() => {
@@ -36,3 +36,15 @@ export function throttle(fn, timeout) {
         }, timeout);
     };
 }
+export function debounce(fn, timeout) {
+    let timer = -1;
+    return function (...args) {
+        if (timer >= 0) {
+            window.clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+            fn(...args);
+            timer = -1;
+        }, timeout);
+    };
+}

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

@@ -3,8 +3,9 @@ const defaultElemConfig = getDefaultElementDetailConfig();
 export function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
-    let { borderRadius, boxSizing = defaultElemConfig.boxSizing, borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
+    let { borderRadius } = viewElem.detail;
+    const { boxSizing = defaultElemConfig.boxSizing, borderWidth } = viewElem.detail;
+    if (Array.isArray(borderWidth)) {
         borderRadius = 0;
     }
     let { x, y, w, h } = viewElem;

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

@@ -0,0 +1,10 @@
+import type { Data, ViewSizeInfo } from 'idraw';
+interface ViewCenterContentResult {
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+}
+export declare function calcViewCenterContent(data: Data, opts: {
+    viewSizeInfo: ViewSizeInfo;
+}): ViewCenterContentResult;
+export {};

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

@@ -0,0 +1,53 @@
+import { rotateElementVertexes } from './rotate';
+import { formatNumber } from './number';
+export function calcViewCenterContent(data, opts) {
+    let offsetX = 0;
+    let offsetY = 0;
+    let scale = 0;
+    let contentX = 0;
+    let contentY = 0;
+    let contentW = 0;
+    let contentH = 0;
+    const { width, height } = opts.viewSizeInfo;
+    data.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, contentX);
+        const areaStartY = Math.min(elemSize.y, contentY);
+        const areaEndX = Math.max(elemSize.x + elemSize.w, contentX + contentW);
+        const areaEndY = Math.max(elemSize.y + elemSize.h, contentY + contentH);
+        contentX = areaStartX;
+        contentY = areaStartY;
+        contentW = Math.abs(areaEndX - areaStartX);
+        contentH = Math.abs(areaEndY - areaStartY);
+    });
+    if (contentW > 0 && contentH > 0) {
+        const scaleW = formatNumber(width / contentW, { decimalPlaces: 4 });
+        const scaleH = formatNumber(height / contentH, { decimalPlaces: 4 });
+        scale = Math.min(scaleW, scaleH, 1);
+        offsetX = (contentW * scale - width) / 2 / scale;
+        offsetY = (contentH * scale - height) / 2 / scale;
+    }
+    const result = {
+        offsetX: formatNumber(offsetX, { decimalPlaces: 0 }),
+        offsetY: formatNumber(offsetY, { decimalPlaces: 0 }),
+        scale
+    };
+    return result;
+}