Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed dragging multiple components with dragHandle

Browse source
This commit is contained in:
Kavin Venkatachalam 2024-01-17 14:09:45 +05:30
parent c410d1d097
commit 149e94f22f
1 changed files with 48 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
frontend/src/Editor/DragContainer.jsx
View file

@ -9,39 +9,52 @@ 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 (
<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="multiple-components-config-handle" 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>
);
return configHandleForMultiple('multiple-components-config-handle');
},
};
const DimensionViewableForSub = {
name: 'dimensionViewableForSub',
props: [],
events: [],
render() {
return configHandleForMultiple('multiple-components-config-handle-sub');
},
};
@ -754,14 +767,18 @@ export default function DragContainer({
return (
<Moveable
dragTargetSelf={true}
dragTarget={document.getElementById('multiple-components-config-handle')}
dragTarget={
useGridStore.getState().isGroundHandleHoverd
? document.getElementById('multiple-components-config-handle-sub')
: undefined
}
flushSync={flushSync}
key={i.parent}
ref={(el) => (childMoveableRefs.current[i.parent] = el)}
ables={[MouseCustomAble, DimensionViewable]}
ables={[MouseCustomAble, DimensionViewableForSub]}
props={{
mouseTest: selectedComponents.length < 2,
dimensionViewable: selectedComponents.length > 2,
dimensionViewableForSub: selectedComponents.length > 1,
}}
target={
// groupedTargets.length