@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/info/{config.js → static.js}

@@ -1,3 +1,4 @@
+import { getMiddlewareValidStyles } from '@idraw/util';
 const infoBackground = '#1973bac6';
 const infoTextColor = '#ffffff';
 export const infoFontSize = 10;
@@ -5,5 +6,9 @@ export const infoLineHeight = 16;
 export const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = '@middleware/internal-event/show-info-angle';
 export const defaltStyle = {
     textBackground: infoBackground,
-    textColor: infoTextColor
+    textColor: infoTextColor,
 };
+export function getMiddlewareInfoStyles(config) {
+    const styles = getMiddlewareValidStyles(config, ['textBackground', 'textColor']);
+    return styles;
+}

package/dist/esm/middlewares/info/types.d.ts

@@ -1,3 +1,3 @@
-import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector';
+import { keySelectedMaterialList, keyHoverMaterial, keyActionType, keyGroupQueue } from '../selector';
 import type { DeepSelectorSharedStorage } from '../selector';
-export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyHoverElement | typeof keyActionType | typeof keyGroupQueue>;
+export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedMaterialList | typeof keyHoverMaterial | typeof keyActionType | typeof keyGroupQueue>;

package/dist/esm/middlewares/layout-selector/dom.d.ts

@@ -0,0 +1,10 @@
+import type { ViewScaleInfo, DataLayout } from '@idraw/types';
+type Options = {
+    viewScaleInfo: ViewScaleInfo;
+    layout?: DataLayout;
+    rootClassName: string;
+    hover: boolean;
+};
+export declare function clearMaterialLayoutBoxs($container: HTMLDivElement, opts: Pick<Options, 'rootClassName'>): void;
+export declare function resetMaterialSelectedBox($contaier: HTMLDivElement, opts: Options): void;
+export {};

package/dist/esm/middlewares/layout-selector/dom.js

