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

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

@@ -1,11 +1,21 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
-export const MiddlewareScroller = (opts) => {
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
+export const MiddlewareScroller = (opts, config) => {
     const { viewer, boardContent, sharer, eventHub } = opts;
     const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     let isBusy = false;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
+    const style = {
+        thumbBackground,
+        thumbBorderColor,
+        hoverThumbBackground,
+        hoverThumbBorderColor,
+        activeThumbBackground,
+        activeThumbBorderColor
+    };
     const clear = () => {
         sharer.setSharedStorage(keyPrevPoint, null);
         sharer.setSharedStorage(keyActivePoint, null);
@@ -111,7 +121,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

@@ -1,4 +1,4 @@
-import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
+import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types';
 export type ScrollbarThumbType = 'X' | 'Y';
 export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
@@ -6,6 +6,7 @@ export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: P
 }): ScrollbarThumbType | null;
 export declare function drawScroller(ctx: ViewContext2D, opts: {
     snapshot: BoardViewerFrameSnapshot;
+    style: MiddlewareScrollerStyle;
 }): {
     xThumbRect: ElementSize;
     yThumbRect: ElementSize;

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

@@ -1,15 +1,7 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 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: '#0000008A',
-    thumbHoverColor: '#000000EE',
-    scrollBarColor: '#FFFFFF60',
-    showScrollBar: false
-};
+const minThumbLength = scrollerLineWidth * 2.5;
 function isPointAtRect(overlayContext, p, rect) {
     const ctx = overlayContext;
     const { x, y, w, h } = rect;
@@ -46,11 +38,12 @@ function getScrollInfoFromSnapshot(snapshot) {
     return info;
 }
 function calcScrollerInfo(opts) {
-    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts;
+    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
-    const sliderMinSize = scrollerLineWidth * 2.5;
+    const sliderMinSize = minThumbLength;
     const lineSize = scrollerLineWidth;
+    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -105,23 +98,24 @@ function calcScrollerInfo(opts) {
         ySize,
         translateY,
         translateX,
-        xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
-        yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor,
-        scrollBarColor: scrollConfig.scrollBarColor,
+        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
+        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
+        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
+        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
         xThumbRect,
         yThumbRect
     };
     return scrollWrapper;
 }
 function drawScrollerThumb(ctx, opts) {
-    let { x, y, h, w } = opts;
+    let { x, y, h, w, background, borderColor } = opts;
     ctx.save();
     ctx.shadowColor = '#FFFFFF';
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 1;
     {
-        const { color, axis } = opts;
+        const { axis } = opts;
         if (axis === 'X') {
             y = y + h / 4 + 0;
             h = h / 2;
@@ -135,7 +129,7 @@ function drawScrollerThumb(ctx, opts) {
         if (w < r * 2 || h < r * 2) {
             r = 0;
         }
-        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -143,12 +137,11 @@ function drawScrollerThumb(ctx, opts) {
         ctx.arcTo(x, y + h, x, y, r);
         ctx.arcTo(x, y, x + w, y, r);
         ctx.closePath();
-        ctx.fillStyle = color;
+        ctx.fillStyle = background;
         ctx.fill();
-        ctx.globalAlpha = 1;
         ctx.beginPath();
         ctx.lineWidth = 1;
-        ctx.strokeStyle = color;
+        ctx.strokeStyle = borderColor;
         ctx.setLineDash([]);
         ctx.moveTo(x + r, y);
         ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -162,10 +155,9 @@ function drawScrollerThumb(ctx, opts) {
 }
 function drawScrollerInfo(overlayContext, opts) {
     const ctx = overlayContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
     const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
-    const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb });
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -178,27 +170,18 @@ function drawScrollerInfo(overlayContext, opts) {
             yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
         }
     }
-    if (scrollConfig.showScrollBar === true) {
-        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.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.yThumbColor }));
-    ctx.globalAlpha = 1;
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, background: wrapper.xThumbBackground, borderColor: wrapper.xThumbBorderColor }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, background: wrapper.yThumbBackground, borderColor: wrapper.yThumbBorderColor }));
     return {
         xThumbRect,
         yThumbRect
     };
 }
 export function drawScroller(ctx, opts) {
-    const { snapshot } = opts;
+    const { snapshot, style } = opts;
     const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
     const scrollInfo = getScrollInfoFromSnapshot(snapshot);
-    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo });
+    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style });
     return { xThumbRect, yThumbRect };
 }

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

@@ -1,3 +1,4 @@
+import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const key = "SELECT";
 export declare const keyActionType: unique symbol;
 export declare const keyResizeType: unique symbol;
@@ -23,11 +24,8 @@ export declare const keyDebugEnd0: unique symbol;
 export declare const selectWrapperBorderWidth = 2;
 export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
-export declare const wrapperColor = "#1973ba";
-export declare const lockColor = "#5b5959b5";
 export declare const controllerSize = 10;
