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

package/dist/esm/index.d.ts

@@ -1,8 +1,8 @@
-export { delay, compose, throttle } from './lib/time';
+export { delay, compose, throttle, debounce } from './lib/time';
 export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './lib/file';
 export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
-export { deepClone, sortDataAsserts } from './lib/data';
+export { deepClone, sortDataAsserts, deepCloneElement, deepCloneData, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
@@ -13,13 +13,13 @@ export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaild
 export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
-export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, calcElementListSize } from './lib/element';
+export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian } from './lib/rotate';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getGroupQueueByElementPosition, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, getElementPositionMapFromList, calcElementListSize, isSameElementSize } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo, calcElementViewRectInfo, calcElementOriginRectInfo, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
-export { calcElementSizeController } from './lib/controller';
+export { calcElementSizeController, calcLayoutSizeController } from './lib/controller';
 export { generateSVGPath, parseSVGPath } from './lib/svg-path';
 export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
@@ -27,4 +27,14 @@ export { formatNumber } from './lib/number';
 export { matrixToAngle, matrixToRadian } from './lib/matrix';
 export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
-export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';
+export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList, updateElementInListByPosition } from './lib/handle-element';
+export { deepResizeGroupElement } from './lib/resize-element';
+export { calcViewCenterContent, calcViewCenter } from './lib/view-content';
+export { modifyElement, getModifiedElement } from './lib/modify';
+export { enhanceFontFamliy } from './lib/text';
+export { flatElementList } from './lib/flat';
+export { groupElementsByPosition, ungroupElementsByPosition } from './lib/group';
+export { calcPointMoveElementInGroup } from './lib/point-move-element';
+export { merge } from './lib/merge';
+export { omit } from './lib/omit';
+export { elementToBoxInfo } from './lib/box';

package/dist/esm/index.js

@@ -1,8 +1,8 @@
-export { delay, compose, throttle } from './lib/time';
+export { delay, compose, throttle, debounce } from './lib/time';
 export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText, downloadFileFromText } from './lib/file';
 export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
-export { deepClone, sortDataAsserts } from './lib/data';
+export { deepClone, sortDataAsserts, deepCloneElement, deepCloneData, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
@@ -13,13 +13,13 @@ export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaild
 export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
-export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, calcElementListSize } from './lib/element';
+export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle, calcRadian } from './lib/rotate';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementQueueFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getGroupQueueByElementPosition, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList, getElementPositionMapFromList, calcElementListSize, isSameElementSize } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo, calcElementViewRectInfo, calcElementOriginRectInfo, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
-export { calcElementSizeController } from './lib/controller';
+export { calcElementSizeController, calcLayoutSizeController } from './lib/controller';
 export { generateSVGPath, parseSVGPath } from './lib/svg-path';
 export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
@@ -27,4 +27,14 @@ export { formatNumber } from './lib/number';
 export { matrixToAngle, matrixToRadian } from './lib/matrix';
 export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
-export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';
+export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList, updateElementInListByPosition } from './lib/handle-element';
+export { deepResizeGroupElement } from './lib/resize-element';
+export { calcViewCenterContent, calcViewCenter } from './lib/view-content';
+export { modifyElement, getModifiedElement } from './lib/modify';
+export { enhanceFontFamliy } from './lib/text';
+export { flatElementList } from './lib/flat';
+export { groupElementsByPosition, ungroupElementsByPosition } from './lib/group';
+export { calcPointMoveElementInGroup } from './lib/point-move-element';
+export { merge } from './lib/merge';
+export { omit } from './lib/omit';
+export { elementToBoxInfo } from './lib/box';

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

@@ -0,0 +1,2 @@
+import type { BoxInfo, Element } from '@idraw/types';
+export declare function elementToBoxInfo(elem: Element): BoxInfo;

package/dist/esm/lib/box.js

