@idraw/core 0.4.0-beta.33 → 0.4.0-beta.35

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

@@ -1,14 +1,12 @@
-import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockedVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
-import { middlewareEventTextEdit } from '../text-editor';
-import { eventChange } from '../../config';
+import { coreEventKeys } from '../../config';
 import { keyLayoutIsSelected } from '../layout-selector';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
-export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
 export const MiddlewareSelector = (opts, config) => {
     const innerConfig = Object.assign(Object.assign({}, defaultStyle), config);
     const { activeColor, activeAreaColor, lockedColor, referenceColor } = innerConfig;
@@ -19,6 +17,7 @@ export const MiddlewareSelector = (opts, config) => {
     let moveOriginalStartPoint = null;
     let moveOriginalStartElementSize = null;
     let inBusyMode = null;
+    let hasChangedData = null;
     sharer.setSharedStorage(keyActionType, null);
     sharer.setSharedStorage(keyEnableSnapToGrid, true);
     const getActiveElements = () => {
@@ -72,7 +71,10 @@ export const MiddlewareSelector = (opts, config) => {
             sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
+            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]]) });
         }
     };
     const pointTargetBaseOptions = () => {
@@ -105,7 +107,7 @@ export const MiddlewareSelector = (opts, config) => {
         sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
-    const selectCallback = ({ uuids, positions }) => {
+    const selectCallback = ({ uuids = [], positions }) => {
         let elements = [];
         const actionType = sharer.getSharedStorage(keyActionType);
         const data = sharer.getActiveStorage('data');
@@ -144,16 +146,16 @@ export const MiddlewareSelector = (opts, config) => {
     return {
         name: '@middleware/selector',
         use() {
-            eventHub.on(middlewareEventSelect, selectCallback);
-            eventHub.on(middlewareEventSelectClear, selectClearCallback);
-            eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
-            eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
+            eventHub.on(coreEventKeys.SELECT, selectCallback);
+            eventHub.on(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.on(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.on(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventSelect, selectCallback);
-            eventHub.off(middlewareEventSelectClear, selectClearCallback);
-            eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
-            eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
+            eventHub.off(coreEventKeys.SELECT, selectCallback);
+            eventHub.off(coreEventKeys.CLEAR_SELECT, selectClearCallback);
+            eventHub.off(coreEventKeys.SELECT_IN_GROUP, selectInGroupCallback);
+            eventHub.off(coreEventKeys.SNAP_TO_GRID, setSnapToSnapCallback);
         },
         hover: (e) => {
             var _a, _b, _c, _d, _e;
@@ -167,7 +169,7 @@ export const MiddlewareSelector = (opts, config) => {
                 }
                 const cursor = target.type;
                 if (inBusyMode === null) {
-                    eventHub.trigger('cursor', {
+                    eventHub.trigger(coreEventKeys.CURSOR, {
                         type: cursor,
                         groupQueue: target.groupQueue,
                         element: target.elements[0]
@@ -263,16 +265,15 @@ export const MiddlewareSelector = (opts, config) => {
                     groupQueue
                 })) {
                     const target = getPointTarget(e.point, pointTargetBaseOptions());
-                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true) {
-                        return;
-                    }
-                    else {
-                        updateHoverElement(null);
-                    }
+                    const isLockedElement = ((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) === true;
+                    updateHoverElement(null);
                     if (((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length) === 1) {
                         moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
                     }
-                    if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
+                    if (isLockedElement === true) {
+                        clear();
+                    }
+                    else if (target.type === 'over-element' && ((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1) {
                         updateSelectedElementList([target.elements[0]], { triggerEvent: true });
                         sharer.setSharedStorage(keyActionType, 'drag');
                     }
@@ -297,30 +298,26 @@ export const MiddlewareSelector = (opts, config) => {
             });
             const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
             const isLockedElement = ((_g = target === null || target === void 0 ? void 0 : target.elements) === null || _g === void 0 ? void 0 : _g.length) === 1 && ((_j = (_h = target.elements[0]) === null || _h === void 0 ? void 0 : _h.operations) === null || _j === void 0 ? void 0 : _j.locked) === true;
-            if (!isLockedElement) {
-                updateHoverElement(null);
-            }
+            updateHoverElement(null);
             if (((_k = target === null || target === void 0 ? void 0 : target.elements) === null || _k === void 0 ? void 0 : _k.length) === 1) {
                 moveOriginalStartElementSize = getElementSize(target === null || target === void 0 ? void 0 : target.elements[0]);
             }
-            if (!isLockedElement) {
-                if (target.type === 'list-area') {
-                    sharer.setSharedStorage(keyActionType, 'drag-list');
-                }
-                else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
-                    updateSelectedElementList([target.elements[0]], { triggerEvent: true });
-                    sharer.setSharedStorage(keyActionType, 'drag');
-                }
-                else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
-                    sharer.setSharedStorage(keyResizeType, target.type);
-                    sharer.setSharedStorage(keyActionType, 'resize');
-                }
-                else {
-                    clear();
-                    sharer.setSharedStorage(keyActionType, 'area');
-                    sharer.setSharedStorage(keyAreaStart, e.point);
-                    updateSelectedElementList([], { triggerEvent: true });
-                }
+            if (isLockedElement === true) {
+                clear();
+                sharer.setSharedStorage(keyActionType, 'area');
+                sharer.setSharedStorage(keyAreaStart, e.point);
+                updateSelectedElementList([], { triggerEvent: true });
+            }
+            else if (target.type === 'list-area') {
+                sharer.setSharedStorage(keyActionType, 'drag-list');
+            }
+            else if (target.type === 'over-element' && ((_l = target === null || target === void 0 ? void 0 : target.elements) === null || _l === void 0 ? void 0 : _l.length) === 1) {
+                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                sharer.setSharedStorage(keyActionType, 'drag');
+            }
+            else if ((_m = target.type) === null || _m === void 0 ? void 0 : _m.startsWith('resize-')) {
+                sharer.setSharedStorage(keyResizeType, target.type);
+                sharer.setSharedStorage(keyActionType, 'resize');
             }
             else {
                 clear();
@@ -346,6 +343,7 @@ export const MiddlewareSelector = (opts, config) => {
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
             if (actionType === 'drag') {
+                hasChangedData = true;
                 inBusyMode = 'drag';
                 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 } = calcMoveInGroup(originalStart, end, groupQueue);
@@ -391,6 +389,7 @@ export const MiddlewareSelector = (opts, config) => {
                 viewer.drawFrame();
             }
             else if (actionType === 'drag-list') {
+                hasChangedData = true;
                 inBusyMode = 'drag-list';
                 if (data && originalStart && start && end && (elems === null || elems === void 0 ? void 0 : elems.length) > 1) {
                     const moveX = (end.x - start.x) / scale;
@@ -419,6 +418,7 @@ export const MiddlewareSelector = (opts, config) => {
             }
             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-'))) {
+                    hasChangedData = true;
                     inBusyMode = 'resize';
                     const pointGroupQueue = [];
                     groupQueue.forEach((group) => {
@@ -569,7 +569,10 @@ export const MiddlewareSelector = (opts, config) => {
                     if (type === 'resize') {
                         type = 'resizeElement';
                     }
-                    eventHub.trigger(eventChange, { data, type, selectedElements, hoverElement });
+                    if (hasChangedData) {
+                        eventHub.trigger(coreEventKeys.CHANGE, { data, type, selectedElements, hoverElement });
+                        hasChangedData = false;
+                    }
                 }
                 viewer.drawFrame();
             };
@@ -602,7 +605,7 @@ export const MiddlewareSelector = (opts, config) => {
                 }
             }
             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(middlewareEventTextEdit, {
+                eventHub.trigger(coreEventKeys.TEXT_EDIT, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
                     position: getElementPositionFromList((_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage('data')) === null || _h === void 0 ? void 0 : _h.elements) || []),
@@ -611,6 +614,44 @@ export const MiddlewareSelector = (opts, config) => {
             }
             sharer.setSharedStorage(keyActionType, null);
         },
+        contextMenu: (e) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const groupQueue = sharer.getSharedStorage(keyGroupQueue);
+            if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+                if (isPointInViewActiveGroup(e.point, {
+                    ctx: overlayContext,
+                    viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                    viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                    groupQueue
+                })) {
+                    const target = getPointTarget(e.point, pointTargetBaseOptions());
+                    if (((_a = target === null || target === void 0 ? void 0 : target.elements) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = target.elements[0]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.locked) !== true) {
+                        clear();
+                        updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                        viewer.drawFrame();
+                    }
+                    else if (!((_d = target === null || target === void 0 ? void 0 : target.elements) === null || _d === void 0 ? void 0 : _d.length)) {
+                        clear();
+                    }
+                }
+                return;
+            }
+            const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                viewSizeInfo: sharer.getActiveViewSizeInfo(),
+                calculator
+            });
+            const target = getPointTarget(e.point, Object.assign(Object.assign({}, pointTargetBaseOptions()), { areaSize: listAreaSize, groupQueue: [] }));
+            if (((_e = target === null || target === void 0 ? void 0 : target.elements) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_g = (_f = target.elements[0]) === null || _f === void 0 ? void 0 : _f.operations) === null || _g === void 0 ? void 0 : _g.locked) !== true) {
+                clear();
+                updateSelectedElementList([target.elements[0]], { triggerEvent: true });
+                viewer.drawFrame();
+                return;
+            }
+            else if (!((_h = target === null || target === void 0 ? void 0 : target.elements) === null || _h === void 0 ? void 0 : _h.length)) {
+                clear();
+            }
+        },
         beforeDrawFrame({ snapshot }) {
             var _a;
             const { activeStore, sharedStore } = snapshot;
@@ -637,11 +678,11 @@ export const MiddlewareSelector = (opts, config) => {
                     viewScaleInfo
                 })
                 : null;
-            const isLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
+            const isHoverLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
-                    if (isLocked) {
+                    if (isHoverLocked) {
                         drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
@@ -652,7 +693,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLocked && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {
@@ -679,7 +720,7 @@ export const MiddlewareSelector = (opts, config) => {
             }
             else {
                 if (hoverElement && actionType !== 'drag') {
-                    if (isLocked) {
+                    if (isHoverLocked) {
                         drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
@@ -690,7 +731,7 @@ export const MiddlewareSelector = (opts, config) => {
                         drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
-                if (!isLocked && elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
                     drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
                     if (actionType === 'drag') {
                         if (enableSnapToGrid === true) {

package/dist/esm/middleware/text-editor/index.d.ts

@@ -1,6 +1,5 @@
 import type { BoardMiddleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
-export declare const middlewareEventTextEdit = "@middleware/text-edit";
-export declare const middlewareEventTextChange = "@middleware/text-change";
+import { coreEventKeys } from '../../config';
 type TextEditEvent = {
     element: Element<'text'>;
     position: ElementPosition;
@@ -16,6 +15,6 @@ type TextChangeEvent = {
     };
     position: ElementPosition;
 };
-type ExtendEventMap = Record<typeof middlewareEventTextEdit, TextEditEvent> & Record<typeof middlewareEventTextChange, TextChangeEvent>;
+type ExtendEventMap = Record<typeof coreEventKeys.TEXT_EDIT, TextEditEvent> & Record<typeof coreEventKeys.TEXT_CHANGE, TextChangeEvent>;
 export declare const MiddlewareTextEditor: BoardMiddleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
 export {};

package/dist/esm/middleware/text-editor/index.js

@@ -1,6 +1,5 @@
 import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
-export const middlewareEventTextEdit = '@middleware/text-edit';
-export const middlewareEventTextChange = '@middleware/text-change';
+import { coreEventKeys } from '../../config';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
     const { eventHub, boardContent, viewer, sharer } = opts;
@@ -12,6 +11,8 @@ export const MiddlewareTextEditor = (opts) => {
     const mask = document.createElement('div');
     let activeElem = null;
     let activePosition = [];
+    const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
+    mask.setAttribute('id', id);
     canvasWrapper.appendChild(textarea);
     canvasWrapper.style.position = 'absolute';
     mask.appendChild(canvasWrapper);
@@ -163,7 +164,7 @@ export const MiddlewareTextEditor = (opts) => {
     textarea.addEventListener('input', () => {
         if (activeElem && activePosition) {
             activeElem.detail.text = textarea.innerText || '';
-            eventHub.trigger(middlewareEventTextChange, {
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
                 element: {
                     uuid: activeElem.uuid,
                     detail: {
@@ -177,7 +178,7 @@ export const MiddlewareTextEditor = (opts) => {
     });
     textarea.addEventListener('blur', () => {
         if (activeElem && activePosition) {
-            eventHub.trigger(middlewareEventTextChange, {
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
                 element: {
                     uuid: activeElem.uuid,
                     detail: {
@@ -213,10 +214,10 @@ export const MiddlewareTextEditor = (opts) => {
     return {
         name: '@middleware/text-editor',
         use() {
-            eventHub.on(middlewareEventTextEdit, textEditCallback);
+            eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
         },
         disuse() {
-            eventHub.off(middlewareEventTextEdit, textEditCallback);
+            eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
         }
     };
 };