@idraw/core - npm Package Compare versions

Comparing version 0.4.0-beta.30 to 0.4.0-beta.31

dist/esm/index.d.ts

@@ -16,4 +16,4 @@ import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
     destroy(): void;
-    use(middleware: BoardMiddleware<any, any>): void;
-    disuse(middleware: BoardMiddleware<any, any>): void;
+    use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C): void;
+    disuse(middleware: BoardMiddleware<any, any, any>): void;
     setData(data: Data, opts?: {
@@ -20,0 +20,0 @@ modifiedOptions?: ModifyOptions;

dist/esm/index.js

@@ -61,4 +61,4 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     }
-    use(middleware) {
-        __classPrivateFieldGet(this, _Core_board, "f").use(middleware);
+    use(middleware, config) {
+        __classPrivateFieldGet(this, _Core_board, "f").use(middleware, config);
     }
@@ -65,0 +65,0 @@ disuse(middleware) {

dist/esm/middleware/info/draw-info.d.ts

 import type { PointSize, ViewContext2D } from '@idraw/types';
+import type { MiddlewareInfoStyle } from './types';
 export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
@@ -9,4 +10,3 @@ point: PointSize;
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;
@@ -20,4 +20,3 @@ export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;
@@ -31,4 +30,3 @@ export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
     lineHeight: number;
-    color: string;
-    background: string;
+    style: MiddlewareInfoStyle;
 }): void;

dist/esm/middleware/info/draw-info.js

 import { rotateByCenter } from '@idraw/util';
 const fontFamily = 'monospace';
 export function drawSizeInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textColor, textBackground } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
