reference component split

2026-04-21 19:56:02 +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/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>