@@ -0,0 +1,108 @@
+import { ATTR_VALID_WATCH, createHTMLElement, assembleHTMLElement, calcViewMaterialSize, setHTMLCSSProps, addClassName, removeClassName, } from '@idraw/util';
+import { classNameMap, ATTR_HANDLER_TYPE } from './static';
+export function clearMaterialLayoutBoxs($container, opts) {
+    const { rootClassName } = opts;
+    const $boxs = $container.getElementsByClassName(rootClassName);
+    Array.from($boxs).forEach(($box) => {
+        $box.remove();
+    });
+}
+function renderLayoutBoxHandlers($container, opts) {
+    const $existHandlers = $container.querySelectorAll(`[${ATTR_HANDLER_TYPE}]`);
+    const { rootClassName, layout, viewScaleInfo, hover } = opts;
+    if (!layout) {
+        return;
+    }
+    const layoutSize = calcViewMaterialSize(layout, { viewScaleInfo });
+    const { x, y, height, width } = layoutSize;
+    const edgeLeftStyle = {
+        left: x,
+        top: y,
+        height,
+    };
+    const edgeTopStyle = {
+        left: x,
+        top: y,
+        width,
+    };
+    const edgeRightStyle = {
+        left: x + width,
+        top: y,
+        height,
+    };
+    const edgeBottomStyle = {
+        left: x,
+        top: y + height,
+        width,
+    };
+    const cornerTopLeftStyle = {
+        left: x,
+        top: y,
+    };
+    const cornerTopRightStyle = {
+        left: x + width,
+        top: y,
+    };
+    const cornerBottomLeftStyle = {
+        left: x,
+        top: y + height,
+    };
+    const cornerBottomRightStyle = {
+        left: x + width,
+        top: y + height,
+    };
+    if ($existHandlers.length > 0) {
+        const $edgeLeft = $container.getElementsByClassName(classNameMap.edgeLeftHandler)[0];
+        const $edgeRight = $container.getElementsByClassName(classNameMap.edgeRightHandler)[0];
+        const $edgeTop = $container.getElementsByClassName(classNameMap.edgeTopHandler)[0];
+        const $edgeBottom = $container.getElementsByClassName(classNameMap.edgeBottomHandler)[0];
+        const $cornerTopLeft = $container.getElementsByClassName(classNameMap.cornerTopLeftHandler)[0];
+        const $cornerTopRight = $container.getElementsByClassName(classNameMap.cornerTopRightHandler)[0];
+        const $cornerBottomLeft = $container.getElementsByClassName(classNameMap.cornerBottomLeftHandler)[0];
+        const $cornerBottomRight = $container.getElementsByClassName(classNameMap.cornerBottomRightHandler)[0];
+        setHTMLCSSProps($edgeLeft, edgeLeftStyle);
+        setHTMLCSSProps($edgeRight, edgeRightStyle);
+        setHTMLCSSProps($edgeTop, edgeTopStyle);
+        setHTMLCSSProps($edgeBottom, edgeBottomStyle);
+        setHTMLCSSProps($cornerTopLeft, cornerTopLeftStyle);
+        setHTMLCSSProps($cornerTopRight, cornerTopRightStyle);
+        setHTMLCSSProps($cornerBottomLeft, cornerBottomLeftStyle);
+        setHTMLCSSProps($cornerBottomRight, cornerBottomRightStyle);
+    }
+    else {
+        const create = createHTMLElement;
+        const baseAttrs = {
+            [ATTR_VALID_WATCH]: 'true',
+        };
+        assembleHTMLElement($container, {}, [
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'left' }, baseAttrs), { className: `${rootClassName} ${classNameMap.edgeHandler} ${classNameMap.edgeLeftHandler}`, style: edgeLeftStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top' }, baseAttrs), { className: `${rootClassName} ${classNameMap.edgeHandler} ${classNameMap.edgeTopHandler}`, style: edgeTopStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'right' }, baseAttrs), { className: `${rootClassName} ${classNameMap.edgeHandler} ${classNameMap.edgeRightHandler}`, style: edgeRightStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom' }, baseAttrs), { className: `${rootClassName} ${classNameMap.edgeHandler} ${classNameMap.edgeBottomHandler}`, style: edgeBottomStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top-left' }, baseAttrs), { className: `${rootClassName} ${classNameMap.cornerHandler} ${classNameMap.cornerTopLeftHandler}`, style: cornerTopLeftStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'top-right' }, baseAttrs), { className: `${rootClassName} ${classNameMap.cornerHandler} ${classNameMap.cornerTopRightHandler}`, style: cornerTopRightStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom-left' }, baseAttrs), { className: `${rootClassName} ${classNameMap.cornerHandler} ${classNameMap.cornerBottomLeftHandler}`, style: cornerBottomLeftStyle })),
+            create('div', Object.assign(Object.assign({ [ATTR_HANDLER_TYPE]: 'bottom-right' }, baseAttrs), { className: `${rootClassName} ${classNameMap.cornerHandler} ${classNameMap.cornerBottomRightHandler}`, style: cornerBottomRightStyle })),
+        ]);
+    }
+    const $handlers = Array.from($container.querySelectorAll(`[${ATTR_HANDLER_TYPE}]`));
+    if (hover) {
+        $handlers.forEach(($item) => {
+            addClassName($item, [classNameMap.hover]);
+        });
+    }
+    else {
+        $handlers.forEach(($item) => {
+            removeClassName($item, [classNameMap.hover]);
+        });
+    }
+}
+export function resetMaterialSelectedBox($contaier, opts) {
+    const { layout } = opts;
+    if (layout) {
+        renderLayoutBoxHandlers($contaier, opts);
+    }
+    else {
+        clearMaterialLayoutBoxs($contaier, opts);
+    }
+}

package/dist/esm/middlewares/layout-selector/index.d.ts

