@idraw/util 0.4.2 → 1.0.0-alpha.1

package/dist/esm/view/box.js

@@ -1,173 +1 @@
-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
-    };
-}
+"use strict";

package/dist/esm/view/canvas.js

@@ -18,7 +18,7 @@ export function createOffscreenContext2D(opts) {
     const offCtx = offRenderCtx.canvas.getContext('2d');
     const context2d = new Context2D(offCtx, {
         devicePixelRatio,
-        offscreenCanvas: offCanvas
+        offscreenCanvas: offCanvas,
     });
     return context2d;
 }
@@ -27,7 +27,7 @@ export function createBoardContent(canvas, opts) {
     const ctxOpts = {
         width,
         height,
-        devicePixelRatio
+        devicePixelRatio,
     };
     const ctx = canvas.getContext('2d');
     const viewContext = createOffscreenContext2D(ctxOpts);
@@ -51,7 +51,7 @@ export function createBoardContent(canvas, opts) {
         overlayContext,
         boardContext,
         tempContext,
-        drawView
+        drawView,
     };
     return content;
 }

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

@@ -1,10 +1,11 @@
-declare function attrs(attrs: any): boolean;
-declare function rectDesc(detail: any): boolean;
-declare function circleDesc(detail: any): boolean;
-declare function imageDesc(detail: any): boolean;
-declare function svgDesc(detail: any): boolean;
-declare function htmlDesc(detail: any): boolean;
-declare function textDesc(detail: any): boolean;
+import { MaterialSize } from '@idraw/types';
+declare function attrs(attrs: MaterialSize): boolean;
+declare function rectDesc(attributes: any): boolean;
+declare function circleDesc(attributes: any): boolean;
+declare function imageDesc(attributes: any): boolean;
+declare function svgDesc(attributes: any): boolean;
+declare function htmlDesc(attributes: any): boolean;
+declare function textDesc(attributes: any): boolean;
 export declare const check: {
     attrs: typeof attrs;
     textDesc: typeof textDesc;

package/dist/esm/view/check.js

@@ -1,7 +1,7 @@
 import { is } from './is';
 function attrs(attrs) {
-    const { x, y, w, h, angle } = attrs;
-    if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
+    const { x, y, width, height, angle = 0 } = attrs;
+    if (!(is.x(x) && is.y(y) && is.width(width) && is.height(height) && is.angle(angle))) {
         return false;
     }
     if (!(angle >= -360 && angle <= 360)) {
@@ -9,65 +9,65 @@ function attrs(attrs) {
     }
     return true;
 }
-function box(detail = {}) {
-    const { borderColor, borderRadius, borderWidth } = detail;
-    if (Object.prototype.hasOwnProperty.call(detail, 'borderColor') && !is.color(borderColor)) {
+function box(attributes = {}) {
+    const { stroke, cornerRadius, strokeWidth } = attributes;
+    if (Object.prototype.hasOwnProperty.call(attributes, 'stroke') && !is.color(stroke)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'borderRadius') && !is.number(borderRadius)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'cornerRadius') && !is.number(cornerRadius)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'borderWidth') && !is.number(borderWidth)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'strokeWidth') && !is.number(strokeWidth)) {
         return false;
     }
     return true;
 }
-function rectDesc(detail) {
-    const { background } = detail;
-    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
+function rectDesc(attributes) {
+    const { background } = attributes;
+    if (Object.prototype.hasOwnProperty.call(attributes, 'background') && !is.color(background)) {
         return false;
     }
-    if (!box(detail)) {
+    if (!box(attributes)) {
         return false;
     }
     return true;
 }
-function circleDesc(detail) {
-    const { background, borderColor, borderWidth } = detail;
-    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
+function circleDesc(attributes) {
+    const { background, stroke, strokeWidth } = attributes;
+    if (Object.prototype.hasOwnProperty.call(attributes, 'background') && !is.color(background)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'borderColor') && !is.color(borderColor)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'stroke') && !is.color(stroke)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'borderWidth') && !is.number(borderWidth)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'strokeWidth') && !is.number(strokeWidth)) {
         return false;
     }
     return true;
 }