@@ -26,3 +27,3 @@ ctx.$setFont({
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
@@ -35,3 +36,3 @@ ctx.moveTo(bgStart.x, bgStart.y);
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
@@ -42,3 +43,4 @@ ctx.fillText(text, textStart.x, textStart.y + padding);
 export function drawPositionInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
@@ -65,3 +67,3 @@ ctx.$setFont({
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
@@ -74,3 +76,3 @@ ctx.moveTo(bgStart.x, bgStart.y);
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
@@ -81,3 +83,4 @@ ctx.fillText(text, textStart.x, textStart.y + padding);
 export function drawAngleInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, color, background, fontSize, lineHeight } = opts;
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
     rotateByCenter(ctx, angle, rotateCenter, () => {
@@ -104,3 +107,3 @@ ctx.$setFont({
         ctx.setLineDash([]);
-        ctx.fillStyle = background;
+        ctx.fillStyle = textBackground;
         ctx.beginPath();
@@ -113,3 +116,3 @@ ctx.moveTo(bgStart.x, bgStart.y);
         ctx.fill();
-        ctx.fillStyle = color;
+        ctx.fillStyle = textColor;
         ctx.textBaseline = 'top';
@@ -116,0 +119,0 @@ ctx.fillText(text, textStart.x, textStart.y + padding);

dist/esm/middleware/info/index.d.ts

@@ -1,3 +0,3 @@
-import type { BoardMiddleware } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareInfoConfig } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage>;
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig>;

dist/esm/middleware/info/index.js

 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
 import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
-const infoBackground = '#1973bac6';
-const infoTextColor = '#ffffff';
+import { defaltStyle } from './config';
 const infoFontSize = 10;
 const infoLineHeight = 16;
-export const MiddlewareInfo = (opts) => {
+export const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator } = opts;
     const { overlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
+    const { textBackground, textColor } = innerConfig;
+    const style = {
+        textBackground,
+        textColor
+    };
     return {
@@ -76,4 +81,3 @@ name: '@middleware/info',
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
@@ -90,4 +94,3 @@ drawPositionInfoText(overlayContext, {
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
@@ -104,4 +107,3 @@ drawAngleInfoText(overlayContext, {
                             lineHeight: infoLineHeight,
-                            color: infoTextColor,
-                            background: infoBackground
+                            style
                         });
@@ -108,0 +110,0 @@ }

dist/esm/middleware/ruler/index.d.ts

@@ -1,4 +0,4 @@
-import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
 import type { DeepRulerSharedStorage } from './types';
 export declare const middlewareEventRuler = "@middleware/show-ruler";
-export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap>;
+export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig>;

dist/esm/middleware/ruler/index.js

 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
+import { defaultStyle } from './config';
 export const middlewareEventRuler = '@middleware/show-ruler';
-export const MiddlewareRuler = (opts) => {
+export const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
+    const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
+    const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+    const style = {
+        background,
+        borderColor,
+        scaleColor,
+        textColor,
+        gridColor,
+        gridPrimaryColor,
+        selectedAreaColor
+    };
     let show = true;
@@ -32,8 +44,8 @@ let showGrid = true;
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
-                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo, style });
                 const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(overlayContext, { scaleList: xList });
+                drawXRuler(overlayContext, { scaleList: xList, style });
                 const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(overlayContext, { scaleList: yList });
+                drawYRuler(overlayContext, { scaleList: yList, style });
                 if (showGrid === true) {
@@ -45,3 +57,4 @@ const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
                         viewScaleInfo,
-                        viewSizeInfo
+                        viewSizeInfo,
+                        style
                     });
@@ -48,0 +61,0 @@ }

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

 import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewCalculator } from '@idraw/types';
-import type { DeepRulerSharedStorage } from './types';
+import type { DeepRulerSharedStorage, MiddlewareRulerStyle } from './types';
 interface RulerScale {
@@ -26,5 +26,7 @@ num: number;
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
 export declare function drawYRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
+    style: MiddlewareRulerStyle;
 }): void;
@@ -34,2 +36,3 @@ export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
 }): void;
@@ -41,2 +44,3 @@ export declare function drawGrid(ctx: ViewContext2D, opts: {
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareRulerStyle;
 }): void;
@@ -46,3 +50,4 @@ export declare function drawScrollerSelectedArea(ctx: ViewContext2D, opts: {
     calculator: ViewCalculator;
+    style: MiddlewareRulerStyle;
 }): void;
 export {};

dist/esm/middleware/ruler/util.js

 import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { keySelectedElementList, keyActionType } from '../selector';
-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;
-const selectedAreaColor = '#196097';
+import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
 const limitRulerUnitList = [1, 2, 5, 10, 20, 50, 100, 200, 500];
@@ -91,3 +80,4 @@ function limitRulerUnit(unit) {
 export function drawXRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
@@ -124,3 +114,4 @@ const scaleDrawEnd = (rulerSize * 4) / 5;
 export function drawYRuler(ctx, opts) {
-    const { scaleList } = opts;
+    const { scaleList, style } = opts;
+    const { scaleColor, textColor } = style;
     const scaleDrawStart = rulerSize;
@@ -162,4 +153,5 @@ const scaleDrawEnd = (rulerSize * 4) / 5;
 export function drawRulerBackground(ctx, opts) {
-    const { viewSizeInfo } = opts;
+    const { viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { background, borderColor } = style;
     ctx.beginPath();
@@ -182,4 +174,5 @@ ctx.moveTo(0, 0);
 export function drawGrid(ctx, opts) {
-    const { xList, yList, viewSizeInfo } = opts;
+    const { xList, yList, viewSizeInfo, style } = opts;
     const { width, height } = viewSizeInfo;
+    const { gridColor, gridPrimaryColor } = style;
     for (let i = 0; i < xList.length; i++) {
@@ -191,3 +184,3 @@ const item = xList[i];
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
@@ -208,3 +201,3 @@ else {
         if (item.isKeyNum === true || item.isSubKeyNum === true) {
-            ctx.strokeStyle = gridKeyColor;
+            ctx.strokeStyle = gridPrimaryColor;
         }
@@ -220,4 +213,5 @@ else {
 export function drawScrollerSelectedArea(ctx, opts) {
-    const { snapshot, calculator } = opts;
+    const { snapshot, calculator, style } = opts;
     const { sharedStore } = snapshot;
+    const { selectedAreaColor } = style;
     const selectedElementList = sharedStore[keySelectedElementList];
@@ -224,0 +218,0 @@ const actionType = sharedStore[keyActionType];

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

@@ -0,1 +1,2 @@
+import type { MiddlewareScrollerStyle } from '@idraw/types';
 export declare const key = "SCROLL";
@@ -9,1 +10,2 @@ export declare const keyXThumbRect: unique symbol;
 export declare const keyActiveThumbType: unique symbol;
+export declare const defaultStyle: MiddlewareScrollerStyle;

dist/esm/middleware/scroller/config.js

@@ -9,1 +9,9 @@ export const key = 'SCROLL';
 export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);
+export const defaultStyle = {
+    thumbBackground: '#0000003A',
+    thumbBorderColor: '#0000008A',
+    hoverThumbBackground: '#0000005F',
+    hoverThumbBorderColor: '#000000EE',
+    activeThumbBackground: '#0000005E',
+    activeThumbBorderColor: '#000000F0'
+};

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

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

dist/esm/middleware/scroller/index.js

 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;
@@ -9,2 +9,12 @@ const { overlayContext } = boardContent;
     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 = () => {
@@ -115,3 +125,3 @@ sharer.setSharedStorage(keyPrevPoint, null);
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot, style });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
@@ -118,0 +128,0 @@ sharer.setSharedStorage(keyYThumbRect, yThumbRect);

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

@@ -1,2 +0,2 @@
-import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
+import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types';
 export type ScrollbarThumbType = 'X' | 'Y';
@@ -9,2 +9,3 @@ export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     snapshot: BoardViewerFrameSnapshot;
+    style: MiddlewareScrollerStyle;
 }): {
@@ -11,0 +12,0 @@ xThumbRect: ElementSize;

dist/esm/middleware/scroller/util.js

 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) {
@@ -49,7 +41,8 @@ const ctx = overlayContext;
 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;
@@ -109,5 +102,6 @@ let ySize = 0;
         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,
@@ -119,3 +113,3 @@ yThumbRect
 function drawScrollerThumb(ctx, opts) {
-    let { x, y, h, w } = opts;
+    let { x, y, h, w, background, borderColor } = opts;
     ctx.save();
@@ -127,3 +121,3 @@ ctx.shadowColor = '#FFFFFF';
     {
-        const { color, axis } = opts;
+        const { axis } = opts;
         if (axis === 'X') {
@@ -142,3 +136,3 @@ y = y + h / 4 + 0;
         }
-        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.globalAlpha = 1;
         ctx.beginPath();
@@ -151,8 +145,7 @@ ctx.moveTo(x + r, y);
         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([]);
@@ -171,6 +164,5 @@ ctx.moveTo(x + r, y);
     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);
@@ -188,13 +180,4 @@ let yThumbRect = Object.assign({}, wrapper.yThumbRect);
     }
-    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 {
@@ -206,8 +189,8 @@ xThumbRect,
 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 };
 }

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

@@ -0,1 +1,2 @@
+import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const key = "SELECT";
@@ -26,7 +27,4 @@ export declare const keyActionType: unique symbol;
 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;
@@ -33,0 +31,0 @@ export declare const middlewareEventSelectClear: string;

dist/esm/middleware/selector/config.js

@@ -26,7 +26,13 @@ export const key = 'SELECT';
 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';
@@ -33,0 +39,0 @@ export const middlewareEventSelectClear = '@middleware/select-clear';

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

@@ -1,7 +0,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 {};

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

@@ -1,3 +0,1 @@
-import { auxiliaryColor } from './config';
-import { drawLine, drawCrossByCenter } from './draw-base';
 function getViewBoxInfo(rectInfo) {
@@ -14,34 +12,2 @@ const 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 {};

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

 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;

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

@@ -1,5 +0,5 @@
-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 = {
@@ -6,0 +6,0 @@ borderColor: referenceColor,

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

 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;
@@ -11,2 +12,3 @@ export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     controller?: ElementSizeController | null;
+    style: MiddlewareSelectorStyle;
 }): void;
@@ -19,2 +21,3 @@ export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
     calculator: ViewCalculator;
+    style: MiddlewareSelectorStyle;
 }): void;
@@ -25,5 +28,7 @@ export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
     end: PointSize;
+    style: MiddlewareSelectorStyle;
 }): void;
 export declare function drawListArea(ctx: ViewContext2D, opts: {
     areaSize: AreaSize;
+    style: MiddlewareSelectorStyle;
 }): void;
@@ -33,2 +38,3 @@ export declare function drawGroupQueueVertexesWrappers(ctx: ViewContext2D, vertexesList: ViewRectVertexes[], opts: {
     viewSizeInfo: ViewSizeInfo;
+    style: MiddlewareSelectorStyle;
 }): void;

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

 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';
@@ -8,3 +8,5 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     }
-    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);
@@ -16,3 +18,5 @@ }
     }
