@idraw/core 0.4.0-beta.29 → 0.4.0-beta.30

package/dist/esm/middleware/layout-selector/config.d.ts

@@ -2,5 +2,8 @@ export declare const key = "LAYOUT_SELECT";
 export declare const keyLayoutActionType: unique symbol;
 export declare const keyLayoutControlType: unique symbol;
 export declare const keyLayoutController: unique symbol;
-export declare const selectColor = "#1973ba";
+export declare const keyLayoutIsHover: unique symbol;
+export declare const keyLayoutIsSelected: unique symbol;
+export declare const selectColor = "#b331c9";
 export declare const disableColor = "#5b5959b5";
+export declare const controllerSize = 10;

package/dist/esm/middleware/layout-selector/config.js

@@ -2,5 +2,8 @@ export const key = 'LAYOUT_SELECT';
 export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
 export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
 export const keyLayoutController = Symbol(`${key}_layoutController`);
-export const selectColor = '#1973ba';
+export const keyLayoutIsHover = Symbol(`${key}_layoutIsHover`);
+export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
+export const selectColor = '#b331c9';
 export const disableColor = '#5b5959b5';
+export const controllerSize = 10;

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

@@ -1,3 +1,5 @@
 import type { BoardMiddleware } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
+import { keyLayoutIsSelected } from './config';
+export { keyLayoutIsSelected };
 export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage>;

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

@@ -1,54 +1,40 @@
-import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot } from '@idraw/util';
-import { keyLayoutActionType, keyLayoutController, keyLayoutControlType } from './config';
-import { keyActionType as keyElementActionType, middlewareEventSelectClear } from '../selector';
-import { drawLayoutController } from './util';
+import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
+import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector';
+import { drawLayoutController, drawLayoutHover } from './util';
 import { eventChange } from '../../config';
+export { keyLayoutIsSelected };
 export const MiddlewareLayoutSelector = (opts) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
+    let prevIsHover = null;
+    let prevIsSelected = null;
+    let isBusy = null;
     const clear = () => {
         prevPoint = null;
         sharer.setSharedStorage(keyLayoutActionType, null);
         sharer.setSharedStorage(keyLayoutControlType, null);
         sharer.setSharedStorage(keyLayoutController, null);
+        sharer.setSharedStorage(keyLayoutIsHover, null);
+        sharer.setSharedStorage(keyLayoutIsSelected, null);
+        prevIsHover = null;
+        prevIsSelected = null;
+        isBusy = null;
     };
