diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 655d1fb5ad..fa950280cd 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -768,6 +768,7 @@ export const Container = ({
autoComputeLayout={appDefinition.pages[currentPageId]?.autoComputeLayout}
setDraggedSubContainer={setDraggedSubContainer}
draggedSubContainer={draggedSubContainer}
+ mode={mode}
/>
{Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index 84c92ef4b6..124b1ac738 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -56,6 +56,7 @@ const MouseEnterLeaveAble = makeAble('enterLeave', {
export default function DragContainer({
boxes,
+ mode,
renderWidget,
canvasWidth,
onResizeStop,
@@ -92,6 +93,9 @@ export default function DragContainer({
const [count, setCount] = useState(0);
useEffect(() => {
+ if (!moveableRef.current) {
+ return;
+ }
moveableRef.current.updateRect();
moveableRef.current.updateTarget();
moveableRef.current.updateSelectors();
@@ -208,407 +212,113 @@ export default function DragContainer({
})}
))}
-
- 1)
- ? '.empty-widget'
- : groupedTargets.length > 1
- ? [...groupedTargets]
- : '.widget-target'
- }
- origin={false}
- individualGroupable={selectedComponents.length <= 1}
- draggable={true}
- resizable={{
- edge: ['e', 'w', 'n', 's'],
- renderDirections: ['e', 'w', 'n', 's'],
- }}
- keepRatio={false}
- key={list.length}
- individualGroupableProps={(element) => {
- if (element?.classList.contains('target2')) {
- return {
- resizable: false,
- };
- }
- }}
- onResize={(e) => {
- console.log('onResize', 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`;
- 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) => {
- try {
- 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;
+ {mode === 'edit' && (
+ <>
+ 1)
+ ? '.empty-widget'
+ : groupedTargets.length > 1
+ ? [...groupedTargets]
+ : '.widget-target'
}
+ origin={false}
+ individualGroupable={selectedComponents.length <= 1}
+ draggable={true}
+ resizable={{
+ edge: ['e', 'w', 'n', 's'],
+ renderDirections: ['e', 'w', 'n', 's'],
+ }}
+ keepRatio={false}
+ key={list.length}
+ individualGroupableProps={(element) => {
+ if (element?.classList.contains('target2')) {
+ return {
+ resizable: false,
+ };
+ }
+ }}
+ onResize={(e) => {
+ console.log('onResize', e);
+ const width = Math.round(e.width / gridWidth) * gridWidth;
- // e.target.style.transform = e.drag.transform;
- onResizeStop([
- {
- id: e.target.id,
- height: height,
- width: width,
- x: transformX,
- y: transformY,
- },
- ]);
- } catch (error) {
- console.error('ResizeEnd error ->', error);
- }
- }}
- onResizeStart={(e) => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- }}
- onResizeGroupStart={(e) => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- }}
- onResizeGroup={({ events }) => {
- const newBoxs = [];
- events.forEach((ev) => {
- ev.target.style.width = `${ev.width}px`;
- ev.target.style.height = `${ev.height}px`;
- ev.target.style.transform = ev.drag.transform;
- newBoxs.push({
- id: ev.target.id,
- height: ev.height,
- width: ev.width,
- x: ev.drag.translate[0],
- y: ev.drag.translate[1],
- });
- });
- onResizeStop(newBoxs);
- }}
- checkInput
- onDragStart={(e) => {
- console.log('On-drag start => ', e?.moveable?.getControlBoxElement());
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- setDraggedTarget(e.target.id);
- setIsDragging(true);
- }}
- onDragEnd={(e) => {
- console.log('onDragEnd', e);
- try {
- console.log('On-drag end => ');
- setIsDragging(false);
- console.log('onDragEnd', e);
- setDraggedTarget();
- if (draggedSubContainer) {
- return;
- }
+ 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;
- let draggedOverElemId;
- if (document.elementFromPoint(e.clientX, e.clientY)) {
- const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
- const draggedOverElem = targetElems.find(
- (ele) =>
- ele.id !== e.target.id &&
- (ele.classList.contains('target') || ele.classList.contains('nested-target'))
+ console.log(
+ 'currentLayout transform',
+ `translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`,
+ `translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)`
);
- setDragTarget(draggedOverElem?.id);
- 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];
- const currentWidget = boxes.find(({ id }) => id === e.target.id)?.component?.component;
- const parentWidget = boxes.find(({ id }) => id === parentElem.id)?.component?.component;
- const restrictedWidgets = restrictedWidgetsObj[parentWidget];
- const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
- if (parentElem && isParentChangeAllowed) {
- left = left - parentElem.left * gridWidth;
- top = top - parentElem.top;
- } else {
- e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${
- Math.round(top / 10) * 10
- }px)`;
- }
- onDrag([
- {
- id: e.target.id,
- x: left,
- y: Math.round(top / 10) * 10,
- parent: isParentChangeAllowed ? draggedOverElemId : undefined,
- },
- ]);
- } catch (error) {
- console.log('error', error);
- }
- }}
- onDrag={(e) => {
- console.log('On-drag ... => ');
- if (draggedSubContainer) {
- return;
- }
- setDraggedTarget(e.target.id);
- if (!draggedSubContainer) {
- 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}`
- );
- }
+ e.target.style.width = `${e.width}px`;
+ e.target.style.height = `${e.height}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 = `translate(${transformX}px, ${transformY}px)`;
- let draggedOverElemId;
- if (document.elementFromPoint(e.clientX, e.clientY)) {
- const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
- 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 parent', draggedOverElemId, parent);
- }}
- onDragGroup={({ events }) => {
- onDrag(
- events.map((ev) => ({
- id: ev.target.id,
- x: ev.translate[0],
- y: ev.translate[1],
- }))
- );
- }}
- onDragGroupStart={() => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- }}
- //snap settgins
- snappable={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}`, className: 'grid-guide-lines' }))}
- isDisplaySnapDigit={false}
- snapGridWidth={gridWidth}
- />
+ // 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 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],
+ // },
+ // ]);
- {removeDuplicates(list)
- .filter((i) => !isEmpty(i.parent))
- .map((i) => {
- let groupedTargets1 = [
- ...selectedComponents
- .filter((component) => component?.component?.parent === i.parent)
- .map((component) => '.ele-' + component.id),
- ];
- groupedTargets1 = [...new Set(groupedTargets1)];
- console.log(
- 'groupedTargets-->target ' + i.parent,
- groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`
- );
- return (
- (childMoveableRefs.current[i.id] = el)}
- ables={[MouseCustomAble]}
- props={{
- mouseTest: true,
- }}
- target={groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`}
- draggable={true}
- resizable={{
- edge: ['e', 'w', 'n', 's'],
- renderDirections: ['e', 'w', 'n', 's'],
- }}
- // stopPropagation={true}
- origin={false}
- // individualGroupable={true}
- individualGroupable={groupedTargets1.length <= 1}
- onDragStart={(e) => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- setDraggedSubContainer((dragged) => (dragged ? dragged : i.parent));
- }}
- onDrag={(e) => {
- if (draggedSubContainer === i.parent) {
- e.target.style.transform = e.transform;
- }
- }}
- onDragEnd={(e) => {
- if (draggedSubContainer !== i.parent) {
- setDraggedSubContainer(false);
- return;
- }
- setDraggedSubContainer(false);
- const { lastEvent, clientX, clientY } = e;
- let {
- translate: [left, top],
- } = lastEvent;
- 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);
- const draggedOverElem = targetElems.find(
- (ele) =>
- ele.id !== e.target.id &&
- (ele.classList.contains('target') ||
- ele.classList.contains('nested-target') ||
- ele.classList.contains('drag-container-parent'))
- );
- setDragTarget(draggedOverElem?.id);
- draggedOverElemId = draggedOverElem?.getAttribute('component-id') || 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,
- },
- ]);
- }}
- onDragGroup={({ events }) => {
- events.forEach((ev) => {
- console.log('Grouped data=>', ev);
- ev.target.style.transform = ev.transform;
- });
- }}
- onResizeStart={(e) => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
- }
- }}
- onResize={(e) => {
- const gridWidth = subContainerWidths[i.parent];
- const width = Math.round(e.width / gridWidth) * gridWidth;
+ 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.width - currentWidth;
- const diffHeight = e.height - currentLayout.height;
- const isLeftChanged = e.direction[0] === -1;
- const isTopChanged = e.direction[1] === -1;
+ 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)`
+ );
- e.target.style.width = `${e.width}px`;
- e.target.style.height = `${e.height}px`;
let transformX = currentLayout.left * gridWidth;
let transformY = currentLayout.top;
if (isLeftChanged) {
@@ -617,87 +327,385 @@ export default function DragContainer({
if (isTopChanged) {
transformY = currentLayout.top - diffHeight;
}
- e.target.style.transform = `translate(${transformX}px, ${transformY}px)`;
- }}
- onResizeEnd={(e) => {
- try {
- const gridWidth = subContainerWidths[i.parent];
- 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;
- const isLeftChanged = e.lastEvent.direction[0] === -1;
- const isTopChanged = e.lastEvent.direction[1] === -1;
-
- 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: height,
- width: width,
- x: transformX,
- y: transformY,
- gw: gridWidth,
- },
- ]);
- } catch (error) {
- console.error('ResizeEnd error ->', error);
+ // e.target.style.transform = e.drag.transform;
+ onResizeStop([
+ {
+ id: e.target.id,
+ height: height,
+ width: width,
+ x: transformX,
+ y: transformY,
+ },
+ ]);
+ } catch (error) {
+ console.error('ResizeEnd error ->', error);
+ }
+ }}
+ onResizeStart={(e) => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ onResizeGroupStart={(e) => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ onResizeGroup={({ events }) => {
+ const newBoxs = [];
+ events.forEach((ev) => {
+ ev.target.style.width = `${ev.width}px`;
+ ev.target.style.height = `${ev.height}px`;
+ ev.target.style.transform = ev.drag.transform;
+ newBoxs.push({
+ id: ev.target.id,
+ height: ev.height,
+ width: ev.width,
+ x: ev.drag.translate[0],
+ y: ev.drag.translate[1],
+ });
+ });
+ onResizeStop(newBoxs);
+ }}
+ checkInput
+ onDragStart={(e) => {
+ console.log('On-drag start => ', e?.moveable?.getControlBoxElement());
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ setDraggedTarget(e.target.id);
+ setIsDragging(true);
+ }}
+ onDragEnd={(e) => {
+ console.log('onDragEnd', e);
+ try {
+ console.log('On-drag end => ');
+ setIsDragging(false);
+ console.log('onDragEnd', e);
+ setDraggedTarget();
+ if (draggedSubContainer) {
+ return;
}
- }}
- onDragGroupStart={() => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
+
+ let draggedOverElemId;
+ if (document.elementFromPoint(e.clientX, e.clientY)) {
+ const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
+ 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;
}
- }}
- onResizeGroupStart={(e) => {
- if (currentLayout === 'mobile' && autoComputeLayout) {
- turnOffAutoLayout();
- return false;
+ // console.log("draggedOverElemId", draggedOverElemId);
+ const parentElem = list.find(({ id }) => id === draggedOverElemId);
+ let left = e.lastEvent.translate[0];
+ let top = e.lastEvent.translate[1];
+ const currentWidget = boxes.find(({ id }) => id === e.target.id)?.component?.component;
+ const parentWidget = boxes.find(({ id }) => id === parentElem.id)?.component?.component;
+ const restrictedWidgets = restrictedWidgetsObj[parentWidget];
+ const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
+ if (parentElem && isParentChangeAllowed) {
+ left = left - parentElem.left * gridWidth;
+ top = top - parentElem.top;
+ } else {
+ e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${
+ Math.round(top / 10) * 10
+ }px)`;
}
- }}
- displayAroundControls={true}
- controlPadding={10}
- 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,
- }}
- snapThreshold={5}
- elementGuidelines={list
- .filter((l) => l.parent === i.parent)
- .map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))}
- isDisplaySnapDigit={false}
- snapGridWidth={subContainerWidths[i.parent]}
- />
- );
- })}
+
+ onDrag([
+ {
+ id: e.target.id,
+ x: left,
+ y: Math.round(top / 10) * 10,
+ parent: isParentChangeAllowed ? draggedOverElemId : undefined,
+ },
+ ]);
+ } catch (error) {
+ console.log('error', error);
+ }
+ }}
+ onDrag={(e) => {
+ console.log('On-drag ... => ');
+ if (draggedSubContainer) {
+ return;
+ }
+ setDraggedTarget(e.target.id);
+ if (!draggedSubContainer) {
+ 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;
+ if (document.elementFromPoint(e.clientX, e.clientY)) {
+ const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
+ 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 parent', draggedOverElemId, parent);
+ }}
+ onDragGroup={({ events }) => {
+ onDrag(
+ events.map((ev) => ({
+ id: ev.target.id,
+ x: ev.translate[0],
+ y: ev.translate[1],
+ }))
+ );
+ }}
+ onDragGroupStart={() => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ //snap settgins
+ snappable={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}`, className: 'grid-guide-lines' }))}
+ isDisplaySnapDigit={false}
+ snapGridWidth={gridWidth}
+ />
+
+ {removeDuplicates(list)
+ .filter((i) => !isEmpty(i.parent))
+ .map((i) => {
+ let groupedTargets1 = [
+ ...selectedComponents
+ .filter((component) => component?.component?.parent === i.parent)
+ .map((component) => '.ele-' + component.id),
+ ];
+ groupedTargets1 = [...new Set(groupedTargets1)];
+ console.log(
+ 'groupedTargets-->target ' + i.parent,
+ groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`
+ );
+ return (
+ (childMoveableRefs.current[i.id] = el)}
+ ables={[MouseCustomAble]}
+ props={{
+ mouseTest: true,
+ }}
+ target={groupedTargets1.length ? groupedTargets1 : `.target-${i.parent}`}
+ draggable={true}
+ resizable={{
+ edge: ['e', 'w', 'n', 's'],
+ renderDirections: ['e', 'w', 'n', 's'],
+ }}
+ // stopPropagation={true}
+ origin={false}
+ // individualGroupable={true}
+ individualGroupable={groupedTargets1.length <= 1}
+ onDragStart={(e) => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ setDraggedSubContainer((dragged) => (dragged ? dragged : i.parent));
+ }}
+ onDrag={(e) => {
+ if (draggedSubContainer === i.parent) {
+ e.target.style.transform = e.transform;
+ }
+ }}
+ onDragEnd={(e) => {
+ if (draggedSubContainer !== i.parent) {
+ setDraggedSubContainer(false);
+ return;
+ }
+ setDraggedSubContainer(false);
+ const { lastEvent, clientX, clientY } = e;
+ let {
+ translate: [left, top],
+ } = lastEvent;
+ 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);
+ const draggedOverElem = targetElems.find(
+ (ele) =>
+ ele.id !== e.target.id &&
+ (ele.classList.contains('target') ||
+ ele.classList.contains('nested-target') ||
+ ele.classList.contains('drag-container-parent'))
+ );
+ setDragTarget(draggedOverElem?.id);
+ draggedOverElemId = draggedOverElem?.getAttribute('component-id') || 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,
+ },
+ ]);
+ }}
+ onDragGroup={({ events }) => {
+ events.forEach((ev) => {
+ console.log('Grouped data=>', ev);
+ ev.target.style.transform = ev.transform;
+ });
+ }}
+ onResizeStart={(e) => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ onResize={(e) => {
+ const gridWidth = subContainerWidths[i.parent];
+ 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;
+ const isLeftChanged = e.direction[0] === -1;
+ const isTopChanged = e.direction[1] === -1;
+
+ e.target.style.width = `${e.width}px`;
+ e.target.style.height = `${e.height}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 = `translate(${transformX}px, ${transformY}px)`;
+ }}
+ onResizeEnd={(e) => {
+ try {
+ const gridWidth = subContainerWidths[i.parent];
+
+ 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;
+ const isLeftChanged = e.lastEvent.direction[0] === -1;
+ const isTopChanged = e.lastEvent.direction[1] === -1;
+
+ 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: height,
+ width: width,
+ x: transformX,
+ y: transformY,
+ gw: gridWidth,
+ },
+ ]);
+ } catch (error) {
+ console.error('ResizeEnd error ->', error);
+ }
+ }}
+ onDragGroupStart={() => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ onResizeGroupStart={(e) => {
+ if (currentLayout === 'mobile' && autoComputeLayout) {
+ turnOffAutoLayout();
+ return false;
+ }
+ }}
+ displayAroundControls={true}
+ controlPadding={10}
+ 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,
+ }}
+ snapThreshold={5}
+ elementGuidelines={list
+ .filter((l) => l.parent === i.parent)
+ .map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))}
+ isDisplaySnapDigit={false}
+ snapGridWidth={subContainerWidths[i.parent]}
+ />
+ );
+ })}
+
+ )}
);