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

move table fixes

Browse Source
This commit is contained in:
Jan Prochazka
2020-12-26 10:03:59 +01:00
parent ca985330f6
commit 54bdaac64f
2 changed files with 48 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,10 +27,11 @@ export default function Designer({ value, onChange }) {
const changeTable = React.useCallback(
(table, index) => {
onChange({
const newValue = {
...value,
tables: (tables || []).map((t, i) => (i == index ? table : t)),
});
};
onChange(newValue);
},
[onChange]
);
@@ -38,12 +39,7 @@ export default function Designer({ value, onChange }) {
return (
<Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
{(tables || []).map((table, index) => (
<DesignerTable
key={index}
{...table}
index={index}
onChangeTable={changeTable}
/>
<DesignerTable key={index} {...table} index={index} onChangeTable={changeTable} />
))}
</Wrapper>
);

83
packages/web/src/designer/DesignerTable.js
View File

@@ -12,12 +12,14 @@ const Header = styled.div`
text-align: center;
padding: 2px;
background: lightblue;
cursor: pointer;
`;
const ColumnsWrapper = styled.div`
max-height: 400px;
overflow-y: scroll;
overflow-y: auto;
width: 100%;
margin: 5px;
`;
export default function DesignerTable(props) {
@@ -28,47 +30,50 @@ export default function DesignerTable(props) {
const moveStartXRef = React.useRef(null);
const moveStartYRef = React.useRef(null);
const handleMove = React.useCallback(
(e) => {
let diffX = e.clientX - moveStartXRef.current;
let diffY = e.clientY - moveStartYRef.current;
moveStartXRef.current = e.clientX;
moveStartYRef.current = e.clientY;
const handleMove = React.useCallback((e) => {
let diffX = e.clientX - moveStartXRef.current;
let diffY = e.clientY - moveStartYRef.current;
moveStartXRef.current = e.clientX;
moveStartYRef.current = e.clientY;
movingPositionRef.current = {
left: (movingPositionRef.current.left || 0) + diffX,
top: (movingPositionRef.current.top || 0) + diffY,
};
setMovingPosition(movingPositionRef.current);
// onChangeTable(
// {
// ...props,
// left: (left || 0) + diffX,
// top: (top || 0) + diffY,
// },
// index
// );
},
[onChangeTable]
);
const handleMoveEnd = React.useCallback((e) => {
setMovingPosition(null);
onChangeTable(
{
...props,
left: movingPositionRef.current.left,
top: movingPositionRef.current.top,
},
index
);
// this.props.model.fixPositions();
// this.props.designer.changedModel(true);
movingPositionRef.current = {
left: (movingPositionRef.current.left || 0) + diffX,
top: (movingPositionRef.current.top || 0) + diffY,
};
setMovingPosition(movingPositionRef.current);
// onChangeTable(
// {
// ...props,
// left: (left || 0) + diffX,
// top: (top || 0) + diffY,
// },
// index
// );
}, []);
const handleMoveEnd = React.useCallback(
(e) => {
if (movingPositionRef.current) {
onChangeTable(
{
...props,
left: movingPositionRef.current.left,
top: movingPositionRef.current.top,
},
index
);
}
movingPositionRef.current = null;
setMovingPosition(null);
// this.props.model.fixPositions();
// this.props.designer.changedModel(true);
},
[onChangeTable, index]
);
React.useEffect(() => {
if (movingPosition) {
document.addEventListener('mousemove', handleMove, true);