@idraw/util 0.4.0-alpha.5 → 0.4.0-alpha.7

package/dist/esm/index.d.ts

@@ -7,16 +7,16 @@ export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
 export { check } from './lib/check';
-export { createBoardContexts, createContext2D, createOffscreenContext2D } from './lib/canvas';
+export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
 export { EventEmitter } from './lib/event';
 export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
 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, updateElementInList, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
 export { calcElementSizeController } from './lib/controller';
@@ -25,5 +25,6 @@ export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
 export { formatNumber } from './lib/number';
 export { matrixToAngle, matrixToRadian } from './lib/matrix';
-export { getDefaultElementDetailConfig } from './lib/config';
+export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
+export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';

package/dist/esm/index.js

@@ -7,16 +7,16 @@ export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
 export { check } from './lib/check';
-export { createBoardContexts, createContext2D, createOffscreenContext2D } from './lib/canvas';
+export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
 export { EventEmitter } from './lib/event';
 export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
 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, updateElementInList, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, findElementFromListByPosition, findElementsFromListByPositions, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement, getElementPositionFromList } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
-export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView, calcViewScaleInfo } from './lib/view-calc';
 export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
 export { calcElementSizeController } from './lib/controller';
@@ -25,5 +25,6 @@ export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
 export { formatNumber } from './lib/number';
 export { matrixToAngle, matrixToRadian } from './lib/matrix';
-export { getDefaultElementDetailConfig } from './lib/config';
+export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './lib/config';
 export { calcViewBoxSize } from './lib/view-box';
+export { createElement, insertElementToListByPosition, deleteElementInListByPosition, deleteElementInList, moveElementPosition, updateElementInList } from './lib/handle-element';

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

