fix: issues with manipulating stale groups when dragging

src/interaction/modes/DragItems.ts

@@ -1,4 +1,4 @@
-import { CoordsUtils, hasMovedTile } from 'src/utils';
+import { hasMovedTile, CoordsUtils, getItemById } from 'src/utils';
 import { ModeActions } from 'src/types';
 
 export const DragItems: ModeActions = {
@@ -36,7 +36,20 @@ export const DragItems: ModeActions = {
           position: uiState.mouse.position.tile
         });
       } else if (item.type === 'GROUP' && uiState.mouse.delta?.tile) {
-        scene.actions.translateGroup(item.id, uiState.mouse.delta.tile);
+        const { item: group } = getItemById(scene.groups, item.id);
+        const newFrom = CoordsUtils.add(group.from, uiState.mouse.delta.tile);
+        const newTo = CoordsUtils.add(group.to, uiState.mouse.delta.tile);
+        // const bounds = getBoundingBox([group.from, group.to]);
+
+        // scene.nodes.forEach((node) => {
+        //   if (isWithinBounds(node.position, bounds)) {
+        //     draftState.actions.updateNode(node.id, {
+        //       position: CoordsUtils.add(node.position, delta)
+        //     });
+        //   }
+        // });
+
+        scene.actions.updateGroup(item.id, { from: newFrom, to: newTo });
       }
     });
 

src/stores/sceneStore.tsx

@@ -9,10 +9,7 @@ import {
   groupInputToGroup,
   connectorInputToConnector,
   sceneInputtoScene,
-  nodeInputToNode,
-  getBoundingBox,
-  isWithinBounds,
-  CoordsUtils
+  nodeInputToNode
 } from 'src/utils';
 
 const initialState = () => {
@@ -89,21 +86,14 @@ const initialState = () => {
           set({ connectors: newScene.connectors });
         },
 
-        translateGroup: (id, delta) => {
+        updateGroup: (id, updates) => {
           const newScene = produce(get(), (draftState) => {
             const { item: group, index } = getItemById(draftState.groups, id);
 
-            draftState.groups[index].from = CoordsUtils.add(group.from, delta);
-            draftState.groups[index].to = CoordsUtils.add(group.to, delta);
-
-            const bounds = getBoundingBox([group.from, group.to]);
-            draftState.nodes.forEach((node) => {
-              if (isWithinBounds(node.position, bounds)) {
-                draftState.actions.updateNode(node.id, {
-                  position: CoordsUtils.add(node.position, delta)
-                });
-              }
-            });
+            draftState.groups[index] = {
+              ...group,
+              ...updates
+            };
           });
 
           set({ groups: newScene.groups });

src/types/scene.ts

@@ -63,6 +63,10 @@ export interface Group {
 }
 
 export type SceneItem = Node | Connector | Group;
+export type SceneItemReference = {
+  type: SceneItemTypeEnum;
+  id: string;
+};
 
 export type Icon = IconInput;
 
@@ -71,7 +75,7 @@ export interface SceneActions {
   updateScene: (scene: Scene) => void;
   updateNode: (id: string, updates: Partial<Node>) => void;
   updateConnector: (id: string, updates: Partial<Connector>) => void;
-  translateGroup: (id: string, delta: Coords) => void;
+  updateGroup: (id: string, updates: Partial<Group>) => void;
   createNode: (node: NodeInput) => void;
   createConnector: (connector: ConnectorInput) => void;
   createGroup: (group: GroupInput) => void;

src/types/ui.ts

@@ -1,5 +1,5 @@
 import { Coords, Size } from './common';
-import { SceneItem, Connector } from './scene';
+import { SceneItem, Connector, SceneItemReference } from './scene';
 import { IconInput } from './inputs';
 
 export enum ItemControlsTypeEnum {
@@ -45,7 +45,7 @@ export interface InteractionsDisabled {
 export interface CursorMode {
   type: 'CURSOR';
   showCursor: boolean;
-  mousedownItem: SceneItem | null;
+  mousedownItem: SceneItemReference | null;
 }
 
 export interface PanMode {
@@ -59,7 +59,7 @@ export interface LassoMode {
   selection: {
     startTile: Coords;
     endTile: Coords;
-    items: SceneItem[];
+    items: SceneItemReference[];
   };
   isDragging: boolean;
 }
@@ -67,7 +67,7 @@ export interface LassoMode {
 export interface DragItemsMode {
   type: 'DRAG_ITEMS';
   showCursor: boolean;
-  items: SceneItem[];
+  items: SceneItemReference[];
 }
 
 export interface PlaceElementMode {