designer: move group of tables

packages/web/src/designer/Designer.svelte

@@ -503,6 +503,45 @@
     updateFromDbInfo();
   };
 
+  function forEachSelected(op: Function) {
+    for (const tbl of _.values(tableRefs)) {
+      const table = tbl as any;
+      if (!table.isSelected()) continue;
+      op(table);
+    }
+  }
+
+  const tableMoveStart = () => {
+    forEachSelected(t => t.moveStart());
+  };
+  const tableMove = (x, y) => {
+    forEachSelected(t => t.move(x, y));
+    tick().then(recomputeReferencePositions);
+  };
+  const tableMoveEnd = () => {
+    const moves = {};
+    forEachSelected(t => {
+      moves[t.getDesignerId()] = t.moveEnd();
+    });
+    callChange(current => {
+      return {
+        ...current,
+        tables: (current?.tables || []).map(table => {
+          const position = moves[table.designerId];
+          return position
+            ? {
+                ...table,
+                left: position.left,
+                top: position.top,
+              }
+            : table;
+        }),
+      };
+    });
+
+    tick().then(recomputeReferencePositions);
+  };
+
   function recomputeReferencePositions() {
     for (const ref of Object.values(referenceRefs) as any[]) {
       if (ref) ref.recomputePosition();
@@ -650,6 +689,9 @@
         onBringToFront={bringToFront}
         onSelectTable={selectTable}
         onRemoveTable={removeTable}
+        onMoveStart={tableMoveStart}
+        onMove={tableMove}
+        onMoveEnd={tableMoveEnd}
         {domCanvas}
         designer={value}
         {sourceDragColumn$}

packages/web/src/designer/DesignerTable.svelte

@@ -20,6 +20,10 @@
   export let onSelectColumn;
   export let onChangeColumn;
 
+  export let onMoveStart;
+  export let onMove;
+  export let onMoveEnd;
+
   // export let sourceDragColumn;
   // export let setSourceDragColumn;
   // export let targetDragColumn;
@@ -48,22 +52,56 @@
   $: left = table?.left;
   $: top = table?.top;
 
-  function handleMoveStart() {
+  export function isSelected() {
+    return table?.isSelectedTable;
+  }
+
+  export function getDesignerId() {
+    return designerId;
+  }
+
+  export function moveStart() {
     movingPosition = { left, top };
   }
-  function handleMove(x, y) {
+
+  export function move(x, y) {
     movingPosition.left += x;
     movingPosition.top += y;
-    tick().then(onMoveReferences);
+  }
+
+  export function moveEnd() {
+    const res = movingPosition;
+    movingPosition = null;
+    return res;
+  }
+
+  function handleMoveStart() {
+    if (settings?.canSelectTables) {
+      onMoveStart();
+    } else {
+      moveStart();
+    }
+  }
+  function handleMove(x, y) {
+    if (settings?.canSelectTables) {
+      onMove(x, y);
+    } else {
+      move(x, y);
+      tick().then(onMoveReferences);
+    }
   }
   function handleMoveEnd() {
-    onChangeTable({
-      ...table,
-      left: movingPosition.left,
-      top: movingPosition.top,
-    });
-    movingPosition = null;
-    tick().then(onMoveReferences);
+    if (settings?.canSelectTables) {
+      onMoveEnd();
+    } else {
+      const position = moveEnd();
+      onChangeTable({
+        ...table,
+        left: position.left,
+        top: position.top,
+      });
+      tick().then(onMoveReferences);
+    }
   }
 
   export function getDomTable() {
@@ -157,10 +195,10 @@
     {/each}
   </div>
   {#if table?.isSelectedTable}
-     <div class='selection-marker lt' />
-     <div class='selection-marker rt' />
-     <div class='selection-marker lb' />
-     <div class='selection-marker rb' />
+    <div class="selection-marker lt" />
+    <div class="selection-marker rt" />
+    <div class="selection-marker lb" />
+    <div class="selection-marker rb" />
   {/if}
 </div>