dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-01 03:53:57 +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

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

@@ -14,6 +14,27 @@ const StyledSvg = styled.svg`
height: 100%; 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 }) { export default function DesignerReference({ domTablesRef, designerId, sourceId, targetId, columns, changeToken }) {
const theme = useTheme(); const theme = useTheme();
const domTables = domTablesRef.current; const domTables = domTablesRef.current;
@@ -25,9 +46,8 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const sourceRect = sourceTable.getRect(); const sourceRect = sourceTable.getRect();
const targetRect = targetTable.getRect(); const targetRect = targetTable.getRect();
if (!sourceRect || !targetRect) return null; 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 buswi = 10;
const extwi = 25; 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 srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source)));
let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target))); 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) { if (columns.length == 0) {
srcY = sourceTable.getColumnY(''); srcY = sourceTable.getColumnY('');
dstY = targetTable.getColumnY(''); dstY = targetTable.getColumnY('');
@@ -54,42 +71,11 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
const src = { x: minpos.xsrc, y: srcY }; const src = { x: minpos.xsrc, y: srcY };
const dst = { x: minpos.xdst, y: dstY }; 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 }; const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
return ( return (
<>
<StyledSvg> <StyledSvg>
{/* <line
x1={sourceRect.left}
y1={sourceY}
x2={targetRect.left}
y2={targetY}
style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
/> */}
<polyline <polyline
points={` points={`
${src.x},${src.y} ${src.x},${src.y}
@@ -124,6 +110,15 @@ export default function DesignerReference({ domTablesRef, designerId, sourceId,
); );
})} })}
</StyledSvg> </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>;
} }