{
@@ -51,7 +71,10 @@ export const ConfigHandle = ({
>
@@ -65,17 +88,30 @@ export const ConfigHandle = ({
data-cy={`${componentName?.toLowerCase()}-config-handle`}
className="text-truncate"
>
- 
+ {/* Settings Icon */}
+
+
+ {/* Delete Button */}
{!isMultipleComponentsSelected && !shouldFreeze && (
-
+ {/* Settings Icon */}
+
+
+
- 
{
deleteComponents([id]);
}}
data-cy={`${componentName.toLowerCase()}-delete-button`}
- className="delete-icon"
- />
+ >
+
- {
deleteComponents([id]);
}}
data-cy={`${componentName.toLowerCase()}-delete-button`}
- className="delete-icon"
- />
+ >
+ state.getHoveredComponentForGrid, shallow);
const getResolvedComponent = useStore((state) => state.getResolvedComponent, shallow);
+ const [canvasBounds, setCanvasBounds] = useState(CANVAS_BOUNDS);
+ const draggingComponentId = useStore((state) => state.draggingComponentId, shallow);
+ const resizingComponentId = useGridStore((state) => state.resizingComponentId, shallow);
+ const [dragParentId, setDragParentId] = useState(null);
+ const [elementGuidelines, setElementGuidelines] = useState([]);
+ const componentsSnappedTo = useRef(null);
+ const prevDragParentId = useRef(null);
+ const newDragParentId = useRef(null);
+ const [isGroupDragging, setIsGroupDragging] = useState(false);
+
+ useEffect(() => {
+ const selectedSet = new Set(selectedComponents);
+ const draggingOrResizingId = draggingComponentId || resizingComponentId;
+ const isGrouped = findHighestLevelofSelection().length > 1;
+ const firstSelectedParent =
+ selectedComponents.length > 0 ? boxList.find((b) => b.id === selectedComponents[0])?.parent : null;
+ const selectedParent = dragParentId || firstSelectedParent;
+
+ const guidelines = boxList
+ .filter((box) => {
+ const isVisible =
+ getResolvedValue(box?.component?.definition?.properties?.visibility?.value) ||
+ getResolvedValue(box?.component?.definition?.styles?.visibility?.value);
+
+ // Early return for non-visible elements
+ if (!isVisible) return false;
+
+ if (isGrouped) {
+ // If component is selected, don't show its guidelines
+ if (selectedSet.has(box.id)) return false;
+ return selectedParent ? box.parent === selectedParent : !box.parent;
+ }
+
+ if (draggingOrResizingId) {
+ if (box.id === draggingOrResizingId) return false;
+ return dragParentId ? box.parent === dragParentId : !box.parent;
+ }
+
+ return true;
+ })
+ .map((box) => `.ele-${box.id}`);
+ setElementGuidelines(guidelines);
+ }, [boxList, dragParentId, draggingComponentId, resizingComponentId, selectedComponents, getResolvedValue]);
useEffect(() => {
setBoxList(
@@ -94,7 +144,7 @@ export default function Grid({ gridWidth, currentLayout }) {
boxList.forEach(({ id, height, width, x, y, gw }) => {
const _canvasWidth = gw ? gw * NO_OF_GRIDS : canvasWidth;
let newWidth = Math.round((width * NO_OF_GRIDS) / _canvasWidth);
- y = Math.round(y / 10) * 10;
+ y = Math.round(y / GRID_HEIGHT) * GRID_HEIGHT;
gw = gw ? gw : gridWidth;
const parent = transformedBoxes[id]?.component?.parent;
@@ -117,7 +167,7 @@ export default function Grid({ gridWidth, currentLayout }) {
}
setComponentLayout({
[id]: {
- height: height ? height : 10,
+ height: height ? height : GRID_HEIGHT,
width: newWidth ? newWidth : 1,
top: y,
left: Math.round(x / gw),
@@ -319,7 +369,7 @@ export default function Grid({ gridWidth, currentLayout }) {
}
// Round y position
- y = Math.max(0, Math.round(y / 10) * 10);
+ y = Math.max(0, Math.round(y / GRID_HEIGHT) * GRID_HEIGHT);
// Adjust height for certain parent components
if (parent) {
const parentElem = document.getElementById(`canvas-${parent}`);
@@ -354,17 +404,16 @@ export default function Grid({ gridWidth, currentLayout }) {
);
// Add event listeners for config handle visibility when hovering over widget boundary
+ // This is needed even though we have hovered widget state because when hovered on boundary,
+ // the hovered widget state is empty, hence created a separate state for boundary
React.useEffect(() => {
const moveableBox = document.querySelector(`.moveable-control-box`);
const showConfigHandle = (e) => {
const targetId = e.target.offsetParent.getAttribute('target-id');
- const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
- configHandle.classList.add('config-handle-visible');
+ useStore.getState().setHoveredComponentBoundaryId(targetId);
};
- const hideConfigHandle = (e) => {
- const targetId = e.target.offsetParent.getAttribute('target-id');
- const configHandle = document.querySelector(`.config-handle[widget-id="${targetId}"]`);
- configHandle.classList.remove('config-handle-visible');
+ const hideConfigHandle = () => {
+ useStore.getState().setHoveredComponentBoundaryId('');
};
if (moveableBox) {
moveableBox.addEventListener('mouseover', showConfigHandle);
@@ -376,49 +425,10 @@ export default function Grid({ gridWidth, currentLayout }) {
};
}, []);
- const handleDragGridLinesVisibility = (e, events = []) => {
- const { clientX, clientY } = e;
- if (!document.elementFromPoint(clientX, clientY)) return;
-
- const targetElems = document.elementsFromPoint(clientX, clientY);
- const draggedOverElements = targetElems.filter(
- (ele) =>
- !events.some((event) => event.target.id === ele.id) &&
- (ele.classList.contains('target') || ele.classList.contains('real-canvas'))
- );
- const draggedOverElem = draggedOverElements.find((ele) => ele.classList.contains('target'));
- const draggedOverContainer = draggedOverElements.find((ele) => ele.classList.contains('real-canvas'));
- const appCanvas = document.getElementById('real-canvas');
-
- // Show grid line for main canvas
- draggedOverContainer?.classList.remove('hide-grid');
- draggedOverContainer?.classList.add('show-grid');
-
- // Remove 'show-grid' class from all sub-canvases
- const canvasElms = document.getElementsByClassName('sub-canvas');
- Array.from(canvasElms).forEach((element) => {
- element.classList.remove('show-grid');
- element.classList.add('hide-grid');
- });
-
- // Determine the potential new parent
- const parentId = draggedOverContainer?.getAttribute('data-parentId') || draggedOverElem?.id;
-
- // Show grid for the appropriate canvas
- if (parentId) {
- const newParentCanvas = document.getElementById('canvas-' + parentId);
- if (newParentCanvas) {
- appCanvas?.classList?.remove('show-grid');
- newParentCanvas?.classList.remove('hide-grid');
- newParentCanvas?.classList.add('show-grid');
- }
- }
-
- useGridStore.getState().actions.setDragTarget(parentId);
- };
-
const handleDragGroupEnd = (e) => {
try {
+ hideGridLines();
+ setIsGroupDragging(false);
const { events, clientX, clientY } = e;
const initialParent = events[0].target.closest('.real-canvas');
// Get potential new parent using same logic as onDragEnd
@@ -477,7 +487,7 @@ export default function Grid({ gridWidth, currentLayout }) {
// Apply transform to return to original position
ev.target.style.transform = `translate(${Math.round(_left / _gridWidth) * _gridWidth}px, ${
- Math.round(_top / 10) * 10
+ Math.round(_top / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
}
});
@@ -514,7 +524,7 @@ export default function Grid({ gridWidth, currentLayout }) {
// Apply grid snapping and bounds
const snappedX = Math.round(posX / _gridWidth) * _gridWidth;
- const snappedY = Math.round(posY / 10) * 10;
+ const snappedY = Math.round(posY / GRID_HEIGHT) * GRID_HEIGHT;
ev.target.style.transform = `translate(${snappedX}px, ${snappedY}px)`;
return {
@@ -531,6 +541,18 @@ export default function Grid({ gridWidth, currentLayout }) {
}
};
+ React.useEffect(() => {
+ const components = Array.from(document.querySelectorAll('.active-target')).filter(
+ (component) => !selectedComponents.includes(component.getAttribute('widgetid'))
+ );
+ const draggingOrResizing = draggingComponentId || resizingComponentId;
+ if (!draggingOrResizing && components.length > 0) {
+ for (const component of components) {
+ component?.classList?.remove('active-target');
+ }
+ }
+ }, [draggingComponentId, resizingComponentId, isGroupDragging, selectedComponents]);
+
if (mode !== 'edit') return null;
return (
@@ -557,11 +579,11 @@ export default function Grid({ gridWidth, currentLayout }) {
let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
if (currentWidget.component?.parent) {
document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.add('show-grid');
- useGridStore.getState().actions.setDragTarget(currentWidget.component?.parent);
+ setDragParentId(currentWidget.component?.parent);
} else {
document.getElementById('real-canvas').classList.add('show-grid');
}
-
+ handleActivateTargets(currentWidget.component?.parent);
const currentWidth = currentWidget.width * _gridWidth;
const diffWidth = e.width - currentWidth;
const diffHeight = e.height - currentWidget.height;
@@ -584,9 +606,6 @@ export default function Grid({ gridWidth, currentLayout }) {
const maxLeft = containerWidth - e.target.clientWidth;
const maxWidthHit = transformX < 0 || transformX >= maxLeft;
const maxHeightHit = transformY < 0 || transformY >= maxY;
- transformY = transformY < 0 ? 0 : transformY > maxY ? maxY : transformY;
- transformX = transformX < 0 ? 0 : transformX > maxLeft ? maxLeft : transformX;
-
if (!maxWidthHit || e.width < e.target.clientWidth) {
e.target.style.width = `${e.width}px`;
}
@@ -612,12 +631,13 @@ export default function Grid({ gridWidth, currentLayout }) {
// When clicked on widget boundary/resizer, select the component
setSelectedComponents([e.target.id]);
}
-
+ showGridLines();
if (!isComponentVisible(e.target.id)) {
return false;
}
+ handleActivateNonDraggingComponents();
useGridStore.getState().actions.setResizingComponentId(e.target.id);
- e.setMin([gridWidth, 10]);
+ e.setMin([gridWidth, GRID_HEIGHT]);
}}
onResizeEnd={(e) => {
try {
@@ -625,11 +645,10 @@ export default function Grid({ gridWidth, currentLayout }) {
const currentWidget = boxList.find(({ id }) => {
return id === e.target.id;
});
- document.getElementById('real-canvas')?.classList.remove('show-grid');
- document.getElementById('canvas-' + currentWidget.component?.parent)?.classList.remove('show-grid');
+ hideGridLines();
let _gridWidth = useGridStore.getState().subContainerWidths[currentWidget.component?.parent] || gridWidth;
let width = Math.round(e?.lastEvent?.width / _gridWidth) * _gridWidth;
- const height = Math.round(e?.lastEvent?.height / 10) * 10;
+ const height = Math.round(e?.lastEvent?.height / GRID_HEIGHT) * GRID_HEIGHT;
const currentWidth = currentWidget.width * _gridWidth;
const diffWidth = e.lastEvent?.width - currentWidth;
@@ -654,19 +673,17 @@ export default function Grid({ gridWidth, currentLayout }) {
const maxLeft = containerWidth - e.target.clientWidth;
const maxWidthHit = transformX < 0 || transformX >= maxLeft;
const maxHeightHit = transformY < 0 || transformY >= maxY;
- transformY = transformY < 0 ? 0 : transformY > maxY ? maxY : transformY;
- transformX = transformX < 0 ? 0 : transformX > maxLeft ? maxLeft : transformX;
- const roundedTransformY = Math.round(transformY / 10) * 10;
- transformY = transformY % 10 === 5 ? roundedTransformY - 10 : roundedTransformY;
+ const roundedTransformY = Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT;
+ transformY = transformY % GRID_HEIGHT === 5 ? roundedTransformY - GRID_HEIGHT : roundedTransformY;
e.target.style.transform = `translate(${Math.round(transformX / _gridWidth) * _gridWidth}px, ${
- Math.round(transformY / 10) * 10
+ Math.round(transformY / GRID_HEIGHT) * GRID_HEIGHT
}px)`;
if (!maxWidthHit || e.width < e.target.clientWidth) {
e.target.style.width = `${Math.round(e.lastEvent.width / _gridWidth) * _gridWidth}px`;
}
if (!maxHeightHit || e.height < e.target.clientHeight) {
- e.target.style.height = `${Math.round(e.lastEvent.height / 10) * 10}px`;
+ e.target.style.height = `${Math.round(e.lastEvent.height / GRID_HEIGHT) * GRID_HEIGHT}px`;
}
const resizeData = {
id: e.target.id,
@@ -682,18 +699,19 @@ export default function Grid({ gridWidth, currentLayout }) {
} catch (error) {
console.error('ResizeEnd error ->', error);
}
- useGridStore.getState().actions.setDragTarget();
+ handleDeactivateTargets();
+ setDragParentId(null);
toggleCanvasUpdater();
}}
onResizeGroupStart={({ events }) => {
- const parentElm = events[0].target.closest('.real-canvas');
- parentElm.classList.add('show-grid');
+ showGridLines();
+ handleActivateNonDraggingComponents();
}}
onResizeGroup={({ events }) => {
const parentElm = events[0].target.closest('.real-canvas');
const parentWidth = parentElm?.clientWidth;
const parentHeight = parentElm?.clientHeight;
-
+ handleActivateTargets(parentElm?.id?.replace('canvas-', ''));
const { posRight, posLeft, posTop, posBottom } = getPositionForGroupDrag(events, parentWidth, parentHeight);
events.forEach((ev) => {
ev.target.style.width = `${ev.width}px`;
@@ -710,8 +728,7 @@ export default function Grid({ gridWidth, currentLayout }) {
const { events } = e;
const newBoxs = [];
- const parentElm = events[0].target.closest('.real-canvas');
- parentElm.classList.remove('show-grid');
+ hideGridLines();
// TODO: Logic needs to be relooked post go live P2
groupResizeDataRef.current.forEach((ev) => {
@@ -722,9 +739,9 @@ export default function Grid({ gridWidth, currentLayout }) {
let width = Math.round(ev.width / _gridWidth) * _gridWidth;
width = width < _gridWidth ? _gridWidth : width;
let posX = Math.round(ev.drag.translate[0] / _gridWidth) * _gridWidth;
- let posY = Math.round(ev.drag.translate[1] / 10) * 10;
- let height = Math.round(ev.height / 10) * 10;
- height = height < 10 ? 10 : height;
+ let posY = Math.round(ev.drag.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
+ let height = Math.round(ev.height / GRID_HEIGHT) * GRID_HEIGHT;
+ height = height < GRID_HEIGHT ? GRID_HEIGHT : height;
ev.target.style.width = `${width}px`;
ev.target.style.height = `${height}px`;
@@ -752,7 +769,7 @@ export default function Grid({ gridWidth, currentLayout }) {
let posX = currentWidget?.layouts[currentLayout].left * _gridWidth;
let posY = currentWidget?.layouts[currentLayout].top;
let height = currentWidget?.layouts[currentLayout].height;
- height = height < 10 ? 10 : height;
+ height = height < GRID_HEIGHT ? GRID_HEIGHT : height;
ev.target.style.width = `${width}px`;
ev.target.style.height = `${height}px`;
ev.target.style.transform = `translate(${posX}px, ${posY}px)`;
@@ -763,11 +780,18 @@ export default function Grid({ gridWidth, currentLayout }) {
} catch (error) {
console.error('Error resizing group', error);
}
+ handleDeactivateTargets();
toggleCanvasUpdater();
}}
checkInput
onDragStart={(e) => {
+ // This is to prevent parent component from being dragged and the stop the propagation of the event
+ if (getHoveredComponentForGrid() !== e.target.id) {
+ return false;
+ }
+ newDragParentId.current = boxList.find((box) => box.id === e.target.id)?.parent;
e?.moveable?.controlBox?.removeAttribute('data-off-screen');
+
const box = boxList.find((box) => box.id === e.target.id);
// Prevent drag if shift is pressed for SUBCONTAINER_WIDGETS
if (SUBCONTAINER_WIDGETS.includes(box?.component?.component) && e.inputEvent.shiftKey) {
@@ -779,7 +803,7 @@ export default function Grid({ gridWidth, currentLayout }) {
// to handle their own interactions like column resizing or card dragging
let isDragOnInnerElement = false;
- /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works.
+ /* If the drag or click is on a calender popup draggable interactions are not executed so that popups and other components inside calender popup works.
Also user dont need to drag an calender from using popup */
if (hasParentWithClass(e.inputEvent.target, 'react-datepicker-popper')) {
return false;
@@ -801,7 +825,6 @@ export default function Grid({ gridWidth, currentLayout }) {
container.contains(e.inputEvent.target)
);
}
-
if (['RangeSlider', 'BoundedBox'].includes(box?.component?.component) || isDragOnInnerElement) {
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
const isHandle = targetElems.find((ele) => ele.classList.contains('handle-content'));
@@ -809,152 +832,112 @@ export default function Grid({ gridWidth, currentLayout }) {
return false;
}
}
- // This is to prevent parent component from being dragged and the stop the propagation of the event
- if (getHoveredComponentForGrid() !== e.target.id) {
- return false;
- }
+ handleActivateNonDraggingComponents();
}}
onDragEnd={(e) => {
+ handleDeactivateTargets();
try {
if (isDraggingRef.current) {
- useGridStore.getState().actions.setDraggingComponentId(null);
+ useStore.getState().setDraggingComponentId(null);
isDraggingRef.current = false;
}
+ prevDragParentId.current = null;
+ newDragParentId.current = null;
+ setDragParentId(null);
- if (!e.lastEvent) {
- return;
+ if (!e.lastEvent) return;
+
+ // Build the drag context from the event
+ const dragContext = dragContextBuilder({ event: e, widgets: boxList });
+ const { target, source, dragged } = dragContext;
+
+ const targetSlotId = target?.slotId;
+ const targetGridWidth = useGridStore.getState().subContainerWidths[targetSlotId] || gridWidth;
+
+ // const restrictedWidgets = RESTRICTED_WIDGETS_CONFIG?.[source.widgetType] || [];
+ // const draggedWidgetType = dragged.widgetType;
+ const isParentChangeAllowed = dragContext.isDroppable;
+
+ // Compute new position
+ let { left, top } = getAdjustedDropPosition(e, target, isParentChangeAllowed, targetGridWidth, dragged);
+
+ const isModalToCanvas = source.isModal && target.slotId === 'real-canvas';
+
+ if (isParentChangeAllowed && !isModalToCanvas) {
+ const parent = target.slotId === 'real-canvas' ? null : target.slotId;
+ // Special case for Modal; If source widget is modal, prevent drops to canvas
+ handleDragEnd([{ id: e.target.id, x: left, y: top, parent }]);
+ } else {
+ const sourcegridWidth = useGridStore.getState().subContainerWidths[source.slotId] || gridWidth;
+
+ left = dragged.left * sourcegridWidth;
+ top = dragged.top;
+
+ !isModalToCanvas ??
+ toast.error(`${dragged.widgetType} is not compatible as a child component of ${target.widgetType}`);
}
- let draggedOverElemId = boxList.find((box) => box.id === e.target.id)?.parent;
- let draggedOverElemIdType;
- const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
- let draggedOverElem;
- if (document.elementFromPoint(e.clientX, e.clientY) && parentComponent?.component?.component !== 'Modal') {
- const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
- 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;
+ // Apply transform for smooth transition
+ e.target.style.transform = `translate(${left}px, ${top}px)`;
- let isDroppable = ele.id !== e.target.id && ele.classList.contains('drag-container-parent');
- if (isDroppable) {
- let widgetId = ele?.getAttribute('component-id') || ele.id;
- let widgetType = boxList.find(({ id }) => id === widgetId)?.component?.component;
- if (!widgetType) {
- widgetId = widgetId.split('-').slice(0, -1).join('-');
- widgetType = boxList.find(({ id }) => id === widgetId)?.component?.component;
- }
- if (
- !['Calendar', 'Kanban', 'Form', 'Tabs', 'Modal', 'Listview', 'Container', 'Table'].includes(
- widgetType
- )
- ) {
- isDroppable = false;
- }
- }
- return isDroppable;
- });
- draggedOverElemId = draggedOverElem?.getAttribute('component-id') || draggedOverElem?.id;
- draggedOverElemIdType = draggedOverElem?.getAttribute('data-parent-type');
- }
-
- const _gridWidth = useGridStore.getState().subContainerWidths[draggedOverElemId] || gridWidth;
- const currentParentId = boxList.find(({ id: widgetId }) => e.target.id === widgetId)?.component?.parent;
- let left = e.lastEvent?.translate[0];
- let top = e.lastEvent?.translate[1];
- if (
- ['Listview', 'Kanban', 'Container'].includes(
- boxList.find((box) => box.id === draggedOverElemId)?.component?.component
- )
- ) {
- const elemContainer = e.target.closest('.real-canvas');
- const containerHeight = elemContainer.clientHeight;
- const maxY = containerHeight - e.target.clientHeight;
- top = top > maxY ? maxY : top;
- }
-
- const currentWidget = boxList.find(({ id }) => id === e.target.id)?.component?.component;
- const parentId = draggedOverElemId?.length > 36 ? draggedOverElemId.slice(0, 36) : draggedOverElemId;
- draggedOverElemIdType = getComponentTypeFromId(parentId);
- const parentWidget = draggedOverElemIdType === 'Kanban' ? 'Kanban_card' : draggedOverElemIdType;
- const restrictedWidgets = RESTRICTED_WIDGETS_CONFIG?.[parentWidget] || [];
- const isParentChangeAllowed = !restrictedWidgets.includes(currentWidget);
- if (draggedOverElemId !== currentParentId) {
- if (isParentChangeAllowed) {
- const draggedOverWidget = boxList.find((box) => box.id === draggedOverElemId);
-
- let parentWidgetType = boxList.find((box) => box.id === draggedOverElemId)?.component?.component;
- // @TODO - When dropping back to container from canvas, the boxList doesn't have canvas header,
- // boxList will return null. But we need to tell getMouseDistanceFromParentDiv parentWidgetType is container
- // As container id is like 'canvas-2375e23765e-123234'
- if (parentId && !parentWidgetType && draggedOverElemId.includes('-header')) {
- parentWidgetType = 'Container';
- }
-
- let { left: _left, top: _top } = getMouseDistanceFromParentDiv(
- e,
- draggedOverWidget?.component?.component === 'Kanban' ? draggedOverElem : draggedOverElemId,
- parentWidgetType
- );
- left = _left;
- top = _top;
- } else {
- const currBox = boxList.find((l) => l.id === e.target.id);
- left = currBox.left * gridWidth;
- top = currBox.top;
- toast.error(`${currentWidget} is not compatible as a child component of ${parentWidget}`);
- }
- }
-
- e.target.style.transform = `translate(${Math.round(left / _gridWidth) * _gridWidth}px, ${
- Math.round(top / 10) * 10
- }px)`;
- if (draggedOverElemId === currentParentId || isParentChangeAllowed) {
- handleDragEnd([
- {
- id: e.target.id,
- x: left,
- y: Math.round(top / 10) * 10,
- parent: isParentChangeAllowed ? draggedOverElemId : undefined,
- },
- ]);
- }
- const box = boxList.find((box) => box.id === e.target.id);
- //
- setTimeout(() => setSelectedComponents([box.id]));
+ // Select the dragged component after drop
+ setTimeout(() => setSelectedComponents([dragged.id]));
} catch (error) {
- console.log('draggedOverElemId->error', error);
+ console.error('Error in onDragEnd:', error);
}
- // Hide all sub-canvases
- var canvasElms = document.getElementsByClassName('sub-canvas');
- var elementsArray = Array.from(canvasElms);
- elementsArray.forEach(function (element) {
- element.classList.remove('show-grid');
- element.classList.add('hide-grid');
- });
- document.getElementById('real-canvas')?.classList.remove('show-grid');
+ setCanvasBounds({ ...CANVAS_BOUNDS });
+ hideGridLines();
toggleCanvasUpdater();
}}
onDrag={(e) => {
// Since onDrag is called multiple times when dragging, hence we are using isDraggingRef to prevent setting state again and again
if (!isDraggingRef.current) {
- useGridStore.getState().actions.setDraggingComponentId(e.target.id);
+ useStore.getState().setDraggingComponentId(e.target.id);
+ showGridLines();
isDraggingRef.current = true;
}
- const parentComponent = boxList.find((box) => box.id === boxList.find((b) => b.id === e.target.id)?.parent);
+ const currentWidget = boxList.find((box) => box.id === e.target.id);
+ const currentParentId =
+ currentWidget?.component?.parent === null ? 'canvas' : currentWidget?.component?.parent;
+ const _gridWidth = useGridStore.getState().subContainerWidths[dragParentId] || gridWidth;
+ const _dragParentId = newDragParentId.current === null ? 'canvas' : newDragParentId.current;
- let top = e.translate[1];
- let left = e.translate[0];
+ // Snap to grid
+ let left = Math.round(e.translate[0] / _gridWidth) * _gridWidth;
+ let top = Math.round(e.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
+
+ // This logic is to handle the case when the dragged element is over a new canvas
+ if (_dragParentId !== currentParentId) {
+ left = e.translate[0];
+ top = e.translate[1];
+ }
// Special case for Modal
- if (parentComponent?.component?.component === 'Modal') {
- const elemContainer = e.target.closest('.real-canvas');
- const containerHeight = elemContainer.clientHeight;
- const containerWidth = elemContainer.clientWidth;
- const maxY = containerHeight - e.target.clientHeight;
- const maxLeft = containerWidth - e.target.clientWidth;
+ const oldParentId = boxList.find((b) => b.id === e.target.id)?.parent;
+ const parentId = oldParentId?.length > 36 ? oldParentId.slice(0, 36) : oldParentId;
+ const parentComponent = boxList.find((box) => box.id === parentId);
+ const parentWidgetType = parentComponent?.component?.component;
+ const isOnHeaderOrFooter = oldParentId
+ ? oldParentId.includes('-header') || oldParentId.includes('-footer')
+ : false;
+ const isParentModalSlot = parentWidgetType === 'ModalV2' && isOnHeaderOrFooter;
+ const isParentNewModal = parentComponent?.component?.component === 'ModalV2';
+ const isParentLegacyModal = parentComponent?.component?.component === 'Modal';
+ const isParentModal = isParentNewModal || isParentLegacyModal || isParentModalSlot;
- top = top < 0 ? 0 : top > maxY ? maxY : top;
- left = left < 0 ? 0 : left > maxLeft ? maxLeft : left;
+ if (isParentModal) {
+ const modalContainer = e.target.closest('.tj-modal-widget-content');
+ const mainCanvas = document.getElementById('real-canvas');
+
+ const mainRect = mainCanvas.getBoundingClientRect();
+ const modalRect = modalContainer.getBoundingClientRect();
+ const relativePosition = {
+ top: modalRect.top - mainRect.top,
+ right: mainRect.right - modalRect.right + modalContainer.offsetWidth,
+ bottom: modalRect.height + (modalRect.top - mainRect.top),
+ left: modalRect.left - mainRect.left,
+ };
+ setCanvasBounds({ ...relativePosition });
}
e.target.style.transform = `translate(${left}px, ${top}px)`;
@@ -963,8 +946,33 @@ export default function Grid({ gridWidth, currentLayout }) {
`translate: ${e.translate[0]} | Round: ${Math.round(e.translate[0] / gridWidth) * gridWidth} | ${gridWidth}`
);
- handleDragGridLinesVisibility(e, [{ target: e.target }]);
+ // This block is to show grid lines on the canvas when the dragged element is over a new canvas
+ if (document.elementFromPoint(e.clientX, e.clientY)) {
+ const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
+ const draggedOverElements = targetElems.filter(
+ (ele) =>
+ (ele.id !== e.target.id && ele.classList.contains('target')) || ele.classList.contains('real-canvas')
+ );
+ const draggedOverElem = draggedOverElements.find((ele) => ele.classList.contains('target'));
+ const draggedOverContainer = draggedOverElements.find((ele) => ele.classList.contains('real-canvas'));
+ // Determine potential new parent
+ let newParentId = draggedOverContainer?.getAttribute('data-parentId') || draggedOverElem?.id;
+
+ if (newParentId === e.target.id) {
+ newParentId = boxList.find((box) => box.id === e.target.id)?.component?.parent;
+ } else if (parentComponent?.component?.component === 'Modal') {
+ // Never update parentId for Modal
+ newParentId = parentComponent?.id;
+ }
+
+ if (newParentId !== prevDragParentId.current) {
+ setDragParentId(newParentId === 'canvas' ? null : newParentId);
+ newDragParentId.current = newParentId === 'canvas' ? null : newParentId;
+ prevDragParentId.current = newParentId;
+ handleActivateTargets(newParentId);
+ }
+ }
// Postion ghost element exactly as same at dragged element
if (document.getElementById(`moveable-drag-ghost`)) {
document.getElementById(`moveable-drag-ghost`).style.transform = `translate(${left}px, ${top}px)`;
@@ -979,31 +987,29 @@ export default function Grid({ gridWidth, currentLayout }) {
parentElm?.classList?.add('show-grid');
}
- handleDragGridLinesVisibility(ev, events);
-
events.forEach((ev) => {
- let left = ev.translate[0];
- let top = ev.translate[1];
+ const currentWidget = boxList.find(({ id }) => id === ev.target.id);
+ const _gridWidth =
+ useGridStore.getState().subContainerWidths?.[currentWidget?.component?.parent] || gridWidth;
+
+ let left = Math.round(ev.translate[0] / _gridWidth) * _gridWidth;
+ let top = Math.round(ev.translate[1] / GRID_HEIGHT) * GRID_HEIGHT;
ev.target.style.transform = `translate(${left}px, ${top}px)`;
});
+ handleActivateTargets(parentElm?.id?.replace('canvas-', ''));
updateNewPosition(events);
}}
onDragGroupStart={({ events }) => {
- const parentElm = events[0]?.target?.closest('.real-canvas');
- parentElm?.classList?.add('show-grid');
+ showGridLines();
+ setIsGroupDragging(true);
+ handleActivateNonDraggingComponents();
}}
onDragGroupEnd={(e) => {
handleDragGroupEnd(e);
+ handleDeactivateTargets();
toggleCanvasUpdater();
}}
- //snap settgins
- snappable={true}
- snapThreshold={10}
- isDisplaySnapDigit={false}
- bounds={CANVAS_BOUNDS}
- displayAroundControls={true}
- controlPadding={20}
onClickGroup={(e) => {
const targetId =
e.inputEvent.target.id || e.inputEvent.target.closest('.moveable-box')?.getAttribute('widgetid');
@@ -1019,6 +1025,43 @@ export default function Grid({ gridWidth, currentLayout }) {
}
}
}}
+ //snap settgins
+ snappable={true}
+ snapGap={false}
+ isDisplaySnapDigit={false}
+ snapThreshold={GRID_HEIGHT}
+ bounds={canvasBounds}
+ // Guidelines configuration
+ elementGuidelines={elementGuidelines}
+ snapDirections={{
+ top: true,
+ right: true,
+ bottom: true,
+ left: true,
+ center: false,
+ middle: false,
+ }}
+ elementSnapDirections={{
+ top: true,
+ left: true,
+ bottom: true,
+ right: true,
+ center: false,
+ middle: false,
+ }}
+ onSnap={(e) => {
+ const components = e.elements;
+ if (isArray(componentsSnappedTo.current)) {
+ for (const component of componentsSnappedTo.current) {
+ component?.element?.classList?.remove('active-target');
+ }
+ }
+ componentsSnappedTo.current = components;
+ for (const component of components) {
+ component.element.classList.add('active-target');
+ }
+ }}
+ snapGridAll={true}
/>
);
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
index 817f9a5ca9..da179bc11d 100644
--- a/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/gridUtils.js
@@ -1,7 +1,7 @@
import { useGridStore } from '@/_stores/gridStore';
import { isEmpty } from 'lodash';
import useStore from '@/AppBuilder/_stores/store';
-
+import { getTabId, getSubContainerIdWithSlots } from '../appCanvasUtils';
export function correctBounds(layout, bounds) {
layout = scaleLayouts(layout);
const collidesWith = [];
@@ -291,6 +291,7 @@ export function getMouseDistanceFromParentDiv(event, id, parentWidgetType) {
? document.getElementById(id)
: id
: document.getElementsByClassName('real-canvas')[0];
+ parentDiv = id === 'real-canvas' ? document.getElementById('real-canvas') : document.getElementById('canvas-' + id);
if (parentWidgetType === 'Container' || parentWidgetType === 'Modal') {
parentDiv = document.getElementById('canvas-' + id);
}
@@ -391,3 +392,99 @@ export function hasParentWithClass(child, className) {
return false;
}
+
+export function showGridLines() {
+ var canvasElms = document.getElementsByClassName('sub-canvas');
+ var elementsArray = Array.from(canvasElms);
+ elementsArray.forEach(function (element) {
+ element.classList.remove('hide-grid');
+ element.classList.add('show-grid');
+ });
+ document.getElementById('real-canvas')?.classList.remove('hide-grid');
+ document.getElementById('real-canvas')?.classList.add('show-grid');
+}
+
+export function hideGridLines() {
+ var canvasElms = document.getElementsByClassName('sub-canvas');
+ var elementsArray = Array.from(canvasElms);
+ elementsArray.forEach(function (element) {
+ element.classList.remove('show-grid');
+ element.classList.add('hide-grid');
+ });
+ document.getElementById('real-canvas')?.classList.remove('show-grid');
+ document.getElementById('real-canvas')?.classList.add('hide-grid');
+}
+
+// Track previously active elements for efficient cleanup
+let previousActiveWidgets = null;
+let previousActiveCanvas = null;
+
+export const handleActivateNonDraggingComponents = () => {
+ // Only add non-dragging class to visible components in viewport
+ document.querySelectorAll('.moveable-box:not(.active-target)').forEach((component) => {
+ // Check if element is visible in viewport
+ const rect = component.getBoundingClientRect();
+ const isVisible =
+ rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+
+ if (isVisible) {
+ component.classList.add('non-dragging-component');
+ }
+ });
+};
+
+export const handleActivateTargets = (parentId) => {
+ const WIDGETS_WITH_CANVAS_OUTLINE = ['Container', 'Modal', 'Form', 'Listview', 'Kanban'];
+
+ const newParentType = document.getElementById('canvas-' + parentId)?.getAttribute('component-type');
+ let _parentId = parentId;
+ if (newParentType === 'Tabs') {
+ _parentId = getTabId(parentId);
+ } else if (WIDGETS_WITH_CANVAS_OUTLINE.includes(newParentType)) {
+ _parentId = getSubContainerIdWithSlots(parentId);
+ }
+
+ // Clean up previous active elements
+ if (previousActiveWidgets) {
+ previousActiveWidgets.classList.remove('dragging-component-canvas');
+ previousActiveWidgets = null;
+ }
+
+ if (previousActiveCanvas) {
+ previousActiveCanvas.classList.remove('dragging-component-canvas');
+ previousActiveCanvas = null;
+ }
+
+ const parentComponent = document.getElementById(_parentId);
+ if (!parentComponent) return;
+
+ if (WIDGETS_WITH_CANVAS_OUTLINE?.includes(newParentType)) {
+ // If it's multiple canvas in single widget, highlight the specific canvas
+ const canvasElm = document.getElementById('canvas-' + parentId);
+ if (canvasElm) {
+ canvasElm.classList.add('dragging-component-canvas');
+ previousActiveCanvas = canvasElm;
+ }
+ } else {
+ // Otherwise highlight the component box
+ parentComponent.classList.remove('non-dragging-component');
+ parentComponent.classList.add('dragging-component-canvas');
+ previousActiveWidgets = parentComponent;
+ }
+};
+
+export const handleDeactivateTargets = () => {
+ if (previousActiveWidgets) {
+ previousActiveWidgets.classList.remove('dragging-component-canvas');
+ previousActiveWidgets = null;
+ }
+
+ if (previousActiveCanvas) {
+ previousActiveCanvas.classList.remove('dragging-component-canvas');
+ previousActiveCanvas = null;
+ }
+
+ document.querySelectorAll('.non-dragging-component').forEach((component) => {
+ component.classList.remove('non-dragging-component');
+ });
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js b/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js
new file mode 100644
index 0000000000..a9405d043e
--- /dev/null
+++ b/frontend/src/AppBuilder/AppCanvas/Grid/helpers/dragEnd.js
@@ -0,0 +1,266 @@
+/**
+ * Drag Context Breakdown:
+ *
+ * This object encapsulates all relevant details about a drag event,
+ * grouping the **source (where the widget came from)** and **target (where it's being dropped)**.
+ *
+ * Core Concepts:
+ * - `draggedWidget` → The widget being dragged (`e.target`).
+ * - `sourceSlot` → The original parent container of `draggedWidget`.
+ * - This could be a **header, footer, or a sub-container (like a container body)**.
+ * - `targetSlot` → The new parent container where `draggedWidget` is dropped.
+ * - `sourceWidget` → The **widget that owns** `sourceSlot` (its direct parent).
+ * - `targetWidget` → The **widget that owns** `targetSlot` (its direct parent).
+ *
+ * These entities are structured into a **contextual grouping**, allowing for easy access:
+ *
+ * {
+ * source: {
+ * widget: sourceWidget, // The original widget that holds the source slot.
+ * slot: sourceSlot, // The slot where the widget was initially located.
+ * id: sourceWidget.id, // Unique identifier of the source widget.
+ * slotId: sourceSlot.id, // Unique identifier of the source slot.
+ *
+ * isModal: computed function, // Checks if sourceWidget is a Modal.
+ * slotType: computed function, // Determines if the slot is a header, footer, or body.
+ * widgetType: computed function, // Returns the type of the widget (e.g., Table, Form, etc.).
+ * },
+ *
+ * target: {
+ * widget: targetWidget, // The new widget where the dragged widget is being placed.
+ * slot: targetSlot, // The slot inside `targetWidget` where the drop is happening.
+ * id: targetWidget.id, // Unique identifier of the target widget.
+ * slotId: targetSlot.id, // Unique identifier of the target slot.
+ *
+ * isModal: computed function, // Checks if targetWidget is a Modal.
+ * slotType: computed function, // Determines if the slot is a header, footer, or body.
+ * widgetType: computed function, // Returns the type of the target widget.
+ * }
+ * }
+ *
+ * Additional Checks:
+ * - `isSourceModal` → **Is the source inside a modal?**
+ * - `isTargetModal` → **Is the target inside a modal?**
+ * - `isDraggingToModalSlots` → **Is the widget being dragged into a modal slot (header/footer)?**
+ * - `targetSlotType` → **Determines whether the drop is happening in a header, footer, or body.**
+ *
+ * Why This Matters?
+ * - This structure helps **validate and restrict movements**, ensuring widgets follow UI constraints.
+ * - Prevents invalid drops (e.g., putting a button inside a Table component).
+ * - Enables **modular and flexible** widget movement across different UI sections.
+ */
+import { getMouseDistanceFromParentDiv } from '../gridUtils';
+import {
+ RESTRICTED_WIDGETS_CONFIG,
+ RESTRICTED_WIDGET_SLOTS_CONFIG,
+} from '@/AppBuilder/WidgetManager/configs/restrictedWidgetsConfig';
+
+const CANVAS_ID = 'canvas';
+const REAL_CANVAS_ID = 'real-canvas';
+
+/**
+ * Represents the widget being dragged.
+ *
+ * This class encapsulates all necessary information about the dragged widget,
+ * including its type, position, and whether it is allowed to move into certain areas.
+ */
+export class DragEntity {
+ constructor(widget) {
+ this.widget = widget; // The widget object being dragged
+ this.id = widget?.id || null; // Unique ID of the dragged widget
+ this.left = widget.left; // Initial X position (relative to grid)
+ this.top = widget.top; // Initial Y position (relative to grid)
+ }
+
+ get widgetType() {
+ return this.widget?.component?.component || null;
+ }
+}
+
+/**
+ * Defines a **droppable area** in the canvas.
+ *
+ * A droppable area is a container that can accept dragged widgets.
+ * This class helps determine if a slot is valid and handles various properties like modals.
+ */
+export class DropAreaEntity {
+ static dropAreaWidgets = ['Calendar', 'Kanban', 'Form', 'Tabs', 'Modal', 'ModalV2', 'Listview', 'Container', 'Table'];
+
+ constructor(widget, slotId) {
+ this.widget = widget; // The widget that owns this slot
+ this.id = widget?.id || CANVAS_ID; // ID of the widget
+ this.slotId = slotId || REAL_CANVAS_ID; // ID of the slot where the widget is located
+ }
+
+ // Checks if the widget is a modal
+ get isModal() {
+ return ['Modal', 'ModalV2'].includes(this.widget?.component?.component);
+ }
+
+ // Checks if the widget is the new version of modal
+ get isNewModal() {
+ return this.widget?.component?.component === 'ModalV2';
+ }
+
+ // Checks if the widget is the legacy modal
+ get isLegacyModal() {
+ return this.widget?.component?.component === 'Modal';
+ }
+
+ // Determines if the slot belongs to a modal's header/footer
+ get isInModalSlot() {
+ return this.isNewModal && this.isOnCustomSlot;
+ }
+
+ // Identifies if the slot is a custom slot (e.g., modal header/footer)
+ get isOnCustomSlot() {
+ return this.slotId.includes('-header') || this.slotId.includes('-footer');
+ }
+
+ // Determines if the slot is a valid drop target
+ get isDroppable() {
+ return DropAreaEntity.dropAreaWidgets.includes(this.widgetType);
+ }
+
+ // Returns the type of slot (header, footer, body, etc.)
+ get slotType() {
+ return this.slotId ? this.slotId.split('-').pop() : CANVAS_ID;
+ }
+
+ // Returns the type of the widget inside the slot
+ get widgetType() {
+ return this.widget?.component?.component || CANVAS_ID;
+ }
+}
+
+/**
+ * Represents the **dragging context**, encapsulating information
+ * about the source, target, and the dragged widget.
+ *
+ * This helps determine:
+ * - Whether the move is valid
+ * - Where the widget should be placed
+ * - Any restrictions based on parent-child relationships
+ */
+export class DragContext {
+ constructor({ sourceSlotId, targetSlotId, draggedWidgetId, widgets }) {
+ const sourceWidgetId = sourceSlotId?.slice(0, 36);
+ const sourceWidget = getWidgetById(widgets, sourceWidgetId);
+
+ const targetWidgetId = targetSlotId?.slice(0, 36);
+ const targetWidget = getWidgetById(widgets, targetWidgetId);
+
+ const draggedWidget = getWidgetById(widgets, draggedWidgetId);
+
+ this.source = new DropAreaEntity(sourceWidget, sourceSlotId);
+ this.target = new DropAreaEntity(targetWidget, targetSlotId);
+ this.dragged = new DragEntity(draggedWidget);
+ this.widgets = widgets;
+ }
+
+ /**
+ * Updates the **target slot** dynamically as the drag event progresses.
+ */
+ updateTarget(targetSlotId) {
+ const targetWidgetId = targetSlotId?.slice(0, 36);
+ const targetWidget = getWidgetById(this.widgets, targetWidgetId);
+ this.target = new DropAreaEntity(targetWidget, targetSlotId);
+ }
+
+ get isDroppable() {
+ const { dragged, target } = this;
+
+ const restrictedWidgetsOnTarget = RESTRICTED_WIDGETS_CONFIG?.[target.widgetType] || [];
+ const restrictedWidgetsOnTargetSlot = RESTRICTED_WIDGET_SLOTS_CONFIG?.[target.slotType] || [];
+
+ const restrictedWidgets = [...restrictedWidgetsOnTarget, ...restrictedWidgetsOnTargetSlot];
+ return !restrictedWidgets.includes(dragged.widgetType);
+ ß;
+ }
+}
+
+/**
+ * Constructs the **dragging context** by gathering all relevant details from the event.
+ */
+export function dragContextBuilder({ event, widgets }) {
+ const draggedWidgetId = event.target.id;
+ const draggedWidget = getWidgetById(widgets, draggedWidgetId);
+ const sourceSlotId = draggedWidget.parent;
+
+ // Initialize drag context
+ const context = new DragContext({ widgets, draggedWidgetId, sourceSlotId, targetSlotId: sourceSlotId });
+
+ // Determine the potential drop target
+ const targetSlotId = getDroppableSlotIdOnScreen(event, widgets);
+ context.updateTarget(targetSlotId);
+
+ return context;
+}
+
+/**
+ * Given an event, finds the **nearest valid droppable slot**.
+ */
+export const getDroppableSlotIdOnScreen = (event, widgets) => {
+ const [slotId] = document
+ .elementsFromPoint(event.clientX, event.clientY)
+ .filter(
+ (ele) =>
+ !event.target.contains(ele) && ele.id !== event.target.id && ele.classList.contains('drag-container-parent')
+ )
+ .map((ele) => extractSlotId(ele))
+ .filter((slotId) => {
+ const widgetType = getWidgetById(widgets, slotId.slice(0, 36))?.component?.component || CANVAS_ID;
+ return DropAreaEntity.dropAreaWidgets.includes(widgetType);
+ });
+
+ return slotId;
+};
+
+/**
+ * Finds a widget by its ID.
+ */
+export function getWidgetById(boxList, targetId) {
+ return boxList.find((box) => box.id === targetId) ?? null;
+}
+
+/**
+ * Extracts the **slot ID** from a given DOM element.
+ */
+const extractSlotId = (element) => {
+ return element?.getAttribute('component-id') || element.id.replace(/^canvas-/, '');
+};
+
+/**
+ * Computes the final (left, top) position for a dragged widget based on grid snapping and drop conditions.
+ *
+ * @param {Object} event - Drag event object containing movement data.
+ * @param {DropAreaEntity} target - The target drop area entity (where widget is dropped).
+ * @param {boolean} isParentChangeAllowed - Whether the widget can move to the target.
+ * @param {number} gridWidth - The width of the grid for alignment.
+ * @param {DragEntity} dragged - The entity being dragged.
+ * @returns {Object} { left, top } - The computed position.
+ */
+export const getAdjustedDropPosition = (event, target, isParentChangeAllowed, gridWidth, dragged) => {
+ let left = event.lastEvent?.translate[0];
+ let top = event.lastEvent?.translate[1];
+
+ if (isParentChangeAllowed) {
+ // Compute the relative position inside the new container
+ const { left: adjustedLeft, top: adjustedTop } = getMouseDistanceFromParentDiv(
+ event,
+ target.slotId,
+ target.widgetType
+ );
+
+ return {
+ left: Math.round(adjustedLeft / gridWidth) * gridWidth, // Snap to the nearest grid column
+ top: Math.round(adjustedTop / 10) * 10, // Snap to the nearest 10px
+ };
+ }
+
+ // If movement is restricted, revert to original position
+ return {
+ left: dragged.left * gridWidth,
+ top: dragged.top,
+ };
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index 427cced97b..b26586dc08 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -6,7 +6,7 @@ import { OverlayTrigger } from 'react-bootstrap';
import { renderTooltip } from '@/_helpers/appUtils';
import { useTranslation } from 'react-i18next';
import ErrorBoundary from '@/_ui/ErrorBoundary';
-
+import { BOX_PADDING } from './appCanvasConstants';
const shouldAddBoxShadowAndVisibility = [
'Table',
'TextInput',
@@ -164,7 +164,7 @@ const RenderWidget = ({
setSearchText(e.target.value)}
- onKeyDown={(e) => e.key === 'Enter' && findNext(view)}
+ onFocus={() => setShortcutEnabled(true)}
+ onBlur={() => setShortcutEnabled(false)}
placeholder="Find"
size="small"
value={searchText}
diff --git a/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx b/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
index 4edd8a0fda..dab57d0f20 100644
--- a/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/TJDBHinter.jsx
@@ -56,8 +56,8 @@ const TJDBCodeEditor = (props) => {
const handleOnChange = (value) => {
if (value === '') {
- setErrorState(true);
- setError('JSON cannot be empty');
+ setErrorState(false);
+ setError(null);
setCurrentValue(value);
return;
}
@@ -167,18 +167,18 @@ const TJDBCodeEditor = (props) => {
componentName={componentName}
key={componentName}
forceUpdate={forceUpdate}
- optionalProps={{ styles: { height: 300 }, cls: '' }}
+ optionalProps={{ styles: { height: 300 }, cls: 'tjdb-hinter-portal' }}
darkMode={darkMode}
selectors={{ className: 'preview-block-portal tjdb-portal-codehinter' }}
dragResizePortal={true}
callgpt={null}
>
-
state.getComponentDefinition(id)?.layouts?.[currentLayout], shallow);
const isWidgetActive = useStore((state) => state.selectedComponents.find((sc) => sc === id) && !readOnly, shallow);
- const isDragging = useGridStore((state) => state.draggingComponentId === id);
+ const isDragging = useStore((state) => state.draggingComponentId === id);
const isResizing = useGridStore((state) => state.resizingComponentId === id);
const componentType = useStore((state) => state.getComponentDefinition(id)?.component?.component, shallow);
const setHoveredComponentForGrid = useStore((state) => state.setHoveredComponentForGrid, shallow);
@@ -52,7 +52,9 @@ const WidgetWrapper = memo(
height: visibility === false ? '10px' : `${height}px`,
transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`,
WebkitFontSmoothing: 'antialiased',
+ border: visibility === false ? `1px solid var(--border-default)` : 'none',
};
+
if (!componentType) return null;
return (
<>
@@ -67,8 +69,8 @@ const WidgetWrapper = memo(
data-id={`${id}`}
id={id}
widgetid={id}
+ component-type={componentType}
style={{
- // transform: `translate(332px, -134px)`,
// zIndex: mode === 'view' && widget.component.component == 'Datepicker' ? 2 : null,
...styles,
}}
@@ -84,11 +86,11 @@ const WidgetWrapper = memo(
{mode == 'edit' && (
{
- const { componentName, layout, incrementWidth, properties, accessorKey, tab, defaultValue, styles } = child;
+ const { componentName, layout, incrementWidth, properties, accessorKey, tab, defaultValue, styles, slotName } =
+ child;
const componentMeta = deepClone(componentTypes.find((component) => component.component === componentName));
const componentData = JSON.parse(JSON.stringify(componentMeta));
@@ -139,7 +140,12 @@ export function addChildrenWidgetsToParent(componentType, parentId, currentLayou
}
const nonActiveLayout = currentLayout === 'desktop' ? 'mobile' : 'desktop';
- const _parent = getParentComponentIdByType(child, parentMeta.component, parentId);
+ const _parent = getParentComponentIdByType({
+ child,
+ parentComponent: parentMeta.component,
+ parentId,
+ slotName,
+ });
const newChildComponent = {
id: uuidv4(),
@@ -199,7 +205,9 @@ export const getAllChildComponents = (allComponents, parentId) => {
allComponents[parentId]?.component?.component === 'Tabs' ||
allComponents[parentId]?.component?.component === 'Calendar' ||
allComponents[parentId]?.component?.component === 'Kanban' ||
- allComponents[parentId]?.component?.component === 'Container';
+ allComponents[parentId]?.component?.component === 'Container' ||
+ allComponents[parentId]?.component?.component === 'Form' ||
+ allComponents[parentId]?.component?.component === 'ModalV2';
if (componentParentId && isParentTabORCalendar) {
let childComponent = deepClone(allComponents[componentId]);
@@ -249,7 +257,6 @@ export const copyComponents = ({ isCut = false, isCloning = false }) => {
const parentComponentId = isChildOfTabsOrCalendar(selectedComponent, allComponents)
? selectedComponent.component.parent.split('-').slice(0, -1).join('-')
: selectedComponent?.component?.parent;
-
if (parentComponentId) {
// Check if the parent component is also selected
const isParentSelected = selectedComponents.some((comp) => comp.id === parentComponentId);
@@ -320,7 +327,9 @@ const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentI
return (
parentComponent.component.component === 'Tabs' ||
parentComponent.component.component === 'Calendar' ||
- parentComponent.component.component === 'Container'
+ parentComponent.component.component === 'Container' ||
+ parentComponent.component.component === 'Form' ||
+ parentComponent.component.component === 'ModalV2'
);
}
@@ -483,11 +492,14 @@ export function pasteComponents(targetParentId, copiedComponentObj) {
// Prevent pasting if the parent subcontainer was deleted during a cut operation
if (
targetParentId &&
+ // Check if targetParentId is deleted from the components
!Object.keys(components).find(
(key) =>
targetParentId === key ||
(components?.[key]?.component.component === 'Tabs' &&
- targetParentId?.split('-')?.slice(0, -1)?.join('-') === key)
+ targetParentId?.split('-')?.slice(0, -1)?.join('-') === key) ||
+ (['Container', 'Form', 'Modal'].includes(components?.[key]?.component.component) &&
+ ['header', 'footer'].some((section) => targetParentId.includes(section)))
)
) {
return;
@@ -655,10 +667,42 @@ export const computeViewerBackgroundColor = (isAppDarkMode, canvasBgColor) => {
return canvasBgColor;
};
-export const getParentComponentIdByType = (child, parentComponent, parentId) => {
+export const getParentComponentIdByType = ({ child, parentComponent, parentId, slotName }) => {
const { tab } = child;
if (parentComponent === 'Tabs') return `${parentId}-${tab}`;
- else if (parentComponent === 'Container') return `${parentId}-header`;
+ else if (
+ slotName &&
+ (parentComponent === 'Form' || parentComponent === 'Container' || parentComponent === 'ModalV2')
+ ) {
+ return `${parentId}-${slotName}`;
+ }
return parentId;
};
+
+export const getParentWidgetFromId = (parentType, parentId) => {
+ const isAddingToSlot = parentId?.includes('-header') || parentId?.includes('-footer');
+
+ if (parentType === 'ModalV2' && isAddingToSlot) {
+ return 'ModalSlot';
+ } else if (parentType === 'Kanban') {
+ return 'Kanban_card';
+ }
+ return parentType;
+};
+
+export const getTabId = (parentId) => {
+ return parentId.split('-').slice(0, -1).join('-');
+};
+
+export const getSubContainerIdWithSlots = (parentId) => {
+ let cleanParentId = parentId;
+ if (parentId) {
+ if (parentId.includes('header')) {
+ cleanParentId = parentId.replace('-header', '');
+ } else if (parentId.includes('footer')) {
+ cleanParentId = parentId.replace('-footer', '');
+ }
+ }
+ return cleanParentId;
+};
diff --git a/frontend/src/AppBuilder/AppCanvas/selecto.scss b/frontend/src/AppBuilder/AppCanvas/selecto.scss
index 9ca8a37f41..5602b35d5a 100644
--- a/frontend/src/AppBuilder/AppCanvas/selecto.scss
+++ b/frontend/src/AppBuilder/AppCanvas/selecto.scss
@@ -3,15 +3,18 @@
}
.main-editor-canvas .widget-target:not(:has(.widget-target:hover)):hover {
- z-index: 4 !important;
-}
-
-.main-editor-canvas .widget-target:has(.nested-target:hover):hover {
- outline: 0px solid #4af;
-}
-
-.main-editor-canvas .nested-target:not(:has(.nested-target:hover)):hover {
outline: 1px solid #4af;
z-index: 4 !important;
}
+.main-editor-canvas .nested-target:not(:has(.nested-target:hover)):hover {
+ // outline: 1px solid #4af;
+ z-index: 4 !important;
+}
+
+// .main-editor-canvas .widget-target:hover {
+// outline: 1px solid #4af;
+// }
+
+
+
diff --git a/frontend/src/AppBuilder/CodeBuilder/Elements/TableRowHeightInput.jsx b/frontend/src/AppBuilder/CodeBuilder/Elements/TableRowHeightInput.jsx
index b9fb85fcae..099cd3763a 100644
--- a/frontend/src/AppBuilder/CodeBuilder/Elements/TableRowHeightInput.jsx
+++ b/frontend/src/AppBuilder/CodeBuilder/Elements/TableRowHeightInput.jsx
@@ -5,19 +5,13 @@ const MIN_TABLE_ROW_HEIGHT_DEFAULT = 45;
const TableRowHeightInput = ({ value, onChange, cyLabel, staticText, styleDefinition }) => {
const [inputValue, setInputValue] = useState(value);
+ const minValue =
+ styleDefinition.cellSize?.value === 'condensed' ? MIN_TABLE_ROW_HEIGHT_CONDENSED : MIN_TABLE_ROW_HEIGHT_DEFAULT;
+
useEffect(() => {
setInputValue(value < minValue ? minValue : value);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value, styleDefinition.cellSize?.value]);
- useEffect(() => {
- onChange(
- styleDefinition.cellSize?.value === 'condensed' ? MIN_TABLE_ROW_HEIGHT_CONDENSED : MIN_TABLE_ROW_HEIGHT_DEFAULT
- );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- const minValue =
- styleDefinition.cellSize?.value === 'condensed' ? MIN_TABLE_ROW_HEIGHT_CONDENSED : MIN_TABLE_ROW_HEIGHT_DEFAULT;
const handleBlur = () => {
const newValue = Math.max(inputValue, minValue);
diff --git a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
index 033d266e03..f95baaa328 100644
--- a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
@@ -300,10 +300,10 @@ const MultiLineCodeEditor = (props) => {
editable={editable} //for transformations in query manager
onCreateEditor={(view) => setEditorView(view)}
onUpdate={(view) => {
- const icon = document.querySelector('.codehinter-search-btn-wrapper');
+ const icon = document.querySelector('.codehinter-search-btn');
if (searchPanelOpen(view.state)) {
- icon.style.top = '44px';
- } else icon.style.top = '0px';
+ icon.style.display = 'none';
+ } else icon.style.display = 'block';
}}
/>
diff --git a/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx b/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx
index 2b807f718b..28f7451b95 100644
--- a/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx
+++ b/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
@@ -9,12 +10,13 @@ import {
replaceNext,
replaceAll,
openSearchPanel,
- // eslint-disable-next-line import/no-unresolved
} from '@codemirror/search';
import './SearchBox.scss';
import InputComponent from '@/components/ui/Input/Index.jsx';
import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
import { ToolTip } from '@/_components/ToolTip';
+import { SelectionRange } from '@codemirror/state';
+import { useHotkeys } from 'react-hotkeys-hook';
export const handleSearchPanel = (view) => {
const dom = document.createElement('div');
@@ -35,6 +37,11 @@ function SearchPanel({ view }) {
replace: replaceTerm,
});
view.dispatch({ effects: setSearchQuery.of(query) });
+
+ const currentPos = view.state.selection.main.head;
+ view.dispatch({
+ selection: SelectionRange.create(currentPos, currentPos),
+ });
};
useEffect(() => {
@@ -44,12 +51,28 @@ function SearchPanel({ view }) {
return () => clearTimeout(handler);
}, [searchText, replaceText]);
+ const [shortcutEnabled, setShortcutEnabled] = useState(false);
+
+ // Shortcuts for search input field
+ useHotkeys(
+ ['shift+enter', 'enter'],
+ (event, handler) => {
+ if (handler.shift && handler.keys[0] === 'enter') findPrevious(view);
+ else if (handler.keys[0] === 'enter') findNext(view);
+ },
+ {
+ enabled: shortcutEnabled,
+ enableOnFormTags: true,
+ }
+ );
+
const displaySearchField = () => (
+
{
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
- const handleNodeExpansion = (path) => {
+ const handleNodeExpansion = (path, data, currentNode) => {
if (pathToBeInspected && path?.length > 0) {
- return pathToBeInspected.includes(path[path.length - 1]);
+ const shouldExpand = pathToBeInspected.includes(path[path.length - 1]);
+
+ // Scroll to the component in the inspector
+ if (path?.length === 2 && path?.[0] === 'components' && shouldExpand) {
+ const target = document.getElementById(`inspector-node-${String(currentNode).toLowerCase()}`);
+ if (target) {
+ target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ }
+ }
+
+ return shouldExpand;
} else return false;
};
diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
index 7067cd540d..937fe45b2c 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
@@ -9,6 +9,7 @@ const useCallbackActions = () => {
const currentPageComponents = useStore((state) => state?.getCurrentPageComponents(), shallow);
const shouldFreeze = useStore((state) => state.getShouldFreeze());
const runQuery = useStore((state) => state.queryPanel.runQuery);
+ const getComponentIdToAutoScroll = useStore((state) => state.getComponentIdToAutoScroll);
const handleRemoveComponent = (component) => {
deleteComponents([component.id]);
@@ -30,30 +31,22 @@ const useCallbackActions = () => {
return toast.success('Copied to the clipboard', { position: 'top-center' });
};
- const autoScrollTo = (id) => {
- setSelectedComponents([id]);
- const target = document.getElementById(id);
- target.scrollIntoView({ behavior: 'smooth', block: 'center' });
- };
-
const handleAutoScrollToComponent = (data) => {
- const currentPageComponents = useStore.getState().getCurrentPageComponents();
- const component = currentPageComponents?.[data.id];
-
- let parentId = component?.component?.parent;
- if (parentId) {
- const regex = /-\d+$/;
- if (regex.test(parentId)) {
- parentId = parentId.replace(regex, ''); // To get parentId without tab index if parent type is Tab
- }
- const parentType = currentPageComponents?.[parentId]?.component?.component;
- if (parentType && (parentType === 'Modal' || parentType === 'Tabs')) {
- autoScrollTo(parentId); // To scroll to parent component if parent type is Modal or Tabs
- return;
- }
+ const { isAccessible, computedComponentId, isOnCanvas } = getComponentIdToAutoScroll(data.id);
+ if (!isAccessible) {
+ if (isOnCanvas) {
+ toast.success(
+ `This component can't be opened because it's on the main canvas. Close ${computedComponentId} and click "Go to component" to view it there`
+ );
+ } else
+ toast.success(
+ `This component can't be opened because it's inside ${computedComponentId}. Open ${computedComponentId} and click "Go to component"to view it.`
+ );
+ return;
}
-
- autoScrollTo(data.id);
+ setSelectedComponents([computedComponentId]);
+ const target = document.getElementById(computedComponentId);
+ target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
};
const callbackActions = [
diff --git a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
index d40dc44f74..9e6737f41c 100644
--- a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerBody.jsx
@@ -45,15 +45,15 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
const queryName = selectedQuery?.name ?? '';
const sourcecomponentName = selectedDataSource?.kind?.charAt(0).toUpperCase() + selectedDataSource?.kind?.slice(1);
- const ElementToRender = selectedDataSource?.pluginId ? source : allSources[sourcecomponentName];
+ const ElementToRender = selectedDataSource?.plugin_id ? source : allSources[sourcecomponentName];
const defaultOptions = useRef({});
const isFreezed = useStore((state) => state.getShouldFreeze());
useEffect(() => {
setDataSourceMeta(
- selectedQuery?.pluginId
- ? selectedQuery?.manifestFile?.data?.source
+ selectedQuery?.plugin_id
+ ? selectedQuery?.manifest_file?.data?.source
: DataSourceTypes.find((source) => source.kind === selectedQuery?.kind)
);
setSelectedQueryId(selectedQuery?.id);
@@ -188,7 +188,7 @@ export const BaseQueryManagerBody = ({ darkMode, activeTab, renderCopilot = () =
{
+export const BaseUrl = ({ dataSourceURL, theme, className = 'col-auto', style = {} }) => {
return (
- {dataSourceURL}
+
+ {dataSourceURL}
+
);
};
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
index feaeadcb23..4c89ad849e 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/index.jsx
@@ -28,7 +28,10 @@ class Restapi extends React.Component {
this.state = {
options,
+ codeHinterHeight: 32, // Default height
};
+ this.codeHinterRef = React.createRef();
+ this.resizeObserver = null;
}
componentDidUpdate(prevProps) {
@@ -40,21 +43,95 @@ class Restapi extends React.Component {
},
});
}
+ // Setup resize observer if it's not already set up
+ if (this.codeHinterRef.current && !this.resizeObserver) {
+ this.setupResizeObserver();
+ }
}
componentDidMount() {
try {
+ if (isEmpty(this.state.options['headers'])) {
+ this.addNewKeyValuePair('headers');
+ }
+ if (isEmpty(this.state.options['cookies'])) {
+ this.addNewKeyValuePair('cookies');
+ }
if (isEmpty(this.state.options['method'])) {
changeOption(this, 'method', 'get');
}
+ setTimeout(() => {
+ if (isEmpty(this.state.options['url_params'])) {
+ this.addNewKeyValuePair('url_params');
+ }
+ }, 1000);
+ setTimeout(() => {
+ if (isEmpty(this.state.options['body'])) {
+ this.addNewKeyValuePair('body');
+ }
+ }, 1000);
setTimeout(() => {
this.initizalizeRetryNetworkErrorsToggle();
}, 1000);
+
+ this.setupResizeObserver();
} catch (error) {
console.log(error);
}
}
+ componentWillUnmount() {
+ if (this.resizeObserver) {
+ this.resizeObserver.disconnect();
+ }
+ }
+
+ setupResizeObserver() {
+ if (!this.codeHinterRef.current) return;
+
+ // Try to find the editor element, checking multiple possible selectors
+ const findEditorElement = () => {
+ const element =
+ this.codeHinterRef.current.querySelector('.cm-editor') ||
+ this.codeHinterRef.current.querySelector('.codehinter-input') ||
+ this.codeHinterRef.current.querySelector('.code-hinter-wrapper');
+ return element;
+ };
+
+ // Initial attempt to find editor
+ let editorElement = findEditorElement();
+
+ // If not found immediately, try again after a short delay
+ if (!editorElement) {
+ setTimeout(() => {
+ editorElement = findEditorElement();
+ if (editorElement) {
+ this.setupObserverForElement(editorElement);
+ }
+ }, 100);
+ return;
+ }
+
+ this.setupObserverForElement(editorElement);
+ }
+
+ setupObserverForElement(element) {
+ if (this.resizeObserver) {
+ this.resizeObserver.disconnect();
+ }
+
+ this.resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ const height = Math.max(32, Math.min(entry.contentRect.height, 220));
+ if (height !== this.state.codeHinterHeight) {
+ this.setState({ codeHinterHeight: height });
+ }
+ }
+ });
+
+ this.resizeObserver.observe(element);
+ }
+
initizalizeRetryNetworkErrorsToggle = () => {
const isRetryNetworkErrorToggleUnused = this.props.options.retry_network_errors === null;
if (isRetryNetworkErrorToggleUnused) {
@@ -212,13 +289,30 @@ class Restapi extends React.Component {
useCustomStyles={true}
/>
-
+
URL
-
+
{dataSourceURL && (
-
+
{
>
{
{
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
index 95d2ab56e0..23d1c7f7cf 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DateTimePicker/styles.scss
@@ -214,4 +214,9 @@
.input-value-padding {
box-sizing: border-box;
padding-right: 30px !important;
+}
+
+.react-datepicker__navigation{
+ overflow: visible !important;
+ height: inherit !important;
}
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
index e3f31c974d..e873228888 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx
@@ -677,6 +677,7 @@ const ToolJetDbOperations = ({ optionchanged, options, darkMode, isHorizontalLay
}}
componentName="TooljetDatabase"
delayOnChange={false}
+ className="w-100"
/>
)}
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
index ef70343140..2ad7977496 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx
@@ -133,7 +133,7 @@ export const ComponentsManagerTab = ({ darkMode }) => {
'StarRating',
];
const integrationItems = ['Map'];
- const layoutItems = ['Container', 'Listview', 'Tabs', 'Modal'];
+ const layoutItems = ['Container', 'Listview', 'Tabs', 'ModalV2'];
filteredComponents.forEach((f) => {
if (commonItems.includes(f)) commonSection.items.push(f);
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
index 7450011b93..77274cd658 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/DragLayer.jsx
@@ -2,12 +2,14 @@ import React, { useEffect } from 'react';
import { WidgetBox } from '../WidgetBox';
import { useDrag, useDragLayer } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
+import { snapToGrid } from '@/AppBuilder/AppCanvas/appCanvasUtils';
+import { NO_OF_GRIDS } from '@/AppBuilder/AppCanvas/appCanvasConstants';
export const DragLayer = ({ index, component }) => {
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: 'box',
- item: { componentType: component.component },
+ item: { componentType: component.component, component },
collect: (monitor) => ({ isDragging: monitor.isDragging() }),
}),
[component.component]
@@ -18,7 +20,6 @@ export const DragLayer = ({ index, component }) => {
}, []);
const size = component.defaultSize || { width: 30, height: 40 };
-
return (
<>
{isDragging &&
)}
- {['string', 'default', undefined, 'number', 'boolean', 'select', 'text', 'newMultiSelect', 'datepicker'].includes(
- column.columnType
- ) && (
+ {[
+ 'string',
+ 'default',
+ undefined,
+ 'number',
+ 'json',
+ 'boolean',
+ 'select',
+ 'text',
+ 'newMultiSelect',
+ 'datepicker',
+ ].includes(column.columnType) && (
<>
{column.columnType !== 'boolean' && (
{
@@ -151,7 +153,8 @@ export const baseComponentProperties = (
'properties',
currentState,
allComponents,
- darkMode
+ darkMode,
+ ''
)
),
});
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx
index d4676ad4b6..b39924854e 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form.jsx
@@ -19,16 +19,34 @@ export const Form = ({
allComponents,
pages,
}) => {
- const properties = Object.keys(componentMeta.properties);
+ const tempComponentMeta = deepClone(componentMeta);
+
+ let properties = [];
+ let additionalActions = [];
+ let dataProperties = [];
+
const events = Object.keys(componentMeta.events);
const validations = Object.keys(componentMeta.validation || {});
- const tempComponentMeta = deepClone(componentMeta);
+
+ for (const [key] of Object.entries(componentMeta?.properties)) {
+ if (componentMeta?.properties[key]?.section === 'additionalActions') {
+ additionalActions.push(key);
+ } else if (componentMeta?.properties[key]?.accordian === 'Data') {
+ dataProperties.push(key);
+ } else {
+ properties.push(key);
+ }
+ }
const { id } = component;
const newOptions = [{ name: 'None', value: 'none' }];
- Object.entries(allComponents).forEach(([componentId, component]) => {
- if (component.component.parent === id && component?.component?.component === 'Button') {
- newOptions.push({ name: component.component.name, value: componentId });
+ Object.entries(allComponents).forEach(([componentId, _component]) => {
+ const validParent =
+ _component.component.parent === id ||
+ _component.component.parent === `${id}-footer` ||
+ _component.component.parent === `${id}-header`;
+ if (validParent && _component?.component?.component === 'Button') {
+ newOptions.push({ name: _component.component.name, value: componentId });
}
});
@@ -48,7 +66,8 @@ export const Form = ({
allComponents,
validations,
darkMode,
- pages
+ pages,
+ additionalActions
);
return
)}
+ {column.columnType === 'json' && (
+
+
+ )}
+
+
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
index e559369396..c3fb47d612 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
@@ -50,6 +50,8 @@ export const ProgramaticallyHandleProperties = ({
return props?.parseInUnixTimestamp;
case 'isDateSelectionEnabled':
return props?.isDateSelectionEnabled;
+ case 'jsonIndentation':
+ return props?.jsonIndentation;
default:
return;
}
@@ -81,6 +83,9 @@ export const ProgramaticallyHandleProperties = ({
if (property === 'linkColor') {
return definitionObj?.value ?? '#1B1F24';
}
+ if (property === 'jsonIndentation') {
+ return definitionObj?.value ?? `{{true}}`;
+ }
return definitionObj?.value ?? `{{false}}`;
};
@@ -111,7 +116,9 @@ export const ProgramaticallyHandleProperties = ({
const fxActiveFieldsPropExists = props?.hasOwnProperty('fxActiveFields') ?? false;
//to support backward compatibility, when fxActive is true for a particular column, we are passing all possible combinations which should render codehinter
const fxActive =
- props?.fxActive && resolveReferences(props.fxActive) ? ['isEditable', 'columnVisibility', 'linkTarget'] : [];
+ props?.fxActive && resolveReferences(props.fxActive)
+ ? ['isEditable', 'columnVisibility', 'jsonIndentation', 'linkTarget']
+ : [];
const checkFxActiveFieldIsArrray = (fxActiveFieldsProperty) => {
// adding error handling mechanism for fxActiveFieldsProperty , if props.fxActiveFields is array , then return props.fxActiveFields or else return [], this will make sure, fxActiveFields wil always be array
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
index 5a2175cfe1..b11a675e80 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
@@ -624,6 +624,8 @@ class TableComponent extends React.Component {
return 'Select';
case 'newMultiSelect':
return 'Multiselect';
+ case 'json':
+ return 'JSON';
default:
capitalize(text ?? '');
}
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
index 7ee512ee20..c74e023c0b 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Elements/Code.jsx
@@ -19,6 +19,7 @@ export const Code = ({
accordian,
placeholder,
validationFn,
+ isHidden = false,
}) => {
const currentState = useCurrentState();
@@ -43,6 +44,7 @@ export const Code = ({
onChange({ name: 'iconVisibility' }, 'value', value, 'styles');
}
+ if (isHidden) return null;
return (
{
@@ -703,6 +705,9 @@ const GetAccordion = React.memo(
case 'FilePicker':
return
- {properties.showHeader && (
-
- );
-};
diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
new file mode 100644
index 0000000000..4978427370
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -0,0 +1,119 @@
+import React, { useMemo } from 'react';
+import { Container as ContainerComponent } from '@/AppBuilder/AppCanvas/Container';
+import Spinner from '@/_ui/Spinner';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
+import { shallow } from 'zustand/shallow';
+import {
+ CONTAINER_FORM_CANVAS_PADDING,
+ SUBCONTAINER_CANVAS_BORDER_WIDTH,
+} from '@/AppBuilder/AppCanvas/appCanvasConstants';
+import useStore from '@/AppBuilder/_stores/store';
+import './container.scss';
+
+export const Container = ({
+ id,
+ properties,
+ styles,
+ darkMode,
+ height,
+ width,
+ setExposedVariables,
+ setExposedVariable,
+}) => {
+ const { isDisabled, isVisible, isLoading } = useExposeState(
+ properties.loadingState,
+ properties.visibility,
+ properties.disabledState,
+ setExposedVariables,
+ setExposedVariable
+ );
+
+ const isWidgetInContainerDragging = useStore(
+ (state) => state.containerChildrenMapping?.[id]?.includes(state?.draggingComponentId),
+ shallow
+ );
+
+ const { borderRadius, borderColor, boxShadow, headerHeight = 80 } = styles;
+ const contentBgColor = useMemo(() => {
+ return {
+ backgroundColor:
+ ['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor,
+ };
+ }, [styles.backgroundColor, darkMode]);
+
+ const headerBgColor = useMemo(() => {
+ return {
+ backgroundColor:
+ ['#fff', '#ffffffff'].includes(styles.headerBackgroundColor) && darkMode
+ ? '#232E3C'
+ : styles.headerBackgroundColor,
+ };
+ }, [styles.headerBackgroundColor, darkMode]);
+
+ const computedStyles = {
+ backgroundColor: contentBgColor.backgroundColor,
+ borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
+ border: `${SUBCONTAINER_CANVAS_BORDER_WIDTH}px solid ${borderColor}`,
+ height,
+ display: isVisible ? 'flex' : 'none',
+ flexDirection: 'column',
+ position: 'relative',
+ boxShadow,
+ };
+
+ const containerHeaderStyles = {
+ flexShrink: 0,
+ padding: `${CONTAINER_FORM_CANVAS_PADDING}px ${CONTAINER_FORM_CANVAS_PADDING}px 3px ${CONTAINER_FORM_CANVAS_PADDING}px`,
+ ...headerBgColor,
+ };
+
+ const containerContentStyles = {
+ overflow: 'hidden auto',
+ display: 'flex',
+ height: '100%',
+ padding: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ };
+
+ return (
+
-
- ) : (
-
+ {isLoading ? (
+
+ );
+};
diff --git a/frontend/src/AppBuilder/Widgets/Container/container.scss b/frontend/src/AppBuilder/Widgets/Container/container.scss
new file mode 100644
index 0000000000..323f5e8c9a
--- /dev/null
+++ b/frontend/src/AppBuilder/Widgets/Container/container.scss
@@ -0,0 +1,13 @@
+.wj-container-header {
+ position: relative;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: -7px;
+ right: -7px;
+ height: 1px;
+ background-color: var(--border-weak);
+ }
+ }
+
\ No newline at end of file
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index 674d707f03..afeb4cf844 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -1,17 +1,25 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
// eslint-disable-next-line import/no-unresolved
-import { diff } from 'deep-object-diff';
import _, { debounce, omit } from 'lodash';
-import { Box } from '@/Editor/Box';
import { generateUIComponents } from './FormUtils';
import { useMounted } from '@/_hooks/use-mount';
import { onComponentClick, removeFunctionObjects } from '@/_helpers/appUtils';
-import { useAppInfo } from '@/_stores/appDataStore';
import { deepClone } from '@/_helpers/utilities/utils.helpers';
import RenderSchema from './RenderSchema';
import useStore from '@/AppBuilder/_stores/store';
+import { useExposeState } from '@/AppBuilder/_hooks/useExposeVariables';
import { shallow } from 'zustand/shallow';
+import {
+ CONTAINER_FORM_CANVAS_PADDING,
+ SUBCONTAINER_CANVAS_BORDER_WIDTH,
+} from '@/AppBuilder/AppCanvas/appCanvasConstants';
+import './form.scss';
+
+const getCanvasHeight = (height) => {
+ const parsedHeight = height.includes('px') ? parseInt(height, 10) : height;
+ return Math.ceil(parsedHeight);
+};
export const Form = function Form(props) {
const {
@@ -29,27 +37,71 @@ export const Form = function Form(props) {
dataCy,
} = props;
const childComponents = useStore((state) => state.getChildComponents(id), shallow);
- const { visibility, disabledState, borderRadius, borderColor, boxShadow } = styles;
- const { buttonToSubmit, loadingState, advanced, JSONSchema } = properties;
+ const {
+ borderRadius,
+ borderColor,
+ boxShadow,
+ headerHeight,
+ footerHeight,
+ footerBackgroundColor,
+ headerBackgroundColor,
+ } = styles;
+ const {
+ buttonToSubmit,
+ loadingState,
+ advanced,
+ JSONSchema,
+ showHeader = false,
+ showFooter = false,
+ visibility,
+ disabledState,
+ } = properties;
+ const { isDisabled, isVisible, isLoading } = useExposeState(
+ properties.loadingState,
+ properties.visibility,
+ properties.disabledState,
+ setExposedVariables,
+ setExposedVariable
+ );
const backgroundColor =
['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
const computedStyles = {
backgroundColor,
borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
- border: `1px solid ${borderColor}`,
+ border: `${SUBCONTAINER_CANVAS_BORDER_WIDTH}px solid ${borderColor}`,
height,
- display: visibility ? 'flex' : 'none',
+ display: isVisible ? 'flex' : 'none',
position: 'relative',
- overflow: 'hidden auto',
boxShadow,
+ flexDirection: 'column',
};
- const childIdNameMap = useMemo(() => {
- return Object.keys(childComponents).reduce((acc, id) => {
- const component = childComponents[id]?.component?.component;
- return { ...acc, [id]: component?.name };
- }, {});
- }, [childComponents]);
+ const formHeader = {
+ flexShrink: 0,
+ paddingBottom: '3px',
+ paddingTop: '7px',
+ paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ backgroundColor:
+ ['#fff', '#ffffffff'].includes(headerBackgroundColor) && darkMode ? '#1F2837' : headerBackgroundColor,
+ };
+
+ const formContent = {
+ overflow: 'hidden auto',
+ display: 'flex',
+ height: '100%',
+ paddingTop: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ paddingBottom: showFooter ? '3px' : '7px',
+ paddingLeft: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ paddingRight: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ };
+
+ const formFooter = {
+ flexShrink: 0,
+ padding: `${CONTAINER_FORM_CANVAS_PADDING}px`,
+ backgroundColor:
+ ['#fff', '#ffffffff'].includes(footerBackgroundColor) && darkMode ? '#1F2837' : footerBackgroundColor,
+ };
const parentRef = useRef(null);
const childDataRef = useRef({});
@@ -58,6 +110,8 @@ export const Form = function Form(props) {
const [isValid, setValidation] = useState(true);
const [uiComponents, setUIComponents] = useState([]);
const mounted = useMounted();
+ const canvasHeaderHeight = getCanvasHeight(headerHeight) / 10;
+ const canvasFooterHeight = getCanvasHeight(footerHeight) / 10;
useEffect(() => {
const exposedVariables = {
@@ -155,7 +209,7 @@ export const Form = function Form(props) {
};
setExposedVariables(exposedVariables);
setValidation(childValidation);
- }, [childrenData, advanced, JSON.stringify(childIdNameMap)]);
+ }, [childrenData, advanced]);
useEffect(() => {
document.addEventListener('submitForm', handleFormSubmission);
@@ -245,105 +299,113 @@ export const Form = function Form(props) {
if (e.target.className === 'real-canvas') onComponentClick(id, component);
}} //Hack, should find a better solution - to prevent losing z index+1 when container element is clicked
>
- {loadingState ? (
-
+
+ )}
+
+
+
+ )}
+
-
-
-
-
- ) : (
-