-function imageDesc(detail) {
-    const { src } = detail;
-    if (!is.imageSrc(src)) {
+function imageDesc(attributes) {
+    const { href } = attributes;
+    if (!is.imageSrc(href)) {
         return false;
     }
     return true;
 }
-function svgDesc(detail) {
-    const { svg } = detail;
+function svgDesc(attributes) {
+    const { svg } = attributes;
     if (!is.svg(svg)) {
         return false;
     }
     return true;
 }
-function htmlDesc(detail) {
-    const { html } = detail;
+function htmlDesc(attributes) {
+    const { html } = attributes;
     if (!is.html(html)) {
         return false;
     }
     return true;
 }
-function textDesc(detail) {
-    const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, background, strokeWidth, strokeColor } = detail;
+function textDesc(attributes) {
+    const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, background, strokeWidth, strokeColor } = attributes;
     if (!is.text(text)) {
         return false;
     }
@@ -77,28 +77,28 @@ function textDesc(detail) {
     if (!is.fontSize(fontSize)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'background') && !is.color(background)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'background') && !is.color(background)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'fontWeight') && !is.fontWeight(fontWeight)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'fontWeight') && !is.fontWeight(fontWeight)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'lineHeight') && !is.lineHeight(lineHeight)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'lineHeight') && !is.lineHeight(lineHeight)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'fontFamily') && !is.fontFamily(fontFamily)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'fontFamily') && !is.fontFamily(fontFamily)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'textAlign') && !is.textAlign(textAlign)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'textAlign') && !is.textAlign(textAlign)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'strokeWidth') && !is.strokeWidth(strokeWidth)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'strokeWidth') && !is.strokeWidth(strokeWidth)) {
         return false;
     }
