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 (
-// 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) => {