@idraw/core 0.4.2 → 1.0.0-alpha.1

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

@@ -1,157 +1,108 @@
-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 { is, calcMaterialsViewInfo, rotatePointInGroup, getGroupQueueFromList, findMaterialsFromList, findMaterialsFromListByPositions, getMaterialPositionFromList, getMaterialPositionMapFromList, resizeEffectGroupMaterial, getMaterialSize, calcPointMoveMaterialInGroup, toFlattenMaterial, isPointInMiddlewareElement, } from '@idraw/util';
+import { getPointTarget, resizeMaterial, rotateMaterial, getSelectedListArea, calcSelectedMaterialsArea, isMaterialInGroup, } from './util';
+import { keyPrevPoint, keyPointStartMaterialSizeList, keyMoveOriginalStartPoint, keyMoveOriginalStartMaterialSize, keyInBusyMode, keyHasChangedData, keyStartResizeGroupRecord, keyEndResizeGroupRecord, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyHoverMaterial, keySelectedMaterialList, keySelectedMaterialPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, defaultStyle, clearStorage, } from './static';
 import { calcReferenceInfo } from './reference';
-import { coreEventKeys } from '../../config';
+import { coreEventKeys } from '../../static';
 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 };
+import { getRootClassName } from './static';
+import { initRoot, isPointInActiveGroup } from './dom';
+import { initStyles, destroyStyles, getMiddlewareSelectorStyles } from './styles';
+import { dragAndResizeMaterial } from './resize';
+import { renderFrame } from './render-frame';
+import { triggerChangeEvent } from '../common';
+export { keySelectedMaterialList, keyHoverMaterial, keyActionType, keyResizeType, keyGroupQueue };
+export { getMiddlewareSelectorStyles };
 export const MiddlewareSelector = (opts, config) => {
     let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const styles = getMiddlewareSelectorStyles(innerConfig);
+    const rootClassName = getRootClassName();
+    let $root = null;
     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) => {
+    const pushGroupQueue = (mtrl) => {
         let groupQueue = sharer.getSharedStorage(keyGroupQueue);
         if (!Array.isArray(groupQueue)) {
             groupQueue = [];
         }
         if (groupQueue.length > 0) {
-            if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) {
-                groupQueue.push(elem);
+            if (isMaterialInGroup(mtrl, groupQueue[groupQueue.length - 1])) {
+                groupQueue.push(mtrl);
             }
             else {
                 groupQueue = [];
             }
         }
         else if (groupQueue.length === 0) {
-            groupQueue.push(elem);
+            groupQueue.push(mtrl);
         }
-        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) => {
+    const updateSelectedMaterialList = (list, opts) => {
         var _a;
-        sharer.setSharedStorage(keySelectedElementList, list);
+        sharer.setSharedStorage(keySelectedMaterialList, 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) || []));
+            sharer.setSharedStorage(keySelectedMaterialPosition, getMaterialPositionFromList(list[0].id, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.materials) || []));
         }
         else {
-            sharer.setSharedStorage(keySelectedElementController, null);
-            sharer.setSharedStorage(keySelectedElementPosition, []);
+            sharer.setSharedStorage(keySelectedMaterialPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            const uuids = list.map((elem) => elem.uuid);
+            const ids = list.map((mtrl) => mtrl.id);
             const data = sharer.getActiveStorage('data');
-            const positionMap = getElementPositionMapFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            const positionMap = getMaterialPositionMapFromList(ids, (data === null || data === void 0 ? void 0 : data.materials) || []);
             eventHub.trigger(coreEventKeys.SELECT, {
                 type: 'clickCanvas',
-                uuids,
-                positions: list.map((elem) => [...positionMap[elem.uuid]])
+                ids,
+                positions: list.map((mtrl) => [...positionMap[mtrl.id]]),
             });
         }
     };
-    const pointTargetBaseOptions = () => {
+    const pointTargetBaseOptions = (pwe) => {
         return {
             ctx: overlayContext,
             calculator,
             data: sharer.getActiveStorage('data'),
-            selectedElements: getActiveElements(),
+            selectedMaterials: sharer.getSharedStorage(keySelectedMaterialList),
             viewScaleInfo: sharer.getActiveViewScaleInfo(),
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue: sharer.getSharedStorage(keyGroupQueue),
             areaSize: null,
-            selectedElementController: sharer.getSharedStorage(keySelectedElementController),
-            selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
+            selectedMaterialPosition: sharer.getSharedStorage(keySelectedMaterialPosition),
+            nativeEvent: pwe.nativeEvent,
         };
     };
-    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);
-    };
+    const clear = () => clearStorage(sharer);
     clear();
