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

package/dist/esm/lib/element.js

@@ -0,0 +1,438 @@
+import { createUUID } from '@idraw/util';
+import { rotateElement } from './transform';
+import { calcRadian, calcElementCenter, parseRadianToAngle } from './calculate';
+import { limitAngle, limitNum } from './value';
+import { LIMIT_QBLIQUE_ANGLE } from './../constant/element';
+const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
+export class Element {
+    constructor(ctx) {
+        this._ctx = ctx;
+    }
+    initData(data) {
+        data.elements.forEach((elem) => {
+            if (!(elem.uuid && typeof elem.uuid === 'string')) {
+                elem.uuid = createUUID();
+            }
+        });
+        return data;
+    }
+    isPointInElement(p, data) {
+        var _a, _b;
+        const ctx = this._ctx;
+        let idx = -1;
+        let uuid = null;
+        for (let i = data.elements.length - 1; i >= 0; i--) {
+            const ele = data.elements[i];
+            if (((_a = ele.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true)
+                continue;
+            let bw = 0;
+            if (((_b = ele.desc) === null || _b === void 0 ? void 0 : _b.borderWidth) > 0) {
+                bw = ele.desc.borderWidth;
+            }
+            rotateElement(ctx, ele, () => {
+                ctx.beginPath();
+                ctx.moveTo(ele.x - bw, ele.y - bw);
+                ctx.lineTo(ele.x + ele.w + bw, ele.y - bw);
+                ctx.lineTo(ele.x + ele.w + bw, ele.y + ele.h + bw);
+                ctx.lineTo(ele.x - bw, ele.y + ele.h + bw);
+                ctx.lineTo(ele.x - bw, ele.y - bw);
+                ctx.closePath();
+                if (ctx.isPointInPath(p.x, p.y)) {
+                    idx = i;
+                    uuid = ele.uuid;
+                }
+            });
+            if (idx >= 0) {
+                break;
+            }
+        }
+        return [idx, uuid];
+    }
+    dragElement(data, uuid, point, prevPoint, scale) {
+        const index = this.getElementIndex(data, uuid);
+        if (!data.elements[index]) {
+            return;
+        }
+        const moveX = point.x - prevPoint.x;
+        const moveY = point.y - prevPoint.y;
+        data.elements[index].x += moveX / scale;
+        data.elements[index].y += moveY / scale;
+        this.limitElementAttrs(data.elements[index]);
+    }
+    transformElement(data, uuid, point, prevPoint, scale, direction) {
+        var _a, _b;
+        const index = this.getElementIndex(data, uuid);
+        if (!data.elements[index]) {
+            return null;
+        }
+        if (((_b = (_a = data.elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.lock) === true) {
+            return null;
+        }
+        const moveX = (point.x - prevPoint.x) / scale;
+        const moveY = (point.y - prevPoint.y) / scale;
+        const elem = data.elements[index];
+        if ([
+            'top-left',
+            'top',
+            'top-right',
+            'right',
+            'bottom-right',
+            'bottom',
+            'bottom-left',
+            'left'
+        ].includes(direction)) {
+            const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale);
+            elem.x = p.x;
+            elem.y = p.y;
+            elem.w = p.w;
+            elem.h = p.h;
+        }
+        else if (direction === 'rotate') {
+            const center = calcElementCenter(elem);
+            const radian = calcRadian(center, prevPoint, point);
+            elem.angle = (elem.angle || 0) + parseRadianToAngle(radian);
+        }
+        this.limitElementAttrs(elem);
+        return {
+            width: limitNum(elem.w),
+            height: limitNum(elem.h),
+            angle: limitAngle(elem.angle || 0)
+        };
+    }
+    getElementIndex(data, uuid) {
+        let idx = -1;
+        for (let i = 0; i < data.elements.length; i++) {
+            if (data.elements[i].uuid === uuid) {
+                idx = i;
+                break;
+            }
+        }
+        return idx;
+    }
+    limitElementAttrs(elem) {
+        elem.x = limitNum(elem.x);
+        elem.y = limitNum(elem.y);
+        elem.w = limitNum(elem.w);
+        elem.h = limitNum(elem.h);
+        elem.angle = limitAngle(elem.angle || 0);
+    }
+}
+function calcuScaleElemPosition(elem, moveX, moveY, direction, scale) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };
+    let angle = elem.angle;
+    if (angle < 0) {
+        angle = Math.max(0, 360 + angle);
+    }
+    if (((_a = elem.operation) === null || _a === void 0 ? void 0 : _a.limitRatio) === true) {
+        if (['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(direction)) {
+            const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
+            moveX = (moveX >= 0 ? 1 : -1) * maxDist;
+            moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / elem.w) * elem.h;
+        }
+    }
+    switch (direction) {
+        case 'top-left': {
+            if (elem.w - moveX > 0 && elem.h - moveY > 0) {
+                p.x += moveX;
+                p.y += moveY;
+                p.w -= moveX;
+                p.h -= moveY;
+            }
+            break;
+        }
+        case 'top': {
+            if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) {
+                if (p.h - moveY > 0) {
+                    p.y += moveY;
+                    p.h -= moveY;
+                    if (((_b = elem.operation) === null || _b === void 0 ? void 0 : _b.limitRatio) === true) {
+                        p.x += ((moveY / elem.h) * elem.w) / 2;
+                        p.w -= (moveY / elem.h) * elem.w;
+                    }
+                }
+            }
+            else if (elem.angle > 0 || elem.angle < 0) {
+                const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
+                let moveDist = calcMoveDist(moveX, moveY);
+                let centerX = p.x + elem.w / 2;
+                let centerY = p.y + elem.h / 2;
+                if (angle < 90) {
+                    moveDist = 0 - changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.sin(radian);
+                    centerY = centerY - centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 180) {
+                    moveDist = changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 90);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.cos(radian);
+                    centerY = centerY + centerMoveDist * Math.sin(radian);
+                }
+                else if (angle < 270) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle - 180);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.sin(radian);
+                    centerY = centerY + centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 360) {
+                    moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 270);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.cos(radian);
+                    centerY = centerY - centerMoveDist * Math.sin(radian);
+                }
+                if (p.h + moveDist > 0) {
+                    if (((_c = elem.operation) === null || _c === void 0 ? void 0 : _c.limitRatio) === true) {
+                        p.w = p.w + (moveDist / elem.h) * elem.w;
+                    }
+                    p.h = p.h + moveDist;
+                    p.x = centerX - p.w / 2;
+                    p.y = centerY - p.h / 2;
+                }
+            }
+            else {
+                if (p.h - moveY > 0) {
+                    p.y += moveY;
+                    p.h -= moveY;
+                    if (((_d = elem.operation) === null || _d === void 0 ? void 0 : _d.limitRatio) === true) {
+                        p.x -= moveX / 2;
+                        p.w += moveX;
+                    }
+                }
+            }
+            break;
+        }
+        case 'top-right': {
+            if (p.h - moveY > 0 && p.w + moveX > 0) {
+                p.y += moveY;
+                p.w += moveX;
+                p.h -= moveY;
+            }
+            break;
+        }
+        case 'right': {
+            if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) {
+                if (elem.w + moveX > 0) {
+                    p.w += moveX;
+                    if (((_e = elem.operation) === null || _e === void 0 ? void 0 : _e.limitRatio) === true) {
+                        p.y -= (moveX * elem.h) / elem.w / 2;
+                        p.h += (moveX * elem.h) / elem.w;
+                    }
+                }
+            }
+            else if (elem.angle > 0 || elem.angle < 0) {
+                const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
+                let moveDist = calcMoveDist(moveX, moveY);
+                let centerX = p.x + elem.w / 2;
+                let centerY = p.y + elem.h / 2;
+                if (angle < 90) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.cos(radian);
+                    centerY = centerY + centerMoveDist * Math.sin(radian);
+                }
+                else if (angle < 180) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle - 90);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.sin(radian);
+                    centerY = centerY + centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 270) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle - 180);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.cos(radian);
+                    centerY = centerY + centerMoveDist * Math.sin(radian);
+                    moveDist = 0 - moveDist;
+                }
+                else if (angle < 360) {
+                    moveDist = changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 270);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.sin(radian);
+                    centerY = centerY - centerMoveDist * Math.cos(radian);
+                }
+                if (p.w + moveDist > 0) {
+                    if (((_f = elem.operation) === null || _f === void 0 ? void 0 : _f.limitRatio) === true) {
+                        p.h = p.h + (moveDist / elem.w) * elem.h;
+                    }
+                    p.w = p.w + moveDist;
+                    p.x = centerX - p.w / 2;
+                    p.y = centerY - p.h / 2;
+                }
+            }
+            else {
+                if (elem.w + moveX > 0) {
+                    p.w += moveX;
+                    if (((_g = elem.operation) === null || _g === void 0 ? void 0 : _g.limitRatio) === true) {
+                        p.h += (moveX * elem.h) / elem.w;
+                        p.y -= (moveX * elem.h) / elem.w / 2;
+                    }
+                }
+            }
+            break;
+        }
+        case 'bottom-right': {
+            if (elem.w + moveX > 0 && elem.h + moveY > 0) {
+                p.w += moveX;
+                p.h += moveY;
+            }
+            break;
+        }
+        case 'bottom': {
+            if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) {
+                if (elem.h + moveY > 0) {
+                    p.h += moveY;
+                    if (((_h = elem.operation) === null || _h === void 0 ? void 0 : _h.limitRatio) === true) {
+                        p.x -= ((moveY / elem.h) * elem.w) / 2;
+                        p.w += (moveY / elem.h) * elem.w;
+                    }
+                }
+            }
+            else if (elem.angle > 0 || elem.angle < 0) {
+                const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
+                let moveDist = calcMoveDist(moveX, moveY);
+                let centerX = p.x + elem.w / 2;
+                let centerY = p.y + elem.h / 2;
+                if (angle < 90) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.sin(radian);
+                    centerY = centerY + centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 180) {
+                    moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 90);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.cos(radian);
+                    centerY = centerY - centerMoveDist * Math.sin(radian);
+                }
+                else if (angle < 270) {
+                    moveDist = changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 180);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.sin(radian);
+                    centerY = centerY - centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 360) {
+                    moveDist = changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 270);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.cos(radian);
+                    centerY = centerY + centerMoveDist * Math.sin(radian);
+                }
+                if (p.h + moveDist > 0) {
+                    if (((_j = elem.operation) === null || _j === void 0 ? void 0 : _j.limitRatio) === true) {
+                        p.w = p.w + (moveDist / elem.h) * elem.w;
+                    }
+                    p.h = p.h + moveDist;
+                    p.x = centerX - p.w / 2;
+                    p.y = centerY - p.h / 2;
+                }
+            }
+            else {
+                if (elem.h + moveY > 0) {
+                    p.h += moveY;
+                    if (((_k = elem.operation) === null || _k === void 0 ? void 0 : _k.limitRatio) === true) {
+                        p.x -= ((moveY / elem.h) * elem.w) / 2;
+                        p.w += (moveY / elem.h) * elem.w;
+                    }
+                }
+            }
+            break;
+        }
+        case 'bottom-left': {
+            if (elem.w - moveX > 0 && elem.h + moveY > 0) {
+                p.x += moveX;
+                p.w -= moveX;
+                p.h += moveY;
+            }
+            break;
+        }
+        case 'left': {
+            if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) {
+                if (elem.w - moveX > 0) {
+                    p.x += moveX;
+                    p.w -= moveX;
+                    if (((_l = elem.operation) === null || _l === void 0 ? void 0 : _l.limitRatio) === true) {
+                        p.h -= (moveX / elem.w) * elem.h;
+                        p.y += ((moveX / elem.w) * elem.h) / 2;
+                    }
+                }
+            }
+            else if (elem.angle > 0 || elem.angle < 0) {
+                const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
+                let moveDist = calcMoveDist(moveX, moveY);
+                let centerX = p.x + elem.w / 2;
+                let centerY = p.y + elem.h / 2;
+                if (angle < 90) {
+                    moveDist = 0 - changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.cos(radian);
+                    centerY = centerY - centerMoveDist * Math.sin(radian);
+                }
+                else if (angle < 180) {
+                    moveDist = changeMoveDistDirect(moveDist, moveX);
+                    const radian = parseRadian(angle - 90);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.sin(radian);
+                    centerY = centerY - centerMoveDist * Math.cos(radian);
+                }
+                else if (angle < 270) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle - 180);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX + centerMoveDist * Math.cos(radian);
+                    centerY = centerY + centerMoveDist * Math.sin(radian);
+                }
+                else if (angle < 360) {
+                    moveDist = changeMoveDistDirect(moveDist, moveY);
+                    const radian = parseRadian(angle - 270);
+                    const centerMoveDist = moveDist / 2;
+                    centerX = centerX - centerMoveDist * Math.sin(radian);
+                    centerY = centerY + centerMoveDist * Math.cos(radian);
+                }
+                if (p.w + moveDist > 0) {
+                    if (((_m = elem.operation) === null || _m === void 0 ? void 0 : _m.limitRatio) === true) {
+                        p.h = p.h + (moveDist / elem.w) * elem.h;
+                    }
+                    p.w = p.w + moveDist;
+                    p.x = centerX - p.w / 2;
+                    p.y = centerY - p.h / 2;
+                }
+            }
+            else {
+                if (elem.w - moveX > 0) {
+                    p.x += moveX;
+                    p.w -= moveX;
+                    if (((_o = elem.operation) === null || _o === void 0 ? void 0 : _o.limitRatio) === true) {
+                        p.h -= (moveX / elem.w) * elem.h;
+                        p.y += ((moveX / elem.w) * elem.h) / 2;
+                    }
+                }
+            }
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return p;
+}
+function parseRadian(angle) {
+    return (angle * Math.PI) / 180;
+}
+function calcMoveDist(moveX, moveY) {
+    return Math.sqrt(moveX * moveX + moveY * moveY);
+}
+function changeMoveDistDirect(moveDist, moveDirect) {
+    return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
+}

