feat: add event to disable selecting in group

packages/core/src/index.ts

@@ -5,7 +5,7 @@ import { Cursor } from './lib/cursor';
 export { eventChange } from './config';
 
 // export { MiddlewareSelector } from './middleware/selector';
-export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';

packages/core/src/middleware/selector/config.ts

@@ -16,6 +16,7 @@ export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines
 export const keyGroupQueue = Symbol(`${key}_groupQueue`); // Array<Element<'group'>> | []
 export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`); // Array<ViewRectVertexes> | []
 export const keyIsMoving = Symbol(`${key}_isMoving`); // boolean | null
+export const keyEnableSelectInGroup = Symbol(`${key}_canSelectInGroup`);
 
 export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
 export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
@@ -37,3 +38,9 @@ export const controllerSize = 10;
 export const auxiliaryColor = '#f7276e';
 
 export const referenceColor = '#f7276e';
+
+export const middlewareEventSelect: string = '@middleware/select';
+
+export const middlewareEventSelectClear: string = '@middleware/select-clear';
+
+export const middlewareEventSelectInGroup: string = '@middleware/select-in-group';

packages/core/src/middleware/selector/index.ts

@@ -45,6 +45,9 @@ import {
   calcMoveInGroup
 } from './util';
 import {
+  middlewareEventSelect,
+  middlewareEventSelectClear,
+  middlewareEventSelectInGroup,
   keyActionType,
   keyResizeType,
   keyAreaStart,
@@ -60,6 +63,7 @@ import {
   keySelectedReferenceXLines,
   keySelectedReferenceYLines,
   keyIsMoving,
+  keyEnableSelectInGroup,
   controllerSize
   // keyDebugElemCenter,
   // keyDebugEnd0,
@@ -75,9 +79,7 @@ import { eventChange } from '../../config';
 export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
 
-export const middlewareEventSelect: string = '@middleware/select';
-
-export const middlewareEventSelectClear: string = '@middleware/select-clear';
+export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
 
 export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap> = (opts) => {
   const { viewer, sharer, boardContent, calculator, eventHub } = opts;
@@ -173,6 +175,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
     sharer.setSharedStorage(keySelectedReferenceXLines, []);
     sharer.setSharedStorage(keySelectedReferenceYLines, []);
     sharer.setSharedStorage(keyIsMoving, null);
+    sharer.setSharedStorage(keyEnableSelectInGroup, null);
   };
 
   clear();
@@ -210,16 +213,22 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
     viewer.drawFrame();
   };
 
+  const selectInGroupCallback = (e: { enable: boolean }) => {
+    sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
+  };
+
   return {
     name: '@middleware/selector',
     use() {
       eventHub.on(middlewareEventSelect, selectCallback);
       eventHub.on(middlewareEventSelectClear, selectClearCallback);
+      eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
     },
 
     disuse() {
       eventHub.off(middlewareEventSelect, selectCallback);
       eventHub.off(middlewareEventSelectClear, selectClearCallback);
+      eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
     },
 
     hover: (e: PointWatcherEvent) => {
@@ -677,6 +686,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
     },
 
     doubleClick(e: PointWatcherEvent) {
+      if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
+        return;
+      }
+
       const target = getPointTarget(e.point, pointTargetBaseOptions());
       sharer.setSharedStorage(keySelectedElementController, null);
       sharer.setSharedStorage(keySelectedElementList, []);

packages/core/src/middleware/selector/types.ts

@@ -31,6 +31,9 @@ import {
   keySelectedReferenceXLines,
   keySelectedReferenceYLines,
   keyIsMoving,
+  keyEnableSelectInGroup,
+
+  // debug keys
   keyDebugElemCenter,
   keyDebugEnd0,
   keyDebugEndHorizontal,
@@ -103,6 +106,7 @@ export type DeepSelectorSharedStorage = {
   [keySelectedReferenceXLines]: Array<PointSize[]>;
   [keySelectedReferenceYLines]: Array<PointSize[]>;
   [keyIsMoving]: boolean | null;
+  [keyEnableSelectInGroup]: boolean | null;
 
   [keyDebugElemCenter]: PointSize | null;
   [keyDebugEnd0]: PointSize | null;

packages/idraw/src/idraw.ts

@@ -1,4 +1,4 @@
-import { Core } from '@idraw/core';
+import { Core, middlewareEventSelectInGroup } from '@idraw/core';
 import type {
   PointSize,
   IDrawOptions,
@@ -59,7 +59,7 @@ export class iDraw {
   #setFeature(feat: IDrawFeature, status: boolean) {
     const store = this.#store;
     if (['ruler', 'scroll', 'scale', 'info'].includes(feat)) {
-      const map: Record<IDrawFeature, keyof Omit<IDrawStorage, 'mode'>> = {
+      const map: Record<IDrawFeature | string, keyof Omit<IDrawStorage, 'mode'>> = {
         ruler: 'enableRuler',
         scroll: 'enableScroll',
         scale: 'enableScale',
@@ -68,6 +68,10 @@ export class iDraw {
       store.set(map[feat], !!status);
       runMiddlewares(this.#core, store);
       this.#core.refresh();
+    } else if (feat === 'selectInGroup') {
+      this.#core.trigger(middlewareEventSelectInGroup, {
+        enable: !!status
+      });
     }
   }
 

packages/types/src/lib/idraw.ts

@@ -2,7 +2,7 @@ import type { CoreOptions } from './core';
 
 export type IDrawMode = 'select' | 'drag' | 'readOnly';
 
-export type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info'; // TODO other feature
+export type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info' | 'selectInGroup'; // TODO other feature
 
 export interface IDrawSettings {
   mode?: IDrawMode;