reference component split

2026-04-30 15:03:57 +00:00 · 2022-01-06 09:24:32 +01:00
parent 00f1204bf0
commit 2cff55b12e
5 changed files with 166 additions and 31 deletions
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -9,7 +9,6 @@
  import cleanupDesignColumns from './cleanupDesignColumns';
  import _ from 'lodash';
  import createRef from '../utility/createRef';
-  import DesignerReference from './DesignerReference.svelte';
  import { writable } from 'svelte/store';
  import { tick } from 'svelte';
  import contextMenu from '../utility/contextMenu';
@@ -21,6 +20,7 @@
  export let database;
  export let menu;
  export let settings;
+  export let referenceComponent;

  let domCanvas;

@@ -272,7 +272,7 @@
          if (dst) newTables.push(dst);
        }
      }
-      
+
      return {
        ...current,
        tables: [
@@ -418,7 +418,7 @@

  <div class="canvas" bind:this={domCanvas} on:dragover={e => e.preventDefault()} on:drop={handleDrop}>
    {#each references || [] as ref (ref.designerId)}
-      <DesignerReference
+      <svelte:component this={referenceComponent}
        bind:this={referenceRefs[ref.designerId]}
        {domTables}
        reference={ref}
--- a/packages/web/src/designer/DiagramDesigner.svelte
+++ b/packages/web/src/designer/DiagramDesigner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
  import Designer from './Designer.svelte';
+  import DiagramDesignerReference from './DiagramDesignerReference.svelte';
 </script>

 <Designer
@@ -11,9 +12,8 @@
    allowTableAlias: false,
    updateFromDbInfo: true,
    useDatabaseReferences: true,
-    showJoinType: false,
-    showReferenceArrow: true,
    allowScrollColumns: false,
    allowAddAllReferences: true,
  }}
+  referenceComponent={DiagramDesignerReference}
 />
--- a/packages/web/src/designer/DiagramDesignerReference.svelte
+++ b/packages/web/src/designer/DiagramDesignerReference.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { isConnectedByReference } from './designerTools';
+  import contextMenu from '../utility/contextMenu';
+
+  export let reference;
+  export let onRemoveReference;
+  export let onChangeReference;
+  export let designer;
+  export let domTables;
+  export let settings;
+
+  let src = null;
+  let dst = null;
+
+  let minpos;
+  let columnsY = [];
+
+  const buswi = 10;
+  const extwi = 25;
+  const arwi = 12;
+  const arhi = 12;
+  const arpad = 3;
+
+  export function recomputePosition() {
+    const { designerId, sourceId, targetId, columns, joinType } = reference;
+
+    /** @type {DomTableRef} */
+    const sourceTable = domTables[sourceId];
+    /** @type {DomTableRef} */
+    const targetTable = domTables[targetId];
+    if (!sourceTable || !targetTable) return null;
+    const sourceRect = sourceTable.getRect();
+    const targetRect = targetTable.getRect();
+    if (!sourceRect || !targetRect) return null;
+
+    const possibilities = [];
+    possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.left - buswi, dirdst: -1 });
+    possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + buswi, dirdst: 1 });
+    possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
+    possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
+
+    minpos = _.minBy(possibilities, p => Math.abs(p.xsrc - p.xdst));
+
+    let srcY = _.mean(columns.map(x => sourceTable.getColumnY(x.source)));
+    let dstY = _.mean(columns.map(x => targetTable.getColumnY(x.target)));
+
+    if (columns.length == 0) {
+      srcY = sourceTable.getColumnY('');
+      dstY = targetTable.getColumnY('');
+    }
+
+    src = { x: minpos.xsrc, y: srcY };
+    dst = { x: minpos.xdst, y: dstY };
+
+    columnsY = columns.map((col, colIndex) => {
+      const y1 = sourceTable.getColumnY(col.source);
+      const y2 = targetTable.getColumnY(col.target);
+      return [y1, y2];
+    });
+  }
+
+  $: {
+    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}
+  <svg>
+    <polyline
+      points={`
+      ${src.x},${src.y}
+      ${src.x + extwi * minpos.dirsrc},${src.y}
+      ${dst.x + extwi * minpos.dirdst},${dst.y}
+      ${dst.x},${dst.y}
+  `}
+    />
+    {#each columnsY as coly}
+      <polyline
+        points={`
+  ${src.x},${src.y}
+  ${src.x},${coly[0]}
+  ${src.x - buswi * minpos.dirsrc},${coly[0]}
+`}
+      />
+      <polyline
+        points={`
+  ${dst.x},${dst.y}
+  ${dst.x},${coly[1]}
+  ${dst.x - buswi * minpos.dirdst},${coly[1]}
+`}
+      />
+    {/each}
+    <polygon
+      points={`
+      ${dst.x - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y + arhi / 2}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y - arhi / 2}
+      `}
+    />
+  </svg>
+{/if}
+
+<style>
+  svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+  polyline {
+    fill: none;
+    stroke: var(--theme-bg-4);
+    stroke-width: 2;
+  }
+</style>
--- a/packages/web/src/designer/QueryDesigner.svelte
+++ b/packages/web/src/designer/QueryDesigner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
  import Designer from './Designer.svelte';
+  import QueryDesignerReference from './QueryDesignerReference.svelte';
 </script>

 <Designer
@@ -11,9 +12,8 @@
    allowTableAlias: true,
    updateFromDbInfo: false,
    useDatabaseReferences: false,
-    showJoinType: true,
-    showReferenceArrow: false,
    allowScrollColumns: true,
    allowAddAllReferences: false,
  }}
+  referenceComponent={QueryDesignerReference}
 />
--- a/packages/web/src/designer/QueryDesignerReference.svelte
+++ b/packages/web/src/designer/QueryDesignerReference.svelte
@@ -18,9 +18,6 @@

  const buswi = 10;
  const extwi = 25;
-  const arwi = 12;
-  const arhi = 12;
-  const arpad = 3;

  export function recomputePosition() {
    const { designerId, sourceId, targetId, columns, joinType } = reference;
@@ -121,31 +118,20 @@
 `}
      />
    {/each}
-    {#if settings?.showReferenceArrow}
-      <polygon
-        points={`
-      ${dst.x - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y}
-      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y + arhi / 2}
-      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y - arhi / 2}
-      `}
-      />
-    {/if}
  </svg>

-  {#if settings?.showJoinType}
-    <div
-      use:contextMenu={createMenu}
-      class="wrapper"
-      style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
+  <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 class="text">
+      {_.snakeCase(reference?.joinType || 'CROSS JOIN')
+        .replace('_', '\xa0')
+        .replace('_', '\xa0')}
    </div>
-  {/if}
+  </div>
 {/if}

 <style>