feat: allows translation of rectangles

src/interaction/modes/DragItems.ts

@@ -1,4 +1,4 @@
-import { hasMovedTile } from 'src/utils';
+import { CoordsUtils, hasMovedTile } from 'src/utils';
 import { ModeActions } from 'src/types';
 
 export const DragItems: ModeActions = {
@@ -35,6 +35,8 @@ export const DragItems: ModeActions = {
         scene.actions.updateNode(item.id, {
           position: uiState.mouse.position.tile
         });
+      } else if (item.type === 'GROUP' && uiState.mouse.delta?.tile) {
+        scene.actions.translateGroup(item.id, uiState.mouse.delta.tile);
       }
     });
 

src/stores/sceneStore.tsx

@@ -9,7 +9,10 @@ import {
   groupInputToGroup,
   connectorInputToConnector,
   sceneInputtoScene,
-  nodeInputToNode
+  nodeInputToNode,
+  getBoundingBox,
+  isWithinBounds,
+  CoordsUtils
 } from 'src/utils';
 
 const initialState = () => {
@@ -86,6 +89,26 @@ const initialState = () => {
           set({ connectors: newScene.connectors });
         },
 
+        translateGroup: (id, delta) => {
+          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)
+                });
+              }
+            });
+          });
+
+          set({ groups: newScene.groups });
+        },
+
         createConnector: (connector) => {
           const newScene = produce(get(), (draftState) => {
             draftState.connectors.push(

src/types/scene.ts

@@ -71,6 +71,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;
   createNode: (node: NodeInput) => void;
   createConnector: (connector: ConnectorInput) => void;
   createGroup: (group: GroupInput) => void;