designer

packages/web/src/appobj/AppObjectCore.svelte

@@ -7,6 +7,7 @@
 
   export let icon;
   export let title;
+  export let data;
 
   export let isBold = false;
   export let isBusy = false;
@@ -21,7 +22,16 @@
   }
 </script>
 
-<div class="main" class:isBold draggable on:click use:contextMenu={menu}>
+<div
+  class="main"
+  class:isBold
+  draggable={true}
+  on:click
+  use:contextMenu={menu}
+  on:dragstart={e => {
+    e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
+  }}
+>
   {#if expandIcon}
     <span class="expand-icon" on:click|stopPropagation={handleExpand}>
       <FontIcon icon={expandIcon} />

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -103,6 +103,7 @@
 
 <AppObjectCore
   {...$$restProps}
+  {data}
   title={data.displayName || data.server}
   icon="img server"
   isBold={_.get($currentDatabase, 'connection._id') == data._id}

packages/web/src/designer/Designer.svelte

@@ -195,14 +195,79 @@
       }
     });
   };
+
+  const handleDrop = e => {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    e.preventDefault();
+    if (!data) return;
+    const rect = e.target.getBoundingClientRect();
+    var json = JSON.parse(data);
+    const { objectTypeField } = json;
+    if (objectTypeField != 'tables' && objectTypeField != 'views') return;
+    json.designerId = uuidv1();
+    json.left = e.clientX - rect.left;
+    json.top = e.clientY - rect.top;
+
+    onChange(current => {
+      const foreignKeys = _.compact([
+        ...(json.foreignKeys || []).map(fk => {
+          const tables = ((current || {}).tables || []).filter(
+            tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
+          );
+          if (tables.length == 1)
+            return {
+              ...fk,
+              sourceId: json.designerId,
+              targetId: tables[0].designerId,
+            };
+          return null;
+        }),
+        ..._.flatten(
+          ((current || {}).tables || []).map(tbl =>
+            (tbl.foreignKeys || []).map(fk => {
+              if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
+                return {
+                  ...fk,
+                  sourceId: tbl.designerId,
+                  targetId: json.designerId,
+                };
+              }
+              return null;
+            })
+          )
+        ),
+      ]);
+
+      return {
+        ...current,
+        tables: [...((current || {}).tables || []), json],
+        references:
+          foreignKeys.length == 1
+            ? [
+                ...((current || {}).references || []),
+                {
+                  designerId: uuidv1(),
+                  sourceId: foreignKeys[0].sourceId,
+                  targetId: foreignKeys[0].targetId,
+                  joinType: 'INNER JOIN',
+                  columns: foreignKeys[0].columns.map(col => ({
+                    source: col.columnName,
+                    target: col.refColumnName,
+                  })),
+                },
+              ]
+            : (current || {}).references,
+      };
+    });
+  };
 </script>
 
-<div class="wrapper" bind:this={domWrapper}>
+<div class="wrapper">
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}
 
-  <div class="canvas">
+  <div class="canvas" bind:this={domWrapper} on:dragover={e => e.preventDefault()} on:drop={handleDrop}>
     <!-- {#each references || [] as ref (ref.designerId)}
       <DesignerReference
         {changeToken}

packages/web/src/designer/DesignerTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
+  import moveDrag from '../utility/moveDrag';
   import ColumnLine from './ColumnLine.svelte';
 
   export let table;
@@ -27,13 +28,34 @@
   $: objectTypeField = table?.objectTypeField;
   $: left = table?.left;
   $: top = table?.top;
+
+  function handleMoveStart() {
+    movingPosition = { left, top };
+  }
+  function handleMove(x, y) {
+    movingPosition.left += x;
+    movingPosition.top += y;
+  }
+  function handleMoveEnd() {
+    onChangeTable({
+      ...table,
+      left: movingPosition.left,
+      top: movingPosition.top,
+    });
+    movingPosition = null;
+  }
 </script>
 
 <div
   class="wrapper"
   style={`left: ${movingPosition ? movingPosition.left : left}px; top:${movingPosition ? movingPosition.top : top}px`}
 >
-  <div class="header" class:isTable={objectTypeField == 'tables'} class:isView={objectTypeField == 'views'}>
+  <div
+    class="header"
+    class:isTable={objectTypeField == 'tables'}
+    class:isView={objectTypeField == 'views'}
+    use:moveDrag={[handleMoveStart, handleMove, handleMoveEnd]}
+  >
     <div>{alias || pureName}</div>
     <div class="close" on:click={() => onRemoveTable(table)}>
       <FontIcon icon="icon close" />

packages/web/src/utility/moveDrag.ts

@@ -0,0 +1,42 @@
+export default function moveDrag(node, [onStart, onMove, onEnd]) {
+  let startX = null;
+  let startY = null;
+
+  const handleMoveDown = e => {
+    startX = e.clientX;
+    startY = e.clientY;
+    document.addEventListener('mousemove', handleMoveMove, true);
+    document.addEventListener('mouseup', handleMoveEnd, true);
+    onStart();
+  };
+
+  const handleMoveMove = e => {
+    e.preventDefault();
+    const diffX = e.clientX - startX;
+    startX = e.clientX;
+    const diffY = e.clientY - startY;
+    startY = e.clientY;
+
+    onMove(diffX, diffY);
+  };
+  const handleMoveEnd = e => {
+    e.preventDefault();
+    startX = null;
+    startY = null;
+    document.removeEventListener('mousemove', handleMoveMove, true);
+    document.removeEventListener('mouseup', handleMoveEnd, true);
+    onEnd();
+  };
+
+  node.addEventListener('mousedown', handleMoveDown);
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleMoveDown);
+      if (startX != null || startY != null) {
+        document.removeEventListener('mousemove', handleMoveMove, true);
+        document.removeEventListener('mouseup', handleMoveEnd, true);
+      }
+    },
+  };
+}