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
  });
  }
  }