@idraw/core 0.4.0-beta.39 → 0.4.0-beta.40

package/dist/esm/board/viewer.js

@@ -0,0 +1,165 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _Viewer_instances, _Viewer_opts, _Viewer_drawFrameSnapshotQueue, _Viewer_drawFrameStatus, _Viewer_init, _Viewer_drawAnimationFrame;
+import { EventEmitter, viewScale, viewScroll, calcViewScaleInfo } from '@idraw/util';
+const { requestAnimationFrame } = window;
+export class Viewer extends EventEmitter {
+    constructor(opts) {
+        super();
+        _Viewer_instances.add(this);
+        _Viewer_opts.set(this, void 0);
+        _Viewer_drawFrameSnapshotQueue.set(this, []);
+        _Viewer_drawFrameStatus.set(this, 'FREE');
+        __classPrivateFieldSet(this, _Viewer_opts, opts, "f");
+        __classPrivateFieldGet(this, _Viewer_instances, "m", _Viewer_init).call(this);
+    }
+    resetVirtualFlatItemMap(data, opts) {
+        if (data) {
+            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.resetVirtualFlatItemMap(data, opts);
+        }
+    }
+    drawFrame() {
+        const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+        const activeStore = sharer.getActiveStoreSnapshot();
+        const sharedStore = sharer.getSharedStoreSnapshot();
+        __classPrivateFieldGet(this, _Viewer_drawFrameSnapshotQueue, "f").push({
+            activeStore,
+            sharedStore
+        });
+        __classPrivateFieldGet(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
+    }
+    scale(opts) {
+        const { scale, point, ignoreUpdateVisibleStatus } = opts;
+        const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+        const { moveX, moveY } = viewScale({
+            scale,
+            point,
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+        sharer.setActiveStorage('scale', scale);
+        if (!ignoreUpdateVisibleStatus) {
+            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo()
+            });
+        }
+        return { moveX, moveY };
+    }
+    scroll(opts) {
+        const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+        const prevViewScaleInfo = sharer.getActiveViewScaleInfo();
+        const { moveX, moveY, ignoreUpdateVisibleStatus } = opts;
+        const viewSizeInfo = sharer.getActiveViewSizeInfo();
+        const viewScaleInfo = viewScroll({
+            moveX,
+            moveY,
+            viewScaleInfo: prevViewScaleInfo,
+            viewSizeInfo
+        });
+        sharer.setActiveViewScaleInfo(viewScaleInfo);
+        if (!ignoreUpdateVisibleStatus) {
+            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo()
+            });
+        }
+        return viewScaleInfo;
+    }
+    updateViewScaleInfo(opts) {
+        const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+        const viewScaleInfo = calcViewScaleInfo(opts, {
+            viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+        sharer.setActiveViewScaleInfo(viewScaleInfo);
+        __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+            viewScaleInfo: sharer.getActiveViewScaleInfo(),
+            viewSizeInfo: sharer.getActiveViewSizeInfo()
+        });
+        return viewScaleInfo;
+    }
+    resize(viewSize = {}, opts) {
+        const { sharer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+        const originViewSize = sharer.getActiveViewSizeInfo();
+        const newViewSize = Object.assign(Object.assign({}, originViewSize), viewSize);
+        const { width, height, devicePixelRatio } = newViewSize;
+        const { underlayContext, boardContext, overlayContext, viewContext } = __classPrivateFieldGet(this, _Viewer_opts, "f").boardContent;
+        boardContext.canvas.width = width * devicePixelRatio;
+        boardContext.canvas.height = height * devicePixelRatio;
+        boardContext.canvas.style.width = `${width}px`;
+        boardContext.canvas.style.height = `${height}px`;
+        underlayContext.canvas.width = width * devicePixelRatio;
+        underlayContext.canvas.height = height * devicePixelRatio;
+        overlayContext.canvas.width = width * devicePixelRatio;
+        overlayContext.canvas.height = height * devicePixelRatio;
+        viewContext.canvas.width = width * devicePixelRatio;
+        viewContext.canvas.height = height * devicePixelRatio;
+        sharer.setActiveViewSizeInfo(newViewSize);
+        if (!(opts === null || opts === void 0 ? void 0 : opts.ignoreUpdateVisibleStatus)) {
+            __classPrivateFieldGet(this, _Viewer_opts, "f").calculator.updateVisiableStatus({
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo()
+            });
+        }
+        return newViewSize;
+    }
+}
+_Viewer_opts = new WeakMap(), _Viewer_drawFrameSnapshotQueue = new WeakMap(), _Viewer_drawFrameStatus = new WeakMap(), _Viewer_instances = new WeakSet(), _Viewer_init = function _Viewer_init() {
+    const { renderer } = __classPrivateFieldGet(this, _Viewer_opts, "f");
+    renderer.on('load', () => {
+        this.drawFrame();
+    });
+}, _Viewer_drawAnimationFrame = function _Viewer_drawAnimationFrame() {
+    if (__classPrivateFieldGet(this, _Viewer_drawFrameStatus, "f") === 'DRAWING' || __classPrivateFieldGet(this, _Viewer_drawFrameSnapshotQueue, "f").length === 0) {
+        return;
+    }
+    else {
+        __classPrivateFieldSet(this, _Viewer_drawFrameStatus, 'DRAWING', "f");
+    }
+    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 viewScaleInfo = {
+            scale,
+            offsetTop,
+            offsetBottom,
+            offsetLeft,
+            offsetRight
+        };
+        const viewSizeInfo = {
+            width,
+            height,
+            contextHeight,
+            contextWidth,
+            devicePixelRatio
+        };
+        if (snapshot === null || snapshot === void 0 ? void 0 : snapshot.activeStore.data) {
+            renderer.drawData(snapshot.activeStore.data, {
+                viewScaleInfo,
+                viewSizeInfo
+            });
+        }
+        beforeDrawFrame({ snapshot });
+        boardContent.drawView();
+        afterDrawFrame({ snapshot });
+    }
+    if (__classPrivateFieldGet(this, _Viewer_drawFrameSnapshotQueue, "f").length === 0) {
+        __classPrivateFieldSet(this, _Viewer_drawFrameStatus, 'COMPLETE', "f");
+        return;
+    }
+    if ((__classPrivateFieldSet(this, _Viewer_drawFrameStatus, 'DRAWING', "f"))) {
+        requestAnimationFrame(() => {
+            __classPrivateFieldGet(this, _Viewer_instances, "m", _Viewer_drawAnimationFrame).call(this);
+        });
+    }
+};

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