-    if (Object.prototype.hasOwnProperty.call(detail, 'strokeColor') && !is.color(strokeColor)) {
+    if (Object.prototype.hasOwnProperty.call(attributes, 'strokeColor') && !is.color(strokeColor)) {
         return false;
     }
-    if (!box(detail)) {
+    if (!box(attributes)) {
         return false;
     }
     return true;
@@ -110,5 +110,5 @@ export const check = {
     circleDesc,
     imageDesc,
     svgDesc,
-    htmlDesc
+    htmlDesc,
 };

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

@@ -1,9 +0,0 @@
-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/view/config.js

@@ -1,71 +1 @@
-export const defaultText = 'Text Element';
-export function getDefaultElementDetailConfig() {
-    const config = {
-        boxSizing: 'border-box',
-        borderWidth: 0,
-        borderColor: '#000000',
-        shadowColor: '#000000',
-        borderRadius: 0,
-        borderDash: [],
-        shadowOffsetX: 0,
-        shadowOffsetY: 0,
-        shadowBlur: 0,
-        opacity: 1,
-        color: '#000000',
-        textAlign: 'left',
-        verticalAlign: 'top',
-        fontSize: 16,
-        fontFamily: 'sans-serif',
-        fontWeight: 400,
-        minInlineSize: 'auto',
-        wordBreak: 'break-all',
-        overflow: 'hidden'
-    };
-    return config;
-}
-export function getDefaultElementRectDetail() {
-    const detail = {
-        background: '#D9D9D9'
-    };
-    return detail;
-}
-export function getDefaultElementCircleDetail() {
-    const detail = {
-        background: '#D9D9D9',
-        radius: 0
-    };
-    return detail;
-}
-export function getDefaultElementTextDetail(elementSize) {
-    const detailConfig = getDefaultElementDetailConfig();
-    const detail = {
-        text: defaultText,
-        color: detailConfig.color,
-        fontFamily: detailConfig.fontFamily,
-        fontWeight: detailConfig.fontWeight,
-        fontSize: elementSize.w / defaultText.length,
-        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() {
-    const detail = {
-        children: [],
-        background: '#D9D9D9',
-        overflow: 'hidden'
-    };
-    return detail;
-}
+"use strict";

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

@@ -47,9 +47,15 @@ export declare class Context2D implements ViewContext2D {
     set shadowBlur(blur: number);
     get lineCap(): CanvasLineCap;
     set lineCap(lineCap: CanvasLineCap);
+    get lineJoin(): CanvasLineJoin;
+    set lineJoin(lineJoin: CanvasLineJoin);
+    get lineDashOffset(): number;
+    set lineDashOffset(lineDashOffset: number);
+    get miterLimit(): number;
+    set miterLimit(miterLimit: number);
     get globalCompositeOperation(): GlobalCompositeOperation;
     set globalCompositeOperation(operations: GlobalCompositeOperation);
-    fill(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
+    fill(...params: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void;
     rect(x: number, y: number, w: number, h: number): void;
     fillRect(x: number, y: number, w: number, h: number): void;
@@ -66,7 +72,7 @@ export declare class Context2D implements ViewContext2D {
     stroke(path?: Path2D): void;
     translate(x: number, y: number): void;
     rotate(angle: number): void;
-    drawImage(...args: any[]): void;
+    drawImage(...params: any[]): void;
     createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;
     measureText(text: string): TextMetrics;
     fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
@@ -75,8 +81,9 @@ export declare class Context2D implements ViewContext2D {
     restore(): void;
     scale(ratioX: number, ratioY: number): void;
     circle(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean | undefined): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
     isPointInPath(x: number, y: number): boolean;
-    clip(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
+    clip(...params: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
     setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
     getTransform(): DOMMatrix2DInit;
     createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;

package/dist/esm/view/context2d.js

@@ -46,7 +46,7 @@ export class Context2D {
         this.$setFont({
             fontSize: defaultFontSize,
             fontFamily: defaultFontFamily,
-            fontWeight: defaultFontWeight
+            fontWeight: defaultFontWeight,
         });
     }
     $getOffscreenCanvas() {
@@ -58,7 +58,7 @@ export class Context2D {
         canvas.width = width * devicePixelRatio;
         canvas.height = height * devicePixelRatio;
         __classPrivateFieldSet(this, _Context2D_opts, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _Context2D_opts, "f")), {
-            devicePixelRatio
+            devicePixelRatio,
         }), "f");
         if (resetStyle === true) {
             canvas.style.width = `${width}px`;
@@ -71,7 +71,7 @@ export class Context2D {
         return {
             width: width / devicePixelRatio,
             height: height / devicePixelRatio,
-            devicePixelRatio
+            devicePixelRatio,
         };
     }
     get canvas() {
@@ -143,14 +143,32 @@ export class Context2D {
     set lineCap(lineCap) {
         __classPrivateFieldGet(this, _Context2D_ctx, "f").lineCap = lineCap;
     }
+    get lineJoin() {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineJoin;
+    }
+    set lineJoin(lineJoin) {
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").lineJoin = lineJoin;
+    }
+    get lineDashOffset() {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").lineDashOffset;
+    }
+    set lineDashOffset(lineDashOffset) {
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").lineDashOffset = lineDashOffset;
+    }
+    get miterLimit() {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").miterLimit;
+    }
+    set miterLimit(miterLimit) {
+        __classPrivateFieldGet(this, _Context2D_ctx, "f").miterLimit = miterLimit;
+    }
     get globalCompositeOperation() {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation;
     }
     set globalCompositeOperation(operations) {
         __classPrivateFieldGet(this, _Context2D_ctx, "f").globalCompositeOperation = operations;
     }
-    fill(...args) {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fill(...args);
+    fill(...params) {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").fill(...params);
     }
     arc(x, y, radius, startAngle, endAngle, anticlockwise) {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
@@ -201,17 +219,17 @@ export class Context2D {
     rotate(angle) {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").rotate(angle);
     }
-    drawImage(...args) {
-        const image = args[0];
-        const sx = args[1];
-        const sy = args[2];
-        const sw = args[3];
-        const sh = args[4];
-        const dx = args[args.length - 4];
-        const dy = args[args.length - 3];
-        const dw = args[args.length - 2];
-        const dh = args[args.length - 1];
-        if (args.length === 9) {
+    drawImage(...params) {
+        const image = params[0];
+        const sx = params[1];
+        const sy = params[2];
+        const sw = params[3];
+        const sh = params[4];
+        const dx = params[params.length - 4];
+        const dy = params[params.length - 3];
+        const dw = params[params.length - 2];
+        const dh = params[params.length - 1];
+        if (params.length === 9) {
             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 {
@@ -253,11 +271,14 @@ export class Context2D {
     circle(x, y, radiusX, 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);
     }
+    ellipse(x, y, radiusX, 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 __classPrivateFieldGet(this, _Context2D_ctx, "f").isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
-    clip(...args) {
-        return __classPrivateFieldGet(this, _Context2D_ctx, "f").clip(...args);
+    clip(...params) {
+        return __classPrivateFieldGet(this, _Context2D_ctx, "f").clip(...params);
     }
     setTransform(a, b, c, d, e, f) {
         return __classPrivateFieldGet(this, _Context2D_ctx, "f").setTransform(a, b, c, d, e, f);

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

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