@idraw/util 0.4.0-beta.3 → 0.4.0-beta.30

package/dist/esm/index.d.ts

@@ -1,8 +1,8 @@
-export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+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, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
@@ -13,13 +13,14 @@ 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, calcElementListSize } 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, calcElementViewRectInfoMap, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './lib/view-calc';
+export { sortElementsViewVisiableInfoMap, calcVisibleOriginCanvasRectInfo, updateViewVisibleInfoMapStatus } from './lib/view-visible';
 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 +28,9 @@ 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';

package/dist/esm/index.js

@@ -1,8 +1,8 @@
-export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+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, filterCompactData } from './lib/data';
 export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
@@ -13,13 +13,14 @@ 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, calcElementListSize } 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, calcElementViewRectInfoMap, originRectInfoToRangeRectInfo, isViewPointInElementSize, isViewPointInVertexes } from './lib/view-calc';
+export { sortElementsViewVisiableInfoMap, calcVisibleOriginCanvasRectInfo, updateViewVisibleInfoMapStatus } from './lib/view-visible';
 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 +28,9 @@ 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';

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

@@ -1,4 +1,4 @@
-import type { BoardContent } from '@idraw/types';
+import type { BoardContent, ViewContext2D } from '@idraw/types';
 import { Context2D } from './context2d';
 export declare function createContext2D(opts: {
     ctx?: CanvasRenderingContext2D;
@@ -16,4 +16,9 @@ export declare function createBoardContent(canvas: HTMLCanvasElement, opts: {
     height: number;
     devicePixelRatio: number;
     offscreen?: boolean;
+    createCustomContext2D?: (opts: {
+        width: number;
+        height: number;
+        devicePixelRatio: number;
+    }) => ViewContext2D;
 }): BoardContent;

package/dist/esm/lib/canvas.js

@@ -23,56 +23,79 @@ export function createOffscreenContext2D(opts) {
     return context2d;
 }
 export function createBoardContent(canvas, opts) {
-    const { width, height, devicePixelRatio, offscreen } = opts;
+    const { width, height, devicePixelRatio, offscreen, createCustomContext2D } = opts;
     const ctxOpts = {
         width,
         height,
         devicePixelRatio
     };
+    const ctx = canvas.getContext('2d');
+    if (createCustomContext2D) {
+        const viewContext = createCustomContext2D(ctxOpts);
+        const overlayContext = createCustomContext2D(ctxOpts);
+        const underlayContext = createCustomContext2D(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(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,
+            drawView
+        };
+        return content;
+    }
     if (offscreen === true) {
-        const ctx = canvas.getContext('2d');
         const viewContext = createOffscreenContext2D(ctxOpts);
-        const helperContext = createOffscreenContext2D(ctxOpts);
-        const underContext = createOffscreenContext2D(ctxOpts);
+        const overlayContext = createOffscreenContext2D(ctxOpts);
+        const underlayContext = 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(underlayContext.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);
+            boardContext.drawImage(overlayContext.canvas, 0, 0, w, h);
+            underlayContext.clearRect(0, 0, w, h);
             viewContext.clearRect(0, 0, w, h);
-            helperContext.clearRect(0, 0, w, h);
+            overlayContext.clearRect(0, 0, w, h);
         };
         const content = {
-            underContext,
+            underlayContext,
             viewContext,
-            helperContext,
+            overlayContext,
             boardContext,
             drawView
         };
         return content;
     }
     else {
-        const ctx = canvas.getContext('2d');
         const viewContext = createContext2D(ctxOpts);
-        const helperContext = createContext2D(ctxOpts);
-        const underContext = createContext2D(ctxOpts);
+        const overlayContext = createContext2D(ctxOpts);
+        const underlayContext = 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(underlayContext.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);
+            boardContext.drawImage(overlayContext.canvas, 0, 0, width, height);
+            underlayContext.clearRect(0, 0, width, height);
             viewContext.clearRect(0, 0, width, height);
-            helperContext.clearRect(0, 0, width, height);
+            overlayContext.clearRect(0, 0, width, height);
         };
         const content = {
-            underContext,
+            underlayContext,
             viewContext,
-            helperContext,
+            overlayContext,
             boardContext,
             drawView
         };

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;

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;
     }

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

@@ -1,6 +1,10 @@
-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;
     viewScaleInfo: ViewScaleInfo;
 }): ElementSizeController;
+export declare function calcLayoutSizeController(layoutSize: Pick<ElementSize, 'x' | 'y' | 'w' | 'h'>, opts: {
+    controllerSize?: number;
+    viewScaleInfo: ViewScaleInfo;
+}): LayoutSizeController;

