Merge pull request #370 from idrawjs/dev-v1.x

Dev v1.x

Author: chenshenhai

.github/workflows/release.yml

@@ -21,8 +21,8 @@ jobs:
       - run: npm run test
       - run: npm run build
       - run: npm run version:reset-for-release
-      # - run: npm publish --provenance --access public -w ./packages/types --tag next
-      - run: npm publish --provenance --access public -w ./packages/types
+      - run: npm publish --provenance --access public -w ./packages/types --tag next
+        # - run: npm publish --provenance --access public -w ./packages/types
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm publish --provenance --access public -w ./packages/util

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.3",
+  "version": "1.0.0-alpha.0",
   "workspaces": [
     "packages/*"
   ],

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/core",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -21,12 +21,12 @@
   "author": "idrawjs",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "workspace:^0.4"
+    "@idraw/types": "workspace:*"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/renderer": "workspace:^0.4",
-    "@idraw/util": "workspace:^0.4"
+    "@idraw/renderer": "workspace:*",
+    "@idraw/util": "workspace:*"
   },
   "publishConfig": {
     "access": "public",

packages/core/src/board/index.ts

@@ -1,8 +1,8 @@
 import { Renderer, Calculator } from '@idraw/renderer';
 import {
   // throttle,
-  calcElementsContextSize,
-  EventEmitter
+  calcMaterialsContextSize,
+  EventEmitter,
 } from '@idraw/util';
 import type {
   Data,
@@ -11,9 +11,9 @@ import type {
   BoardMiddlewareObject,
   BoardWatcherEventMap,
   ViewSizeInfo,
-  PointSize,
+  Point,
   BoardExtendEventMap,
-  UtilEventEmitter
+  UtilEventEmitter,
 } from '@idraw/types';
 import { BoardWatcher } from './watcher';
 import { Sharer } from './sharer';
@@ -40,18 +40,19 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
   #eventHub: EventEmitter<T> = new EventEmitter<T>();
   #hasDestroyed: boolean = false;
   constructor(opts: BoardOptions) {
-    const { boardContent } = opts;
+    const { boardContent, container } = opts;
     const sharer = new Sharer();
 
     const watcher = new BoardWatcher({
       boardContent,
       sharer,
-      disabled: opts?.disableWatcher
+      disabled: opts?.disableWatcher,
+      container,
     });
     const renderer = new Renderer({
       viewContext: boardContent.viewContext,
       tempContext: boardContent.tempContext,
-      sharer
+      sharer,
     });
     const calculator = renderer.getCalculator();
 
@@ -70,7 +71,7 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
       },
       afterDrawFrame: (e) => {
         this.#handleAfterDrawFrame(e);
-      }
+      },
     });
     this.#init();
     this.#resetActiveMiddlewareObjs();
@@ -131,6 +132,7 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
       this.#watcher.on('scrollX', this.#handleScrollX.bind(this));
       this.#watcher.on('scrollY', this.#handleScrollY.bind(this));
       this.#watcher.on('resize', this.#handleResize.bind(this));
+      this.#watcher.on('click', this.#handleClick.bind(this));
       this.#watcher.on('doubleClick', this.#handleDoubleClick.bind(this));
       this.#watcher.on('contextMenu', this.#handleContextMenu.bind(this));
     }
@@ -190,6 +192,16 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     }
   }
 
+  #handleClick(e: BoardWatcherEventMap['click']) {
+    for (let i = 0; i < this.#activeMiddlewareObjs.length; i++) {
+      const obj = this.#activeMiddlewareObjs[i];
+      const result = obj?.click?.(e);
+      if (result === false) {
+        return;
+      }
+    }
+  }
+
   #handleDoubleClick(e: BoardWatcherEventMap['doubleClick']) {
     for (let i = 0; i < this.#activeMiddlewareObjs.length; i++) {
       const obj = this.#activeMiddlewareObjs[i];
@@ -320,21 +332,21 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     const viewSizeInfo = sharer.getActiveViewSizeInfo();
     const viewScaleInfo = sharer.getActiveViewScaleInfo();
     // const currentScaleInfo = sharer.getActiveViewScaleInfo();
-    const newViewContextSize = calcElementsContextSize(data.elements, {
+    const newViewContextSize = calcMaterialsContextSize(data.materials, {
       viewWidth: viewSizeInfo.width,
       viewHeight: viewSizeInfo.height,
-      extend: true
+      extend: true,
     });
 
-    this.#viewer.resetVirtualFlatItemMap(data, {
+    this.#viewer.resetVirtualItemMap(data, {
       viewSizeInfo,
-      viewScaleInfo
+      viewScaleInfo,
     });
 
     this.#viewer.drawFrame();
     const newViewSizeInfo = {
       ...viewSizeInfo,
-      ...newViewContextSize
+      ...newViewContextSize,
     };
 
     this.#sharer.setActiveViewSizeInfo(newViewSizeInfo);
@@ -372,7 +384,7 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     this.#middlewareMap.set(middleware, {
       status: 'enable',
       middlewareObject: obj,
-      config
+      config,
     });
     this.#resetActiveMiddlewareObjs();
   }
