mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
Fixed moving multiple components with dragHandle
This commit is contained in:
Kavin Venkatachalam
parent
d5672730c1
commit
43c55f499c
1 changed files with 88 additions and 109 deletions
|
|
@ -4,106 +4,11 @@ import { useEditorStore } from '@/_stores/editorStore';
|
|||
import { shallow } from 'zustand/shallow';
|
||||
import './DragContainer.css';
|
||||
import DragContainerNested from './DragContainerNested';
|
||||
import _, { isEmpty } from 'lodash';
|
||||
import _, { isEmpty, debounce } from 'lodash';
|
||||
import { flushSync } from 'react-dom';
|
||||
import { restrictedWidgetsObj } from './WidgetManager/restrictedWidgetsConfig';
|
||||
import { useGridStoreActions, useDragTarget, useNoOfGrid, useGridStore } from '@/_stores/gridStore';
|
||||
|
||||
const configHandleForMultiple = (id) => {
|
||||
return (
|
||||
<div
|
||||
className={'multiple-components-config-handle'}
|
||||
onMouseUpCapture={() => {
|
||||
if (useGridStore.getState().isGroundHandleHoverd) {
|
||||
useGridStore.getState().actions.setIsGroundHandleHoverd(false);
|
||||
}
|
||||
}}
|
||||
onMouseDownCapture={() => {
|
||||
if (!useGridStore.getState().isGroundHandleHoverd) {
|
||||
useGridStore.getState().actions.setIsGroundHandleHoverd(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="badge handle-content" id={id} style={{ background: '#4d72fa' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
style={{ cursor: 'pointer', marginRight: '5px', verticalAlign: 'middle' }}
|
||||
src="assets/images/icons/settings.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
draggable="false"
|
||||
/>
|
||||
<span>components</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DimensionViewable = {
|
||||
name: 'dimensionViewable',
|
||||
props: [],
|
||||
events: [],
|
||||
render() {
|
||||
return configHandleForMultiple('multiple-components-config-handle');
|
||||
},
|
||||
};
|
||||
|
||||
const DimensionViewableForSub = {
|
||||
name: 'dimensionViewableForSub',
|
||||
props: [],
|
||||
events: [],
|
||||
render() {
|
||||
return configHandleForMultiple('multiple-components-config-handle-sub');
|
||||
},
|
||||
};
|
||||
|
||||
const MouseCustomAble = {
|
||||
name: 'mouseTest',
|
||||
props: {},
|
||||
events: {},
|
||||
mouseEnter(e) {
|
||||
const controlBoxes = document.getElementsByClassName('moveable-control-box');
|
||||
for (const element of controlBoxes) {
|
||||
element.classList.remove('moveable-control-box-d-block');
|
||||
}
|
||||
e.props.target.classList.add('hovered');
|
||||
e.controlBox.classList.add('moveable-control-box-d-block');
|
||||
},
|
||||
mouseLeave(e) {
|
||||
console.log('MouseCustomAble LEAVE', e);
|
||||
e.props.target.classList.remove('hovered');
|
||||
e.controlBox.classList.remove('moveable-control-box-d-block');
|
||||
},
|
||||
};
|
||||
|
||||
const MouseEnterLeaveAble = makeAble('enterLeave', {
|
||||
mouseEnter(moveable) {
|
||||
console.log('enterLeave moveable', moveable);
|
||||
if (moveable.moveables) {
|
||||
// group
|
||||
moveable.moveables.forEach((child) => {
|
||||
console.log('enterLeave', child);
|
||||
});
|
||||
} else {
|
||||
// single
|
||||
// moveable.state.target.style.backgroundColor = '#e55';
|
||||
}
|
||||
},
|
||||
mouseLeave(moveable) {
|
||||
console.log('enterLeave moveable leave', moveable);
|
||||
if (moveable.moveables) {
|
||||
// group
|
||||
moveable.moveables.forEach((child) => {
|
||||
console.log('enterLeave', child);
|
||||
});
|
||||
} else {
|
||||
// single
|
||||
console.log('enterLeave e;se', moveable);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default function DragContainer({
|
||||
boxes,
|
||||
mode,
|
||||
|
|
@ -124,6 +29,85 @@ export default function DragContainer({
|
|||
draggedSubContainer,
|
||||
boxesAsObj,
|
||||
}) {
|
||||
const lastDraggedEventsRef = useRef(null);
|
||||
const configHandleForMultiple = (id) => {
|
||||
return (
|
||||
<div
|
||||
className={'multiple-components-config-handle'}
|
||||
onMouseUpCapture={() => {
|
||||
if (lastDraggedEventsRef.current) {
|
||||
onDrag(
|
||||
lastDraggedEventsRef.current.map((ev) => ({
|
||||
id: ev.target.id,
|
||||
x: ev.translate[0],
|
||||
y: ev.translate[1],
|
||||
}))
|
||||
);
|
||||
}
|
||||
if (useGridStore.getState().isGroundHandleHoverd) {
|
||||
useGridStore.getState().actions.setIsGroundHandleHoverd(false);
|
||||
}
|
||||
}}
|
||||
onMouseDownCapture={() => {
|
||||
lastDraggedEventsRef.current = null;
|
||||
if (!useGridStore.getState().isGroundHandleHoverd) {
|
||||
useGridStore.getState().actions.setIsGroundHandleHoverd(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="badge handle-content" id={id} style={{ background: '#4d72fa' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
style={{ cursor: 'pointer', marginRight: '5px', verticalAlign: 'middle' }}
|
||||
src="assets/images/icons/settings.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
draggable="false"
|
||||
/>
|
||||
<span>components</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DimensionViewable = {
|
||||
name: 'dimensionViewable',
|
||||
props: [],
|
||||
events: [],
|
||||
render() {
|
||||
return configHandleForMultiple('multiple-components-config-handle');
|
||||
},
|
||||
};
|
||||
|
||||
const DimensionViewableForSub = {
|
||||
name: 'dimensionViewableForSub',
|
||||
props: [],
|
||||
events: [],
|
||||
render() {
|
||||
return configHandleForMultiple('multiple-components-config-handle-sub');
|
||||
},
|
||||
};
|
||||
|
||||
const MouseCustomAble = {
|
||||
name: 'mouseTest',
|
||||
props: {},
|
||||
events: {},
|
||||
mouseEnter(e) {
|
||||
const controlBoxes = document.getElementsByClassName('moveable-control-box');
|
||||
for (const element of controlBoxes) {
|
||||
element.classList.remove('moveable-control-box-d-block');
|
||||
}
|
||||
e.props.target.classList.add('hovered');
|
||||
e.controlBox.classList.add('moveable-control-box-d-block');
|
||||
},
|
||||
mouseLeave(e) {
|
||||
console.log('MouseCustomAble LEAVE', e);
|
||||
e.props.target.classList.remove('hovered');
|
||||
e.controlBox.classList.remove('moveable-control-box-d-block');
|
||||
},
|
||||
};
|
||||
|
||||
const [dragTarget, setDragTarget] = useDragTarget();
|
||||
const [draggedTarget, setDraggedTarget] = useState();
|
||||
const moveableRef = useRef();
|
||||
|
|
@ -324,6 +308,12 @@ export default function DragContainer({
|
|||
e.setMin([gridWidth, 10]);
|
||||
};
|
||||
|
||||
const updateNewPosition = (events) => {
|
||||
lastDraggedEventsRef.current = events;
|
||||
};
|
||||
|
||||
const debouncedOnDrag = debounce((events) => updateNewPosition(events), 100);
|
||||
|
||||
return (
|
||||
<div className="root">
|
||||
<div className="container-fluid rm-container p-0">
|
||||
|
|
@ -675,21 +665,10 @@ export default function DragContainer({
|
|||
events.forEach((ev) => {
|
||||
ev.target.style.transform = ev.transform;
|
||||
});
|
||||
// onDrag(
|
||||
// events.map((ev) => ({
|
||||
// id: ev.target.id,
|
||||
// x: ev.translate[0],
|
||||
// y: ev.translate[1],
|
||||
// }))
|
||||
// );
|
||||
debouncedOnDrag(events);
|
||||
}}
|
||||
// onDragGroupStart={() => {
|
||||
// // if (currentLayout === 'mobile' && autoComputeLayout) {
|
||||
// // turnOffAutoLayout();
|
||||
// // return false;
|
||||
// // }
|
||||
// }}
|
||||
onDragGroupEnd={(e) => {
|
||||
debouncedOnDrag.cancel();
|
||||
const { events } = e;
|
||||
onDrag(
|
||||
events.map((ev) => ({
|
||||
|
|
|
|||
Loading…
Reference in a new issue