package/dist/esm/lib/controller.js

@@ -1,6 +1,8 @@
 import { createUUID } from './uuid';
 import { getCenterFromTwoPoints } from './point';
 import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
+import { calcViewElementSize } from './view-calc';
+import { calcElementCenter } from './rotate';
 function createControllerElementSizeFromCenter(center, opts) {
     const { x, y } = center;
     const { size, angle } = opts;
@@ -36,6 +38,13 @@ export function calcElementSizeController(elemSize, opts) {
         totalAngle += angle;
     });
     const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const rotateElemVertexes = calcElementVertexesInGroup({
+        x: x - ctrlSize * 2,
+        y: y - ctrlSize * 2,
+        h: h + ctrlSize * 4,
+        w: w + ctrlSize * 4,
+        angle
+    }, { groupQueue: [...groupQueue] });
     const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
     const bottomCenter = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
@@ -44,6 +53,10 @@ export function calcElementSizeController(elemSize, opts) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
@@ -56,6 +69,13 @@ export function calcElementSizeController(elemSize, opts) {
     const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
     const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
     const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
+    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, { size: ctrlSize, angle: totalAngle });
+    const rotateVertexes = calcElementVertexes(rotateSize);
     const sizeController = {
         elementWrapper: vertexes,
         left: {
@@ -97,6 +117,128 @@ export function calcElementSizeController(elemSize, opts) {
             type: 'bottom-right',
             vertexes: bottomRightVertexes,
             center: bottomRightCenter
+        },
+        leftMiddle: {
+            type: 'left-middle',
+            vertexes: leftMiddleVertexes,
+            center: leftCenter
+        },
+        rightMiddle: {
+            type: 'right-middle',
+            vertexes: rightMiddleVertexes,
+            center: rightCenter
+        },
+        topMiddle: {
+            type: 'top-middle',
+            vertexes: topMiddleVertexes,
+            center: topCenter
+        },
+        bottomMiddle: {
+            type: 'bottom-middle',
+            vertexes: bottomMiddleVertexes,
+            center: bottomCenter
+        },
+        rotate: {
+            type: 'rotate',
+            vertexes: rotateVertexes,
+            center: rotateCenter
+        }
+    };
+    return sizeController;
+}
+export function calcLayoutSizeController(layoutSize, opts) {
+    const { controllerSize, viewScaleInfo } = opts;
+    const ctrlSize = controllerSize && controllerSize > 0 ? controllerSize : 8;
+    const { x, y, w, h } = calcViewElementSize(layoutSize, { viewScaleInfo });
+    const center = calcElementCenter({ x, y, w, h });
+    const topCenter = { x: center.x, y };
+    const rightCenter = { x: x + w, y: center.y };
+    const bottomCenter = { x: center.x, y: y + h };
+    const leftCenter = { x, y: center.y };
+    const topLeftCenter = { x, y };
+    const topRightCenter = { x: x + w, y };
+    const bottomRightCenter = { x: x + w, y: y + h };
+    const bottomLeftCenter = { x, y: y + h };
+    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
+    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
+    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
+    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
+    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
+    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
+    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
+    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
+    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const sizeController = {
+        left: {
+            type: 'left',
+            vertexes: leftVertexes,
+            center: leftCenter
+        },
+        right: {
+            type: 'right',
+            vertexes: rightVertexes,
+            center: rightCenter
+        },
+        top: {
+            type: 'top',
+            vertexes: topVertexes,
+            center: topCenter
+        },
+        bottom: {
+            type: 'bottom',
+            vertexes: bottomVertexes,
+            center: bottomCenter
+        },
+        topLeft: {
+            type: 'top-left',
+            vertexes: topLeftVertexes,
+            center: topLeftCenter
+        },
+        topRight: {
+            type: 'top-right',
+            vertexes: topRightVertexes,
+            center: topRightCenter
+        },
+        bottomLeft: {
+            type: 'bottom-left',
+            vertexes: bottomLeftVertexes,
+            center: bottomLeftCenter
+        },
+        bottomRight: {
+            type: 'bottom-right',
+            vertexes: bottomRightVertexes,
+            center: bottomRightCenter
+        },
+        leftMiddle: {
+            type: 'left-middle',
+            vertexes: leftMiddleVertexes,
+            center: leftCenter
+        },
+        rightMiddle: {
+            type: 'right-middle',
+            vertexes: rightMiddleVertexes,
+            center: rightCenter
+        },
+        topMiddle: {
+            type: 'top-middle',
+            vertexes: topMiddleVertexes,
+            center: topCenter
+        },
+        bottomMiddle: {
+            type: 'bottom-middle',
+            vertexes: bottomMiddleVertexes,
+            center: bottomCenter
         }
     };
     return sizeController;

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

@@ -1,5 +1,9 @@
-import type { Data } from '@idraw/types';
-export declare function deepClone<T extends any = any>(target: T): T;
+import type { Data, Element, LoadItemMap } from '@idraw/types';
+export declare function deepClone<T = any>(target: T): T;
+export declare function deepCloneElement<T extends Element = Element>(element: T): T;
 export declare function sortDataAsserts(data: Data, opts?: {
     clone?: boolean;
 }): Data;
+export declare function filterCompactData(data: Data, opts?: {
+    loadItemMap?: LoadItemMap;
+}): Data<Record<string, any>>;

package/dist/esm/lib/data.js

@@ -1,4 +1,4 @@
-import { createAssetId } from './uuid';
+import { createAssetId, createUUID, isAssetId } from './uuid';
 export function deepClone(target) {
     function _clone(t) {
         const type = is(t);
@@ -27,6 +27,19 @@ export function deepClone(target) {
     }
     return _clone(target);
 }
+export function deepCloneElement(element) {
+    const elem = deepClone(element);
+    const _resetUUID = (e) => {
+        e.uuid = createUUID();
+        if (e.type === 'group' && e.detail.children) {
+            e.detail.children.forEach((child) => {
+                _resetUUID(child);
+            });
+        }
+    };
+    _resetUUID(elem);
+    return elem;
+}
 function is(target) {
     return Object.prototype.toString
         .call(target)
@@ -68,7 +81,7 @@ export function sortDataAsserts(data, opts) {
                 const assetUUID = createAssetId(html);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
-                        type: 'svg',
+                        type: 'html',
                         value: html
                     };
                 }
@@ -90,3 +103,83 @@ export function sortDataAsserts(data, opts) {
     sortedData.assets = assets;
     return sortedData;
 }
+export function filterCompactData(data, opts) {
+    const assets = data.assets || {};
+    const sortedData = deepClone(data);
+    const loadItemMap = (opts === null || opts === void 0 ? void 0 : opts.loadItemMap) || {};
+    const _scanElements = (elems) => {
+        elems.forEach((elem) => {
+            var _a, _b, _c;
+            if (elem.type === 'image' && elem.detail.src) {
+                const src = elem.detail.src;
+                if (isAssetId(src) && !assets[src] && loadItemMap[src] && typeof ((_a = loadItemMap[src]) === null || _a === void 0 ? void 0 : _a.source) === 'string') {
+                    assets[src] = {
+                        type: 'image',
+                        value: loadItemMap[src].source
+                    };
+                }
+                else if (!assets[src]) {
+                    const assetUUID = createAssetId(src);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'image',
+                            value: src
+                        };
+                    }
+                    elem.detail.src = assetUUID;
+                }
+            }
+            else if (elem.type === 'svg') {
+                const svg = elem.detail.svg;
+                if (isAssetId(svg) && !assets[svg] && loadItemMap[svg] && typeof ((_b = loadItemMap[svg]) === null || _b === void 0 ? void 0 : _b.source) === 'string') {
+                    assets[svg] = {
+                        type: 'svg',
+                        value: loadItemMap[svg].source
+                    };
+                }
+                else if (!assets[svg]) {
+                    const assetUUID = createAssetId(svg);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'svg',
+                            value: svg
+                        };
+                    }
+                    elem.detail.svg = assetUUID;
+                }
+            }
+            else if (elem.type === 'html') {
+                const html = elem.detail.html;
+                if (isAssetId(html) && !assets[html] && loadItemMap[html] && typeof ((_c = loadItemMap[html]) === null || _c === void 0 ? void 0 : _c.source) === 'string') {
+                    assets[html] = {
+                        type: 'html',
+                        value: loadItemMap[html].source
+                    };
+                }
+                else if (!assets[html]) {
+                    const assetUUID = createAssetId(html);
+                    if (!assets[assetUUID]) {
+                        assets[assetUUID] = {
+                            type: 'html',
+                            value: html
+                        };
+                    }
+                    elem.detail.html = assetUUID;
+                }
+            }
+            else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+                const groupAssets = elem.detail.assets || {};
+                Object.keys(groupAssets).forEach((assetId) => {
+                    if (!assets[assetId]) {
+                        assets[assetId] = groupAssets[assetId];
+                    }
+                });
+                delete elem.detail.assets;
+                _scanElements(elem.detail.children);
+            }
+        });
+    };
+    _scanElements(sortedData.elements);
+    sortedData.assets = assets;
+    return sortedData;
+}