@@ -398,14 +410,14 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
     }
   }
 
-  scale(opts: { scale: number; point: PointSize; ignoreUpdateVisibleStatus?: boolean }) {
+  scale(opts: { scale: number; point: Point; ignoreUpdateVisibleStatus?: boolean }) {
     const viewer = this.#viewer;
     const { ignoreUpdateVisibleStatus } = opts;
     const { moveX, moveY } = viewer.scale({
       ...opts,
       ...{
-        ignoreUpdateVisibleStatus: true
-      }
+        ignoreUpdateVisibleStatus: true,
+      },
     });
     viewer.scroll({ moveX, moveY, ignoreUpdateVisibleStatus });
   }

packages/core/src/board/sharer.ts

@@ -1,4 +1,4 @@
-import type { ActiveStore, Element, ElementDetailMap, RecursivePartial, StoreSharer, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import type { ActiveStore, Material, RecursivePartial, StoreSharer, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
 import { Store } from '@idraw/util';
 
 const defaultActiveStorage: ActiveStore = {
@@ -7,13 +7,13 @@ const defaultActiveStorage: ActiveStore = {
   devicePixelRatio: 1,
   contextWidth: 0,
   contextHeight: 0,
-  data: null,
+  data: { materials: [] },
   scale: 1,
   offsetLeft: 0,
   offsetRight: 0,
   offsetTop: 0,
   offsetBottom: 0,
-  overrideElementMap: null
+  overrideMaterialMap: null,
 };
 
 export class Sharer implements StoreSharer<Record<string | number | symbol | any, any>> {
@@ -24,10 +24,10 @@ export class Sharer implements StoreSharer<Record<string | number | symbol | any
 
   constructor() {
     const activeStore = new Store<ActiveStore>({
-      defaultStorage: defaultActiveStorage
+      defaultStorage: defaultActiveStorage,
     });
     const sharedStore = new Store({
-      defaultStorage: {}
+      defaultStorage: {},
     });
     this.#activeStore = activeStore;
     this.#sharedStore = sharedStore;
@@ -65,7 +65,7 @@ export class Sharer implements StoreSharer<Record<string | number | symbol | any
       offsetTop: this.#activeStore.get('offsetTop'),
       offsetBottom: this.#activeStore.get('offsetBottom'),
       offsetLeft: this.#activeStore.get('offsetLeft'),
-      offsetRight: this.#activeStore.get('offsetRight')
+      offsetRight: this.#activeStore.get('offsetRight'),
     };
     return viewScaleInfo;
   }
@@ -93,16 +93,16 @@ export class Sharer implements StoreSharer<Record<string | number | symbol | any
       height: this.#activeStore.get('height'),
       devicePixelRatio: this.#activeStore.get('devicePixelRatio'),
       contextWidth: this.#activeStore.get('contextWidth'),
-      contextHeight: this.#activeStore.get('contextHeight')
+      contextHeight: this.#activeStore.get('contextHeight'),
     };
     return sizeInfo;
   }
 
-  getActiveOverrideElemenentMap(): Record<string, RecursivePartial<Element<keyof ElementDetailMap, Record<string, any>>>> | null {
-    return this.#activeStore.get('overrideElementMap');
+  getActiveOverrideMaterialMap(): Record<string, RecursivePartial<Material>> | null {
+    return this.#activeStore.get('overrideMaterialMap');
   }
 
-  setActiveOverrideElemenentMap(map: Record<string, RecursivePartial<Element<keyof ElementDetailMap, Record<string, any>>>> | null): void {
-    this.#activeStore.set('overrideElementMap', map);
+  setActiveOverrideMaterialMap(map: Record<string, RecursivePartial<Material>> | null): void {
+    this.#activeStore.set('overrideMaterialMap', map);
   }
 }

packages/core/src/board/viewer.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, viewScale, viewScroll, calcViewScaleInfo } from '@idraw/util';
 import type {
-  PointSize,
+  Point,
   BoardViewer,
   BoardViewerEventMap,
   BoardViewerOptions,
@@ -9,7 +9,7 @@ import type {
   BoardViewerFrameSnapshot,
   ViewScaleInfo,
   ViewSizeInfo,
-  Data
+  Data,
 } from '@idraw/types';
 
 const { requestAnimationFrame } = window;
@@ -55,27 +55,27 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
         height,
         contextHeight,
         contextWidth,
-        devicePixelRatio
+        devicePixelRatio,
       } = snapshot.activeStore;
 
       const viewScaleInfo: ViewScaleInfo = {
         scale,
         offsetTop,
         offsetBottom,
         offsetLeft,
-        offsetRight
+        offsetRight,
       };
       const viewSizeInfo: ViewSizeInfo = {
         width,
         height,
         contextHeight,
         contextWidth,
-        devicePixelRatio
+        devicePixelRatio,
       };
       if (snapshot?.activeStore.data) {
         renderer.drawData(snapshot.activeStore.data, {
           viewScaleInfo,
-          viewSizeInfo
+          viewSizeInfo,
         });
       }
 
@@ -98,15 +98,15 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
     }
   }
 
