dom tables ref

packages/web/src/designer/Designer.js

@@ -16,6 +16,8 @@ export default function Designer({ value, onChange }) {
 
   const [sourceDragColumn, setSourceDragColumn] = React.useState(null);
   const [targetDragColumn, setTargetDragColumn] = React.useState(null);
+  const domTablesRef = React.useRef({});
+  const wrapperRef = React.useRef();
 
   const handleDrop = (e) => {
     var data = e.dataTransfer.getData('app_object_drag_data');
@@ -84,9 +86,9 @@ export default function Designer({ value, onChange }) {
   };
 
   return (
-    <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme}>
+    <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme} ref={wrapperRef}>
       {(references || []).map((ref) => (
-        <DesignerReference key={ref.designerId} tables={tables} {...ref} />
+        <DesignerReference key={ref.designerId} domTables={domTablesRef.current} {...ref} />
       ))}
       {(tables || []).map((table) => (
         <DesignerTable
@@ -100,6 +102,10 @@ export default function Designer({ value, onChange }) {
           onChangeTable={changeTable}
           onBringToFront={bringToFront}
           onRemoveTable={removeTable}
+          wrapperRef={wrapperRef}
+          onChangeDomTable={(table) => {
+            domTablesRef.current[table.designerId] = table;
+          }}
         />
       ))}
     </Wrapper>

packages/web/src/designer/DesignerReference.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import DomTableRef from './DomTableRef';
 
 const StyledSvg = styled.svg`
   position: absolute;
@@ -11,18 +12,23 @@ const StyledSvg = styled.svg`
   height: 100%;
 `;
 
-export default function DesignerReference({ tables, designerId, source, target }) {
+export default function DesignerReference({ domTables, designerId, source, target }) {
-  const sourceTable = tables.find((x) => x.designerId == source.designerId);
+  console.log('domTables', domTables);
-  const targetTable = tables.find((x) => x.designerId == target.designerId);
+  /** @type {DomTableRef} */
+  const sourceTable = domTables[source.designerId];
+  /** @type {DomTableRef} */
+  const targetTable = domTables[target.designerId];
   if (!sourceTable || !targetTable) return null;
-  console.log('LINE', sourceTable.left, sourceTable.top, targetTable.left, targetTable.top);
+  const sourceRect = sourceTable.getRect();
+  const targetRect = targetTable.getRect();
+  console.log('LINE', sourceRect.left, sourceRect.top, targetRect.left, targetRect.top);
   return (
     <StyledSvg>
       <line
-        x1={sourceTable.left}
+        x1={sourceRect.left}
-        y1={sourceTable.top}
+        y1={sourceRect.top}
-        x2={targetTable.left}
+        x2={targetRect.left}
-        y2={targetTable.top}
+        y2={targetRect.top}
         style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
       />
     </StyledSvg>

packages/web/src/designer/DesignerTable.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import ColumnLabel from '../datagrid/ColumnLabel';
 import { FontIcon } from '../icons';
 import useTheme from '../theme/useTheme';
+import DomTableRef from './DomTableRef';
 
 const Wrapper = styled.div`
   position: absolute;
@@ -87,11 +88,14 @@ export default function DesignerTable({
   setSourceDragColumn,
   targetDragColumn,
   setTargetDragColumn,
+  onChangeDomTable,
+  wrapperRef,
 }) {
   const { pureName, columns, left, top, designerId } = table;
   const [movingPosition, setMovingPosition] = React.useState(null);
   const movingPositionRef = React.useRef(null);
   const theme = useTheme();
+  const domObjectsRef = React.useRef({});
 
   const moveStartXRef = React.useRef(null);
   const moveStartYRef = React.useRef(null);
@@ -160,6 +164,11 @@ export default function DesignerTable({
     [handleMove, handleMoveEnd]
   );
 
+  const dispatchDomColumn = (columnName, dom) => {
+    domObjectsRef.current[columnName] = dom;
+    onChangeDomTable(new DomTableRef(table, domObjectsRef.current, wrapperRef.current));
+  };
+
   return (
     <Wrapper
       theme={theme}
@@ -168,6 +177,7 @@ export default function DesignerTable({
         top: movingPosition ? movingPosition.top : top,
       }}
       onMouseDown={() => onBringToFront(table)}
+      ref={(dom) => dispatchDomColumn('', dom)}
     >
       <Header onMouseDown={headerMouseDown} theme={theme}>
         <HeaderLabel>{pureName}</HeaderLabel>
@@ -181,6 +191,7 @@ export default function DesignerTable({
             key={column.columnName}
             theme={theme}
             draggable
+            ref={(dom) => dispatchDomColumn(column.columnName, dom)}
             // @ts-ignore
             isDragSource={
               sourceDragColumn &&

packages/web/src/designer/DomTableRef.ts

@@ -0,0 +1,22 @@
+import { TableInfo } from 'dbgate-types';
+
+type DesignerTableInfo = TableInfo & { desingerId: string };
+
+export default class DomTableRef {
+  domTable: Element;
+  domWrapper: Element;
+  table: DesignerTableInfo;
+  constructor(table: DesignerTableInfo, domRefs, domWrapper: Element) {
+    this.domTable = domRefs[''];
+    this.domWrapper = domWrapper;
+    this.table = table;
+  }
+
+  getRect() {
+    return this.domTable.getBoundingClientRect();
+  }
+
+  get designerId() {
+    return this.table.desingerId;
+  }
+}