From be3fd512accc03b0ea19172a4f533cf8dccf1173 Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Tue, 12 Mar 2024 17:13:59 +0530 Subject: [PATCH] refactor: removed unused function --- frontend/src/Editor/Container.jsx | 139 -------------------- frontend/src/Editor/DragContainer.jsx | 69 ---------- frontend/src/Editor/DraggableBox.jsx | 42 ------ frontend/src/Editor/SubContainer.jsx | 181 +------------------------- frontend/src/_stores/gridStore.js | 3 +- 5 files changed, 2 insertions(+), 432 deletions(-) diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index e44a7e47f4..8927a3ef62 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -291,10 +291,6 @@ export const Container = ({ } }); - function convertXToPercentage(x, canvasWidth) { - return (x * 100) / canvasWidth; - } - const updateCanvasHeight = useCallback( (components) => { const maxHeight = Object.values(components).reduce((max, component) => { @@ -432,7 +428,6 @@ export const Container = ({ }; function onDragStop(boxPositions) { - const startTime = performance.now(); const updatedBoxes = boxPositions.reduce((boxesObj, { id, x, y, parent }) => { let _width = boxes[id]['layouts'][currentLayout].width; let _height = boxes[id]['layouts'][currentLayout].height; @@ -661,140 +656,6 @@ export const Container = ({ return componentWithChildren; }, [components]); - const resizingStatusChanged = useCallback( - (status) => { - setIsResizing(status); - }, - [setIsResizing] - ); - - const draggingStatusChanged = useCallback( - (status) => { - setIsDragging(status); - }, - [setIsDragging] - ); - const containerProps = useMemo(() => { - return { - mode, - snapToGrid, - onComponentClick, - onEvent, - appDefinition, - appDefinitionChanged, - currentState, - onComponentOptionChanged, - onComponentOptionsChanged, - appLoading, - zoomLevel, - setSelectedComponent, - removeComponent, - currentLayout, - deviceWindowWidth, - darkMode, - sideBarDebugger, - currentPageId, - childComponents, - }; - }, [ - mode, - snapToGrid, - onComponentClick, - onEvent, - appDefinition, - appDefinitionChanged, - currentState, - onComponentOptionChanged, - onComponentOptionsChanged, - appLoading, - zoomLevel, - setSelectedComponent, - removeComponent, - currentLayout, - deviceWindowWidth, - darkMode, - sideBarDebugger, - currentPageId, - childComponents, - ]); - - const renderWidget = (key, height, setIsChildDragged) => { - const box = boxes[key]; - if (!box) { - return ''; - } - const canShowInCurrentLayout = - box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; - const addDefaultChildren = box.withDefaultChildren; - if (!box.parent && resolveReferences(canShowInCurrentLayout, currentState)) { - return ( - setIsResizing(status)} - draggingStatusChanged={(status) => setIsDragging(status)} - inCanvas={true} - zoomLevel={zoomLevel} - setSelectedComponent={setSelectedComponent} - removeComponent={removeComponent} - deviceWindowWidth={deviceWindowWidth} - isSelectedComponent={mode === 'edit' ? selectedComponents.find((component) => component.id === key) : false} - darkMode={darkMode} - // onComponentHover={onComponentHover} - // hoveredComponent={hoveredComponent} - sideBarDebugger={sideBarDebugger} - isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false} - childComponents={childComponents[key]} - containerProps={{ - // turnOffAutoLayout, - mode, - snapToGrid, - onComponentClick, - onEvent, - appDefinition, - appDefinitionChanged, - currentState, - onComponentOptionChanged, - onComponentOptionsChanged, - appLoading, - zoomLevel, - setSelectedComponent, - removeComponent, - currentLayout, - deviceWindowWidth, - selectedComponents, - darkMode, - // onComponentHover, - // hoveredComponent, - sideBarDebugger, - addDefaultChildren, - currentPageId, - childComponents, - setIsChildDragged, - setSubContainerWidths: (id, width) => setSubContainerWidths((widths) => ({ ...widths, [id]: width })), - parentGridWidth: gridWidth, - subContainerWidths, - draggedSubContainer, - }} - isVersionReleased={isVersionReleased} - /> - ); - } - return ''; - }; - return ( ['{{true}}', true].includes( @@ -186,7 +175,6 @@ export default function DragContainer({ if (openModalWidgetId) { const children = findChildrenAndGrandchildren(openModalWidgetId, boxes); const controlBoxes = document.querySelectorAll('.moveable-control-box[target-id]'); - const childElems = children.map((childId) => ({ ...widgets[childId], id: childId })); controlBoxes.forEach((box) => { const id = box.getAttribute('target-id'); if (!children.includes(id)) { @@ -216,8 +204,6 @@ export default function DragContainer({ return component.id; }) ); - const selectedBoxs = boxes.filter((box) => selectedComponentsId.has(box.id)); - const parentId = selectedBoxs.find((comp) => comp.component.parent)?.component?.parent; // Get all elements with the old class name var elements = document.getElementsByClassName('selected-component'); @@ -242,22 +228,6 @@ export default function DragContainer({ setList(boxList); }, [JSON.stringify(boxes)]); - const getDimensions = (id) => { - const box = boxes.find((b) => b.id === id); - const layoutData = box?.layouts?.[currentLayout]; - if (isEmpty(layoutData)) { - return {}; - } - // const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS; - const width = gridWidth * layoutData.width; - - return { - width: width + 'px', - height: layoutData.height + 'px', - transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`, - }; - }; - const groupedTargets = [ ...findHighestLevelofSelection(selectedComponents) // .filter((component) => !component?.component?.parent) @@ -268,41 +238,6 @@ export default function DragContainer({ reloadGrid(); }, [selectedComponents, openModalWidgetId]); - // Function to limit the resizing of element within the parent - const setResizingLimit = (e, i) => { - const elemLayout = widgets[e.target.id]?.layouts[currentLayout]; - const parentLayout = widgets[i.parent]?.layouts[currentLayout]; - let maxWidth = null, - maxHeight = null, - parentgW = subContainerWidths[i.parent] || gridWidth, - elemSize = 0; - - const [leftRight, topBottom] = e.direction; - if (leftRight === 0) { - if (topBottom === -1) { - //Resize with top handle - elemSize = elemLayout?.top + elemLayout?.height; - } else { - //Resize with top handle - const parentHeight = document.getElementById(`canvas-${i.parent}`)?.offsetHeight ?? parentLayout?.height; - elemSize = parentHeight - elemLayout?.top; - } - maxHeight = elemSize; - } else { - if (leftRight === -1) { - //Resize with left handle - elemSize = (noOfGrids - (elemLayout?.left + elemLayout?.width)) * parentgW; - } else { - //Resize with right handle - elemSize = elemLayout?.left * parentgW; - } - maxWidth = noOfGrids * parentgW - elemSize; - } - - e.setMax([maxWidth, maxHeight]); - e.setMin([gridWidth, 10]); - }; - const updateNewPosition = (events, parent = null) => { const posWithParent = { events, @@ -453,7 +388,6 @@ export default function DragContainer({ parentElm.classList.add('show-grid'); }} onResizeGroup={({ events }) => { - const newBoxs = []; const parentElm = events[0].target.closest('.real-canvas'); const parentWidth = parentElm?.clientWidth; const parentHeight = parentElm?.clientHeight; @@ -590,7 +524,6 @@ export default function DragContainer({ } const _gridWidth = subContainerWidths[draggedOverElemId] || gridWidth; - const parentElem = list.find(({ id }) => id === draggedOverElemId); const currentParentId = boxes.find(({ id: widgetId }) => e.target.id === widgetId)?.component?.parent; let left = e.lastEvent.translate[0]; let top = e.lastEvent.translate[1]; @@ -688,7 +621,6 @@ export default function DragContainer({ ); } - let draggedOverElemId; if (document.elementFromPoint(e.clientX, e.clientY)) { const targetElems = document.elementsFromPoint(e.clientX, e.clientY); const draggedOverElements = targetElems.filter( @@ -707,7 +639,6 @@ export default function DragContainer({ const parentWidgetId = draggedOverContainer.getAttribute('data-parent') || draggedOverElem?.id; document.getElementById('canvas-' + parentWidgetId)?.classList.add('show-grid'); - draggedOverElemId = draggedOverElem?.id; if ( draggedOverElemRef.current?.id !== draggedOverContainer?.id && !draggedOverContainer.classList.contains('hide-grid') diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx index 9af9308fa3..7121ae4713 100644 --- a/frontend/src/Editor/DraggableBox.jsx +++ b/frontend/src/Editor/DraggableBox.jsx @@ -6,7 +6,6 @@ import { ItemTypes } from './ItemTypes'; import { getEmptyImage } from 'react-dnd-html5-backend'; import { Box } from './Box'; import { ConfigHandle } from './ConfigHandle'; -import { Rnd } from 'react-rnd'; import { resolveWidgetFieldValue, resolveReferences } from '@/_helpers/utils'; import ErrorBoundary from './ErrorBoundary'; import { useCurrentState } from '@/_stores/currentStateStore'; @@ -19,13 +18,6 @@ import { findHighestLevelofSelection } from './DragContainer'; // const noOfGrid = 43; -const resizerClasses = { - topRight: 'top-right', - bottomRight: 'bottom-right', - bottomLeft: 'bottom-left', - topLeft: 'top-left', -}; - function computeWidth(currentLayoutOptions) { return `${currentLayoutOptions?.width}%`; } @@ -99,33 +91,6 @@ export const DraggableBox = React.memo( const currentState = useCurrentState(); const [boxHeight, setboxHeight] = useState(layoutData?.height); // height for layouting with top and side values - const resizerStyles = { - topRight: { - width: '8px', - height: '8px', - right: '-4px', - top: '-4px', - }, - bottomRight: { - width: '8px', - height: '8px', - right: '-4px', - bottom: '-4px', - }, - bottomLeft: { - width: '8px', - height: '8px', - left: '-4px', - bottom: '-4px', - }, - topLeft: { - width: '8px', - height: '8px', - left: '-4px', - top: '-4px', - }, - }; - const [{ isDragging }, drag, preview] = useDrag( () => ({ type: ItemTypes.BOX, @@ -167,12 +132,6 @@ export const DraggableBox = React.memo( } }, [isDragging2]); - const style = { - display: 'inline-block', - alignItems: 'center', - justifyContent: 'center', - }; - let _refProps = {}; if (mode === 'edit' && canDrag) { @@ -197,7 +156,6 @@ export const DraggableBox = React.memo( // const layoutData = inCanvas ? layouts[currentLayout] || defaultData : defaultData; const layoutData = inCanvas ? layouts[currentLayout] || layouts['desktop'] : defaultData; console.log('layoutData--', layoutData, currentLayout, layouts); - const gridWidth = canvasWidth / noOfGrid; const width = (canvasWidth * layoutData.width) / noOfGrid; const configWidgetHandlerForModalComponent = diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx index ebebcf13b6..0c16472d40 100644 --- a/frontend/src/Editor/SubContainer.jsx +++ b/frontend/src/Editor/SubContainer.jsx @@ -11,7 +11,6 @@ import { resolveReferences } from '@/_helpers/utils'; import { toast } from 'react-hot-toast'; import { restrictedWidgetsObj } from '@/Editor/WidgetManager/restrictedWidgetsConfig'; import { useCurrentState } from '@/_stores/currentStateStore'; -import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; import { useMounted } from '@/_hooks/use-mount'; import { useEditorStore } from '@/_stores/editorStore'; @@ -56,10 +55,7 @@ export const SubContainer = ({ childComponents = null, listmode = null, columns = 1, - setIsChildDragged, setSubContainerWidths, - parentGridWidth, - subContainerWidths, parentWidgetId, // turnOffAutoLayout, }) => { @@ -71,13 +67,6 @@ export const SubContainer = ({ const customResolverVariable = widgetResolvables[parentComponent?.component]; const currentState = useCurrentState(); - const { enableReleasedVersionPopupState, isVersionReleased } = useAppVersionStore( - (state) => ({ - enableReleasedVersionPopupState: state.actions.enableReleasedVersionPopupState, - isVersionReleased: state.isVersionReleased, - }), - shallow - ); const { selectedComponents } = useEditorStore( (state) => ({ selectedComponents: state.selectedComponents, @@ -105,11 +94,6 @@ export const SubContainer = ({ // eslint-disable-next-line react-hooks/exhaustive-deps const allComponents = appDefinition ? appDefinition.pages[currentPageId].components : {}; - const isParentModal = - (allComponents[parent]?.component?.component === 'Modal' || - allComponents[parent]?.component?.component === 'Form' || - allComponents[parent]?.component?.component === 'Container') ?? - false; const getChildWidgets = (components) => { let childWidgets = {}; @@ -401,10 +385,6 @@ export const SubContainer = ({ setIsDragging(draggingState); }, [draggingState]); - function convertXToPercentage(x, canvasWidth) { - return (x * 100) / canvasWidth; - } - const [, drop] = useDrop( () => ({ accept: ItemTypes.BOX, @@ -493,59 +473,6 @@ export const SubContainer = ({ return width; } - const onResizeStop = (id, height, width, x, y) => { - const newWidth = (width * noOfGrids) / _containerCanvasWidth; - let newBoxes = { - ...boxes, - [id]: { - ...boxes[id], - layouts: { - ...boxes[id]['layouts'], - [currentLayout]: { - ...boxes[id]['layouts'][currentLayout], - width: newWidth, - height, - top: y, - left: Math.round(x / gridWidth), - }, - }, - }, - }; - - setBoxes(newBoxes); - // updateCanvasHeight(newBoxes); - }; - - function onDragStop(id, x, y, parent) { - // const parentGridWidth = parentGridWidth; - const subContainerGridWidth = parent ? subContainerWidths[parent] || gridWidth : parentGridWidth; - let newBoxes = { - ...boxes, - [id]: { - ...boxes[id], - layouts: { - ...boxes[id]['layouts'], - [currentLayout]: { - ...boxes[id]['layouts'][currentLayout], - // ...{ top: layout.y, left: layout.x, height: layout.h, width: layout.w }, - width: parent - ? boxes[id]['layouts'][currentLayout].width - : Math.round((boxes[id]['layouts'][currentLayout].width * gridWidth) / parentGridWidth), - top: y, - left: Math.round(x / (parent ? subContainerGridWidth : parentGridWidth)), - }, - }, - component: { - ...boxes[id]['component'], - parent: parent ? parent : undefined, - }, - }, - }; - - setChildWidgets(() => getChildWidgets(newBoxes)); - setBoxes(newBoxes); - } - function paramUpdated(id, param, value) { if (id === 'resizingComponentId') { return; @@ -618,102 +545,6 @@ export const SubContainer = ({ return false; } - const renderWidget = (key, height) => { - if (!childWidgets[key]) { - return; - } - const addDefaultChildren = childWidgets[key]['withDefaultChildren'] || false; - - const box = childWidgets[key]; - const canShowInCurrentLayout = - box.component.definition.others[currentLayout === 'mobile' ? 'showOnMobile' : 'showOnDesktop'].value; - if (box.component.parent && resolveReferences(canShowInCurrentLayout, currentState)) { - return ( - { - if (typeof value === 'function' && _.findKey(exposedVariables, optionName)) { - return Promise.resolve(); - } - onOptionChange && onOptionChange({ component, optionName, value, componentId }); - } - } - onComponentOptionsChanged={(component, variableSet, id) => { - checkParent(box) - ? onComponentOptionsChanged(component, variableSet) - : variableSet.map((item) => { - onOptionChange && - onOptionChange({ - component, - optionName: item[0], - value: item[1], - componentId: id, - }); - }); - }} - key={key} - paramUpdated={paramUpdated} - id={key} - allComponents={allComponents} - {...childWidgets[key]} - mode={mode} - resizingStatusChanged={(status) => setIsResizing(status)} - draggingStatusChanged={(status) => setIsDragging(status)} - inCanvas={true} - zoomLevel={zoomLevel} - setSelectedComponent={setSelectedComponent} - selectedComponent={selectedComponent} - deviceWindowWidth={deviceWindowWidth} - isSelectedComponent={mode === 'edit' ? selectedComponents.find((component) => component.id === key) : false} - removeComponent={customRemoveComponent} - canvasWidth={_containerCanvasWidth} - readOnly={readOnly} - darkMode={darkMode} - customResolvables={customResolvables} - onComponentHover={onComponentHover} - hoveredComponent={hoveredComponent} - parentId={parent} - sideBarDebugger={sideBarDebugger} - isMultipleComponentsSelected={selectedComponents?.length > 1 ? true : false} - exposedVariables={exposedVariables ?? {}} - childComponents={childComponents[key]} - containerProps={{ - mode, - snapToGrid, - onComponentClick, - onEvent, - appDefinition, - appDefinitionChanged, - currentState, - onComponentOptionChanged, - onComponentOptionsChanged, - appLoading, - zoomLevel, - setSelectedComponent, - removeComponent, - currentLayout, - deviceWindowWidth, - selectedComponents, - darkMode, - readOnly, - onComponentHover, - hoveredComponent, - sideBarDebugger, - addDefaultChildren, - currentPageId, - childComponents, - setSubContainerWidths, - }} - /> - ); - } - }; - return ( { +const SubContianerWrapper = ({ children, isDragging, isResizing, isGridActive, readOnly, drop, styles, parent }) => { // const [dragTarget] = useDragTarget(); return (
({ + (set) => ({ ...initialState, actions: { setActiveGrid: (gridId) => set({ activeGrid: gridId }),