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

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;
+}

package/dist/esm/lib/element.js

@@ -0,0 +1,380 @@
+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;
+        }
+        let moveX = (point.x - prevPoint.x) / scale;
+        let 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) {
+    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);
+    }
+    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;
+                }
+            }
+            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) {
+                    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;
+                }
+            }
+            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;
+                }
+            }
+            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) {
+                    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;
+                }
+            }
+            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;
+                }
+            }
+            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) {
+                    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;
+                }
+            }
+            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;
+                }
+            }
+            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) {
+                    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;
+                }
+            }
+            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);
+}