@idraw/core 0.3.0-alpha.6 → 0.3.0-alpha.8

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 { TypeContext, TypeHelperConfig } from '@idraw/types';
+export declare function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig): void;
+export declare function drawAreaWrapper(ctx: TypeContext, config: TypeHelperConfig): void;
+export declare function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConfig): void;

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

@@ -0,0 +1,144 @@
+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 / 2);
+                ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
+                ctx.stroke();
+                ctx.closePath();
+            }
+            ctx.setFillStyle(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) => {
+                if (controller.invisible !== true) {
+                    ctx.beginPath();
+                    ctx.arc(controller.x, controller.y, wrapper.controllerSize, 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/element-base.d.ts

@@ -0,0 +1,3 @@
+declare class ElementBase {
+    constructor();
+}

package/dist/esm/lib/element/element-base.js

@@ -0,0 +1,5 @@
+"use strict";
+class ElementBase {
+    constructor() {
+    }
+}

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

@@ -0,0 +1,3 @@
+declare class ElementController {
+}
+export default ElementController;

package/dist/esm/lib/element/element-controller.js

@@ -0,0 +1,3 @@
+class ElementController {
+}
+export default ElementController;

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

@@ -0,0 +1,9 @@
+import ElementController from './element-controller';
+declare class ElementHub {
+    private _controllerMap;
+    constructor();
+    register(type: string, controller: ElementController): void;
+    clear(): void;
+    getDrawActions(): void;
+}
+export default ElementHub;

package/dist/esm/lib/element/element-hub.js

@@ -0,0 +1,16 @@
+class ElementHub {
+    constructor() {
+        this._controllerMap = new Map();
+    }
+    register(type, controller) {
+        if (this._controllerMap.has(type) !== true) {
+            this._controllerMap.set(type, controller);
+        }
+    }
+    clear() {
+        this._controllerMap.clear();
+    }
+    getDrawActions() {
+    }
+}
+export default ElementHub;

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

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