@idraw/core 0.2.0-alpha.9 → 0.3.0-0.3.0-beta.6.0

package/dist/esm/lib/diff.js

@@ -0,0 +1,82 @@
+export function isChangeImageElementResource(before, after) {
+    var _a, _b;
+    return ((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src);
+}
+export function isChangeSVGElementResource(before, after) {
+    var _a, _b;
+    return ((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg);
+}
+export function isChangeHTMLElementResource(before, after) {
+    var _a, _b, _c, _d, _e, _f;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html) ||
+        ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width) ||
+        ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
+}
+export function diffElementResourceChange(before, after) {
+    let result = null;
+    let isChange = false;
+    switch (after.type) {
+        case 'image': {
+            isChange = isChangeImageElementResource(before, after);
+            break;
+        }
+        case 'svg': {
+            isChange = isChangeSVGElementResource(before, after);
+            break;
+        }
+        case 'html': {
+            isChange = isChangeHTMLElementResource(before, after);
+            break;
+        }
+        default:
+            break;
+    }
+    if (isChange === true) {
+        result = after.uuid;
+    }
+    return result;
+}
+export function diffElementResourceChangeList(before, after) {
+    var _a;
+    const uuids = [];
+    const beforeMap = parseDataElementMap(before);
+    const afterMap = parseDataElementMap(after);
+    for (const uuid in afterMap) {
+        if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
+            continue;
+        }
+        if (beforeMap[uuid]) {
+            let isChange = false;
+            switch (beforeMap[uuid].type) {
+                case 'image': {
+                    isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'svg': {
+                    isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'html': {
+                    isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                default:
+                    break;
+            }
+            if (isChange === true) {
+                uuids.push(uuid);
+            }
+        }
+        else {
+            uuids.push(uuid);
+        }
+    }
+    return uuids;
+}
+function parseDataElementMap(data) {
+    const elemMap = {};
+    data.elements.forEach((elem) => {
+        elemMap[elem.uuid] = elem;
+    });
+    return elemMap;
+}

package/dist/esm/lib/draw/base.d.ts

@@ -0,0 +1,5 @@
+import { IDrawContext, DataElement } from '@idraw/types';
+export declare function clearContext(ctx: IDrawContext): void;
+export declare function drawBgColor(ctx: IDrawContext, color: string): void;
+export declare function drawBox(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
+export declare function drawBoxBorder(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>): void;

package/dist/esm/lib/draw/base.js

@@ -0,0 +1,90 @@
+import { istype, isColorStr } from '@idraw/util';
+import { rotateElement } from './../transform';
+import is from './../is';
+export function clearContext(ctx) {
+    ctx.setFillStyle('#000000');
+    ctx.setStrokeStyle('#000000');
+    ctx.setLineDash([]);
+    ctx.setGlobalAlpha(1);
+    ctx.setShadowColor('#00000000');
+    ctx.setShadowOffsetX(0);
+    ctx.setShadowOffsetY(0);
+    ctx.setShadowBlur(0);
+}
+export function drawBgColor(ctx, color) {
+    const size = ctx.getSize();
+    ctx.setFillStyle(color);
+    ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
+}
+export function drawBox(ctx, elem, pattern) {
+    clearContext(ctx);
+    drawBoxBorder(ctx, elem);
+    clearContext(ctx);
+    rotateElement(ctx, elem, () => {
+        const { x, y, w, h } = elem;
+        let r = elem.desc.borderRadius || 0;
+        r = Math.min(r, w / 2, h / 2);
+        if (w < r * 2 || h < r * 2) {
+            r = 0;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        if (typeof pattern === 'string') {
+            ctx.setFillStyle(pattern);
+        }
+        else if (['CanvasPattern'].includes(istype.type(pattern))) {
+            ctx.setFillStyle(pattern);
+        }
+        ctx.fill();
+    });
+}
+export function drawBoxBorder(ctx, elem) {
+    clearContext(ctx);
+    rotateElement(ctx, elem, () => {
+        if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
+            return;
+        }
+        const bw = elem.desc.borderWidth;
+        let borderColor = '#000000';
+        if (isColorStr(elem.desc.borderColor) === true) {
+            borderColor = elem.desc.borderColor;
+        }
+        const x = elem.x - bw / 2;
+        const y = elem.y - bw / 2;
+        const w = elem.w + bw;
+        const h = elem.h + bw;
+        let r = elem.desc.borderRadius || 0;
+        r = Math.min(r, w / 2, h / 2);
+        if (r < w / 2 && r < h / 2) {
+            r = r + bw / 2;
+        }
+        const { desc } = elem;
+        if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
+            ctx.setShadowColor(desc.shadowColor);
+        }
+        if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
+            ctx.setShadowOffsetX(desc.shadowOffsetX);
+        }
+        if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
+            ctx.setShadowOffsetY(desc.shadowOffsetY);
+        }
+        if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
+            ctx.setShadowBlur(desc.shadowBlur);
+        }
+        ctx.beginPath();
+        ctx.setLineWidth(bw);
+        ctx.setStrokeStyle(borderColor);
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        ctx.stroke();
+    });
+}

