debounced reference painting

packages/web/src/designer/Designer.js

@@ -18,6 +18,7 @@ export default function Designer({ value, onChange }) {
   const [targetDragColumn, setTargetDragColumn] = React.useState(null);
   const domTablesRef = React.useRef({});
   const wrapperRef = React.useRef();
+  const [changeToken, setChangeToken] = React.useState(0);
 
   const handleDrop = (e) => {
     var data = e.dataTransfer.getData('app_object_drag_data');
@@ -85,10 +86,14 @@ export default function Designer({ value, onChange }) {
     onChange(newValue);
   };
 
+//   React.useEffect(() => {
+//     setTimeout(() => setChangeToken((x) => x + 1), 100);
+//   }, [value]);
+
   return (
     <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme} ref={wrapperRef}>
       {(references || []).map((ref) => (
-        <DesignerReference key={ref.designerId} domTables={domTablesRef.current} {...ref} />
+        <DesignerReference key={ref.designerId} changeToken={changeToken} domTablesRef={domTablesRef} {...ref} />
       ))}
       {(tables || []).map((table) => (
         <DesignerTable
@@ -102,6 +107,7 @@ export default function Designer({ value, onChange }) {
           onChangeTable={changeTable}
           onBringToFront={bringToFront}
           onRemoveTable={removeTable}
+          setChangeToken={setChangeToken}
           wrapperRef={wrapperRef}
           onChangeDomTable={(table) => {
             domTablesRef.current[table.designerId] = table;

packages/web/src/designer/DesignerReference.js

@@ -12,8 +12,8 @@ const StyledSvg = styled.svg`
   height: 100%;
 `;
 
-export default function DesignerReference({ domTables, designerId, source, target }) {
-  console.log('domTables', domTables);
+export default function DesignerReference({ domTablesRef, designerId, source, target, changeToken }) {
+  const domTables = domTablesRef.current;
   /** @type {DomTableRef} */
   const sourceTable = domTables[source.designerId];
   /** @type {DomTableRef} */
@@ -21,14 +21,17 @@ export default function DesignerReference({ domTables, designerId, source, targe
   if (!sourceTable || !targetTable) return null;
   const sourceRect = sourceTable.getRect();
   const targetRect = targetTable.getRect();
-  console.log('LINE', sourceRect.left, sourceRect.top, targetRect.left, targetRect.top);
+  if (!sourceRect || !targetRect) return null;
+  const sourceY = sourceTable.getColumnY(source.columnName);
+  const targetY = targetTable.getColumnY(target.columnName);
+  if (sourceY == null || targetY == null) return null;
   return (
     <StyledSvg>
       <line
         x1={sourceRect.left}
-        y1={sourceRect.top}
+        y1={sourceY}
         x2={targetRect.left}
-        y2={targetRect.top}
+        y2={targetY}
         style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
       />
     </StyledSvg>

packages/web/src/designer/DesignerTable.js

@@ -4,6 +4,7 @@ import ColumnLabel from '../datagrid/ColumnLabel';
 import { FontIcon } from '../icons';
 import useTheme from '../theme/useTheme';
 import DomTableRef from './DomTableRef';
+import _ from 'lodash'
 
 const Wrapper = styled.div`
   position: absolute;
@@ -90,6 +91,7 @@ export default function DesignerTable({
   setTargetDragColumn,
   onChangeDomTable,
   wrapperRef,
+  setChangeToken,
 }) {
   const { pureName, columns, left, top, designerId } = table;
   const [movingPosition, setMovingPosition] = React.useState(null);
@@ -111,6 +113,8 @@ export default function DesignerTable({
       top: (movingPositionRef.current.top || 0) + diffY,
     };
     setMovingPosition(movingPositionRef.current);
+    // setChangeToken((x) => x + 1);
+    changeTokenDebounced.current();
     //   onChangeTable(
     //     {
     //       ...props,
@@ -121,6 +125,11 @@ export default function DesignerTable({
     //   );
   }, []);
 
+  const changeTokenDebounced = React.useRef(
+    // @ts-ignore
+    _.debounce(() => setChangeToken((x) => x + 1), 100)
+  );
+
   const handleMoveEnd = React.useCallback(
     (e) => {
       if (movingPositionRef.current) {
@@ -133,6 +142,8 @@ export default function DesignerTable({
 
       movingPositionRef.current = null;
       setMovingPosition(null);
+      changeTokenDebounced.current();
+      // setChangeToken((x) => x + 1);
 
       // this.props.model.fixPositions();
 
@@ -167,6 +178,7 @@ export default function DesignerTable({
   const dispatchDomColumn = (columnName, dom) => {
     domObjectsRef.current[columnName] = dom;
     onChangeDomTable(new DomTableRef(table, domObjectsRef.current, wrapperRef.current));
+    changeTokenDebounced.current();
   };
 
   return (

packages/web/src/designer/DomTableRef.ts

@@ -1,22 +1,39 @@
 import { TableInfo } from 'dbgate-types';
 
-type DesignerTableInfo = TableInfo & { desingerId: string };
+type DesignerTableInfo = TableInfo & { designerId: string };
 
 export default class DomTableRef {
   domTable: Element;
   domWrapper: Element;
   table: DesignerTableInfo;
+  designerId: string;
+  domRefs: { [column: string]: Element };
+
   constructor(table: DesignerTableInfo, domRefs, domWrapper: Element) {
     this.domTable = domRefs[''];
     this.domWrapper = domWrapper;
     this.table = table;
+    this.designerId = table.designerId;
+    this.domRefs = domRefs;
   }
 
   getRect() {
-    return this.domTable.getBoundingClientRect();
+    if (!this.domWrapper) return null;
+    if (!this.domTable) return null;
+
+    const wrap = this.domWrapper.getBoundingClientRect();
+    const rect = this.domTable.getBoundingClientRect();
+    return {
+      left: rect.left - wrap.left,
+      top: rect.top - wrap.top,
+    };
   }
 
-  get designerId() {
-    return this.table.desingerId;
+  getColumnY(columnName: string) {
+    let col = this.domRefs[columnName];
+    if (!col) return null;
+    const rect = col.getBoundingClientRect();
+    const wrap = this.domWrapper.getBoundingClientRect();
+    return (rect.top + rect.bottom) / 2 - wrap.top;
   }
 }