dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 04:16:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-27 11:10:10 +01:00
parent f211450b06
commit 8fccaffedb
1 changed files with 56 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
packages/web/src/designer/DesignerReference.js
View File

@@ -14,6 +14,27 @@ const StyledSvg = styled.svg`
height: 100%;
`;
const ReferenceWrapper = styled.div`
position: absolute;
border: 1px solid ${(props) => props.theme.designer_line};
background-color: ${(props) => props.theme.designer_background};
z-index: 900;
border-radius: 10px;
width: 32px;
height: 32px;
`;
const ReferenceText = styled.span`
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 900;
white-space: nowrap;
background-color: ${(props) => props.theme.designer_background};
`;
export default function DesignerReference({ domTablesRef, designerId, sourceId, targetId, columns, changeToken }) {
const theme = useTheme();
const domTables = domTablesRef.current;
@@ -25,9 +46,8 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const sourceRect = sourceTable.getRect();
const targetRect = targetTable.getRect();
if (!sourceRect || !targetRect) return null;
const sourceY = sourceTable.getColumnY(columns[0].source);
const targetY = targetTable.getColumnY(columns[0].target);
if (sourceY == null || targetY == null) return null;
const buswi = 10;
const extwi = 25;
@@ -43,9 +63,6 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
let srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source)));
let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target)));
// let srcY = _.mean(sourceTable.table.columns.map((x) => sourceTable.getColumnY(source.columnName)));
// let dstY = _.mean(ref.columns.map((x) => table2.getColumnY(x.column2.name)));
if (columns.length == 0) {
srcY = sourceTable.getColumnY('');
dstY = targetTable.getColumnY('');
@@ -54,76 +71,54 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const src = { x: minpos.xsrc, y: srcY };
const dst = { x: minpos.xdst, y: dstY };
// ctx.moveTo(src.x, src.y);
// ctx.lineTo(src.x + extwi * minpos.dirsrc, src.y);
// ctx.lineTo(dst.x + extwi * minpos.dirdst, dst.y);
// ctx.lineTo(dst.x, dst.y);
// ctx.stroke();
// for (let col of ref.columns) {
// let y1 = table1.getColumnY(col.column1.name);
// let y2 = table2.getColumnY(col.column2.name);
// ctx.moveTo(src.x, src.y);
// ctx.lineTo(src.x, y1 - canvasOffset.top);
// ctx.lineTo(src.x - buswi * minpos.dirsrc, y1 - canvasOffset.top);
// ctx.stroke();
// ctx.moveTo(dst.x, dst.y);
// ctx.lineTo(dst.x, y2 - canvasOffset.top);
// 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
x1={sourceRect.left}
y1={sourceY}
x2={targetRect.left}
y2={targetY}
style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
/> */}
<polyline
points={`
<>
<StyledSvg>
<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={`
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={`
style={lineStyle}
/>
<polyline
points={`
${dst.x},${dst.y}
${dst.x},${y2}
${dst.x - buswi * minpos.dirdst},${y2}
`}
style={lineStyle}
/>
</React.Fragment>
);
})}
</StyledSvg>
style={lineStyle}
/>
</React.Fragment>
);
})}
</StyledSvg>
<ReferenceWrapper
theme={theme}
style={{
left: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16,
top: (src.y + dst.y) / 2 - 16,
}}
>
<ReferenceText theme={theme}>inner join</ReferenceText>
</ReferenceWrapper>
</>
);
// return <div>{source.columnName}</div>;
}