Merge pull request #327 from idrawjs/dev-v0.4

feat: improve snapping to grid in selector middleware

packages/board/src/index.ts

@@ -307,12 +307,6 @@ export class Board<T extends BoardExtendEventMap = BoardExtendEventMap> {
  extend: true
  });
  if (modifiedOptions) {
- // TODO
- // this.#viewer.modifyViewVisibleInfoMap(data, {
- // viewSizeInfo,
- // viewScaleInfo,
- // modifyOptions: modifiedOptions
- // });
  this.#viewer.resetViewVisibleInfoMap(data, {
  viewSizeInfo,
  viewScaleInfo

packages/board/src/lib/calculator.ts

@@ -188,30 +188,53 @@ export class Calculator implements ViewCalculator {
  const viewVisibleInfoMap = this.#store.get('viewVisibleInfoMap');
  if (type === 'deleteElement') {
  const { element } = content as ModifyOptions<'deleteElement'>['content'];
- delete viewVisibleInfoMap[element.uuid];
- } else if (type === 'addElement' || type === 'updateElement') {
+ const uuids: string[] = [];
+ const _walk = (e: Element) => {
+ uuids.push(e.uuid);
+ if (e.type === 'group' && Array.isArray((e as Element<'group'>).detail.children)) {
+ (e as Element<'group'>).detail.children.forEach((child) => {
+ _walk(child);
+ });
+ }
+ };
+ _walk(element);
+ uuids.forEach((uuid) => {
+ delete viewVisibleInfoMap[uuid];
+ });
+ this.#store.set('viewVisibleInfoMap', viewVisibleInfoMap);
+ }
+ // else if (type === 'updateElement') {
+ // // TODO
+ // this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
+ // }
+ else if (type === 'addElement' || type === 'updateElement') {
  const { position } = content as ModifyOptions<'addElement'>['content'];
  const element = findElementFromListByPosition(position, data.elements);
  const groupQueue = getGroupQueueByElementPosition(list, position);
  if (element) {
- const originRectInfo = calcElementOriginRectInfo(element, {
- groupQueue: groupQueue || []
- });
- const newViewVisibleInfo: ViewVisibleInfo = {
- originRectInfo,
- rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
- isVisibleInView: true,
- isGroup: element?.type === 'group',
- position: [...position]
- };
- viewVisibleInfoMap[element.uuid] = newViewVisibleInfo;
- if (type === 'updateElement') {
- this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
+ if (type === 'updateElement' && element.type === 'group') {
+ // TODO
+ this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
+ } else {
+ const originRectInfo = calcElementOriginRectInfo(element, {
+ groupQueue: groupQueue || []
+ });
+ const newViewVisibleInfo: ViewVisibleInfo = {
+ originRectInfo,
+ rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo,
+ isVisibleInView: true,
+ isGroup: element?.type === 'group',
+ position: [...position]
+ };
+ viewVisibleInfoMap[element.uuid] = newViewVisibleInfo;
+ this.#store.set('viewVisibleInfoMap', viewVisibleInfoMap);
+ if (type === 'updateElement') {
+ this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
+ }
  }
  }
  } else if (type === 'moveElement') {
  this.resetViewVisibleInfoMap(data, { viewScaleInfo, viewSizeInfo });
  }
- this.#store.set('viewVisibleInfoMap', viewVisibleInfoMap);
  }
 }

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

@@ -11,8 +11,6 @@ export const keySelectedElementList = Symbol(`${key}_selectedElementList`); // A
 export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementListVertexes`); // ViewRectVertexes | null
 export const keySelectedElementController = Symbol(`${key}_selectedElementController`); // ElementSizeController
 export const keySelectedElementPosition = Symbol(`${key}_selectedElementPosition`); // ElementPosition | []
-export const keySelectedReferenceXLines = Symbol(`${key}_selectedReferenceXLines`); // Array<PointSize[]>
-export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines`); // Array<PointSize[]>
 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

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

@@ -12,7 +12,7 @@ import {
  getElementPositionFromList,
  deepResizeGroupElement
 } from '@idraw/util';