-export declare const auxiliaryColor = "#f7276e";
-export declare const referenceColor = "#f7276e";
+export declare const defaultStyle: MiddlewareSelectorStyle;
 export declare const middlewareEventSelect: string;
 export declare const middlewareEventSelectClear: string;
 export declare const middlewareEventSelectInGroup: string;

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

@@ -23,11 +23,17 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
 export const selectWrapperBorderWidth = 2;
 export const resizeControllerBorderWidth = 4;
 export const areaBorderWidth = 1;
-export const wrapperColor = '#1973ba';
-export const lockColor = '#5b5959b5';
 export const controllerSize = 10;
-export const auxiliaryColor = '#f7276e';
-export const referenceColor = '#f7276e';
+const activeColor = '#1973ba';
+const activeAreaColor = '#1976d21c';
+const lockedColor = '#5b5959b5';
+const referenceColor = '#f7276e';
+export const defaultStyle = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+};
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const middlewareEventSelectInGroup = '@middleware/select-in-group';

package/dist/esm/middleware/selector/draw-auxiliary.d.ts

@@ -1,7 +1 @@
-import type { ViewContext2D, Element, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
-export declare function drawAuxiliaryExperimentBox(ctx: ViewContext2D, opts: {
-    calculator: ViewCalculator;
-    element: Element | null;
-    viewScaleInfo: ViewScaleInfo;
-    viewSizeInfo: ViewSizeInfo;
-}): void;
+export {};

package/dist/esm/middleware/selector/draw-auxiliary.js

@@ -1,5 +1,3 @@
-import { auxiliaryColor } from './config';
-import { drawLine, drawCrossByCenter } from './draw-base';
 function getViewBoxInfo(rectInfo) {
     const boxInfo = {
         minX: rectInfo.topLeft.x,
@@ -11,36 +9,4 @@ function getViewBoxInfo(rectInfo) {
     };
     return boxInfo;
 }
-export function drawAuxiliaryExperimentBox(ctx, opts) {
-    const { element, viewScaleInfo, viewSizeInfo, calculator } = opts;
-    if (!element) {
-        return;
-    }
-    const viewRectInfo = calculator.calcViewRectInfoFromRange(element.uuid, { viewScaleInfo, viewSizeInfo });
-    if (!viewRectInfo) {
-        return;
-    }
-    const lineOpts = {
-        borderColor: auxiliaryColor,
-        borderWidth: 1,
-        lineDash: []
-    };
-    const boxInfo = getViewBoxInfo(viewRectInfo);
-    const { width, height } = viewSizeInfo;
-    drawLine(ctx, { x: boxInfo.minX, y: 0 }, { x: boxInfo.minX, y: height }, lineOpts);
-    drawLine(ctx, { x: boxInfo.midX, y: 0 }, { x: boxInfo.midX, y: height }, lineOpts);
-    drawLine(ctx, { x: boxInfo.maxX, y: 0 }, { x: boxInfo.maxX, y: height }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.minY }, { x: width, y: boxInfo.minY }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.midY }, { x: width, y: boxInfo.midY }, lineOpts);
-    drawLine(ctx, { x: 0, y: boxInfo.maxY }, { x: width, y: boxInfo.maxY }, lineOpts);
-    const crossOpts = Object.assign(Object.assign({}, lineOpts), { size: 6 });
-    drawCrossByCenter(ctx, viewRectInfo.center, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.topLeft, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.topRight, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottomLeft, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottomRight, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.top, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.right, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.bottom, crossOpts);
-    drawCrossByCenter(ctx, viewRectInfo.left, crossOpts);
-}
+export {};

package/dist/esm/middleware/selector/draw-reference.d.ts

@@ -1,5 +1,7 @@
 import type { ViewContext2D, PointSize } from '@idraw/types';
+import { MiddlewareSelectorStyle } from './types';
 export declare function drawReferenceLines(ctx: ViewContext2D, opts: {
     xLines?: Array<PointSize[]>;
     yLines?: Array<PointSize[]>;
+    style: MiddlewareSelectorStyle;
 }): void;

package/dist/esm/middleware/selector/draw-reference.js

