dom tables ref

This commit is contained in:
Jan Prochazka
2020-12-26 18:57:56 +01:00
parent 9aa58c8de7
commit 586a17f64e
4 changed files with 55 additions and 10 deletions

View File

@@ -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 }) {
const sourceTable = tables.find((x) => x.designerId == source.designerId);
const targetTable = tables.find((x) => x.designerId == target.designerId);
export default function DesignerReference({ domTables, designerId, source, target }) {
console.log('domTables', domTables);
/** @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}
y1={sourceTable.top}
x2={targetTable.left}
y2={targetTable.top}
x1={sourceRect.left}
y1={sourceRect.top}
x2={targetRect.left}
y2={targetRect.top}
style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
/>
</StyledSvg>