@idraw/util 0.4.0-beta.9 → 0.4.0

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/{lib → view}/config.js

@@ -15,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;
@@ -42,7 +43,6 @@ export function getDefaultElementTextDetail(elementSize) {
         color: detailConfig.color,
         fontFamily: detailConfig.fontFamily,
         fontWeight: detailConfig.fontWeight,
-        lineHeight: elementSize.w / defaultText.length,
         fontSize: elementSize.w / defaultText.length,
         textAlign: 'center',
         verticalAlign: 'middle'

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;