designer

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" />