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

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

package/dist/esm/lib/engine.js

@@ -0,0 +1,323 @@
+import { deepClone, throttle } from '@idraw/util';
+import { Mode, CursorStatus } from './../constant/static';
+import { TempData } from './engine-temp';
+import { Helper } from './helper';
+import { Mapper } from './mapper';
+export class Engine {
+    constructor(opts) {
+        this._plugins = [];
+        const { board, config, element } = opts;
+        const helper = new Helper(board, config);
+        this._opts = opts;
+        this.temp = new TempData();
+        this.helper = helper;
+        this._mapper = new Mapper({ board, helper, element });
+    }
+    addPlugin(plugin) {
+        this._plugins.push(plugin);
+    }
+    getHelperConfig() {
+        return this.helper.getConfig();
+    }
+    updateHelperConfig(opts) {
+        var _a;
+        const { board, getDataFeekback, config } = this._opts;
+        const data = getDataFeekback();
+        const transform = board.getTransform();
+        this.helper.updateConfig(data, {
+            width: opts.width,
+            height: opts.height,
+            devicePixelRatio: opts.devicePixelRatio,
+            canScroll: ((_a = config === null || config === void 0 ? void 0 : config.scrollWrapper) === null || _a === void 0 ? void 0 : _a.use) === true,
+            selectedUUID: this.temp.get('selectedUUID'),
+            selectedUUIDList: this.temp.get('selectedUUIDList'),
+            scale: transform.scale,
+            scrollX: transform.scrollX,
+            scrollY: transform.scrollY
+        });
+    }
+    init() {
+        this._initEvent();
+    }
+    _initEvent() {
+        if (this.temp.get('hasInited') === true) {
+            return;
+        }
+        const { board } = this._opts;
+        board.on('hover', throttle(this._handleHover.bind(this), 32));
+        board.on('leave', throttle(this._handleLeave.bind(this), 32));
+        board.on('point', throttle(this._handleClick.bind(this), 16));
+        board.on('doubleClick', this._handleDoubleClick.bind(this));
+        board.on('point', this._handlePoint.bind(this));
+        board.on('moveStart', this._handleMoveStart.bind(this));
+        board.on('move', throttle(this._handleMove.bind(this), 16));
+        board.on('moveEnd', this._handleMoveEnd.bind(this));
+    }
+    _handleDoubleClick(point) {
+        var _a, _b, _c;
+        const { element, getDataFeekback, drawFeekback, coreEvent } = this._opts;
+        const data = getDataFeekback();
+        const [index, uuid] = element.isPointInElement(point, data);
+        if (index >= 0 && uuid) {
+            const elem = deepClone((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index]);
+            if (((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
+                coreEvent.trigger('screenDoubleClickElement', {
+                    index,
+                    uuid,
+                    element: deepClone((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index])
+                });
+            }
+        }
+        drawFeekback();
+    }
+    _handlePoint(point) {
+        var _a, _b, _c;
+        if (!this._mapper.isEffectivePoint(point)) {
+            return;
+        }
+        const { element, getDataFeekback, selectElementByIndex, coreEvent, emitChangeScreen, drawFeekback } = this._opts;
+        const helper = this.helper;
+        const data = getDataFeekback();
+        if (helper.isPointInElementList(point, data)) {
+            this.temp.set('mode', Mode.SELECT_ELEMENT_LIST);
+        }
+        else {
+            const { uuid, selectedControllerDirection } = helper.isPointInElementWrapperController(point, data);
+            if (uuid && selectedControllerDirection) {
+                this.temp.set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
+                this.temp.set('selectedControllerDirection', selectedControllerDirection);
+                this.temp.set('selectedUUID', uuid);
+            }
+            else {
+                const [index, uuid] = element.isPointInElement(point, data);
+                if (index >= 0 && ((_b = (_a = data.elements[index]) === null || _a === void 0 ? void 0 : _a.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
+                    selectElementByIndex(index, { useMode: true });
+                    if (typeof uuid === 'string' &&
+                        coreEvent.has('screenSelectElement')) {
+                        coreEvent.trigger('screenSelectElement', {
+                            index,
+                            uuid,
+                            element: deepClone((_c = data.elements) === null || _c === void 0 ? void 0 : _c[index])
+                        });
+                        emitChangeScreen();
+                    }
+                    this.temp.set('mode', Mode.SELECT_ELEMENT);
+                }
+                else {
+                    this.temp.set('selectedUUIDList', []);
+                    this.temp.set('selectedUUID', null);
+                    this.temp.set('mode', Mode.SELECT_AREA);
+                }
+            }
+        }
+        drawFeekback();
+    }
+    _handleClick(point) {
+        var _a;
+        const { element, getDataFeekback, coreEvent, drawFeekback } = this._opts;
+        const data = getDataFeekback();
+        const [index, uuid] = element.isPointInElement(point, data);
+        if (index >= 0 && uuid) {
+            coreEvent.trigger('screenClickElement', {
+                index,
+                uuid,
+                element: deepClone((_a = data.elements) === null || _a === void 0 ? void 0 : _a[index])
+            });
+        }
+        drawFeekback();
+    }
+    _handleMoveStart(point) {
+        const { element, getDataFeekback, coreEvent } = this._opts;
+        const data = getDataFeekback();
+        const helper = this.helper;
+        this.temp.set('prevPoint', point);
+        const uuid = this.temp.get('selectedUUID');
+        if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) {
+        }
+        else if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
+            if (typeof uuid === 'string' && coreEvent.has('screenMoveElementStart')) {
+                coreEvent.trigger('screenMoveElementStart', {
+                    index: element.getElementIndex(data, uuid),
+                    uuid,
+                    x: point.x,
+                    y: point.y
+                });
+            }
+        }
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            helper.startSelectArea(point);
+        }
+    }
+    _handleMove(point) {
+        const { drawFeekback } = this._opts;
+        const helper = this.helper;
+        if (this.temp.get('mode') === Mode.SELECT_ELEMENT_LIST) {
+            this.temp.set('hasChangedElement', true);
+            this._dragElements(this.temp.get('selectedUUIDList'), point, this.temp.get('prevPoint'));
+            drawFeekback();
+            this.temp.set('cursorStatus', CursorStatus.DRAGGING);
+        }
+        else if (typeof this.temp.get('selectedUUID') === 'string') {
+            if (this.temp.get('mode') === Mode.SELECT_ELEMENT) {
+                this.temp.set('hasChangedElement', true);
+                this._dragElements([this.temp.get('selectedUUID')], point, this.temp.get('prevPoint'));
+                drawFeekback();
+                this.temp.set('cursorStatus', CursorStatus.DRAGGING);
+            }
+            else if (this.temp.get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER &&
+                this.temp.get('selectedControllerDirection')) {
+                this._transfromElement(this.temp.get('selectedUUID'), point, this.temp.get('prevPoint'), this.temp.get('selectedControllerDirection'));
+                this.temp.set('cursorStatus', CursorStatus.DRAGGING);
+            }
+        }
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            helper.changeSelectArea(point);
+            drawFeekback();
+        }
+        this.temp.set('prevPoint', point);
+    }
+    _dragElements(uuids, point, prevPoint) {
+        if (!prevPoint) {
+            return;
+        }
+        const { board, element, getDataFeekback, drawFeekback } = this._opts;
+        const data = getDataFeekback();
+        const helper = this.helper;
+        uuids.forEach((uuid) => {
+            var _a, _b;
+            const idx = helper.getElementIndexByUUID(uuid);
+            if (idx === null)
+                return;
+            const elem = data.elements[idx];
+            if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) !== true &&
+                ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) !== true) {
+                element.dragElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale);
+            }
+        });
+        drawFeekback();
+    }
+    _transfromElement(uuid, point, prevPoint, direction) {
+        if (!prevPoint) {
+            return null;
+        }
+        const { board, element, getDataFeekback, drawFeekback } = this._opts;
+        const data = getDataFeekback();
+        const result = element.transformElement(data, uuid, point, prevPoint, board.getContext().getTransform().scale, direction);
+        drawFeekback();
+        return result;
+    }
+    _handleMoveEnd(point) {
+        const { element, getDataFeekback, coreEvent, drawFeekback, emitChangeData } = this._opts;
+        const data = getDataFeekback();
+        const helper = this.helper;
+        const uuid = this.temp.get('selectedUUID');
+        if (typeof uuid === 'string') {
+            const index = element.getElementIndex(data, uuid);
+            const elem = data.elements[index];
+            if (elem) {
+                if (coreEvent.has('screenMoveElementEnd')) {
+                    coreEvent.trigger('screenMoveElementEnd', {
+                        index,
+                        uuid,
+                        x: point.x,
+                        y: point.y
+                    });
+                }
+                if (coreEvent.has('screenChangeElement')) {
+                    coreEvent.trigger('screenChangeElement', {
+                        index,
+                        uuid,
+                        width: elem.w,
+                        height: elem.h,
+                        angle: elem.angle || 0
+                    });
+                }
+            }
+        }
+        else if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            const uuids = helper.calcSelectedElements(data);
+            if (uuids.length > 0) {
+                this.temp.set('selectedUUIDList', uuids);
+                this.temp.set('selectedUUID', null);
+            }
+            else {
+                this.temp.set('mode', Mode.NULL);
+            }
+            helper.clearSelectedArea();
+            drawFeekback();
+        }
+        if (this.temp.get('mode') !== Mode.SELECT_ELEMENT) {
+            this.temp.set('selectedUUID', null);
+        }
+        this.temp.set('cursorStatus', CursorStatus.NULL);
+        this.temp.set('mode', Mode.NULL);
+        if (this.temp.get('hasChangedElement') === true) {
+            emitChangeData();
+            this.temp.set('hasChangedElement', false);
+        }
+    }
+    _handleHover(point) {
+        var _a, _b;
+        let isMouseOverElement = false;
+        const { board, getDataFeekback, coreEvent } = this._opts;
+        const data = getDataFeekback();
+        const helper = this.helper;
+        const mapper = this._mapper;
+        if (this.temp.get('mode') === Mode.SELECT_AREA) {
+            board.resetCursor();
+        }
+        else if (this.temp.get('cursorStatus') === CursorStatus.NULL) {
+            const { cursor, elementUUID } = mapper.judgePointCursor(point, data);
+            board.setCursor(cursor);
+            if (elementUUID) {
+                const index = helper.getElementIndexByUUID(elementUUID);
+                if (index !== null && index >= 0) {
+                    const elem = data.elements[index];
+                    if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.lock) === true ||
+                        ((_b = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
+                        board.resetCursor();
+                        return;
+                    }
+                    if (this.temp.get('hoverUUID') !== elem.uuid) {
+                        const preIndex = helper.getElementIndexByUUID(this.temp.get('hoverUUID') || '');
+                        if (preIndex !== null && data.elements[preIndex]) {
+                            coreEvent.trigger('mouseLeaveElement', {
+                                uuid: this.temp.get('hoverUUID'),
+                                index: preIndex,
+                                element: data.elements[preIndex]
+                            });
+                        }
+                    }
+                    if (elem) {
+                        coreEvent.trigger('mouseOverElement', {
+                            uuid: elem.uuid,
+                            index,
+                            element: elem
+                        });
+                        this.temp.set('hoverUUID', elem.uuid);
+                        isMouseOverElement = true;
+                    }
+                }
+            }
+        }
+        if (isMouseOverElement !== true && this.temp.get('hoverUUID') !== null) {
+            const uuid = this.temp.get('hoverUUID');
+            const index = helper.getElementIndexByUUID(uuid || '');
+            if (index !== null)
+                coreEvent.trigger('mouseLeaveElement', {
+                    uuid,
+                    index,
+                    element: data.elements[index]
+                });
+            this.temp.set('hoverUUID', null);
+        }
+        if (coreEvent.has('mouseOverScreen'))
+            coreEvent.trigger('mouseOverScreen', point);
+    }
+    _handleLeave() {
+        const { coreEvent } = this._opts;
+        if (coreEvent.has('mouseLeaveScreen')) {
+            coreEvent.trigger('mouseLeaveScreen', undefined);
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import { TypeData, TypeHelper, TypeHelperConfig, TypeHelperUpdateOpts, TypeHelperWrapperControllerDirection, TypePoint, TypeConfigStrict } from '@idraw/types';
+import Board from '@idraw/board';
+export declare class Helper implements TypeHelper {
+    private _helperConfig;
+    private _coreConfig;
+    private _ctx;
+    private _board;
+    private _areaStart;
+    private _areaEnd;
+    constructor(board: Board, config: TypeConfigStrict);
+    updateConfig(data: TypeData, opts: TypeHelperUpdateOpts): void;
+    getConfig(): TypeHelperConfig;
+    getElementIndexByUUID(uuid: string): number | null;
+    isPointInElementWrapperController(p: TypePoint, data?: TypeData): {
+        uuid: string | null | undefined;
+        selectedControllerDirection: TypeHelperWrapperControllerDirection | null;
+        hoverControllerDirection: TypeHelperWrapperControllerDirection | null;
+        directIndex: number | null;
+    };
+    isPointInElementList(p: TypePoint, data: TypeData): boolean;
+    startSelectArea(p: TypePoint): void;
+    changeSelectArea(p: TypePoint): void;
+    clearSelectedArea(): void;
+    calcSelectedElements(data: TypeData): string[];
+    private _calcSelectedArea;
+    private _updateElementIndex;
+    private _updateSelectedElementWrapper;
+    private _updateSelectedElementListWrapper;
+    private _createSelectedElementWrapper;
+}