@@ -0,0 +1,15 @@
+import type { Point, BoardWatcherEventMap, Data, Element, ElementType, BoardWatcherOptions } from '@idraw/types';
+import { EventEmitter } from '@idraw/util';
+export declare class BoardWatcher extends EventEmitter<BoardWatcherEventMap> {
+    #private;
+    constructor(opts: BoardWatcherOptions);
+    onEvents(): void;
+    offEvents(): void;
+    destroy(): void;
+}
+interface PointResult {
+    index: number;
+    element: Element<ElementType> | null;
+}
+export declare function getPointResult(p: Point, data: Data): PointResult;
+export {};

package/dist/esm/board/watcher.js

@@ -0,0 +1,218 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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';
+function isBoardAvailableNum(num) {
+    return num > 0 || num < 0 || num === 0;
+}
+export class BoardWatcher extends EventEmitter {
+    constructor(opts) {
+        super();
+        _BoardWatcher_instances.add(this);
+        _BoardWatcher_opts.set(this, void 0);
+        _BoardWatcher_store.set(this, void 0);
+        _BoardWatcher_hasDestroyed.set(this, false);
+        _BoardWatcher_onWheel.set(this, (e) => {
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+                return;
+            }
+            const point = __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_getPoint).call(this, e);
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            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 });
+            }
+            else if (this.has('wheel')) {
+                this.trigger('wheel', { deltaX, deltaY, point });
+            }
+        });
+        _BoardWatcher_onContextMenu.set(this, (e) => {
+            if (e.button !== 2) {
+                return;
+            }
+            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);
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+                return;
+            }
+            this.trigger('contextMenu', { point });
+        });
+        _BoardWatcher_onClick.set(this, (e) => {
+            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);
+            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 });
+            }
+            else {
+                __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('prevClickPoint', point);
+            }
+        });
+        _BoardWatcher_onPointLeave.set(this, (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 });
+        });
+        _BoardWatcher_onPointEnd.set(this, (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 });
+        });
+        _BoardWatcher_onPointMove.set(this, (e) => {
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isInTarget).call(this, e)) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            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 });
+                    __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', false);
+                }
+                return;
+            }
+            if (__classPrivateFieldGet(this, _BoardWatcher_store, "f").get('hasPointDown') !== true) {
+                return;
+            }
+            this.trigger('pointMove', { point });
+        });
+        _BoardWatcher_onPointStart.set(this, (e) => {
+            if (e.button !== 0) {
+                return;
+            }
+            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);
+            if (!__classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_isVaildPoint).call(this, point)) {
+                return;
+            }
+            __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('hasPointDown', true);
+            this.trigger('pointStart', { point });
+        });
+        _BoardWatcher_onHover.set(this, (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);
+                    __classPrivateFieldGet(this, _BoardWatcher_onPointLeave, "f").call(this, e);
+                }
+                return;
+            }
+            __classPrivateFieldGet(this, _BoardWatcher_store, "f").set('inCanvas', true);
+            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('hover', { point });
+        });
+        const store = new Store({
+            defaultStorage: { hasPointDown: false, prevClickPoint: null, inCanvas: true }
+        });
+        __classPrivateFieldSet(this, _BoardWatcher_store, store, "f");
+        __classPrivateFieldSet(this, _BoardWatcher_opts, opts, "f");
+        __classPrivateFieldGet(this, _BoardWatcher_instances, "m", _BoardWatcher_init).call(this);
+    }
+    onEvents() {
+        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"));
+        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"));
+    }
+    offEvents() {
+        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"));
+        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"));
+    }
+    destroy() {
+        this.offEvents();
+        __classPrivateFieldGet(this, _BoardWatcher_store, "f").destroy();
+        __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() {
+    this.onEvents();
+}, _BoardWatcher_isInTarget = function _BoardWatcher_isInTarget(e) {
+    return e.target === __classPrivateFieldGet(this, _BoardWatcher_opts, "f").boardContent.boardContext.canvas;
+}, _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()
+    };
+    return p;
+}, _BoardWatcher_isVaildPoint = function _BoardWatcher_isVaildPoint(p) {
+    const viewSize = __classPrivateFieldGet(this, _BoardWatcher_opts, "f").sharer.getActiveViewSizeInfo();
+    const { width, height } = viewSize;
+    if (isBoardAvailableNum(p.x) && isBoardAvailableNum(p.y) && p.x <= width && p.y <= height) {
+        return true;
+    }
+    return false;
+};
+export function getPointResult(p, data) {
+    const result = {
+        index: -1,
+        element: 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) {
+            result.index = i;
+            result.element = elem;
+            break;
+        }
+    }
+    return result;
+}

