mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
refactor: removed unused and old code
This commit is contained in:
Johnson Cherian
parent
de0cce452b
commit
726060fb63
5 changed files with 12 additions and 620 deletions
|
|
@ -349,49 +349,7 @@ export const Container = ({
|
|||
[moveBox]
|
||||
);
|
||||
|
||||
const onDragStop = useCallback(
|
||||
(e, componentId, direction, currentLayout) => {
|
||||
if (isVersionReleased) {
|
||||
enableReleasedVersionPopupState();
|
||||
return;
|
||||
}
|
||||
// const id = componentId ? componentId : uuidv4();
|
||||
|
||||
// Get the width of the canvas
|
||||
const canvasBounds = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
|
||||
const canvasWidth = canvasBounds?.width;
|
||||
const nodeBounds = direction.node.getBoundingClientRect();
|
||||
|
||||
// Computing the left offset
|
||||
const leftOffset = nodeBounds.x - canvasBounds.x;
|
||||
const currentLeftOffset = boxes[componentId]?.layouts?.[currentLayout]?.left;
|
||||
const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth);
|
||||
|
||||
// Computing the top offset
|
||||
// const currentTopOffset = boxes[componentId].layouts[currentLayout].top;
|
||||
const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y);
|
||||
|
||||
let newBoxes = { ...boxes };
|
||||
|
||||
for (const selectedComponent of selectedComponents) {
|
||||
newBoxes = produce(newBoxes, (draft) => {
|
||||
if (draft[selectedComponent.id]) {
|
||||
const topOffset = draft[selectedComponent.id].layouts[currentLayout].top;
|
||||
const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left;
|
||||
|
||||
draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff;
|
||||
draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setBoxes(newBoxes);
|
||||
updateCanvasHeight(newBoxes);
|
||||
},
|
||||
[isVersionReleased, enableReleasedVersionPopupState, boxes, setBoxes, selectedComponents, updateCanvasHeight]
|
||||
);
|
||||
|
||||
const onResizeStop2 = (boxList, id, height, width, x, y) => {
|
||||
const onResizeStop = (boxList, id, height, width, x, y) => {
|
||||
const newBoxes = boxList.reduce((newBoxList, { id, height, width, x, y, gw }) => {
|
||||
const _canvasWidth = gw ? gw * noOfGrids : canvasWidth;
|
||||
const newWidth = (width * noOfGrids) / _canvasWidth;
|
||||
|
|
@ -422,7 +380,7 @@ export const Container = ({
|
|||
updateCanvasHeight(updatedBoxes);
|
||||
};
|
||||
|
||||
function onDragStop2(boxPositions) {
|
||||
function onDragStop(boxPositions) {
|
||||
const updatedBoxes = boxPositions.reduce((boxesObj, { id, x, y, parent }) => {
|
||||
let _width = boxes[id]['layouts'][currentLayout].width;
|
||||
const containerWidth = parent ? subContainerWidths[parent] : gridWidth;
|
||||
|
|
@ -483,69 +441,6 @@ export const Container = ({
|
|||
setBoxes(newBoxes);
|
||||
}
|
||||
|
||||
const onResizeStop = useCallback(
|
||||
(id, e, direction, ref, d, position) => {
|
||||
if (isVersionReleased) {
|
||||
enableReleasedVersionPopupState();
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth
|
||||
const deltaHeight = d.height;
|
||||
|
||||
if (deltaWidth === 0 && deltaHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { x, y } = position;
|
||||
x = Math.round(x / gridWidth) * gridWidth;
|
||||
|
||||
const defaultData = {
|
||||
top: 100,
|
||||
left: 0,
|
||||
width: 445,
|
||||
height: 500,
|
||||
};
|
||||
|
||||
let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData;
|
||||
|
||||
const boundingRect = document.getElementsByClassName('canvas-area')[0].getBoundingClientRect();
|
||||
const canvasWidth = boundingRect?.width;
|
||||
|
||||
//round the width to nearest multiple of gridwidth before converting to %
|
||||
const currentWidth = (canvasWidth * width) / noOfGrids;
|
||||
let newWidth = currentWidth + deltaWidth;
|
||||
newWidth = Math.round(newWidth / gridWidth) * gridWidth;
|
||||
width = (newWidth * noOfGrids) / canvasWidth;
|
||||
|
||||
height = height + deltaHeight;
|
||||
|
||||
top = y;
|
||||
left = (x * 100) / canvasWidth;
|
||||
|
||||
let newBoxes = {
|
||||
...boxes,
|
||||
[id]: {
|
||||
...boxes[id],
|
||||
layouts: {
|
||||
...boxes[id]['layouts'],
|
||||
[currentLayout]: {
|
||||
...boxes[id]['layouts'][currentLayout],
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
setBoxes(newBoxes);
|
||||
updateCanvasHeight(newBoxes);
|
||||
},
|
||||
[setBoxes, currentLayout, boxes, enableReleasedVersionPopupState, isVersionReleased, updateCanvasHeight, gridWidth]
|
||||
);
|
||||
|
||||
const paramUpdated = useCallback(
|
||||
(id, param, value, opts = {}) => {
|
||||
if (Object.keys(value)?.length > 0) {
|
||||
|
|
@ -761,8 +656,6 @@ export const Container = ({
|
|||
onComponentOptionChanged={onComponentOptionChanged}
|
||||
onComponentOptionsChanged={onComponentOptionsChanged}
|
||||
key={key}
|
||||
onResizeStop={onResizeStop}
|
||||
onDragStop={onDragStop}
|
||||
paramUpdated={paramUpdated}
|
||||
id={key}
|
||||
{...boxes[key]}
|
||||
|
|
@ -863,8 +756,8 @@ export const Container = ({
|
|||
boxes={Object.keys(boxes).map((key) => ({ ...boxes[key], id: key }))}
|
||||
renderWidget={renderWidget}
|
||||
canvasWidth={canvasWidth}
|
||||
onResizeStop={onResizeStop2}
|
||||
onDrag={onDragStop2}
|
||||
onResizeStop={onResizeStop}
|
||||
onDrag={onDragStop}
|
||||
gridWidth={gridWidth}
|
||||
selectedComponents={selectedComponents}
|
||||
setIsDragging={setIsDragging}
|
||||
|
|
@ -876,45 +769,6 @@ export const Container = ({
|
|||
setDraggedSubContainer={setDraggedSubContainer}
|
||||
draggedSubContainer={draggedSubContainer}
|
||||
/>
|
||||
{/* {Object.keys(boxes).map((key) => {
|
||||
const box = boxes[key];
|
||||
const canShowInCurrentLayout =
|
||||
box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value;
|
||||
const addDefaultChildren = box.withDefaultChildren;
|
||||
|
||||
if (!box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) {
|
||||
return (
|
||||
<DraggableBox
|
||||
className={showComments && 'pointer-events-none'}
|
||||
canvasWidth={canvasWidth}
|
||||
onComponentClick={
|
||||
config.COMMENT_FEATURE_ENABLE && showComments ? handleAddThreadOnComponent : onComponentClick
|
||||
}
|
||||
onEvent={onEvent}
|
||||
onComponentOptionChanged={onComponentOptionChanged}
|
||||
onComponentOptionsChanged={onComponentOptionsChanged}
|
||||
key={key}
|
||||
onResizeStop={onResizeStop}
|
||||
onDragStop={onDragStop}
|
||||
paramUpdated={paramUpdated}
|
||||
id={key}
|
||||
{...boxes[key]}
|
||||
mode={mode}
|
||||
resizingStatusChanged={resizingStatusChanged}
|
||||
draggingStatusChanged={draggingStatusChanged}
|
||||
inCanvas={true}
|
||||
zoomLevel={zoomLevel}
|
||||
setSelectedComponent={setSelectedComponent}
|
||||
removeComponent={removeComponent}
|
||||
deviceWindowWidth={deviceWindowWidth}
|
||||
darkMode={darkMode}
|
||||
sideBarDebugger={sideBarDebugger}
|
||||
childComponents={childComponents[key]}
|
||||
containerProps={{ ...containerProps, addDefaultChildren }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})} */}
|
||||
{Object.keys(boxes).length === 0 && !appLoading && !isDragging && (
|
||||
<div style={{ paddingTop: '10%' }}>
|
||||
<div className="mx-auto w-50 p-5 bg-light no-components-box">
|
||||
|
|
|
|||
|
|
@ -133,9 +133,6 @@ export default function DragContainer({
|
|||
|
||||
useEffect(() => {
|
||||
const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)];
|
||||
// const newMovableTargets = groupedTargets.length
|
||||
// ? [groupedTargets.length == 1 ? groupedTargets[0] : groupedTargets]
|
||||
// : [];
|
||||
const newMovableTargets = groupedTargets.length ? [...groupedTargets] : [];
|
||||
if (hoveredComponent && groupedTargets?.length <= 1 && !groupedTargets.includes('.ele-' + hoveredComponent)) {
|
||||
newMovableTargets.push('.ele-' + hoveredComponent);
|
||||
|
|
@ -193,30 +190,7 @@ export default function DragContainer({
|
|||
transform: `translate(332px, -134px)`,
|
||||
...getDimensions(i.id),
|
||||
}}
|
||||
// onMouseEnter={(e) => {
|
||||
// try {
|
||||
// // console.log('onMouseEnter', e.target);
|
||||
// let compId;
|
||||
// if (e.target.classList.contains('widget-target')) {
|
||||
// compId = e.target.id;
|
||||
// } else {
|
||||
// compId = e.target.closest('.widget-target').id;
|
||||
// }
|
||||
// const targetComponents = Array.prototype.filter.call(
|
||||
// document.getElementsByClassName('rm-container')[0].children,
|
||||
// (child) => {
|
||||
// return child.classList.contains('widget-target');
|
||||
// }
|
||||
// );
|
||||
// const elemIndex = _.findIndex(targetComponents, ({ id }) => id === compId);
|
||||
// console.log('onMouseEnter =>', compId, targetComponents, elemIndex);
|
||||
// } catch (error) {
|
||||
// console.log('onMouseEnter error', error);
|
||||
// }
|
||||
// }}
|
||||
// onMouseLeave={(e) => {}}
|
||||
>
|
||||
{/* Target {i.id} */}
|
||||
{renderWidget(i.id, undefined, (dragged) => {
|
||||
console.log('====> dragged <=====', dragged);
|
||||
setDraggedSubContainer(dragged);
|
||||
|
|
@ -231,16 +205,10 @@ export default function DragContainer({
|
|||
mouseTest: true,
|
||||
}}
|
||||
flushSync={flushSync}
|
||||
// target={movableTargets}
|
||||
// target={'.move-target'}
|
||||
// target={draggedSubContainer ? 'nothing1' : groupedTargets.length ? [...groupedTargets] : ['.widget-target']}
|
||||
target={
|
||||
draggedSubContainer ? '.asdadadasdadad' : groupedTargets.length > 1 ? [...groupedTargets] : '.widget-target'
|
||||
}
|
||||
// hideDefaultLines
|
||||
origin={false}
|
||||
// hideChildMoveableDefaultLines={false}
|
||||
// individualGroupable={true}
|
||||
individualGroupable={selectedComponents.length <= 1}
|
||||
draggable={true}
|
||||
resizable={{
|
||||
|
|
@ -248,7 +216,6 @@ export default function DragContainer({
|
|||
renderDirections: ['e', 'w', 'n', 's'],
|
||||
}}
|
||||
keepRatio={false}
|
||||
// rotatable={true}
|
||||
key={list.length}
|
||||
individualGroupableProps={(element) => {
|
||||
if (element?.classList.contains('target2')) {
|
||||
|
|
@ -453,12 +420,7 @@ export default function DragContainer({
|
|||
return;
|
||||
}
|
||||
setDraggedTarget(e.target.id);
|
||||
// onDrag(e.target.id, e.translate[0], e.translate[1]);
|
||||
// console.log(e.target.style);
|
||||
if (!draggedSubContainer) {
|
||||
// e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
|
||||
// Math.round(e.translate[1] / 10) * 10
|
||||
// }px)`;
|
||||
e.target.style.transform = `translate(${e.translate[0]}px, ${e.translate[1]}px)`;
|
||||
e.target.setAttribute(
|
||||
'widget-pos2',
|
||||
|
|
@ -471,16 +433,6 @@ export default function DragContainer({
|
|||
let draggedOverElemId;
|
||||
if (document.elementFromPoint(e.clientX, e.clientY)) {
|
||||
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
|
||||
// targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
|
||||
// console.log(
|
||||
// 'draggedOverElem - list',
|
||||
// targetElems,
|
||||
// targetElems.filter(
|
||||
// (ele) =>
|
||||
// ele.id !== e.target.id &&
|
||||
// (ele.classList.contains('target') || ele.classList.contains('nested-target'))
|
||||
// )
|
||||
// );
|
||||
const draggedOverElem = targetElems.find(
|
||||
(ele) => ele.id !== e.target.id && ele.classList.contains('target')
|
||||
);
|
||||
|
|
@ -489,13 +441,8 @@ export default function DragContainer({
|
|||
draggedOverElemId = draggedOverElem?.id;
|
||||
}
|
||||
console.log('draggedOverElemId parent', draggedOverElemId, parent);
|
||||
// onDrag([{ id: e.target.id, x: e.translate[0], y: e.translate[1], parent: draggedOverElemId }]);
|
||||
}}
|
||||
onDragGroup={({ events }) => {
|
||||
events.forEach((ev) => {
|
||||
console.log('Grouped data=>', ev);
|
||||
// ev.target.style.transform = ev.transform;
|
||||
});
|
||||
onDrag(
|
||||
events.map((ev) => ({
|
||||
id: ev.target.id,
|
||||
|
|
@ -512,7 +459,6 @@ export default function DragContainer({
|
|||
}}
|
||||
//snap settgins
|
||||
snappable={true}
|
||||
// snapDirections={{ top: true, left: true, bottom: true, right: true }}
|
||||
snapDirections={{
|
||||
top: true,
|
||||
left: true,
|
||||
|
|
@ -533,10 +479,6 @@ export default function DragContainer({
|
|||
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}`, className: 'grid-guide-lines' }))}
|
||||
isDisplaySnapDigit={false}
|
||||
snapGridWidth={gridWidth}
|
||||
// stopPropagation={true}
|
||||
// snapGridHeight={10}
|
||||
// verticalGuidelines={[50, 150, 250, 450, 550]}
|
||||
// horizontalGuidelines={[0, 100, 200, 400, 500]}
|
||||
/>
|
||||
|
||||
{removeDuplicates(list)
|
||||
|
|
@ -631,13 +573,6 @@ export default function DragContainer({
|
|||
console.log('Grouped data=>', ev);
|
||||
ev.target.style.transform = ev.transform;
|
||||
});
|
||||
// onDrag(
|
||||
// events.map((ev) => ({
|
||||
// id: ev.target.id,
|
||||
// x: ev.translate[0],
|
||||
// y: ev.translate[1],
|
||||
// }))
|
||||
// );
|
||||
}}
|
||||
onResizeStart={(e) => {
|
||||
if (currentLayout === 'mobile' && autoComputeLayout) {
|
||||
|
|
@ -646,7 +581,6 @@ export default function DragContainer({
|
|||
}
|
||||
}}
|
||||
onResize={(e) => {
|
||||
console.log('onResize', e);
|
||||
const gridWidth = subContainerWidths[i.parent];
|
||||
const width = Math.round(e.width / gridWidth) * gridWidth;
|
||||
|
||||
|
|
@ -654,16 +588,9 @@ export default function DragContainer({
|
|||
const currentWidth = currentLayout.width * gridWidth;
|
||||
const diffWidth = e.width - currentWidth;
|
||||
const diffHeight = e.height - currentLayout.height;
|
||||
console.log('currentLayout width', currentWidth, e.width, diffWidth, e.direction);
|
||||
const isLeftChanged = e.direction[0] === -1;
|
||||
const isTopChanged = e.direction[1] === -1;
|
||||
|
||||
console.log(
|
||||
'currentLayout transform',
|
||||
`translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`,
|
||||
`translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)`
|
||||
);
|
||||
|
||||
e.target.style.width = `${e.width}px`;
|
||||
e.target.style.height = `${e.height}px`;
|
||||
let transformX = currentLayout.left * gridWidth;
|
||||
|
|
@ -675,35 +602,10 @@ export default function DragContainer({
|
|||
transformY = currentLayout.top - diffHeight;
|
||||
}
|
||||
e.target.style.transform = `translate(${transformX}px, ${transformY}px)`;
|
||||
|
||||
// e.target.style.transform = e.drag.transform;
|
||||
// onResizeStop([
|
||||
// {
|
||||
// id: e.target.id,
|
||||
// height: e.height,
|
||||
// width: width,
|
||||
// x: e.drag.translate[0],
|
||||
// y: e.drag.translate[1],
|
||||
// },
|
||||
// ]);
|
||||
}}
|
||||
onResizeEnd={(e) => {
|
||||
try {
|
||||
console.log('onResizeEnd>>>>>>>>>>>>>>', e);
|
||||
const gridWidth = subContainerWidths[i.parent];
|
||||
// const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
|
||||
// e.target.style.width = `${width}px`;
|
||||
// e.target.style.height = `${e.lastEvent.height}px`;
|
||||
// e.target.style.transform = e.lastEvent.drag.transform;
|
||||
// onResizeStop([
|
||||
// {
|
||||
// id: e.target.id,
|
||||
// height: e.lastEvent.height,
|
||||
// width: width,
|
||||
// x: e.lastEvent.drag.translate[0],
|
||||
// y: e.lastEvent.drag.translate[1],
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth;
|
||||
const height = Math.round(e.lastEvent.height / 10) * 10;
|
||||
|
|
@ -712,16 +614,9 @@ export default function DragContainer({
|
|||
const currentWidth = currentLayout.width * gridWidth;
|
||||
const diffWidth = e.lastEvent.width - currentWidth;
|
||||
const diffHeight = e.lastEvent.height - currentLayout.height;
|
||||
console.log('onResizeEnd data', currentWidth, e.width, diffWidth, e.direction, diffHeight);
|
||||
const isLeftChanged = e.lastEvent.direction[0] === -1;
|
||||
const isTopChanged = e.lastEvent.direction[1] === -1;
|
||||
|
||||
console.log(
|
||||
'onResizeEnd => currentLayout transform',
|
||||
`translate(${currentLayout.left * gridWidth}px, ${currentLayout.top}px)`,
|
||||
`translate(${currentLayout.left * gridWidth - diffWidth}px, ${currentLayout.top}px)`
|
||||
);
|
||||
|
||||
let transformX = currentLayout.left * gridWidth;
|
||||
let transformY = currentLayout.top;
|
||||
if (isLeftChanged) {
|
||||
|
|
@ -800,10 +695,6 @@ function getMouseDistanceFromParentDiv(event, id) {
|
|||
const parentDivRect = parentDiv.getBoundingClientRect();
|
||||
const targetDivRect = event.target.getBoundingClientRect();
|
||||
|
||||
// Get the mouse position relative to the parent div.
|
||||
// const mouseX = event.clientX - parentDivRect.left;
|
||||
// const mouseY = event.clientYl- parentDivRect.top;
|
||||
|
||||
const mouseX = targetDivRect.left - parentDivRect.left;
|
||||
const mouseY = targetDivRect.top - parentDivRect.top;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,9 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import Moveable, { makeAble } from 'react-moveable';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './DragContainer.css';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useActiveGrid } from '@/_stores/gridStore';
|
||||
const NO_OF_GRIDS = 43;
|
||||
|
||||
const MouseEnterLeaveAble = makeAble('enterLeave', {
|
||||
mouseEnter(moveable) {
|
||||
console.log('moveable', moveable);
|
||||
},
|
||||
mouseLeave(moveable) {
|
||||
console.log('moveable2', moveable);
|
||||
},
|
||||
});
|
||||
|
||||
export default function DragContainerNested({
|
||||
boxes,
|
||||
renderWidget,
|
||||
canvasWidth,
|
||||
onResizeStop,
|
||||
onDrag,
|
||||
gridWidth,
|
||||
setIsChildDragged,
|
||||
parent,
|
||||
parentLayout,
|
||||
parentGridWidth,
|
||||
allComponents,
|
||||
}) {
|
||||
const [dragTarget, setDragTarget] = useState();
|
||||
export default function DragContainerNested({ boxes, renderWidget, canvasWidth, gridWidth, parent, currentLayout }) {
|
||||
const boxList = boxes.map((box) => ({
|
||||
id: box.id,
|
||||
height: box?.layouts?.desktop?.height,
|
||||
|
|
@ -36,22 +12,14 @@ export default function DragContainerNested({
|
|||
width: box?.layouts?.desktop?.width,
|
||||
}));
|
||||
const [list, setList] = useState(boxList);
|
||||
const moveableRef = useRef();
|
||||
const [activeGrid, setActiveGrid] = useActiveGrid();
|
||||
|
||||
useEffect(() => {
|
||||
setList(boxList);
|
||||
}, [boxes?.length]);
|
||||
|
||||
useEffect(() => {
|
||||
// moveableRef.current.updateRect();
|
||||
}, [...Object.values(parentLayout), boxes?.length, activeGrid]);
|
||||
|
||||
// const [isChildDragged, setIsChildDragged] = useState(false);
|
||||
|
||||
const getDimensions = (id) => {
|
||||
const box = boxes.find((b) => b.id === id);
|
||||
const layoutData = box?.layouts?.desktop;
|
||||
const layoutData = box?.layouts?.[currentLayout];
|
||||
if (isEmpty(layoutData)) {
|
||||
return {};
|
||||
}
|
||||
|
|
@ -80,169 +48,7 @@ export default function DragContainerNested({
|
|||
{renderWidget(i.id)}
|
||||
</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={(e) => {
|
||||
console.log('debugger====>', e, parent);
|
||||
setActiveGrid(e.target.getAttribute('widgetid'));
|
||||
setIsChildDragged(true);
|
||||
}}
|
||||
onDrag={(e) => {
|
||||
setIsChildDragged(true);
|
||||
// if (!isChildDragged) {
|
||||
e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${
|
||||
Math.round(e.translate[1] / 10) * 10
|
||||
}px)`;
|
||||
// }
|
||||
|
||||
let draggedOverElemId;
|
||||
if (document.elementFromPoint(e.clientX, e.clientY)) {
|
||||
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
|
||||
// targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
|
||||
const draggedOverElem = targetElems.find(
|
||||
(ele) => ele.id !== e.target.id && ele.classList.contains('target')
|
||||
);
|
||||
setDragTarget(draggedOverElem?.id);
|
||||
console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget);
|
||||
draggedOverElemId = draggedOverElem?.id;
|
||||
}
|
||||
console.log('draggedOverElemId child', draggedOverElemId, parent);
|
||||
|
||||
// onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId);
|
||||
}}
|
||||
//snap settgins
|
||||
snappable={true}
|
||||
onDragEnd={(e) => {
|
||||
console.log('debugger====>', e, parent);
|
||||
setActiveGrid(null);
|
||||
setIsChildDragged(false);
|
||||
|
||||
let draggedOverElemId;
|
||||
if (document.elementFromPoint(e.clientX, e.clientY)) {
|
||||
const targetElems = document.elementsFromPoint(e.clientX, e.clientY);
|
||||
// targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className }));
|
||||
const draggedOverElem = targetElems.find(
|
||||
(ele) => ele.id !== e.target.id && ele.classList.contains('target')
|
||||
);
|
||||
setDragTarget(draggedOverElem?.id);
|
||||
console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget);
|
||||
draggedOverElemId = draggedOverElem?.id;
|
||||
}
|
||||
let left = e.lastEvent.translate[0];
|
||||
let top = e.lastEvent.translate[1];
|
||||
console.log('draggedOverElemId child', draggedOverElemId, parent);
|
||||
|
||||
if (draggedOverElemId !== parent) {
|
||||
left = left + parentLayout.left * parentGridWidth;
|
||||
top = top + parentLayout.top;
|
||||
if (draggedOverElemId) {
|
||||
const newParentElem = allComponents[draggedOverElemId]?.layouts?.desktop;
|
||||
let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId);
|
||||
left = _left;
|
||||
top = _top;
|
||||
}
|
||||
}
|
||||
|
||||
onDrag(e.target.id, left, top, draggedOverElemId);
|
||||
}}
|
||||
snapDirections={{ top: true, left: true, bottom: true, right: true }}
|
||||
snapThreshold={5}
|
||||
elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))}
|
||||
/> */}
|
||||
</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>
|
||||
// );
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -81,8 +81,6 @@ export const DraggableBox = React.memo(
|
|||
onComponentClick,
|
||||
onComponentOptionChanged,
|
||||
onComponentOptionsChanged,
|
||||
onResizeStop,
|
||||
onDragStop,
|
||||
paramUpdated,
|
||||
resizingStatusChanged,
|
||||
zoomLevel,
|
||||
|
|
@ -239,46 +237,6 @@ export const DraggableBox = React.memo(
|
|||
}}
|
||||
style={getStyles(isDragging, isSelectedComponent)}
|
||||
>
|
||||
{/* <Rnd
|
||||
style={{ ...style }}
|
||||
resizeGrid={[gridWidth, 10]}
|
||||
dragGrid={[gridWidth, 10]}
|
||||
size={{
|
||||
width: width,
|
||||
height: layoutData.height,
|
||||
}}
|
||||
position={{
|
||||
x: layoutData ? (layoutData.left * canvasWidth) / 100 : 0,
|
||||
y: layoutData ? layoutData.top : 0,
|
||||
}}
|
||||
defaultSize={{}}
|
||||
className={`resizer ${
|
||||
mouseOver || isResizing || isDragging2 || isSelectedComponent ? 'resizer-active' : ''
|
||||
} `}
|
||||
onResize={() => setResizing(true)}
|
||||
onDrag={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
if (!isDragging2) {
|
||||
setDragging(true);
|
||||
}
|
||||
}}
|
||||
resizeHandleClasses={isSelectedComponent || mouseOver ? resizerClasses : {}}
|
||||
resizeHandleStyles={resizerStyles}
|
||||
enableResizing={mode === 'edit' && !readOnly}
|
||||
disableDragging={mode !== 'edit' || readOnly}
|
||||
onDragStop={(e, direction) => {
|
||||
setDragging(false);
|
||||
onDragStop(e, id, direction, currentLayout, layoutData);
|
||||
}}
|
||||
cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container, div.real-canvas`}
|
||||
onResizeStop={(e, direction, ref, d, position) => {
|
||||
setResizing(false);
|
||||
onResizeStop(id, e, direction, ref, d, position);
|
||||
}}
|
||||
bounds={parent !== undefined ? `#canvas-${parent}` : '.real-canvas'}
|
||||
widgetId={id}
|
||||
> */}
|
||||
<div ref={preview} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
|
||||
{mode === 'edit' &&
|
||||
!readOnly &&
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@ export const SubContainer = ({
|
|||
}),
|
||||
shallow
|
||||
);
|
||||
const [noOfGrids] = useNoOfGrid();
|
||||
// const [noOfGrids] = useNoOfGrid();
|
||||
const noOfGrids = 43;
|
||||
|
||||
const gridWidth = getContainerCanvasWidth() / noOfGrids;
|
||||
|
||||
|
|
@ -399,118 +400,7 @@ export const SubContainer = ({
|
|||
return width;
|
||||
}
|
||||
|
||||
function onDragStop(e, componentId, direction, currentLayout) {
|
||||
if (isVersionReleased) {
|
||||
enableReleasedVersionPopupState();
|
||||
return;
|
||||
}
|
||||
|
||||
const canvasWidth = getContainerCanvasWidth();
|
||||
const nodeBounds = direction.node.getBoundingClientRect();
|
||||
|
||||
const canvasBounds = parentRef.current.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
|
||||
|
||||
// Computing the left offset
|
||||
const leftOffset = nodeBounds.x - canvasBounds.x;
|
||||
const currentLeftOffset = boxes[componentId].layouts[currentLayout].left;
|
||||
const leftDiff = currentLeftOffset - convertXToPercentage(leftOffset, canvasWidth);
|
||||
|
||||
const topDiff = boxes[componentId].layouts[currentLayout].top - (nodeBounds.y - canvasBounds.y);
|
||||
|
||||
let newBoxes = { ...boxes };
|
||||
|
||||
const subContainerHeight = canvasBounds.height - 30;
|
||||
|
||||
if (selectedComponents) {
|
||||
for (const selectedComponent of selectedComponents) {
|
||||
newBoxes = produce(newBoxes, (draft) => {
|
||||
const topOffset = draft[selectedComponent.id].layouts[currentLayout].top;
|
||||
const leftOffset = draft[selectedComponent.id].layouts[currentLayout].left;
|
||||
|
||||
draft[selectedComponent.id].layouts[currentLayout].top = topOffset - topDiff;
|
||||
draft[selectedComponent.id].layouts[currentLayout].left = leftOffset - leftDiff;
|
||||
});
|
||||
|
||||
const componentBottom =
|
||||
newBoxes[selectedComponent.id].layouts[currentLayout].top +
|
||||
newBoxes[selectedComponent.id].layouts[currentLayout].height;
|
||||
|
||||
if (isParentModal && subContainerHeight <= componentBottom) {
|
||||
subContainerHeightRef.current = subContainerHeight + 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setChildWidgets(() => getChildWidgets(newBoxes));
|
||||
setBoxes(newBoxes);
|
||||
}
|
||||
|
||||
function onResizeStop(id, e, direction, ref, d, position) {
|
||||
if (isVersionReleased) {
|
||||
enableReleasedVersionPopupState();
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaWidth = Math.round(d.width / gridWidth) * gridWidth; //rounding of width of element to nearest mulitple of gridWidth
|
||||
const deltaHeight = d.height;
|
||||
|
||||
if (deltaWidth === 0 && deltaHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { x, y } = position;
|
||||
x = Math.round(x / gridWidth) * gridWidth;
|
||||
|
||||
const defaultData = {
|
||||
top: 100,
|
||||
left: 0,
|
||||
width: 445,
|
||||
height: 500,
|
||||
};
|
||||
|
||||
let { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData;
|
||||
|
||||
top = y;
|
||||
if (deltaWidth !== 0) {
|
||||
// onResizeStop is triggered for a single click on the border, therefore this conditional logic
|
||||
// should not be removed.
|
||||
left = (x * 100) / _containerCanvasWidth;
|
||||
}
|
||||
|
||||
//round the width to nearest multiple of gridwidth before converting to %
|
||||
let currentWidth = (_containerCanvasWidth * width) / noOfGrids;
|
||||
|
||||
if (currentWidth > _containerCanvasWidth) {
|
||||
currentWidth = _containerCanvasWidth;
|
||||
}
|
||||
|
||||
let newWidth = currentWidth + deltaWidth;
|
||||
newWidth = Math.round(newWidth / gridWidth) * gridWidth;
|
||||
width = (newWidth * noOfGrids) / _containerCanvasWidth;
|
||||
|
||||
height = height + deltaHeight;
|
||||
|
||||
let newBoxes = {
|
||||
...boxes,
|
||||
[id]: {
|
||||
...boxes[id],
|
||||
layouts: {
|
||||
...boxes[id]['layouts'],
|
||||
[currentLayout]: {
|
||||
...boxes[id]['layouts'][currentLayout],
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
setBoxes(newBoxes);
|
||||
}
|
||||
|
||||
const onResizeStop2 = (id, height, width, x, y) => {
|
||||
const onResizeStop = (id, height, width, x, y) => {
|
||||
const newWidth = (width * noOfGrids) / _containerCanvasWidth;
|
||||
let newBoxes = {
|
||||
...boxes,
|
||||
|
|
@ -533,7 +423,7 @@ export const SubContainer = ({
|
|||
// updateCanvasHeight(newBoxes);
|
||||
};
|
||||
|
||||
function onDragStop2(id, x, y, parent) {
|
||||
function onDragStop(id, x, y, parent) {
|
||||
// const parentGridWidth = parentGridWidth;
|
||||
const subContainerGridWidth = parent ? subContainerWidths[parent] || gridWidth : parentGridWidth;
|
||||
let newBoxes = {
|
||||
|
|
@ -650,8 +540,6 @@ export const SubContainer = ({
|
|||
onComponentOptionChanged={onComponentOptionChangedForSubcontainer}
|
||||
onComponentOptionsChanged={onComponentOptionsChanged}
|
||||
key={key}
|
||||
onResizeStop={onResizeStop}
|
||||
onDragStop={onDragStop}
|
||||
paramUpdated={paramUpdated}
|
||||
id={key}
|
||||
allComponents={allComponents}
|
||||
|
|
@ -722,14 +610,9 @@ export const SubContainer = ({
|
|||
boxes={Object.keys(childWidgets).map((key) => ({ ...boxes[key], id: key }))}
|
||||
renderWidget={renderWidget}
|
||||
canvasWidth={_containerCanvasWidth}
|
||||
onResizeStop={onResizeStop2}
|
||||
onDrag={onDragStop2}
|
||||
gridWidth={gridWidth}
|
||||
setIsChildDragged={setIsChildDragged}
|
||||
parent={parent}
|
||||
parentLayout={appDefinition.pages[currentPageId]?.components[parent]?.layouts?.[currentLayout]}
|
||||
parentGridWidth={parentGridWidth}
|
||||
allComponents={allComponents}
|
||||
currentLayout={currentLayout}
|
||||
/>
|
||||
{/* {checkParentVisibility() &&
|
||||
Object.keys(childWidgets).map((key) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue