@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/board/index.d.ts

@@ -1,6 +1,6 @@
 import { Renderer, Calculator } from '@idraw/renderer';
 import { EventEmitter } from '@idraw/util';
-import type { Data, BoardOptions, BoardMiddleware, ViewSizeInfo, PointSize, BoardExtendEventMap } from '@idraw/types';
+import type { Data, BoardOptions, BoardMiddleware, ViewSizeInfo, Point, BoardExtendEventMap } from '@idraw/types';
 import { Sharer } from './sharer';
 import { Viewer } from './viewer';
 export declare class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
@@ -20,7 +20,7 @@ export declare class Board<T extends BoardExtendEventMap = BoardExtendEventMap>
     resetMiddlewareConfig<C extends any = any>(middleware: BoardMiddleware<any, any, any>, config?: Partial<C>): void;
     scale(opts: {
         scale: number;
-        point: PointSize;
+        point: Point;
         ignoreUpdateVisibleStatus?: boolean;
     }): void;
     scroll(opts: {

package/dist/esm/board/index.js

@@ -9,9 +9,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handlePointLeave, _Board_handleHover, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
+var _Board_instances, _Board_opts, _Board_middlewareMap, _Board_activeMiddlewareObjs, _Board_watcher, _Board_renderer, _Board_sharer, _Board_viewer, _Board_calculator, _Board_eventHub, _Board_hasDestroyed, _Board_init, _Board_handlePointStart, _Board_handlePointEnd, _Board_handlePointMove, _Board_handlePointLeave, _Board_handleHover, _Board_handleClick, _Board_handleDoubleClick, _Board_handleContextMenu, _Board_handleWheel, _Board_handleWheelScale, _Board_handleScrollX, _Board_handleScrollY, _Board_handleResize, _Board_handleClear, _Board_handleBeforeDrawFrame, _Board_handleAfterDrawFrame, _Board_resetActiveMiddlewareObjs;
 import { Renderer, Calculator } from '@idraw/renderer';
-import { calcElementsContextSize, EventEmitter } from '@idraw/util';
+import { calcMaterialsContextSize, EventEmitter, } from '@idraw/util';
 import { BoardWatcher } from './watcher';
 import { Sharer } from './sharer';
 import { Viewer } from './viewer';
@@ -28,17 +28,18 @@ export class Board {
         _Board_calculator.set(this, void 0);
         _Board_eventHub.set(this, new EventEmitter());
         _Board_hasDestroyed.set(this, false);
-        const { boardContent } = opts;
+        const { boardContent, container } = opts;
         const sharer = new Sharer();
         const watcher = new BoardWatcher({
             boardContent,
             sharer,
-            disabled: opts === null || opts === void 0 ? void 0 : opts.disableWatcher
+            disabled: opts === null || opts === void 0 ? void 0 : opts.disableWatcher,
+            container,
         });
         const renderer = new Renderer({
             viewContext: boardContent.viewContext,
             tempContext: boardContent.tempContext,
-            sharer
+            sharer,
         });
         const calculator = renderer.getCalculator();
         __classPrivateFieldSet(this, _Board_opts, opts, "f");
@@ -56,7 +57,7 @@ export class Board {
             },
             afterDrawFrame: (e) => {
                 __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleAfterDrawFrame).call(this, e);
-            }
+            },
         }), "f");
         __classPrivateFieldGet(this, _Board_instances, "m", _Board_init).call(this);
         __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
