draw references

packages/web/src/designer/Designer.js

@@ -71,24 +71,55 @@ export default function Designer({ value, onChange }) {
   );
 
   const handleCreateReference = (source, target) => {
+    const existingReference = (value.references || []).find(
+      (x) =>
+        (x.sourceId == source.designerId && x.targetId == target.designerId) ||
+        (x.sourceId == target.designerId && x.targetId == source.designerId)
+    );
     const newValue = {
       ...value,
-      references: [
+      references: existingReference
-        ...(value.references || []),
+        ? value.references.map((ref) =>
-        {
+            ref == existingReference
-          designerId: uuidv1(),
+              ? {
-          source,
+                  ...existingReference,
-          target,
+                  columns: [
-        },
+                    ...existingReference.columns,
-      ],
+                    existingReference.sourceId == source.designerId
+                      ? {
+                          source: source.columnName,
+                          target: target.columnName,
+                        }
+                      : {
+                          source: target.columnName,
+                          target: source.columnName,
+                        },
+                  ],
+                }
+              : ref
+          )
+        : [
+            ...(value.references || []),
+            {
+              designerId: uuidv1(),
+              sourceId: source.designerId,
+              targetId: target.designerId,
+              columns: [
+                {
+                  source: source.columnName,
+                  target: target.columnName,
+                },
+              ],
+            },
+          ],
     };
 
     onChange(newValue);
   };
 
-//   React.useEffect(() => {
+  //   React.useEffect(() => {
-//     setTimeout(() => setChangeToken((x) => x + 1), 100);
+  //     setTimeout(() => setChangeToken((x) => x + 1), 100);
-//   }, [value]);
+  //   }, [value]);
 
   return (
     <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme} ref={wrapperRef}>

packages/web/src/designer/DesignerReference.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import DomTableRef from './DomTableRef';
 import _ from 'lodash';