package/dist/esm/config.d.ts

@@ -3,6 +3,7 @@ export declare const EVENT_KEY_CURSOR = "cursor";
 export declare const EVENT_KEY_RULER = "ruler";
 export declare const EVENT_KEY_SCALE = "scale";
 export declare const EVENT_KEY_SELECT = "select";
+export declare const EVENT_KEY_SELECT_LAYOUT = "selectLayout";
 export declare const EVENT_KEY_CLEAR_SELECT = "clearSelect";
 export declare const EVENT_KEY_TEXT_EDIT = "textEdit";
 export declare const EVENT_KEY_TEXT_CHANGE = "textChange";
@@ -15,6 +16,7 @@ export type CoreEventKeys = {
     RULER: typeof EVENT_KEY_RULER;
     SCALE: typeof EVENT_KEY_SCALE;
     SELECT: typeof EVENT_KEY_SELECT;
+    SELECT_LAYOUT: typeof EVENT_KEY_SELECT_LAYOUT;
     CLEAR_SELECT: typeof EVENT_KEY_CLEAR_SELECT;
     TEXT_EDIT: typeof EVENT_KEY_TEXT_EDIT;
     TEXT_CHANGE: typeof EVENT_KEY_TEXT_CHANGE;

package/dist/esm/config.js

@@ -3,6 +3,7 @@ export const EVENT_KEY_CURSOR = 'cursor';
 export const EVENT_KEY_RULER = 'ruler';
 export const EVENT_KEY_SCALE = 'scale';
 export const EVENT_KEY_SELECT = 'select';
+export const EVENT_KEY_SELECT_LAYOUT = 'selectLayout';
 export const EVENT_KEY_CLEAR_SELECT = 'clearSelect';
 export const EVENT_KEY_TEXT_EDIT = 'textEdit';
 export const EVENT_KEY_TEXT_CHANGE = 'textChange';
@@ -14,6 +15,7 @@ const innerEventKeys = {
     CHANGE: EVENT_KEY_CHANGE,
     RULER: EVENT_KEY_RULER,
     SCALE: EVENT_KEY_SCALE,
+    SELECT_LAYOUT: EVENT_KEY_SELECT_LAYOUT,
     SELECT: EVENT_KEY_SELECT,
     CLEAR_SELECT: EVENT_KEY_CLEAR_SELECT,
     TEXT_EDIT: EVENT_KEY_TEXT_EDIT,

package/dist/esm/index.d.ts

@@ -1,6 +1,8 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
+import { Board, Sharer, Calculator } from './board';
 export { coreEventKeys } from './config';
 export type { CoreEventKeys } from './config';
+export { Board, Sharer, Calculator };
 export { MiddlewareSelector } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler } from './middleware/scaler';

package/dist/esm/index.js

@@ -10,10 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initContainer;
-import { Board } from '@idraw/board';
+import { Board, Sharer, Calculator } from './board';
 import { createBoardContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 export { coreEventKeys } from './config';
+export { Board, Sharer, Calculator };
 export { MiddlewareSelector } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler } from './middleware/scaler';
@@ -29,14 +30,14 @@ export class Core {
         _Core_board.set(this, void 0);
         _Core_canvas.set(this, void 0);
         _Core_container.set(this, void 0);
-        const { devicePixelRatio = 1, width, height, createCustomContext2D } = opts;
+        const { devicePixelRatio = 1, width, height } = opts;
         __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
         canvas.setAttribute('tabindex', '0');
         __classPrivateFieldSet(this, _Core_canvas, canvas, "f");
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
-        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio, offscreen: true, createCustomContext2D });
+        const boardContent = createBoardContent(canvas, { width, height, devicePixelRatio });
         const board = new Board({ boardContent, container });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({

package/dist/esm/middleware/layout-selector/index.js

@@ -187,6 +187,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             }
             if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) {
                 viewer.drawFrame();
+                eventHub.trigger(coreEventKeys.SELECT_LAYOUT);
             }
             prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected);
             if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