-  resetVirtualFlatItemMap(
+  resetVirtualItemMap(
     data: Data,
     opts: {
       viewScaleInfo: ViewScaleInfo;
       viewSizeInfo: ViewSizeInfo;
     }
   ): void {
     if (data) {
-      this.#opts.calculator.resetVirtualFlatItemMap(data, opts);
+      this.#opts.calculator.resetVirtualItemMap(data, opts);
     }
   }
 
@@ -116,14 +116,15 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
     const sharedStore: Record<string, any> = sharer.getSharedStoreSnapshot();
     // const activeStore: ActiveStore = sharer.getActiveStoreSnapshot({ deepClone: true });
     // const sharedStore: Record<string, any> = sharer.getSharedStoreSnapshot({ deepClone: true });
+
     this.#drawFrameSnapshotQueue.push({
       activeStore,
-      sharedStore
+      sharedStore,
     });
     this.#drawAnimationFrame();
   }
 
-  scale(opts: { scale: number; point: PointSize; ignoreUpdateVisibleStatus?: boolean }): {
+  scale(opts: { scale: number; point: Point; ignoreUpdateVisibleStatus?: boolean }): {
     moveX: number;
     moveY: number;
   } {
@@ -133,13 +134,13 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
       scale,
       point,
       viewScaleInfo: sharer.getActiveViewScaleInfo(),
-      viewSizeInfo: sharer.getActiveViewSizeInfo()
+      viewSizeInfo: sharer.getActiveViewSizeInfo(),
     });
     sharer.setActiveStorage('scale', scale);
     if (!ignoreUpdateVisibleStatus) {
       this.#opts.calculator.updateVisiableStatus({
         viewScaleInfo: sharer.getActiveViewScaleInfo(),
-        viewSizeInfo: sharer.getActiveViewSizeInfo()
+        viewSizeInfo: sharer.getActiveViewSizeInfo(),
       });
     }
     return { moveX, moveY };
@@ -154,13 +155,13 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
       moveX,
       moveY,
       viewScaleInfo: prevViewScaleInfo,
-      viewSizeInfo
+      viewSizeInfo,
     });
     sharer.setActiveViewScaleInfo(viewScaleInfo);
     if (!ignoreUpdateVisibleStatus) {
       this.#opts.calculator.updateVisiableStatus({
         viewScaleInfo: sharer.getActiveViewScaleInfo(),
-        viewSizeInfo: sharer.getActiveViewSizeInfo()
+        viewSizeInfo: sharer.getActiveViewSizeInfo(),
       });
     }
     return viewScaleInfo;
@@ -169,14 +170,14 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
   updateViewScaleInfo(opts: { scale: number; offsetX: number; offsetY: number }): ViewScaleInfo {
     const { sharer } = this.#opts;
     const viewScaleInfo = calcViewScaleInfo(opts, {
-      viewSizeInfo: sharer.getActiveViewSizeInfo()
+      viewSizeInfo: sharer.getActiveViewSizeInfo(),
     });
 
     sharer.setActiveViewScaleInfo(viewScaleInfo);
 
     this.#opts.calculator.updateVisiableStatus({
       viewScaleInfo: sharer.getActiveViewScaleInfo(),
-      viewSizeInfo: sharer.getActiveViewSizeInfo()
+      viewSizeInfo: sharer.getActiveViewSizeInfo(),
     });
     return viewScaleInfo;
   }
@@ -206,7 +207,7 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
     if (!opts?.ignoreUpdateVisibleStatus) {
       this.#opts.calculator.updateVisiableStatus({
         viewScaleInfo: sharer.getActiveViewScaleInfo(),
-        viewSizeInfo: sharer.getActiveViewSizeInfo()
+        viewSizeInfo: sharer.getActiveViewSizeInfo(),
       });
     }
     return newViewSize;