diff --git a/src/composables/states/appCanvas/movingShapeLayoutHandler.ts b/src/composables/states/appCanvas/movingShapeLayoutHandler.ts index ce145a88..cd3e2628 100644 --- 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 { 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(shapeComposite, shapeAtPoint.id, "align_box"); diff --git a/src/composables/states/appCanvas/movingShapeOnLineHandler.ts b/src/composables/states/appCanvas/movingShapeOnLineHandler.ts index cc35e963..d8a13ef2 100644 --- 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 { 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 index d5f61e03..7f505424 100644 --- 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));