mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
refactor: removed unused files
This commit is contained in:
Johnson Cherian
parent
deb546c735
commit
b3c48c43b2
4 changed files with 0 additions and 678 deletions
|
|
@ -1,348 +0,0 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import Moveable from 'react-moveable';
|
||||
import { useEditorStore } from '@/_stores/editorStore';
|
||||
import { shallow } from 'zustand/shallow';
|
||||
import { flushSync } from 'react-dom';
|
||||
import './DragContainer.css';
|
||||
import DragContainerNested from './DragContainerNested';
|
||||
import { isEmpty } from 'lodash';
|
||||
const NO_OF_GRIDS = 24;
|
||||
|
||||
export default function DragContainer({
|
||||
boxes,
|
||||
renderWidget,
|
||||
canvasWidth,
|
||||
onResizeStop,
|
||||
onDrag,
|
||||
gridWidth,
|
||||
selectedComponents = [],
|
||||
setIsDragging,
|
||||
currentLayout,
|
||||
}) {
|
||||
const [dragTarget, setDragTarget] = useState();
|
||||
const [draggedTarget, setDraggedTarget] = useState();
|
||||
const moveableRef = useRef();
|
||||
const [movableTargets, setMovableTargets] = useState([]);
|
||||
const [isChildDragged, setIsChildDragged] = useState(false);
|
||||
const boxList = boxes.map((box) => ({
|
||||
id: box.id,
|
||||
height: box?.layouts?.[currentLayout]?.height,
|
||||
left: box?.layouts?.[currentLayout]?.left,
|
||||
top: box?.layouts?.[currentLayout]?.top,
|
||||
width: box?.layouts?.[currentLayout]?.width,
|
||||
parent: box?.component?.parent,
|
||||
}));
|
||||
const [list, setList] = useState(boxList);
|
||||
|
||||
const hoveredComponent = useEditorStore((state) => state?.hoveredComponent, shallow);
|
||||
|
||||
useEffect(() => {
|
||||
moveableRef.current.updateRect();
|
||||
// setTimeout(() => moveableRef.current.updateRect(), 100);
|
||||
}, [selectedComponents.length, JSON.stringify(boxes)]);
|
||||
|
||||
useEffect(() => {
|
||||
setList(boxList);
|
||||
// setTimeout(reloadGrid, 100);
|
||||
reloadGrid();
|
||||
}, [currentLayout]);
|
||||
|
||||
const reloadGrid = () => {
|
||||
moveableRef.current.updateRect();
|
||||
moveableRef.current.updateTarget();
|
||||
moveableRef.current.updateSelectors();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setList(boxList);
|
||||
}, [JSON.stringify(boxes)]);
|
||||
|
||||
useEffect(() => {
|
||||
const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)];
|
||||
const newMovableTargets = groupedTargets.length ? groupedTargets : [];
|
||||
if (hoveredComponent && groupedTargets?.length <= 1 && !groupedTargets.includes('.ele-' + hoveredComponent)) {
|
||||
newMovableTargets.push('.ele-' + hoveredComponent);
|
||||
}
|
||||
|
||||
if (draggedTarget && !newMovableTargets.includes(`.ele-${draggedTarget}`)) {
|
||||
newMovableTargets.push('.ele-' + draggedTarget);
|
||||
}
|
||||
|
||||
setMovableTargets(isChildDragged ? [] : newMovableTargets);
|
||||
}, [selectedComponents, hoveredComponent, draggedTarget, isChildDragged]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadGrid();
|
||||
}, [movableTargets]);
|
||||
|
||||
const getDimensions = (id) => {
|
||||
const box = boxes.find((b) => b.id === id);
|
||||
const layoutData = box?.layouts?.[currentLayout];
|
||||
if (isEmpty(layoutData)) {
|
||||
return {};
|
||||
}
|
||||
// const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
|
||||
const width = gridWidth * layoutData.width;
|
||||
|
||||
return {
|
||||
width: width + 'px',
|
||||
height: layoutData.height + 'px',
|
||||
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="root">
|
||||
<div className="container p-0">
|
||||
{list
|
||||
.filter((i) => isEmpty(i.parent))
|
||||
.map((i) => (
|
||||
<div
|
||||
className={`target widget-target target1 ele-${i.id} move-target ${
|
||||
movableTargets.find((id) => id === '.ele-' + i.id) ? 'move-target' : ''
|
||||
}`}
|
||||
data-id={`${i.parent}`}
|
||||
key={i.id}
|
||||
id={i.id}
|
||||
widgetid={i.id}
|
||||
style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
|
||||
>
|
||||
{/* Target {i.id} */}
|
||||
{renderWidget(i.id, undefined, setIsChildDragged)}
|
||||
</div>
|
||||
))}
|
||||
{/* {movableTargets.length && ( */}
|
||||
<Moveable
|
||||
// flushSync={flushSync}
|
||||
ref={moveableRef}
|
||||
target={'.move-target'}
|
||||
// target={movableTargets.length === 1 ? movableTargets[0] : movableTargets}
|
||||
origin={selectedComponents.length > 1}
|
||||
// hideChildMoveableDefaultLines={false}
|
||||
// individualGroupable={true}
|
||||
individualGroupable={selectedComponents.length <= 1}
|
||||
draggable={true}
|
||||
resizable={true}
|
||||
keepRatio={false}
|
||||
// rotatable={true}
|
||||
key={list.length}
|
||||
individualGroupableProps={(element) => {
|
||||
if (element?.classList.contains('target2')) {
|
||||
return {
|
||||
resizable: false,
|
||||
};
|
||||
}
|
||||
}}
|
||||
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;
|
||||
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)`;
|
||||
|
||||
// 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 {
|
||||
// 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;
|
||||
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,
|
||||
},
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('ResizeEnd error ->', error);
|
||||
}
|
||||
}}
|
||||
// onResizeStart={(e) => {
|
||||
// console.log('onResizeStart =>', e);
|
||||
// }}
|
||||
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={() => setIsDragging(true)}
|
||||
onDragEnd={(e) => {
|
||||
setIsDragging(false);
|
||||
setDraggedTarget();
|
||||
if (isChildDragged) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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] / 10) * 10}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);
|
||||
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;
|
||||
} 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: draggedOverElemId,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
onDrag={(e) => {
|
||||
if (isChildDragged) {
|
||||
return;
|
||||
}
|
||||
setDraggedTarget(e.target.id);
|
||||
// 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(${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);
|
||||
// // 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;
|
||||
// }
|
||||
// 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,
|
||||
x: ev.translate[0],
|
||||
y: ev.translate[1],
|
||||
}))
|
||||
);
|
||||
}}
|
||||
//snap settgins
|
||||
snappable={true}
|
||||
// snapDirections={{ top: true, left: true, bottom: true, right: true }}
|
||||
snapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }}
|
||||
elementSnapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }}
|
||||
snapThreshold={5}
|
||||
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
|
||||
isDisplaySnapDigit={false}
|
||||
snapGridWidth={gridWidth}
|
||||
// snapGridHeight={10}
|
||||
// verticalGuidelines={[50, 150, 250, 450, 550]}
|
||||
// horizontalGuidelines={[0, 100, 200, 400, 500]}
|
||||
/>
|
||||
{/* )} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Moveable, { makeAble } from 'react-moveable';
|
||||
import './DragContainer.css';
|
||||
import { isEmpty } from 'lodash';
|
||||
const NO_OF_GRIDS = 24;
|
||||
|
||||
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();
|
||||
const boxList = boxes.map((box) => ({
|
||||
id: box.id,
|
||||
height: box?.layouts?.desktop?.height,
|
||||
left: box?.layouts?.desktop?.left,
|
||||
top: box?.layouts?.desktop?.top,
|
||||
width: box?.layouts?.desktop?.width,
|
||||
}));
|
||||
const [list, setList] = useState(boxList);
|
||||
const moveableRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
setList(boxList);
|
||||
}, [boxes?.length]);
|
||||
|
||||
useEffect(() => {
|
||||
moveableRef.current.updateRect();
|
||||
}, [...Object.values(parentLayout), boxes?.length]);
|
||||
|
||||
// const [isChildDragged, setIsChildDragged] = useState(false);
|
||||
|
||||
const getDimensions = (id) => {
|
||||
const box = boxes.find((b) => b.id === id);
|
||||
const layoutData = box?.layouts?.desktop;
|
||||
if (isEmpty(layoutData)) {
|
||||
return {};
|
||||
}
|
||||
const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
|
||||
return {
|
||||
width: width + 'px',
|
||||
height: layoutData.height + 'px',
|
||||
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="root h-100">
|
||||
<div className="container p-0 h-100">
|
||||
{/* <button onClick={() => setList((list) => [...list, { id: new Date().getTime() }])}>Add</button> */}
|
||||
{list.map((i) => (
|
||||
<div
|
||||
className={`target-${parent} target1-${i.parent} ele-${i.id} nested-target`}
|
||||
key={i.id}
|
||||
id={i.id}
|
||||
style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
|
||||
widget-id={i.id}
|
||||
>
|
||||
{/* Target {i.id} */}
|
||||
{renderWidget(i.id)}
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="target target1">
|
||||
<DragContainerNested setIsChildDragged={setIsChildDragged} />
|
||||
</div> */}
|
||||
{/* <div className="target target1">
|
||||
Target12
|
||||
<input type="text" />
|
||||
</div> */}
|
||||
{/* <div className="target target1">Target1</div>
|
||||
<div className="target target2">Target2</div>
|
||||
<div className="target target3">Target3</div> */}
|
||||
|
||||
{/* <Moveable
|
||||
ref={moveableRef}
|
||||
target={`.target-${parent}`}
|
||||
origin={false}
|
||||
ables={[MouseEnterLeaveAble]}
|
||||
props={{
|
||||
enterLeave: true,
|
||||
}}
|
||||
individualGroupable={true}
|
||||
draggable={true}
|
||||
resizable={true}
|
||||
keepRatio={false}
|
||||
rotatable={false}
|
||||
key={list.length}
|
||||
individualGroupableProps={(element) => {
|
||||
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={() => 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) => {
|
||||
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, parent);
|
||||
// if (!draggedOverElemId) {
|
||||
// left = left + parentLayout.left * (parentGridWidth / 24);
|
||||
// top = top + parentLayout.top;
|
||||
// }
|
||||
|
||||
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 - newParentElem.left * parentGridWidth;
|
||||
// top = top - newParentElem.top;
|
||||
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}` }))}
|
||||
// verticalGuidelines={[50, 150, 250, 450, 550]}
|
||||
// horizontalGuidelines={[0, 100, 200, 400, 500]}
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
// <div className="root">
|
||||
// <div className="container">
|
||||
// <button onClick={() => setList((list) => [...list, new Date().getTime()])}>Add</button>
|
||||
// {list.map((i) => (
|
||||
// <div className="nested-target nested-target1" key={i} style={{ transform: 'translate(332px, -134px)' }}>
|
||||
// Target1
|
||||
// </div>
|
||||
// ))}
|
||||
// <div className="nested-target">Target1</div>
|
||||
// {/* <div className="target target1">Target1</div>
|
||||
// <div className="target target2">Target2</div>
|
||||
// <div className="target target3">Target3</div> */}
|
||||
// <Moveable
|
||||
// target={'.nested-target'}
|
||||
// individualGroupable={true}
|
||||
// draggable={true}
|
||||
// resizable={true}
|
||||
// rotatable={true}
|
||||
// key={list.length}
|
||||
// individualGroupableProps={(element) => {
|
||||
// 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]}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React, { useState, useEffect, Children } from 'react';
|
||||
import './DragContainer.css';
|
||||
import { isEmpty } from 'lodash';
|
||||
const NO_OF_GRIDS = 43;
|
||||
|
||||
export default function DragContainerNested({
|
||||
boxes,
|
||||
renderWidget,
|
||||
canvasWidth,
|
||||
gridWidth,
|
||||
parent,
|
||||
currentLayout,
|
||||
readOnly,
|
||||
children,
|
||||
}) {
|
||||
const boxList = boxes.map((box) => ({
|
||||
id: box.id,
|
||||
height: box?.layouts?.desktop?.height,
|
||||
left: box?.layouts?.desktop?.left,
|
||||
top: box?.layouts?.desktop?.top,
|
||||
width: box?.layouts?.desktop?.width,
|
||||
}));
|
||||
const [list, setList] = useState(boxList);
|
||||
|
||||
useEffect(() => {
|
||||
setList(boxList);
|
||||
}, [boxes?.length]);
|
||||
|
||||
const getDimensions = (id) => {
|
||||
const box = boxes.find((b) => b.id === id);
|
||||
const layoutData = box?.layouts?.[currentLayout] || box?.layouts?.['desktop'];
|
||||
if (isEmpty(layoutData)) {
|
||||
return {};
|
||||
}
|
||||
const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS;
|
||||
return {
|
||||
width: width + 'px',
|
||||
height: layoutData.height + 'px',
|
||||
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="root h-100">
|
||||
<div className={`container-fluid p-0 h-100 drag-container-parent`} component-id={parent}>
|
||||
{/* <button onClick={() => setList((list) => [...list, { id: new Date().getTime() }])}>Add</button> */}
|
||||
{list.map((i) => (
|
||||
<div
|
||||
className={
|
||||
readOnly
|
||||
? `ele-${i.id} nested-target moveable-box`
|
||||
: `target-${parent} target1-${i.parent} ele-${i.id} nested-target moveable-box target`
|
||||
}
|
||||
key={i.id}
|
||||
id={i.id}
|
||||
style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }}
|
||||
widget-id={i.id}
|
||||
widgetid={i.id}
|
||||
>
|
||||
{/* Target {i.id} */}
|
||||
{/* {renderWidget(i.id)} */}
|
||||
{children}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue