From 726060fb63612d2d8f22293b76d2cb783c10682d Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Tue, 12 Dec 2023 09:23:43 +0530 Subject: [PATCH] refactor: removed unused and old code --- frontend/src/Editor/Container.jsx | 154 +-------------- frontend/src/Editor/DragContainer.jsx | 109 ----------- frontend/src/Editor/DragContainerNested.jsx | 200 +------------------- frontend/src/Editor/DraggableBox.jsx | 42 ---- frontend/src/Editor/SubContainer.jsx | 127 +------------ 5 files changed, 12 insertions(+), 620 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 93f74e221b..655d1fb5ad 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -349,49 +349,7 @@ export const Container = ({ [moveBox] ); - const onDragStop = useCallback( - (e, componentId, direction, currentLayout) => { - if (isVersionReleased) { - enableReleasedVersionPopupState(); - return; - } - // const id = componentId ? componentId : uuidv4(); - - // Get the width of the canvas - const canvasBounds = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect(); - const canvasWidth = canvasBounds?.width; - const nodeBounds = direction.node.getBoundingClientRect(); - - // Computing the left offset - const leftOffset = nodeBounds.x - canvasBounds.x; - const currentLeftOffset = boxes[componentId]?.layouts?.[currentLayout]?.left; - const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth); - - // Computing the top offset - // const currentTopOffset = boxes[componentId].layouts[currentLayout].top; - const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y); - - let newBoxes = { ...boxes }; - - for (const selectedComponent of selectedComponents) { - newBoxes = produce(newBoxes, (draft) => { - if (draft[selectedComponent.id]) { - const topOffset = draft[selectedComponent.id].layouts[currentLayout].top; - const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left; - - draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff; - draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff; - } - }); - } - - setBoxes(newBoxes); - updateCanvasHeight(newBoxes); - }, - [isVersionReleased, enableReleasedVersionPopupState, boxes, setBoxes, selectedComponents, updateCanvasHeight] - ); - - const onResizeStop2 = (boxList, id, height, width, x, y) => { + const onResizeStop = (boxList, id, height, width, x, y) => { const newBoxes = boxList.reduce((newBoxList, { id, height, width, x, y, gw }) => { const _canvasWidth = gw ? gw * noOfGrids : canvasWidth; const newWidth = (width * noOfGrids) / _canvasWidth; @@ -422,7 +380,7 @@ export const Container = ({ updateCanvasHeight(updatedBoxes); }; - function onDragStop2(boxPositions) { + function onDragStop(boxPositions) { const updatedBoxes = boxPositions.reduce((boxesObj, { id, x, y, parent }) => { let _width = boxes[id]['layouts'][currentLayout].width; const containerWidth = parent ? subContainerWidths[parent] : gridWidth; @@ -483,69 +441,6 @@ export const Container = ({ setBoxes(newBoxes); } - const onResizeStop = useCallback( - (id, e, direction, ref, d, position) => { - if (isVersionReleased) { - enableReleasedVersionPopupState(); - return; - } - - const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth - const deltaHeight = d.height; - - if (deltaWidth === 0 && deltaHeight === 0) { - return; - } - - let { x, y } = position; - x = Math.round(x / gridWidth) * gridWidth; - - const defaultData = { - top: 100, - left: 0, - width: 445, - height: 500, - }; - - let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData; - - const boundingRect = document.getElementsByClassName('canvas-area')[0].getBoundingClientRect(); - const canvasWidth = boundingRect?.width; - - //round the width to nearest multiple of gridwidth before converting to % - const currentWidth = (canvasWidth * width) / noOfGrids; - let newWidth = currentWidth + deltaWidth; - newWidth = Math.round(newWidth / gridWidth) * gridWidth; - width = (newWidth * noOfGrids) / canvasWidth; - - height = height + deltaHeight; - - top = y; - left = (x * 100) / canvasWidth; - - let newBoxes = { - ...boxes, - [id]: { - ...boxes[id], - layouts: { - ...boxes[id]['layouts'], - [currentLayout]: { - ...boxes[id]['layouts'][currentLayout], - width, - height, - top, - left, - }, - }, - }, - }; - - setBoxes(newBoxes); - updateCanvasHeight(newBoxes); - }, - [setBoxes, currentLayout, boxes, enableReleasedVersionPopupState, isVersionReleased, updateCanvasHeight, gridWidth] - ); - const paramUpdated = useCallback( (id, param, value, opts = {}) => { if (Object.keys(value)?.length > 0) { @@ -761,8 +656,6 @@ export const Container = ({ onComponentOptionChanged={onComponentOptionChanged} onComponentOptionsChanged={onComponentOptionsChanged} key={key} - onResizeStop={onResizeStop} - onDragStop={onDragStop} paramUpdated={paramUpdated} id={key} {...boxes[key]} @@ -863,8 +756,8 @@ export const Container = ({ boxes={Object.keys(boxes).map((key) => ({ ...boxes[key], id: key }))} renderWidget={renderWidget} canvasWidth={canvasWidth} - onResizeStop={onResizeStop2} - onDrag={onDragStop2} + onResizeStop={onResizeStop} + onDrag={onDragStop} gridWidth={gridWidth} selectedComponents={selectedComponents} setIsDragging={setIsDragging} @@ -876,45 +769,6 @@ export const Container = ({ setDraggedSubContainer={setDraggedSubContainer} draggedSubContainer={draggedSubContainer} /> - {/* {Object.keys(boxes).map((key) => { - const box = boxes[key]; - const canShowInCurrentLayout = - box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; - const addDefaultChildren = box.withDefaultChildren; - - if (!box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) { - return ( - - ); - } - })} */} {Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx index 1eacfaf4ef..af480a7bbd 100644 --- a/frontend/src/Editor/DragContainer.jsx +++ b/frontend/src/Editor/DragContainer.jsx @@ -133,9 +133,6 @@ export default function DragContainer({ useEffect(() => { const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)]; - // const newMovableTargets = groupedTargets.length - // ? [groupedTargets.length == 1 ? groupedTargets[0] : groupedTargets] - // : []; const newMovableTargets = groupedTargets.length ? [...groupedTargets] : []; if (hoveredComponent && groupedTargets?.length <= 1 && !groupedTargets.includes('.ele-' + hoveredComponent)) { newMovableTargets.push('.ele-' + hoveredComponent); @@ -193,30 +190,7 @@ export default function DragContainer({ transform: `translate(332px, -134px)`, ...getDimensions(i.id), }} - // onMouseEnter={(e) => { - // try { - // // console.log('onMouseEnter', e.target); - // let compId; - // if (e.target.classList.contains('widget-target')) { - // compId = e.target.id; - // } else { - // compId = e.target.closest('.widget-target').id; - // } - // const targetComponents = Array.prototype.filter.call( - // document.getElementsByClassName('rm-container')[0].children, - // (child) => { - // return child.classList.contains('widget-target'); - // } - // ); - // const elemIndex = _.findIndex(targetComponents, ({ id }) => id === compId); - // console.log('onMouseEnter =>', compId, targetComponents, elemIndex); - // } catch (error) { - // console.log('onMouseEnter error', error); - // } - // }} - // onMouseLeave={(e) => {}} > - {/* Target {i.id} */} {renderWidget(i.id, undefined, (dragged) => { console.log('====> dragged <=====', dragged); setDraggedSubContainer(dragged); @@ -231,16 +205,10 @@ export default function DragContainer({ mouseTest: true, }} flushSync={flushSync} - // target={movableTargets} - // target={'.move-target'} - // target={draggedSubContainer ? 'nothing1' : groupedTargets.length ? [...groupedTargets] : ['.widget-target']} target={ draggedSubContainer ? '.asdadadasdadad' : groupedTargets.length > 1 ? [...groupedTargets] : '.widget-target' } - // hideDefaultLines origin={false} - // hideChildMoveableDefaultLines={false} - // individualGroupable={true} individualGroupable={selectedComponents.length <= 1} draggable={true} resizable={{ @@ -248,7 +216,6 @@ export default function DragContainer({ renderDirections: ['e', 'w', 'n', 's'], }} keepRatio={false} - // rotatable={true} key={list.length} individualGroupableProps={(element) => { if (element?.classList.contains('target2')) { @@ -453,12 +420,7 @@ export default function DragContainer({ return; } setDraggedTarget(e.target.id); - // onDrag(e.target.id, e.translate[0], e.translate[1]); - // console.log(e.target.style); if (!draggedSubContainer) { - // 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', @@ -471,16 +433,6 @@ export default function DragContainer({ 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 })); - // console.log( - // 'draggedOverElem - list', - // targetElems, - // targetElems.filter( - // (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') ); @@ -489,13 +441,8 @@ export default function DragContainer({ draggedOverElemId = draggedOverElem?.id; } console.log('draggedOverElemId parent', draggedOverElemId, parent); - // onDrag([{ id: e.target.id, x: e.translate[0], y: e.translate[1], parent: draggedOverElemId }]); }} onDragGroup={({ events }) => { - events.forEach((ev) => { - console.log('Grouped data=>', ev); - // ev.target.style.transform = ev.transform; - }); onDrag( events.map((ev) => ({ id: ev.target.id, @@ -512,7 +459,6 @@ export default function DragContainer({ }} //snap settgins snappable={true} - // snapDirections={{ top: true, left: true, bottom: true, right: true }} snapDirections={{ top: true, left: true, @@ -533,10 +479,6 @@ export default function DragContainer({ elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))} isDisplaySnapDigit={false} snapGridWidth={gridWidth} - // stopPropagation={true} - // snapGridHeight={10} - // verticalGuidelines={[50, 150, 250, 450, 550]} - // horizontalGuidelines={[0, 100, 200, 400, 500]} /> {removeDuplicates(list) @@ -631,13 +573,6 @@ export default function DragContainer({ console.log('Grouped data=>', ev); ev.target.style.transform = ev.transform; }); - // onDrag( - // events.map((ev) => ({ - // id: ev.target.id, - // x: ev.translate[0], - // y: ev.translate[1], - // })) - // ); }} onResizeStart={(e) => { if (currentLayout === 'mobile' && autoComputeLayout) { @@ -646,7 +581,6 @@ export default function DragContainer({ } }} onResize={(e) => { - console.log('onResize', e); const gridWidth = subContainerWidths[i.parent]; const width = Math.round(e.width / gridWidth) * gridWidth; @@ -654,16 +588,9 @@ export default function DragContainer({ 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`; let transformX = currentLayout.left * gridWidth; @@ -675,35 +602,10 @@ export default function DragContainer({ 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) => { try { - console.log('onResizeEnd>>>>>>>>>>>>>>', e); const gridWidth = subContainerWidths[i.parent]; - // 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; @@ -712,16 +614,9 @@ export default function DragContainer({ 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) { @@ -800,10 +695,6 @@ function getMouseDistanceFromParentDiv(event, id) { 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; diff --git a/frontend/src/Editor/DragContainerNested.jsx b/frontend/src/Editor/DragContainerNested.jsx index 5408c2f9e2..cf2b895863 100644 --- a/frontend/src/Editor/DragContainerNested.jsx +++ b/frontend/src/Editor/DragContainerNested.jsx @@ -1,33 +1,9 @@ -import React, { useState, useEffect, useRef } from 'react'; -import Moveable, { makeAble } from 'react-moveable'; +import React, { useState, useEffect } from 'react'; import './DragContainer.css'; import { isEmpty } from 'lodash'; -import { useActiveGrid } from '@/_stores/gridStore'; const NO_OF_GRIDS = 43; -const MouseEnterLeaveAble = makeAble('enterLeave', { - mouseEnter(moveable) { - console.log('moveable', moveable); - }, - mouseLeave(moveable) { - console.log('moveable2', moveable); - }, -}); - -export default function DragContainerNested({ - boxes, - renderWidget, - canvasWidth, - onResizeStop, - onDrag, - gridWidth, - setIsChildDragged, - parent, - parentLayout, - parentGridWidth, - allComponents, -}) { - const [dragTarget, setDragTarget] = useState(); +export default function DragContainerNested({ boxes, renderWidget, canvasWidth, gridWidth, parent, currentLayout }) { const boxList = boxes.map((box) => ({ id: box.id, height: box?.layouts?.desktop?.height, @@ -36,22 +12,14 @@ export default function DragContainerNested({ width: box?.layouts?.desktop?.width, })); const [list, setList] = useState(boxList); - const moveableRef = useRef(); - const [activeGrid, setActiveGrid] = useActiveGrid(); useEffect(() => { setList(boxList); }, [boxes?.length]); - useEffect(() => { - // moveableRef.current.updateRect(); - }, [...Object.values(parentLayout), boxes?.length, activeGrid]); - - // const [isChildDragged, setIsChildDragged] = useState(false); - const getDimensions = (id) => { const box = boxes.find((b) => b.id === id); - const layoutData = box?.layouts?.desktop; + const layoutData = box?.layouts?.[currentLayout]; if (isEmpty(layoutData)) { return {}; } @@ -80,169 +48,7 @@ export default function DragContainerNested({ {renderWidget(i.id)}
))} - - {/* { - if (element?.classList.contains('target2')) { - return { - resizable: false, - }; - } - }} - onResize={(e) => { - console.log('e._dragTarget.id', e.target, e.target.id, e.drag); - e.target.style.width = `${e.width}px`; - e.target.style.height = `${e.height}px`; - e.target.style.transform = e.drag.transform; - onResizeStop(e.target.id, e.height, e.width, e.drag.translate[0], e.drag.translate[1]); - }} - checkInput - onDragStart={(e) => { - console.log('debugger====>', e, parent); - setActiveGrid(e.target.getAttribute('widgetid')); - setIsChildDragged(true); - }} - onDrag={(e) => { - setIsChildDragged(true); - // 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; - } - console.log('draggedOverElemId child', draggedOverElemId, parent); - - // onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId); - }} - //snap settgins - snappable={true} - onDragEnd={(e) => { - console.log('debugger====>', e, parent); - setActiveGrid(null); - setIsChildDragged(false); - - 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, parent); - - if (draggedOverElemId !== parent) { - left = left + parentLayout.left * parentGridWidth; - top = top + parentLayout.top; - if (draggedOverElemId) { - const newParentElem = allComponents[draggedOverElemId]?.layouts?.desktop; - let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId); - left = _left; - top = _top; - } - } - - 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}` }))} - /> */}
); } - -function getMouseDistanceFromParentDiv(event, id) { - // Get the parent div element. - const parentDiv = document.getElementById(id); - - // Get the bounding rectangle of the parent div. - const parentDivRect = parentDiv.getBoundingClientRect(); - - // Get the mouse position relative to the parent div. - const mouseX = event.clientX - parentDivRect.left; - const mouseY = event.clientY - 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 }; -} - -// export default function DragContainer({ setIsChildDragged }) { -// const [list, setList] = useState([1, 2, 3]); -// return ( -//
-//
-// -// {list.map((i) => ( -//
-// Target1 -//
-// ))} -//
Target1
-// {/*
Target1
-//
Target2
-//
Target3
*/} -// { -// if (element?.classList.contains('target2')) { -// return { -// resizable: false, -// }; -// } -// }} -// onDragEnd={() => setIsChildDragged(false)} -// onRender={(e) => { -// console.log('e.target.style', e.cssText); -// setIsChildDragged(true); -// e.target.style.cssText += e.cssText; -// }} -// //snap settgins -// snappable={true} -// snapDirections={{ top: true, left: true, bottom: true, right: true }} -// snapThreshold={5} -// verticalGuidelines={[50, 150, 250, 450, 550]} -// horizontalGuidelines={[0, 100, 200, 400, 500]} -// /> -//
-//
-// ); -// } diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx index 87d63fa406..7e70c8f565 100644 --- a/frontend/src/Editor/DraggableBox.jsx +++ b/frontend/src/Editor/DraggableBox.jsx @@ -81,8 +81,6 @@ export const DraggableBox = React.memo( onComponentClick, onComponentOptionChanged, onComponentOptionsChanged, - onResizeStop, - onDragStop, paramUpdated, resizingStatusChanged, zoomLevel, @@ -239,46 +237,6 @@ export const DraggableBox = React.memo( }} style={getStyles(isDragging, isSelectedComponent)} > - {/* setResizing(true)} - onDrag={(e) => { - e.preventDefault(); - e.stopImmediatePropagation(); - if (!isDragging2) { - setDragging(true); - } - }} - resizeHandleClasses={isSelectedComponent || mouseOver ? resizerClasses : {}} - resizeHandleStyles={resizerStyles} - enableResizing={mode === 'edit' && !readOnly} - disableDragging={mode !== 'edit' || readOnly} - onDragStop={(e, direction) => { - setDragging(false); - onDragStop(e, id, direction, currentLayout, layoutData); - }} - cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container, div.real-canvas`} - onResizeStop={(e, direction, ref, d, position) => { - setResizing(false); - onResizeStop(id, e, direction, ref, d, position); - }} - bounds={parent !== undefined ? `#canvas-${parent}` : '.real-canvas'} - widgetId={id} - > */}
{mode === 'edit' && !readOnly && diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx index 68ee9b3b19..95cf012bb4 100644 --- a/frontend/src/Editor/SubContainer.jsx +++ b/frontend/src/Editor/SubContainer.jsx @@ -79,7 +79,8 @@ export const SubContainer = ({ }), shallow ); - const [noOfGrids] = useNoOfGrid(); + // const [noOfGrids] = useNoOfGrid(); + const noOfGrids = 43; const gridWidth = getContainerCanvasWidth() / noOfGrids; @@ -399,118 +400,7 @@ export const SubContainer = ({ return width; } - function onDragStop(e, componentId, direction, currentLayout) { - if (isVersionReleased) { - enableReleasedVersionPopupState(); - return; - } - - const canvasWidth = getContainerCanvasWidth(); - const nodeBounds = direction.node.getBoundingClientRect(); - - const canvasBounds = parentRef.current.getElementsByClassName('real-canvas')[0].getBoundingClientRect(); - - // Computing the left offset - const leftOffset = nodeBounds.x - canvasBounds.x; - const currentLeftOffset = boxes[componentId].layouts[currentLayout].left; - const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth); - - const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y); - - let newBoxes = { ...boxes }; - - const subContainerHeight = canvasBounds.height - 30; - - if (selectedComponents) { - for (const selectedComponent of selectedComponents) { - newBoxes = produce(newBoxes, (draft) => { - const topOffset = draft[selectedComponent.id].layouts[currentLayout].top; - const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left; - - draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff; - draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff; - }); - - const componentBottom = - newBoxes[selectedComponent.id].layouts[currentLayout].top + - newBoxes[selectedComponent.id].layouts[currentLayout].height; - - if (isParentModal && subContainerHeight <= componentBottom) { - subContainerHeightRef.current = subContainerHeight + 100; - } - } - } - - setChildWidgets(() => getChildWidgets(newBoxes)); - setBoxes(newBoxes); - } - - function onResizeStop(id, e, direction, ref, d, position) { - if (isVersionReleased) { - enableReleasedVersionPopupState(); - return; - } - - const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth - const deltaHeight = d.height; - - if (deltaWidth === 0 && deltaHeight === 0) { - return; - } - - let { x, y } = position; - x = Math.round(x / gridWidth) * gridWidth; - - const defaultData = { - top: 100, - left: 0, - width: 445, - height: 500, - }; - - let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData; - - top = y; - if (deltaWidth !== 0) { - // onResizeStop is triggered for a single click on the border, therefore this conditional logic - // should not be removed. - left = (x * 100) / _containerCanvasWidth; - } - - //round the width to nearest multiple of gridwidth before converting to % - let currentWidth = (_containerCanvasWidth * width) / noOfGrids; - - if (currentWidth > _containerCanvasWidth) { - currentWidth = _containerCanvasWidth; - } - - let newWidth = currentWidth + deltaWidth; - newWidth = Math.round(newWidth / gridWidth) * gridWidth; - width = (newWidth * noOfGrids) / _containerCanvasWidth; - - height = height + deltaHeight; - - let newBoxes = { - ...boxes, - [id]: { - ...boxes[id], - layouts: { - ...boxes[id]['layouts'], - [currentLayout]: { - ...boxes[id]['layouts'][currentLayout], - width, - height, - top, - left, - }, - }, - }, - }; - - setBoxes(newBoxes); - } - - const onResizeStop2 = (id, height, width, x, y) => { + const onResizeStop = (id, height, width, x, y) => { const newWidth = (width * noOfGrids) / _containerCanvasWidth; let newBoxes = { ...boxes, @@ -533,7 +423,7 @@ export const SubContainer = ({ // updateCanvasHeight(newBoxes); }; - function onDragStop2(id, x, y, parent) { + function onDragStop(id, x, y, parent) { // const parentGridWidth = parentGridWidth; const subContainerGridWidth = parent ? subContainerWidths[parent] || gridWidth : parentGridWidth; let newBoxes = { @@ -650,8 +540,6 @@ export const SubContainer = ({ onComponentOptionChanged={onComponentOptionChangedForSubcontainer} onComponentOptionsChanged={onComponentOptionsChanged} key={key} - onResizeStop={onResizeStop} - onDragStop={onDragStop} paramUpdated={paramUpdated} id={key} allComponents={allComponents} @@ -722,14 +610,9 @@ export const SubContainer = ({ boxes={Object.keys(childWidgets).map((key) => ({ ...boxes[key], id: key }))} renderWidget={renderWidget} canvasWidth={_containerCanvasWidth} - onResizeStop={onResizeStop2} - onDrag={onDragStop2} gridWidth={gridWidth} - setIsChildDragged={setIsChildDragged} parent={parent} - parentLayout={appDefinition.pages[currentPageId]?.components[parent]?.layouts?.[currentLayout]} - parentGridWidth={parentGridWidth} - allComponents={allComponents} + currentLayout={currentLayout} /> {/* {checkParentVisibility() && Object.keys(childWidgets).map((key) => {