-import type { ViewRectVertexes, CoreEventMap, ElementPosition, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
+import type { Data, ViewRectVertexes, CoreEventMap, ElementPosition, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
 import type {
  Point,
  PointSize,
@@ -61,8 +61,6 @@ import {
  keySelectedElementListVertexes,
  keySelectedElementController,
  keySelectedElementPosition,
- keySelectedReferenceXLines,
- keySelectedReferenceYLines,
  keyIsMoving,
  keyEnableSelectInGroup,
  keyEnableSnapToGrid,
@@ -175,8 +173,6 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  sharer.setSharedStorage(keySelectedElementListVertexes, null);
  sharer.setSharedStorage(keySelectedElementController, null);
  sharer.setSharedStorage(keySelectedElementPosition, []);
- sharer.setSharedStorage(keySelectedReferenceXLines, []);
- sharer.setSharedStorage(keySelectedReferenceYLines, []);
  sharer.setSharedStorage(keyIsMoving, null);
  sharer.setSharedStorage(keyEnableSelectInGroup, null);
  };
@@ -430,8 +426,6 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  },
 
  pointMove: (e: PointWatcherEvent) => {
- sharer.setSharedStorage(keySelectedReferenceXLines, []);
- sharer.setSharedStorage(keySelectedReferenceYLines, []);
  sharer.setSharedStorage(keyIsMoving, true);
  const data = sharer.getActiveStorage('data');
  const elems = getActiveElements();
@@ -470,8 +464,6 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
  totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
  }
- sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
- sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
  }
  } catch (err) {
  // eslint-disable-next-line no-console
@@ -518,10 +510,6 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  });
  }
  });
- // calculator.updateVisiableStatus({
- // viewSizeInfo,
- // viewScaleInfo
- // });
 
  sharer.setActiveStorage('data', data);
  }
@@ -613,10 +601,10 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
 
  pointEnd(e: PointWatcherEvent) {
  inBusyMode = null;
- sharer.setSharedStorage(keySelectedReferenceXLines, []);
- sharer.setSharedStorage(keySelectedReferenceYLines, []);
  sharer.setSharedStorage(keyIsMoving, false);
  const data = sharer.getActiveStorage('data');
+ const selectedElements = sharer.getSharedStorage(keySelectedElementList);
+ const hoverElement = sharer.getSharedStorage(keyHoverElement);
  const resizeType = sharer.getSharedStorage(keyResizeType);
  const actionType = sharer.getSharedStorage(keyActionType);
  // const viewScaleInfo = sharer.getActiveViewScaleInfo();
@@ -684,7 +672,7 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  if (type === 'resize') {
  type = 'resizeElement';
  }
- eventHub.trigger(eventChange, { data, type });
+ eventHub.trigger(eventChange, { data, type, selectedElements, hoverElement });
  }
  viewer.drawFrame();
  };
@@ -787,13 +775,23 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  hideControllers: !!isMoving && actionType === 'drag'
  });
  if (actionType === 'drag') {
- const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
- const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
  if (enableSnapToGrid === true) {
- drawReferenceLines(overlayContext, {
- xLines,
- yLines
+ const referenceInfo = calcReferenceInfo(elem.uuid, {
+ calculator,
+ data: activeStore.data as Data,
+ groupQueue,
+ viewScaleInfo,
+ viewSizeInfo
  });
+ if (referenceInfo) {
+ const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+ if (offsetX === 0 || offsetY === 0) {
+ drawReferenceLines(overlayContext, {
+ xLines,
+ yLines
+ });
+ }
+ }
  }
  }
  }
@@ -821,13 +819,23 @@ export const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, Core
  hideControllers: !!isMoving && actionType === 'drag'
  });
  if (actionType === 'drag') {
- const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
- const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
  if (enableSnapToGrid === true) {
- drawReferenceLines(overlayContext, {
- xLines,
- yLines
+ const referenceInfo = calcReferenceInfo(elem.uuid, {
+ calculator,
+ data: activeStore.data as Data,
+ groupQueue,
+ viewScaleInfo,
+ viewSizeInfo
  });
+ if (referenceInfo) {
+ const { offsetX, offsetY, xLines, yLines } = referenceInfo;
+ if (offsetX === 0 || offsetY === 0) {
+ drawReferenceLines(overlayContext, {
+ xLines,
+ yLines
+ });
+ }
+ }
  }
  }
  } else if (actionType === 'area' && areaStart && areaEnd) {