package/dist/esm/lib/draw/wrapper.d.ts

@@ -0,0 +1,4 @@
+import { IDrawContext, HelperConfig } from '@idraw/types';
+export declare function drawElementWrapper(ctx: IDrawContext, config: HelperConfig): void;
+export declare function drawAreaWrapper(ctx: IDrawContext, config: HelperConfig): void;
+export declare function drawElementListWrappers(ctx: IDrawContext, config: HelperConfig): void;

package/dist/esm/lib/draw/wrapper.js

@@ -0,0 +1,168 @@
+import { rotateContext } from './../transform';
+import { clearContext } from './base';
+export function drawElementWrapper(ctx, config) {
+    if (!(config === null || config === void 0 ? void 0 : config.selectedElementWrapper)) {
+        return;
+    }
+    const wrapper = config.selectedElementWrapper;
+    clearContext(ctx);
+    rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
+        ctx.beginPath();
+        ctx.setLineDash(wrapper.lineDash);
+        ctx.setLineWidth(wrapper.lineWidth);
+        ctx.setStrokeStyle(wrapper.color);
+        ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+        ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+        ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+        ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+        ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
+        ctx.stroke();
+        ctx.closePath();
+        if (wrapper.lock !== true) {
+            if (wrapper.controllers.rotate.invisible !== true) {
+                ctx.beginPath();
+                ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
+                ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
+                ctx.stroke();
+                ctx.closePath();
+                ctx.beginPath();
+                ctx.setLineDash([]);
+                ctx.setLineWidth(wrapper.controllerSize / 1.2);
+                ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.closePath();
+                ctx.setStrokeStyle('#FFFFFF');
+                ctx.beginPath();
+                ctx.setLineDash([]);
+                ctx.setLineWidth(wrapper.controllerSize / 2.1);
+                ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.closePath();
+            }
+            [
+                wrapper.controllers.topLeft,
+                wrapper.controllers.top,
+                wrapper.controllers.topRight,
+                wrapper.controllers.right,
+                wrapper.controllers.bottomRight,
+                wrapper.controllers.bottom,
+                wrapper.controllers.bottomLeft,
+                wrapper.controllers.left
+            ].forEach((controller) => {
+                if (controller.invisible !== true) {
+                    ctx.setFillStyle(wrapper.color);
+                    ctx.beginPath();
+                    ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.closePath();
+                    ctx.setFillStyle('#FFFFFF');
+                    ctx.beginPath();
+                    ctx.arc(controller.x, controller.y, wrapper.controllerSize - 1, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.closePath();
+                }
+            });
+        }
+        else {
+            clearContext(ctx);
+            ctx.setStrokeStyle(wrapper.color);
+            [
+                wrapper.controllers.topLeft,
+                wrapper.controllers.top,
+                wrapper.controllers.topRight,
+                wrapper.controllers.right,
+                wrapper.controllers.bottomRight,
+                wrapper.controllers.bottom,
+                wrapper.controllers.bottomLeft,
+                wrapper.controllers.left
+            ].forEach((controller) => {
+                ctx.beginPath();
+                ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                ctx.stroke();
+                ctx.closePath();
+                ctx.beginPath();
+                ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                ctx.stroke();
+                ctx.closePath();
+            });
+        }
+    });
+}
+export function drawAreaWrapper(ctx, config) {
+    if (!(config === null || config === void 0 ? void 0 : config.selectedAreaWrapper)) {
+        return;
+    }
+    const wrapper = config.selectedAreaWrapper;
+    if (wrapper && wrapper.w > 0 && wrapper.h > 0) {
+        clearContext(ctx);
+        ctx.setGlobalAlpha(0.3);
+        ctx.setFillStyle(wrapper.color);
+        ctx.fillRect(wrapper.x, wrapper.y, wrapper.w, wrapper.h);
+        clearContext(ctx);
+        ctx.beginPath();
+        ctx.setLineDash(wrapper.lineDash);
+        ctx.setLineWidth(wrapper.lineWidth);
+        ctx.setStrokeStyle(wrapper.color);
+        ctx.moveTo(wrapper.x, wrapper.y);
+        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y);
+        ctx.lineTo(wrapper.x + wrapper.w, wrapper.y + wrapper.h);
+        ctx.lineTo(wrapper.x, wrapper.y + wrapper.h);
+        ctx.lineTo(wrapper.x, wrapper.y);
+        ctx.stroke();
+        ctx.closePath();
+    }
+}
+export function drawElementListWrappers(ctx, config) {
+    if (!Array.isArray(config === null || config === void 0 ? void 0 : config.selectedElementListWrappers)) {
+        return;
+    }
+    const wrapperList = config.selectedElementListWrappers;
+    wrapperList === null || wrapperList === void 0 ? void 0 : wrapperList.forEach((wrapper) => {
+        clearContext(ctx);
+        rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
+            clearContext(ctx);
+            ctx.setGlobalAlpha(0.05);
+            ctx.setFillStyle(wrapper.color);
+            ctx.fillRect(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y);
+            clearContext(ctx);
+            ctx.beginPath();
+            ctx.setLineDash(wrapper.lineDash);
+            ctx.setLineWidth(wrapper.lineWidth);
+            ctx.setStrokeStyle(wrapper.color);
+            ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+            ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+            ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+            ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+            ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
+            ctx.stroke();
+            ctx.closePath();
+            if (wrapper.lock === true) {
+                clearContext(ctx);
+                ctx.setStrokeStyle(wrapper.color);
+                [
+                    wrapper.controllers.topLeft,
+                    wrapper.controllers.top,
+                    wrapper.controllers.topRight,
+                    wrapper.controllers.right,
+                    wrapper.controllers.bottomRight,
+                    wrapper.controllers.bottom,
+                    wrapper.controllers.bottomLeft,
+                    wrapper.controllers.left
+                ].forEach((controller) => {
+                    ctx.beginPath();
+                    ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                    ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                    ctx.stroke();
+                    ctx.closePath();
+                    ctx.beginPath();
+                    ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+                    ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
+                    ctx.stroke();
+                    ctx.closePath();
+                });
+            }
+        });
+    });
+}

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

@@ -0,0 +1,15 @@
+import { IDrawContext, Point, IDrawData, HelperWrapperControllerDirection, DataElement, DataElemDesc } from '@idraw/types';
+export declare class Element {
+    private _ctx;
+    constructor(ctx: IDrawContext);
+    initData(data: IDrawData): IDrawData;
+    isPointInElement(p: Point, data: IDrawData): [number, string | null];
+    dragElement(data: IDrawData, uuid: string, point: Point, prevPoint: Point, scale: number): void;
+    transformElement(data: IDrawData, uuid: string, point: Point, prevPoint: Point, scale: number, direction: HelperWrapperControllerDirection): null | {
+        width: number;
+        height: number;
+        angle: number;
+    };
+    getElementIndex(data: IDrawData, uuid: string): number;
+    limitElementAttrs(elem: DataElement<keyof DataElemDesc>): void;
+}