@@ -300,10 +301,12 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             const data = sharer.getActiveStorage('data');
             if (data && layoutActionType === 'resize' && layoutControlType) {
                 eventHub.trigger(coreEventKeys.CHANGE, {
-                    type: 'changeLayout',
+                    type: 'dragLayout',
                     data
                 });
             }
+            sharer.setSharedStorage(keyLayoutActionType, null);
+            sharer.setSharedStorage(keyLayoutControlType, null);
             if (sharer.getSharedStorage(keyLayoutIsHoverController) === true) {
                 return false;
             }

package/dist/esm/middleware/scroller/util.js

@@ -108,7 +108,8 @@ function calcScrollerInfo(opts) {
     return scrollWrapper;
 }
 function drawScrollerThumb(ctx, opts) {
-    let { x, y, h, w, background, borderColor } = opts;
+    let { x, y, h, w } = opts;
+    const { background, borderColor } = opts;
     ctx.save();
     ctx.shadowColor = '#FFFFFF';
     ctx.shadowOffsetX = 0;

package/dist/esm/middleware/selector/index.js

@@ -86,7 +86,11 @@ export const MiddlewareSelector = (opts, config) => {
             const uuids = list.map((elem) => elem.uuid);
             const data = sharer.getActiveStorage('data');
             const positionMap = getElementPositionMapFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
-            eventHub.trigger(coreEventKeys.SELECT, { uuids, positions: list.map((elem) => [...positionMap[elem.uuid]]) });
+            eventHub.trigger(coreEventKeys.SELECT, {
+                type: 'clickCanvas',
+                uuids,
+                positions: list.map((elem) => [...positionMap[elem.uuid]])
+            });
         }
     };
     const pointTargetBaseOptions = () => {
@@ -365,7 +369,12 @@ export const MiddlewareSelector = (opts, config) => {
                 hasChangedData = true;
                 inBusyMode = 'drag';
                 eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
+                if (data &&
+                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
+                    moveOriginalStartElementSize &&
+                    originalStart &&
+                    end &&
+                    ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
                     const { moveX, moveY } = calcPointMoveElementInGroup(originalStart, end, groupQueue);
                     let totalMoveX = calculator.toGridNum(moveX / scale);
                     let totalMoveY = calculator.toGridNum(moveY / scale);
@@ -394,7 +403,7 @@ export const MiddlewareSelector = (opts, config) => {
                     elems[0].x = calculator.toGridNum(moveOriginalStartElementSize.x + totalMoveX);
                     elems[0].y = calculator.toGridNum(moveOriginalStartElementSize.y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
-                    calculator.modifyViewVisibleInfoMap(data, {
+                    calculator.modifyVirtualFlatItemMap(data, {
                         modifyOptions: {
                             type: 'updateElement',
                             content: {
@@ -419,7 +428,7 @@ export const MiddlewareSelector = (opts, config) => {
                         if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) !== true) {
                             elem.x = calculator.toGridNum(elem.x + moveX);
                             elem.y = calculator.toGridNum(elem.y + moveY);
-                            calculator.modifyViewVisibleInfoMap(data, {
+                            calculator.modifyVirtualFlatItemMap(data, {
                                 modifyOptions: {
                                     type: 'updateElement',
                                     content: {
@@ -437,7 +446,11 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             else if (actionType === 'resize') {
-                if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && originalStart && moveOriginalStartElementSize && (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
+                if (data &&
+                    (elems === null || elems === void 0 ? void 0 : elems.length) === 1 &&
+                    originalStart &&
+                    moveOriginalStartElementSize &&
+                    (resizeType === null || resizeType === void 0 ? void 0 : resizeType.startsWith('resize-'))) {
                     hasChangedData = true;
                     inBusyMode = 'resize';
                     const pointGroupQueue = [];
@@ -478,7 +491,7 @@ export const MiddlewareSelector = (opts, config) => {
                         elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
                     }
                     else {
-                        const resizedElemSize = resizeElement(moveOriginalStartElementSize, { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
+                        const resizedElemSize = resizeElement(Object.assign(Object.assign({}, moveOriginalStartElementSize), { operations: elems[0].operations }), { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
                         const calcOpts = { ignore: !!moveOriginalStartElementSize.angle };
                         elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
                         elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
@@ -494,7 +507,7 @@ export const MiddlewareSelector = (opts, config) => {
                         }
                     }
                     updateSelectedElementList([elems[0]]);
-                    calculator.modifyViewVisibleInfoMap(data, {
+                    calculator.modifyVirtualFlatItemMap(data, {
                         modifyOptions: {
                             type: 'updateElement',
                             content: {
@@ -627,7 +640,9 @@ export const MiddlewareSelector = (opts, config) => {
                     return;
                 }
             }
-            else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' && !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
+            else if (target.elements.length === 1 &&
+                ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' &&
+                !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
                 eventHub.trigger(coreEventKeys.TEXT_EDIT, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],

package/dist/esm/middleware/selector/util.d.ts

@@ -1,4 +1,4 @@
-import type { ViewRectVertexes, ElementSizeController, StoreSharer, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import type { ViewRectVertexes, ElementSizeController, StoreSharer, ViewScaleInfo, ViewSizeInfo, ElementOperations } from '@idraw/types';
 import type { Data, Element, ViewContext2D, Point, PointSize, PointTarget, ViewCalculator, ElementType, ElementSize, ResizeType, AreaSize } from './types';
 export declare function isPointInViewActiveVertexes(p: PointSize, opts: {
     ctx: ViewContext2D;
@@ -23,7 +23,9 @@ export declare function getPointTarget(p: PointSize, opts: {
     groupQueue: Element<'group'>[] | null;
     selectedElementController: ElementSizeController | null;
 }): PointTarget;
-export declare function resizeElement(elem: ElementSize, opts: {
+export declare function resizeElement(elem: ElementSize & {
+    operations?: ElementOperations;
+}, opts: {
     start: PointSize;
     end: PointSize;
     resizeType: ResizeType;

package/dist/esm/middleware/selector/util.js

@@ -413,7 +413,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
                     centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
@@ -548,7 +549,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const radian = parseRadian(angle);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
@@ -696,7 +698,7 @@ export function getSelectedListArea(data, opts) {
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
         return { indexes, uuids, elements };
     }