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

package/dist/esm/{lib → tool}/time.js

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

package/dist/esm/tool/unflat-object.d.ts

@@ -0,0 +1,3 @@
+type NestedStructure = object | unknown[];
+export declare function unflatObject<T extends Record<string, unknown>>(flatObj: T): NestedStructure;
+export {};

package/dist/esm/tool/unflat-object.js

@@ -0,0 +1,91 @@
+export function unflatObject(flatObj) {
+    const result = {};
+    for (const [flatKey, value] of Object.entries(flatObj)) {
+        const pathParts = parseKeyToPath(flatKey);
+        buildNestedStructure(result, pathParts, value);
+    }
+    return result;
+}
+function parseKeyToPath(flatKey) {
+    const regex = /([\w-]+)|\[(\d+)\]/g;
+    const pathParts = [];
+    let match;
+    while ((match = regex.exec(flatKey)) !== null) {
+        const prop = match[1] || match[2];
+        if (prop) {
+            pathParts.push(prop);
+        }
+    }
+    return pathParts;
+}
+function buildNestedStructure(currentObj, pathParts, value) {
+    let currentLevel = currentObj;
+    for (let i = 0; i < pathParts.length; i++) {
+        const part = pathParts[i];
+        const isArrayPart = isArrayIndex(part);
+        const isLast = i === pathParts.length - 1;
+        try {
+            if (isArrayPart) {
+                validateArrayPath(currentLevel, part);
+            }
+            else {
+                validateObjectPath(currentLevel, part);
+            }
+        }
+        catch (e) {
+            throw new Error(`Structure conflict at path '${pathParts.slice(0, i + 1).join('.')}': ${e.message}`);
+        }
+        if (isLast) {
+            assignValue(currentLevel, part, value);
+        }
+        else {
+            currentLevel = prepareNextLevel(currentLevel, part, pathParts[i + 1]);
+        }
+    }
+}
+function isArrayIndex(key) {
+    return /^\d+$/.test(key);
+}
+function validateArrayPath(obj, index) {
+    if (!Array.isArray(obj)) {
+        throw new Error(`Expected array but found ${typeof obj}`);
+    }
+    const idx = Number(index);
+    if (idx > obj.length) {
+        obj.length = idx + 1;
+    }
+}
+function validateObjectPath(obj, key) {
+    if (Array.isArray(obj)) {
+        throw new Error(`Cannot create object property '${key}' on array`);
+    }
+    if (typeof obj !== 'object' || obj === null) {
+        throw new Error(`Invalid structure for property '${key}'`);
+    }
+}
+function prepareNextLevel(current, part, nextPart) {
+    const isNextArray = nextPart ? isArrayIndex(nextPart) : false;
+    if (Array.isArray(current)) {
+        const index = Number(part);
+        if (!current[index]) {
+            current[index] = isNextArray ? [] : {};
+        }
+        return current[index];
+    }
+    if (!current[part]) {
+        current[part] = isNextArray ? [] : {};
+    }
+    return current[part];
+}
+function assignValue(target, key, value) {
+    if (Array.isArray(target)) {
+        const index = Number(key);
+        if (index >= target.length) {
+            target.length = index + 1;
+        }
+        target[index] = value;
+    }
+    else {
+        target[key] = value;
+    }
+}

package/dist/esm/tool/uuid.js

@@ -0,0 +1,13 @@
+import { generate32Base36Hash } from './hash';
+export function createUUID() {
+    function _createStr() {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+    return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
+}
+export function createAssetId(assetStr) {
+    return `@assets/${generate32Base36Hash(assetStr)}`;
+}
+export function isAssetId(id) {
+    return /^@assets\/[0-9a-z-]{0,}$/.test(`${id}`);
+}

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

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

package/dist/esm/view/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 → view}/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/view/canvas.js

@@ -0,0 +1,57 @@
+import { Context2D } from './context2d';
+export function createContext2D(opts) {
+    const { width, height, ctx, devicePixelRatio } = opts;
+    let context = ctx;
+    if (!context) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width * devicePixelRatio;
+        canvas.height = height * devicePixelRatio;
+        context = canvas.getContext('2d');
+    }
+    const context2d = new Context2D(context, opts);
+    return context2d;
+}
+export function createOffscreenContext2D(opts) {
+    const { width, height, devicePixelRatio } = opts;
+    const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
+    const offRenderCtx = offCanvas.getContext('2d');
+    const offCtx = offRenderCtx.canvas.getContext('2d');
+    const context2d = new Context2D(offCtx, {
+        devicePixelRatio,
+        offscreenCanvas: offCanvas
+    });
+    return context2d;
+}
+export function createBoardContent(canvas, opts) {
+    const { width, height, devicePixelRatio } = opts;
+    const ctxOpts = {
+        width,
+        height,
+        devicePixelRatio
+    };
+    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 → view}/check.js

@@ -11,20 +11,20 @@ function attrs(attrs) {
 }
 function box(detail = {}) {
     const { borderColor, borderRadius, borderWidth } = detail;
-    if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (detail.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'borderRadius') && !is.number(borderRadius)) {
         return false;
     }
-    if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
 }
 function rectDesc(detail) {
     const { background } = detail;
-    if (detail.hasOwnProperty('background') && !is.color(background)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
         return false;
     }
     if (!box(detail)) {
@@ -34,13 +34,13 @@ function rectDesc(detail) {
 }
 function circleDesc(detail) {
     const { background, borderColor, borderWidth } = detail;
-    if (detail.hasOwnProperty('background') && !is.color(background)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
         return false;
     }
-    if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
@@ -77,25 +77,25 @@ function textDesc(detail) {
     if (!is.fontSize(fontSize)) {
         return false;
     }
-    if (detail.hasOwnProperty('background') && !is.color(background)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
         return false;
     }
-    if (detail.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'fontWeight') && !is.fontWeight(fontWeight)) {
         return false;
     }
-    if (detail.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'lineHeight') && !is.lineHeight(lineHeight)) {
         return false;
     }
-    if (detail.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'fontFamily') && !is.fontFamily(fontFamily)) {
         return false;
     }
-    if (detail.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'textAlign') && !is.textAlign(textAlign)) {
         return false;
     }
-    if (detail.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'strokeWidth') && !is.strokeWidth(strokeWidth)) {
         return false;
     }
-    if (detail.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
+    if (Object.prototype.hasOwnProperty.call(detail, 'strokeColor') && !is.color(strokeColor)) {
         return false;
     }
     if (!box(detail)) {

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

@@ -0,0 +1,9 @@
+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(): ElementCircleDetail;
+export declare function getDefaultElementTextDetail(elementSize: ElementSize): ElementTextDetail;
+export declare function getDefaultElementSVGDetail(): ElementSVGDetail;
+export declare function getDefaultElementImageDetail(): ElementImageDetail;
+export declare function getDefaultElementGroupDetail(): ElementGroupDetail;

package/dist/esm/{lib → view}/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 → view}/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 → view}/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/view/controller.d.ts

@@ -0,0 +1,12 @@
+import type { Element, ElementSize, ElementSizeController, ViewScaleInfo, LayoutSizeController } from '@idraw/types';
+export declare function calcElementSizeController(elemSize: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+    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;