-    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);
@@ -22,3 +26,3 @@ const { controller } = opts;
         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);
@@ -38,5 +42,6 @@ drawCrossVertexes(ctx, calcViewVertexes(bottomMiddle.vertexes, opts), ctrlOpts);
     }
-    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' });
@@ -83,7 +88,8 @@ drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
 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();
@@ -99,8 +105,9 @@ ctx.moveTo(start.x, start.y);
 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();
@@ -116,7 +123,9 @@ ctx.moveTo(x, y);
 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);
     }
 }

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

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

dist/esm/middleware/selector/index.js

@@ -5,3 +5,3 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
 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';
@@ -13,3 +13,6 @@ import { middlewareEventTextEdit } from '../text-editor';
 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;
@@ -612,3 +615,3 @@ const { overlayContext } = boardContent;
             const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
-            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
+            const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
             const selectedElementController = elem
@@ -630,3 +633,3 @@ ? calcElementSizeController(elem, {
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
@@ -638,3 +641,3 @@ else {
                 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') {
@@ -654,3 +657,4 @@ if (enableSnapToGrid === true) {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
@@ -670,3 +674,3 @@ }
                                 viewScaleInfo
-                            }) }));
+                            }), style }));
                     }
@@ -678,3 +682,3 @@ else {
                 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') {
@@ -694,3 +698,4 @@ if (enableSnapToGrid === true) {
                                         xLines,
-                                        yLines
+                                        yLines,
+                                        style
                                     });