@@ -85,14 +86,14 @@ export class Board {
         __classPrivateFieldGet(this, _Board_sharer, "f").setActiveStorage('data', data);
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
         const viewScaleInfo = sharer.getActiveViewScaleInfo();
-        const newViewContextSize = calcElementsContextSize(data.elements, {
+        const newViewContextSize = calcMaterialsContextSize(data.materials, {
             viewWidth: viewSizeInfo.width,
             viewHeight: viewSizeInfo.height,
-            extend: true
+            extend: true,
         });
-        __classPrivateFieldGet(this, _Board_viewer, "f").resetVirtualFlatItemMap(data, {
+        __classPrivateFieldGet(this, _Board_viewer, "f").resetVirtualItemMap(data, {
             viewSizeInfo,
-            viewScaleInfo
+            viewScaleInfo,
         });
         __classPrivateFieldGet(this, _Board_viewer, "f").drawFrame();
         const newViewSizeInfo = Object.assign(Object.assign({}, viewSizeInfo), newViewContextSize);
@@ -124,7 +125,7 @@ export class Board {
         __classPrivateFieldGet(this, _Board_middlewareMap, "f").set(middleware, {
             status: 'enable',
             middlewareObject: obj,
-            config
+            config,
         });
         __classPrivateFieldGet(this, _Board_instances, "m", _Board_resetActiveMiddlewareObjs).call(this);
     }
@@ -153,7 +154,7 @@ export class Board {
         const viewer = __classPrivateFieldGet(this, _Board_viewer, "f");
         const { ignoreUpdateVisibleStatus } = opts;
         const { moveX, moveY } = viewer.scale(Object.assign(Object.assign({}, opts), {
-            ignoreUpdateVisibleStatus: true
+            ignoreUpdateVisibleStatus: true,
         }));
         viewer.scroll({ moveX, moveY, ignoreUpdateVisibleStatus });
     }
@@ -214,6 +215,7 @@ _Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_active
         __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollX', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollX).bind(this));
         __classPrivateFieldGet(this, _Board_watcher, "f").on('scrollY', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleScrollY).bind(this));
         __classPrivateFieldGet(this, _Board_watcher, "f").on('resize', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleResize).bind(this));
+        __classPrivateFieldGet(this, _Board_watcher, "f").on('click', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleClick).bind(this));
         __classPrivateFieldGet(this, _Board_watcher, "f").on('doubleClick', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleDoubleClick).bind(this));
         __classPrivateFieldGet(this, _Board_watcher, "f").on('contextMenu', __classPrivateFieldGet(this, _Board_instances, "m", _Board_handleContextMenu).bind(this));
     }
@@ -265,6 +267,15 @@ _Board_opts = new WeakMap(), _Board_middlewareMap = new WeakMap(), _Board_active
             return;
         }
     }
