From b3c48c43b2a20c72490a78dfc048a7b278b92971 Mon Sep 17 00:00:00 2001 From: Johnson Cherian Date: Mon, 11 Mar 2024 16:17:48 +0530 Subject: [PATCH] refactor: removed unused files --- frontend/src/Editor/DragCanvas.jsx | 0 frontend/src/Editor/DragContainer copy.jsx | 348 ------------------ .../src/Editor/DragContainerNested copy.jsx | 262 ------------- frontend/src/Editor/DragContainerNested.jsx | 68 ---- 4 files changed, 678 deletions(-) delete mode 100644 frontend/src/Editor/DragCanvas.jsx delete mode 100644 frontend/src/Editor/DragContainer copy.jsx delete mode 100644 frontend/src/Editor/DragContainerNested copy.jsx delete mode 100644 frontend/src/Editor/DragContainerNested.jsx diff --git a/frontend/src/Editor/DragCanvas.jsx b/frontend/src/Editor/DragCanvas.jsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/Editor/DragContainer copy.jsx b/frontend/src/Editor/DragContainer copy.jsx deleted file mode 100644 index c3c941998f..0000000000 --- a/frontend/src/Editor/DragContainer copy.jsx +++ /dev/null @@ -1,348 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import Moveable from 'react-moveable'; -import { useEditorStore } from '@/_stores/editorStore'; -import { shallow } from 'zustand/shallow'; -import { flushSync } from 'react-dom'; -import './DragContainer.css'; -import DragContainerNested from './DragContainerNested'; -import { isEmpty } from 'lodash'; -const NO_OF_GRIDS = 24; - -export default function DragContainer({ - boxes, - renderWidget, - canvasWidth, - onResizeStop, - onDrag, - gridWidth, - selectedComponents = [], - setIsDragging, - currentLayout, -}) { - const [dragTarget, setDragTarget] = useState(); - const [draggedTarget, setDraggedTarget] = useState(); - const moveableRef = useRef(); - const [movableTargets, setMovableTargets] = useState([]); - const [isChildDragged, setIsChildDragged] = useState(false); - const boxList = boxes.map((box) => ({ - id: box.id, - height: box?.layouts?.[currentLayout]?.height, - left: box?.layouts?.[currentLayout]?.left, - top: box?.layouts?.[currentLayout]?.top, - width: box?.layouts?.[currentLayout]?.width, - parent: box?.component?.parent, - })); - const [list, setList] = useState(boxList); - - const hoveredComponent = useEditorStore((state) => state?.hoveredComponent, shallow); - - useEffect(() => { - moveableRef.current.updateRect(); - // setTimeout(() => moveableRef.current.updateRect(), 100); - }, [selectedComponents.length, JSON.stringify(boxes)]); - - useEffect(() => { - setList(boxList); - // setTimeout(reloadGrid, 100); - reloadGrid(); - }, [currentLayout]); - - const reloadGrid = () => { - moveableRef.current.updateRect(); - moveableRef.current.updateTarget(); - moveableRef.current.updateSelectors(); - }; - - useEffect(() => { - setList(boxList); - }, [JSON.stringify(boxes)]); - - useEffect(() => { - const groupedTargets = [...selectedComponents.map((component) => '.ele-' + component.id)]; - const newMovableTargets = groupedTargets.length ? groupedTargets : []; - if (hoveredComponent && groupedTargets?.length <= 1 && !groupedTargets.includes('.ele-' + hoveredComponent)) { - newMovableTargets.push('.ele-' + hoveredComponent); - } - - if (draggedTarget && !newMovableTargets.includes(`.ele-${draggedTarget}`)) { - newMovableTargets.push('.ele-' + draggedTarget); - } - - setMovableTargets(isChildDragged ? [] : newMovableTargets); - }, [selectedComponents, hoveredComponent, draggedTarget, isChildDragged]); - - useEffect(() => { - reloadGrid(); - }, [movableTargets]); - - const getDimensions = (id) => { - const box = boxes.find((b) => b.id === id); - const layoutData = box?.layouts?.[currentLayout]; - if (isEmpty(layoutData)) { - return {}; - } - // const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS; - const width = gridWidth * layoutData.width; - - return { - width: width + 'px', - height: layoutData.height + 'px', - transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`, - }; - }; - - return ( -
-
- {list - .filter((i) => isEmpty(i.parent)) - .map((i) => ( -
id === '.ele-' + i.id) ? 'move-target' : '' - }`} - data-id={`${i.parent}`} - key={i.id} - id={i.id} - widgetid={i.id} - style={{ transform: `translate(332px, -134px)`, ...getDimensions(i.id) }} - > - {/* Target {i.id} */} - {renderWidget(i.id, undefined, setIsChildDragged)} -
- ))} - {/* {movableTargets.length && ( */} - 1} - // hideChildMoveableDefaultLines={false} - // individualGroupable={true} - individualGroupable={selectedComponents.length <= 1} - draggable={true} - resizable={true} - keepRatio={false} - // rotatable={true} - key={list.length} - individualGroupableProps={(element) => { - if (element?.classList.contains('target2')) { - return { - resizable: false, - }; - } - }} - onResize={(e) => { - const width = Math.round(e.width / gridWidth) * gridWidth; - - const currentLayout = list.find(({ id }) => id === e.target.id); - const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.width - currentWidth; - const diffHeight = e.height - currentLayout.height; - const isLeftChanged = e.direction[0] === -1; - const isTopChanged = e.direction[1] === -1; - - e.target.style.width = `${e.width}px`; - e.target.style.height = `${e.height}px`; - let transformX = currentLayout.left * gridWidth; - let transformY = currentLayout.top; - if (isLeftChanged) { - transformX = currentLayout.left * gridWidth - diffWidth; - } - if (isTopChanged) { - transformY = currentLayout.top - diffHeight; - } - e.target.style.transform = `translate(${transformX}px, ${transformY}px)`; - - // e.target.style.transform = e.drag.transform; - // onResizeStop([ - // { - // id: e.target.id, - // height: e.height, - // width: width, - // x: e.drag.translate[0], - // y: e.drag.translate[1], - // }, - // ]); - }} - onResizeEnd={(e) => { - try { - // const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; - // e.target.style.width = `${width}px`; - // e.target.style.height = `${e.lastEvent.height}px`; - // e.target.style.transform = e.lastEvent.drag.transform; - // onResizeStop([ - // { - // id: e.target.id, - // height: e.lastEvent.height, - // width: width, - // x: e.lastEvent.drag.translate[0], - // y: e.lastEvent.drag.translate[1], - // }, - // ]); - - const width = Math.round(e.lastEvent.width / gridWidth) * gridWidth; - const height = Math.round(e.lastEvent.height / 10) * 10; - - const currentLayout = list.find(({ id }) => id === e.target.id); - const currentWidth = currentLayout.width * gridWidth; - const diffWidth = e.lastEvent.width - currentWidth; - const diffHeight = e.lastEvent.height - currentLayout.height; - const isLeftChanged = e.lastEvent.direction[0] === -1; - const isTopChanged = e.lastEvent.direction[1] === -1; - - let transformX = currentLayout.left * gridWidth; - let transformY = currentLayout.top; - if (isLeftChanged) { - transformX = currentLayout.left * gridWidth - diffWidth; - } - if (isTopChanged) { - transformY = currentLayout.top - diffHeight; - } - - // e.target.style.transform = e.drag.transform; - onResizeStop([ - { - id: e.target.id, - height: height, - width: width, - x: transformX, - y: transformY, - }, - ]); - } catch (error) { - console.error('ResizeEnd error ->', error); - } - }} - // onResizeStart={(e) => { - // console.log('onResizeStart =>', e); - // }} - onResizeGroup={({ events }) => { - const newBoxs = []; - events.forEach((ev) => { - ev.target.style.width = `${ev.width}px`; - ev.target.style.height = `${ev.height}px`; - ev.target.style.transform = ev.drag.transform; - newBoxs.push({ - id: ev.target.id, - height: ev.height, - width: ev.width, - x: ev.drag.translate[0], - y: ev.drag.translate[1], - }); - }); - onResizeStop(newBoxs); - }} - checkInput - onDragStart={() => setIsDragging(true)} - onDragEnd={(e) => { - setIsDragging(false); - setDraggedTarget(); - if (isChildDragged) { - return; - } - - // onDrag(e.target.id, e.translate[0], e.translate[1]); - // console.log(e.target.style); - // if (!isChildDragged) { - // e.target.style.transform = `translate(${Math.round(e.translate[0] / 10) * 10}px, ${ - // Math.round(e.translate[1] / 10) * 10 - // }px)`; - // } - - let draggedOverElemId; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); - const draggedOverElem = targetElems.find( - (ele) => ele.id !== e.target.id && ele.classList.contains('target') - ); - setDragTarget(draggedOverElem?.id); - draggedOverElemId = draggedOverElem?.id; - } - // console.log("draggedOverElemId", draggedOverElemId); - const parentElem = list.find(({ id }) => id === draggedOverElemId); - let left = e.lastEvent.translate[0]; - let top = e.lastEvent.translate[1]; - if (parentElem) { - left = left - parentElem.left * gridWidth; - top = top - parentElem.top; - } else { - e.target.style.transform = `translate(${Math.round(left / gridWidth) * gridWidth}px, ${ - Math.round(top / 10) * 10 - }px)`; - } - onDrag([ - { - id: e.target.id, - x: left, - y: Math.round(top / 10) * 10, - parent: draggedOverElemId, - }, - ]); - }} - onDrag={(e) => { - if (isChildDragged) { - return; - } - setDraggedTarget(e.target.id); - // onDrag(e.target.id, e.translate[0], e.translate[1]); - // console.log(e.target.style); - if (!isChildDragged) { - // e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${ - // Math.round(e.translate[1] / 10) * 10 - // }px)`; - e.target.style.transform = `translate(${e.translate[0]}px, ${e.translate[1]}px)`; - e.target.setAttribute( - 'widget-pos2', - `translate: ${e.translate[0]} | Round: ${ - Math.round(e.translate[0] / gridWidth) * gridWidth - } | ${gridWidth}` - ); - } - - // let draggedOverElemId; - // if (document.elementFromPoint(e.clientX, e.clientY)) { - // const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - // // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); - // const draggedOverElem = targetElems.find( - // (ele) => ele.id !== e.target.id && ele.classList.contains('target') - // ); - // setDragTarget(draggedOverElem?.id); - // console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); - // draggedOverElemId = draggedOverElem?.id; - // } - // onDrag([{ id: e.target.id, x: e.translate[0], y: e.translate[1], parent: draggedOverElemId }]); - }} - onDragGroup={({ events }) => { - events.forEach((ev) => { - console.log('Grouped data=>', ev); - // ev.target.style.transform = ev.transform; - }); - onDrag( - events.map((ev) => ({ - id: ev.target.id, - x: ev.translate[0], - y: ev.translate[1], - })) - ); - }} - //snap settgins - snappable={true} - // snapDirections={{ top: true, left: true, bottom: true, right: true }} - snapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }} - elementSnapDirections={{ top: true, left: true, bottom: true, right: true, center: true, middle: true }} - snapThreshold={5} - elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))} - isDisplaySnapDigit={false} - snapGridWidth={gridWidth} - // snapGridHeight={10} - // verticalGuidelines={[50, 150, 250, 450, 550]} - // horizontalGuidelines={[0, 100, 200, 400, 500]} - /> - {/* )} */} -
-
- ); -} diff --git a/frontend/src/Editor/DragContainerNested copy.jsx b/frontend/src/Editor/DragContainerNested copy.jsx deleted file mode 100644 index d672043bdf..0000000000 --- a/frontend/src/Editor/DragContainerNested copy.jsx +++ /dev/null @@ -1,262 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; -import Moveable, { makeAble } from 'react-moveable'; -import './DragContainer.css'; -import { isEmpty } from 'lodash'; -const NO_OF_GRIDS = 24; - -const MouseEnterLeaveAble = makeAble('enterLeave', { - mouseEnter(moveable) { - console.log('moveable', moveable); - }, - mouseLeave(moveable) { - console.log('moveable2', moveable); - }, -}); - -export default function DragContainerNested({ - boxes, - renderWidget, - canvasWidth, - onResizeStop, - onDrag, - gridWidth, - setIsChildDragged, - parent, - parentLayout, - parentGridWidth, - allComponents, -}) { - const [dragTarget, setDragTarget] = useState(); - const boxList = boxes.map((box) => ({ - id: box.id, - height: box?.layouts?.desktop?.height, - left: box?.layouts?.desktop?.left, - top: box?.layouts?.desktop?.top, - width: box?.layouts?.desktop?.width, - })); - const [list, setList] = useState(boxList); - const moveableRef = useRef(); - - useEffect(() => { - setList(boxList); - }, [boxes?.length]); - - useEffect(() => { - moveableRef.current.updateRect(); - }, [...Object.values(parentLayout), boxes?.length]); - - // const [isChildDragged, setIsChildDragged] = useState(false); - - const getDimensions = (id) => { - const box = boxes.find((b) => b.id === id); - const layoutData = box?.layouts?.desktop; - if (isEmpty(layoutData)) { - return {}; - } - const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS; - return { - width: width + 'px', - height: layoutData.height + 'px', - transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`, - }; - }; - - return ( -
-
- {/* */} - {list.map((i) => ( -
- {/* Target {i.id} */} - {renderWidget(i.id)} -
- ))} - {/*
- -
*/} - {/*
- Target12 - -
*/} - {/*
Target1
-
Target2
-
Target3
*/} - - {/* { - if (element?.classList.contains('target2')) { - return { - resizable: false, - }; - } - }} - onResize={(e) => { - console.log('e._dragTarget.id', e.target, e.target.id, e.drag); - e.target.style.width = `${e.width}px`; - e.target.style.height = `${e.height}px`; - e.target.style.transform = e.drag.transform; - onResizeStop(e.target.id, e.height, e.width, e.drag.translate[0], e.drag.translate[1]); - }} - checkInput - onDragStart={() => setIsChildDragged(true)} - onDrag={(e) => { - setIsChildDragged(true); - // if (!isChildDragged) { - e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${ - Math.round(e.translate[1] / 10) * 10 - }px)`; - // } - - let draggedOverElemId; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); - const draggedOverElem = targetElems.find( - (ele) => ele.id !== e.target.id && ele.classList.contains('target') - ); - setDragTarget(draggedOverElem?.id); - console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); - draggedOverElemId = draggedOverElem?.id; - } - console.log('draggedOverElemId child', draggedOverElemId, parent); - - // onDrag(e.target.id, e.translate[0], e.translate[1], draggedOverElemId); - }} - //snap settgins - snappable={true} - onDragEnd={(e) => { - setIsChildDragged(false); - // if (!isChildDragged) { - // e.target.style.transform = `translate(${Math.round(e.translate[0] / gridWidth) * gridWidth}px, ${ - // Math.round(e.translate[1] / 10) * 10 - // }px)`; - // } - - let draggedOverElemId; - if (document.elementFromPoint(e.clientX, e.clientY)) { - const targetElems = document.elementsFromPoint(e.clientX, e.clientY); - // targetElems.forEach((e) => console.log('Element=>', { id: e.id, clist: e.classList, class: e.className })); - const draggedOverElem = targetElems.find( - (ele) => ele.id !== e.target.id && ele.classList.contains('target') - ); - setDragTarget(draggedOverElem?.id); - console.log('draggedOverElem =>', draggedOverElem?.id, dragTarget); - draggedOverElemId = draggedOverElem?.id; - } - let left = e.lastEvent.translate[0]; - let top = e.lastEvent.translate[1]; - console.log('draggedOverElemId child', draggedOverElemId, parent); - // if (!draggedOverElemId) { - // left = left + parentLayout.left * (parentGridWidth / 24); - // top = top + parentLayout.top; - // } - - if (draggedOverElemId !== parent) { - left = left + parentLayout.left * parentGridWidth; - top = top + parentLayout.top; - if (draggedOverElemId) { - const newParentElem = allComponents[draggedOverElemId]?.layouts?.desktop; - let { left: _left, top: _top } = getMouseDistanceFromParentDiv(e, draggedOverElemId); - // left = left - newParentElem.left * parentGridWidth; - // top = top - newParentElem.top; - left = _left; - top = _top; - } - } - - onDrag(e.target.id, left, top, draggedOverElemId); - }} - snapDirections={{ top: true, left: true, bottom: true, right: true }} - snapThreshold={5} - elementGuidelines={list.map((l) => ({ element: `.ele-${l.id}` }))} - // verticalGuidelines={[50, 150, 250, 450, 550]} - // horizontalGuidelines={[0, 100, 200, 400, 500]} - /> */} -
-
- ); -} - -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 ( -//
-//
-// -// {list.map((i) => ( -//
-// Target1 -//
-// ))} -//
Target1
-// {/*
Target1
-//
Target2
-//
Target3
*/} -// { -// 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]} -// /> -//
-//
-// ); -// } diff --git a/frontend/src/Editor/DragContainerNested.jsx b/frontend/src/Editor/DragContainerNested.jsx deleted file mode 100644 index 91af31cb56..0000000000 --- a/frontend/src/Editor/DragContainerNested.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { useState, useEffect, Children } from 'react'; -import './DragContainer.css'; -import { isEmpty } from 'lodash'; -const NO_OF_GRIDS = 43; - -export default function DragContainerNested({ - boxes, - renderWidget, - canvasWidth, - gridWidth, - parent, - currentLayout, - readOnly, - children, -}) { - const boxList = boxes.map((box) => ({ - id: box.id, - height: box?.layouts?.desktop?.height, - left: box?.layouts?.desktop?.left, - top: box?.layouts?.desktop?.top, - width: box?.layouts?.desktop?.width, - })); - const [list, setList] = useState(boxList); - - useEffect(() => { - setList(boxList); - }, [boxes?.length]); - - const getDimensions = (id) => { - const box = boxes.find((b) => b.id === id); - const layoutData = box?.layouts?.[currentLayout] || box?.layouts?.['desktop']; - if (isEmpty(layoutData)) { - return {}; - } - const width = (canvasWidth * layoutData.width) / NO_OF_GRIDS; - return { - width: width + 'px', - height: layoutData.height + 'px', - transform: `translate(${layoutData.left * gridWidth}px, ${layoutData.top}px)`, - }; - }; - - return ( -
-
- {/* */} - {list.map((i) => ( -
- {/* Target {i.id} */} - {/* {renderWidget(i.id)} */} - {children} -
- ))} -
-
- ); -}