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

package/dist/esm/lib/helper.js

@@ -0,0 +1,363 @@
+import { deepClone } from '@idraw/util';
+import { parseAngleToRadian, calcElementCenter } from './calculate';
+import { rotateContext, rotateElement } from './transform';
+import { LIMIT_QBLIQUE_ANGLE } from './../constant/element';
+const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE;
+export class Helper {
+    constructor(board, config) {
+        this._areaStart = { x: 0, y: 0 };
+        this._areaEnd = { x: 0, y: 0 };
+        this._board = board;
+        this._ctx = this._board.getContext();
+        this._coreConfig = config;
+        this._helperConfig = {
+            elementIndexMap: {}
+        };
+    }
+    updateConfig(data, opts) {
+        this._updateElementIndex(data);
+        this._updateSelectedElementWrapper(data, opts);
+        this._updateSelectedElementListWrapper(data, opts);
+    }
+    getConfig() {
+        return deepClone(this._helperConfig);
+    }
+    getElementIndexByUUID(uuid) {
+        const index = this._helperConfig.elementIndexMap[uuid];
+        if (index >= 0) {
+            return index;
+        }
+        return null;
+    }
+    isPointInElementWrapperController(p, data) {
+        var _a, _b;
+        const ctx = this._ctx;
+        const uuid = ((_b = (_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementWrapper) === null || _b === void 0 ? void 0 : _b.uuid) || null;
+        let directIndex = null;
+        let selectedControllerDirection = null;
+        let hoverControllerDirection = null;
+        if (!this._helperConfig.selectedElementWrapper) {
+            return {
+                uuid,
+                selectedControllerDirection,
+                directIndex,
+                hoverControllerDirection
+            };
+        }
+        const wrapper = this._helperConfig.selectedElementWrapper;
+        const controllers = [
+            wrapper.controllers.right,
+            wrapper.controllers.topRight,
+            wrapper.controllers.top,
+            wrapper.controllers.topLeft,
+            wrapper.controllers.left,
+            wrapper.controllers.bottomLeft,
+            wrapper.controllers.bottom,
+            wrapper.controllers.bottomRight
+        ];
+        let directionNames = [
+            'right',
+            'top-right',
+            'top',
+            'top-left',
+            'left',
+            'bottom-left',
+            'bottom',
+            'bottom-right'
+        ];
+        let hoverDirectionNames = deepClone(directionNames);
+        let angleMoveNum = 0;
+        if (data && uuid) {
+            const elemIdx = this.getElementIndexByUUID(uuid);
+            if (elemIdx !== null && elemIdx >= 0) {
+                const elem = data.elements[elemIdx];
+                let angle = elem.angle;
+                if (angle < 0) {
+                    angle += 360;
+                }
+                if (angle < 45) {
+                    angleMoveNum = 0;
+                }
+                else if (angle < 90) {
+                    angleMoveNum = 1;
+                }
+                else if (angle < 135) {
+                    angleMoveNum = 2;
+                }
+                else if (angle < 180) {
+                    angleMoveNum = 3;
+                }
+                else if (angle < 225) {
+                    angleMoveNum = 4;
+                }
+                else if (angle < 270) {
+                    angleMoveNum = 5;
+                }
+                else if (angle < 315) {
+                    angleMoveNum = 6;
+                }
+            }
+        }
+        if (angleMoveNum > 0) {
+            hoverDirectionNames = hoverDirectionNames
+                .slice(-angleMoveNum)
+                .concat(hoverDirectionNames.slice(0, -angleMoveNum));
+        }
+        rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
+            for (let i = 0; i < controllers.length; i++) {
+                const controller = controllers[i];
+                if (controller.invisible === true) {
+                    continue;
+                }
+                ctx.beginPath();
+                ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
+                ctx.closePath();
+                if (ctx.isPointInPath(p.x, p.y)) {
+                    selectedControllerDirection = directionNames[i];
+                    hoverControllerDirection = hoverDirectionNames[i];
+                }
+                if (selectedControllerDirection) {
+                    directIndex = i;
+                    break;
+                }
+            }
+        });
+        if (selectedControllerDirection === null) {
+            const controller = wrapper.controllers.rotate;
+            if (controller.invisible !== true) {
+                rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
+                    ctx.beginPath();
+                    ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
+                    ctx.closePath();
+                    if (ctx.isPointInPath(p.x, p.y)) {
+                        selectedControllerDirection = 'rotate';
+                        hoverControllerDirection = 'rotate';
+                    }
+                });
+            }
+        }
+        return {
+            uuid,
+            selectedControllerDirection,
+            hoverControllerDirection,
+            directIndex
+        };
+    }
+    isPointInElementList(p, data) {
+        var _a, _b, _c;
+        const ctx = this._ctx;
+        let idx = -1;
+        let uuid = null;
+        const wrapperList = ((_a = this._helperConfig) === null || _a === void 0 ? void 0 : _a.selectedElementListWrappers) || [];
+        for (let i = 0; i < wrapperList.length; i++) {
+            const wrapper = wrapperList[i];
+            const elemIdx = this._helperConfig.elementIndexMap[wrapper.uuid];
+            const ele = data.elements[elemIdx];
+            if (!ele)
+                continue;
+            if (((_b = ele.operation) === null || _b === void 0 ? void 0 : _b.invisible) === true)
+                continue;
+            let bw = 0;
+            if (((_c = ele.desc) === null || _c === void 0 ? void 0 : _c.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;
+            }
+        }
+        if (uuid && idx >= 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    startSelectArea(p) {
+        this._areaStart = p;
+        this._areaEnd = p;
+    }
+    changeSelectArea(p) {
+        this._areaEnd = p;
+        this._calcSelectedArea();
+    }
+    clearSelectedArea() {
+        this._areaStart = { x: 0, y: 0 };
+        this._areaEnd = { x: 0, y: 0 };
+        this._calcSelectedArea();
+    }
+    calcSelectedElements(data) {
+        const transform = this._ctx.getTransform();
+        const { scale = 1, scrollX = 0, scrollY = 0 } = transform;
+        const start = this._areaStart;
+        const end = this._areaEnd;
+        const x = (Math.min(start.x, end.x) - scrollX) / scale;
+        const y = (Math.min(start.y, end.y) - scrollY) / scale;
+        const w = Math.abs(end.x - start.x) / scale;
+        const h = Math.abs(end.y - start.y) / scale;
+        const uuids = [];
+        const ctx = this._ctx;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + w, y);
+        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x, y + h);
+        ctx.lineTo(x, y);
+        ctx.closePath();
+        data.elements.forEach((elem) => {
+            var _a;
+            if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) !== true) {
+                const centerX = elem.x + elem.w / 2;
+                const centerY = elem.y + elem.h / 2;
+                if (ctx.isPointInPathWithoutScroll(centerX, centerY)) {
+                    uuids.push(elem.uuid);
+                }
+            }
+        });
+        return uuids;
+    }
+    _calcSelectedArea() {
+        const start = this._areaStart;
+        const end = this._areaEnd;
+        const transform = this._ctx.getTransform();
+        const { scale = 1, scrollX = 0, scrollY = 0 } = transform;
+        const elemWrapper = this._coreConfig.elementWrapper;
+        const lineWidth = elemWrapper.lineWidth / scale;
+        const lineDash = elemWrapper.lineDash.map((n) => n / scale);
+        this._helperConfig.selectedAreaWrapper = {
+            x: (Math.min(start.x, end.x) - scrollX) / scale,
+            y: (Math.min(start.y, end.y) - scrollY) / scale,
+            w: Math.abs(end.x - start.x) / scale,
+            h: Math.abs(end.y - start.y) / scale,
+            startPoint: { x: start.x, y: start.y },
+            endPoint: { x: end.x, y: end.y },
+            lineWidth: lineWidth,
+            lineDash: lineDash,
+            color: elemWrapper.color
+        };
+    }
+    _updateElementIndex(data) {
+        this._helperConfig.elementIndexMap = {};
+        data.elements.forEach((elem, i) => {
+            this._helperConfig.elementIndexMap[elem.uuid] = i;
+        });
+    }
+    _updateSelectedElementWrapper(data, opts) {
+        var _a;
+        const { selectedUUID: uuid } = opts;
+        if (!(typeof uuid === 'string' &&
+            this._helperConfig.elementIndexMap[uuid] >= 0)) {
+            delete this._helperConfig.selectedElementWrapper;
+            return;
+        }
+        const index = this._helperConfig.elementIndexMap[uuid];
+        const elem = data.elements[index];
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+            return;
+        }
+        const wrapper = this._createSelectedElementWrapper(elem, opts);
+        this._helperConfig.selectedElementWrapper = wrapper;
+    }
+    _updateSelectedElementListWrapper(data, opts) {
+        const { selectedUUIDList } = opts;
+        const wrapperList = [];
+        data.elements.forEach((elem, i) => {
+            if (selectedUUIDList === null || selectedUUIDList === void 0 ? void 0 : selectedUUIDList.includes(elem.uuid)) {
+                const wrapper = this._createSelectedElementWrapper(elem, opts);
+                wrapperList.push(wrapper);
+            }
+        });
+        this._helperConfig.selectedElementListWrappers = wrapperList;
+    }
+    _createSelectedElementWrapper(elem, opts) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const { scale } = opts;
+        const elemWrapper = this._coreConfig.elementWrapper;
+        const controllerSize = elemWrapper.controllerSize / scale;
+        const lineWidth = elemWrapper.lineWidth / scale;
+        const lineDash = elemWrapper.lineDash.map((n) => n / scale);
+        const rotateLimit = 12;
+        const bw = ((_a = elem.desc) === null || _a === void 0 ? void 0 : _a.borderWidth) || 0;
+        let hideObliqueDirection = false;
+        if (typeof elem.angle === 'number' &&
+            Math.abs(elem.angle) > limitQbliqueAngle) {
+            hideObliqueDirection = true;
+        }
+        const controllerOffset = lineWidth;
+        const wrapper = {
+            uuid: elem.uuid,
+            controllerSize: controllerSize,
+            controllerOffset: controllerOffset,
+            lock: ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.lock) === true,
+            controllers: {
+                topLeft: {
+                    x: elem.x - controllerOffset - bw,
+                    y: elem.y - controllerOffset - bw,
+                    invisible: hideObliqueDirection || ((_c = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _c === void 0 ? void 0 : _c.disableScale) === true
+                },
+                top: {
+                    x: elem.x + elem.w / 2,
+                    y: elem.y - controllerOffset - bw,
+                    invisible: ((_d = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _d === void 0 ? void 0 : _d.disableScale) === true
+                },
+                topRight: {
+                    x: elem.x + elem.w + controllerOffset + bw,
+                    y: elem.y - controllerOffset - bw,
+                    invisible: hideObliqueDirection || ((_e = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _e === void 0 ? void 0 : _e.disableScale) === true
+                },
+                right: {
+                    x: elem.x + elem.w + controllerOffset + bw,
+                    y: elem.y + elem.h / 2,
+                    invisible: ((_f = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _f === void 0 ? void 0 : _f.disableScale) === true
+                },
+                bottomRight: {
+                    x: elem.x + elem.w + controllerOffset + bw,
+                    y: elem.y + elem.h + controllerOffset + bw,
+                    invisible: hideObliqueDirection || ((_g = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _g === void 0 ? void 0 : _g.disableScale) === true
+                },
+                bottom: {
+                    x: elem.x + elem.w / 2,
+                    y: elem.y + elem.h + controllerOffset + bw,
+                    invisible: ((_h = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _h === void 0 ? void 0 : _h.disableScale) === true
+                },
+                bottomLeft: {
+                    x: elem.x - controllerOffset - bw,
+                    y: elem.y + elem.h + controllerOffset + bw,
+                    invisible: hideObliqueDirection || ((_j = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _j === void 0 ? void 0 : _j.disableScale) === true
+                },
+                left: {
+                    x: elem.x - controllerOffset - bw,
+                    y: elem.y + elem.h / 2,
+                    invisible: ((_k = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _k === void 0 ? void 0 : _k.disableScale) === true
+                },
+                rotate: {
+                    x: elem.x + elem.w / 2,
+                    y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
+                    invisible: ((_l = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _l === void 0 ? void 0 : _l.disbaleRotate) === true
+                }
+            },
+            lineWidth: lineWidth,
+            lineDash: lineDash,
+            color: ((_m = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _m === void 0 ? void 0 : _m.lock) === true
+                ? elemWrapper.lockColor
+                : elemWrapper.color
+        };
+        if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) {
+            wrapper.radian = parseAngleToRadian(elem.angle);
+            wrapper.translate = calcElementCenter(elem);
+        }
+        return wrapper;
+    }
+}

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

@@ -0,0 +1,13 @@
+export * from './calculate';
+export * from './check';
+export * from './config';
+export * from './core-event';
+export * from './diff';
+export * from './element';
+export * from './helper';
+export * from './is';
+export * from './mapper';
+export * from './parse';
+export * from './temp';
+export * from './transform';
+export * from './value';

package/dist/esm/lib/index.js

@@ -0,0 +1,13 @@
+export * from './calculate';
+export * from './check';
+export * from './config';
+export * from './core-event';
+export * from './diff';
+export * from './element';
+export * from './helper';
+export * from './is';
+export * from './mapper';
+export * from './parse';
+export * from './temp';
+export * from './transform';
+export * from './value';

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

@@ -0,0 +1,26 @@
+declare const is: TypeIs;
+type TypeIs = {
+    x: (value: any) => boolean;
+    y: (value: any) => boolean;
+    w: (value: any) => boolean;
+    h: (value: any) => boolean;
+    angle: (value: any) => boolean;
+    number: (value: any) => boolean;
+    borderWidth: (value: any) => boolean;
+    borderRadius: (value: any) => boolean;
+    color: (value: any) => boolean;
+    imageSrc: (value: any) => boolean;
+    imageURL: (value: any) => boolean;
+    imageBase64: (value: any) => boolean;
+    svg: (value: any) => boolean;
+    html: (value: any) => boolean;
+    text: (value: any) => boolean;
+    fontSize: (value: any) => boolean;
+    fontWeight: (value: any) => boolean;
+    lineHeight: (value: any) => boolean;
+    textAlign: (value: any) => boolean;
+    fontFamily: (value: any) => boolean;
+    strokeWidth: (value: any) => boolean;
+};
+export default is;
+export { TypeIs };

package/dist/esm/lib/is.js

@@ -0,0 +1,100 @@
+import { isColorStr } from '@idraw/util';
+function number(value) {
+    return typeof value === 'number' && (value > 0 || value <= 0);
+}
+function x(value) {
+    return number(value);
+}
+function y(value) {
+    return number(value);
+}
+function w(value) {
+    return typeof value === 'number' && value >= 0;
+}
+function h(value) {
+    return typeof value === 'number' && value >= 0;
+}
+function angle(value) {
+    return typeof value === 'number' && value >= -360 && value <= 360;
+}
+function borderWidth(value) {
+    return w(value);
+}
+function borderRadius(value) {
+    return number(value) && value >= 0;
+}
+function color(value) {
+    return isColorStr(value);
+}
+function imageURL(value) {
+    return (typeof value === 'string' &&
+        /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`));
+}
+function imageBase64(value) {
+    return typeof value === 'string' && /^(data:image\/)/.test(`${value}`);
+}
+function imageSrc(value) {
+    return imageBase64(value) || imageURL(value);
+}
+function svg(value) {
+    return (typeof value === 'string' &&
+        /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) &&
+        /<\/[\s]{0,}svg>$/i.test(`${value}`.trim()));
+}
+function html(value) {
+    let result = false;
+    if (typeof value === 'string') {
+        let div = document.createElement('div');
+        div.innerHTML = value;
+        if (div.children.length > 0) {
+            result = true;
+        }
+        div = null;
+    }
+    return result;
+}
+function text(value) {
+    return typeof value === 'string';
+}
+function fontSize(value) {
+    return number(value) && value > 0;
+}
+function lineHeight(value) {
+    return number(value) && value > 0;
+}
+function strokeWidth(value) {
+    return number(value) && value > 0;
+}
+function textAlign(value) {
+    return ['center', 'left', 'right'].includes(value);
+}
+function fontFamily(value) {
+    return typeof value === 'string' && value.length > 0;
+}
+function fontWeight(value) {
+    return ['bold'].includes(value);
+}
+const is = {
+    x,
+    y,
+    w,
+    h,
+    angle,
+    number,
+    borderWidth,
+    borderRadius,
+    color,
+    imageSrc,
+    imageURL,
+    imageBase64,
+    svg,
+    html,
+    text,
+    fontSize,
+    lineHeight,
+    textAlign,
+    fontFamily,
+    fontWeight,
+    strokeWidth
+};
+export default is;

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

@@ -0,0 +1,26 @@
+import { TypeData, TypePoint, TypePointCursor } from '@idraw/types';
+import Board from '@idraw/board';
+import { Helper } from './helper';
+import { Element } from './element';
+declare const _board: unique symbol;
+declare const _helper: unique symbol;
+declare const _element: unique symbol;
+declare const _opts: unique symbol;
+type Options = {
+    board: Board;
+    element: Element;
+    helper: Helper;
+};
+export declare class Mapper {
+    private [_opts];
+    private [_board];
+    private [_helper];
+    private [_element];
+    constructor(opts: Options);
+    isEffectivePoint(p: TypePoint): boolean;
+    judgePointCursor(p: TypePoint, data: TypeData): {
+        cursor: TypePointCursor;
+        elementUUID: string | null;
+    };
+}
+export {};

package/dist/esm/lib/mapper.js

@@ -0,0 +1,89 @@
+const _board = Symbol('_displayCtx');
+const _helper = Symbol('_helper');
+const _element = Symbol('_element');
+const _opts = Symbol('_opts');
+export class Mapper {
+    constructor(opts) {
+        this[_opts] = opts;
+        this[_board] = this[_opts].board;
+        this[_element] = this[_opts].element;
+        this[_helper] = this[_opts].helper;
+    }
+    isEffectivePoint(p) {
+        const scrollLineWidth = this[_board].getScrollLineWidth();
+        const screenInfo = this[_board].getScreenInfo();
+        if (p.x <= screenInfo.width - scrollLineWidth &&
+            p.y <= screenInfo.height - scrollLineWidth) {
+            return true;
+        }
+        return false;
+    }
+    judgePointCursor(p, data) {
+        let cursor = 'auto';
+        let elementUUID = null;
+        if (!this.isEffectivePoint(p)) {
+            return { cursor, elementUUID };
+        }
+        const { uuid, hoverControllerDirection } = this[_helper].isPointInElementWrapperController(p, data);
+        const direction = hoverControllerDirection;
+        if (uuid && direction) {
+            switch (direction) {
+                case 'top-right': {
+                    cursor = 'ne-resize';
+                    break;
+                }
+                case 'top-left': {
+                    cursor = 'nw-resize';
+                    break;
+                }
+                case 'top': {
+                    cursor = 'n-resize';
+                    break;
+                }
+                case 'right': {
+                    cursor = 'e-resize';
+                    break;
+                }
+                case 'bottom-right': {
+                    cursor = 'se-resize';
+                    break;
+                }
+                case 'bottom': {
+                    cursor = 's-resize';
+                    break;
+                }
+                case 'bottom-left': {
+                    cursor = 'sw-resize';
+                    break;
+                }
+                case 'left': {
+                    cursor = 'w-resize';
+                    break;
+                }
+                case 'rotate': {
+                    cursor = 'grab';
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+            if (uuid) {
+                elementUUID = uuid;
+            }
+        }
+        else {
+            const [index, uuid] = this[_element].isPointInElement(p, data);
+            if (index >= 0) {
+                cursor = 'move';
+            }
+            if (uuid) {
+                elementUUID = uuid;
+            }
+        }
+        return {
+            cursor,
+            elementUUID
+        };
+    }
+}

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

@@ -0,0 +1,2 @@
+import { TypeData } from '@idraw/types';
+export declare function parseData(data: any): TypeData;

package/dist/esm/lib/parse.js

@@ -0,0 +1,29 @@
+import { elementNames } from './../constant/element';
+export function parseData(data) {
+    const result = {
+        elements: [],
+    };
+    if (Array.isArray(data === null || data === void 0 ? void 0 : data.elements)) {
+        data === null || data === void 0 ? void 0 : data.elements.forEach((elem = {}) => {
+            if (isElement(elem)) {
+                result.elements.push(elem);
+            }
+        });
+    }
+    if (typeof data.bgColor === 'string') {
+        result.bgColor = data.bgColor;
+    }
+    return result;
+}
+function isElement(elem) {
+    if (!(isNumber(elem.x) && isNumber(elem.y) && isNumber(elem.w) && isNumber(elem.h))) {
+        return false;
+    }
+    if (!(typeof elem.type === 'string' && elementNames.includes(elem.type))) {
+        return false;
+    }
+    return true;
+}
+function isNumber(num) {
+    return (num >= 0 || num < 0);
+}

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

@@ -0,0 +1,11 @@
+type TempDataDesc = {
+    hasInited: 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 {};