@idraw/core 0.4.0-beta.32 → 0.4.0-beta.34

package/dist/esm/config.d.ts

@@ -1 +1,26 @@
-export declare const eventChange = "change";
+export declare const EVENT_KEY_CHANGE = "change";
+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_CLEAR_SELECT = "clearSelect";
+export declare const EVENT_KEY_TEXT_EDIT = "textEdit";
+export declare const EVENT_KEY_TEXT_CHANGE = "textChange";
+export declare const EVENT_KEY_CONTEXT_MENU = "contextMenu";
+export declare const EVENT_KEY_SELECT_IN_GROUP = "selectInGroup";
+export declare const EVENT_KEY_SNAP_TO_GRID = "snapToGrid";
+export type CoreEventKeys = {
+    CURSOR: typeof EVENT_KEY_CURSOR;
+    CHANGE: typeof EVENT_KEY_CHANGE;
+    RULER: typeof EVENT_KEY_RULER;
+    SCALE: typeof EVENT_KEY_SCALE;
+    SELECT: typeof EVENT_KEY_SELECT;
+    CLEAR_SELECT: typeof EVENT_KEY_CLEAR_SELECT;
+    TEXT_EDIT: typeof EVENT_KEY_TEXT_EDIT;
+    TEXT_CHANGE: typeof EVENT_KEY_TEXT_CHANGE;
+    CONTEXT_MENU: typeof EVENT_KEY_CONTEXT_MENU;
+    SELECT_IN_GROUP: typeof EVENT_KEY_SELECT_IN_GROUP;
+    SNAP_TO_GRID: typeof EVENT_KEY_SELECT_IN_GROUP;
+};
+declare const coreEventKeys: CoreEventKeys;
+export { coreEventKeys };

package/dist/esm/config.js

@@ -1 +1,32 @@
-export const eventChange = 'change';
+export const EVENT_KEY_CHANGE = 'change';
+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_CLEAR_SELECT = 'clearSelect';
+export const EVENT_KEY_TEXT_EDIT = 'textEdit';
+export const EVENT_KEY_TEXT_CHANGE = 'textChange';
+export const EVENT_KEY_CONTEXT_MENU = 'contextMenu';
+export const EVENT_KEY_SELECT_IN_GROUP = 'selectInGroup';
+export const EVENT_KEY_SNAP_TO_GRID = 'snapToGrid';
+const innerEventKeys = {
+    CURSOR: EVENT_KEY_CURSOR,
+    CHANGE: EVENT_KEY_CHANGE,
+    RULER: EVENT_KEY_RULER,
+    SCALE: EVENT_KEY_SCALE,
+    SELECT: EVENT_KEY_SELECT,
+    CLEAR_SELECT: EVENT_KEY_CLEAR_SELECT,
+    TEXT_EDIT: EVENT_KEY_TEXT_EDIT,
+    TEXT_CHANGE: EVENT_KEY_TEXT_CHANGE,
+    CONTEXT_MENU: EVENT_KEY_CONTEXT_MENU,
+    SELECT_IN_GROUP: EVENT_KEY_SELECT_IN_GROUP,
+    SNAP_TO_GRID: EVENT_KEY_SELECT_IN_GROUP
+};
+const coreEventKeys = {};
+Object.keys(innerEventKeys).forEach((keyName) => {
+    Object.defineProperty(coreEventKeys, keyName, {
+        value: innerEventKeys[keyName],
+        writable: false
+    });
+});
+export { coreEventKeys };

package/dist/esm/index.d.ts

@@ -1,13 +1,15 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
-export { eventChange } from './config';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
+export { coreEventKeys } from './config';
+export type { CoreEventKeys } from './config';
+export { MiddlewareSelector } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
-export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
+export { MiddlewareScaler } from './middleware/scaler';
+export { MiddlewareRuler } from './middleware/ruler';
+export { MiddlewareTextEditor } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
 export { MiddlewareInfo } from './middleware/info';
 export { MiddlewareLayoutSelector } from './middleware/layout-selector';
+export { MiddlewarePointer } from './middleware/pointer';
 export declare class Core<E extends CoreEventMap = CoreEventMap> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);

package/dist/esm/index.js

