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

feat: moved react-moveable for nested components outside

Browse source
This commit is contained in:
Johnson Cherian 2023-11-21 16:28:30 +05:30
parent 96fb10924e
commit d7b1bfd393
5 changed files with 186 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/Editor/Container.jsx
View file

@ -407,31 +407,46 @@ export const Container = ({
};
function onDragStop2(boxPositions) {
const updatedBoxes = boxPositions.reduce(
(boxesObj, { id, x, y, parent }) => ({
const updatedBoxes = boxPositions.reduce((boxesObj, { id, x, y, parent }) => {
let _width = boxes[id]['layouts'][currentLayout].width;
const containerWidth = parent ? subContainerWidths[parent] : gridWidth;
if (parent !== boxes[id]['component']?.parent) {
if (boxes[id]['component']?.parent) {
_width = Math.round(
(boxes[id]['layouts'][currentLayout].width * subContainerWidths[boxes[id]['component']?.parent]) /
containerWidth
);
} else {
_width = Math.round((boxes[id]['layouts'][currentLayout].width * gridWidth) / containerWidth);
}
}
if (_width === 0) {
_width = 1;
}
return {
...boxesObj,
[id]: {
...boxes[id],
component: {
...boxes[id]['component'],
parent: parent ? parent : boxes[id]['component']?.parent,
parent: parent,
},
layouts: {
...boxes[id]['layouts'],
[currentLayout]: {
...boxes[id]['layouts'][currentLayout],
// ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w },
width: parent
? Math.round((boxes[id]['layouts'][currentLayout].width * gridWidth) / subContainerWidths[parent])
: boxes[id]['layouts'][currentLayout].width,
// width: parent
// ? Math.round((boxes[id]['layouts'][currentLayout].width * gridWidth) / subContainerWidths[parent])
// : boxes[id]['layouts'][currentLayout].width,
width: _width,
top: y,
left: Math.round(x / (parent ? subContainerWidths[parent] : gridWidth)),
},
},
},
}),
{}
);
};
}, {});
let newBoxes = {
...boxes,
...updatedBoxes,
@ -836,6 +851,7 @@ export const Container = ({
selectedComponents={selectedComponents}
setIsDragging={setIsDragging}
currentLayout={currentLayout}
subContainerWidths={subContainerWidths}
/>
{/* {Object.keys(boxes).map((key) => {
const box = boxes[key];

4
frontend/src/Editor/DragContainer.css
View file

@ -21,4 +21,8 @@
}
.moveable-control-box>.moveable-control-box:hover, .moveable-control-box>.moveable-dragging{
visibility: visible !important;
}
.moveable-control-box {
background: red;
}

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

@ -36,11 +36,13 @@ export default function DragContainer({
selectedComponents = [],
setIsDragging,
currentLayout,
subContainerWidths,
}) {
const [dragTarget, setDragTarget] = useState();
const [draggedTarget, setDraggedTarget] = useState();
const moveableRef = useRef();
const [movableTargets, setMovableTargets] = useState([]);
const childMoveableRefs = useRef([]);
const [movableTargets, setMovableTargets] = useState({});
const [isChildDragged, setIsChildDragged] = useState(false);
const boxList = boxes.map((box) => ({
id: box.id,
@ -61,6 +63,13 @@ export default function DragContainer({
moveableRef.current.updateRect();
moveableRef.current.updateTarget();
moveableRef.current.updateSelectors();
for (let refObj of Object.values(childMoveableRefs.current)) {
if (refObj) {
refObj.updateRect();
refObj.updateTarget();
refObj.updateSelectors();
}
}
setTimeout(reloadGrid, 100);
}, [JSON.stringify(selectedComponents), JSON.stringify(boxes)]);
@ -76,6 +85,13 @@ export default function DragContainer({
moveableRef.current.updateTarget();
moveableRef.current.updateSelectors();
}
for (let refObj of Object.values(childMoveableRefs.current)) {
if (refObj) {
refObj.updateRect();
refObj.updateTarget();
refObj.updateSelectors();
}
}
};
window.reloadGrid = reloadGrid;
@ -123,6 +139,8 @@ export default function DragContainer({
const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)];
console.log('groupedTargets-->', groupedTargets);
return (
<div className="root">
<div className="container rm-container p-0">
@ -136,7 +154,10 @@ export default function DragContainer({
key={i.id}
id={i.id}
widgetid={i.id}
style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
style={{
transform: `translate(332px, -134px)`,
...getDimensions(i.id),
}}
// onMouseEnter={(e) => {
// try {
// // console.log('onMouseEnter', e.target);
@ -177,7 +198,8 @@ export default function DragContainer({
flushSync={flushSync}
// target={movableTargets}
// target={'.move-target'}
target={isChildDragged ? 'nothing1' : groupedTargets.length ? [...groupedTargets] : ['.widget-target']}
// target={isChildDragged ? 'nothing1' : groupedTargets.length ? [...groupedTargets] : ['.widget-target']}
target={groupedTargets.length ? [...groupedTargets] : '.widget-target'}
// hideDefaultLines
origin={false}
// hideChildMoveableDefaultLines={false}
@ -431,17 +453,140 @@ export default function DragContainer({
//snap settgins
snappable={true}
// snapDirections={{ top: true, left: true, bottom: true, right: true }}
snapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }}
elementSnapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }}
snapDirections={{
top: true,
left: true,
bottom: true,
right: true,
center: true,
middle: true,
}}
elementSnapDirections={{
top: true,
left: true,
bottom: true,
right: true,
center: true,
middle: true,
}}
snapThreshold={5}
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
isDisplaySnapDigit={false}
snapGridWidth={gridWidth}
stopPropagation={true}
// snapGridHeight={10}
// verticalGuidelines={[50, 150, 250, 450, 550]}
// horizontalGuidelines={[0, 100, 200, 400, 500]}
/>
{removeDuplicates(list)
.filter((i) => !isEmpty(i.parent))
.map((i) => (
<Moveable
key={i.parent}
ref={(el) => (childMoveableRefs.current[i.id] = el)}
target={`.target-${i.parent}`}
draggable={true}
resizable
stopPropagation={true}
origin={false}
individualGroupable={true}
// onDragStart={(e) => {
// // console.log("Draggingstart => ", e);
// }}
onDrag={(e) => {
e.target.style.transform = e.transform;
}}
onDragEnd={(e) => {
const { lastEvent, clientX, clientY } = e;
let {
translate: [left, top],
} = lastEvent;
console.log('onDragEnd', subContainerWidths, subContainerWidths[i.parent]);
// if (parentElem) {
// left = left - parentElem.left * gridWidth;
// top = top - parentElem.top;
// } else {
e.target.style.transform = `translate(${
Math.round(left / subContainerWidths[i.parent]) * subContainerWidths[i.parent]
}px, ${Math.round(top / 10) * 10}px)`;
// }
let draggedOverElemId = i.parent;
if (document.elementFromPoint(e.clientX, e.clientY)) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
console.log(
'draggedOverElem - list',
targetElems.find(
(ele) =>
ele.id !== e.target.id &&
(ele.classList.contains('target') || ele.classList.contains('nested-target'))
)
);
const draggedOverElem = targetElems.find(
(ele) =>
ele.id !== e.target.id &&
(ele.classList.contains('target') || ele.classList.contains('nested-target'))
);
setDragTarget(draggedOverElem?.id);
draggedOverElemId = draggedOverElem?.id;
console.log('draggedOverElem', draggedOverElem, draggedOverElemId);
if (draggedOverElemId !== i.parent) {
const newParentElem = list[draggedOverElemId]?.layouts?.desktop;
let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId);
left = _left;
top = _top;
}
}
const _x = draggedOverElemId
? Math.round(left / subContainerWidths[draggedOverElemId]) * subContainerWidths[draggedOverElemId]
: Math.round(left / gridWidth) * gridWidth;
onDrag([
{
id: e.target.id,
x: _x,
y: Math.round(top / 10) * 10,
parent: draggedOverElemId,
},
]);
}}
/>
))}
</div>
</div>
);
}
function getMouseDistanceFromParentDiv(event, id) {
// Get the parent div element.
const parentDiv = id ? document.getElementById(id) : document.getElementsByClassName('real-canvas')[0];
// Get the bounding rectangle of the parent div.
const parentDivRect = parentDiv.getBoundingClientRect();
const targetDivRect = event.target.getBoundingClientRect();
// Get the mouse position relative to the parent div.
// const mouseX = event.clientX - parentDivRect.left;
// const mouseY = event.clientYl- parentDivRect.top;
const mouseX = targetDivRect.left - parentDivRect.left;
const mouseY = targetDivRect.top - parentDivRect.top;
// Calculate the distance from the mouse pointer to the top and left edges of the parent div.
const top = mouseY;
const left = mouseX;
return { top, left };
}
function removeDuplicates(arr) {
const unique = arr
.map((e) => e['parent'])
.map((e, i, final) => final.indexOf(e) === i && i)
.filter((e) => arr[e])
.map((e) => arr[e]);
// debugger;
return unique;
}

5
frontend/src/Editor/DragContainerNested copy.jsx
View file

@ -87,7 +87,8 @@ export default function DragContainerNested({
{/* <div className="target target1">Target1</div>
<div className="target target2">Target2</div>
<div className="target target3">Target3</div> */}
<Moveable
{/* <Moveable
ref={moveableRef}
target={`.target-${parent}`}
origin={false}
@ -189,7 +190,7 @@ export default function DragContainerNested({
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
// verticalGuidelines={[50, 150, 250, 450, 550]}
// horizontalGuidelines={[0, 100, 200, 400, 500]}
/>
/> */}
</div>
</div>
);

30
frontend/src/Editor/DragContainerNested.jsx
View file

@ -44,7 +44,7 @@ export default function DragContainerNested({
}, [boxes?.length]);
useEffect(() => {
moveableRef.current.updateRect();
// moveableRef.current.updateRect();
}, [...Object.values(parentLayout), boxes?.length, activeGrid]);
// const [isChildDragged, setIsChildDragged] = useState(false);
@ -80,17 +80,8 @@ export default function DragContainerNested({
{renderWidget(i.id)}
</div>
))}
{/* <div className="target target1">
<DragContainerNested setIsChildDragged={setIsChildDragged} />
</div> */}
{/* <div className="target target1">
Target12
<input type="text" />
</div> */}
{/* <div className="target target1">Target1</div>
<div className="target target2">Target2</div>
<div className="target target3">Target3</div> */}
<Moveable
{/* <Moveable
ref={moveableRef}
target={`.target-${parent}`}
origin={false}
@ -153,11 +144,6 @@ export default function DragContainerNested({
console.log('debugger====>', e, parent);
setActiveGrid(null);
setIsChildDragged(false);
// if (!isChildDragged) {
// e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
// Math.round(e.translate[1] / 10) * 10
// }px)`;
// }
let draggedOverElemId;
if (document.elementFromPoint(e.clientX, e.clientY)) {
@ -173,10 +159,6 @@ export default function DragContainerNested({
let left = e.lastEvent.translate[0];
let top = e.lastEvent.translate[1];
console.log('draggedOverElemId child', draggedOverElemId, parent);
// if (!draggedOverElemId) {
// left = left + parentLayout.left * (parentGridWidth / 24);
// top = top + parentLayout.top;
// }
if (draggedOverElemId !== parent) {
left = left + parentLayout.left * parentGridWidth;
@ -184,8 +166,6 @@ export default function DragContainerNested({
if (draggedOverElemId) {
const newParentElem = allComponents[draggedOverElemId]?.layouts?.desktop;
let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId);
// left = left - newParentElem.left * parentGridWidth;
// top = top - newParentElem.top;
left = _left;
top = _top;
}
@ -196,9 +176,7 @@ export default function DragContainerNested({
snapDirections={{ top: true, left: true, bottom: true, right: true }}
snapThreshold={5}
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
// verticalGuidelines={[50, 150, 250, 450, 550]}
// horizontalGuidelines={[0, 100, 200, 400, 500]}
/>
/> */}
</div>
</div>
);