From d7b1bfd3933caf3d546ddb4f2d0f2678e7398a67 Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Tue, 21 Nov 2023 16:28:30 +0530 Subject: [PATCH] feat: moved react-moveable for nested components outside --- frontend/src/Editor/Container.jsx | 34 +++- frontend/src/Editor/DragContainer.css | 4 + frontend/src/Editor/DragContainer.jsx | 155 +++++++++++++++++- .../src/Editor/DragContainerNested copy.jsx | 5 +- frontend/src/Editor/DragContainerNested.jsx | 30 +--- 5 files changed, 186 insertions(+), 42 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index b3592add65..11f2517156 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -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]; diff --git a/frontend/src/Editor/DragContainer.css b/frontend/src/Editor/DragContainer.css index dc1cfd5b0b..fd31830ebe 100644 --- a/frontend/src/Editor/DragContainer.css +++ b/frontend/src/Editor/DragContainer.css @@ -21,4 +21,8 @@ } .moveable-control-box>.moveable-control-box:hover, .moveable-control-box>.moveable-dragging{ visibility: visible !important; +} + +.moveable-control-box { + background: red; } \ No newline at end of file diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx index 4c15244aeb..859e32faec 100644 --- a/frontend/src/Editor/DragContainer.jsx +++ b/frontend/src/Editor/DragContainer.jsx @@ -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 (
@@ -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) => ( + (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, + }, + ]); + }} + /> + ))}
); } + +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; +} diff --git a/frontend/src/Editor/DragContainerNested copy.jsx b/frontend/src/Editor/DragContainerNested copy.jsx index d96b3f172a..d672043bdf 100644 --- a/frontend/src/Editor/DragContainerNested copy.jsx +++ b/frontend/src/Editor/DragContainerNested copy.jsx @@ -87,7 +87,8 @@ export default function DragContainerNested({ {/*
Target1
Target2
Target3
*/} - ({ element: `.ele-${l.id}` }))} // verticalGuidelines={[50, 150, 250, 450, 550]} // horizontalGuidelines={[0, 100, 200, 400, 500]} - /> + /> */} ); diff --git a/frontend/src/Editor/DragContainerNested.jsx b/frontend/src/Editor/DragContainerNested.jsx index b4561a48d0..45ec8791ae 100644 --- a/frontend/src/Editor/DragContainerNested.jsx +++ b/frontend/src/Editor/DragContainerNested.jsx @@ -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)} ))} - {/*
- -
*/} - {/*
- Target12 - -
*/} - {/*
Target1
-
Target2
-
Target3
*/} - ', 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]} - /> + /> */} );