-    const isInElementAction = () => {
-        const elementType = sharer.getSharedStorage(keyElementActionType);
-        if (elementType) {
+    const isInElementHover = () => {
+        const hoverElement = sharer.getSharedStorage(keyHoverElement);
+        if (hoverElement) {
+            clear();
             return true;
         }
         return false;
     };
-    const isDisbaledControl = (controlType) => {
-        var _a;
-        const data = sharer.getActiveStorage('data');
-        if ((_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.operations) {
-            const operations = data.layout.operations;
-            if (controlType === 'left' && operations.disabledLeft === true) {
-                return true;
-            }
-            if (controlType === 'top' && operations.disabledTop === true) {
-                return true;
-            }
-            if (controlType === 'right' && operations.disabledRight === true) {
-                return true;
-            }
-            if (controlType === 'bottom' && operations.disabledBottom === true) {
-                return true;
-            }
-            if (controlType === 'top-left' && operations.disabledTopLeft === true) {
-                return true;
-            }
-            if (controlType === 'top-right' && operations.disabledTopRight === true) {
-                return true;
-            }
-            if (controlType === 'bottom-left' && operations.disabledBottomLeft === true) {
-                return true;
-            }
-            if (controlType === 'bottom-right' && operations.disabledBottomRight === true) {
-                return true;
-            }
+    const isInElementAction = () => {
+        const elementActionType = sharer.getSharedStorage(keyElementActionType);
+        if (elementActionType && elementActionType !== 'area') {
+            clear();
+            return true;
         }
         return false;
     };
@@ -60,6 +46,21 @@ export const MiddlewareLayoutSelector = (opts) => {
         }
         return null;
     };
+    const isInLayout = (p) => {
+        const size = getLayoutSize();
+        if (size) {
+            const { x, y, w, h } = size;
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSize = calcViewElementSize({
+                x: x - controllerSize / 2,
+                y: y - controllerSize / 2,
+                w: w + controllerSize,
+                h: h + controllerSize
+            }, { viewScaleInfo });
+            return isViewPointInElementSize(p, viewSize);
+        }
+        return false;
+    };
     const resetController = () => {
         const viewScaleInfo = sharer.getActiveViewScaleInfo();
         const size = getLayoutSize();
@@ -95,6 +96,16 @@ export const MiddlewareLayoutSelector = (opts) => {
         }
         return null;
     };
+    const updateCursor = (controlType) => {
+        if (isBusy === true) {
+            return;
+        }
+        eventHub.trigger('cursor', {
+            type: controlType ? `resize-${controlType}` : controlType,
+            groupQueue: [],
+            element: getLayoutSize()
+        });
+    };
     return {
         name: '@middleware/layout-selector',
         use: () => {
@@ -102,74 +113,105 @@ export const MiddlewareLayoutSelector = (opts) => {
             resetController();
         },
         hover: (e) => {
+            if (isBusy === true) {
+                return;
+            }
             if (isInElementAction()) {
                 return;
             }
-            const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType);
-            const data = sharer.getActiveStorage('data');
-            if ((data === null || data === void 0 ? void 0 : data.layout) && prevLayoutActionType !== 'resize') {
-                resetController();
-                const layoutControlType = resetControlType(e);
-                if (layoutControlType) {
-                    sharer.setSharedStorage(keyLayoutActionType, 'hover');
-                    if (!isDisbaledControl(layoutControlType)) {
-                        eventHub.trigger('cursor', {
-                            type: `resize-${layoutControlType}`,
-                            groupQueue: [],
-                            element: getLayoutSize()
-                        });
-                    }
+            if (isInElementHover()) {
+                return;
+            }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsHover, true);
+            }
+            else {
+                sharer.setSharedStorage(keyLayoutIsHover, false);
+                if (prevIsHover === true) {
                     viewer.drawFrame();
-                }
-                else {
-                    sharer.setSharedStorage(keyLayoutActionType, null);
+                    prevIsHover = false;
                 }
             }
-            if (['hover', 'resize'].includes(sharer.getSharedStorage(keyLayoutActionType))) {
-                return 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);
+                        }
+                    }
+                    else {
+                        const layoutControlType = resetControlType(e);
+                        updateCursor(layoutControlType);
+                    }
+                }
+                return;
             }
-            if (prevLayoutActionType === 'hover' && !sharer.getSharedStorage(keyLayoutActionType)) {
+            if (sharer.getSharedStorage(keyLayoutIsHover) && !prevIsHover) {
                 viewer.drawFrame();
             }
+            prevIsHover = sharer.getSharedStorage(keyLayoutIsHover);
         },
         pointStart: (e) => {
             if (isInElementAction()) {
                 return;
             }
+            if (isInLayout(e.point)) {
+                sharer.setSharedStorage(keyLayoutIsSelected, true);
+            }
+            else {
+                if (prevIsSelected === true) {
+                    clear();
+                    viewer.drawFrame();
+                }
+                sharer.setSharedStorage(keyLayoutIsSelected, false);
+            }
             resetController();
             const layoutControlType = resetControlType(e);
             prevPoint = e.point;
             if (layoutControlType) {
-                if (isDisbaledControl(layoutControlType)) {
-                    return;
-                }
                 sharer.setSharedStorage(keyLayoutActionType, 'resize');
-                return false;
             }
-            const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
-            if (['hover', 'resize'].includes(layoutActionType)) {
-                return false;
+            if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
+                viewer.drawFrame();
             }
+            prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
         },
         pointMove: (e) => {
-            if (isInElementAction()) {
-                return;
+            if (!sharer.getSharedStorage(keyLayoutIsSelected)) {
+                if (isInElementAction()) {
+                    return;
+                }
             }
             const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
             const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
             const data = sharer.getActiveStorage('data');
-            if (layoutControlType && isDisbaledControl(layoutControlType)) {
-                return;
-            }
             if (layoutActionType === 'resize' && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) {
                 if (prevPoint) {
+                    isBusy = true;
                     const scale = sharer.getActiveStorage('scale');
-                    const moveX = (e.point.x - prevPoint.x) / scale;
-                    const moveY = (e.point.y - prevPoint.y) / scale;
-                    const { x, y, w, h } = data.layout;
+                    const viewMoveX = e.point.x - prevPoint.x;
+                    const viewMoveY = e.point.y - prevPoint.y;
+                    const moveX = viewMoveX / scale;
+                    const moveY = viewMoveY / scale;
+                    const { x, y, w, h, operations = {} } = data.layout;
+                    const { position = 'absolute' } = operations;
                     if (layoutControlType === 'top') {
-                        data.layout.y = calculator.toGridNum(y + moveY);
-                        data.layout.h = calculator.toGridNum(h - moveY);
+                        if (position === 'relative') {
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                            viewer.scroll({ moveY: viewMoveY });
+                        }
+                        else {
+                            data.layout.y = calculator.toGridNum(y + moveY);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
                     }
                     else if (layoutControlType === 'right') {
                         data.layout.w = calculator.toGridNum(w + moveX);
@@ -178,28 +220,59 @@ export const MiddlewareLayoutSelector = (opts) => {
                         data.layout.h = calculator.toGridNum(h + moveY);
                     }
                     else if (layoutControlType === 'left') {
-                        data.layout.x = calculator.toGridNum(x + moveX);
-                        data.layout.w = calculator.toGridNum(w - moveX);
+                        if (position === 'relative') {
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            viewer.scroll({ moveX: viewMoveX });
+                        }
+                        else {
+                            data.layout.x = calculator.toGridNum(x + moveX);
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                        }
                     }
                     else if (layoutControlType === 'top-left') {
-                        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);
+                        if (position === 'relative') {
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h - 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);
+                        }
                     }
                     else if (layoutControlType === 'top-right') {
-                        data.layout.y = calculator.toGridNum(y + moveY);
-                        data.layout.w = calculator.toGridNum(w + moveX);
-                        data.layout.h = calculator.toGridNum(h - moveY);
+                        if (position === 'relative') {
+                            viewer.scroll({
+                                moveY: viewMoveY
+                            });
+                            data.layout.w = calculator.toGridNum(w + moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
+                        else {
+                            data.layout.y = calculator.toGridNum(y + moveY);
+                            data.layout.w = calculator.toGridNum(w + moveX);
+                            data.layout.h = calculator.toGridNum(h - moveY);
+                        }
                     }
                     else if (layoutControlType === 'bottom-right') {
                         data.layout.w = calculator.toGridNum(w + moveX);
                         data.layout.h = calculator.toGridNum(h + moveY);
                     }
                     else if (layoutControlType === 'bottom-left') {
-                        data.layout.x = calculator.toGridNum(x + moveX);
-                        data.layout.w = calculator.toGridNum(w - moveX);
-                        data.layout.h = calculator.toGridNum(h + moveY);
+                        if (position === 'relative') {
+                            viewer.scroll({
+                                moveX: viewMoveX
+                            });
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h + moveY);
+                        }
+                        else {
+                            data.layout.x = calculator.toGridNum(x + moveX);
+                            data.layout.w = calculator.toGridNum(w - moveX);
+                            data.layout.h = calculator.toGridNum(h + moveY);
+                        }
                     }
                 }
                 prevPoint = e.point;
@@ -207,33 +280,41 @@ export const MiddlewareLayoutSelector = (opts) => {
                 viewer.drawFrame();
                 return false;
             }
-            if (['hover', 'resize'].includes(layoutActionType)) {
+            if (['resize'].includes(layoutActionType)) {
                 return false;
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const layoutActionType = sharer.getSharedStorage(keyLayoutActionType);
             const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
             const data = sharer.getActiveStorage('data');
-            if (data && layoutActionType === 'resize' && layoutControlType && !isDisbaledControl(layoutControlType)) {
+            if (data && layoutActionType === 'resize' && layoutControlType) {
                 eventHub.trigger(eventChange, {
                     type: 'changeLayout',
                     data
                 });
             }
-            clear();
         },
         beforeDrawFrame: ({ snapshot }) => {
             var _a;
+            if (isInElementAction()) {
+                return;
+            }
             const { sharedStore, activeStore } = snapshot;
             const layoutActionType = sharedStore[keyLayoutActionType];
-            const layoutControlType = sharedStore[keyLayoutControlType];
-            if (((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) && layoutActionType && layoutControlType) {
-                if (['hover', 'resize'].includes(layoutActionType)) {
-                    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-                    const { x, y, w, h } = activeStore.data.layout;
-                    const size = { x, y, w, h };
-                    const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
+            const layoutIsHover = sharedStore[keyLayoutIsHover];
+            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 });
+                }
+                if ((layoutActionType && ['resize'].includes(layoutActionType)) || layoutIsSelected === true) {
                     drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
                 }
             }

package/dist/esm/middleware/layout-selector/types.d.ts

@@ -1,12 +1,15 @@
-import type { LayoutSizeController } from '@idraw/types';
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController } from './config';
-import { keyActionType as keyElementActionType } from '../selector';
+import type { LayoutSizeController, Element } from '@idraw/types';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
 import type { ActionType as ElementActionType } from '../selector';
-export type ActionType = 'hover' | 'resize' | null;
+export type ActionType = 'resize' | null;
 export type ControlType = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type LayoutSelectorSharedStorage = {
     [keyLayoutActionType]: ActionType | null;
     [keyLayoutControlType]: ControlType | null;
     [keyLayoutController]: LayoutSizeController | null;
     [keyElementActionType]: ElementActionType | null;
+    [keyHoverElement]: Element | null;
+    [keyLayoutIsHover]: boolean | null;
+    [keyLayoutIsSelected]: boolean | null;
 };

package/dist/esm/middleware/layout-selector/types.js

@@ -1,2 +1,2 @@
-import { keyLayoutActionType, keyLayoutControlType, keyLayoutController } from './config';
-import { keyActionType as keyElementActionType } from '../selector';
+import { keyLayoutActionType, keyLayoutControlType, keyLayoutController, keyLayoutIsHover, keyLayoutIsSelected } from './config';
+import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';

package/dist/esm/middleware/layout-selector/util.d.ts

@@ -1,5 +1,8 @@
-import type { ViewContext2D, LayoutSizeController, DataLayout } from '@idraw/types';
+import type { ViewContext2D, LayoutSizeController, DataLayout, ElementSize } from '@idraw/types';
 export declare function drawLayoutController(ctx: ViewContext2D, opts: {
     controller: LayoutSizeController;
     operations: DataLayout['operations'];
 }): void;
+export declare function drawLayoutHover(ctx: ViewContext2D, opts: {
+    layoutSize: ElementSize;
+}): void;

package/dist/esm/middleware/layout-selector/util.js

@@ -91,3 +91,18 @@ export function drawLayoutController(ctx, opts) {
         drawControllerBox(ctx, bottomLeft.vertexes);
     }
 }
+export function drawLayoutHover(ctx, opts) {
+    const { layoutSize } = opts;
+    const { x, y, w, h } = layoutSize;
+    ctx.setLineDash([]);
+    ctx.strokeStyle = selectColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.lineTo(x, y);
+    ctx.closePath();
+    ctx.stroke();
+}

package/dist/esm/middleware/scroller/config.d.ts

@@ -1,6 +1,8 @@
 export declare const key = "SCROLL";
 export declare const keyXThumbRect: unique symbol;
 export declare const keyYThumbRect: unique symbol;
+export declare const keyHoverXThumbRect: unique symbol;
+export declare const keyHoverYThumbRect: unique symbol;
 export declare const keyPrevPoint: unique symbol;
 export declare const keyActivePoint: unique symbol;
 export declare const keyActiveThumbType: unique symbol;

package/dist/esm/middleware/scroller/config.js

@@ -1,6 +1,8 @@
 export const key = 'SCROLL';
 export const keyXThumbRect = Symbol(`${key}_xThumbRect`);
 export const keyYThumbRect = Symbol(`${key}_yThumbRect`);
+export const keyHoverXThumbRect = Symbol(`${key}_hoverXThumbRect`);
+export const keyHoverYThumbRect = Symbol(`${key}_hoverYThumbRect`);
 export const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const keyActivePoint = Symbol(`${key}_activePoint`);
 export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);

package/dist/esm/middleware/scroller/index.js

@@ -1,14 +1,18 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 export const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
+    const { viewer, boardContent, sharer, eventHub } = opts;
     const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
+    let isBusy = false;
     const clear = () => {
         sharer.setSharedStorage(keyPrevPoint, null);
         sharer.setSharedStorage(keyActivePoint, null);
         sharer.setSharedStorage(keyActiveThumbType, null);
+        sharer.setSharedStorage(keyHoverXThumbRect, null);
+        sharer.setSharedStorage(keyHoverYThumbRect, null);
+        isBusy = false;
     };
     clear();
     const scrollX = (p) => {
@@ -50,10 +54,32 @@ export const MiddlewareScroller = (opts) => {
             });
             viewer.drawFrame();
         },
+        hover: (e) => {
+            if (isBusy === true) {
+                return false;
+            }
+            const { point } = e;
+            const thumbType = getThumbType(point);
+            if (thumbType === 'X' || thumbType === 'Y') {
+                if (thumbType === 'X') {
+                    sharer.setSharedStorage(keyHoverXThumbRect, true);
+                    sharer.setSharedStorage(keyHoverYThumbRect, false);
+                }
+                else {
+                    sharer.setSharedStorage(keyHoverXThumbRect, false);
+                    sharer.setSharedStorage(keyHoverYThumbRect, true);
+                }
+                eventHub.trigger('cursor', { type: 'default' });
+                return false;
+            }
+            sharer.setSharedStorage(keyHoverXThumbRect, false);
+            sharer.setSharedStorage(keyHoverYThumbRect, false);
+        },
         pointStart: (e) => {
             const { point } = e;
             const thumbType = getThumbType(point);
             if (thumbType === 'X' || thumbType === 'Y') {
+                isBusy = true;
                 sharer.setSharedStorage(keyActiveThumbType, thumbType);
                 sharer.setSharedStorage(keyPrevPoint, point);
                 return false;
@@ -75,6 +101,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {

package/dist/esm/middleware/scroller/types.d.ts

@@ -1,8 +1,10 @@
 import type { Point, ElementSize } from '@idraw/types';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 export type DeepScrollerSharedStorage = {
     [keyXThumbRect]: null | ElementSize;
     [keyYThumbRect]: null | ElementSize;
+    [keyHoverXThumbRect]: boolean | null;
+    [keyHoverYThumbRect]: boolean | null;
     [keyPrevPoint]: null | Point;
     [keyActivePoint]: null | Point;
     [keyActiveThumbType]: null | 'X' | 'Y';

package/dist/esm/middleware/scroller/types.js

@@ -1 +1 @@
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';

package/dist/esm/middleware/scroller/util.js

@@ -1,11 +1,12 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
 const scrollerThumbAlpha = 0.3;
 const scrollConfig = {
     width: minScrollerWidth,
-    thumbColor: '#000000AA',
+    thumbColor: '#0000008A',
+    thumbHoverColor: '#000000EE',
     scrollBarColor: '#FFFFFF60',
     showScrollBar: false
 };
@@ -38,11 +39,14 @@ function getScrollInfoFromSnapshot(snapshot) {
         prevPoint: sharedStore[keyPrevPoint] || null,
         activeThumbType: sharedStore[keyActiveThumbType] || null,
         xThumbRect: sharedStore[keyXThumbRect] || null,
-        yThumbRect: sharedStore[keyYThumbRect] || null
+        yThumbRect: sharedStore[keyYThumbRect] || null,
+        hoverXThumb: sharedStore[keyHoverXThumbRect],
+        hoverYThumb: sharedStore[keyHoverYThumbRect]
     };
     return info;
 }
-function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
+function calcScrollerInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
     const sliderMinSize = scrollerLineWidth * 2.5;
@@ -101,7 +105,8 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        thumbColor: scrollConfig.thumbColor,
+        xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
+        yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
         scrollBarColor: scrollConfig.scrollBarColor,
         xThumbRect,
         yThumbRect
@@ -158,9 +163,9 @@ function drawScrollerThumb(ctx, opts) {
 function drawScrollerInfo(overlayContext, opts) {
     const ctx = overlayContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
     const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -177,12 +182,12 @@ function drawScrollerInfo(overlayContext, opts) {
         ctx.fillStyle = wrapper.scrollBarColor;
         ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
     }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.xThumbColor }));
     if (scrollConfig.showScrollBar === true) {
         ctx.fillStyle = wrapper.scrollBarColor;
         ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
     }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.yThumbColor }));
     ctx.globalAlpha = 1;
     return {
         xThumbRect,

package/dist/esm/middleware/selector/index.d.ts

@@ -1,7 +1,7 @@
 import type { CoreEventMap } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
-export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
 export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;