diff --git a/frontend/src/Editor/BoxDragPreview.jsx b/frontend/src/Editor/BoxDragPreview.jsx index 01d4565777..92fc8859c9 100644 --- a/frontend/src/Editor/BoxDragPreview.jsx +++ b/frontend/src/Editor/BoxDragPreview.jsx @@ -29,7 +29,7 @@ export const BoxDragPreview = memo(function BoxDragPreview({ item, canvasWidth } return (
({ @@ -384,16 +385,19 @@ export const Container = ({ ...boxesObj, [id]: { ...boxes[id], + component: { + ...boxes[id]['component'], + parent: parent ? parent : boxes[id]['component']?.parent, + }, layouts: { ...boxes[id]['layouts'], [currentLayout]: { ...boxes[id]['layouts'][currentLayout], // ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w }, top: y, - left: Math.round(x / gridWidth), + left: Math.round(x / (parent ? subContainerWidths[parent] : gridWidth)), }, }, - parent: parent ? parent : boxes[id].parent, }, }), {} @@ -415,7 +419,6 @@ export const Container = ({ // parent: parent ? parent : boxes[id].parent, // }, }; - setBoxes(newBoxes); } @@ -739,6 +742,8 @@ export const Container = ({ currentPageId, childComponents, setIsChildDragged, + setSubContainerWidths: (id, width) => setSubContainerWidths((widths) => ({ ...widths, [id]: width })), + parentGridWidth: gridWidth, }} isVersionReleased={isVersionReleased} /> @@ -755,7 +760,7 @@ export const Container = ({ drop(el); }} style={{ ...styles, height: canvasHeight }} - className={cx('real-canvas', { + className={cx('real-canvas show-grid', { 'show-grid': isDragging || isResizing, })} id="real-canvas" @@ -795,6 +800,7 @@ export const Container = ({ onDrag={onDragStop2} gridWidth={gridWidth} selectedComponents={selectedComponents} + setIsDragging={setIsDragging} /> {/* {Object.keys(boxes).map((key) => { const box = boxes[key]; diff --git a/frontend/src/Editor/DragContainer.css b/frontend/src/Editor/DragContainer.css index 5c71362e7d..769108a94d 100644 --- a/frontend/src/Editor/DragContainer.css +++ b/frontend/src/Editor/DragContainer.css @@ -11,4 +11,5 @@ /* font-weight: bold; */ border: 1px solid #333; box-sizing: border-box; + /* transition: transform 0.1s; */ } \ No newline at end of file diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx index 4424f808ff..c211c678c4 100644 --- a/frontend/src/Editor/DragContainer.jsx +++ b/frontend/src/Editor/DragContainer.jsx @@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow'; import './DragContainer.css'; import DragContainerNested from './DragContainerNested'; import { isEmpty } from 'lodash'; -const NO_OF_GRIDS = 43; +const NO_OF_GRIDS = 24; export default function DragContainer({ boxes, @@ -15,6 +15,7 @@ export default function DragContainer({ onDrag, gridWidth, selectedComponents = [], + setIsDragging, }) { const [dragTarget, setDragTarget] = useState(); const [draggedTarget, setDraggedTarget] = useState(); @@ -25,20 +26,21 @@ export default function DragContainer({ left: box?.layouts?.desktop?.left, top: box?.layouts?.desktop?.top, width: box?.layouts?.desktop?.width, - parent: box.parent, + parent: box?.component?.parent, })); const [list, setList] = useState(boxList); + console.log('>>>>>>>>>>>>>> Rerender'); const hoveredComponent = useEditorStore((state) => state?.hoveredComponent, shallow); useEffect(() => { moveableRef.current.updateRect(); - window.moveableRef = moveableRef.current.updateRect; - }, [selectedComponents.length]); + setTimeout(() => moveableRef.current.updateRect(), 100); + }, [selectedComponents.length, JSON.stringify(boxes)]); useEffect(() => { setList(boxList); - }, [boxes?.length]); + }, [JSON.stringify(boxes)]); const [isChildDragged, setIsChildDragged] = useState(false); @@ -58,15 +60,21 @@ export default function DragContainer({ }; const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)]; + console.log('selectedComponents', selectedComponents); const movableTargets = [groupedTargets]; + console.log('selectedComponents movableTargets', movableTargets); + console.log('selectedComponents hoveredComponent', hoveredComponent); if (hoveredComponent && !groupedTargets?.length) { movableTargets.push('.ele-' + hoveredComponent); } + console.log('selectedComponents draggedTarget', draggedTarget); if (draggedTarget && !movableTargets.includes(`.ele-${draggedTarget}`)) { movableTargets.push('.ele-' + draggedTarget); } + console.log('selectedComponents movableTargets', movableTargets, isChildDragged); + // console.log("movableTargets", movableTargets, hoveredComponent); return ( @@ -81,6 +89,7 @@ export default function DragContainer({ key={i.id} id={i.id} widgetid={i.id} + widget-pos={JSON.stringify(boxes.find((b) => b.id === i.id)?.layouts?.desktop)} style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }} > {/* Target {i.id} */} @@ -100,14 +109,15 @@ export default function DragContainer({ 1} // hideChildMoveableDefaultLines={false} // individualGroupable={true} individualGroupable={selectedComponents.length <= 1} draggable={true} resizable={true} keepRatio={false} - rotatable={true} + // rotatable={true} key={list.length} individualGroupableProps={(element) => { if (element?.classList.contains('target2')) { @@ -117,16 +127,96 @@ export default function DragContainer({ } }} onResize={(e) => { + // console.log('Resize >>>>>>>>>>>>>>', e); + const width = Math.round(e.width / gridWidth) * gridWidth; + + const currentLayout = list.find(({ id }) => id === e.target.id); + const currentWidth = currentLayout.width * gridWidth; + const diffWidth = e.width - currentWidth; + const diffHeight = e.height - currentLayout.height; + console.log('currentLayout width', currentWidth, e.width, diffWidth, e.direction); + const isLeftChanged = e.direction[0] === -1; + const isTopChanged = e.direction[1] === -1; + + console.log( + 'currentLayout transform', + `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, + `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` + ); + e.target.style.width = `${e.width}px`; e.target.style.height = `${e.height}px`; - e.target.style.transform = e.drag.transform; + let transformX = currentLayout.left * gridWidth; + let transformY = currentLayout.top; + if (isLeftChanged) { + transformX = currentLayout.left * gridWidth - diffWidth; + } + if (isTopChanged) { + transformY = currentLayout.top - diffHeight; + } + e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; + + // e.target.style.transform = e.drag.transform; + // onResizeStop([ + // { + // id: e.target.id, + // height: e.height, + // width: width, + // x: e.drag.translate[0], + // y: e.drag.translate[1], + // }, + // ]); + }} + onResizeEnd={(e) => { + console.log('onResizeEnd>>>>>>>>>>>>>>', e); + // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; + // e.target.style.width = `${width}px`; + // e.target.style.height = `${e.lastEvent.height}px`; + // e.target.style.transform = e.lastEvent.drag.transform; + // onResizeStop([ + // { + // id: e.target.id, + // height: e.lastEvent.height, + // width: width, + // x: e.lastEvent.drag.translate[0], + // y: e.lastEvent.drag.translate[1], + // }, + // ]); + + const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; + const height = Math.round(e.lastEvent.height / 10) * 10; + + const currentLayout = list.find(({ id }) => id === e.target.id); + const currentWidth = currentLayout.width * gridWidth; + const diffWidth = e.lastEvent.width - currentWidth; + const diffHeight = e.lastEvent.height - currentLayout.height; + console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight); + const isLeftChanged = e.lastEvent.direction[0] === -1; + const isTopChanged = e.lastEvent.direction[1] === -1; + + console.log( + 'onResizeEnd => currentLayout transform', + `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`, + `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)` + ); + + let transformX = currentLayout.left * gridWidth; + let transformY = currentLayout.top; + if (isLeftChanged) { + transformX = currentLayout.left * gridWidth - diffWidth; + } + if (isTopChanged) { + transformY = currentLayout.top - diffHeight; + } + + // e.target.style.transform = e.drag.transform; onResizeStop([ { id: e.target.id, - height: e.height, - width: e.width, - x: e.drag.translate[0], - y: e.drag.translate[1], + height: height, + width: width, + x: transformX, + y: transformY, }, ]); }} @@ -147,7 +237,9 @@ export default function DragContainer({ onResizeStop(newBoxs); }} checkInput + onDragStart={() => setIsDragging(true)} onDragEnd={(e) => { + setIsDragging(false); console.log('onDragEnd', e); setDraggedTarget(); if (isChildDragged) { @@ -173,8 +265,21 @@ export default function DragContainer({ console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); draggedOverElemId = draggedOverElem?.id; } + // console.log("draggedOverElemId", draggedOverElemId); + const parentElem = list.find(({ id }) => id === draggedOverElemId); + let left = e.lastEvent.translate[0]; + let top = e.lastEvent.translate[1]; + if (parentElem) { + left = left - parentElem.left * gridWidth; + top = top - parentElem.top; + } onDrag([ - { id: e.target.id, x: e.lastEvent.translate[0], y: e.lastEvent.translate[1], parent: draggedOverElemId }, + { + id: e.target.id, + x: left, + y: top, + parent: draggedOverElemId, + }, ]); }} onDrag={(e) => { @@ -185,9 +290,16 @@ export default function DragContainer({ // onDrag(e.target.id, e.translate[0], e.translate[1]); // console.log(e.target.style); if (!isChildDragged) { - e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${ - Math.round(e.translate[1] / 10) * 10 - }px)`; + // e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${ + // Math.round(e.translate[1] / 10) * 10 + // }px)`; + e.target.style.transform = `translate(${e.translate[0]}px, ${e.translate[1]}px)`; + e.target.setAttribute( + 'widget-pos2', + `translate: ${e.translate[0]} | Round: ${ + Math.round(e.translate[0] / gridWidth) * gridWidth + } | ${gridWidth}` + ); } // let draggedOverElemId; @@ -218,7 +330,9 @@ 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 }} + 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}` }))} // verticalGuidelines={[50, 150, 250, 450, 550]} diff --git a/frontend/src/Editor/DragContainerNested.jsx b/frontend/src/Editor/DragContainerNested.jsx index efa853a4c0..13379d802b 100644 --- a/frontend/src/Editor/DragContainerNested.jsx +++ b/frontend/src/Editor/DragContainerNested.jsx @@ -1,8 +1,17 @@ import React, { useState, useEffect, useRef } from 'react'; -import Moveable from 'react-moveable'; +import Moveable, { makeAble } from 'react-moveable'; import './DragContainer.css'; import { isEmpty } from 'lodash'; -const NO_OF_GRIDS = 43; +const NO_OF_GRIDS = 24; + +const MouseEnterLeaveAble = makeAble('enterLeave', { + mouseEnter(moveable) { + console.log('moveable', moveable); + }, + mouseLeave(moveable) { + console.log('moveable2', moveable); + }, +}); export default function DragContainer({ boxes, @@ -14,6 +23,7 @@ export default function DragContainer({ setIsChildDragged, parent, parentLayout, + parentGridWidth, }) { const [dragTarget, setDragTarget] = useState(); const boxList = boxes.map((box) => ({ @@ -32,7 +42,7 @@ export default function DragContainer({ useEffect(() => { moveableRef.current.updateRect(); - }, [...Object.values(parentLayout)]); + }, [...Object.values(parentLayout), boxes?.length]); // const [isChildDragged, setIsChildDragged] = useState(false); @@ -78,11 +88,16 @@ export default function DragContainer({ { if (element?.classList.contains('target2')) { @@ -101,29 +116,59 @@ export default function DragContainer({ checkInput onDrag={(e) => { setIsChildDragged(true); - onDrag(e.target.id, e.translate[0], e.translate[1]); // 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)) { - // const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - // // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); - // const draggedOverElem = targetElems.find( - // (ele) => ele.id !== e.target.id && ele.classList.contains('target') - // ); - // setDragTarget(draggedOverElem?.id); - // console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); - // draggedOverElemId = draggedOverElem?.id; - // } + let draggedOverElemId; + if (document.elementFromPoint(e.clientX, e.clientY)) { + const targetElems = document.elementsFromPoint(e.clientX, e.clientY); + // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); + const draggedOverElem = targetElems.find( + (ele) => ele.id !== e.target.id && ele.classList.contains('target') + ); + setDragTarget(draggedOverElem?.id); + console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); + draggedOverElemId = draggedOverElem?.id; + } + console.log('draggedOverElemId child', draggedOverElemId); + // onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId); }} //snap settgins snappable={true} - onDragEnd={() => setIsChildDragged(false)} + onDragEnd={(e) => { + 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)) { + const targetElems = document.elementsFromPoint(e.clientX, e.clientY); + // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); + const draggedOverElem = targetElems.find( + (ele) => ele.id !== e.target.id && ele.classList.contains('target') + ); + setDragTarget(draggedOverElem?.id); + console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); + draggedOverElemId = draggedOverElem?.id; + } + let left = e.lastEvent.translate[0]; + let top = e.lastEvent.translate[1]; + console.log('draggedOverElemId child', draggedOverElemId); + if (!draggedOverElemId) { + left = left + parentLayout.left * (parentGridWidth / 24); + top = top + parentLayout.top; + } + // onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId); + + onDrag(e.target.id, left, top, draggedOverElemId); + }} snapDirections={{ top: true, left: true, bottom: true, right: true }} snapThreshold={5} elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))} diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx index 2871b1852d..a73e03a9c7 100644 --- a/frontend/src/Editor/DraggableBox.jsx +++ b/frontend/src/Editor/DraggableBox.jsx @@ -13,7 +13,7 @@ import { useCurrentState } from '@/_stores/currentStateStore'; import { useEditorStore } from '@/_stores/editorStore'; import { shallow } from 'zustand/shallow'; -const NO_OF_GRIDS = 43; +const NO_OF_GRIDS = 24; const resizerClasses = { topRight: 'top-right', diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index a23b645080..f2a333d471 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -760,7 +760,7 @@ class EditorComponent extends React.Component { let top = draft[selectedComponent.id].layouts[this.props.currentLayout].top; let left = draft[selectedComponent.id].layouts[this.props.currentLayout].left; - const gridWidth = (1 * 100) / 43; // width of the canvas grid in percentage + const gridWidth = (1 * 100) / 24; // width of the canvas grid in percentage switch (direction) { case 'ArrowLeft': diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 207fd770a8..1b2a2f2ba3 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -1145,7 +1145,7 @@ const EditorComponent = (props) => { }; const moveComponents = (direction) => { - const gridWidth = (1 * 100) / 43; // width of the canvas grid in percentage + const gridWidth = (1 * 100) / 24; // width of the canvas grid in percentage const _appDefinition = _.cloneDeep(appDefinition); let newComponents = _appDefinition?.pages[currentPageId].components; @@ -1689,7 +1689,7 @@ const EditorComponent = (props) => { {!showComments && ( { //Todo add custom resolve vars for other widgets too const mounted = useMounted(); @@ -109,6 +111,7 @@ export const SubContainer = ({ const [boxes, setBoxes] = useState(allComponents); const [childWidgets, setChildWidgets] = useState([]); + console.log('childWidgets', childWidgets); const [isDragging, setIsDragging] = useState(false); const [isResizing, setIsResizing] = useState(false); // const [subContainerHeight, setSubContainerHeight] = useState('100%'); //used to determine the height of the sub container for modal @@ -121,6 +124,13 @@ export const SubContainer = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [allComponents, parent]); + const containerWidth = getContainerCanvasWidth(); + + useEffect(() => { + setSubContainerWidths(parent, containerWidth / NO_OF_GRIDS); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [containerWidth]); + useEffect(() => { if (mounted) { //find children with parent prop @@ -516,6 +526,7 @@ export const SubContainer = ({ }; function onDragStop2(id, x, y, parent) { + // const parentGridWidth = parentGridWidth; let newBoxes = { ...boxes, [id]: { @@ -526,10 +537,13 @@ export const SubContainer = ({ ...boxes[id]['layouts'][currentLayout], // ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w }, top: y, - left: Math.round(x / gridWidth), + left: Math.round(x / (parent ? gridWidth : parentGridWidth)), }, }, - parent: parent ? parent : boxes[id].parent, + component: { + ...boxes[id]['component'], + parent: !parent ? parent : boxes[id]['component']?.parent, + }, }, }; @@ -606,13 +620,16 @@ export const SubContainer = ({ } const renderWidget = (key, height) => { - console.log(key, height); + console.log('childeWidget', key, height); + if (!childWidgets[key]) { + return; + } const addDefaultChildren = childWidgets[key]['withDefaultChildren'] || false; const box = childWidgets[key]; const canShowInCurrentLayout = box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; - if (box.parent && resolveReferences(canShowInCurrentLayout, currentState)) { + if (box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) { return ( {/* {checkParentVisibility() && Object.keys(childWidgets).map((key) => { diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index a0b852ca72..e0a5e4afcb 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/frontend/src/_helpers/appUtils.js @@ -1658,7 +1658,7 @@ export const addNewWidgetToTheEditor = ( [left, top] = snapToGrid(subContainerWidth, left, top); } - const gridWidth = subContainerWidth / 43; + const gridWidth = subContainerWidth / 24; left = Math.round(left / gridWidth); console.log('Top calc', { top, initialClientOffset, delta, zoomLevel, offsetFromTopOfWindow, subContainerWidth }); // left = (left * 100) / subContainerWidth;