@idraw/core 0.4.0-beta.4 → 0.4.0-beta.41

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

@@ -1,4 +1,5 @@
-import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator, MiddlewareRulerStyle } from '@idraw/types';
+import type { DeepRulerSharedStorage } from './types';
 interface RulerScale {
     num: number;
     showNum: boolean;
@@ -9,25 +10,40 @@ interface RulerScale {
 export declare function calcXRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function calcYRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function drawXRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
 export declare function drawYRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
 export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
 }): void;
-export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
+export declare function drawGrid(ctx: ViewContext2D, opts: {
     xList: RulerScale[];
     yList: RulerScale[];
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
+}): void;
+export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
+    snapshot: BoardViewerFrameSnapshot<DeepRulerSharedStorage>;
+    calculator: ViewCalculator;
+    style: MiddlewareRulerStyle;
 }): void;
 export {};

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

@@ -1,21 +1,35 @@
-import { formatNumber, rotateByCenter } from '@idraw/util';
-const rulerSize = 16;
-const background = '#FFFFFFA8';
-const borderColor = '#00000080';
-const scaleColor = '#000000';
-const textColor = '#00000080';
-const fontFamily = 'monospace';
-const fontSize = 10;
-const fontWeight = 100;
-const gridColor = '#AAAAAA20';
-const gridKeyColor = '#AAAAAA40';
-const lineSize = 1;
+import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { keySelectedElementList, keyActionType } from '../selector';
+import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
+const limitRulerUnitList = [1, 2, 5, 10, 20, 50, 100, 200, 500];
+function limitRulerUnit(unit) {
+    unit = Math.max(limitRulerUnitList[0], Math.min(unit, limitRulerUnitList[limitRulerUnitList.length - 1]));
+    for (let i = 0; i < limitRulerUnitList.length - 1; i++) {
+        const thisUnit = limitRulerUnitList[i];
+        const nextUnit = limitRulerUnitList[i + 1];
+        if (unit > nextUnit) {
+            continue;
+        }
+        if (unit === thisUnit) {
+            return unit;
+        }
+        if (unit === nextUnit) {
+            return unit;
+        }
+        const mid = (thisUnit + nextUnit) / 2;
+        if (unit <= mid) {
+            return thisUnit;
+        }
+        return nextUnit;
+    }
+    return unit;
+}
 function calcRulerScaleList(opts) {
     const { scale, viewLength, viewOffset } = opts;
     const list = [];
     let rulerUnit = 10;
     rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
-    rulerUnit = Math.max(10, Math.min(rulerUnit, 1000));
+    rulerUnit = limitRulerUnit(rulerUnit);
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -38,7 +52,7 @@ function calcRulerScaleList(opts) {
         list.push(rulerScale);
         index++;
     }
-    return list;
+    return { list, rulerUnit };
 }
 export function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -63,7 +77,8 @@ export function calcYRulerScaleList(opts) {
     });
 }
 export function drawXRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -95,7 +110,8 @@ export function drawXRuler(ctx, opts) {
     }
 }
 export function drawYRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
     const scaleDrawEnd = (rulerSize * 4) / 5;
     const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