package/dist/esm/lib/engine-temp.d.ts

@@ -0,0 +1,22 @@
+import { TypeHelperWrapperControllerDirection, TypePoint } from '@idraw/types';
+import { Mode, CursorStatus } from '../constant/static';
+type TempDataDesc = {
+    hasInited: boolean;
+    mode: Mode;
+    cursorStatus: CursorStatus;
+    selectedUUID: string | null;
+    selectedUUIDList: string[];
+    hoverUUID: string | null;
+    selectedControllerDirection: TypeHelperWrapperControllerDirection | null;
+    hoverControllerDirection: TypeHelperWrapperControllerDirection | null;
+    prevPoint: TypePoint | null;
+    hasChangedElement: boolean;
+};
+export declare class TempData {
+    private _temp;
+    constructor();
+    set<T extends keyof TempDataDesc>(name: T, value: TempDataDesc[T]): void;
+    get<T extends keyof TempDataDesc>(name: T): TempDataDesc[T];
+    clear(): void;
+}
+export {};

package/dist/esm/lib/engine-temp.js

@@ -0,0 +1,29 @@
+import { Mode, CursorStatus } from '../constant/static';
+function createData() {
+    return {
+        hasInited: false,
+        mode: Mode.NULL,
+        cursorStatus: CursorStatus.NULL,
+        selectedUUID: null,
+        selectedUUIDList: [],
+        hoverUUID: null,
+        selectedControllerDirection: null,
+        hoverControllerDirection: null,
+        prevPoint: null,
+        hasChangedElement: false
+    };
+}
+export class TempData {
+    constructor() {
+        this._temp = createData();
+    }
+    set(name, value) {
+        this._temp[name] = value;
+    }
+    get(name) {
+        return this._temp[name];
+    }
+    clear() {
+        this._temp = createData();
+    }
+}

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

