From 453d6efc695db3d18dcb6a019b63c687468d7c4c Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Thu, 8 May 2025 14:21:21 +0530 Subject: [PATCH] Refactor MarketPlace and Scene components; enhance drag-and-drop functionality in DraggableWidget and Panel; add WidgetPlaceHolder component; implement global echo logging interface. --- app/src/global.d.ts | 13 ++++ app/src/modules/market/MarketPlace.tsx | 20 +++--- app/src/modules/scene/scene.tsx | 30 ++++----- .../widgets/2d/DraggableWidget.tsx | 66 ++++++++++++++----- .../visualization/widgets/panel/Panel.tsx | 25 ++++--- .../widgets/panel/WidgetPlaceHolder.tsx | 7 ++ app/src/pages/Project.tsx | 31 +++++++-- app/src/styles/pages/realTimeViz.scss | 17 +++++ 8 files changed, 155 insertions(+), 54 deletions(-) create mode 100644 app/src/global.d.ts create mode 100644 app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx diff --git a/app/src/global.d.ts b/app/src/global.d.ts new file mode 100644 index 0000000..804fae0 --- /dev/null +++ b/app/src/global.d.ts @@ -0,0 +1,13 @@ +// src/global.d.ts +import { LogType } from "../components/ui/log/LoggerContext"; + +declare global { + const echo: { + log: (message: string) => void; + info: (message: string) => void; + warn: (message: string) => void; + error: (message: string) => void; + success: (message: string) => void; + clear: () => void; + }; +} diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index 4b76951..113eace 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -23,6 +23,10 @@ const MarketPlace = () => { const [filteredModels, setFilteredModels] = useState([]); const [isLoading, setisLoading] = useState(false); // Loading state + useEffect(() => { + echo.log("opended market place"); + }, []); + useEffect(() => { const filteredAssets = async () => { setisLoading(true); @@ -42,18 +46,16 @@ const MarketPlace = () => {
+ {isLoading ? ( // Show loading spinner while fetching ) : ( - <> - - - - )}{" "} + + )}
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx index 0f2c489..0e81cf6 100644 --- a/app/src/modules/scene/scene.tsx +++ b/app/src/modules/scene/scene.tsx @@ -20,24 +20,24 @@ export default function Scene() { ); return ( - - { - e.preventDefault(); - }} - > - + + { + e.preventDefault(); + }} + > + - + - + - + - - - + + + ); } diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx index 3f22fee..054757b 100644 --- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx +++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx @@ -38,6 +38,11 @@ export const DraggableWidget = ({ setOpenKebabId, selectedZone, setSelectedZone, + draggingIndex, + setDraggingIndex, + hoverIndex, + setHoverIndex, + side, }: { selectedZone: { zoneName: string; @@ -74,6 +79,12 @@ export const DraggableWidget = ({ onReorder: (fromIndex: number, toIndex: number) => void; openKebabId: string | null; setOpenKebabId: (id: string | null) => void; + + draggingIndex: number | null; + setDraggingIndex: React.Dispatch>; + hoverIndex: number | null; + setHoverIndex: React.Dispatch>; + side: any; }) => { const { visualizationSocket } = useSocketStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore(); @@ -98,8 +109,6 @@ export const DraggableWidget = ({ const deleteSelectedChart = async () => { try { - console.log("delete"); - const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; let deleteWidget = { @@ -111,7 +120,6 @@ export const DraggableWidget = ({ if (visualizationSocket) { setSelectedChartId(null); visualizationSocket.emit("v2:viz-widget:delete", deleteWidget); - console.log("delete widget", selectedChartId); } const updatedWidgets = selectedZone.widgets.filter( (w: Widget) => w.id !== widget.id @@ -197,16 +205,8 @@ export const DraggableWidget = ({ ...prevZone, widgets: [...prevZone.widgets, duplicatedWidget], })); - - // const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget); - - // if (response?.message === "Widget created successfully") { - // setSelectedZone((prevZone: any) => ({ - // ...prevZone, - // widgets: [...prevZone.widgets, duplicatedWidget], - // })); - // } } catch (error) { + } finally { setOpenKebabId(null); } @@ -241,10 +241,15 @@ export const DraggableWidget = ({ }, [setOpenKebabId]); const handleDragStart = (event: React.DragEvent) => { - event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget + event.dataTransfer.setData("text/plain", index.toString()); + // selectedZone.zoneId + + setDraggingIndex(index); }; + const handleDragEnter = (event: React.DragEvent) => { - event.preventDefault(); // Allow drop + event.preventDefault(); + setHoverIndex(index); // Set where the placeholder should show }; const handleDragOver = (event: React.DragEvent) => { @@ -253,11 +258,20 @@ export const DraggableWidget = ({ const handleDrop = (event: React.DragEvent) => { event.preventDefault(); - const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index - const toIndex = index; // The index of the widget where the drop occurred + const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); + const toIndex = index; + if (fromIndex !== toIndex) { - onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop + onReorder(fromIndex, toIndex); } + + setDraggingIndex(null); + setHoverIndex(null); + }; + + const handleDragEnd = () => { + setDraggingIndex(null); + setHoverIndex(null); }; // useClickOutside(chartWidget, () => { @@ -289,6 +303,22 @@ export const DraggableWidget = ({ return ( <> + {draggingIndex !== null && hoverIndex === index && ( +
+ Drop Here +
+ )} +
{ setSelectedChartId(widget); - console.log("click"); }} > {/* Kebab Icon */} diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx index c1eeefc..ee2f730 100644 --- a/app/src/modules/visualization/widgets/panel/Panel.tsx +++ b/app/src/modules/visualization/widgets/panel/Panel.tsx @@ -69,6 +69,9 @@ const Panel: React.FC = ({ height: 0, }); + const [draggingIndex, setDraggingIndex] = useState(null); + const [hoverIndex, setHoverIndex] = useState(null); + // Track canvas dimensions useEffect(() => { const canvas = document.getElementById("real-time-vis-canvas"); @@ -302,13 +305,14 @@ const Panel: React.FC = ({ >
= ({ }} > {selectedZone.widgets - .filter((w) => w.panel === side) + .filter((w) => w.panel === "top") .map((widget, index) => ( = ({ onReorder={(fromIndex, toIndex) => handleReorder(fromIndex, toIndex, side) } + side={side} openKebabId={openKebabId} setOpenKebabId={setOpenKebabId} selectedZone={selectedZone} setSelectedZone={setSelectedZone} + draggingIndex={draggingIndex} + setDraggingIndex={setDraggingIndex} + hoverIndex={hoverIndex} + setHoverIndex={setHoverIndex} /> ))}
diff --git a/app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx b/app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx new file mode 100644 index 0000000..c7d59b3 --- /dev/null +++ b/app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const WidgetPlaceHolder = () => { + return
; +}; + +export default WidgetPlaceHolder; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index cf3119a..3f82385 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -34,7 +34,7 @@ import Footer from "../components/footer/Footer"; const Project: React.FC = () => { let navigate = useNavigate(); - const echo = useLogger(); + // const echo = useLogger(); const { activeModule, setActiveModule } = useModuleStore(); const { loadingProgress } = useLoadingProgress(); @@ -58,7 +58,7 @@ const Project: React.FC = () => { setOrganization(Organization); setUserName(name); } - echo.warn("Log in success full"); + echo.warn("Log in successful"); } else { navigate("/"); } @@ -86,7 +86,7 @@ const Project: React.FC = () => { {!selectedUser && ( <> - {loadingProgress > 0 && } + {/* {loadingProgress > 0 && } */} {!isPlaying && ( <> {toggleThreeD && } @@ -122,7 +122,7 @@ const Project: React.FC = () => { } onDragOver={(event) => event.preventDefault()} > - + {/* */}
{selectedUser && } {isLogListVisible && ( @@ -136,3 +136,26 @@ const Project: React.FC = () => { }; export default Project; + +// src/global.d.ts +// import { LogType } from "../components/ui/log/LoggerContext"; + +// export declare global { +// const echo: { +// log: (message: string) => void; +// info: (message: string) => void; +// warn: (message: string) => void; +// error: (message: string) => void; +// success: (message: string) => void; +// clear: () => void; +// }; +// } + +// Project.tsx:61 Uncaught ReferenceError: echo is not defined +// at Project.tsx:61:1 +// at commitHookEffectListMount (react-dom.development.js:23189:1) +// at commitPassiveMountOnFiber (react-dom.development.js:24965:1) +// at commitPassiveMountEffects_complete (react-dom.development.js:24930:1) +// at commitPassiveMountEffects_begin (react-dom.development.js:24917:1) +// at commitPassiveMountEffects (react-dom.development.js:24905:1) +// this error occurs some time's diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index f711258..1982dae 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -213,6 +213,7 @@ position: relative; padding: 0 10px; animation: scaleFadeIn 0.4s forwards; + .kebab { width: 30px; height: 30px; @@ -948,13 +949,29 @@ transform: scaleY(0); } } + @keyframes scaleFadeIn { from { scale: 0; opacity: 0; } + to { scale: 1; opacity: 1; } } + + + +.widget-placeholder { + background-color: gray; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; +} + +.dragging { + display: none; +} \ No newline at end of file