Merge pull request #332 from idrawjs/dev-v0.4

feat: support custom style of middlewares

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0-beta.30",
+  "version": "0.4.0-beta.31",
   "workspaces": [
     "packages/*"
   ],

packages/board/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/board",
-  "version": "0.4.0-beta.30",
+  "version": "0.4.0-beta.31",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,12 +21,12 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "workspace:^0.4.0-beta.30"
+    "@idraw/types": "workspace:^0.4.0-beta.31"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/util": "workspace:^0.4.0-beta.30",
-    "@idraw/renderer": "workspace:^0.4.0-beta.30"
+    "@idraw/util": "workspace:^0.4.0-beta.31",
+    "@idraw/renderer": "workspace:^0.4.0-beta.31"
   },
   "publishConfig": {
     "access": "public",

packages/board/src/index.ts

@@ -26,6 +26,7 @@ import { Viewer } from './lib/viewer';
 interface BoardMiddlewareMapItem {
   status: 'enable' | 'disable';
   middlewareObject: BoardMiddlewareObject;
+  config: any;
 }
 
 export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
@@ -333,7 +334,7 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     return data;
   }
 
-  use(middleware: BoardMiddleware<any, any>) {
+  use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>) {
     if (this.#middlewareMap.has(middleware)) {
       const item = this.#middlewareMap.get(middleware);
       if (item) {
@@ -350,14 +351,15 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     const calculator = this.#calculator;
     const eventHub = this.#eventHub;
 
-    const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter<any>, container });
+    const obj = middleware({ boardContent, sharer, viewer, calculator, eventHub: eventHub as UtilEventEmitter<any>, container }, config);
     obj.use?.();
     this.#middlewares.push(middleware);
     this.#activeMiddlewareObjs.push(obj);
 
     this.#middlewareMap.set(middleware, {
       status: 'enable',
-      middlewareObject: obj
+      middlewareObject: obj,
+      config
     });
     this.#resetActiveMiddlewareObjs();
   }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/core",
-  "version": "0.4.0-beta.30",
+  "version": "0.4.0-beta.31",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,13 +21,13 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "workspace:^0.4.0-beta.30"
+    "@idraw/types": "workspace:^0.4.0-beta.31"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/board": "workspace:^0.4.0-beta.30",
-    "@idraw/renderer": "workspace:^0.4.0-beta.30",
-    "@idraw/util": "workspace:^0.4.0-beta.30"
+    "@idraw/board": "workspace:^0.4.0-beta.31",
+    "@idraw/renderer": "workspace:^0.4.0-beta.31",
+    "@idraw/util": "workspace:^0.4.0-beta.31"
   },
   "publishConfig": {
     "access": "public",

packages/core/src/index.ts

@@ -68,11 +68,11 @@ export class Core<E extends CoreEventMap = CoreEventMap> {
     container.style.position = 'relative';
   }
 
-  use(middleware: BoardMiddleware<any, any>) {
-    this.#board.use(middleware);
+  use<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: C) {
+    this.#board.use<C>(middleware, config);
   }
 
-  disuse(middleware: BoardMiddleware<any, any>) {
+  disuse(middleware: BoardMiddleware<any, any, any>) {
     this.#board.disuse(middleware);
   }
 

packages/core/src/middleware/info/config.ts

@@ -0,0 +1,12 @@
+import type { MiddlewareInfoStyle } from '@idraw/types';
+
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+
+export const infoFontSize = 10;
+export const infoLineHeight = 16;
+
+export const defaltStyle: MiddlewareInfoStyle = {
+  textBackground: infoBackground,
+  textColor: infoTextColor
+};

packages/core/src/middleware/info/draw-info.ts

@@ -1,13 +1,15 @@
 import type { PointSize, ViewContext2D } from '@idraw/types';
 import { rotateByCenter } from '@idraw/util';
+import type { MiddlewareInfoStyle } from './types';
 
 const fontFamily = 'monospace';
 
 export function drawSizeInfoText(
   ctx: ViewContext2D,
-  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string }
+  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle }
 ) {
-  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, () => {
     ctx.$setFont({
@@ -30,7 +32,7 @@ export function drawSizeInfoText(
       y: point.y
     };
     ctx.setLineDash([]);
-    ctx.fillStyle = background;
+    ctx.fillStyle = textBackground;
     ctx.beginPath();
     ctx.moveTo(bgStart.x, bgStart.y);
     ctx.lineTo(bgEnd.x, bgStart.y);
@@ -39,17 +41,18 @@ export function drawSizeInfoText(
     ctx.closePath();
     ctx.fill();
 
-    ctx.fillStyle = color;
+    ctx.fillStyle = textColor;
     ctx.textBaseline = 'top';
     ctx.fillText(text, textStart.x, textStart.y + padding);
   });
 }
 
 export function drawPositionInfoText(
   ctx: ViewContext2D,
-  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string }
+  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle }
 ) {
-  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, () => {
     ctx.$setFont({
@@ -72,7 +75,7 @@ export function drawPositionInfoText(
       y: point.y
     };
     ctx.setLineDash([]);
-    ctx.fillStyle = background;
+    ctx.fillStyle = textBackground;
     ctx.beginPath();
     ctx.moveTo(bgStart.x, bgStart.y);
     ctx.lineTo(bgEnd.x, bgStart.y);
@@ -81,17 +84,18 @@ export function drawPositionInfoText(
     ctx.closePath();
     ctx.fill();
 
-    ctx.fillStyle = color;
+    ctx.fillStyle = textColor;
     ctx.textBaseline = 'top';
     ctx.fillText(text, textStart.x, textStart.y + padding);
   });
 }
 
 export function drawAngleInfoText(
   ctx: ViewContext2D,
-  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; color: string; background: string }
+  opts: { point: PointSize; rotateCenter: PointSize; angle: number; text: string; fontSize: number; lineHeight: number; style: MiddlewareInfoStyle }
 ) {
-  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, () => {
     ctx.$setFont({
@@ -114,7 +118,7 @@ export function drawAngleInfoText(
       y: point.y
     };
     ctx.setLineDash([]);
-    ctx.fillStyle = background;
+    ctx.fillStyle = textBackground;
     ctx.beginPath();
     ctx.moveTo(bgStart.x, bgStart.y);
     ctx.lineTo(bgEnd.x, bgStart.y);
@@ -123,7 +127,7 @@ export function drawAngleInfoText(
     ctx.closePath();
     ctx.fill();
 
-    ctx.fillStyle = color;
+    ctx.fillStyle = textColor;
     ctx.textBaseline = 'top';
     ctx.fillText(text, textStart.x, textStart.y + padding);
   });

packages/core/src/middleware/info/index.ts

@@ -1,17 +1,25 @@
-import type { BoardMiddleware, ViewRectInfo, Element } from '@idraw/types';
+import type { BoardMiddleware, ViewRectInfo, Element, MiddlewareInfoConfig } from '@idraw/types';
 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
 import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
 import type { DeepInfoSharedStorage } from './types';
+import { defaltStyle } from './config';
 
-const infoBackground = '#1973bac6';
-const infoTextColor = '#ffffff';
 const infoFontSize = 10;
 const infoLineHeight = 16;
 
-export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) => {
+export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig> = (opts, config) => {
   const { boardContent, calculator } = opts;
   const { overlayContext } = boardContent;
+  const innerConfig = {
+    ...defaltStyle,
+    ...config
+  };
+  const { textBackground, textColor } = innerConfig;
+  const style = {
+    textBackground,
+    textColor
+  };
 
   return {
     name: '@middleware/info',
@@ -101,8 +109,7 @@ export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) =>
               text: whText,
               fontSize: infoFontSize,
               lineHeight: infoLineHeight,
-              color: infoTextColor,
-              background: infoBackground
+              style
             });
 
             drawPositionInfoText(overlayContext, {
@@ -115,8 +122,7 @@ export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) =>
               text: xyText,
               fontSize: infoFontSize,
               lineHeight: infoLineHeight,
-              color: infoTextColor,
-              background: infoBackground
+              style
             });
 
             drawAngleInfoText(overlayContext, {
@@ -129,8 +135,7 @@ export const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage> = (opts) =>
               text: angleText,
               fontSize: infoFontSize,
               lineHeight: infoLineHeight,
-              color: infoTextColor,
-              background: infoBackground
+              style
             });
           }
         }