@@ -0,0 +1,173 @@
+import { is } from './is';
+export function elementToBoxInfo(elem) {
+    const { x, y, w, h, detail } = elem;
+    const { borderWidth, borderRadius, boxSizing } = detail;
+    let btw = 0;
+    let brw = 0;
+    let bbw = 0;
+    let blw = 0;
+    let btlr = 0;
+    let btrr = 0;
+    let bblr = 0;
+    let bbrr = 0;
+    if (typeof borderWidth === 'number' && borderWidth > 0) {
+        btw = borderWidth;
+        brw = borderWidth;
+        bbw = borderWidth;
+        blw = borderWidth;
+    }
+    else if (Array.isArray(borderWidth)) {
+        btw = is.positiveNum(borderWidth[0]) ? borderWidth[0] : 0;
+        brw = is.positiveNum(borderWidth[1]) ? borderWidth[0] : 0;
+        bbw = is.positiveNum(borderWidth[2]) ? borderWidth[0] : 0;
+        blw = is.positiveNum(borderWidth[3]) ? borderWidth[0] : 0;
+    }
+    if (typeof borderRadius === 'number' && borderRadius > 0) {
+        btlr = borderRadius;
+        btrr = borderRadius;
+        bblr = borderRadius;
+        bbrr = borderRadius;
+    }
+    else if (Array.isArray(borderRadius)) {
+        btlr = is.positiveNum(borderRadius[0]) ? borderRadius[0] : 0;
+        btrr = is.positiveNum(borderRadius[0]) ? borderRadius[0] : 0;
+        bblr = is.positiveNum(borderRadius[0]) ? borderRadius[0] : 0;
+        bbrr = is.positiveNum(borderRadius[0]) ? borderRadius[0] : 0;
+    }
+    const p0 = { x: x, y: y };
+    const p1 = { x: x + w, y: y };
+    const p2 = { x: x + w, y: y + h };
+    const p3 = { x: x, y: y + h };
+    const p0s = { x: x, y: y + btlr };
+    const p0e = { x: x + btlr, y: y };
+    const p1s = { x: x + w - btrr, y: y };
+    const p1e = { x: x + w, y: y + btrr };
+    const p2s = { x: x + w, y: y + h - bbrr };
+    const p2e = { x: x + w - bbrr, y: y + h };
+    const p3s = { x: x + bblr, y: y + h };
+    const p3e = { x: x, y: y + h - bblr };
+    let op0 = Object.assign({}, p0);
+    let op1 = Object.assign({}, p1);
+    let op2 = Object.assign({}, p2);
+    let op3 = Object.assign({}, p3);
+    let op0s = Object.assign({}, p0s);
+    let op0e = Object.assign({}, p0e);
+    let op1s = Object.assign({}, p1s);
+    let op1e = Object.assign({}, p1e);
+    let op2s = Object.assign({}, p2s);
+    let op2e = Object.assign({}, p2e);
+    let op3s = Object.assign({}, p3s);
+    let op3e = Object.assign({}, p3e);
+    let ip0 = Object.assign({}, p0);
+    let ip1 = Object.assign({}, p1);
+    let ip2 = Object.assign({}, p2);
+    let ip3 = Object.assign({}, p3);
+    let ip0s = Object.assign({}, p0s);
+    let ip0e = Object.assign({}, p0e);
+    let ip1s = Object.assign({}, p1s);
+    let ip1e = Object.assign({}, p1e);
+    let ip2s = Object.assign({}, p2s);
+    let ip2e = Object.assign({}, p2e);
+    let ip3s = Object.assign({}, p3s);
+    let ip3e = Object.assign({}, p3e);
+    if (boxSizing === 'border-box') {
+        ip0 = { x: ip0.x + blw, y: ip0.y + btw };
+        ip1 = { x: ip1.x - brw, y: ip1.y + btw };
+        ip2 = { x: ip2.x - brw, y: ip2.y - bbw };
+        ip3 = { x: ip3.x + blw, y: ip3.y - bbw };
+        ip0s = { x: ip0s.x + blw, y: ip0s.y + btw };
+        ip0e = { x: ip0e.x + blw, y: ip0e.y + btw };
+        ip1s = { x: ip1s.x - brw, y: ip1s.y + btw };
+        ip1e = { x: ip1e.x - brw, y: ip1e.y + btw };
+        ip2s = { x: ip2s.x - brw, y: ip2s.y - bbw };
+        ip2e = { x: ip2e.x - brw, y: ip2e.y - bbw };
+        ip3s = { x: ip3s.x + blw, y: ip3s.y - bbw };
+        ip3e = { x: ip3e.x + blw, y: ip3e.y - bbw };
+    }
+    else if (boxSizing === 'content-box') {
+        op0 = { x: op0.x - blw, y: op0.y - btw };
+        op1 = { x: op1.x + brw, y: op1.y - btw };
+        op2 = { x: op2.x + brw, y: op2.y + bbw };
+        op3 = { x: op3.x - blw, y: op3.y + bbw };
+        op0s = { x: op0s.x - blw, y: op0s.y - btw };
+        op0e = { x: op0e.x - blw, y: op0e.y - btw };
+        op1s = { x: op1s.x + brw, y: op1s.y - btw };
+        op1e = { x: op1e.x + brw, y: op1e.y - btw };
+        op2s = { x: op2s.x + brw, y: op2s.y + bbw };
+        op2e = { x: op2e.x + brw, y: op2e.y + bbw };
+        op3s = { x: op3s.x - blw, y: op3s.y + bbw };
+        op3e = { x: op3e.x - blw, y: op3e.y + bbw };
+    }
+    else {
+        ip0 = { x: ip0.x + blw / 2, y: ip0.y + btw / 2 };
+        ip1 = { x: ip1.x - brw / 2, y: ip1.y + btw / 2 };
+        ip2 = { x: ip2.x - brw / 2, y: ip2.y - bbw / 2 };
+        ip3 = { x: ip3.x + blw / 2, y: ip3.y - bbw / 2 };
+        ip0s = { x: ip0s.x + blw / 2, y: ip0s.y + btw / 2 };
+        ip0e = { x: ip0e.x + blw / 2, y: ip0e.y + btw / 2 };
+        ip1s = { x: ip1s.x - brw / 2, y: ip1s.y + btw / 2 };
+        ip1e = { x: ip1e.x - brw / 2, y: ip1e.y + btw / 2 };
+        ip2s = { x: ip2s.x - brw / 2, y: ip2s.y - bbw / 2 };
+        ip2e = { x: ip2e.x - brw / 2, y: ip2e.y - bbw / 2 };
+        ip3s = { x: ip3s.x + blw / 2, y: ip3s.y - bbw / 2 };
+        ip3e = { x: ip3e.x + blw / 2, y: ip3e.y - bbw / 2 };
+        op0 = { x: op0.x - blw / 2, y: op0.y - btw / 2 };
+        op1 = { x: op1.x + brw / 2, y: op1.y - btw / 2 };
+        op2 = { x: op2.x + brw / 2, y: op2.y + bbw / 2 };
+        op3 = { x: op3.x - blw / 2, y: op3.y + bbw / 2 };
+        op0s = { x: op0s.x - blw / 2, y: op0s.y - btw / 2 };
+        op0e = { x: op0e.x - blw / 2, y: op0e.y - btw / 2 };
+        op1s = { x: op1s.x + brw / 2, y: op1s.y - btw / 2 };
+        op1e = { x: op1e.x + brw / 2, y: op1e.y - btw / 2 };
+        op2s = { x: op2s.x + brw / 2, y: op2s.y + bbw / 2 };
+        op2e = { x: op2e.x + brw / 2, y: op2e.y + bbw / 2 };
+        op3s = { x: op3s.x - blw / 2, y: op3s.y + bbw / 2 };
+        op3e = { x: op3e.x - blw / 2, y: op3e.y + bbw / 2 };
+    }
+    return {
+        btw,
+        brw,
+        bbw,
+        blw,
+        btlr,
+        btrr,
+        bblr,
+        bbrr,
+        p0,
+        p1,
+        p2,
+        p3,
+        p0s,
+        p0e,
+        p1s,
+        p1e,
+        p2s,
+        p2e,
+        p3s,
+        p3e,
+        op0,
+        op1,
+        op2,
+        op3,
+        op0s,
+        op0e,
+        op1s,
+        op1e,
+        op2s,
+        op2e,
+        op3s,
+        op3e,
+        ip0,
+        ip1,
+        ip2,
+        ip3,
+        ip0s,
+        ip0e,
+        ip1s,
+        ip1e,
+        ip2s,
+        ip2e,
+        ip3s,
+        ip3e
+    };
+}

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