+}, _Board_handleClick = function _Board_handleClick(e) {
+    var _a;
+    for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {
+        const obj = __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f")[i];
+        const result = (_a = obj === null || obj === void 0 ? void 0 : obj.click) === null || _a === void 0 ? void 0 : _a.call(obj, e);
+        if (result === false) {
+            return;
+        }
+    }
 }, _Board_handleDoubleClick = function _Board_handleDoubleClick(e) {
     var _a;
     for (let i = 0; i < __classPrivateFieldGet(this, _Board_activeMiddlewareObjs, "f").length; i++) {

package/dist/esm/board/sharer.d.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';
 export declare class Sharer implements StoreSharer<Record<string | number | symbol | any, any>> {
     #private;
     constructor();
@@ -16,6 +16,6 @@ export declare class Sharer implements StoreSharer<Record<string | number | symb
     setActiveViewScaleInfo(viewScaleInfo: ViewScaleInfo): void;
     setActiveViewSizeInfo(size: ViewSizeInfo): void;
     getActiveViewSizeInfo(): ViewSizeInfo;
-    getActiveOverrideElemenentMap(): Record<string, RecursivePartial<Element<keyof ElementDetailMap, Record<string, any>>>> | null;
-    setActiveOverrideElemenentMap(map: Record<string, RecursivePartial<Element<keyof ElementDetailMap, Record<string, any>>>> | null): void;
+    getActiveOverrideMaterialMap(): Record<string, RecursivePartial<Material>> | null;
+    setActiveOverrideMaterialMap(map: Record<string, RecursivePartial<Material>> | null): void;
 }

package/dist/esm/board/sharer.js

@@ -17,23 +17,23 @@ const defaultActiveStorage = {
     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 {
     constructor() {
         _Sharer_activeStore.set(this, void 0);
         _Sharer_sharedStore.set(this, void 0);
         const activeStore = new Store({
-            defaultStorage: defaultActiveStorage
+            defaultStorage: defaultActiveStorage,
         });
         const sharedStore = new Store({
-            defaultStorage: {}
+            defaultStorage: {},
         });
         __classPrivateFieldSet(this, _Sharer_activeStore, activeStore, "f");
         __classPrivateFieldSet(this, _Sharer_sharedStore, sharedStore, "f");
@@ -62,7 +62,7 @@ export class Sharer {
             offsetTop: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('offsetTop'),
             offsetBottom: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('offsetBottom'),
             offsetLeft: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('offsetLeft'),
-            offsetRight: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('offsetRight')
+            offsetRight: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('offsetRight'),
         };
         return viewScaleInfo;
     }
@@ -87,15 +87,15 @@ export class Sharer {
             height: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('height'),
             devicePixelRatio: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('devicePixelRatio'),
             contextWidth: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('contextWidth'),
-            contextHeight: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('contextHeight')
+            contextHeight: __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('contextHeight'),
         };
         return sizeInfo;
     }
-    getActiveOverrideElemenentMap() {
-        return __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('overrideElementMap');
+    getActiveOverrideMaterialMap() {
+        return __classPrivateFieldGet(this, _Sharer_activeStore, "f").get('overrideMaterialMap');
     }
-    setActiveOverrideElemenentMap(map) {
-        __classPrivateFieldGet(this, _Sharer_activeStore, "f").set('overrideElementMap', map);
+    setActiveOverrideMaterialMap(map) {
+        __classPrivateFieldGet(this, _Sharer_activeStore, "f").set('overrideMaterialMap', map);
     }
 }
 _Sharer_activeStore = new WeakMap(), _Sharer_sharedStore = new WeakMap();

package/dist/esm/board/viewer.d.ts

@@ -1,16 +1,16 @@
 import { EventEmitter } from '@idraw/util';
-import type { PointSize, BoardViewer, BoardViewerEventMap, BoardViewerOptions, ViewScaleInfo, ViewSizeInfo, Data } from '@idraw/types';
+import type { Point, BoardViewer, BoardViewerEventMap, BoardViewerOptions, ViewScaleInfo, ViewSizeInfo, Data } from '@idraw/types';
 export declare class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardViewer {
     #private;
     constructor(opts: BoardViewerOptions);
-    resetVirtualFlatItemMap(data: Data, opts: {
+    resetVirtualItemMap(data: Data, opts: {
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
     }): void;
     drawFrame(): void;
     scale(opts: {
         scale: number;
-        point: PointSize;
+        point: Point;
         ignoreUpdateVisibleStatus?: boolean;
     }): {
         moveX: number;

package/dist/esm/board/viewer.js

@@ -22,9 +22,9 @@ export class Viewer extends EventEmitter {
         __classPrivateFieldSet(this, _Viewer_opts, opts, "f");
         __classPrivateFieldGet(this, _Viewer_instances, "m", _Viewer_init).call(this);
     }
-    resetVirtualFlatItemMap(data, opts) {
+    resetVirtualItemMap(data, opts) {
         if (data) {
-            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.resetVirtualFlatItemMap(data, opts);
+            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.resetVirtualItemMap(data, opts);
         }
     }
     drawFrame() {
@@ -33,7 +33,7 @@ export class Viewer extends EventEmitter {
         const sharedStore = sharer.getSharedStoreSnapshot();
         __classPrivateFieldGet(this, _Viewer_drawFrameSnapshotQueue, "f").push({
             activeStore,
-            sharedStore
+            sharedStore,
         });
         __classPrivateFieldGet(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
     }
@@ -44,13 +44,13 @@ export class Viewer extends EventEmitter {
             scale,
             point,
             viewScaleInfo: sharer.getActiveViewScaleInfo(),
-            viewSizeInfo: sharer.getActiveViewSizeInfo()
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
         });
         sharer.setActiveStorage('scale', scale);
         if (!ignoreUpdateVisibleStatus) {
             __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                viewSizeInfo: sharer.getActiveViewSizeInfo()
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
             });
         }
         return { moveX, moveY };
@@ -64,13 +64,13 @@ export class Viewer extends EventEmitter {
             moveX,
             moveY,
             viewScaleInfo: prevViewScaleInfo,
-            viewSizeInfo
+            viewSizeInfo,
         });
         sharer.setActiveViewScaleInfo(viewScaleInfo);
         if (!ignoreUpdateVisibleStatus) {
             __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                viewSizeInfo: sharer.getActiveViewSizeInfo()
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
             });
         }
         return viewScaleInfo;
@@ -78,12 +78,12 @@ export class Viewer extends EventEmitter {
     updateViewScaleInfo(opts) {
         const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
         const viewScaleInfo = calcViewScaleInfo(opts, {
-            viewSizeInfo: sharer.getActiveViewSizeInfo()
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
         });
         sharer.setActiveViewScaleInfo(viewScaleInfo);
         __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
             viewScaleInfo: sharer.getActiveViewScaleInfo(),
-            viewSizeInfo: sharer.getActiveViewSizeInfo()
+            viewSizeInfo: sharer.getActiveViewSizeInfo(),
         });
         return viewScaleInfo;
     }
@@ -107,7 +107,7 @@ export class Viewer extends EventEmitter {
         if (!(opts === null || opts === void 0 ? void 0 : opts.ignoreUpdateVisibleStatus)) {
             __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
                 viewScaleInfo: sharer.getActiveViewScaleInfo(),
-                viewSizeInfo: sharer.getActiveViewSizeInfo()
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
             });
         }
         return newViewSize;
@@ -128,25 +128,25 @@ _Viewer_opts = new WeakMap(), _Viewer_drawFrameSnapshotQueue = new WeakMap(), _V
     const snapshot = __classPrivateFieldGet(this, _Viewer_drawFrameSnapshotQueue, "f").shift();
     const { renderer, boardContent, beforeDrawFrame, afterDrawFrame } = __classPrivateFieldGet(this, _Viewer_opts, "f");
     if (snapshot) {
-        const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
+        const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio, } = snapshot.activeStore;
         const viewScaleInfo = {
             scale,
             offsetTop,
             offsetBottom,
             offsetLeft,
-            offsetRight
+            offsetRight,
         };
         const viewSizeInfo = {
             width,
             height,
             contextHeight,
             contextWidth,
-            devicePixelRatio
+            devicePixelRatio,
         };
         if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
             renderer.drawData(snapshot.activeStore.data, {
                 viewScaleInfo,
-                viewSizeInfo
+                viewSizeInfo,
             });
         }
         beforeDrawFrame({ snapshot });

package/dist/esm/board/watcher.d.ts

@@ -1,4 +1,4 @@
-import type { Point, BoardWatcherEventMap, Data, Element, ElementType, BoardWatcherOptions } from '@idraw/types';
+import type { ActionPoint, BoardWatcherEventMap, Data, Material, BoardWatcherOptions } from '@idraw/types';
 import { EventEmitter } from '@idraw/util';
 export declare class BoardWatcher extends EventEmitter<BoardWatcherEventMap> {
     #private;
@@ -9,7 +9,7 @@ export declare class BoardWatcher extends EventEmitter<BoardWatcherEventMap> {
 }
 interface PointResult {
     index: number;
-    element: Element<ElementType> | null;
+    material: Material | null;
 }
-export declare function getPointResult(p: Point, data: Data): PointResult;
+export declare function getPointResult(p: ActionPoint, data: Data): PointResult;
 export {};

package/dist/esm/board/watcher.js

@@ -9,8 +9,8 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_hasDestroyed, _BoardWatcher_init, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
-import { EventEmitter, Store } from '@idraw/util';
+var _BoardWatcher_instances, _BoardWatcher_opts, _BoardWatcher_store, _BoardWatcher_hasDestroyed, _BoardWatcher_init, _BoardWatcher_getBoardCanvas, _BoardWatcher_onWheel, _BoardWatcher_onContextMenu, _BoardWatcher_onClick, _BoardWatcher_doubleClick, _BoardWatcher_onPointLeave, _BoardWatcher_onPointEnd, _BoardWatcher_onPointMove, _BoardWatcher_onPointStart, _BoardWatcher_onHover, _BoardWatcher_isInTarget, _BoardWatcher_getPoint, _BoardWatcher_isVaildPoint;
+import { EventEmitter, Store, ATTR_VALID_WATCH, getHTMLElementRectInPage } from '@idraw/util';
 function isBoardAvailableNum(num) {
     return num > 0 || num < 0 || num === 0;
 }
@@ -22,6 +22,7 @@ export class BoardWatcher extends EventEmitter {
         _BoardWatcher_store.set(this, void 0);
         _BoardWatcher_hasDestroyed.set(this, false);
         _BoardWatcher_onWheel.set(this, (e) => {
+            const nativeEvent = e;
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
                 return;
             }
@@ -34,13 +35,14 @@ export class BoardWatcher extends EventEmitter {
             const deltaX = e.deltaX > 0 || e.deltaX < 0 ? e.deltaX : 0;
             const deltaY = e.deltaY > 0 || e.deltaY < 0 ? e.deltaY : 0;
             if (e.ctrlKey === true && this.has('wheelScale')) {
-                this.trigger('wheelScale', { deltaX, deltaY, point });
+                this.trigger('wheelScale', { deltaX, deltaY, point, nativeEvent });
             }
             else if (this.has('wheel')) {
-                this.trigger('wheel', { deltaX, deltaY, point });
+                this.trigger('wheel', { deltaX, deltaY, point, nativeEvent });
             }
         });
         _BoardWatcher_onContextMenu.set(this, (e) => {
+            const nativeEvent = e;
             if (e.button !== 2) {
                 return;
             }
@@ -52,9 +54,10 @@ export class BoardWatcher extends EventEmitter {
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
                 return;
             }
-            this.trigger('contextMenu', { point });
+            this.trigger('contextMenu', { point, nativeEvent });
         });
         _BoardWatcher_onClick.set(this, (e) => {
+            const nativeEvent = e;
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
                 return;
             }
@@ -63,35 +66,39 @@ export class BoardWatcher extends EventEmitter {
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
                 return;
             }
-            const maxLimitTime = 500;
-            const t = Date.now();
-            const preClickPoint = __classPrivateFieldGet(this, _BoardWatcher_store, "f").get('prevClickPoint');
-            if (preClickPoint &&
-                t - preClickPoint.t <= maxLimitTime &&
-                Math.abs(preClickPoint.x - point.x) <= 5 &&
-                Math.abs(preClickPoint.y - point.y) <= 5) {
-                this.trigger('doubleClick', { point });
+            this.trigger('click', { point, nativeEvent });
+        });
+        _BoardWatcher_doubleClick.set(this, (e) => {
+            const nativeEvent = e;
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+                return;
             }
-            else {
-                __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('prevClickPoint', point);
+            e.preventDefault();
+            const point = __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+                return;
             }
+            this.trigger('doubleClick', { point, nativeEvent });
         });
         _BoardWatcher_onPointLeave.set(this, (e) => {
+            const nativeEvent = e;
             __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', false);
             e.preventDefault();
             const point = __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-            this.trigger('pointLeave', { point });
+            this.trigger('pointLeave', { point, nativeEvent });
         });
         _BoardWatcher_onPointEnd.set(this, (e) => {
+            const nativeEvent = e;
             __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', false);
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
                 return;
             }
             e.preventDefault();
             const point = __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
-            this.trigger('pointEnd', { point });
+            this.trigger('pointEnd', { point, nativeEvent });
         });
         _BoardWatcher_onPointMove.set(this, (e) => {
+            const nativeEvent = e;
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
                 return;
             }
@@ -100,7 +107,7 @@ export class BoardWatcher extends EventEmitter {
             const point = __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
                 if (__classPrivateFieldGet(this, _BoardWatcher_store, "f").get('hasPointDown')) {
-                    this.trigger('pointLeave', { point });
+                    this.trigger('pointLeave', { point, nativeEvent });
                     __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', false);
                 }
                 return;
@@ -108,9 +115,10 @@ export class BoardWatcher extends EventEmitter {
             if (__classPrivateFieldGet(this, _BoardWatcher_store, "f").get('hasPointDown') !== true) {
                 return;
             }
-            this.trigger('pointMove', { point });
+            this.trigger('pointMove', { point, nativeEvent });
         });
         _BoardWatcher_onPointStart.set(this, (e) => {
+            const nativeEvent = e;
             if (e.button !== 0) {
                 return;
             }
@@ -123,9 +131,10 @@ export class BoardWatcher extends EventEmitter {
                 return;
             }
             __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', true);
-            this.trigger('pointStart', { point });
+            this.trigger('pointStart', { point, nativeEvent });
         });
         _BoardWatcher_onHover.set(this, (e) => {
+            const nativeEvent = e;
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
                 if (__classPrivateFieldGet(this, _BoardWatcher_store, "f").get('inCanvas') === true) {
                     __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('inCanvas', false);
@@ -139,46 +148,49 @@ export class BoardWatcher extends EventEmitter {
             if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
                 return;
             }
-            this.trigger('hover', { point });
+            this.trigger('hover', { point, nativeEvent });
         });
         const store = new Store({
-            defaultStorage: { hasPointDown: false, prevClickPoint: null, inCanvas: true }
+            defaultStorage: { hasPointDown: false, inCanvas: true },
         });
         __classPrivateFieldSet(this, _BoardWatcher_store, store, "f");
         __classPrivateFieldSet(this, _BoardWatcher_opts, opts, "f");
         __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
     }
     onEvents() {
+        var _a;
         if (__classPrivateFieldGet(this, _BoardWatcher_opts, "f").disabled === true) {
             return;
         }
         if (__classPrivateFieldGet(this, _BoardWatcher_hasDestroyed, "f")) {
             return;
         }
-        const canvas = __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
         const container = window;
-        container.addEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onHover, "f"));
-        container.addEventListener('mousedown', __classPrivateFieldGet(this, _BoardWatcher_onPointStart, "f"));
+        const innerContainer = ((_a = __classPrivateFieldGet(this, _BoardWatcher_opts, "f")) === null || _a === void 0 ? void 0 : _a.container) || __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
         container.addEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onPointMove, "f"));
         container.addEventListener('mouseup', __classPrivateFieldGet(this, _BoardWatcher_onPointEnd, "f"));