@@ -9,7 +9,11 @@ export declare function createContext2D(opts: {
 export declare function createOffscreenContext2D(opts: {
     width: number;
     height: number;
-}): CanvasRenderingContext2D | OffscreenRenderingContext;
-export declare function createBoardContexts(ctx: CanvasRenderingContext2D, opts?: {
     devicePixelRatio: number;
+}): Context2D;
+export declare function createViewContent(canvas: HTMLCanvasElement, opts: {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+    offscreen?: boolean;
 }): ViewContent;

package/dist/esm/lib/canvas.js

@@ -12,27 +12,70 @@ export function createContext2D(opts) {
     return context2d;
 }
 export function createOffscreenContext2D(opts) {
-    const { width, height } = opts;
-    const offCanvas = new OffscreenCanvas(width, height);
+    const { width, height, devicePixelRatio } = opts;
+    const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
     const offRenderCtx = offCanvas.getContext('2d');
     const offCtx = offRenderCtx.canvas.getContext('2d');
-    return offCtx;
+    const context2d = new Context2D(offCtx, {
+        devicePixelRatio,
+        offscreenCanvas: offCanvas
+    });
+    return context2d;
 }
-export function createBoardContexts(ctx, opts) {
+export function createViewContent(canvas, opts) {
+    const { width, height, devicePixelRatio, offscreen } = opts;
     const ctxOpts = {
-        width: ctx.canvas.width,
-        height: ctx.canvas.height,
-        devicePixelRatio: (opts === null || opts === void 0 ? void 0 : opts.devicePixelRatio) || 1
-    };
-    const viewContext = createContext2D(ctxOpts);
-    const helperContext = createContext2D(ctxOpts);
-    const underContext = createContext2D(ctxOpts);
-    const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
-    const content = {
-        underContext,
-        viewContext,
-        helperContext,
-        boardContext
+        width,
+        height,
+        devicePixelRatio
     };
-    return content;
+    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;
+    }
 }

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

@@ -1,2 +1,14 @@
-import type { DefaultElementDetailConfig } from '@idraw/types';
+import type { ViewScaleInfo, DefaultElementDetailConfig, ElementRectDetail, ElementCircleDetail, ElementTextDetail, ElementSVGDetail, ElementImageDetail, ElementGroupDetail } from '@idraw/types';
 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 getDefaultElementSVGDetail(): ElementSVGDetail;
+export declare function getDefaultElementImageDetail(): ElementImageDetail;
+export declare function getDefaultElementGroupDetail(opts?: {
+    viewScaleInfo: ViewScaleInfo;
+}): ElementGroupDetail;

package/dist/esm/lib/config.js

@@ -1,6 +1,6 @@
 export function getDefaultElementDetailConfig() {
     const config = {
-        boxSizing: 'center-line',
+        boxSizing: 'border-box',
         borderWidth: 0,
         borderColor: '#000000',
         shadowColor: '#000000',
@@ -16,7 +16,57 @@ export function getDefaultElementDetailConfig() {
         fontSize: 16,
         lineHeight: 20,
         fontFamily: 'sans-serif',
-        fontWeight: 400
+        fontWeight: 400,
+        overflow: 'hidden'
     };
     return config;
 }
+export function getDefaultElementRectDetail() {
+    const detail = {
+        background: '#D9D9D9'
+    };
+    return detail;
+}
+export function getDefaultElementCircleDetail(opts) {
+    const detail = {
+        background: '#D9D9D9',
+        radius: 0
+    };
+    return detail;
+}
+export function getDefaultElementTextDetail(opts) {
+    var _a;
+    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',
+        color: detailConfig.color,
+        fontFamily: detailConfig.fontFamily,
+        fontWeight: detailConfig.fontWeight,
+        lineHeight: detailConfig.fontSize * scale,
+        fontSize: detailConfig.fontSize * scale,
+        textAlign: 'center',
+        verticalAlign: 'middle'
+    };
+    return detail;
+}
+export function getDefaultElementSVGDetail() {
+    const detail = {
+        svg: '<svg t="1701004189871" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"   width="200" height="200"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"   fill="#2c2c2c"></path></svg>'
+    };
+    return detail;
+}
+export function getDefaultElementImageDetail() {
+    const detail = {
+        src: 'data:image/svg+xml;base64,PHN2ZyAgIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik05MjggMTYwSDk2Yy0xNy43IDAtMzIgMTQuMy0zMiAzMnY2NDBjMCAxNy43IDE0LjMgMzIgMzIgMzJoODMyYzE3LjcgMCAzMi0xNC4zIDMyLTMyVjE5MmMwLTE3LjctMTQuMy0zMi0zMi0zMnogbS00MCA2MzJIMTM2di0zOS45bDEzOC41LTE2NC4zIDE1MC4xIDE3OEw2NTguMSA0ODkgODg4IDc2MS42Vjc5MnogbTAtMTI5LjhMNjY0LjIgMzk2LjhjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDQyNC42IDY2Ni40bC0xNDQtMTcwLjdjLTMuMi0zLjgtOS0zLjgtMTIuMiAwTDEzNiA2NTIuN1YyMzJoNzUydjQzMC4yeiIgIGZpbGw9IiM1MTUxNTEiPjwvcGF0aD48cGF0aCBkPSJNMzA0IDQ1NmM0OC42IDAgODgtMzkuNCA4OC04OHMtMzkuNC04OC04OC04OC04OCAzOS40LTg4IDg4IDM5LjQgODggODggODh6IG0wLTExNmMxNS41IDAgMjggMTIuNSAyOCAyOHMtMTIuNSAyOC0yOCAyOC0yOC0xMi41LTI4LTI4IDEyLjUtMjggMjgtMjh6IiAgZmlsbD0iIzUxNTE1MSI+PC9wYXRoPjwvc3ZnPg=='
+    };
+    return detail;
+}
+export function getDefaultElementGroupDetail(opts) {
+    const detail = {
+        children: [],
+        background: '#D9D9D9',
+        overflow: 'hidden'
+    };
+    return detail;
+}

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

@@ -1,8 +1,7 @@
 import type { ViewContext2D, ViewContext2DOptions } from '@idraw/types';
 export declare class Context2D implements ViewContext2D {
-    private _ctx;
-    private _devicePixelRatio;
-    constructor(ctx: CanvasRenderingContext2D, opts: ViewContext2DOptions);
+    #private;
+    constructor(ctx: CanvasRenderingContext2D | OffscreenRenderingContext, opts: ViewContext2DOptions);
     $undoPixelRatio(num: number): number;
     $doPixelRatio(num: number): number;
     $getContext(): CanvasRenderingContext2D;
@@ -11,11 +10,18 @@ export declare class Context2D implements ViewContext2D {
         fontFamily?: string;
         fontWeight?: 'bold' | number | string;
     }): void;
+    $getOffscreenCanvas(): OffscreenCanvas | null;
     $resize(opts: {
         width: number;
         height: number;
         devicePixelRatio: number;
+        resetStyle?: boolean;
     }): void;
+    $getSize(): {
+        width: number;
+        height: number;
+        devicePixelRatio: number;
+    };
     get canvas(): HTMLCanvasElement;
     get fillStyle(): string | CanvasGradient | CanvasPattern;
     set fillStyle(value: string | CanvasGradient | CanvasPattern);

package/dist/esm/lib/context2d.js

@@ -1,18 +1,30 @@
+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 _Context2D_ctx, _Context2D_opts;
 export class Context2D {
     constructor(ctx, opts) {
-        this._devicePixelRatio = 1;
-        const { devicePixelRatio = 1 } = opts;
-        this._ctx = ctx;
-        this._devicePixelRatio = devicePixelRatio;
+        _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");
     }
     $undoPixelRatio(num) {
-        return num / this._devicePixelRatio;
+        return num / __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio;
     }
     $doPixelRatio(num) {
-        return this._devicePixelRatio * num;
+        return __classPrivateFieldGet(this, _Context2D_opts, "f").devicePixelRatio * num;
     }
     $getContext() {
-        return this._ctx;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f");
     }
     $setFont(opts) {
         const strList = [];
@@ -21,135 +33,153 @@ export class Context2D {
         }
         strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
         strList.push(`${opts.fontFamily || 'sans-serif'}`);
-        this._ctx.font = `${strList.join(' ')}`;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").font = `${strList.join(' ')}`;
+    }
+    $getOffscreenCanvas() {
+        return __classPrivateFieldGet(this, _Context2D_opts, "f").offscreenCanvas;
     }
     $resize(opts) {
-        const { width, height, devicePixelRatio } = opts;
-        const { canvas } = this._ctx;
+        const { width, height, devicePixelRatio, resetStyle } = opts;
+        const { canvas } = __classPrivateFieldGet(this, _Context2D_ctx, "f");
         canvas.width = width * devicePixelRatio;
         canvas.height = height * devicePixelRatio;
-        this._devicePixelRatio = devicePixelRatio;
+        __classPrivateFieldSet(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _Context2D_opts, "f")), {
+            devicePixelRatio
+        }), "f");
+        if (resetStyle === true) {
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+        }
+    }
+    $getSize() {
+        const { devicePixelRatio } = __classPrivateFieldGet(this, _Context2D_opts, "f");
+        const { width, height } = __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
+        return {
+            width: width / devicePixelRatio,
+            height: height / devicePixelRatio,
+            devicePixelRatio
+        };
     }
     get canvas() {
-        return this._ctx.canvas;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").canvas;
     }
     get fillStyle() {
-        return this._ctx.fillStyle;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle;
     }
     set fillStyle(value) {
-        this._ctx.fillStyle = value;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").fillStyle = value;
     }
     get strokeStyle() {
-        return this._ctx.strokeStyle;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle;
     }
     set strokeStyle(color) {
-        this._ctx.strokeStyle = color;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeStyle = color;
     }
     get lineWidth() {
-        return this.$undoPixelRatio(this._ctx.lineWidth);
+        return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth);
     }
     set lineWidth(w) {
-        this._ctx.lineWidth = this.$doPixelRatio(w);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").lineWidth = this.$doPixelRatio(w);
     }
     get textAlign() {
-        return this._ctx.textAlign;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign;
     }
     set textAlign(align) {
-        this._ctx.textAlign = align;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").textAlign = align;
     }
     get textBaseline() {
-        return this._ctx.textBaseline;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline;
     }
     set textBaseline(baseline) {
-        this._ctx.textBaseline = baseline;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").textBaseline = baseline;
     }
     get globalAlpha() {
-        return this._ctx.globalAlpha;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha;
     }
     set globalAlpha(alpha) {
-        this._ctx.globalAlpha = alpha;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").globalAlpha = alpha;
     }
     get shadowColor() {
-        return this._ctx.shadowColor;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor;
     }
     set shadowColor(color) {
-        this._ctx.shadowColor = color;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowColor = color;
     }
     get shadowOffsetX() {
-        return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+        return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX);
     }
     set shadowOffsetX(offsetX) {
-        this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetX = this.$doPixelRatio(offsetX);
     }
     get shadowOffsetY() {
-        return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+        return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY);
     }
     set shadowOffsetY(offsetY) {
-        this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowOffsetY = this.$doPixelRatio(offsetY);
     }
     get shadowBlur() {
-        return this.$undoPixelRatio(this._ctx.shadowBlur);
+        return this.$undoPixelRatio(__classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur);
     }
     set shadowBlur(blur) {
-        this._ctx.shadowBlur = this.$doPixelRatio(blur);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").shadowBlur = this.$doPixelRatio(blur);
     }
     get lineCap() {
-        return this._ctx.lineCap;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap;
     }
     set lineCap(lineCap) {
-        this._ctx.lineCap = lineCap;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
     get globalCompositeOperation() {
-        return this._ctx.globalCompositeOperation;
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
-        this._ctx.globalCompositeOperation = operations;
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
     fill(...args) {
-        return this._ctx.fill(...args);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fill(...args);
     }
     arc(x, y, radius, startAngle, endAngle, anticlockwise) {
-        return this._ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
     }
     rect(x, y, w, h) {
-        return this._ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
     }
     fillRect(x, y, w, h) {
-        return this._ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
     }
     clearRect(x, y, w, h) {
-        return this._ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
     }
     beginPath() {
-        return this._ctx.beginPath();
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").beginPath();
     }
     closePath() {
-        return this._ctx.closePath();
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").closePath();
     }
     lineTo(x, y) {
-        return this._ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
     moveTo(x, y) {
-        return this._ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
     arcTo(x1, y1, x2, y2, radius) {
-        return this._ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
     }
     getLineDash() {
-        return this._ctx.getLineDash();
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").getLineDash();
     }
     setLineDash(nums) {
         const dash = nums.map((n) => this.$doPixelRatio(n));
-        return this._ctx.setLineDash(dash);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").setLineDash(dash);
     }
     stroke(path) {
-        return path ? this._ctx.stroke(path) : this._ctx.stroke();
+        return path ? __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke(path) : __classPrivateFieldGet(this, _Context2D_ctx, "f").stroke();
     }
     translate(x, y) {
-        return this._ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
     rotate(angle) {
-        return this._ctx.rotate(angle);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").rotate(angle);
     }
     drawImage(...args) {
         const image = args[0];
@@ -162,66 +192,67 @@ export class Context2D {
         const dw = args[args.length - 2];
         const dh = args[args.length - 1];
         if (args.length === 9) {
-            return this._ctx.drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(sx), this.$doPixelRatio(sy), this.$doPixelRatio(sw), this.$doPixelRatio(sh), this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
         }
         else {
-            return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
         }
     }
     createPattern(image, repetition) {
-        return this._ctx.createPattern(image, repetition);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").createPattern(image, repetition);
     }
     measureText(text) {
-        const textMetrics = this._ctx.measureText(text);
+        const textMetrics = __classPrivateFieldGet(this, _Context2D_ctx, "f").measureText(text);
         return textMetrics;
     }
     fillText(text, x, y, maxWidth) {
         if (maxWidth !== undefined) {
-            return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
         }
         else {
-            return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
         }
     }
     strokeText(text, x, y, maxWidth) {
         if (maxWidth !== undefined) {
-            return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
         }
         else {
-            return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+            return __classPrivateFieldGet(this, _Context2D_ctx, "f").strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
         }
     }
     save() {
-        this._ctx.save();
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").save();
     }
     restore() {
-        this._ctx.restore();
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").restore();
     }
     scale(ratioX, ratioY) {
-        this._ctx.scale(ratioX, ratioY);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").scale(ratioX, ratioY);
     }
     circle(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-        this._ctx.ellipse(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").ellipse(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radiusX), this.$doPixelRatio(radiusY), rotation, startAngle, endAngle, counterclockwise);
     }
     isPointInPath(x, y) {
-        return this._ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
     clip(...args) {
-        return this._ctx.clip(...args);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").clip(...args);
     }
     setTransform(a, b, c, d, e, f) {
-        return this._ctx.setTransform(a, b, c, d, e, f);
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);
     }
     getTransform() {
-        return this._ctx.getTransform();
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").getTransform();
     }
     createLinearGradient(x0, y0, x1, y1) {
-        return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
     }
     createRadialGradient(x0, y0, r0, x1, y1, r1) {
-        return this._ctx.createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").createRadialGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(r0), this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(r1));
     }
     createConicGradient(startAngle, x, y) {
-        return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
 }
+_Context2D_ctx = new WeakMap(), _Context2D_opts = new WeakMap();

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

@@ -1,4 +1,4 @@
-import type { Data, Element, Elements, ElementType, ElementSize, ViewContextSize, ViewSizeInfo, RecursivePartial, ElementAssets, ElementAssetsItem, LoadElementType } from '@idraw/types';
+import type { Data, Element, Elements, ElementType, ElementSize, ViewContextSize, ViewSizeInfo, ElementAssets, ElementAssetsItem, LoadElementType, ElementPosition } from '@idraw/types';
 export declare function getSelectedElementUUIDs(data: Data, indexes: Array<number | string>): string[];
 export declare function validateElements(elements: Array<Element<ElementType>>): boolean;
 export declare function calcElementsContextSize(elements: Array<Element<ElementType>>, opts?: {
@@ -15,7 +15,6 @@ export declare function getElemenetsAssetIds(elements: Elements): string[];
 export declare function findElementFromList(uuid: string, list: Element<ElementType>[]): Element<ElementType> | null;
 export declare function findElementsFromList(uuids: string[], list: Element<ElementType>[]): Element<ElementType>[];
 export declare function getGroupQueueFromList(uuid: string, elements: Element<ElementType>[]): Element<'group'>[];
-export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element[]): Element | null;
 export declare function getElementSize(elem: Element): ElementSize;
 export declare function mergeElementAsset<T extends Element<LoadElementType>>(element: T, assets: ElementAssets): T;
 export declare function filterElementAsset<T extends Element<LoadElementType>>(element: T): {
@@ -24,3 +23,6 @@ export declare function filterElementAsset<T extends Element<LoadElementType>>(e
     assetItem: ElementAssetsItem | null;
 };
 export declare function isResourceElement(elem: Element): boolean;
+export declare function findElementsFromListByPositions(positions: ElementPosition[], list: Element[]): Element[];
+export declare function findElementFromListByPosition(position: ElementPosition, list: Element[]): Element | null;
+export declare function getElementPositionFromList(uuid: string, elements: Element<ElementType>[]): ElementPosition;