@idraw/core 0.4.0-beta.9 → 0.4.0

package/dist/esm/middlewares/selector/index.js

@@ -0,0 +1,879 @@
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, resizeEffectGroupElement, getElementSize, calcPointMoveElementInGroup, isSameElementSize, toFlattenElement } from '@idraw/util';
+import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { drawReferenceLines } from './draw-reference';
+import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup } from './util';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, rotateControllerSize, rotateControllerPosition, defaultStyle } from './config';
+import { calcReferenceInfo } from './reference';
+import { coreEventKeys } from '../../config';
+import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from '../layout-selector';
+import { createRotateControllerPattern } from './pattern';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
+export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
+export const MiddlewareSelector = (opts, config) => {
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { viewer, sharer, boardContent, calculator, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let prevPoint = null;
+    let pointStartElementSizeList = [];
+    let moveOriginalStartPoint = null;
+    let moveOriginalStartElementSize = null;
+    let inBusyMode = null;
+    let hasChangedData = null;
+    let rotateControllerPattern = createRotateControllerPattern({
+        fill: innerConfig.activeColor,
+        devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
+    });
+    let startResizeGroupRecord = null;
+    let endResizeGroupRecord = null;
+    sharer.setSharedStorage(keyActionType, null);
+    sharer.setSharedStorage(keyEnableSnapToGrid, true);
+    const getActiveElements = () => {
+        return sharer.getSharedStorage(keySelectedElementList);
+    };
+    const pushGroupQueue = (elem) => {
+        let groupQueue = sharer.getSharedStorage(keyGroupQueue);
+        if (!Array.isArray(groupQueue)) {
+            groupQueue = [];
+        }
+        if (groupQueue.length > 0) {
+            if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
+                groupQueue.push(elem);
+            }
+            else {
+                groupQueue = [];
+            }
+        }
+        else if (groupQueue.length === 0) {
+            groupQueue.push(elem);
+        }
+        const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue);
+        sharer.setSharedStorage(keyGroupQueue, groupQueue);
+        sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList);
+        return groupQueue.length > 0;
+    };
+    const updateHoverElement = (elem) => {
+        sharer.setSharedStorage(keyHoverElement, elem);
+        let vertexes = null;
+        if (elem) {
+            vertexes = calcElementVertexesInGroup(elem, {
+                groupQueue: sharer.getSharedStorage(keyGroupQueue)
+            });
+        }
+        sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
+    };
+    const updateSelectedElemenetController = () => {
+        const list = sharer.getSharedStorage(keySelectedElementList);
+        if (list.length === 1) {
+            const controller = calcElementSizeController(list[0], {
+                groupQueue: sharer.getSharedStorage(keyGroupQueue),
+                controllerSize,
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                rotateControllerPosition,
+                rotateControllerSize
+            });
+            sharer.setSharedStorage(keySelectedElementController, controller);
+        }
+    };
+    const updateSelectedElementList = (list, opts) => {
+        var _a;
+        sharer.setSharedStorage(keySelectedElementList, list);
+        if (list.length === 1) {
+            updateSelectedElemenetController();
+            sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
+        }
+        else {
+            sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementPosition, []);
+        }
+        if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
+            const uuids = list.map((elem) => elem.uuid);
+            const data = sharer.getActiveStorage('data');
+            const positionMap = getElementPositionMapFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            eventHub.trigger(coreEventKeys.SELECT, {
+                type: 'clickCanvas',
+                uuids,
+                positions: list.map((elem) => [...positionMap[elem.uuid]])
+            });
+        }
+    };
+    const pointTargetBaseOptions = () => {
+        return {
+            ctx: overlayContext,
+            calculator,
+            data: sharer.getActiveStorage('data'),
+            selectedElements: getActiveElements(),
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
+            groupQueue: sharer.getSharedStorage(keyGroupQueue),
+            areaSize: null,
+            selectedElementController: sharer.getSharedStorage(keySelectedElementController),
+            selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
+        };
+    };
+    const clear = () => {
+        startResizeGroupRecord = null;
+        endResizeGroupRecord = null;
+        sharer.setSharedStorage(keyActionType, null);
+        sharer.setSharedStorage(keyResizeType, null);
+        sharer.setSharedStorage(keyAreaStart, null);
+        sharer.setSharedStorage(keyAreaEnd, null);
+        sharer.setSharedStorage(keyGroupQueue, []);
+        sharer.setSharedStorage(keyGroupQueueVertexesList, []);
+        sharer.setSharedStorage(keyHoverElement, null);
+        sharer.setSharedStorage(keyHoverElementVertexes, null);
+        sharer.setSharedStorage(keySelectedElementList, []);
+        sharer.setSharedStorage(keySelectedElementListVertexes, null);
+        sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementPosition, []);
+        sharer.setSharedStorage(keyIsMoving, null);
+    };
+    clear();
+    const selectCallback = ({ uuids = [], positions }) => {
+        let elements = [];
+        const actionType = sharer.getSharedStorage(keyActionType);
+        const data = sharer.getActiveStorage('data');
+        if (positions && Array.isArray(positions)) {
+            elements = findElementsFromListByPositions(positions, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
+        else {
+            elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+        }
+        let needRefresh = false;
+        if (!actionType && elements.length === 1) {
+            sharer.setSharedStorage(keyActionType, 'select');
+            needRefresh = true;
+        }
+        else if (actionType === 'select' && elements.length === 1) {
+            needRefresh = true;
+        }
+        if (needRefresh) {
+            const elem = elements[0];
+            const groupQueue = getGroupQueueFromList(elem.uuid, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            sharer.setSharedStorage(keyGroupQueue, groupQueue);
+            updateSelectedElementList(elements);
+            viewer.drawFrame();
+        }
+    };
+    const selectClearCallback = () => {
+        clear();
+        viewer.drawFrame();
+    };
+    const setSnapToSnapCallback = (e) => {
+        sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
+    };
+    const selectInGroupCallback = (e) => {
+        sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
+    };
+    return {
+        name: '@middleware/selector',
+        use() {
+            eventHub.on(coreEventKeys.SELECT, selectCallback);
+            eventHub.on(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.on(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.on(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
+        },
+        disuse() {
+            eventHub.off(coreEventKeys.SELECT, selectCallback);
+            eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
+            clear();
+            innerConfig = null;
+        },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
+        hover: (e) => {
+            var _a, _b, _c, _d, _e;
+            const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
+            const layoutIsBusyMoving = sharer.getSharedStorage(keyLayoutIsBusyMoving);
+            if (layoutIsBusyMoving === true) {
+                return;
+            }
+            const resizeType = sharer.getSharedStorage(keyResizeType);
+            const actionType = sharer.getSharedStorage(keyActionType);
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            const triggerCursor = (target) => {
+                if (layoutIsSelected === true) {
+                    return;
+                }
+                const cursor = target.type;
+                if (inBusyMode === null) {
+                    eventHub.trigger(coreEventKeys.CURSOR, {
+                        type: cursor,
+                        groupQueue: target.groupQueue,
+                        element: target.elements[0]
+                    });
+                }
+            };
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                const isInActiveGroup = isPointInViewActiveGroup(e.point, {
+                    ctx: overlayContext,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue: sharer.getSharedStorage(keyGroupQueue)
+                });
+                if (!isInActiveGroup) {
+                    updateHoverElement(null);
+                    viewer.drawFrame();
+                    return;
+                }
+                const target = getPointTarget(e.point, pointTargetBaseOptions());
+                triggerCursor(target);
+                if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
+                    updateHoverElement(null);
+                    viewer.drawFrame();
+                    return;
+                }
+                if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    updateHoverElement(target.elements[0]);
+                    viewer.drawFrame();
+                    return;
+                }
+                updateHoverElement(null);
+                viewer.drawFrame();
+                return;
+            }
+            if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
+                updateHoverElement(null);
+                return;
+            }
+            if (actionType === 'drag') {
+                updateHoverElement(null);
+                return;
+            }
+            const selectedElements = getActiveElements();
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSizeInfo = sharer.getActiveViewSizeInfo();
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: calcSelectedElementsArea(selectedElements, {
+                    viewScaleInfo,
+                    viewSizeInfo,
+                    calculator
+                }) }));
+            triggerCursor(target);
+            if (target.type === null) {
+                if (sharer.getSharedStorage(keyHoverElement) || sharer.getSharedStorage(keyHoverElementVertexes)) {
+                    sharer.setSharedStorage(keyHoverElement, null);
+                    sharer.setSharedStorage(keyHoverElementVertexes, null);
+                    viewer.drawFrame();
+                }
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === 'select' &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_c = (_b = getActiveElements()) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' &&
+                sharer.getSharedStorage(keyActionType) === null &&
+                target.elements.length === 1 &&
+                target.elements[0].uuid === ((_d = sharer.getSharedStorage(keyHoverElement)) === null || _d === void 0 ? void 0 : _d.uuid)) {
+                return;
+            }
+            if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
+                updateHoverElement(target.elements[0]);
+                viewer.drawFrame();
+                return;
+            }
+            if (sharer.getSharedStorage(keyHoverElement)) {
+                updateHoverElement(null);
+                viewer.drawFrame();
+                return;
+            }
+        },
+        pointStart: (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            prevPoint = e.point;
+            moveOriginalStartPoint = e.point;
+            startResizeGroupRecord = null;
+            endResizeGroupRecord = null;
+            sharer.setSharedStorage(keyActionType, null);
+            sharer.setSharedStorage(keyResizeType, null);
+            sharer.setSharedStorage(keyAreaStart, null);
+            sharer.setSharedStorage(keyAreaEnd, null);
+            sharer.setSharedStorage(keyHoverElement, null);
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                if (isPointInViewActiveGroup(e.point, {
+                    ctx: overlayContext,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue
+                })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions());
+                    const isLockedElement = ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true;
+                    updateHoverElement(null);
+                    if (((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                        moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
+                    }
+                    if (isLockedElement === true) {
+                        clear();
+                    }
+                    else if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
+                        updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                        sharer.setSharedStorage(keyActionType, 'drag');
+                        pointStartElementSizeList = [Object.assign(Object.assign({}, getElementSize(target === null || target === void 0 ? void 0 : target.elements[0])), { uuid: target === null || target === void 0 ? void 0 : target.elements[0].uuid })];
+                    }
+                    else if ((_f = target.type) === null || _f === void 0 ? void 0 : _f.startsWith('resize-')) {
+                        sharer.setSharedStorage(keyResizeType, target.type);
+                        sharer.setSharedStorage(keyActionType, 'resize');
+                    }
+                    else {
+                        updateSelectedElementList([], { triggerEvent: true });
+                    }
+                }
+                else {
+                    clear();
+                }
+                viewer.drawFrame();
+                return;
+            }
+            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                calculator
+            });
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            const isLockedElement = ((_g = target === null || target === void 0 ? void 0 : target.elements) === null || _g === void 0 ? void 0 : _g.length) === 1 && ((_j = (_h = target.elements[0]) === null || _h === void 0 ? void 0 : _h.operations) === null || _j === void 0 ? void 0 : _j.locked) === true;
+            updateHoverElement(null);
+            if (((_k = target === null || target === void 0 ? void 0 : target.elements) === null || _k === void 0 ? void 0 : _k.length) === 1) {
+                moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
+            }
+            if (isLockedElement === true) {
+                clear();
+                sharer.setSharedStorage(keyActionType, 'area');
+                sharer.setSharedStorage(keyAreaStart, e.point);
+                updateSelectedElementList([], { triggerEvent: true });
+            }
+            else if (target.type === 'list-area') {
+                sharer.setSharedStorage(keyActionType, 'drag-list');
+            }
+            else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
+                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                sharer.setSharedStorage(keyActionType, 'drag');
+                pointStartElementSizeList = [Object.assign(Object.assign({}, getElementSize(target === null || target === void 0 ? void 0 : target.elements[0])), { uuid: target === null || target === void 0 ? void 0 : target.elements[0].uuid })];
+            }
+            else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
+                sharer.setSharedStorage(keyResizeType, target.type);
+                sharer.setSharedStorage(keyActionType, 'resize');
+            }
+            else {
+                clear();
+                sharer.setSharedStorage(keyActionType, 'area');
+                sharer.setSharedStorage(keyAreaStart, e.point);
+                updateSelectedElementList([], { triggerEvent: true });
+            }
+            viewer.drawFrame();
+        },
+        pointMove: (e) => {
+            var _a, _b, _c;
+            sharer.setSharedStorage(keyIsMoving, true);
+            const data = sharer.getActiveStorage('data');
+            const elems = getActiveElements();
+            const scale = sharer.getActiveStorage('scale') || 1;
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSizeInfo = sharer.getActiveViewSizeInfo();
+            const start = prevPoint;
+            const originalStart = moveOriginalStartPoint;
+            const end = e.point;
+            const resizeType = sharer.getSharedStorage(keyResizeType);
+            const actionType = sharer.getSharedStorage(keyActionType);
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
+            if (actionType === 'drag') {
+                hasChangedData = true;
+                inBusyMode = 'drag';
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
+                if (data &&
+                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
+                    moveOriginalStartElementSize &&
+                    originalStart &&
+                    end &&
+                    ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
+                    const { moveX, moveY } = calcPointMoveElementInGroup(originalStart, end, groupQueue);
+                    let totalMoveX = calculator.toGridNum(moveX / scale);
+                    let totalMoveY = calculator.toGridNum(moveY / scale);
+                    if (enableSnapToGrid === true) {
+                        const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                            calculator,
+                            data,
+                            groupQueue,
+                            viewScaleInfo,
+                            viewSizeInfo
+                        });
+                        try {
+                            if (referenceInfo) {
+                                if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                                    totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                                }
+                                if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                                    totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                                }
+                            }
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                    elems[0].x = calculator.toGridNum(moveOriginalStartElementSize.x + totalMoveX);
+                    elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
+                    updateSelectedElementList([elems[0]]);
+                    calculator.modifyVirtualFlatItemMap(data, {
+                        modifyInfo: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
+                }
+                viewer.drawFrame();
+            }
+            else if (actionType === 'drag-list') {
+                hasChangedData = true;
+                inBusyMode = 'drag-list';
+                if (data && originalStart && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
+                    const moveX = (end.x - start.x) / scale;
+                    const moveY = (end.y - start.y) / scale;
+                    elems.forEach((elem) => {
+                        var _a;
+                        if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) !== true) {
+                            elem.x = calculator.toGridNum(elem.x + moveX);
+                            elem.y = calculator.toGridNum(elem.y + moveY);
+                            calculator.modifyVirtualFlatItemMap(data, {
+                                modifyInfo: {
+                                    type: 'updateElement',
+                                    content: {
+                                        element: elem,
+                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
+                                    }
+                                },
+                                viewSizeInfo,
+                                viewScaleInfo
+                            });
+                        }
+                    });
+                    sharer.setActiveStorage('data', data);
+                }
+                viewer.drawFrame();
+            }
+            else if (actionType === 'resize') {
+                if (data &&
+                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
+                    originalStart &&
+                    moveOriginalStartElementSize &&
+                    (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
+                    hasChangedData = true;
+                    inBusyMode = 'resize';
+                    const pointGroupQueue = [];
+                    groupQueue.forEach((group) => {
+                        const { x, y, w, h, angle = 0 } = group;
+                        pointGroupQueue.push({
+                            x,
+                            y,
+                            w,
+                            h,
+                            angle: 0 - angle
+                        });
+                    });
+                    let resizeStart = originalStart;
+                    let resizeEnd = end;
+                    if (groupQueue.length > 0) {
+                        resizeStart = rotatePointInGroup(originalStart, pointGroupQueue);
+                        resizeEnd = rotatePointInGroup(end, pointGroupQueue);
+                    }
+                    if (resizeType === 'resize-rotate') {
+                        const controller = sharer.getSharedStorage(keySelectedElementController);
+                        const viewVertexes = [
+                            controller.topLeft.center,
+                            controller.topRight.center,
+                            controller.bottomLeft.center,
+                            controller.bottomRight.center
+                        ];
+                        const viewCenter = calcElementCenterFromVertexes(viewVertexes);
+                        const resizedElemSize = rotateElement(moveOriginalStartElementSize, {
+                            center: viewCenter,
+                            viewScaleInfo,
+                            viewSizeInfo,
+                            start: originalStart,
+                            end,
+                            resizeType,
+                            sharer
+                        });
+                        elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
+                    }
+                    else {
+                        const resizedElemSize = resizeElement(Object.assign(Object.assign({}, moveOriginalStartElementSize), { operations: elems[0].operations }), { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+                        const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
+                        const gridX = calculator.toGridNum(resizedElemSize.x, calcOpts);
+                        const gridY = calculator.toGridNum(resizedElemSize.y, calcOpts);
+                        const gridW = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                        const gridH = calculator.toGridNum(resizedElemSize.h, calcOpts);
+                        if (elems[0].type === 'group') {
+                            endResizeGroupRecord = resizeEffectGroupElement(elems[0], {
+                                x: gridX,
+                                y: gridY,
+                                w: gridW,
+                                h: gridH
+                            }, { resizeEffect: (_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.resizeEffect });
+                            if (!startResizeGroupRecord) {
+                                startResizeGroupRecord = endResizeGroupRecord;
+                            }
+                            elems[0].x = gridX;
+                            elems[0].y = gridY;
+                        }
+                        else {
+                            elems[0].x = gridX;
+                            elems[0].y = gridY;
+                            elems[0].w = gridW;
+                            elems[0].h = gridH;
+                        }
+                    }
+                    updateSelectedElementList([elems[0]]);
+                    calculator.modifyVirtualFlatItemMap(data, {
+                        modifyInfo: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
+                    viewer.drawFrame();
+                }
+            }
+            else if (actionType === 'area') {
+                inBusyMode = 'area';
+                sharer.setSharedStorage(keyAreaEnd, e.point);
+                viewer.drawFrame();
+            }
+            prevPoint = e.point;
+        },
+        pointEnd(e) {
+            inBusyMode = null;
+            sharer.setSharedStorage(keyIsMoving, false);
+            const data = sharer.getActiveStorage('data');
+            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+            const hoverElement = sharer.getSharedStorage(keyHoverElement);
+            const resizeType = sharer.getSharedStorage(keyResizeType);
+            const actionType = sharer.getSharedStorage(keyActionType);
+            const viewSizeInfo = sharer.getActiveViewSizeInfo();
+            let needDrawFrame = false;
+            prevPoint = null;
+            moveOriginalStartPoint = null;
+            moveOriginalStartElementSize = null;
+            if (actionType === 'drag') {
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: true });
+            }
+            if (actionType === 'resize' && resizeType) {
+                sharer.setSharedStorage(keyResizeType, null);
+                needDrawFrame = true;
+            }
+            else if (actionType === 'area') {
+                sharer.setSharedStorage(keyActionType, null);
+                if (data) {
+                    const start = sharer.getSharedStorage(keyAreaStart);
+                    const end = sharer.getSharedStorage(keyAreaEnd);
+                    if (start && end) {
+                        const { elements } = getSelectedListArea(data, {
+                            start,
+                            end,
+                            calculator,
+                            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                            viewSizeInfo: sharer.getActiveViewSizeInfo()
+                        });
+                        if (elements.length > 0) {
+                            sharer.setSharedStorage(keyActionType, 'drag-list');
+                            updateSelectedElementList(elements, { triggerEvent: true });
+                            needDrawFrame = true;
+                        }
+                    }
+                }
+            }
+            else if (actionType === 'drag-list') {
+                sharer.setSharedStorage(keyActionType, 'drag-list-end');
+                needDrawFrame = true;
+            }
+            else if (data) {
+                const result = calculator.getPointElement(e.point, {
+                    data,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo()
+                });
+                if (result.element) {
+                    sharer.setSharedStorage(keyActionType, 'select');
+                    needDrawFrame = true;
+                }
+                else {
+                    sharer.setSharedStorage(keyActionType, null);
+                }
+            }
+            if (sharer.getSharedStorage(keyActionType) === null) {
+                clear();
+                needDrawFrame = true;
+            }
+            const finalDrawFrame = () => {
+                if (!needDrawFrame) {
+                    return;
+                }
+                if (data && Array.isArray(data === null || data === void 0 ? void 0 : data.elements) && ['drag', 'drag-list'].includes(actionType)) {
+                    const viewInfo = calcElementsViewInfo(data.elements, viewSizeInfo, { extend: true });
+                    sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
+                    sharer.setActiveStorage('contextWidth', viewInfo.contextSize.contextWidth);
+                }
+                if (data && ['drag', 'drag-list', 'drag-list-end', 'resize'].includes(actionType)) {
+                    let type = 'resizeElement';
+                    if (type === 'resize') {
+                        type = 'resizeElement';
+                    }
+                    if (hasChangedData) {
+                        const startSize = pointStartElementSizeList[0];
+                        let modifyRecord = null;
+                        if (selectedElements.length === 1) {
+                            modifyRecord = {
+                                type: 'resizeElement',
+                                time: 0,
+                                content: {
+                                    method: 'modifyElement',
+                                    uuid: startSize.uuid,
+                                    before: toFlattenElement(startSize),
+                                    after: toFlattenElement(getElementSize(selectedElements[0]))
+                                }
+                            };
+                            if (selectedElements[0].type === 'group' && startResizeGroupRecord && endResizeGroupRecord) {
+                                modifyRecord = Object.assign(Object.assign({}, endResizeGroupRecord), { content: Object.assign(Object.assign({}, endResizeGroupRecord.content), { before: startResizeGroupRecord.content.before }) });
+                            }
+                        }
+                        else if (selectedElements.length > 1) {
+                            modifyRecord = {
+                                type: 'resizeElements',
+                                time: 0,
+                                content: {
+                                    method: 'modifyElements',
+                                    before: pointStartElementSizeList.map((item) => (Object.assign(Object.assign({}, toFlattenElement(item)), { uuid: item.uuid }))),
+                                    after: selectedElements.map((item) => (Object.assign(Object.assign({}, toFlattenElement(getElementSize(item))), { uuid: item.uuid })))
+                                }
+                            };
+                        }
+                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement, modifyRecord });
+                        hasChangedData = false;
+                    }
+                }
+                viewer.drawFrame();
+            };
+            finalDrawFrame();
+        },
+        pointLeave() {
+            inBusyMode = null;
+            sharer.setSharedStorage(keyResizeType, null);
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'default'
+            });
+        },
+        doubleClick(e) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
+                return;
+            }
+            const target = getPointTarget(e.point, pointTargetBaseOptions());
+            sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementList, []);
+            if (target.elements.length === 1 && ((_b = (_a = target.elements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) === true) {
+                return;
+            }
+            if (target.elements.length === 1 && ((_c = target.elements[0]) === null || _c === void 0 ? void 0 : _c.type) === 'group') {
+                const pushResult = pushGroupQueue(target.elements[0]);
+                if (pushResult === true) {
+                    sharer.setSharedStorage(keyActionType, null);
+                    viewer.drawFrame();
+                    return;
+                }
+            }
+            else if (target.elements.length === 1 &&
+                ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' &&
+                !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
+                eventHub.trigger(coreEventKeys.TEXT_EDIT, {
+                    element: target.elements[0],
+                    groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
+                    position: getElementPositionFromList((_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage('data')) === null || _h === void 0 ? void 0 : _h.elements) || []),
+                    viewScaleInfo: sharer.getActiveViewScaleInfo()
+                });
+            }
+            sharer.setSharedStorage(keyActionType, null);
+        },
+        wheel() {
+            updateSelectedElemenetController();
+        },
+        wheelScale() {
+            updateSelectedElemenetController();
+        },
+        contextMenu: (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                if (isPointInViewActiveGroup(e.point, {
+                    ctx: overlayContext,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue
+                })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions());
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) !== true) {
+                        clear();
+                        updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                        viewer.drawFrame();
+                    }
+                    else if (!((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length)) {
+                        clear();
+                    }
+                }
+                return;
+            }
+            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                calculator
+            });
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_g = (_f = target.elements[0]) === null || _f === void 0 ? void 0 : _f.operations) === null || _g === void 0 ? void 0 : _g.locked) !== true) {
+                clear();
+                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                viewer.drawFrame();
+                return;
+            }
+            else if (!((_h = target === null || target === void 0 ? void 0 : target.elements) === null || _h === void 0 ? void 0 : _h.length)) {
+                clear();
+            }
+        },
+        beforeDrawFrame({ snapshot }) {
+            var _a;
+            const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
+            const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
+            const { activeStore, sharedStore } = snapshot;
+            const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+            if (rotateControllerPattern.fill !== activeColor) {
+                rotateControllerPattern = createRotateControllerPattern({
+                    fill: innerConfig.activeColor,
+                    devicePixelRatio
+                });
+            }
+            const sharer = opts.sharer;
+            const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
+            const viewSizeInfo = { width, height, contextHeight, contextWidth, devicePixelRatio };
+            const selectedElements = sharedStore[keySelectedElementList];
+            const elem = selectedElements[0];
+            const hoverElement = sharedStore[keyHoverElement];
+            const hoverElementVertexes = sharedStore[keyHoverElementVertexes];
+            const actionType = sharedStore[keyActionType];
+            const areaStart = sharedStore[keyAreaStart];
+            const areaEnd = sharedStore[keyAreaEnd];
+            const groupQueue = sharedStore[keyGroupQueue];
+            const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
+            const isMoving = sharedStore[keyIsMoving];
+            const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
+            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
+            let selectedElementController = sharedStore[keySelectedElementController];
+            if (selectedElementController && selectedElements.length === 1 && elem) {
+                if (!isSameElementSize(elem, selectedElementController.originalElementSize)) {
+                    selectedElementController = calcElementSizeController(elem, {
+                        groupQueue: groupQueue || [],
+                        controllerSize,
+                        viewScaleInfo,
+                        rotateControllerPosition,
+                        rotateControllerSize
+                    });
+                    sharer.setSharedStorage(keySelectedElementController, selectedElementController);
+                }
+            }
+            const isHoverLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
+                if (hoverElement && actionType !== 'drag') {
+                    if (isHoverLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
+                    }
+                }
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern: rotateControllerPattern.context2d, style }));
+                    if (actionType === 'drag') {
+                        if (enableSnapToGrid === true) {
+                            const referenceInfo = calcReferenceInfo(elem.uuid, {
+                                calculator,
+                                data: activeStore.data,
+                                groupQueue,
+                                viewScaleInfo,
+                                viewSizeInfo
+                            });
+                            if (referenceInfo) {
+                                const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                                if (offsetX === 0 || offsetY === 0) {
+                                    drawReferenceLines(overlayContext, {
+                                        xLines,
+                                        yLines,
+                                        style
+                                    });
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                if (hoverElement && actionType !== 'drag') {
+                    if (isHoverLocked) {
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
+                    }
+                    else {
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
+                    }
+                }
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern: rotateControllerPattern.context2d, style }));
+                    if (actionType === 'drag') {
+                        if (enableSnapToGrid === true) {
+                            const referenceInfo = calcReferenceInfo(elem.uuid, {
+                                calculator,
+                                data: activeStore.data,
+                                groupQueue,
+                                viewScaleInfo,
+                                viewSizeInfo
+                            });
+                            if (referenceInfo) {
+                                const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+                                if (offsetX === 0 || offsetY === 0) {
+                                    drawReferenceLines(overlayContext, {
+                                        xLines,
+                                        yLines,
+                                        style
+                                    });
+                                }
+                            }
+                        }
+                    }
+                }
+                else if (actionType === 'area' && areaStart && areaEnd) {
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
+                }
+                else if (['drag-list', 'drag-list-end'].includes(actionType)) {
+                    const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+                        viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                        viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                        calculator
+                    });
+                    if (listAreaSize) {
+                        drawListArea(overlayContext, { areaSize: listAreaSize, style });
+                    }
+                }
+            }
+        }
+    };
+};