-        canvas.addEventListener('wheel', __classPrivateFieldGet(this, _BoardWatcher_onWheel, "f"), { passive: false });
-        container.addEventListener('click', __classPrivateFieldGet(this, _BoardWatcher_onClick, "f"));
-        container.addEventListener('contextmenu', __classPrivateFieldGet(this, _BoardWatcher_onContextMenu, "f"));
+        innerContainer.addEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onHover, "f"));
+        innerContainer.addEventListener('mousedown', __classPrivateFieldGet(this, _BoardWatcher_onPointStart, "f"));
+        innerContainer.addEventListener('wheel', __classPrivateFieldGet(this, _BoardWatcher_onWheel, "f"), { passive: false });
+        innerContainer.addEventListener('click', __classPrivateFieldGet(this, _BoardWatcher_onClick, "f"));
+        innerContainer.addEventListener('contextmenu', __classPrivateFieldGet(this, _BoardWatcher_onContextMenu, "f"));
+        innerContainer.addEventListener('dblclick', __classPrivateFieldGet(this, _BoardWatcher_doubleClick, "f"));
     }
     offEvents() {
+        var _a;
         if (__classPrivateFieldGet(this, _BoardWatcher_opts, "f").disabled === true) {
             return;
         }
         const container = window;
-        const canvas = __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
-        container.removeEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onHover, "f"));
-        container.removeEventListener('mousedown', __classPrivateFieldGet(this, _BoardWatcher_onPointStart, "f"));
+        const innerContainer = ((_a = __classPrivateFieldGet(this, _BoardWatcher_opts, "f")) === null || _a === void 0 ? void 0 : _a.container) || __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getBoardCanvas).call(this);
         container.removeEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onPointMove, "f"));
         container.removeEventListener('mouseup', __classPrivateFieldGet(this, _BoardWatcher_onPointEnd, "f"));
