Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: improved position calc logic for DnD

Browse source
This commit is contained in:
Johnson Cherian 2023-12-21 10:43:48 +05:30
parent 05a3961b0d
commit f2c182617f
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Editor/ConfigHandle.jsx
View file

@ -19,7 +19,7 @@ export const ConfigHandle = function ConfigHandle({
className={`config-handle ${customClassName}`}
ref={dragRef}
style={{
top: position === 'top' ? '-18px' : widgetTop + widgetHeight - 10,
top: position === 'top' ? '-20px' : widgetTop + widgetHeight - 10,
}}
>
<span

24
frontend/src/Editor/DragContainer.jsx
View file

@ -398,13 +398,18 @@ export default function DragContainer({
let draggedOverElemId;
if (document.elementFromPoint(e.clientX, e.clientY)) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
const draggedOverElem = targetElems.find(
(ele) =>
const draggedOverElem = targetElems.find((ele) => {
const isOwnChild = e.target.contains(ele); // if the hovered element is a child of actual draged element its not considered
if (isOwnChild) return false;
return (
ele.id !== e.target.id &&
(ele.classList.contains('target') || ele.classList.contains('nested-target'))
);
setDragTarget(draggedOverElem?.id);
draggedOverElemId = draggedOverElem?.id;
(ele.classList.contains('target') ||
ele.classList.contains('nested-target') ||
ele.classList.contains('drag-container-parent'))
);
});
draggedOverElemId = draggedOverElem?.getAttribute('component-id') || draggedOverElem?.id;
setDragTarget(draggedOverElemId);
}
// console.log("draggedOverElemId", draggedOverElemId);
const parentElem = list.find(({ id }) => id === draggedOverElemId);
@ -416,9 +421,10 @@ export default function DragContainer({
: undefined;
const restrictedWidgets = restrictedWidgetsObj?.[parentWidget] || [];
const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
if (parentElem && isParentChangeAllowed) {
left = left - parentElem.left * gridWidth;
top = top - parentElem.top;
if (draggedOverElemId && isParentChangeAllowed) {
let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId);
left = _left;
top = _top;
} else {
e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${
Math.round(top / 10) * 10