drag & drop references

packages/web/src/designer/ColumnLine.svelte

@@ -11,13 +11,55 @@
   export let designerId;
   export let onChangeColumn;
   export let domLine;
+  export let sourceDragColumn$;
+  export let targetDragColumn$;
+  export let onCreateReference;
 
   $: designerColumn = (designer.columns || []).find(
     x => x.designerId == designerId && x.columnName == column.columnName
   );
 </script>
 
-<div bind:this={domLine}>
+<div
+  class="line"
+  bind:this={domLine}
+  draggable={true}
+  on:dragstart={e => {
+    const dragData = {
+      ...column,
+      designerId,
+    };
+    sourceDragColumn$.set(dragData);
+    e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
+  }}
+  on:dragend={e => {
+    sourceDragColumn$.set(null);
+    targetDragColumn$.set(null);
+  }}
+  on:dragover={e => {
+    if ($sourceDragColumn$) {
+      e.preventDefault();
+      targetDragColumn$.set({
+        ...column,
+        designerId,
+      });
+    }
+  }}
+  on:drop={e => {
+    var data = e.dataTransfer.getData('designer_column_drag_data');
+    e.preventDefault();
+    if (!data) return;
+    onCreateReference($sourceDragColumn$, $targetDragColumn$);
+    sourceDragColumn$.set(null);
+    targetDragColumn$.set(null);
+  }}
+  class:isDragSource={$sourceDragColumn$ &&
+    $sourceDragColumn$.designerId == designerId &&
+    $sourceDragColumn$.columnName == column.columnName}
+  class:isDragTarget={$targetDragColumn$ &&
+    $targetDragColumn$.designerId == designerId &&
+    $targetDragColumn$.columnName == column.columnName}
+>
   <CheckboxField
     checked={!!(designer.columns || []).find(
       x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
@@ -56,3 +98,15 @@
     <FontIcon icon="img group" />
   {/if}
 </div>
+
+<style>
+  .line:hover {
+    background: var(--theme-bg-1);
+  }
+  .line.isDragSource {
+    background: var(--theme-bg-gold);
+  }
+  .line.isDragTarget {
+    background: var(--theme-bg-gold);
+  }
+</style>

packages/web/src/designer/Designer.svelte

@@ -10,6 +10,8 @@
   import _ from 'lodash';
   import createRef from '../utility/createRef';
   import DesignerReference from './DesignerReference.svelte';
+  import { writable } from 'svelte/store';
+  import { tick } from 'svelte';
 
   export let value;
   export let onChange;
@@ -18,6 +20,9 @@
 
   let domCanvas;
 
+  const sourceDragColumn$ = writable(null);
+  const targetDragColumn$ = writable(null);
+
   $: tables = value?.tables as any[];
   $: references = value?.references as any[];
 
@@ -40,15 +45,20 @@
     return tables;
   }
 
+  function callChange(changeFunc, skipUndoChain = undefined) {
+    onChange(changeFunc, skipUndoChain);
+    tick().then(recomputeReferencePositions);
+  }
+
   const changeTable = table => {
-    onChange(current => ({
+    callChange(current => ({
       ...current,
       tables: fixPositions((current.tables || []).map(x => (x.designerId == table.designerId ? table : x))),
     }));
   };
 
   const bringToFront = table => {
-    onChange(
+    callChange(
       current => ({
         ...current,
         tables: [...(current.tables || []).filter(x => x.designerId != table.designerId), table],
@@ -58,7 +68,7 @@
   };
 
   const removeTable = table => {
-    onChange(current => ({
+    callChange(current => ({
       ...current,
       tables: (current.tables || []).filter(x => x.designerId != table.designerId),
       references: (current.references || []).filter(
@@ -69,21 +79,21 @@
   };
 
   const changeReference = ref => {
-    onChange(current => ({
+    callChange(current => ({
       ...current,
       references: (current.references || []).map(x => (x.designerId == ref.designerId ? ref : x)),
     }));
   };
 
   const removeReference = ref => {
-    onChange(current => ({
+    callChange(current => ({
       ...current,
       references: (current.references || []).filter(x => x.designerId != ref.designerId),
     }));
   };
 
   const handleCreateReference = (source, target) => {
-    onChange(current => {
+    callChange(current => {
       const existingReference = (current.references || []).find(
         x =>
           (x.sourceId == source.designerId && x.targetId == target.designerId) ||
@@ -139,7 +149,7 @@
       schemaName: foreignKey.refSchemaName,
     });
     const newTableDesignerId = uuidv1();
-    onChange(current => {
+    callChange(current => {
       const fromTable = (current.tables || []).find(x => x.designerId == designerId);
       if (!fromTable) return;
       return {
@@ -171,7 +181,7 @@
   };
 
   const handleSelectColumn = column => {
-    onChange(
+    callChange(
       current => ({
         ...current,
         columns: (current.columns || []).find(
@@ -185,7 +195,7 @@
   };
 
   const handleChangeColumn = (column, changeFunc) => {
-    onChange(current => {
+    callChange(current => {
       const currentColumns = (current || {}).columns || [];
       const existing = currentColumns.find(x => x.designerId == column.designerId && x.columnName == column.columnName);
       if (existing) {
@@ -214,7 +224,7 @@
     json.left = e.clientX - rect.left;
     json.top = e.clientY - rect.top;
 
-    onChange(current => {
+    callChange(current => {
       const foreignKeys = _.compact([
         ...(json.foreignKeys || []).map(fk => {
           const tables = ((current || {}).tables || []).filter(
@@ -267,9 +277,9 @@
     });
   };
 
-  function handleMoveReferences() {
-    for(const ref of Object.values(referenceRefs) as any[]) {
-      ref.recomputePosition();
+  function recomputeReferencePositions() {
+    for (const ref of Object.values(referenceRefs) as any[]) {
+      if (ref) ref.recomputePosition();
     }
   }
 </script>
@@ -308,13 +318,15 @@
         onSelectColumn={handleSelectColumn}
         onChangeColumn={handleChangeColumn}
         onAddReferenceByColumn={handleAddReferenceByColumn}
-        onMoveReferences={handleMoveReferences}
+        onMoveReferences={recomputeReferencePositions}
         {table}
         onChangeTable={changeTable}
         onBringToFront={bringToFront}
         onRemoveTable={removeTable}
         {domCanvas}
         designer={value}
+        {sourceDragColumn$}
+        {targetDragColumn$}
       />
     {/each}
   </div>

packages/web/src/designer/DesignerReference.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import _ from 'lodash';
+  import { isConnectedByReference } from './designerTools';
+  import contextMenu from '../utility/contextMenu';
 
   export let reference;
   export let onRemoveReference;
@@ -16,8 +18,6 @@
   const buswi = 10;
   const extwi = 25;
 
-  // const lineStyle = { fill: 'none', stroke: 'black', strokeWidth: 2 };
-
   export function recomputePosition() {
     const { designerId, sourceId, targetId, columns, joinType } = reference;
 
@@ -60,6 +60,35 @@
     domTables;
     recomputePosition();
   }
+
+  function createMenu() {
+    const isConnected = isConnectedByReference(
+      designer,
+      { designerId: reference?.sourceId },
+      { designerId: reference?.targetId },
+      reference
+    );
+    const setJoinType = joinType => {
+      onChangeReference({
+        ...reference,
+        joinType,
+      });
+    };
+
+    return [
+      { text: 'Remove', onClick: () => onRemoveReference(reference) },
+      !isConnected && [
+        { divider: true },
+        { onClick: () => setJoinType('INNER JOIN'), text: 'Set INNER JOIN' },
+        { onClick: () => setJoinType('LEFT JOIN'), text: 'Set LEFT JOIN' },
+        { onClick: () => setJoinType('RIGHT JOIN'), text: 'Set RIGHT JOIN' },
+        { onClick: () => setJoinType('FULL OUTER JOIN'), text: 'Set FULL OUTER JOIN' },
+        { onClick: () => setJoinType('CROSS JOIN'), text: 'Set CROSS JOIN' },
+        { onClick: () => setJoinType('WHERE EXISTS'), text: 'Set WHERE EXISTS' },
+        { onClick: () => setJoinType('WHERE NOT EXISTS'), text: 'Set WHERE NOT EXISTS' },
+      ],
+    ];
+  }
 </script>
 
 {#if src && dst && minpos}
@@ -88,7 +117,20 @@
 `}
       />
     {/each}
-  </svg>>
+  </svg>
+
+  <div
+    use:contextMenu={createMenu}
+    class="wrapper"
+    style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
+            top: ${(src.y + dst.y) / 2 - 16}px`}
+  >
+    <div class="text">
+      {_.snakeCase(reference?.joinType || 'CROSS JOIN')
+        .replace('_', '\xa0')
+        .replace('_', '\xa0')}
+    </div>
+  </div>
 {/if}
 
 <style>
@@ -106,4 +148,25 @@
     stroke: var(--theme-bg-4);
     stroke-width: 2;
   }
+
+  .wrapper {
+    position: absolute;
+    border: 1px solid var(--theme-border);
+    background-color: var(--theme-bg-1);
+    z-index: 900;
+    border-radius: 10px;
+    width: 32px;
+    height: 32px;
+  }
+
+  .text {
+    position: relative;
+    float: left;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 900;
+    white-space: nowrap;
+    background-color: var(--theme-bg-1);
+  }
 </style>

packages/web/src/designer/DesignerTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { tick } from 'svelte';
+  import { tick } from 'svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
   import moveDrag from '../utility/moveDrag';
@@ -14,11 +14,16 @@ import { tick } from 'svelte';
   export let onAddReferenceByColumn;
   export let onSelectColumn;
   export let onChangeColumn;
-  export let sourceDragColumn;
-  export let setSourceDragColumn;
-  export let targetDragColumn;
-  export let setTargetDragColumn;
+
+  // export let sourceDragColumn;
+  // export let setSourceDragColumn;
+  // export let targetDragColumn;
+  // export let setTargetDragColumn;
   // export let onChangeDomTable;
+
+  export let sourceDragColumn$;
+  export let targetDragColumn$;
+
   export let domCanvas;
   export let domTablesRef;
   export let designer;
@@ -86,6 +91,9 @@ import { tick } from 'svelte';
         {designer}
         {designerId}
         {onChangeColumn}
+        {sourceDragColumn$}
+        {targetDragColumn$}
+        {onCreateReference}
         bind:domLine={columnRefs[column.columnName]}
       />
     {/each}

packages/web/src/utility/moveDrag.ts

@@ -3,6 +3,7 @@ export default function moveDrag(node, [onStart, onMove, onEnd]) {
   let startY = null;
 
   const handleMoveDown = e => {
+    if (e.button != 0) return;
     startX = e.clientX;
     startY = e.clientY;
     document.addEventListener('mousemove', handleMoveMove, true);