-        container.removeEventListener('mouseleave', __classPrivateFieldGet(this, _BoardWatcher_onPointLeave, "f"));
-        canvas.removeEventListener('wheel', __classPrivateFieldGet(this, _BoardWatcher_onWheel, "f"));
-        container.removeEventListener('click', __classPrivateFieldGet(this, _BoardWatcher_onClick, "f"));
-        container.removeEventListener('contextmenu', __classPrivateFieldGet(this, _BoardWatcher_onContextMenu, "f"));
+        innerContainer.removeEventListener('mousemove', __classPrivateFieldGet(this, _BoardWatcher_onHover, "f"));
+        innerContainer.removeEventListener('mousedown', __classPrivateFieldGet(this, _BoardWatcher_onPointStart, "f"));
+        innerContainer.removeEventListener('wheel', __classPrivateFieldGet(this, _BoardWatcher_onWheel, "f"));
+        innerContainer.removeEventListener('click', __classPrivateFieldGet(this, _BoardWatcher_onClick, "f"));
+        innerContainer.removeEventListener('contextmenu', __classPrivateFieldGet(this, _BoardWatcher_onContextMenu, "f"));
+        innerContainer.removeEventListener('dblclick', __classPrivateFieldGet(this, _BoardWatcher_doubleClick, "f"));
     }
     destroy() {
         this.offEvents();
@@ -186,17 +198,30 @@ export class BoardWatcher extends EventEmitter {
         __classPrivateFieldSet(this, _BoardWatcher_hasDestroyed, true, "f");
     }
 }