@@ -1,7 +1,7 @@
-import { referenceColor } from './config';
 import { drawLine, drawCrossByCenter } from './draw-base';
 export function drawReferenceLines(ctx, opts) {
-    const { xLines, yLines } = opts;
+    const { xLines, yLines, style } = opts;
+    const { referenceColor } = style;
     const lineOpts = {
         borderColor: referenceColor,
         borderWidth: 1,

package/dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -1,13 +1,15 @@
 import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator } from '@idraw/types';
-import type { AreaSize } from './types';
+import type { AreaSize, MiddlewareSelectorStyle } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     controller?: ElementSizeController | null;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
     hideControllers: boolean;
@@ -15,16 +17,20 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2
     viewSizeInfo: ViewSizeInfo;
     element: Element | null;
     calculator: ViewCalculator;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
 export declare function drawArea(ctx: ViewContext2D, opts: {
     start: PointSize;
     end: PointSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawListArea(ctx: ViewContext2D, opts: {
     areaSize: AreaSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawGroupQueueVertexesWrappers(ctx: ViewContext2D, vertexesList: ViewRectVertexes[], opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -1,23 +1,27 @@
 import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth, lockColor, controllerSize } from './config';
+import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config';
 import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    const { style } = opts;
+    const { activeColor } = style;
+    const wrapperOpts = { borderColor: activeColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
 export function drawLockVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }
-    const wrapperOpts = { borderColor: lockColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    const { style } = opts;
+    const { lockedColor } = style;
+    const wrapperOpts = { borderColor: lockedColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     const { controller } = opts;
     if (controller) {
         const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, bottomMiddle, leftMiddle, rightMiddle } = controller;
-        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockColor });
+        const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: 1, background: lockedColor });
         drawCrossVertexes(ctx, calcViewVertexes(topMiddle.vertexes, opts), ctrlOpts);
         drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
         drawCrossVertexes(ctx, calcViewVertexes(leftMiddle.vertexes, opts), ctrlOpts);
@@ -32,9 +36,10 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     if (!controller) {
         return;
     }
-    const { hideControllers } = opts;
+    const { hideControllers, style } = opts;
+    const { activeColor } = style;
     const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
+    const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
     if (!hideControllers) {
@@ -76,11 +81,12 @@ export function drawElementListShadows(ctx, elements, opts) {
     });
 }
 export function drawArea(ctx, opts) {
-    const { start, end } = opts;
+    const { start, end, style } = opts;
+    const { activeColor, activeAreaColor } = style;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = '#1976d24f';
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
     ctx.beginPath();
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, start.y);
@@ -91,12 +97,13 @@ export function drawArea(ctx, opts) {
     ctx.fill();
 }
 export function drawListArea(ctx, opts) {
-    const { areaSize } = opts;
+    const { areaSize, style } = opts;
+    const { activeColor, activeAreaColor } = style;
     const { x, y, w, h } = areaSize;
     ctx.setLineDash([]);
     ctx.lineWidth = areaBorderWidth;
-    ctx.strokeStyle = wrapperColor;
-    ctx.fillStyle = '#1976d21c';
+    ctx.strokeStyle = activeColor;
+    ctx.fillStyle = activeAreaColor;
     ctx.beginPath();
     ctx.moveTo(x, y);
     ctx.lineTo(x + w, y);
@@ -107,9 +114,11 @@ export function drawListArea(ctx, opts) {
     ctx.fill();
 }
 export function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
+    const { style } = opts;
+    const { activeColor } = style;
     for (let i = 0; i < vertexesList.length; i++) {
         const vertexes = vertexesList[i];
-        const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
+        const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
         drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
 }

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

@@ -1,7 +1,7 @@
-import type { CoreEventMap } from '@idraw/types';
+import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
 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>;
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig>;

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

@@ -2,14 +2,17 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueV
 import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize } from './config';
+import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
 import { eventChange } from '../../config';
 import { keyLayoutIsSelected } from '../layout-selector';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
-export const MiddlewareSelector = (opts) => {
+export const MiddlewareSelector = (opts, config) => {
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
+    const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let prevPoint = null;
@@ -98,7 +101,6 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementController, null);
         sharer.setSharedStorage(keySelectedElementPosition, []);
         sharer.setSharedStorage(keyIsMoving, null);
-        sharer.setSharedStorage(keyEnableSelectInGroup, null);
     };
     clear();
     const selectCallback = ({ uuids, positions }) => {
@@ -607,7 +609,7 @@ export const MiddlewareSelector = (opts) => {
             const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
             const isMoving = sharedStore[keyIsMoving];
             const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
-            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
+            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
             const selectedElementController = elem
                 ? calcElementSizeController(elem, {
                     groupQueue,
@@ -624,14 +626,14 @@ export const MiddlewareSelector = (opts) => {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -646,7 +648,8 @@ export const MiddlewareSelector = (opts) => {
                                 if (offsetX === 0 || offsetY === 0) {
                                     drawReferenceLines(overlayContext, {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
                                 }
                             }
@@ -661,14 +664,14 @@ export const MiddlewareSelector = (opts) => {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
                     else {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
                             const referenceInfo = calcReferenceInfo(elem.uuid, {
@@ -683,7 +686,8 @@ export const MiddlewareSelector = (opts) => {
                                 if (offsetX === 0 || offsetY === 0) {
                                     drawReferenceLines(overlayContext, {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
                                 }
                             }
@@ -691,7 +695,7 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(overlayContext, { start: areaStart, end: areaEnd });
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
                 }
                 else if (['drag-list', 'drag-list-end'].includes(actionType)) {
                     const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
@@ -700,7 +704,7 @@ export const MiddlewareSelector = (opts) => {
                         calculator
                     });
                     if (listAreaSize) {
-                        drawListArea(overlayContext, { areaSize: listAreaSize });
+                        drawListArea(overlayContext, { areaSize: listAreaSize, style });
                     }
                 }
             }