-    const selectCallback = ({ uuids = [], positions }) => {
-        let elements = [];
+    const selectCallback = ({ ids = [], positions }) => {
+        let materials = [];
         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) || []);
+            materials = findMaterialsFromListByPositions(positions, (data === null || data === void 0 ? void 0 : data.materials) || []);
         }
         else {
-            elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            materials = findMaterialsFromList(ids, (data === null || data === void 0 ? void 0 : data.materials) || []);
         }
         let needRefresh = false;
-        if (!actionType && elements.length === 1) {
+        if (!actionType && materials.length === 1) {
             sharer.setSharedStorage(keyActionType, 'select');
             needRefresh = true;
         }
-        else if (actionType === 'select' && elements.length === 1) {
+        else if (actionType === 'select' && materials.length === 1) {
             needRefresh = true;
         }
         if (needRefresh) {
-            const elem = elements[0];
-            const groupQueue = getGroupQueueFromList(elem.uuid, (data === null || data === void 0 ? void 0 : data.elements) || []);
+            const mtrl = materials[0];
+            const groupQueue = getGroupQueueFromList(mtrl.id, (data === null || data === void 0 ? void 0 : data.materials) || []);
             sharer.setSharedStorage(keyGroupQueue, groupQueue);
-            updateSelectedElementList(elements);
-            pointStartElementSizeList = [Object.assign(Object.assign({}, getElementSize(elements[0])), { uuid: elements[0].uuid })];
+            updateSelectedMaterialList(materials);
+            sharer.setSharedStorage(keyPointStartMaterialSizeList, [
+                Object.assign(Object.assign({}, getMaterialSize(materials[0])), { id: materials[0].id }),
+            ]);
             viewer.drawFrame();
         }
     };
@@ -168,24 +119,36 @@ export const MiddlewareSelector = (opts, config) => {
     return {
         name: '@middleware/selector',
         use() {
+            initStyles(rootClassName, styles);
+            $root = initRoot({ rootClassName, $container: opts.container });
             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() {
+            destroyStyles(rootClassName);
             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);
+            $root === null || $root === void 0 ? void 0 : $root.remove();
             clear();
             innerConfig = null;
+            $root = null;
         },
         resetConfig(config) {
             innerConfig = Object.assign(Object.assign({}, innerConfig), config);
         },
         hover: (e) => {
             var _a, _b, _c, _d, _e;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                if (sharer.getSharedStorage(keyHoverMaterial)) {
+                    sharer.setSharedStorage(keyHoverMaterial, null);
+                    viewer.drawFrame();
+                }
+                return;
+            }
             const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
             const layoutIsBusyMoving = sharer.getSharedStorage(keyLayoutIsBusyMoving);
             if (layoutIsBusyMoving === true) {
@@ -199,129 +162,126 @@ export const MiddlewareSelector = (opts, config) => {
                     return;
                 }
                 const cursor = target.type;
-                if (inBusyMode === null) {
+                if (sharer.getSharedStorage(keyInBusyMode) === null) {
                     eventHub.trigger(coreEventKeys.CURSOR, {
                         type: cursor,
                         groupQueue: target.groupQueue,
-                        element: target.elements[0]
+                        material: target.materials[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)
+                const isInActiveGroup = isPointInActiveGroup(e.nativeEvent, {
+                    $root,
+                    groupQueue: sharer.getSharedStorage(keyGroupQueue),
                 });
                 if (!isInActiveGroup) {
-                    updateHoverElement(null);
+                    sharer.setSharedStorage(keyHoverMaterial, null);
                     viewer.drawFrame();
                     return;
                 }
-                const target = getPointTarget(e.point, pointTargetBaseOptions());
+                const target = getPointTarget(e.point, pointTargetBaseOptions(e));
                 triggerCursor(target);
                 if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
-                    updateHoverElement(null);
+                    sharer.setSharedStorage(keyHoverMaterial, 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]);
+                if (((_a = target === null || target === void 0 ? void 0 : target.materials) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                    sharer.setSharedStorage(keyHoverMaterial, target.materials[0]);
                     viewer.drawFrame();
                     return;
                 }
-                updateHoverElement(null);
+                sharer.setSharedStorage(keyHoverMaterial, null);
                 viewer.drawFrame();
                 return;
             }
             if (resizeType || ['area', 'drag', 'drag-list'].includes(actionType)) {
-                updateHoverElement(null);
+                sharer.setSharedStorage(keyHoverMaterial, null);
                 return;
             }
             if (actionType === 'drag') {
-                updateHoverElement(null);
+                sharer.setSharedStorage(keyHoverMaterial, null);
                 return;
             }
-            const selectedElements = getActiveElements();
+            const selectedMaterials = sharer.getSharedStorage(keySelectedMaterialList);
             const viewScaleInfo = sharer.getActiveViewScaleInfo();
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
-            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: calcSelectedElementsArea(selectedElements, {
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions(e)), { areaSize: calcSelectedMaterialsArea(selectedMaterials, {
                     viewScaleInfo,
                     viewSizeInfo,
-                    calculator
+                    calculator,
                 }) }));
             triggerCursor(target);
             if (target.type === null) {
-                if (sharer.getSharedStorage(keyHoverElement) || sharer.getSharedStorage(keyHoverElementVertexes)) {
-                    sharer.setSharedStorage(keyHoverElement, null);
-                    sharer.setSharedStorage(keyHoverElementVertexes, null);
+                if (sharer.getSharedStorage(keyHoverMaterial)) {
+                    sharer.setSharedStorage(keyHoverMaterial, null);
                     viewer.drawFrame();
                 }
                 return;
             }
-            if (target.type === 'over-element' &&
+            if (target.type === 'over-material' &&
                 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)) {
+                target.materials.length === 1 &&
+                target.materials[0].id === ((_c = (_b = sharer.getSharedStorage(keySelectedMaterialList)) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id)) {
                 return;
             }
-            if (target.type === 'over-element' &&
+            if (target.type === 'over-material' &&
                 sharer.getSharedStorage(keyActionType) === null &&
-                target.elements.length === 1 &&
-                target.elements[0].uuid === ((_d = sharer.getSharedStorage(keyHoverElement)) === null || _d === void 0 ? void 0 : _d.uuid)) {
+                target.materials.length === 1 &&
+                target.materials[0].id === ((_d = sharer.getSharedStorage(keyHoverMaterial)) === null || _d === void 0 ? void 0 : _d.id)) {
                 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]);
+            if (target.type === 'over-material' && ((_e = target === null || target === void 0 ? void 0 : target.materials) === null || _e === void 0 ? void 0 : _e.length) === 1) {
+                sharer.setSharedStorage(keyHoverMaterial, target.materials[0]);
                 viewer.drawFrame();
                 return;
             }
-            if (sharer.getSharedStorage(keyHoverElement)) {
-                updateHoverElement(null);
+            if (sharer.getSharedStorage(keyHoverMaterial)) {
+                sharer.setSharedStorage(keyHoverMaterial, 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;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                return;
+            }
+            sharer.setSharedStorage(keyPrevPoint, e.point);
+            sharer.setSharedStorage(keyMoveOriginalStartPoint, e.point);
+            sharer.setSharedStorage(keyStartResizeGroupRecord, null);
+            sharer.setSharedStorage(keyEndResizeGroupRecord, null);
             sharer.setSharedStorage(keyActionType, null);
             sharer.setSharedStorage(keyResizeType, null);
             sharer.setSharedStorage(keyAreaStart, null);
             sharer.setSharedStorage(keyAreaEnd, null);
-            sharer.setSharedStorage(keyHoverElement, null);
+            sharer.setSharedStorage(keyHoverMaterial, 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 (isPointInActiveGroup(e.nativeEvent, { $root, groupQueue })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions(e));
+                    const isLockedMaterial = ((_a = target === null || target === void 0 ? void 0 : target.materials) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.materials[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true;
+                    sharer.setSharedStorage(keyHoverMaterial, null);
+                    if (((_d = target === null || target === void 0 ? void 0 : target.materials) === null || _d === void 0 ? void 0 : _d.length) === 1) {
+                        sharer.setSharedStorage(keyMoveOriginalStartMaterialSize, getMaterialSize(target === null || target === void 0 ? void 0 : target.materials[0]));
                     }
-                    if (isLockedElement === true) {
+                    if (isLockedMaterial === 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 });
+                    else if (target.type === 'over-material' && ((_e = target === null || target === void 0 ? void 0 : target.materials) === null || _e === void 0 ? void 0 : _e.length) === 1) {
+                        updateSelectedMaterialList([target.materials[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 })];
+                        sharer.setSharedStorage(keyPointStartMaterialSizeList, [
+                            Object.assign(Object.assign({}, getMaterialSize(target === null || target === void 0 ? void 0 : target.materials[0])), { id: target === null || target === void 0 ? void 0 : target.materials[0].id }),
+                        ]);
                     }
                     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 });
+                        updateSelectedMaterialList([], { triggerEvent: true });
                     }
                 }
                 else {
@@ -330,30 +290,33 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
                 return;
             }
-            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+            const listAreaSize = calcSelectedMaterialsArea(sharer.getSharedStorage(keySelectedMaterialList), {
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
                 viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                calculator
+                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]);
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions(e)), { areaSize: listAreaSize, groupQueue: [] }));
+            const isLockedMaterial = ((_g = target === null || target === void 0 ? void 0 : target.materials) === null || _g === void 0 ? void 0 : _g.length) === 1 && ((_j = (_h = target.materials[0]) === null || _h === void 0 ? void 0 : _h.operations) === null || _j === void 0 ? void 0 : _j.locked) === true;
+            sharer.setSharedStorage(keyHoverMaterial, null);
+            if (((_k = target === null || target === void 0 ? void 0 : target.materials) === null || _k === void 0 ? void 0 : _k.length) === 1) {
+                sharer.setSharedStorage(keyMoveOriginalStartMaterialSize, getMaterialSize(target === null || target === void 0 ? void 0 : target.materials[0]));
             }
-            if (isLockedElement === true) {
+            if (isLockedMaterial === true) {
                 clear();
+                sharer.setSharedStorage(keyHoverMaterial, target === null || target === void 0 ? void 0 : target.materials[0]);
                 sharer.setSharedStorage(keyActionType, 'area');
                 sharer.setSharedStorage(keyAreaStart, e.point);
-                updateSelectedElementList([], { triggerEvent: true });
+                updateSelectedMaterialList([], { 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 });
+            else if (target.type === 'over-material' && ((_l = target === null || target === void 0 ? void 0 : target.materials) === null || _l === void 0 ? void 0 : _l.length) === 1) {
+                updateSelectedMaterialList([target.materials[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 })];
+                sharer.setSharedStorage(keyPointStartMaterialSizeList, [
+                    Object.assign(Object.assign({}, getMaterialSize(target === null || target === void 0 ? void 0 : target.materials[0])), { id: target === null || target === void 0 ? void 0 : target.materials[0].id }),
+                ]);
             }
             else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
                 sharer.setSharedStorage(keyResizeType, target.type);
@@ -363,45 +326,49 @@ export const MiddlewareSelector = (opts, config) => {
                 clear();
                 sharer.setSharedStorage(keyActionType, 'area');
                 sharer.setSharedStorage(keyAreaStart, e.point);
-                updateSelectedElementList([], { triggerEvent: true });
+                updateSelectedMaterialList([], { triggerEvent: true });
             }
             viewer.drawFrame();
         },
         pointMove: (e) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                return;
+            }
             sharer.setSharedStorage(keyIsMoving, true);
             const data = sharer.getActiveStorage('data');
-            const elems = getActiveElements();
+            const mtrls = sharer.getSharedStorage(keySelectedMaterialList);
             const scale = sharer.getActiveStorage('scale') || 1;
             const viewScaleInfo = sharer.getActiveViewScaleInfo();
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
-            const start = prevPoint;
-            const originalStart = moveOriginalStartPoint;
+            const start = sharer.getSharedStorage(keyPrevPoint);
+            const originalStart = sharer.getSharedStorage(keyMoveOriginalStartPoint);
             const end = e.point;
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
+            let modifyType = 'unknown';
             if (actionType === 'drag') {
-                hasChangedData = true;
-                inBusyMode = 'drag';
+                sharer.setSharedStorage(keyHasChangedData, true);
+                sharer.setSharedStorage(keyInBusyMode, 'drag');
                 eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
                 if (data &&
-                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
-                    moveOriginalStartElementSize &&
+                    (mtrls === null || mtrls === void 0 ? void 0 : mtrls.length) === 1 &&
+                    sharer.getSharedStorage(keyMoveOriginalStartMaterialSize) &&
                     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);
+                    ((_b = (_a = mtrls[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
+                    const { moveX, moveY } = calcPointMoveMaterialInGroup(originalStart, end, groupQueue);
                     let totalMoveX = calculator.toGridNum(moveX / scale);
                     let totalMoveY = calculator.toGridNum(moveY / scale);
                     if (enableSnapToGrid === true) {
-                        const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                        const referenceInfo = calcReferenceInfo(mtrls[0].id, {
                             calculator,
                             data,
                             groupQueue,
                             viewScaleInfo,
-                            viewSizeInfo
+                            viewSizeInfo,
                         });
                         try {
                             if (referenceInfo) {
@@ -417,44 +384,53 @@ export const MiddlewareSelector = (opts, config) => {
                             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, {
+                    const moveOriginalStartMaterialSize = sharer.getSharedStorage(keyMoveOriginalStartMaterialSize);
+                    const newX = calculator.toGridNum(moveOriginalStartMaterialSize.x + totalMoveX);
+                    const newY = calculator.toGridNum(moveOriginalStartMaterialSize.y + totalMoveY);
+                    dragAndResizeMaterial(mtrls[0], {
+                        x: newX,
+                        y: newY,
+                        width: mtrls[0].width,
+                        height: mtrls[0].height,
+                    });
+                    updateSelectedMaterialList([mtrls[0]]);
+                    modifyType = 'updateMaterial';
+                    calculator.modifyVirtualItemMap(data, {
                         modifyInfo: {
-                            type: 'updateElement',
+                            type: modifyType,
                             content: {
-                                element: elems[0],
-                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
-                            }
+                                material: mtrls[0],
+                                position: sharer.getSharedStorage(keySelectedMaterialPosition) || [],
+                            },
                         },
                         viewSizeInfo,
-                        viewScaleInfo
+                        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) {
+                sharer.setSharedStorage(keyHasChangedData, true);
+                sharer.setSharedStorage(keyInBusyMode, 'drag-list');
+                if (data && originalStart && start && end && (mtrls === null || mtrls === void 0 ? void 0 : mtrls.length) > 1) {
                     const moveX = (end.x - start.x) / scale;
                     const moveY = (end.y - start.y) / scale;
-                    elems.forEach((elem) => {
+                    mtrls.forEach((mtrl) => {
                         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, {
+                        if (mtrl && ((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.locked) !== true) {
+                            mtrl.x = calculator.toGridNum(mtrl.x + moveX);
+                            mtrl.y = calculator.toGridNum(mtrl.y + moveY);
+                            modifyType = 'updateMaterial';
+                            calculator.modifyVirtualItemMap(data, {
                                 modifyInfo: {
-                                    type: 'updateElement',
+                                    type: modifyType,
                                     content: {
-                                        element: elem,
-                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
-                                    }
+                                        material: mtrl,
+                                        position: getMaterialPositionFromList(mtrl.id, data.materials) || [],
+                                    },
                                 },
                                 viewSizeInfo,
-                                viewScaleInfo
+                                viewScaleInfo,
                             });
                         }
                     });
@@ -464,21 +440,21 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else if (actionType === 'resize') {
                 if (data &&
-                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
+                    (mtrls === null || mtrls === void 0 ? void 0 : mtrls.length) === 1 &&
                     originalStart &&
-                    moveOriginalStartElementSize &&
+                    sharer.getSharedStorage(keyMoveOriginalStartMaterialSize) &&
                     (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
-                    hasChangedData = true;
-                    inBusyMode = 'resize';
+                    sharer.setSharedStorage(keyHasChangedData, true);
+                    sharer.setSharedStorage(keyInBusyMode, 'resize');
                     const pointGroupQueue = [];
                     groupQueue.forEach((group) => {
-                        const { x, y, w, h, angle = 0 } = group;
+                        const { x, y, width, height, angle = 0 } = group;
                         pointGroupQueue.push({
                             x,
                             y,
-                            w,
-                            h,
-                            angle: 0 - angle
+                            width,
+                            height,
+                            angle: 0 - angle,
                         });
                     });
                     let resizeStart = originalStart;
@@ -488,87 +464,99 @@ export const MiddlewareSelector = (opts, config) => {
                         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,
+                        const moveOriginalStartMaterialSize = sharer.getSharedStorage(keyMoveOriginalStartMaterialSize);
+                        const virtualItem = calculator.getVirtualItem((_c = mtrls === null || mtrls === void 0 ? void 0 : mtrls[0]) === null || _c === void 0 ? void 0 : _c.id);
+                        const worldCenter = virtualItem === null || virtualItem === void 0 ? void 0 : virtualItem.worldCenter;
+                        const resizedMtrlSize = rotateMaterial(moveOriginalStartMaterialSize, {
+                            center: worldCenter,
                             viewScaleInfo,
                             viewSizeInfo,
                             start: originalStart,
                             end,
                             resizeType,
-                            sharer
+                            sharer,
+                            calculator,
                         });
-                        elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
+                        mtrls[0].angle = calculator.toGridNum(resizedMtrlSize.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], {
+                        const moveOriginalStartMaterialSize = sharer.getSharedStorage(keyMoveOriginalStartMaterialSize);
+                        const resizedMtrlSize = resizeMaterial(Object.assign(Object.assign({}, moveOriginalStartMaterialSize), { operations: mtrls[0].operations }), { scale, start: resizeStart, end: resizeEnd, resizeType, sharer, calculator });
+                        const calcOpts = { ignore: !!moveOriginalStartMaterialSize.angle };
+                        const gridX = calculator.toGridNum(resizedMtrlSize.x, calcOpts);
+                        const gridY = calculator.toGridNum(resizedMtrlSize.y, calcOpts);
+                        const gridW = calculator.toGridNum(resizedMtrlSize.width, calcOpts);
+                        const gridH = calculator.toGridNum(resizedMtrlSize.height, calcOpts);
+                        if (mtrls[0].type === 'group') {
+                            sharer.setSharedStorage(keyEndResizeGroupRecord, resizeEffectGroupMaterial(mtrls[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;
+                                width: gridW,
+                                height: gridH,
+                            }, { resizeEffect: (_d = mtrls[0].operations) === null || _d === void 0 ? void 0 : _d.resizeEffect }));
+                            if (!sharer.getSharedStorage(keyStartResizeGroupRecord)) {
+                                sharer.setSharedStorage(keyStartResizeGroupRecord, sharer.getSharedStorage(keyEndResizeGroupRecord));
                             }
-                            elems[0].x = gridX;
-                            elems[0].y = gridY;
+                            mtrls[0].x = gridX;
+                            mtrls[0].y = gridY;
                         }
                         else {
-                            elems[0].x = gridX;
-                            elems[0].y = gridY;
-                            elems[0].w = gridW;
-                            elems[0].h = gridH;
+                            dragAndResizeMaterial(mtrls[0], {
+                                x: gridX,
+                                y: gridY,
+                                width: gridW,
+                                height: gridH,
+                            });
                         }
                     }
-                    updateSelectedElementList([elems[0]]);
-                    calculator.modifyVirtualFlatItemMap(data, {
+                    updateSelectedMaterialList([mtrls[0]]);
+                    modifyType = 'updateMaterial';
+                    calculator.modifyVirtualItemMap(data, {
                         modifyInfo: {
-                            type: 'updateElement',
+                            type: modifyType,
                             content: {
-                                element: elems[0],
-                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
-                            }
+                                material: mtrls[0],
+                                position: sharer.getSharedStorage(keySelectedMaterialPosition) || [],
+                            },
                         },
                         viewSizeInfo,
-                        viewScaleInfo
+                        viewScaleInfo,
                     });
                     viewer.drawFrame();
                 }
             }
             else if (actionType === 'area') {
-                inBusyMode = 'area';
+                sharer.setSharedStorage(keyInBusyMode, 'area');
                 sharer.setSharedStorage(keyAreaEnd, e.point);
                 viewer.drawFrame();
             }
-            prevPoint = e.point;
+            const selectedMaterials = sharer.getSharedStorage(keySelectedMaterialList);
+            triggerChangeEvent(eventHub, {
+                data,
+                type: 'updatingMaterial',
+                selectedMaterials,
+                hoverMaterial: null,
+                modifyRecord: null,
+            }, 'continuous');
+            sharer.setSharedStorage(keyPrevPoint, e.point);
         },
         pointEnd(e) {
-            inBusyMode = null;
+            var _a;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                return;
+            }
+            sharer.setSharedStorage(keyInBusyMode, null);
             sharer.setSharedStorage(keyIsMoving, false);
             const data = sharer.getActiveStorage('data');
-            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
-            const hoverElement = sharer.getSharedStorage(keyHoverElement);
+            const selectedMaterials = sharer.getSharedStorage(keySelectedMaterialList);
+            const hoverMaterial = sharer.getSharedStorage(keyHoverMaterial);
             const resizeType = sharer.getSharedStorage(keyResizeType);
             const actionType = sharer.getSharedStorage(keyActionType);
             const viewSizeInfo = sharer.getActiveViewSizeInfo();
             let needDrawFrame = false;
-            prevPoint = null;
-            moveOriginalStartPoint = null;
-            moveOriginalStartElementSize = null;
+            sharer.setSharedStorage(keyPrevPoint, null);
+            sharer.setSharedStorage(keyMoveOriginalStartPoint, null);
+            sharer.setSharedStorage(keyMoveOriginalStartMaterialSize, null);
             if (actionType === 'drag') {
                 eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: true });
             }
@@ -577,21 +565,26 @@ export const MiddlewareSelector = (opts, config) => {
                 needDrawFrame = true;
             }
             else if (actionType === 'area') {
-                sharer.setSharedStorage(keyActionType, null);
+                if ((_a = hoverMaterial === null || hoverMaterial === void 0 ? void 0 : hoverMaterial.operations) === null || _a === void 0 ? void 0 : _a.locked) {
+                    sharer.setSharedStorage(keyActionType, 'hover');
+                }
+                else {
+                    sharer.setSharedStorage(keyActionType, null);
+                }
                 if (data) {
                     const start = sharer.getSharedStorage(keyAreaStart);
                     const end = sharer.getSharedStorage(keyAreaEnd);
                     if (start && end) {
-                        const { elements } = getSelectedListArea(data, {
+                        const { materials } = getSelectedListArea(data, {
                             start,
                             end,
                             calculator,
                             viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                            viewSizeInfo: sharer.getActiveViewSizeInfo()
+                            viewSizeInfo: sharer.getActiveViewSizeInfo(),
                         });
-                        if (elements.length > 0) {
+                        if (materials.length > 0) {
                             sharer.setSharedStorage(keyActionType, 'drag-list');
-                            updateSelectedElementList(elements, { triggerEvent: true });
+                            updateSelectedMaterialList(materials, { triggerEvent: true });
                             needDrawFrame = true;
                         }
                     }
@@ -602,12 +595,12 @@ export const MiddlewareSelector = (opts, config) => {
                 needDrawFrame = true;
             }
             else if (data) {
-                const result = calculator.getPointElement(e.point, {
+                const result = calculator.getPointMaterial(e.point, {
                     data,
                     viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                    viewSizeInfo: sharer.getActiveViewSizeInfo()
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
                 });
-                if (result.element) {
+                if (result.material) {
                     sharer.setSharedStorage(keyActionType, 'select');
                     needDrawFrame = true;
                 }
@@ -623,49 +616,52 @@ export const MiddlewareSelector = (opts, config) => {
                 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 });
+                if (data && Array.isArray(data === null || data === void 0 ? void 0 : data.materials) && ['drag', 'drag-list'].includes(actionType)) {
+                    const viewInfo = calcMaterialsViewInfo(data.materials, 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';
+                    let type = 'resizeMaterial';
                     if (type === 'resize') {
-                        type = 'resizeElement';
+                        type = 'resizeMaterial';
                     }
-                    if (hasChangedData) {
+                    if (sharer.getSharedStorage(keyHasChangedData)) {
                         let modifyRecord = null;
-                        if (Array.isArray(pointStartElementSizeList) && pointStartElementSizeList.length) {
-                            const startSize = pointStartElementSizeList[0];
-                            if (selectedElements.length === 1) {
+                        const pointStartMaterialSizeList = sharer.getSharedStorage(keyPointStartMaterialSizeList);
+                        if (Array.isArray(pointStartMaterialSizeList) && pointStartMaterialSizeList.length) {
+                            const startSize = pointStartMaterialSizeList[0];
+                            if (selectedMaterials.length === 1) {
                                 modifyRecord = {
-                                    type: 'resizeElement',
+                                    type: 'resizeMaterial',
                                     time: 0,
                                     content: {
-                                        method: 'modifyElement',
-                                        uuid: startSize.uuid,
-                                        before: toFlattenElement(startSize),
-                                        after: toFlattenElement(getElementSize(selectedElements[0]))
-                                    }
+                                        method: 'modifyMaterial',
+                                        id: startSize.id,
+                                        before: toFlattenMaterial(startSize),
+                                        after: toFlattenMaterial(getMaterialSize(selectedMaterials[0])),
+                                    },
                                 };
-                                if (selectedElements[0].type === 'group' && startResizeGroupRecord && endResizeGroupRecord) {
+                                const startResizeGroupRecord = sharer.getSharedStorage(keyStartResizeGroupRecord);
+                                const endResizeGroupRecord = sharer.getSharedStorage(keyEndResizeGroupRecord);
+                                if (selectedMaterials[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) {
+                            else if (selectedMaterials.length > 1) {
                                 modifyRecord = {
-                                    type: 'resizeElements',
+                                    type: 'resizeMaterials',
                                     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 })))
-                                    }
+                                        method: 'modifyMaterials',
+                                        before: pointStartMaterialSizeList.map((item) => (Object.assign(Object.assign({}, toFlattenMaterial(item)), { id: item.id }))),
+                                        after: selectedMaterials.map((item) => (Object.assign(Object.assign({}, toFlattenMaterial(getMaterialSize(item))), { id: item.id }))),
+                                    },
                                 };
                             }
                         }
-                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement, modifyRecord });
-                        hasChangedData = false;
+                        triggerChangeEvent(eventHub, { data, type, selectedMaterials, hoverMaterial, modifyRecord });
+                        sharer.setSharedStorage(keyHasChangedData, false);
                     }
                 }
                 viewer.drawFrame();
@@ -673,210 +669,90 @@ export const MiddlewareSelector = (opts, config) => {
             finalDrawFrame();
         },
         pointLeave() {
-            inBusyMode = null;
+            sharer.setSharedStorage(keyInBusyMode, null);
             sharer.setSharedStorage(keyResizeType, null);
             eventHub.trigger(coreEventKeys.CURSOR, {
-                type: 'default'
+                type: 'default',
             });
         },
         doubleClick(e) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
+            var _a, _b, _c, _d, _e;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                return;
+            }
+            const enableSelectInGroup = sharer.getSharedStorage(keyEnableSelectInGroup);
+            if (enableSelectInGroup === 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) {
+            const target = getPointTarget(e.point, pointTargetBaseOptions(e));
+            sharer.setSharedStorage(keySelectedMaterialList, []);
+            if (target.materials.length !== 1 ||
+                ((_b = (_a = target.materials[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) === true ||
+                ((_d = (_c = target.materials[0]) === null || _c === void 0 ? void 0 : _c.operations) === null || _d === void 0 ? void 0 : _d.invisible) === 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]);
+            const mtrl = target.materials[0];
+            (_e = innerConfig === null || innerConfig === void 0 ? void 0 : innerConfig.afterDoubleClickMaterial) === null || _e === void 0 ? void 0 : _e.call(innerConfig, { material: mtrl });
+            if ((mtrl === null || mtrl === void 0 ? void 0 : mtrl.type) === 'group') {
+                const pushResult = pushGroupQueue(mtrl);
                 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)) {
+            else if ((mtrl === null || mtrl === void 0 ? void 0 : mtrl.type) === 'text') {
                 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()
+                    id: mtrl.id,
                 });
             }
             sharer.setSharedStorage(keyActionType, null);
         },
-        wheel() {
-            updateSelectedElemenetController();
-        },
-        wheelScale() {
-            updateSelectedElemenetController();
-        },
         contextMenu: (e) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (!isPointInMiddlewareElement(e.nativeEvent, { $root, rootClassName })) {
+                return;
+            }
             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) {
+                if (isPointInActiveGroup(e.nativeEvent, { $root, groupQueue })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions(e));
+                    if (((_a = target === null || target === void 0 ? void 0 : target.materials) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.materials[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 });
+                        updateSelectedMaterialList([target.materials[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)) {
+                    else if (!((_d = target === null || target === void 0 ? void 0 : target.materials) === null || _d === void 0 ? void 0 : _d.length)) {
                         clear();
                     }
                 }
                 return;
             }
-            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+            const listAreaSize = calcSelectedMaterialsArea(sharer.getSharedStorage(keySelectedMaterialList), {
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
                 viewSizeInfo: sharer.getActiveViewSizeInfo(),
-                calculator
+                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) {
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions(e)), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_e = target === null || target === void 0 ? void 0 : target.materials) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_g = (_f = target.materials[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 });
+                updateSelectedMaterialList([target.materials[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)) {
+            else if (!((_h = target === null || target === void 0 ? void 0 : target.materials) === 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 });
-                    }
-                }
-            }
-        }
+            renderFrame({
+                $root,
+                styles,
+                boardContent,
+                snapshot,
+                calculator,
+                sharer: opts.sharer,
+            });
+        },
     };
 };