-_BoardWatcher_opts = new WeakMap(), _BoardWatcher_store = new WeakMap(), _BoardWatcher_hasDestroyed = new WeakMap(), _BoardWatcher_onWheel = new WeakMap(), _BoardWatcher_onContextMenu = new WeakMap(), _BoardWatcher_onClick = new WeakMap(), _BoardWatcher_onPointLeave = new WeakMap(), _BoardWatcher_onPointEnd = new WeakMap(), _BoardWatcher_onPointMove = new WeakMap(), _BoardWatcher_onPointStart = new WeakMap(), _BoardWatcher_onHover = new WeakMap(), _BoardWatcher_instances = new WeakSet(), _BoardWatcher_init = function _BoardWatcher_init() {
+_BoardWatcher_opts = new WeakMap(), _BoardWatcher_store = new WeakMap(), _BoardWatcher_hasDestroyed = new WeakMap(), _BoardWatcher_onWheel = new WeakMap(), _BoardWatcher_onContextMenu = new WeakMap(), _BoardWatcher_onClick = new WeakMap(), _BoardWatcher_doubleClick = new WeakMap(), _BoardWatcher_onPointLeave = new WeakMap(), _BoardWatcher_onPointEnd = new WeakMap(), _BoardWatcher_onPointMove = new WeakMap(), _BoardWatcher_onPointStart = new WeakMap(), _BoardWatcher_onHover = new WeakMap(), _BoardWatcher_instances = new WeakSet(), _BoardWatcher_init = function _BoardWatcher_init() {
     this.onEvents();
+}, _BoardWatcher_getBoardCanvas = function _BoardWatcher_getBoardCanvas() {
+    return __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
 }, _BoardWatcher_isInTarget = function _BoardWatcher_isInTarget(e) {
-    return e.target === __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
+    const $target = e.target;
+    if ($target.getAttribute(ATTR_VALID_WATCH) === 'true') {
+        return true;
+    }
+    if ($target !== __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getBoardCanvas).call(this)) {
+        return false;
+    }
+    const rect = getHTMLElementRectInPage(__classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas);
+    return (e.pageX >= rect.pageX &&
+        e.pageX <= rect.pageX + rect.width &&
+        e.pageY >= rect.pageY &&
+        e.pageY <= rect.pageY + rect.height);
 }, _BoardWatcher_getPoint = function _BoardWatcher_getPoint(e) {
     const boardCanvas = __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
     const rect = boardCanvas.getBoundingClientRect();
     const p = {
         x: e.clientX - rect.left,
         y: e.clientY - rect.top,
-        t: Date.now()
+        t: Date.now(),
     };
     return p;
 }, _BoardWatcher_isVaildPoint = function _BoardWatcher_isVaildPoint(p) {
@@ -210,13 +235,13 @@ _BoardWatcher_opts = new WeakMap(), _BoardWatcher_store = new WeakMap(), _BoardW
 export function getPointResult(p, data) {
     const result = {
         index: -1,
-        element: null
+        material: null,
     };
-    for (let i = 0; i < data.elements.length; i++) {
-        const elem = data.elements[i];
-        if (p.x >= elem.x && p.x <= elem.x + elem.w && p.y >= elem.y && p.y <= elem.y + elem.h) {
+    for (let i = 0; i < data.materials.length; i++) {
+        const mtrl = data.materials[i];
+        if (p.x >= mtrl.x && p.x <= mtrl.x + mtrl.width && p.y >= mtrl.y && p.y <= mtrl.y + mtrl.height) {
             result.index = i;
-            result.element = elem;
+            result.material = mtrl;
             break;
         }
     }

package/dist/esm/core.d.ts

@@ -0,0 +1,52 @@
+import type { Data, Point, CoreOptions, Middleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, MaterialType, RecursivePartial, Material, StrictMaterial, ModifyRecord, MaterialPosition, DataLayout, DataGlobal } from '@idraw/types';
+export declare class Core<E extends CoreEventMap = CoreEventMap> {
+    #private;
+    constructor(container: HTMLDivElement, opts: CoreOptions);
+    isDestroyed(): boolean;
+    destroy(): void;
+    use<C extends any = any>(middleware: Middleware<any, any, any>, config?: C): void;
+    disuse(middleware: Middleware<any, any, any>): void;
+    resetMiddlewareConfig<C extends any = any>(middleware: Middleware<any, any, any>, config?: Partial<C>): void;
+    setData(data: Data): void;
+    getData(): Data | null;
+    scale(opts: {
+        scale: number;
+        point: Point;
+    }): void;
+    resize(newViewSize: Partial<ViewSizeInfo>): void;
+    clear(): void;
+    on<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    off<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    trigger<T extends keyof E>(name: T, e: E[T]): void;
+    getViewInfo(): {
+        viewSizeInfo: ViewSizeInfo;
+        viewScaleInfo: ViewScaleInfo;
+    };
+    refresh(): void;
+    forceRender(): void;
+    setViewScale(opts: {
+        scale: number;
+        offsetX: number;
+        offsetY: number;
+    }): void;
+    getLoadItemMap(): LoadItemMap;
+    onBoardWatcherEvents(): void;
+    offBoardWatcherEvents(): void;
+    createMaterial<T extends MaterialType = MaterialType>(type: T, material: RecursivePartial<StrictMaterial<T>>, opts?: {
+        viewCenter?: boolean;
+    }): StrictMaterial<T>;
+    updateMaterial(material: Material): ModifyRecord<'updateMaterial'> | null;
+    modifyMaterial(material: RecursivePartial<Omit<Material, 'id'>> & Pick<Material, 'id'>): ModifyRecord<'modifyMaterial'> | null;
+    modifyMaterials(materials: Array<RecursivePartial<Omit<Material, 'id'>> & Pick<Material, 'id'>>): ModifyRecord<'modifyMaterials'> | null;
+    addMaterial(material: Material, opts?: {
+        position: MaterialPosition;
+    }): ModifyRecord<'addMaterial'>;
+    deleteMaterial(id: string): ModifyRecord<'deleteMaterial'>;
+    moveMaterial(id: string, to: MaterialPosition): ModifyRecord<'moveMaterial'>;
+    modifyLayout(layout: RecursivePartial<DataLayout> | null): ModifyRecord<'modifyLayout'>;
+    modifyGlobal(global: RecursivePartial<DataGlobal> | null): {
+        type: "modifyGlobal";
+        time: number;
+        content: import("@idraw/types").ModifyContentMap["modifyGlobal"];
+    };
+}