packages/core/src/middleware/ruler/config.ts

@@ -0,0 +1,25 @@
+import type { MiddlewareRulerStyle } from '@idraw/types';
+
+export const rulerSize = 16;
+export const fontSize = 10;
+export const fontWeight = 100;
+export const lineSize = 1;
+export const fontFamily = 'monospace';
+
+const background = '#FFFFFFA8';
+const borderColor = '#00000080';
+const scaleColor = '#000000';
+const textColor = '#00000080';
+const gridColor = '#AAAAAA20';
+const gridPrimaryColor = '#AAAAAA40';
+const selectedAreaColor = '#196097';
+
+export const defaultStyle: MiddlewareRulerStyle = {
+  background,
+  borderColor,
+  scaleColor,
+  textColor,
+  gridColor,
+  gridPrimaryColor,
+  selectedAreaColor
+};

packages/core/src/middleware/ruler/index.ts

@@ -1,13 +1,29 @@
-import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { BoardMiddleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
 import type { DeepRulerSharedStorage } from './types';
+import { defaultStyle } from './config';
 
 export const middlewareEventRuler = '@middleware/show-ruler';
 
-export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap> = (opts) => {
+export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig> = (opts, config) => {
   const { boardContent, viewer, eventHub, calculator } = opts;
   const { overlayContext, underlayContext } = boardContent;
+  const innerConfig = {
+    ...defaultStyle,
+    ...config
+  };
+  const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+  const style = {
+    background,
+    borderColor,
+    scaleColor,
+    textColor,
+    gridColor,
+    gridPrimaryColor,
+    selectedAreaColor
+  };
+
   let show: boolean = true;
   let showGrid: boolean = true;
 
@@ -37,23 +53,24 @@ export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventM
         const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
         const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
 
-        drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
+        drawScrollerSelectedArea(overlayContext, { snapshot, calculator, style });
 
-        drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
+        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) {
           const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
           drawGrid(ctx, {
             xList,
             yList,
             viewScaleInfo,
-            viewSizeInfo
+            viewSizeInfo,
+            style
           });
         }
       }