@@ -15,5 +15,4 @@ export declare function createBoardContent(canvas: HTMLCanvasElement, opts: {
     width: number;
     height: number;
     devicePixelRatio: number;
-    offscreen?: boolean;
 }): BoardContent;

package/dist/esm/lib/canvas.js

@@ -23,59 +23,35 @@ export function createOffscreenContext2D(opts) {
     return context2d;
 }
 export function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+    const { width, height, devicePixelRatio } = opts;
     const ctxOpts = {
         width,
         height,
         devicePixelRatio
     };
-    if (offscreen === true) {
-        const ctx = canvas.getContext('2d');
-        const viewContext = createOffscreenContext2D(ctxOpts);
-        const helperContext = createOffscreenContext2D(ctxOpts);
-        const underContext = createOffscreenContext2D(ctxOpts);
-        const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-        const drawView = () => {
-            const { width: w, height: h } = viewContext.$getSize();
-            boardContext.clearRect(0, 0, w, h);
-            boardContext.drawImage(underContext.canvas, 0, 0, w, h);
-            boardContext.drawImage(viewContext.canvas, 0, 0, w, h);
-            boardContext.drawImage(helperContext.canvas, 0, 0, w, h);
-            underContext.clearRect(0, 0, w, h);
-            viewContext.clearRect(0, 0, w, h);
-            helperContext.clearRect(0, 0, w, h);
-        };
-        const content = {
-            underContext,
-            viewContext,
-            helperContext,
-            boardContext,
-            drawView
-        };
-        return content;
-    }
-    else {
-        const ctx = canvas.getContext('2d');
-        const viewContext = createContext2D(ctxOpts);
-        const helperContext = createContext2D(ctxOpts);
-        const underContext = createContext2D(ctxOpts);
-        const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-        const drawView = () => {
-            boardContext.clearRect(0, 0, width, height);
-            boardContext.drawImage(underContext.canvas, 0, 0, width, height);
-            boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-            boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
-            underContext.clearRect(0, 0, width, height);
-            viewContext.clearRect(0, 0, width, height);
-            helperContext.clearRect(0, 0, width, height);
-        };
-        const content = {
-            underContext,
-            viewContext,
-            helperContext,
-            boardContext,
-            drawView
-        };
-        return content;
-    }
+    const ctx = canvas.getContext('2d');
+    const viewContext = createOffscreenContext2D(ctxOpts);
+    const overlayContext = createOffscreenContext2D(ctxOpts);
+    const underlayContext = createOffscreenContext2D(ctxOpts);
+    const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
+    const tempContext = createOffscreenContext2D(ctxOpts);
+    const drawView = () => {
+        const { width: w, height: h } = viewContext.$getSize();
+        boardContext.clearRect(0, 0, w, h);
+        boardContext.drawImage(underlayContext.canvas, 0, 0, w, h);
+        boardContext.drawImage(viewContext.canvas, 0, 0, w, h);
+        boardContext.drawImage(overlayContext.canvas, 0, 0, w, h);
+        underlayContext.clearRect(0, 0, w, h);
+        viewContext.clearRect(0, 0, w, h);
+        overlayContext.clearRect(0, 0, w, h);
+    };
+    const content = {
+        underlayContext,
+        viewContext,
+        overlayContext,
+        boardContext,
+        tempContext,
+        drawView
+    };
+    return content;
 }

