refactor: Avoid seeking index shape of moving ones on every event

miyanokomiya · Nov 9, 2024 · df2bcbf · df2bcbf
1 parent d7af510
commit df2bcbf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/src/composables/states/appCanvas/movingShapeLayoutHandler.ts b/src/composables/states/appCanvas/movingShapeLayoutHandler.ts
@@ -19,6 +19,7 @@ export function handlePointerMoveOnLayout(
   ctx: AppCanvasStateContext,
   event: PointerMoveEvent,
   movingIds: string[],
+  indexId: string,
   option?: { boundingBox?: BoundingBox },
 ): TransitionValue<AppCanvasStateContext> {
   if (event.data.ctrl) return;
@@ -33,7 +34,7 @@ export function handlePointerMoveOnLayout(
       getState: () => newBoardCardMovingState({ boardId }),
     };
   } else if (canAlign(ctx)) {
-    const scope = shapeComposite.getSelectionScope(shapeComposite.shapeMap[movingIds[0]]);
+    const scope = shapeComposite.getSelectionScope(shapeComposite.shapeMap[indexId]);
     const shapeAtPoint = findBetterShapeAt(shapeComposite, event.data.current, scope, movingIds);
     if (shapeAtPoint) {
       const alignBoxShape = getClosestShapeByType<AlignBoxShape>(shapeComposite, shapeAtPoint.id, "align_box");

diff --git a/src/composables/states/appCanvas/movingShapeOnLineHandler.ts b/src/composables/states/appCanvas/movingShapeOnLineHandler.ts
@@ -3,29 +3,21 @@ import { getConnections, isLineShape } from "../../../shapes/line";
 import { getAttachmentAnchorPoint } from "../../lineAttachmentHandler";
 import { PointerMoveEvent, TransitionValue } from "../core";
 import { AppCanvasStateContext } from "./core";
-import { newShapeComposite } from "../../shapeComposite";
 import { Shape } from "../../../models";
 
 export function handlePointerMoveOnLine(
   ctx: AppCanvasStateContext,
   event: PointerMoveEvent,
   movingIds: string[],
+  indexId: string,
 ): TransitionValue<AppCanvasStateContext> {
   if (event.data.ctrl || movingIds.length === 0) return;
 
   const shapeComposite = ctx.getShapeComposite();
-  const movingIdSet = new Set(movingIds);
-  const subShapeComposite = newShapeComposite({
-    shapes: shapeComposite.shapes.filter((s) => movingIdSet.has(s.id)),
-    getStruct: shapeComposite.getShapeStruct,
-  });
-
-  const movingShapeSub = subShapeComposite.findShapeAt(event.data.start, undefined, [], false, ctx.getScale());
-  if (!movingShapeSub) return;
-
-  const movingShape = shapeComposite.shapeMap[movingShapeSub.id];
+  const movingShape = shapeComposite.shapeMap[indexId];
   if (!shapeComposite.canAttach(movingShape)) return;
 
+  const subShapeComposite = shapeComposite.getSubShapeComposite([movingShape.id], shapeComposite.tmpShapeMap);
   const anchorP = getAttachmentAnchorPoint(subShapeComposite, movingShape);
   const diff = sub(event.data.current, event.data.start);
   const movedAnchorP = add(anchorP, diff);

diff --git a/src/composables/states/appCanvas/movingShapeState.ts b/src/composables/states/appCanvas/movingShapeState.ts
@@ -34,16 +34,24 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
   let targetIds: string[];
   let connectionRenderer: ConnectionRenderer;
   let beforeMove = true;
+  let indexShapeId: string | undefined;
 
   return {
     getLabel: () => "MovingShape",
     onStart: (ctx) => {
       const shapeComposite = ctx.getShapeComposite();
       const shapeMap = shapeComposite.shapeMap;
-      const targets = ctx.getShapeComposite().getAllTransformTargets(Object.keys(ctx.getSelectedShapeIdMap()));
-      if (targets.length === 0) return ctx.states.newSelectionHubState;
+      const selectedIds = Object.keys(ctx.getSelectedShapeIdMap());
+
+      const subShapeComposite = shapeComposite.getSubShapeComposite(selectedIds, shapeComposite.tmpShapeMap);
+      const movingShapeSub = subShapeComposite.findShapeAt(ctx.getCursorPoint(), undefined, [], false, ctx.getScale());
+      if (movingShapeSub) {
+        indexShapeId = movingShapeSub.id;
+      }
+
+      targetIds = subShapeComposite.shapes.map((s) => s.id);
+      if (targetIds.length === 0) return ctx.states.newSelectionHubState;
 
-      targetIds = targets.map((s) => s.id);
       const targetIdSet = new Set(targetIds);
 
       // Line labels should be moved via dedicated state
@@ -98,11 +106,13 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
       switch (event.type) {
         case "pointermove": {
           beforeMove = false;
-          const onLayoutResult = handlePointerMoveOnLayout(ctx, event, targetIds, option);
-          if (onLayoutResult) return onLayoutResult;
+          if (indexShapeId) {
+            const onLayoutResult = handlePointerMoveOnLayout(ctx, event, targetIds, indexShapeId, option);
+            if (onLayoutResult) return onLayoutResult;
 
-          const onLineResult = handlePointerMoveOnLine(ctx, event, targetIds);
-          if (onLineResult) return onLineResult;
+            const onLineResult = handlePointerMoveOnLine(ctx, event, targetIds, indexShapeId);
+            if (onLineResult) return onLineResult;
+          }
 
           const d = sub(event.data.current, event.data.start);
           snappingResult = event.data.ctrl ? undefined : shapeSnapping.test(moveRect(movingRect, d));