+import useTheme from '../theme/useTheme';
 
 const StyledSvg = styled.svg`
   position: absolute;
@@ -13,77 +14,115 @@ const StyledSvg = styled.svg`
   height: 100%;
 `;
 
-export default function DesignerReference({ domTablesRef, designerId, source, target, changeToken }) {
+export default function DesignerReference({ domTablesRef, designerId, sourceId, targetId, columns, changeToken }) {
+  const theme = useTheme();
   const domTables = domTablesRef.current;
   /** @type {DomTableRef} */
-  const sourceTable = domTables[source.designerId];
+  const sourceTable = domTables[sourceId];
   /** @type {DomTableRef} */
-  const targetTable = domTables[target.designerId];
+  const targetTable = domTables[targetId];
   if (!sourceTable || !targetTable) return null;
   const sourceRect = sourceTable.getRect();
   const targetRect = targetTable.getRect();
   if (!sourceRect || !targetRect) return null;
-  const sourceY = sourceTable.getColumnY(source.columnName);
+  const sourceY = sourceTable.getColumnY(columns[0].source);
-  const targetY = targetTable.getColumnY(target.columnName);
+  const targetY = targetTable.getColumnY(columns[0].target);
   if (sourceY == null || targetY == null) return null;
 
-//   const buswi = 10;
+  const buswi = 10;
-//   const extwi = 25;
+  const extwi = 25;
 
-//   const possibilities = [];
+  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.left - buswi, dirdst: -1 });
-//   possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + 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.left - buswi, dirdst: -1 });
-//   possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
+  possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
 
-//   let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst));
+  let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst));
 
-//   let srcY = _.mean(sourceTable.table.columns.map((x) => sourceTable.getColumnY(source.columnName)));
+  let srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source)));
-//   let dstY = _.mean(ref.columns.map((x) => table2.getColumnY(x.column2.name)));
+  let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target)));
 
-//   if (ref.columns.length == 0) {
+  //   let srcY = _.mean(sourceTable.table.columns.map((x) => sourceTable.getColumnY(source.columnName)));
-//     srcY = table1.getColumnY('');
+  //   let dstY = _.mean(ref.columns.map((x) => table2.getColumnY(x.column2.name)));
-//     dstY = table2.getColumnY('');
-//   }
 
-//   let src = { x: minpos.xsrc - canvasOffset.left, y: srcY - canvasOffset.top };
+  if (columns.length == 0) {
-//   let dst = { x: minpos.xdst - canvasOffset.left, y: dstY - canvasOffset.top };
+    srcY = sourceTable.getColumnY('');
+    dstY = targetTable.getColumnY('');
+  }
 
-//   ctx.moveTo(src.x, src.y);
+  const src = { x: minpos.xsrc, y: srcY };
-//   ctx.lineTo(src.x + extwi * minpos.dirsrc, src.y);
+  const dst = { x: minpos.xdst, y: dstY };
-//   ctx.lineTo(dst.x + extwi * minpos.dirdst, dst.y);
-//   ctx.lineTo(dst.x, dst.y);
-//   ctx.stroke();
 
-//   for (let col of ref.columns) {
+  //   ctx.moveTo(src.x, src.y);
-//     let y1 = table1.getColumnY(col.column1.name);
+  //   ctx.lineTo(src.x + extwi * minpos.dirsrc, src.y);
-//     let y2 = table2.getColumnY(col.column2.name);
+  //   ctx.lineTo(dst.x + extwi * minpos.dirdst, dst.y);
+  //   ctx.lineTo(dst.x, dst.y);
+  //   ctx.stroke();
 
-//     ctx.moveTo(src.x, src.y);
+  //   for (let col of ref.columns) {
-//     ctx.lineTo(src.x, y1 - canvasOffset.top);
+  //     let y1 = table1.getColumnY(col.column1.name);
-//     ctx.lineTo(src.x - buswi * minpos.dirsrc, y1 - canvasOffset.top);
+  //     let y2 = table2.getColumnY(col.column2.name);
-//     ctx.stroke();
 
-//     ctx.moveTo(dst.x, dst.y);
+  //     ctx.moveTo(src.x, src.y);
-//     ctx.lineTo(dst.x, y2 - canvasOffset.top);
+  //     ctx.lineTo(src.x, y1 - canvasOffset.top);
-//     ctx.lineTo(dst.x - buswi * minpos.dirdst, y2 - canvasOffset.top);
+  //     ctx.lineTo(src.x - buswi * minpos.dirsrc, y1 - canvasOffset.top);
-//     ctx.stroke();
+  //     ctx.stroke();
-//   }
 
-//   this.referencePositions[ref.uniqueName] = {
+  //     ctx.moveTo(dst.x, dst.y);
-//     x: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2,
+  //     ctx.lineTo(dst.x, y2 - canvasOffset.top);
-//     y: (src.y + dst.y) / 2,
+  //     ctx.lineTo(dst.x - buswi * minpos.dirdst, y2 - canvasOffset.top);
-//   };
+  //     ctx.stroke();
+  //   }
+
+  //   this.referencePositions[ref.uniqueName] = {
+  //     x: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2,
+  //     y: (src.y + dst.y) / 2,
+  //   };
+  const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
 
   return (
     <StyledSvg>
-      <line
+      {/* <line
         x1={sourceRect.left}
         y1={sourceY}
         x2={targetRect.left}
         y2={targetY}
         style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
+      /> */}
+      <polyline
+        points={`
+            ${src.x},${src.y}
+            ${src.x + extwi * minpos.dirsrc},${src.y}
+            ${dst.x + extwi * minpos.dirdst},${dst.y}
+            ${dst.x},${dst.y}
+        `}
+        style={lineStyle}
       />
+      {columns.map((col, colIndex) => {
+        let y1 = sourceTable.getColumnY(col.source);
+        let y2 = targetTable.getColumnY(col.target);
+        return (
+          <React.Fragment key={colIndex}>
+            <polyline
+              points={`
+                ${src.x},${src.y}
+                ${src.x},${y1}
+                ${src.x - buswi * minpos.dirsrc},${y1}
+              `}
+              style={lineStyle}
+            />
+            <polyline
+              points={`
+                ${dst.x},${dst.y}
+                ${dst.x},${y2}
+                ${dst.x - buswi * minpos.dirdst},${y2}
+              `}
+              style={lineStyle}
+            />
+          </React.Fragment>
+        );
+      })}
     </StyledSvg>
   );
   // return <div>{source.columnName}</div>;

packages/web/src/theme/dark.js

@@ -32,6 +32,7 @@ const theme = {
 
   designer_background: '#333',
   designtable_background: '#000',
+  designer_line: '#bbb',
 };
 
 export default fillTheme(theme);

packages/web/src/theme/light.js

@@ -31,6 +31,7 @@ const theme = {
 
   designer_background: '#eee',
   designtable_background: '#fff',
+  designer_line: '#666',
 };
 
 export default fillTheme(theme);