refactor: refactor middleware event logic

packages/board/src/index.ts

@@ -102,7 +102,6 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
         this._handleWheelScale(e);
       }, frameTime)
     );
-    // this._watcher.on('scale', this._handleScale.bind(this));
     this._watcher.on('scrollX', this._handleScrollX.bind(this));
     this._watcher.on('scrollY', this._handleScrollY.bind(this));
     this._watcher.on('resize', this._handleResize.bind(this));

packages/core/src/index.ts

@@ -4,10 +4,10 @@ import { createBoardContexts, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 
 // export { MiddlewareSelector } from './middleware/selector';
-export { MiddlewareSelector } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler } from './middleware/scaler';
-export { MiddlewareRuler } from './middleware/ruler';
+export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
+export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 
 export class Core {
   private _board: Board<CoreEvent>;

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

@@ -2,31 +2,42 @@ import type { BoardMiddleware, CoreEvent } from '@idraw/types';
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
 
+export const middlewareEventRuler = '@middleware/show-ruler';
+
 export const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEvent> = (opts) => {
   const key = 'RULE';
-  const { viewContent } = opts;
+  const { viewContent, viewer, eventHub } = opts;
   const { helperContext, underContext } = viewContent;
+  let showRuler: boolean = true;
 
+  eventHub.on(middlewareEventRuler, (e: { show: boolean }) => {
+    if (typeof e?.show === 'boolean') {
+      showRuler = e.show;
+      viewer.drawFrame();
+    }
+  });
   return {
     mode: key,
     isDefault: true,
     beforeDrawFrame: ({ snapshot }) => {
-      const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-      const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-      drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
+      if (showRuler === true) {
+        const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+        const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+        drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
 
-      const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-      drawXRuler(helperContext, { scaleList: xList });
+        const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+        drawXRuler(helperContext, { scaleList: xList });
 
-      const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-      drawYRuler(helperContext, { scaleList: yList });
+        const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+        drawYRuler(helperContext, { scaleList: yList });
 
-      drawUnderGrid(underContext, {
-        xList,
-        yList,
-        viewScaleInfo,
-        viewSizeInfo
-      });
+        drawUnderGrid(underContext, {
+          xList,
+          yList,
+          viewScaleInfo,
+          viewSizeInfo
+        });
+      }
     }
   };
 };

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

@@ -1,6 +1,8 @@
 import type { BoardMiddleware, CoreEvent } from '@idraw/types';
 import { formatNumber } from '@idraw/util';
 
+export const middlewareEventScale = '@middleware/scale';
+
 export const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent> = (opts) => {
   const key = 'SCALE';
   const { viewer, sharer, eventHub } = opts;
@@ -21,7 +23,7 @@ export const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent> =
       viewer.scroll({ moveX, moveY });
       viewer.drawFrame();
       const scaleNum = formatNumber(scale);
-      eventHub.trigger('scale', { scale: scaleNum });
+      eventHub.trigger(middlewareEventScale, { scale: scaleNum });
     }
   };
 };

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

@@ -52,13 +52,15 @@ import {
   // keyDebugStartVertical
 } from './config';
 
+export const middlewareEventSelect: string = '@middleware/select';
+
 export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent> = (opts) => {
   const { viewer, sharer, viewContent, calculator, eventHub } = opts;
   const { helperContext } = viewContent;
   let prevPoint: Point | null = null;
   let inBusyMode: 'resize' | 'drag' | 'drag-list' | 'area' | null = null;
 
-  eventHub.on('select', ({ uuids }) => {
+  eventHub.on(middlewareEventSelect, ({ uuids }) => {
     const actionType = sharer.getSharedStorage(keyActionType);
     const data = sharer.getActiveStorage('data');
     const elements = findElementsFromList(uuids, data?.elements || []);
@@ -131,7 +133,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
     }
 
     if (opts?.triggerEvent === true) {
-      eventHub.trigger('select', { uuids: list.map((elem) => elem.uuid) });
+      eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
     }
   };
 

packages/renderer/src/index.ts

@@ -78,20 +78,4 @@ export class Renderer extends EventEmitter<RendererEventMap> implements BoardRen
       });
     }
   }
-
-  // scroll(opts: { offsetTop?: number; offsetLeft?: number }) {
-  //   const { sharer } = this._opts;
-  //   const { data, scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = sharer.getActiveStoreSnapshot();
-  //   // TODO calc offset data
-  //   if (data) {
-  //     this.drawData(data, {
-  //       scale,
-  //       offsetTop,
-  //       offsetBottom,
-  //       offsetLeft,
-  //       offsetRight
-  //     });
-  //   }
-  //   // sharer.setActiveStorage('scale', num);
-  // }
 }

packages/types/src/lib/core.ts

@@ -35,7 +35,6 @@ export interface CoreEventScale {
 
 export type CoreEvent = {
   cursor: CoreEventCursor;
-  select: CoreEventSelect;
   change: CoreEventChange;
-  scale: CoreEventScale;
+  [key: string]: any;
 };

packages/types/src/lib/idraw.ts

@@ -1,5 +1,3 @@
-import type { CoreOptions, CoreEvent } from './core';
+import type { CoreOptions } from './core';
 
 export type IDrawOptions = CoreOptions;
-
-export type IDrawEvent = CoreEvent;