diagram - move by click on table anywhere

packages/web/src/Screen.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div
-  class={`${$currentTheme} ${currentThemeType} root`}
+  class={`${$currentTheme} ${currentThemeType} root dbgate-screen`}
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >

packages/web/src/designer/ColumnLine.svelte

@@ -51,6 +51,7 @@
 
 <div
   class="line"
+  class:canSelectColumns={settings?.canSelectColumns}
   bind:this={domLine}
   draggable={!!settings?.allowCreateRefByDrag}
   on:dragstart={e => {
@@ -95,7 +96,7 @@
       ...column,
       designerId,
     })}
-  use:contextMenu={createMenu}
+  use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
 >
   {#if settings?.allowColumnOperations}
     <CheckboxField
@@ -139,13 +140,13 @@
 </div>
 
 <style>
-  .line:hover {
+  :global(.dbgate-screen) .line.canSelectColumns:hover {
     background: var(--theme-bg-1);
   }
-  .line.isDragSource {
+  :global(.dbgate-screen) .line.isDragSource {
     background: var(--theme-bg-gold);
   }
-  .line.isDragTarget {
+  :global(.dbgate-screen) .line.isDragTarget {
     background: var(--theme-bg-gold);
   }
 </style>

packages/web/src/designer/DesignerTable.svelte

@@ -107,16 +107,19 @@
 
 <div
   class="wrapper"
+  class:canSelectColumns={settings?.canSelectColumns}
   style={`left: ${movingPosition ? movingPosition.left : left}px; top:${movingPosition ? movingPosition.top : top}px`}
   bind:this={domWrapper}
   on:mousedown={() => onBringToFront(table)}
+  use:contextMenu={settings?.canSelectColumns ? '__no_menu' : createMenu}
+  use:moveDrag={settings?.canSelectColumns ? null : [handleMoveStart, handleMove, handleMoveEnd]}
 >
   <div
     class="header"
     class:isTable={objectTypeField == 'tables'}
     class:isView={objectTypeField == 'views'}
-    use:moveDrag={[handleMoveStart, handleMove, handleMoveEnd]}
+    use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null}
-    use:contextMenu={createMenu}
+    use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
   >
     <div>{alias || pureName}</div>
     {#if settings?.showTableCloseButton}
@@ -152,15 +155,21 @@
     border: 1px solid var(--theme-border);
   }
 
+  :global(.dbgate-screen) .wrapper:not(.canSelectColumns) {
+    cursor: pointer;
+  }
+
   .header {
     font-weight: bold;
     text-align: center;
     padding: 2px;
     border-bottom: 1px solid var(--theme-border);
-    cursor: pointer;
     display: flex;
     justify-content: space-between;
   }
+  :global(.dbgate-screen) .header {
+    cursor: pointer;
+  }
   .header.isTable {
     background: var(--theme-bg-blue);
   }

packages/web/src/designer/DiagramDesigner.svelte

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

packages/web/src/designer/QueryDesigner.svelte

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

packages/web/src/utility/contextMenu.ts

@@ -9,7 +9,7 @@ export function registerMenu(...items) {
   setContext('componentContextMenu', [parentMenu, ...items]);
 }
 
-export default function contextMenu(node, items = []) {
+export default function contextMenu(node, items: any = []) {
   const handleContextMenu = async e => {
     e.preventDefault();
     e.stopPropagation();
@@ -23,6 +23,8 @@ export default function contextMenu(node, items = []) {
     }
   };
 
+  if (items == '__no_menu') return;
+
   node.addEventListener('contextmenu', handleContextMenu);
 
   return {

packages/web/src/utility/moveDrag.ts

@@ -1,4 +1,7 @@
-export default function moveDrag(node, [onStart, onMove, onEnd]) {
+export default function moveDrag(node, dragEvents) {
+  if (!dragEvents) return;
+  
+  const [onStart, onMove, onEnd] = dragEvents;
   let startX = null;
   let startY = null;