dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-30 05:43:58 +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( const changeTable = React.useCallback(
(table, index) => { (table, index) => {
onChange({ const newValue = {
...value, ...value,
tables: (tables || []).map((t, i) => (i == index ? table : t)), tables: (tables || []).map((t, i) => (i == index ? table : t)),
}); };
onChange(newValue);
}, },
[onChange] [onChange]
); );
@@ -38,12 +39,7 @@ export default function Designer({ value, onChange }) {
return ( return (
<Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}> <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
{(tables || []).map((table, index) => ( {(tables || []).map((table, index) => (
<DesignerTable <DesignerTable key={index} {...table} index={index} onChangeTable={changeTable} />
key={index}
{...table}
index={index}
onChangeTable={changeTable}
/>
))} ))}
</Wrapper> </Wrapper>
); );

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

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