@@ -132,34 +148,37 @@ export function drawYRuler(ctx, opts) {
     }
 }
 export function drawRulerBackground(ctx, opts) {
-    const { viewSizeInfo } = opts;
+    const { viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { background, borderColor } = style;
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(width + 1, 0);
+    const basePosition = -1;
+    ctx.moveTo(basePosition, basePosition);
+    ctx.lineTo(width + 1, basePosition);
     ctx.lineTo(width + 1, rulerSize);
     ctx.lineTo(rulerSize, rulerSize);
     ctx.lineTo(rulerSize, height + 1);
-    ctx.lineTo(0, height + 1);
-    ctx.lineTo(0, 0);
+    ctx.lineTo(basePosition, height + 1);
+    ctx.lineTo(basePosition, basePosition);
     ctx.closePath();
     ctx.fillStyle = background;
-    ctx.fill();
+    ctx.fill('nonzero');
     ctx.lineWidth = lineSize;
     ctx.setLineDash([]);
     ctx.strokeStyle = borderColor;
     ctx.stroke();
 }
-export function drawUnderGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo } = opts;
+export function drawGrid(ctx, opts) {
+    const { xList, yList, viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { gridColor, gridPrimaryColor } = style;
     for (let i = 0; i < xList.length; i++) {
         const item = xList[i];
         ctx.beginPath();
         ctx.moveTo(item.position, 0);
         ctx.lineTo(item.position, height);
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
         else {
             ctx.strokeStyle = gridColor;
@@ -175,7 +194,7 @@ export function drawUnderGrid(ctx, opts) {
         ctx.moveTo(0, item.position);
         ctx.lineTo(width, item.position);
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
         else {
             ctx.strokeStyle = gridColor;
@@ -185,3 +204,57 @@ export function drawUnderGrid(ctx, opts) {
         ctx.stroke();
     }
 }
+export function drawScrollerSelectedArea(ctx, opts) {
+    const { snapshot, calculator, style } = opts;
+    const { sharedStore } = snapshot;
+    const { selectedAreaColor } = style;
+    const selectedElementList = sharedStore[keySelectedElementList];
+    const actionType = sharedStore[keyActionType];
+    if (['select', 'drag', 'drag-list', 'drag-list-end'].includes(actionType) &&
+        selectedElementList.length > 0) {
+        const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+        const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+        const rangeRectInfoList = [];
+        const xAreaStartList = [];
+        const xAreaEndList = [];
+        const yAreaStartList = [];
+        const yAreaEndList = [];
+        selectedElementList.forEach((elem) => {
+            const rectInfo = calculator.calcViewRectInfoFromRange(elem.uuid, {
+                viewScaleInfo,
+                viewSizeInfo
+            });
+            if (rectInfo) {
+                rangeRectInfoList.push(rectInfo);
+                xAreaStartList.push(rectInfo.left.x);
+                xAreaEndList.push(rectInfo.right.x);
+                yAreaStartList.push(rectInfo.top.y);
+                yAreaEndList.push(rectInfo.bottom.y);
+            }
+        });
+        if (!(rangeRectInfoList.length > 0)) {
+            return;
+        }
+        const xAreaStart = Math.min(...xAreaStartList);
+        const xAreaEnd = Math.max(...xAreaEndList);
+        const yAreaStart = Math.min(...yAreaStartList);
+        const yAreaEnd = Math.max(...yAreaEndList);
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.moveTo(xAreaStart, 0);
+        ctx.lineTo(xAreaEnd, 0);
+        ctx.lineTo(xAreaEnd, rulerSize);
+        ctx.lineTo(xAreaStart, rulerSize);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill('nonzero');
+        ctx.beginPath();
+        ctx.moveTo(0, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaStart);
+        ctx.lineTo(rulerSize, yAreaEnd);
+        ctx.lineTo(0, yAreaEnd);
+        ctx.fillStyle = selectedAreaColor;
+        ctx.closePath();
+        ctx.fill('nonzero');
+    }
+}

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

@@ -1,3 +1,2 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
-export declare const middlewareEventScale = "@middleware/scale";
-export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent>;
+import type { Middleware, CoreEventMap } from '@idraw/types';
+export declare const MiddlewareScaler: Middleware<Record<string, any>, CoreEventMap>;

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

@@ -1,10 +1,11 @@
 import { formatNumber } from '@idraw/util';
-export const middlewareEventScale = '@middleware/scale';
+import { coreEventKeys } from '../../config';
 export const MiddlewareScaler = (opts) => {
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
     const minScale = 0.05;
     return {
+        name: '@middleware/scaler',
         wheelScale(e) {
             const { deltaY, point } = e;
             const { scale } = sharer.getActiveViewScaleInfo();
@@ -22,7 +23,7 @@ export const MiddlewareScaler = (opts) => {
             viewer.scroll({ moveX, moveY });
             viewer.drawFrame();
             const scaleNum = formatNumber(scale);
-            eventHub.trigger(middlewareEventScale, { scale: scaleNum });
+            eventHub.trigger(coreEventKeys.SCALE, { scale: scaleNum });
         }
     };
 };

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

@@ -1,6 +1,10 @@
+import type { MiddlewareScrollerStyle } from '@idraw/types';
 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;
+export declare const defaultStyle: MiddlewareScrollerStyle;

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

@@ -1,6 +1,16 @@
 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`);
+export const defaultStyle = {
+    thumbBackground: '#0000003A',
+    thumbBorderColor: '#0000008A',
+    hoverThumbBackground: '#0000005F',
+    hoverThumbBorderColor: '#000000EE',
+    activeThumbBackground: '#0000005E',
+    activeThumbBorderColor: '#000000F0'
+};

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

@@ -1,2 +1,3 @@
-import type { BoardMiddleware } from '@idraw/types';
-export declare const MiddlewareScroller: BoardMiddleware;
+import type { Middleware, MiddlewareScrollerConfig } from '@idraw/types';
+import type { DeepScrollerSharedStorage } from './types';
+export declare const MiddlewareScroller: Middleware<DeepScrollerSharedStorage, any, MiddlewareScrollerConfig>;

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

@@ -1,14 +1,20 @@
 import { drawScroller, isPointInScrollThumb } from './util';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
-export const MiddlewareScroller = (opts) => {
-    const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
+import { coreEventKeys } 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;
+    let innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     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) => {
@@ -36,12 +42,16 @@ export const MiddlewareScroller = (opts) => {
         }
     };
     const getThumbType = (p) => {
-        return isPointInScrollThumb(helperContext, p, {
+        return isPointInScrollThumb(overlayContext, p, {
             xThumbRect: sharer.getSharedStorage(keyXThumbRect),
             yThumbRect: sharer.getSharedStorage(keyYThumbRect)
         });
     };
     return {
+        name: '@middleware/scroller',
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
         wheel: (e) => {
             viewer.scroll({
                 moveX: 0 - e.deltaX,
@@ -49,10 +59,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(coreEventKeys.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;
@@ -74,6 +106,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         pointEnd: () => {
+            isBusy = false;
             const activeThumbType = sharer.getSharedStorage(keyActiveThumbType);
             clear();
             if (activeThumbType === 'X' || activeThumbType === 'Y') {
@@ -83,7 +116,16 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+            const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
+            const style = {
+                thumbBackground,
+                thumbBorderColor,
+                hoverThumbBackground,
+                hoverThumbBorderColor,
+                activeThumbBackground,
+                activeThumbBorderColor
+            };
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

@@ -0,0 +1,11 @@
+import type { Point, ElementSize } from '@idraw/types';
+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

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

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

@@ -1,11 +1,12 @@
-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(helperContext: ViewContext2D, p: Point, opts: {
+export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
     yThumbRect?: ElementSize | null;
 }): 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,16 +1,9 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
-const minScrollerWidth = 12;
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
 const scrollerLineWidth = 16;
-const scrollerThumbAlpha = 0.36;
-const scrollConfig = {
-    width: minScrollerWidth,
-    thumbColor: '#000000AA',
-    scrollBarColor: '#FFFFFF60',
-    showScrollBar: false
-};
-function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+const minThumbLength = scrollerLineWidth * 2.5;
+function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x, y, w, h } = rect;
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -20,13 +13,13 @@ function isPointAtRect(helperContext, p, rect) {
     }
     return false;
 }
-export function isPointInScrollThumb(helperContext, p, opts) {
+export function isPointInScrollThumb(overlayContext, p, opts) {
     let thumbType = null;
     const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
         thumbType = 'X';
     }
-    else if (yThumbRect && isPointAtRect(helperContext, p, yThumbRect)) {
+    else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
         thumbType = 'Y';
     }
     return thumbType;
@@ -38,15 +31,19 @@ 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, 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)));
@@ -101,8 +98,10 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        thumbColor: scrollConfig.thumbColor,
-        scrollBarColor: scrollConfig.scrollBarColor,
+        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
+        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
+        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
+        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
         xThumbRect,
         yThumbRect
     };
@@ -110,13 +109,14 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
 }
 function drawScrollerThumb(ctx, opts) {
     let { x, y, h, w } = opts;
+    const { 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;
@@ -130,7 +130,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);
@@ -138,12 +138,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.fill();
-        ctx.globalAlpha = 1;
+        ctx.fillStyle = background;
+        ctx.fill('nonzero');
         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);
@@ -155,12 +154,11 @@ function drawScrollerThumb(ctx, opts) {
     }
     ctx.restore();
 }
-function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
-    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
-    const { width, height } = viewSizeInfo;
-    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
+    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
+    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
     let xThumbRect = Object.assign({}, wrapper.xThumbRect);
     let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     if (activeThumbType && prevPoint && activePoint) {
@@ -173,27 +171,18 @@ function drawScrollerInfo(helperContext, 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.thumbColor }));
-    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 }));
-    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;
@@ -8,8 +9,12 @@ export declare const keyHoverElementVertexes: unique symbol;
 export declare const keySelectedElementList: unique symbol;
 export declare const keySelectedElementListVertexes: unique symbol;
 export declare const keySelectedElementController: unique symbol;
+export declare const keySelectedElementPosition: unique symbol;
 export declare const keyGroupQueue: unique symbol;
 export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyIsMoving: unique symbol;
+export declare const keyEnableSelectInGroup: unique symbol;
+export declare const keyEnableSnapToGrid: unique symbol;
 export declare const keyDebugElemCenter: unique symbol;
 export declare const keyDebugStartVertical: unique symbol;
 export declare const keyDebugEndVertical: unique symbol;
@@ -19,4 +24,7 @@ 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 controllerSize = 10;
+export declare const rotateControllerSize = 20;
+export declare const rotateControllerPosition = 22;
+export declare const defaultStyle: MiddlewareSelectorStyle;

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

@@ -8,8 +8,12 @@ export const keyHoverElementVertexes = Symbol(`${key}_hoverElementVertexes`);
 export const keySelectedElementList = Symbol(`${key}_selectedElementList`);
 export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementListVertexes`);
 export const keySelectedElementController = Symbol(`${key}_selectedElementController`);
+export const keySelectedElementPosition = Symbol(`${key}_selectedElementPosition`);
 export const keyGroupQueue = Symbol(`${key}_groupQueue`);
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyIsMoving = Symbol(`${key}_isMoving`);
+export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
+export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
 export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -19,4 +23,16 @@ 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 controllerSize = 10;
+export const rotateControllerSize = 20;
+export const rotateControllerPosition = 22;
+const activeColor = '#1973ba';
+const activeAreaColor = '#1976d21c';
+const lockedColor = '#5b5959b5';
+const referenceColor = '#f7276e';
+export const defaultStyle = {
+    activeColor,
+    activeAreaColor,
+    lockedColor,
+    referenceColor
+};

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

@@ -0,0 +1 @@
+export {};