designer - selecting tables

packages/web/src/designer/Designer.svelte

@@ -183,6 +183,20 @@
     );
   };
 
+  const selectTable = (table, addToSelection) => {
+    callChange(
+      current => ({
+        ...current,
+        tables: (current.tables || []).map(x =>
+          x.designerId == table.designerId
+            ? { ...x, isSelectedTable: true }
+            : { ...x, isSelectedTable: addToSelection ? x.isSelectedTable : false }
+        ),
+      }),
+      true
+    );
+  };
+
   const removeTable = table => {
     callChange(current => ({
       ...current,
@@ -587,6 +601,17 @@
     on:dragover={e => e.preventDefault()}
     on:drop={handleDrop}
     style={`width:${canvasWidth}px;height:${canvasHeight}px;`}
+    on:mousedown={e => {
+      if (e.button == 0 && settings?.canSelectTables) {
+        callChange(
+          current => ({
+            ...current,
+            tables: (current.tables || []).map(x => ({ ...x, isSelectedTable: false })),
+          }),
+          true
+        );
+      }
+    }}
   >
     {#each references || [] as ref (ref.designerId)}
       <svelte:component
@@ -623,6 +648,7 @@
         {table}
         onChangeTable={changeTable}
         onBringToFront={bringToFront}
+        onSelectTable={selectTable}
         onRemoveTable={removeTable}
         {domCanvas}
         designer={value}

packages/web/src/designer/DesignerTable.svelte

@@ -12,6 +12,7 @@
   export let table;
   export let onChangeTable;
   export let onBringToFront;
+  export let onSelectTable;
   export let onRemoveTable;
   export let onAddAllReferences;
   export let onCreateReference;
@@ -108,9 +109,18 @@
 <div
   class="wrapper"
   class:canSelectColumns={settings?.canSelectColumns}
+  class:isSelectedTable={table?.isSelectedTable}
   style={`left: ${movingPosition ? movingPosition.left : left}px; top:${movingPosition ? movingPosition.top : top}px`}
   bind:this={domWrapper}
-  on:mousedown={() => onBringToFront(table)}
+  on:mousedown={e => {
+    if (e.button == 0) {
+      e.stopPropagation();
+      onBringToFront(table);
+      if (settings?.canSelectTables && !table?.isSelectedTable) {
+        onSelectTable(table, e.ctrlKey);
+      }
+    }
+  }}
   use:contextMenu={settings?.canSelectColumns ? '__no_menu' : createMenu}
   use:moveDrag={settings?.canSelectColumns ? null : [handleMoveStart, handleMove, handleMoveEnd]}
 >
@@ -146,6 +156,12 @@
       />
     {/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' />
+  {/if}
 </div>
 
 <style>
@@ -154,7 +170,35 @@
     background-color: var(--theme-bg-0);
     border: 1px solid var(--theme-border);
   }
-
+  /* :global(.dbgate-screen) .isSelectedTable {
+    border: 3px solid var(--theme-border);
+  } */
+  .selection-marker {
+    display: none;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--theme-font-1);
+  }
+  .selection-marker.lt {
+    left: -3px;
+    top: -3px;
+  }
+  .selection-marker.rt {
+    right: -3px;
+    top: -3px;
+  }
+  .selection-marker.lb {
+    left: -3px;
+    bottom: -3px;
+  }
+  .selection-marker.rb {
+    right: -3px;
+    bottom: -3px;
+  }
+  :global(.dbgate-screen) .selection-marker {
+    display: block;
+  }
   :global(.dbgate-screen) .wrapper:not(.canSelectColumns) {
     cursor: pointer;
   }
@@ -170,6 +214,7 @@
   :global(.dbgate-screen) .header {
     cursor: pointer;
   }
+
   .header.isTable {
     background: var(--theme-bg-blue);
   }

packages/web/src/designer/DiagramDesigner.svelte

@@ -17,6 +17,7 @@
     canArrange: true,
     canExport: true,
     canSelectColumns: false,
+    canSelectTables: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -17,6 +17,7 @@
     canArrange: false,
     canExport: false,
     canSelectColumns: true,
+    canSelectTables: false,
   }}
   referenceComponent={QueryDesignerReference}
 />