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

feat: implement reset style feature

packages/board/src/index.ts

@@ -397,6 +397,15 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     }
   }
 
+  resetMiddlewareConfig<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) {
+        item.middlewareObject.resetConfig?.(config as any);
+      }
+    }
+  }
+
   scale(opts: { scale: number; point: PointSize; ignoreUpdateVisibleStatus?: boolean }) {
     const viewer = this.#viewer;
     const { ignoreUpdateVisibleStatus } = opts;

packages/core/src/index.ts

@@ -73,6 +73,10 @@ export class Core<E extends CoreEventMap = CoreEventMap> {
     this.#board.disuse(middleware);
   }
 
+  resetMiddlewareConfig<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>) {
+    this.#board.resetMiddlewareConfig(middleware, config);
+  }
+
   setData(
     data: Data,
     opts?: {

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

@@ -19,15 +19,10 @@ export const MiddlewareInfo: BoardMiddleware<
 > = (opts, config) => {
   const { boardContent, calculator, eventHub } = opts;
   const { overlayContext } = boardContent;
-  const innerConfig = {
+  let innerConfig = {
     ...defaltStyle,
     ...config
   };
-  const { textBackground, textColor } = innerConfig;
-  const style = {
-    textBackground,
-    textColor
-  };
 
   let showAngleInfo = true;
 
@@ -46,7 +41,16 @@ export const MiddlewareInfo: BoardMiddleware<
       eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
     },
 
+    resetConfig(config) {
+      innerConfig = { ...innerConfig, ...config };
+    },
+
     beforeDrawFrame({ snapshot }) {
+      const { textBackground, textColor } = innerConfig;
+      const style = {
+        textBackground,
+        textColor
+      };
       const { sharedStore } = snapshot;
 
       const selectedElementList = sharedStore[keySelectedElementList];

packages/core/src/middleware/layout-selector/index.ts

@@ -24,12 +24,10 @@ export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
 export const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig> = (opts, config) => {
   const { sharer, boardContent, calculator, viewer, eventHub } = opts;
   const { overlayContext } = boardContent;
-  const innerConfig = {
+  let innerConfig = {
     ...defaultStyle,
     ...config
   };
-  const { activeColor } = innerConfig;
-  const style = { activeColor };
 
   let prevPoint: Point | null = null;
   let prevIsHoverContent: boolean | null = null;
@@ -158,6 +156,10 @@ export const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStora
       resetController();
     },
 
+    resetConfig(config) {
+      innerConfig = { ...innerConfig, ...config };
+    },
+
     hover: (e) => {
       if (sharer.getSharedStorage(keyLayoutIsBusyMoving) === true) {
         return;
@@ -362,6 +364,9 @@ export const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStora
         return;
       }
 
+      const { activeColor } = innerConfig;
+      const style = { activeColor };
+
       const { sharedStore, activeStore } = snapshot;
       const layoutActionType = sharedStore[keyLayoutActionType];
       const layoutIsHover = sharedStore[keyLayoutIsHoverContent];

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

@@ -8,20 +8,10 @@ import { coreEventKeys } from '../../config';
 export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig> = (opts, config) => {
   const { boardContent, viewer, eventHub, calculator } = opts;
   const { overlayContext, underlayContext } = boardContent;
-  const innerConfig = {
+  let 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;
@@ -41,13 +31,31 @@ export const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventM
 
   return {
     name: '@middleware/ruler',
+
     use() {
       eventHub.on(coreEventKeys.RULER, rulerCallback);
     },
+
     disuse() {
       eventHub.off(coreEventKeys.RULER, rulerCallback);
     },
+
+    resetConfig(config) {
+      innerConfig = { ...innerConfig, ...config };
+    },
+
     beforeDrawFrame: ({ snapshot }) => {
+      const { background, borderColor, scaleColor, textColor, gridColor, gridPrimaryColor, selectedAreaColor } = innerConfig;
+
+      const style = {
+        background,
+        borderColor,
+        scaleColor,
+        textColor,
+        gridColor,
+        gridPrimaryColor,
+        selectedAreaColor
+      };
       if (show === true) {
         const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
         const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);

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

@@ -1,6 +1,15 @@
-import type { Element, ViewScaleInfo, ViewSizeInfo, ViewContext2D, BoardViewerFrameSnapshot, ViewRectInfo, ViewCalculator } from '@idraw/types';
+import type {
+  Element,
+  ViewScaleInfo,
+  ViewSizeInfo,
+  ViewContext2D,
+  BoardViewerFrameSnapshot,
+  ViewRectInfo,
+  ViewCalculator,
+  MiddlewareRulerStyle
+} from '@idraw/types';
 import { formatNumber, rotateByCenter, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import type { DeepRulerSharedStorage, MiddlewareRulerStyle } from './types';
+import type { DeepRulerSharedStorage } from './types';
 import { keySelectedElementList, keyActionType } from '../selector';
 import { rulerSize, fontSize, fontWeight, lineSize, fontFamily } from './config';
 
@@ -201,14 +210,17 @@ export function drawRulerBackground(
   const { background, borderColor } = style;
 
   ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(width + 1, 0);
+  // const basePosition = 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.lineWidth = lineSize;

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

@@ -12,22 +12,11 @@ export const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any,
   sharer.setSharedStorage(keyYThumbRect, null); // null | ElementSize
   let isBusy: boolean = false;
 
-  const innerConfig = {
+  let innerConfig = {
     ...defaultStyle,
     ...config
   };
 
-  const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor, activeThumbBackground, activeThumbBorderColor } = innerConfig;
-
-  const style = {
-    thumbBackground,
-    thumbBorderColor,
-    hoverThumbBackground,
-    hoverThumbBorderColor,
-    activeThumbBackground,
-    activeThumbBorderColor
-  };
-
   // viewer.drawFrame();
   const clear = () => {
     sharer.setSharedStorage(keyPrevPoint, null); // null | Point;
@@ -77,6 +66,11 @@ export const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any,
 
   return {
     name: '@middleware/scroller',
+
+    resetConfig(config) {
+      innerConfig = { ...innerConfig, ...config };
+    },
+
     wheel: (e: BoardWatherWheelEvent) => {
       viewer.scroll({
         moveX: 0 - e.deltaX,
@@ -142,6 +136,16 @@ export const MiddlewareScroller: BoardMiddleware<DeepScrollerSharedStorage, any,
       }
     },
     beforeDrawFrame({ 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);

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

@@ -100,12 +100,10 @@ export const MiddlewareSelector: BoardMiddleware<
   },
   MiddlewareSelectorConfig
 > = (opts, config) => {
-  const innerConfig = {
+  let innerConfig = {
     ...defaultStyle,
     ...config
   };
-  const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
-  const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
   const { viewer, sharer, boardContent, calculator, eventHub } = opts;
   const { overlayContext } = boardContent;
   let prevPoint: Point | null = null;
@@ -114,8 +112,8 @@ export const MiddlewareSelector: BoardMiddleware<
   let inBusyMode: 'resize' | 'drag' | 'drag-list' | 'area' | null = null;
   let hasChangedData: boolean | null = null;
 
-  const rotateControllerPattern = createRotateControllerPattern({
-    fill: style.activeColor,
+  let rotateControllerPattern = createRotateControllerPattern({
+    fill: innerConfig.activeColor,
     devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
   });
 
@@ -280,6 +278,10 @@ export const MiddlewareSelector: BoardMiddleware<
       eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
     },
 
+    resetConfig(config) {
+      innerConfig = { ...innerConfig, ...config };
+    },
+
     hover: (e: PointWatcherEvent) => {
       const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
       const layoutIsBusyMoving = sharer.getSharedStorage(keyLayoutIsBusyMoving);
@@ -852,8 +854,17 @@ export const MiddlewareSelector: BoardMiddleware<
     },
 
     beforeDrawFrame({ snapshot }) {
+      const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
+      const style = { activeColor, activeAreaColor, lockedColor, referenceColor };
+
       const { activeStore, sharedStore } = snapshot;
       const { scale, offsetLeft, offsetTop, offsetRight, offsetBottom, width, height, contextHeight, contextWidth, devicePixelRatio } = activeStore;
+      if (rotateControllerPattern.fill !== activeColor) {
+        rotateControllerPattern = createRotateControllerPattern({
+          fill: innerConfig.activeColor,
+          devicePixelRatio
+        });
+      }
 
       const sharer = opts.sharer;
       const viewScaleInfo = { scale, offsetLeft, offsetTop, offsetRight, offsetBottom };
@@ -908,7 +919,7 @@ export const MiddlewareSelector: BoardMiddleware<
             element: elem,
             calculator,
             hideControllers: !!isMoving && actionType === 'drag',
-            rotateControllerPattern,
+            rotateControllerPattern: rotateControllerPattern.context2d,
             style
           });
           if (actionType === 'drag') {
@@ -952,7 +963,7 @@ export const MiddlewareSelector: BoardMiddleware<
             element: elem,
             calculator,
             hideControllers: !!isMoving && actionType === 'drag',
-            rotateControllerPattern,
+            rotateControllerPattern: rotateControllerPattern.context2d,
             style
           });
           if (actionType === 'drag') {

packages/core/src/middleware/selector/pattern/index.ts

@@ -3,7 +3,7 @@ import { createOffscreenContext2D } from '@idraw/util';
 import { drawElement } from '@idraw/renderer';
 import { createIconRotate } from './icon-rotate';
 
-export function createRotateControllerPattern(opts: { fill: string; devicePixelRatio: number }): ViewContext2D {
+export function createRotateControllerPattern(opts: { fill: string; devicePixelRatio: number }): { context2d: ViewContext2D; fill: string } {
   const { fill, devicePixelRatio } = opts;
   const iconRotate = createIconRotate({ fill });
   const { w, h } = iconRotate;
@@ -41,5 +41,7 @@ export function createRotateControllerPattern(opts: { fill: string; devicePixelR
     parentOpacity: 1
   });
 
-  return context2d;
+  // context2d.fill = fill;
+
+  return { context2d, fill };
 }