@@ -13,15 +13,16 @@ var _Core_instances, _Core_board, _Core_canvas, _Core_container, _Core_initConta
 import { Board } from '@idraw/board';
 import { createBoardContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
-export { eventChange } from './config';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
+export { coreEventKeys } from './config';
+export { MiddlewareSelector } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
-export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
-export { MiddlewareTextEditor, middlewareEventTextEdit, middlewareEventTextChange } from './middleware/text-editor';
+export { MiddlewareScaler } from './middleware/scaler';
+export { MiddlewareRuler } from './middleware/ruler';
+export { MiddlewareTextEditor } from './middleware/text-editor';
 export { MiddlewareDragger } from './middleware/dragger';
 export { MiddlewareInfo } from './middleware/info';
 export { MiddlewareLayoutSelector } from './middleware/layout-selector';
+export { MiddlewarePointer } from './middleware/pointer';
 export class Core {
     constructor(container, opts) {
         _Core_instances.add(this);

package/dist/esm/lib/cursor.js

@@ -12,6 +12,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _Cursor_instances, _Cursor_eventHub, _Cursor_container, _Cursor_cursorType, _Cursor_resizeCursorBaseImage, _Cursor_cursorImageMap, _Cursor_init, _Cursor_loadResizeCursorBaseImage, _Cursor_resetCursor, _Cursor_setCursorResize, _Cursor_appendRotateResizeImage;
 import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util';
 import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE, CURSOR_RESIZE_ROTATE } from './cursor-image';
+import { coreEventKeys } from '../config';
 export class Cursor {
     constructor(container, opts) {
         _Cursor_instances.add(this);
@@ -35,7 +36,7 @@ export class Cursor {
 _Cursor_eventHub = new WeakMap(), _Cursor_container = new WeakMap(), _Cursor_cursorType = new WeakMap(), _Cursor_resizeCursorBaseImage = new WeakMap(), _Cursor_cursorImageMap = new WeakMap(), _Cursor_instances = new WeakSet(), _Cursor_init = function _Cursor_init() {
     const eventHub = __classPrivateFieldGet(this, _Cursor_eventHub, "f");
     __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'default');
-    eventHub.on('cursor', (e) => {
+    eventHub.on(coreEventKeys.CURSOR, (e) => {
         var _a;
         if (e.type === 'over-element' || !e.type) {
             __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');

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

@@ -1,3 +1,4 @@
+import { coreEventKeys } from '../../config';
 const key = 'DRAG';
 const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const MiddlewareDragger = (opts) => {
@@ -9,7 +10,7 @@ export const MiddlewareDragger = (opts) => {
             if (isDragging === true) {
                 return;
             }
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         },
@@ -17,7 +18,7 @@ export const MiddlewareDragger = (opts) => {
             const { point } = e;
             sharer.setSharedStorage(keyPrevPoint, point);
             isDragging = true;
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-active'
             });
         },
@@ -35,7 +36,7 @@ export const MiddlewareDragger = (opts) => {
         pointEnd() {
             isDragging = false;
             sharer.setSharedStorage(keyPrevPoint, null);
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         }

package/dist/esm/middleware/info/index.d.ts

@@ -1,3 +1,3 @@
-import type { BoardMiddleware, MiddlewareInfoConfig } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, any, MiddlewareInfoConfig>;
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap, MiddlewareInfoConfig>;

package/dist/esm/middleware/info/types.d.ts

@@ -1,3 +1,3 @@
-import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector';
 import type { DeepSelectorSharedStorage } from '../selector';
-export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyActionType | typeof keyGroupQueue>;
+export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyHoverElement | typeof keyActionType | typeof keyGroupQueue>;

package/dist/esm/middleware/layout-selector/index.d.ts

@@ -1,5 +1,5 @@
-import type { BoardMiddleware, MiddlewareLayoutSelectorConfig } from '@idraw/types';
+import type { BoardMiddleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
 import type { LayoutSelectorSharedStorage } from './types';
 import { keyLayoutIsSelected } from './config';
 export { keyLayoutIsSelected };
-export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, any, MiddlewareLayoutSelectorConfig>;
+export declare const MiddlewareLayoutSelector: BoardMiddleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;

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

@@ -1,8 +1,8 @@
 import { calcLayoutSizeController, isViewPointInVertexes, getViewScaleInfoFromSnapshot, isViewPointInElementSize, calcViewElementSize } from '@idraw/util';
 import { keyLayoutActionType, keyLayoutController, keyLayoutControlType, keyLayoutIsHover, keyLayoutIsSelected, controllerSize, defaultStyle } from './config';
-import { keyActionType as keyElementActionType, keyHoverElement, middlewareEventSelectClear } from '../selector';
+import { keyActionType as keyElementActionType, keyHoverElement } from '../selector';
 import { drawLayoutController, drawLayoutHover } from './util';
-import { eventChange } from '../../config';
+import { coreEventKeys } from '../../config';
 export { keyLayoutIsSelected };
 export const MiddlewareLayoutSelector = (opts, config) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
@@ -92,7 +92,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
                 }
                 if (layoutControlType) {
                     sharer.setSharedStorage(keyLayoutControlType, layoutControlType);
-                    eventHub.trigger(middlewareEventSelectClear, {});
+                    eventHub.trigger(coreEventKeys.CLEAR_SELECT);
                     return layoutControlType;
                 }
             }
@@ -103,7 +103,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
         if (isBusy === true) {
             return;
         }
-        eventHub.trigger('cursor', {
+        eventHub.trigger(coreEventKeys.CURSOR, {
             type: controlType ? `resize-${controlType}` : controlType,
             groupQueue: [],
             element: getLayoutSize()
@@ -293,7 +293,7 @@ export const MiddlewareLayoutSelector = (opts, config) => {
             const layoutControlType = sharer.getSharedStorage(keyLayoutControlType);
             const data = sharer.getActiveStorage('data');
             if (data && layoutActionType === 'resize' && layoutControlType) {
-                eventHub.trigger(eventChange, {
+                eventHub.trigger(coreEventKeys.CHANGE, {
                     type: 'changeLayout',
                     data
                 });

package/dist/esm/middleware/pointer/index.d.ts

@@ -0,0 +1,3 @@
+import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
+import type { DeepPointerSharedStorage } from './types';
+export declare const MiddlewarePointer: BoardMiddleware<DeepPointerSharedStorage, CoreEventMap>;

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

@@ -0,0 +1,43 @@
+import { keySelectedElementList } from '../selector';
+import { coreEventKeys } from '../../config';
+export const MiddlewarePointer = (opts) => {
+    const { boardContent, eventHub, sharer } = opts;
+    const canvas = boardContent.boardContext.canvas;
+    const container = opts.container || document.body;
+    const id = `idraw-middleware-pointer-${Math.random().toString(26).substring(2)}`;
+    const getCanvasRect = () => {
+        const clientRect = canvas.getBoundingClientRect();
+        const { left, top, width, height } = clientRect;
+        return { left, top, width, height };
+    };
+    const contextMenuPointer = document.createElement('div');
+    contextMenuPointer.setAttribute('id', id);
+    contextMenuPointer.style.position = 'fixed';
+    contextMenuPointer.style.top = '0';
+    contextMenuPointer.style.bottom = 'unset';
+    contextMenuPointer.style.left = '0';
+    contextMenuPointer.style.right = 'unset';
+    container.appendChild(contextMenuPointer);
+    return {
+        name: '@middleware/pointer',
+        use() {
+        },
+        disuse() {
+        },
+        pointStart(e) {
+        },
+        pointEnd() {
+        },
+        contextMenu(e) {
+            const { point } = e;
+            const { left, top } = getCanvasRect();
+            contextMenuPointer.style.left = `${left + point.x}px`;
+            contextMenuPointer.style.top = `${top + point.y}px`;
+            const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+            eventHub.trigger(coreEventKeys.CONTEXT_MENU, {
+                pointerContainer: contextMenuPointer,
+                selectedElements: selectedElements || []
+            });
+        }
+    };
+};

package/dist/esm/middleware/pointer/types.d.ts

@@ -0,0 +1,3 @@
+import { keySelectedElementList } from '../selector';
+import type { DeepSelectorSharedStorage } from '../selector';
+export type DeepPointerSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList>;

package/dist/esm/middleware/pointer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/middleware/ruler/index.d.ts

@@ -1,4 +1,3 @@
 import type { BoardMiddleware, CoreEventMap, MiddlewareRulerConfig } from '@idraw/types';
 import type { DeepRulerSharedStorage } from './types';
-export declare const middlewareEventRuler = "@middleware/show-ruler";
 export declare const MiddlewareRuler: BoardMiddleware<DeepRulerSharedStorage, CoreEventMap, MiddlewareRulerConfig>;

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

@@ -1,7 +1,7 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
 import { defaultStyle } from './config';
-export const middlewareEventRuler = '@middleware/show-ruler';
+import { coreEventKeys } from '../../config';
 export const MiddlewareRuler = (opts, config) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
     const { overlayContext, underlayContext } = boardContent;
@@ -32,10 +32,10 @@ export const MiddlewareRuler = (opts, config) => {
     return {
         name: '@middleware/ruler',
         use() {
-            eventHub.on(middlewareEventRuler, rulerCallback);
+            eventHub.on(coreEventKeys.RULER, rulerCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventRuler, rulerCallback);
+            eventHub.off(coreEventKeys.RULER, rulerCallback);
         },
         beforeDrawFrame: ({ snapshot }) => {
             if (show === true) {

package/dist/esm/middleware/scaler/index.d.ts

@@ -1,3 +1,2 @@
 import type { BoardMiddleware, CoreEventMap } from '@idraw/types';
-export declare const middlewareEventScale = "@middleware/scale";
 export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEventMap>;

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

@@ -1,5 +1,5 @@
 import { formatNumber } from '@idraw/util';
-export const middlewareEventScale = '@middleware/scale';
+import { coreEventKeys } from '../../config';
 export const MiddlewareScaler = (opts) => {
     const { viewer, sharer, eventHub } = opts;
     const maxScale = 50;
@@ -23,7 +23,7 @@ export const MiddlewareScaler = (opts) => {
             viewer.scroll({ moveX, moveY });
             viewer.drawFrame();
             const scaleNum = formatNumber(scale);
-            eventHub.trigger(middlewareEventScale, { scale: scaleNum });
+            eventHub.trigger(coreEventKeys.SCALE, { scale: scaleNum });
         }
     };
 };

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

@@ -1,5 +1,6 @@
 import { drawScroller, isPointInScrollThumb } from './util';
 import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect, defaultStyle } from './config';
+import { coreEventKeys } from '../../config';
 export const MiddlewareScroller = (opts, config) => {
     const { viewer, boardContent, sharer, eventHub } = opts;
     const { overlayContext } = boardContent;
@@ -79,7 +80,7 @@ export const MiddlewareScroller = (opts, config) => {
                     sharer.setSharedStorage(keyHoverXThumbRect, false);
                     sharer.setSharedStorage(keyHoverYThumbRect, true);
                 }
-                eventHub.trigger('cursor', { type: 'default' });
+                eventHub.trigger(coreEventKeys.CURSOR, { type: 'default' });
                 return false;
             }
             sharer.setSharedStorage(keyHoverXThumbRect, false);

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

@@ -26,7 +26,3 @@ export declare const resizeControllerBorderWidth = 4;
 export declare const areaBorderWidth = 1;
 export declare const controllerSize = 10;
 export declare const defaultStyle: MiddlewareSelectorStyle;
-export declare const middlewareEventSelect: string;
-export declare const middlewareEventSelectClear: string;
-export declare const middlewareEventSelectInGroup: string;
-export declare const middlewareEventSnapToGrid: string;

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

@@ -34,7 +34,3 @@ export const defaultStyle = {
     lockedColor,
     referenceColor
 };
-export const middlewareEventSelect = '@middleware/select';
-export const middlewareEventSelectClear = '@middleware/select-clear';
-export const middlewareEventSelectInGroup = '@middleware/select-in-group';
-export const middlewareEventSnapToGrid = '@middleware/snap-to-grid';

package/dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -1,11 +1,11 @@
-import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator } from '@idraw/types';
-import type { AreaSize, MiddlewareSelectorStyle } from './types';
+import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator, MiddlewareSelectorStyle } from '@idraw/types';
+import type { AreaSize } from './types';
 export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     style: MiddlewareSelectorStyle;
 }): void;
-export declare function drawLockVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+export declare function drawLockedVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     controller?: ElementSizeController | null;

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -10,7 +10,7 @@ export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
     const wrapperOpts = { borderColor: activeColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
 }
-export function drawLockVertexesWrapper(ctx, vertexes, opts) {
+export function drawLockedVertexesWrapper(ctx, vertexes, opts) {
     if (!vertexes) {
         return;
     }

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

@@ -1,7 +1,6 @@
 import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
-export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig>;