@@ -703,3 +708,3 @@ }
                 else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(overlayContext, { start: areaStart, end: areaEnd });
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd, style });
                 }
@@ -713,3 +718,3 @@ else if (['drag-list', 'drag-list-end'].includes(actionType)) {
                     if (listAreaSize) {
-                        drawListArea(overlayContext, { areaSize: listAreaSize });
+                        drawListArea(overlayContext, { areaSize: listAreaSize, style });
                     }
@@ -716,0 +721,0 @@ }

package.json

 {
   "name": "@idraw/core",
-  "version": "0.4.0-beta.30",
+  "version": "0.4.0-beta.31",
   "description": "",
@@ -24,9 +24,9 @@ "main": "dist/esm/index.js",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.30"
+    "@idraw/types": "^0.4.0-beta.31"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/board": "^0.4.0-beta.30",
-    "@idraw/renderer": "^0.4.0-beta.30",
-    "@idraw/util": "^0.4.0-beta.30"
+    "@idraw/board": "^0.4.0-beta.31",
+    "@idraw/renderer": "^0.4.0-beta.31",
+    "@idraw/util": "^0.4.0-beta.31"
   },
@@ -33,0 +33,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

758039

increased by0.97%

Number of package files

68

increased by6.25%

Lines of code

13029

increased by1.04%

No dependency changes