@@ -1,5 +1,5 @@
 import type { Middleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
-import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
+import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from './static';
 export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 export declare const MiddlewareLayoutSelector: Middleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;

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

@@ -1,13 +1,16 @@
-import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize, getElementSize, toFlattenLayout } from '@idraw/util';
-import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, controllerSize, defaultStyle } from './config';
-import { keyActionType as keyElementActionType } from '../selector';
-import { drawLayoutController, drawLayoutHover } from './util';
-import { coreEventKeys } from '../../config';
+import { isViewPointInMaterialSize, calcViewMaterialSize, getMaterialSize, toFlattenLayout, } from '@idraw/util';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutIsHoverContent, keyLayoutIsHoverController, keyLayoutIsSelected, keyLayoutIsBusyMoving, controllerSize, defaultStyle, getRootClassName, ATTR_HANDLER_TYPE, } from './static';
+import { getMiddlewareLayoutSelectorStyles, initStyles, destroyStyles } from './styles';
+import { keyActionType as keyMaterialActionType, } from '../selector';
+import { resetMaterialSelectedBox, clearMaterialLayoutBoxs } from './dom';
+import { coreEventKeys } from '../../static';
+import { triggerChangeEvent } from '../common';
 export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 export const MiddlewareLayoutSelector = (opts, config) => {
-    const { sharer, boardContent, calculator, viewer, eventHub } = opts;
-    const { overlayContext } = boardContent;
+    const { sharer, calculator, viewer, eventHub } = opts;
     let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const styles = getMiddlewareLayoutSelectorStyles(innerConfig);
+    const rootClassName = getRootClassName();
     let prevPoint = null;
     let prevIsHoverContent = null;
     let prevIsSelected = null;
@@ -16,7 +19,6 @@ export const MiddlewareLayoutSelector = (opts, config) => {
         prevPoint = null;
         sharer.setSharedStorage(keyLayoutActionType, null);
         sharer.setSharedStorage(keyLayoutControlType, null);
-        sharer.setSharedStorage(keyLayoutController, null);
         sharer.setSharedStorage(keyLayoutIsHoverContent, null);
         sharer.setSharedStorage(keyLayoutIsHoverController, null);
         sharer.setSharedStorage(keyLayoutIsSelected, null);
@@ -24,9 +26,9 @@ export const MiddlewareLayoutSelector = (opts, config) => {
         prevIsHoverContent = null;
         prevIsSelected = null;
     };
-    const isInElementAction = () => {
-        const elementActionType = sharer.getSharedStorage(keyElementActionType);
-        if (elementActionType && elementActionType !== 'area') {
+    const isInMaterialAction = () => {
+        const materialActionType = sharer.getSharedStorage(keyMaterialActionType);
+        if (materialActionType && materialActionType !== 'area') {
             clear();
             return true;
         }
@@ -35,58 +37,37 @@ export const MiddlewareLayoutSelector = (opts, config) => {
     const getLayoutSize = () => {
         const data = sharer.getActiveStorage('data');
         if (data === null || data === void 0 ? void 0 : data.layout) {
-            const { x, y, w, h } = data.layout;
-            return { x, y, w, h };
+            const { x, y, width, height } = data.layout;
+            return { x, y, width, height };
         }
         return null;
     };
     const isInLayout = (p) => {
         const size = getLayoutSize();
         if (size) {
-            const { x, y, w, h } = size;
+            const { x, y, width, height } = size;
             const viewScaleInfo = sharer.getActiveViewScaleInfo();
-            const viewSize = calcViewElementSize({
+            const viewSize = calcViewMaterialSize({
                 x: x - controllerSize / 2,
                 y: y - controllerSize / 2,
-                w: w + controllerSize,
-                h: h + controllerSize
+                width: width + controllerSize,
+                height: height + controllerSize,
             }, { viewScaleInfo });
-            return isViewPointInElementSize(p, viewSize);
+            return isViewPointInMaterialSize(p, viewSize);
         }
         return false;
     };
-    const resetController = () => {
-        const viewScaleInfo = sharer.getActiveViewScaleInfo();
-        const size = getLayoutSize();
-        if (size) {
-            const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
-            sharer.setSharedStorage(keyLayoutController, controller);
-        }
-        else {
-            sharer.setSharedStorage(keyLayoutController, null);
-        }
-    };
     const resetControlType = (e) => {
         const data = sharer.getActiveStorage('data');
-        const controller = sharer.getSharedStorage(keyLayoutController);
+        const $target = e.nativeEvent.target;
         let controllerType = null;
-        if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) {
-            let layoutControlType = null;
-            if (controller) {
-                const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller;
-                const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left];
-                for (let i = 0; i < list.length; i++) {
-                    const item = list[i];
-                    if (isViewPointInVertexes(e.point, item.vertexes)) {
-                        layoutControlType = `${item.type}`;
-                        break;
-                    }
-                }
-                if (layoutControlType) {
-                    sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
-                    eventHub.trigger(coreEventKeys.CLEAR_SELECT);
-                    controllerType = layoutControlType;
-                }
+        if (($target === null || $target === void 0 ? void 0 : $target.hasAttribute(ATTR_HANDLER_TYPE)) && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) {
+            sharer.setSharedStorage(keyLayoutControlType, null);
+            const layoutControlType = $target.getAttribute(ATTR_HANDLER_TYPE);
+            if (layoutControlType) {
+                sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
+                eventHub.trigger(coreEventKeys.CLEAR_SELECT);
+                controllerType = layoutControlType;
             }
         }
         if (controllerType) {
@@ -104,14 +85,18 @@ export const MiddlewareLayoutSelector = (opts, config) => {
         eventHub.trigger(coreEventKeys.CURSOR, {
             type: controlType ? `resize-${controlType}` : controlType,
             groupQueue: [],
-            element: getLayoutSize()
+            material: getLayoutSize(),
         });
     };
     return {
         name: '@middleware/layout-selector',
         use: () => {
             clear();
-            resetController();
+            initStyles(rootClassName, styles);
+        },
+        disuse: () => {
+            clear();
+            destroyStyles(rootClassName);
         },
         resetConfig(config) {
             innerConfig = Object.assign(Object.assign({}, innerConfig), config);
@@ -120,9 +105,6 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
                 return;
             }
-            if (isInElementAction()) {
-                return;
-            }
             if (isInLayout(e.point)) {
                 sharer.setSharedStorage(keyLayoutIsHoverContent, true);
             }
@@ -133,48 +115,34 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                     prevIsHoverContent = false;
                 }
             }
-            if (sharer.getSharedStorage(keyLayoutIsSelected) === true) {
-                const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
-                const data = sharer.getActiveStorage('data');
-                if (data === null || data === void 0 ? void 0 : data.layout) {
-                    if (prevLayoutActionType !== 'resize') {
-                        resetController();
-                        const layoutControlType = resetControlType(e);
-                        if (layoutControlType) {
-                            updateCursor(layoutControlType);
-                        }
-                        else {
-                            updateCursor();
-                            sharer.setSharedStorage(keyLayoutActionType, null);
-                        }
+            const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
+            const data = sharer.getActiveStorage('data');
+            if (data === null || data === void 0 ? void 0 : data.layout) {
+                if (prevLayoutActionType !== 'resize') {
+                    const layoutControlType = resetControlType(e);
+                    if (layoutControlType) {
+                        updateCursor(layoutControlType);
                     }
                     else {
-                        const layoutControlType = resetControlType(e);
-                        updateCursor(layoutControlType);
+                        updateCursor();
+                        sharer.setSharedStorage(keyLayoutActionType, null);
                     }
                 }
-                if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
-                    return false;
+                else {
+                    const layoutControlType = resetControlType(e);
+                    updateCursor(layoutControlType);
                 }
-                return;
-            }
-            if (sharer.getSharedStorage(keyLayoutIsHoverContent) && !prevIsHoverContent) {
-                viewer.drawFrame();
-            }
-            prevIsHoverContent = sharer.getSharedStorage(keyLayoutIsHoverContent);
-            if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
-                return false;
             }
         },
         pointStart: (e) => {
-            if (isInElementAction()) {
-                return;
-            }
             if (isInLayout(e.point)) {
                 sharer.setSharedStorage(keyLayoutIsSelected, true);
             }
             else {
                 if (prevIsSelected === true) {
+                    if (opts.container) {
+                        clearMaterialLayoutBoxs(opts.container, { rootClassName });
+                    }
                     clear();
                     viewer.drawFrame();
                 }
@@ -182,12 +150,11 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             }
             const data = sharer.getActiveStorage('data');
             if (data === null || data === void 0 ? void 0 : data.layout) {
-                pointStartLayoutSize = getElementSize(data.layout);
+                pointStartLayoutSize = getMaterialSize(data.layout);
             }
             else {
                 pointStartLayoutSize = null;
             }
-            resetController();
             const layoutControlType = resetControlType(e);
             prevPoint = e.point;
             if (layoutControlType) {
@@ -204,7 +171,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
         },
         pointMove: (e) => {
             if (!sharer.getSharedStorage(keyLayoutIsSelected)) {
-                if (isInElementAction()) {
+                if (isInMaterialAction()) {
                     return;
                 }
             }
@@ -219,82 +186,81 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                     const viewMoveY = e.point.y - prevPoint.y;
                     const moveX = viewMoveX / scale;
                     const moveY = viewMoveY / scale;
-                    const { x, y, w, h, operations = {} } = data.layout;
+                    const { x, y, width, height, operations = {} } = data.layout;
                     const { position = 'absolute' } = operations;
                     if (layoutControlType === 'top') {
                         if (position === 'relative') {
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                             viewer.scroll({ moveY: viewMoveY });
                         }
                         else {
                             data.layout.y = calculator.toGridNum(y + moveY);
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                         }
                     }
                     else if (layoutControlType === 'right') {
-                        data.layout.w = calculator.toGridNum(w + moveX);
+                        data.layout.width = calculator.toGridNum(width + moveX);
                     }
                     else if (layoutControlType === 'bottom') {
-                        data.layout.h = calculator.toGridNum(h + moveY);
+                        data.layout.height = calculator.toGridNum(height + moveY);
                     }
                     else if (layoutControlType === 'left') {
                         if (position === 'relative') {
-                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.width = calculator.toGridNum(width - moveX);
                             viewer.scroll({ moveX: viewMoveX });
                         }
                         else {
                             data.layout.x = calculator.toGridNum(x + moveX);
-                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.width = calculator.toGridNum(width - moveX);
                         }
                     }
                     else if (layoutControlType === 'top-left') {
                         if (position === 'relative') {
-                            data.layout.w = calculator.toGridNum(w - moveX);
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.width = calculator.toGridNum(width - moveX);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                             viewer.scroll({ moveX: viewMoveX, moveY: viewMoveY });
                         }
                         else {
                             data.layout.x = calculator.toGridNum(x + moveX);
                             data.layout.y = calculator.toGridNum(y + moveY);
-                            data.layout.w = calculator.toGridNum(w - moveX);
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.width = calculator.toGridNum(width - moveX);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                         }
                     }
                     else if (layoutControlType === 'top-right') {
                         if (position === 'relative') {
                             viewer.scroll({
-                                moveY: viewMoveY
+                                moveY: viewMoveY,
                             });
-                            data.layout.w = calculator.toGridNum(w + moveX);
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.width = calculator.toGridNum(width + moveX);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                         }
                         else {
                             data.layout.y = calculator.toGridNum(y + moveY);
-                            data.layout.w = calculator.toGridNum(w + moveX);
-                            data.layout.h = calculator.toGridNum(h - moveY);
+                            data.layout.width = calculator.toGridNum(width + moveX);
+                            data.layout.height = calculator.toGridNum(height - moveY);
                         }
                     }
                     else if (layoutControlType === 'bottom-right') {
-                        data.layout.w = calculator.toGridNum(w + moveX);
-                        data.layout.h = calculator.toGridNum(h + moveY);
+                        data.layout.width = calculator.toGridNum(width + moveX);
+                        data.layout.height = calculator.toGridNum(height + moveY);
                     }
                     else if (layoutControlType === 'bottom-left') {
                         if (position === 'relative') {
                             viewer.scroll({
-                                moveX: viewMoveX
+                                moveX: viewMoveX,
                             });
-                            data.layout.w = calculator.toGridNum(w - moveX);
-                            data.layout.h = calculator.toGridNum(h + moveY);
+                            data.layout.width = calculator.toGridNum(width - moveX);
+                            data.layout.height = calculator.toGridNum(height + moveY);
                         }
                         else {
                             data.layout.x = calculator.toGridNum(x + moveX);
-                            data.layout.w = calculator.toGridNum(w - moveX);
-                            data.layout.h = calculator.toGridNum(h + moveY);
+                            data.layout.width = calculator.toGridNum(width - moveX);
+                            data.layout.height = calculator.toGridNum(height + moveY);
                         }
                     }
                 }
                 prevPoint = e.point;
-                resetController();
                 viewer.drawFrame();
                 return false;
             }
@@ -316,14 +282,14 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                         content: {
                             method: 'modifyLayout',
                             before: toFlattenLayout(pointStartLayoutSize),
-                            after: toFlattenLayout(getElementSize(data.layout))
-                        }
+                            after: toFlattenLayout(getMaterialSize(data.layout)),
+                        },
                     };
                 }
-                eventHub.trigger(coreEventKeys.CHANGE, {
+                triggerChangeEvent(eventHub, {
                     type: 'resizeLayout',
                     data,
-                    modifyRecord
+                    modifyRecord,
                 });
             }
             pointStartLayoutSize = null;
@@ -334,38 +300,20 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             }
         },
         beforeDrawFrame: ({ snapshot }) => {
-            var _a;
-            if (isInElementAction()) {
+            var _a, _b;
+            if (isInMaterialAction()) {
                 return;
             }
-            const { activeColor } = innerConfig;
-            const style = { activeColor };
-            const { sharedStore, activeStore } = snapshot;
-            const layoutActionType = sharedStore[keyLayoutActionType];
-            const layoutIsHover = sharedStore[keyLayoutIsHoverContent];
-            const layoutIsSelected = sharedStore[keyLayoutIsSelected];
-            if ((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) {
-                const { x, y, w, h } = activeStore.data.layout;
-                const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-                const size = { x, y, w, h };
-                const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize });
-                if (layoutIsHover === true) {
-                    const viewSize = calcViewElementSize(size, { viewScaleInfo });
-                    drawLayoutHover(overlayContext, { layoutSize: viewSize, style });
-                }
-                if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
-                    drawLayoutController(overlayContext, { controller, style });
-                }
+            const { activeStore, } = snapshot;
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            if (opts.container && ((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout)) {
+                resetMaterialSelectedBox(opts.container, {
+                    rootClassName,
+                    viewScaleInfo,
+                    layout: (_b = activeStore.data) === null || _b === void 0 ? void 0 : _b.layout,
+                    hover: false,
+                });
             }
         },
-        scrollX: () => {
-            clear();
-        },
-        scrollY: () => {
-            clear();
-        },
-        wheelScale: () => {
-            clear();
-        }
     };
 };

package/dist/esm/middlewares/layout-selector/static.d.ts

@@ -0,0 +1,32 @@
+import type { MiddlewareLayoutSelectorStyles } from '@idraw/types';
+export declare const key = "LAYOUT_SELECTOR";
+export declare const keyLayoutActionType: unique symbol;
+export declare const keyLayoutControlType: unique symbol;
+export declare const keyLayoutController: unique symbol;
+export declare const keyLayoutIsHoverContent: unique symbol;
+export declare const keyLayoutIsHoverController: unique symbol;
+export declare const keyLayoutIsSelected: unique symbol;
+export declare const keyLayoutIsBusyMoving: unique symbol;
+export declare const prefix = "idraw-middleware-layout-selector";
+export declare const getRootClassName: () => string;
+export declare const ATTR_HANDLER_TYPE = "data-idraw-handler-type";
+export declare const selectedBoxBorderWidth = 1.5;
+export declare const hoverBoxBorderWidth = 1;
+export declare const cornerHandlerSize = 10;
+export declare const cornerHandlerBorderWidth = 1.5;
+export declare const edgeHandlerSize = 10;
+export declare const controllerSize = 10;
+export declare const defaultStyle: MiddlewareLayoutSelectorStyles;
+export declare const classNameMap: {
+    hover: string;
+    edgeHandler: string;
+    edgeTopHandler: string;
+    edgeRightHandler: string;
+    edgeBottomHandler: string;
+    edgeLeftHandler: string;
+    cornerHandler: string;
+    cornerTopLeftHandler: string;
+    cornerTopRightHandler: string;
+    cornerBottomLeftHandler: string;
+    cornerBottomRightHandler: string;
+};

package/dist/esm/middlewares/layout-selector/static.js

@@ -0,0 +1,39 @@
+import { createId } from '@idraw/util';
+export const key = 'LAYOUT_SELECTOR';
+export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
+export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
+export const keyLayoutController = Symbol(`${key}_layoutController`);
+export const keyLayoutIsHoverContent = Symbol(`${key}_layoutIsHoverContent`);
+export const keyLayoutIsHoverController = Symbol(`${key}_layoutIsHoverController`);
+export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
+export const keyLayoutIsBusyMoving = Symbol(`${key}_layoutIsSelected`);
+export const prefix = `idraw-middleware-layout-selector`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const ATTR_HANDLER_TYPE = 'data-idraw-handler-type';
+export const selectedBoxBorderWidth = 1.5;
+export const hoverBoxBorderWidth = 1;
+export const cornerHandlerSize = 10;
+export const cornerHandlerBorderWidth = 1.5;
+export const edgeHandlerSize = 10;
+export const controllerSize = 10;
+export const defaultStyle = {
+    zIndex: 2,
+    activeColor: '#b331c9',
+    handlerBorderColor: '#b331c9',
+    handlerBackground: '#ffffff',
+    handlerHoverBackground: '#bb8fc3',
+    handlerActiveBackground: '#b467c2',
+};
+export const classNameMap = {
+    hover: `${prefix}-hover`,
+    edgeHandler: `${prefix}-edgeHandler`,
+    edgeTopHandler: `${prefix}-edgeTopHandler`,
+    edgeRightHandler: `${prefix}-edgeRightandler`,
+    edgeBottomHandler: `${prefix}-edgeBottomHandler`,
+    edgeLeftHandler: `${prefix}-edgeLeftHandler`,
+    cornerHandler: `${prefix}-cornerHandler`,
+    cornerTopLeftHandler: `${prefix}-cornerTopLeftHandler`,
+    cornerTopRightHandler: `${prefix}-cornerTopRightHandler`,
+    cornerBottomLeftHandler: `${prefix}-cornerBottomLeftHandler`,
+    cornerBottomRightHandler: `${prefix}-cornerBottomRightHandler`,
+};

package/dist/esm/middlewares/layout-selector/styles.d.ts

@@ -0,0 +1,4 @@
+import type { MiddlewareLayoutSelectorStyles, MiddlewareLayoutSelectorConfig } from '@idraw/types';
+export declare function initStyles(rootClassName: string, styles: MiddlewareLayoutSelectorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function getMiddlewareLayoutSelectorStyles<C = MiddlewareLayoutSelectorConfig, S = MiddlewareLayoutSelectorStyles>(config: C): S;