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

draw references

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-27 10:22:26 +01:00
parent 891a0a99e4
commit f211450b06
4 changed files with 126 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/web/src/designer/Designer.js
View File

@@ -71,14 +71,45 @@ export default function Designer({ value, onChange }) {
); );
const handleCreateReference = (source, target) => { const handleCreateReference = (source, target) => {
const existingReference = (value.references || []).find(
(x) =>
(x.sourceId == source.designerId && x.targetId == target.designerId) ||
(x.sourceId == target.designerId && x.targetId == source.designerId)
);
const newValue = { const newValue = {
...value, ...value,
references: [ references: existingReference
? value.references.map((ref) =>
ref == existingReference
? {
...existingReference,
columns: [
...existingReference.columns,
existingReference.sourceId == source.designerId
? {
source: source.columnName,
target: target.columnName,
}
: {
source: target.columnName,
target: source.columnName,
},
],
}
: ref
)
: [
...(value.references || []), ...(value.references || []),
{ {
designerId: uuidv1(), designerId: uuidv1(),
source, sourceId: source.designerId,
target, targetId: target.designerId,
columns: [
{
source: source.columnName,
target: target.columnName,
},
],
}, },
], ],
}; };
@@ -86,9 +117,9 @@ export default function Designer({ value, onChange }) {
onChange(newValue); onChange(newValue);
}; };
// React.useEffect(() => { // React.useEffect(() => {
// setTimeout(() => setChangeToken((x) => x + 1), 100); // setTimeout(() => setChangeToken((x) => x + 1), 100);
// }, [value]); // }, [value]);
return ( return (
<Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme} ref={wrapperRef}> <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} theme={theme} ref={wrapperRef}>

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

@@ -2,6 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import DomTableRef from './DomTableRef'; import DomTableRef from './DomTableRef';
import _ from 'lodash'; import _ from 'lodash';
import useTheme from '../theme/useTheme';
const StyledSvg = styled.svg` const StyledSvg = styled.svg`
position: absolute; position: absolute;
@@ -13,77 +14,115 @@ const StyledSvg = styled.svg`
height: 100%; height: 100%;
`; `;
export default function DesignerReference({ domTablesRef, designerId, source, target, changeToken }) { export default function DesignerReference({ domTablesRef, designerId, sourceId, targetId, columns, changeToken }) {
const theme = useTheme();
const domTables = domTablesRef.current; const domTables = domTablesRef.current;
/** @type {DomTableRef} */ /** @type {DomTableRef} */
const sourceTable = domTables[source.designerId]; const sourceTable = domTables[sourceId];
/** @type {DomTableRef} */ /** @type {DomTableRef} */
const targetTable = domTables[target.designerId]; const targetTable = domTables[targetId];
if (!sourceTable || !targetTable) return null; if (!sourceTable || !targetTable) return null;
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(source.columnName); const sourceY = sourceTable.getColumnY(columns[0].source);
const targetY = targetTable.getColumnY(target.columnName); const targetY = targetTable.getColumnY(columns[0].target);
if (sourceY == null || targetY == null) return null; if (sourceY == null || targetY == null) return null;
// const buswi = 10; const buswi = 10;
// const extwi = 25; const extwi = 25;
// const possibilities = []; const possibilities = [];
// possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.left - buswi, dirdst: -1 }); possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.left - buswi, dirdst: -1 });
// possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + buswi, dirdst: 1 }); possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + buswi, dirdst: 1 });
// possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 }); possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
// possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 }); possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
// let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst)); let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst));
// let srcY = _.mean(sourceTable.table.columns.map((x) => sourceTable.getColumnY(source.columnName))); let srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source)));
// let dstY = _.mean(ref.columns.map((x) => table2.getColumnY(x.column2.name))); let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target)));
// if (ref.columns.length == 0) { // let srcY = _.mean(sourceTable.table.columns.map((x) => sourceTable.getColumnY(source.columnName)));
// srcY = table1.getColumnY(''); // let dstY = _.mean(ref.columns.map((x) => table2.getColumnY(x.column2.name)));
// dstY = table2.getColumnY('');
// }
// let src = { x: minpos.xsrc - canvasOffset.left, y: srcY - canvasOffset.top }; if (columns.length == 0) {
// let dst = { x: minpos.xdst - canvasOffset.left, y: dstY - canvasOffset.top }; srcY = sourceTable.getColumnY('');
dstY = targetTable.getColumnY('');
}
// ctx.moveTo(src.x, src.y); const src = { x: minpos.xsrc, y: srcY };
// ctx.lineTo(src.x + extwi * minpos.dirsrc, src.y); const dst = { x: minpos.xdst, y: dstY };
// ctx.lineTo(dst.x + extwi * minpos.dirdst, dst.y);
// ctx.lineTo(dst.x, dst.y);
// ctx.stroke();
// for (let col of ref.columns) { // ctx.moveTo(src.x, src.y);
// let y1 = table1.getColumnY(col.column1.name); // ctx.lineTo(src.x + extwi * minpos.dirsrc, src.y);
// let y2 = table2.getColumnY(col.column2.name); // ctx.lineTo(dst.x + extwi * minpos.dirdst, dst.y);
// ctx.lineTo(dst.x, dst.y);
// ctx.stroke();
// ctx.moveTo(src.x, src.y); // for (let col of ref.columns) {
// ctx.lineTo(src.x, y1 - canvasOffset.top); // let y1 = table1.getColumnY(col.column1.name);
// ctx.lineTo(src.x - buswi * minpos.dirsrc, y1 - canvasOffset.top); // let y2 = table2.getColumnY(col.column2.name);
// ctx.stroke();
// ctx.moveTo(dst.x, dst.y); // ctx.moveTo(src.x, src.y);
// ctx.lineTo(dst.x, y2 - canvasOffset.top); // ctx.lineTo(src.x, y1 - canvasOffset.top);
// ctx.lineTo(dst.x - buswi * minpos.dirdst, y2 - canvasOffset.top); // ctx.lineTo(src.x - buswi * minpos.dirsrc, y1 - canvasOffset.top);
// ctx.stroke(); // ctx.stroke();
// }
// this.referencePositions[ref.uniqueName] = { // ctx.moveTo(dst.x, dst.y);
// x: (src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2, // ctx.lineTo(dst.x, y2 - canvasOffset.top);
// y: (src.y + dst.y) / 2, // 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 ( return (
<StyledSvg> <StyledSvg>
<line {/* <line
x1={sourceRect.left} x1={sourceRect.left}
y1={sourceY} y1={sourceY}
x2={targetRect.left} x2={targetRect.left}
y2={targetY} y2={targetY}
style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }} style={{ stroke: 'rgb(255,0,0)', strokeWidth: 2 }}
/> */}
<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={`
${src.x},${src.y}
${src.x},${y1}
${src.x - buswi * minpos.dirsrc},${y1}
`}
style={lineStyle}
/>
<polyline
points={`
${dst.x},${dst.y}
${dst.x},${y2}
${dst.x - buswi * minpos.dirdst},${y2}
`}
style={lineStyle}
/>
</React.Fragment>
);
})}
</StyledSvg> </StyledSvg>
); );
// return <div>{source.columnName}</div>; // return <div>{source.columnName}</div>;

1
packages/web/src/theme/dark.js
View File

@@ -32,6 +32,7 @@ const theme = {
designer_background: '#333', designer_background: '#333',
designtable_background: '#000', designtable_background: '#000',
designer_line: '#bbb',
}; };
export default fillTheme(theme); export default fillTheme(theme);

1
packages/web/src/theme/light.js
View File

@@ -31,6 +31,7 @@ const theme = {
designer_background: '#eee', designer_background: '#eee',
designtable_background: '#fff', designtable_background: '#fff',
designer_line: '#666',
}; };
export default fillTheme(theme); export default fillTheme(theme);