package/dist/esm/lib/color.js

@@ -1,11 +1,11 @@
 export function toColorHexNum(color) {
-    return parseInt(color.replace(/^\#/, '0x'));
+    return parseInt(color.replace(/^#/, '0x'));
 }
 export function toColorHexStr(color) {
     return '#' + color.toString(16);
 }
 export function isColorStr(color) {
-    return typeof color === 'string' && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color) || /^[a-z]{1,}$/i.test(color));
+    return (typeof color === 'string' && (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color) || /^[a-z]{1,}$/i.test(color)));
 }
 const colorNameMap = {
     aliceblue: '#f0f8ff',
@@ -163,6 +163,9 @@ export function colorToCSS(color) {
     if (typeof color === 'string') {
         css = color;
     }
+    else if ((color === null || color === void 0 ? void 0 : color.stops.length) === 1) {
+        css = color.stops[0].color;
+    }
     else if ((color === null || color === void 0 ? void 0 : color.type) === 'linear-gradient') {
         const items = [];
         if (typeof color.angle === 'number') {
@@ -213,14 +216,14 @@ export function mergeHexColorAlpha(hex, alpha) {
         return hex;
     }
     let hexAlpha = 1;
-    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
-    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    const regHex1 = /^#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^#[0-9a-f]{8,8}$/i;
     let result = hex;
     if (regHex1.test(hex)) {
-        hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, '0x'));
+        hexAlpha = parseInt(hex.substring(5, 7).replace(/^#/, '0x'));
     }
     else if (regHex2.test(hex)) {
-        hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, '0x'));
+        hexAlpha = parseInt(hex.substring(7, 9).replace(/^#/, '0x'));
         result = hex.substring(0, 7);
     }
     hexAlpha = hexAlpha * alpha;

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

@@ -1,14 +1,9 @@
-import type { ViewScaleInfo, DefaultElementDetailConfig, ElementRectDetail, ElementCircleDetail, ElementTextDetail, ElementSVGDetail, ElementImageDetail, ElementGroupDetail } from '@idraw/types';
+import type { DefaultElementDetailConfig, ElementSize, ElementRectDetail, ElementCircleDetail, ElementTextDetail, ElementSVGDetail, ElementImageDetail, ElementGroupDetail } from '@idraw/types';
+export declare const defaultText = "Text Element";
 export declare function getDefaultElementDetailConfig(): DefaultElementDetailConfig;
 export declare function getDefaultElementRectDetail(): ElementRectDetail;
-export declare function getDefaultElementCircleDetail(opts: {
-    radius: number;
-}): ElementCircleDetail;
-export declare function getDefaultElementTextDetail(opts?: {
-    viewScaleInfo: ViewScaleInfo;
-}): ElementTextDetail;
+export declare function getDefaultElementCircleDetail(): ElementCircleDetail;
+export declare function getDefaultElementTextDetail(elementSize: ElementSize): ElementTextDetail;
 export declare function getDefaultElementSVGDetail(): ElementSVGDetail;
 export declare function getDefaultElementImageDetail(): ElementImageDetail;
-export declare function getDefaultElementGroupDetail(opts?: {
-    viewScaleInfo: ViewScaleInfo;
-}): ElementGroupDetail;
+export declare function getDefaultElementGroupDetail(): ElementGroupDetail;

package/dist/esm/lib/config.js

@@ -1,3 +1,4 @@
+export const defaultText = 'Text Element';
 export function getDefaultElementDetailConfig() {
     const config = {
         boxSizing: 'border-box',
@@ -14,9 +15,10 @@ export function getDefaultElementDetailConfig() {
         textAlign: 'left',
         verticalAlign: 'top',
         fontSize: 16,
-        lineHeight: 20,
         fontFamily: 'sans-serif',
         fontWeight: 400,
+        minInlineSize: 'auto',
+        wordBreak: 'break-all',
         overflow: 'hidden'
     };
     return config;
@@ -27,24 +29,22 @@ export function getDefaultElementRectDetail() {
     };
     return detail;
 }
-export function getDefaultElementCircleDetail(opts) {
+export function getDefaultElementCircleDetail() {
     const detail = {
         background: '#D9D9D9',
         radius: 0
     };
     return detail;
 }
-export function getDefaultElementTextDetail(opts) {
-    var _a;
+export function getDefaultElementTextDetail(elementSize) {
     const detailConfig = getDefaultElementDetailConfig();
-    const scale = ((_a = opts === null || opts === void 0 ? void 0 : opts.viewScaleInfo) === null || _a === void 0 ? void 0 : _a.scale) || 1;
     const detail = {
-        text: 'Text Element',
+        text: defaultText,
         color: detailConfig.color,
         fontFamily: detailConfig.fontFamily,
         fontWeight: detailConfig.fontWeight,
-        lineHeight: detailConfig.fontSize * scale,
-        fontSize: detailConfig.fontSize * scale,
+        lineHeight: elementSize.w / defaultText.length,
+        fontSize: elementSize.w / defaultText.length,
         textAlign: 'center',
         verticalAlign: 'middle'
     };
@@ -62,7 +62,7 @@ export function getDefaultElementImageDetail() {
     };
     return detail;
 }
-export function getDefaultElementGroupDetail(opts) {
+export function getDefaultElementGroupDetail() {
     const detail = {
         children: [],
         background: '#D9D9D9',

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

@@ -5,11 +5,13 @@ export declare class Context2D implements ViewContext2D {
     $undoPixelRatio(num: number): number;
     $doPixelRatio(num: number): number;
     $getContext(): CanvasRenderingContext2D;
+    $setContext(ctx: CanvasRenderingContext2D): void;
     $setFont(opts: {
         fontSize: number;
         fontFamily?: string;
         fontWeight?: 'bold' | number | string;
     }): void;
+    $resetFont(): void;
     $getOffscreenCanvas(): OffscreenCanvas | null;
     $resize(opts: {
         width: number;
@@ -57,6 +59,8 @@ export declare class Context2D implements ViewContext2D {
     lineTo(x: number, y: number): void;
     moveTo(x: number, y: number): void;
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
     getLineDash(): number[];
     setLineDash(nums: number[]): void;
     stroke(path?: Path2D): void;

package/dist/esm/lib/context2d.js

@@ -10,12 +10,16 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Context2D_ctx, _Context2D_opts;
+const defaultFontSize = 12;
+const defaultFontWeight = '400';
+const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`;
 export class Context2D {
     constructor(ctx, opts) {
         _Context2D_ctx.set(this, void 0);
         _Context2D_opts.set(this, void 0);
         __classPrivateFieldSet(this, _Context2D_ctx, ctx, "f");
         __classPrivateFieldSet(this, _Context2D_opts, Object.assign({ devicePixelRatio: 1, offscreenCanvas: null }, opts), "f");
+        this.$resetFont();
     }
     $undoPixelRatio(num) {
         return num / __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio;
@@ -26,6 +30,9 @@ export class Context2D {
     $getContext() {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f");
     }
+    $setContext(ctx) {
+        __classPrivateFieldSet(this, _Context2D_ctx, ctx, "f");
+    }
     $setFont(opts) {
         const strList = [];
         if (opts.fontWeight) {
@@ -35,6 +42,13 @@ export class Context2D {
         strList.push(`${opts.fontFamily || 'sans-serif'}`);
         __classPrivateFieldGet(this, _Context2D_ctx, "f").font = `${strList.join(' ')}`;
     }
+    $resetFont() {
+        this.$setFont({
+            fontSize: defaultFontSize,
+            fontFamily: defaultFontFamily,
+            fontWeight: defaultFontWeight
+        });
+    }
     $getOffscreenCanvas() {
         return __classPrivateFieldGet(this, _Context2D_opts, "f").offscreenCanvas;
     }
@@ -165,6 +179,12 @@ export class Context2D {
     arcTo(x1, y1, x2, y2, radius) {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
     }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").bezierCurveTo(this.$doPixelRatio(cp1x), this.$doPixelRatio(cp1y), this.$doPixelRatio(cp2x), this.$doPixelRatio(cp2y), this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
+    quadraticCurveTo(cpx, cpy, x, y) {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").quadraticCurveTo(this.$doPixelRatio(cpx), this.$doPixelRatio(cpy), this.$doPixelRatio(x), this.$doPixelRatio(y));
+    }
     getLineDash() {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").getLineDash();
     }

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

@@ -1,6 +1,12 @@
-import type { Element, ElementSize, ElementSizeController, ViewScaleInfo } from '@idraw/types';
+import type { Element, ElementSize, ElementSizeController, ViewScaleInfo, LayoutSizeController } from '@idraw/types';
 export declare function calcElementSizeController(elemSize: ElementSize, opts: {
     groupQueue: Element<'group'>[];
-    controllerSize?: number;
+    controllerSize: number;
+    rotateControllerSize: number;
+    rotateControllerPosition: number;
     viewScaleInfo: ViewScaleInfo;
 }): ElementSizeController;
+export declare function calcLayoutSizeController(layoutSize: Pick<ElementSize, 'x' | 'y' | 'w' | 'h'>, opts: {
+    controllerSize?: number;
+    viewScaleInfo: ViewScaleInfo;
+}): LayoutSizeController;