From 26fa892597df6e22ddc5947e8402ca32ce1bc7f5 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Thu, 8 May 2025 18:01:25 +0530
Subject: [PATCH] Refactor DraggableWidget and Panel components; remove unused
state variables, update canvas ID references, and enhance widget rendering
logic. Improve sidebar styles for better layout and tooltip visibility.
---
.../widgets/2d/DraggableWidget.tsx | 71 ++++++-------------
.../visualization/widgets/panel/Panel.tsx | 30 +++-----
app/src/pages/Project.tsx | 4 +-
.../components/marketPlace/marketPlace.scss | 2 +-
app/src/styles/layout/sidebar.scss | 42 +++++++++--
5 files changed, 70 insertions(+), 79 deletions(-)
diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
index 3676251..0b4f7c8 100644
--- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
+++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
@@ -38,11 +38,6 @@ export const DraggableWidget = ({
setOpenKebabId,
selectedZone,
setSelectedZone,
- draggingIndex,
- setDraggingIndex,
- hoverIndex,
- setHoverIndex,
- side,
}: {
selectedZone: {
zoneName: string;
@@ -79,12 +74,6 @@ export const DraggableWidget = ({
onReorder: (fromIndex: number, toIndex: number) => void;
openKebabId: string | null;
setOpenKebabId: (id: string | null) => void;
-
- draggingIndex: number | null;
- setDraggingIndex: React.Dispatch<React.SetStateAction<number | null>>;
- hoverIndex: number | null;
- setHoverIndex: React.Dispatch<React.SetStateAction<number | null>>;
- side: any;
}) => {
const { visualizationSocket } = useSocketStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
@@ -109,6 +98,8 @@ export const DraggableWidget = ({
const deleteSelectedChart = async () => {
try {
+ console.log("delete");
+
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteWidget = {
@@ -120,6 +111,7 @@ 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
@@ -141,7 +133,7 @@ export const DraggableWidget = ({
// }));
// }
} catch (error) {
- echo.error("Failed to delete selected chart");
+ echo.error("Failued to dublicate widgeet");
} finally {
setOpenKebabId(null);
}
@@ -206,8 +198,17 @@ 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) {
- echo.error("Failed to dublicate widget");
+ echo.error("Failued to dublicate widgeet");
} finally {
setOpenKebabId(null);
}
@@ -242,15 +243,10 @@ export const DraggableWidget = ({
}, [setOpenKebabId]);
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
- event.dataTransfer.setData("text/plain", index.toString());
- // selectedZone.zoneId
-
- setDraggingIndex(index);
+ event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
};
-
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
- event.preventDefault();
- setHoverIndex(index); // Set where the placeholder should show
+ event.preventDefault(); // Allow drop
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -259,20 +255,11 @@ export const DraggableWidget = ({
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
- const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10);
- const toIndex = index;
-
+ 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
if (fromIndex !== toIndex) {
- onReorder(fromIndex, toIndex);
+ onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
}
-
- setDraggingIndex(null);
- setHoverIndex(null);
- };
-
- const handleDragEnd = () => {
- setDraggingIndex(null);
- setHoverIndex(null);
};
// useClickOutside(chartWidget, () => {
@@ -284,7 +271,7 @@ export const DraggableWidget = ({
// Current: Two identical useEffect hooks for canvas dimensions
// Remove the duplicate and keep only one
useEffect(() => {
- const canvas = document.getElementById("work-space-three-d-canvas");
+ const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
@@ -304,22 +291,6 @@ export const DraggableWidget = ({
return (
<>
- {draggingIndex !== null && hoverIndex === index && (
- <div
- className="widget-placeholder"
- style={{
- width: ["top", "bottom"].includes(widget.panel)
- ? `calc(${canvasDimensions.width}px / 6)`
- : undefined,
- height: ["left", "right"].includes(widget.panel)
- ? `calc(${canvasDimensions.height - 15}px / 4)`
- : undefined,
- }}
- >
- Drop Here
- </div>
- )}
-
<div
draggable
key={widget.id}
@@ -331,7 +302,6 @@ export const DraggableWidget = ({
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDrop={handleDrop}
- onDragEnd={handleDragEnd}
style={{
width: ["top", "bottom"].includes(widget.panel)
? `calc(${canvasDimensions.width}px / 6)`
@@ -343,6 +313,7 @@ export const DraggableWidget = ({
ref={chartWidget}
onClick={() => {
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 c95ce13..c1eeefc 100644
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -56,6 +56,7 @@ const Panel: React.FC<PanelProps> = ({
setZonesData,
waitingPanels,
}) => {
+ const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@@ -68,12 +69,9 @@ const Panel: React.FC<PanelProps> = ({
height: 0,
});
- const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
- const [hoverIndex, setHoverIndex] = useState<number | null>(null);
-
// Track canvas dimensions
useEffect(() => {
- const canvas = document.getElementById("work-space-three-d-canvas");
+ const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
@@ -185,7 +183,7 @@ const Panel: React.FC<PanelProps> = ({
// Add widget to panel
const addWidgetToPanel = async (asset: any, panel: Side) => {
- const email = localStorage.getItem("email") ?? "";
+ const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = {
@@ -304,14 +302,13 @@ const Panel: React.FC<PanelProps> = ({
>
<div
className={`panel-content
- ${waitingPanels === side ? `${side}-closing` : ""}
- ${
- !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
- waitingPanels !== side
- ? `${side}-opening`
- : ""
- }
- ${isPlaying ? "fullScreen" : ""}`}
+ ${waitingPanels === side ? `${side}-closing` : ""}
+ ${
+ !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+ ? `${side}-opening`
+ : ""
+ }
+ ${isPlaying ? "fullScreen" : ""}`}
style={{
pointerEvents:
selectedZone.lockedPanels.includes(side) ||
@@ -322,7 +319,7 @@ const Panel: React.FC<PanelProps> = ({
}}
>
{selectedZone.widgets
- .filter((w) => w.panel === "top")
+ .filter((w) => w.panel === side)
.map((widget, index) => (
<DraggableWidget
hiddenPanels={hiddenPanels}
@@ -332,15 +329,10 @@ const Panel: React.FC<PanelProps> = ({
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}
/>
))}
</div>
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 373629b..aa203c3 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -86,7 +86,7 @@ const Project: React.FC = () => {
{!selectedUser && (
<>
<KeyPressListener />
- {/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
+ {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
{!isPlaying && (
<>
{toggleThreeD && <ModuleToggle />}
@@ -122,7 +122,7 @@ const Project: React.FC = () => {
}
onDragOver={(event) => event.preventDefault()}
>
- {/* <Scene /> */}
+ <Scene />
</div>
{selectedUser && <FollowPerson />}
{isLogListVisible && (
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
index 73a2445..b4237f2 100644
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -46,7 +46,7 @@
width: calc(25% - 14px) !important;
- height: auto !important;
+ height: 100%;
border-radius: #{$border-radius-xlarge};
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 5e7563a..6e1889e 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -42,18 +42,22 @@
min-width: 32px;
border-radius: #{$border-radius-large};
position: relative;
+
.tooltip {
top: 6px;
right: -168px;
+
&::after {
left: 0px;
bottom: 50%;
}
}
+
&:hover {
outline: 1px solid var(--border-color);
outline-offset: -1px;
background: var(--background-color-solid);
+
.tooltip {
opacity: 1;
transform: translateX(2px);
@@ -81,6 +85,7 @@
.sidebar-left-container {
min-height: 50vh;
+ max-width: 100%;
padding-bottom: 4px;
position: relative;
display: flex;
@@ -391,6 +396,7 @@
.tooltip {
top: 6px;
right: calc(100% + 6px);
+
&::after {
left: 100%;
bottom: 50%;
@@ -411,10 +417,12 @@
&:hover {
outline-color: var(--border-color-accent);
+
svg {
transition: all 0.2s;
scale: 1.1;
}
+
.tooltip {
opacity: 1;
transform: translateX(-2px);
@@ -425,10 +433,12 @@
.active {
background: var(--background-color-accent);
outline: none;
+
&:hover {
svg {
scale: 1;
}
+
background: var(--background-color-accent);
}
}
@@ -1297,10 +1307,12 @@
&:hover {
outline: 1px solid var(--border-color-accent);
+
img {
transition: all 0.2s;
scale: 1.3;
}
+
&::after {
top: 80px;
right: 0;
@@ -1411,6 +1423,7 @@
.asset-name {
opacity: 1;
}
+
.asset-image {
scale: 1.2;
}
@@ -1424,11 +1437,9 @@
width: 100%;
height: 100%;
font-size: var(--font-size-regular);
- background: linear-gradient(
- 0deg,
- rgba(37, 24, 51, 0) 0%,
- rgba(52, 41, 61, 0.5) 100%
- );
+ background: linear-gradient(0deg,
+ rgba(37, 24, 51, 0) 0%,
+ rgba(52, 41, 61, 0.5) 100%);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
@@ -1455,10 +1466,12 @@
.skeleton-wrapper {
display: flex;
+
.asset-name {
width: 40%;
height: 10px;
}
+
.asset {
width: 100%;
height: 100%;
@@ -1467,11 +1480,26 @@
.sidebar-left-wrapper,
.sidebar-right-wrapper {
- height: calc(50vh + 150px);
+ height: calc(54vh + 150px);
transition: height 0.2s ease-in-out;
+ .sidebar-left-container {
+ height: 100%;
+ .sidebar-left-content-container{
+ max-height: 80%;
+ .widget-left-sideBar{
+ height: 80%;
+ .widget2D.widgets-wrapper{
+
+ min-height: 50vh;
+ height: 60%;
+
+ }
+ }
+ }
+ }
}
.sidebar-left-wrapper.closed,
.sidebar-right-wrapper.closed {
height: 52px;
-}
+}
\ No newline at end of file