@@ -0,0 +1,47 @@
+import { TypePoint, InterfaceHelperPlugin, TypeConfigStrict, TypeData, TypeHelperConfig } from '@idraw/types';
+import Board from '@idraw/board';
+import { TempData } from './engine-temp';
+import { Helper } from './helper';
+import { Element } from './element';
+import { CoreEvent } from './core-event';
+type Options = {
+    coreEvent: CoreEvent;
+    board: Board;
+    element: Element;
+    config: TypeConfigStrict;
+    drawFeekback: () => void;
+    getDataFeekback: () => TypeData;
+    selectElementByIndex: (index: number, opts?: {
+        useMode?: boolean;
+    }) => void;
+    emitChangeScreen: () => void;
+    emitChangeData: () => void;
+};
+export declare class Engine {
+    private _plugins;
+    private _opts;
+    private _mapper;
+    temp: TempData;
+    helper: Helper;
+    constructor(opts: Options);
+    addPlugin(plugin: InterfaceHelperPlugin): void;
+    getHelperConfig(): TypeHelperConfig;
+    updateHelperConfig(opts: {
+        width: number;
+        height: number;
+        devicePixelRatio: number;
+    }): void;
+    init(): void;
+    private _initEvent;
+    private _handleDoubleClick;
+    _handlePoint(point: TypePoint): void;
+    private _handleClick;
+    private _handleMoveStart;
+    private _handleMove;
+    private _dragElements;
+    private _transfromElement;
+    private _handleMoveEnd;
+    private _handleHover;
+    private _handleLeave;
+}
+export {};