updated realTime vis panel smooth transition

2025-04-30 18:20:36 +05:30
parent 9829899aec
commit 6a51fbca61
12 changed files with 369 additions and 154 deletions
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -11,10 +11,7 @@ import {
  useDroppedObjectsStore,
  useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
-import {
-  useSocketStore,
-  useWidgetSubOption,
-} from "../../store/store";
+import { useSocketStore, useWidgetSubOption } from "../../store/store";
 import { getZone2dData } from "../../services/visulization/zone/getZoneData";
 import { generateUniqueId } from "../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
@@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => {
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

  const { setRightSelect } = useRightSelected();
-  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+  const { editWidgetOptions, setEditWidgetOptions } =
+    useEditWidgetOptionsStore();
  const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
  const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
  const { setFloatingWidget } = useFloatingWidget();
  const { widgetSubOption } = useWidgetSubOption();
  const { visualizationSocket } = useSocketStore();
  const { setSelectedChartId } = useWidgetStore();
+  const [waitingPanels, setWaitingPanels] = useState(null);
+
+  console.log("waitingPanels: ", waitingPanels);

  OuterClick({
    contextClassName: [
@@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => {
                  setHiddenPanels={setHiddenPanels}
                  selectedZone={selectedZone}
                  setSelectedZone={setSelectedZone}
+                  waitingPanels={waitingPanels}
+                  setWaitingPanels={setWaitingPanels}
                />
              )}

@@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => {
                setSelectedZone={setSelectedZone}
                hiddenPanels={hiddenPanels}
                setZonesData={setZonesData}
+                waitingPanels={waitingPanels}
              />
            </>
          )}
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
  CleanPannel,
  EyeIcon,
@@ -57,6 +57,8 @@ interface ButtonsProps {
  >;
  hiddenPanels: HiddenPanels; // Updated prop type
  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
+  waitingPanels: any;
+  setWaitingPanels: any;
 }

 const AddButtons: React.FC<ButtonsProps> = ({
@@ -64,6 +66,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
  setSelectedZone,
  setHiddenPanels,
  hiddenPanels,
+  waitingPanels,
+  setWaitingPanels,
 }) => {
  const { visualizationSocket } = useSocketStore();

@@ -174,65 +178,62 @@ const AddButtons: React.FC<ButtonsProps> = ({

  // Function to handle "+" button click
  const handlePlusButtonClick = async (side: Side) => {
+    const zoneId = selectedZone.zoneId;
+
    if (selectedZone.activeSides.includes(side)) {
-      console.log("open");
-      // Panel already exists: Remove widgets from that side and update activeSides
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+      // Already active: Schedule removal

-      // Remove all widgets associated with the side and update active sides
-      const cleanedWidgets = selectedZone.widgets.filter(
-        (widget) => widget.panel !== side
-      );
-      const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
+      setWaitingPanels(side); // Mark as waiting

-      const updatedZone = {
-        ...selectedZone,
-        widgets: cleanedWidgets,
-        activeSides: newActiveSides,
-        panelOrder: newActiveSides,
-      };
+      setTimeout(() => {
+        console.log("Removing after wait...");

-      let deletePanel = {
-        organization: organization,
-        panelName: side,
-        zoneId: selectedZone.zoneId,
-      };
-      if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
-      }
-      setSelectedZone(updatedZone);
-
-      if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
-        setHiddenPanels((prev) => ({
-          ...prev,
-          [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
-            (s) => s !== side
-          ),
-        }));
-      }
-
-      // if(hiddenPanels[selectedZone.zoneId].includes(side))
-
-      // API call to delete the panel
-      // try {
-      //   const response = await deletePanelApi(selectedZone.zoneId, side, organization);
-      //
-      //   if (response.message === "Panel deleted successfully") {
-      //   } else {
-      //
-      //   }
-      // } catch (error) {
-      //
-      // }
-    } else {
-      // Panel does not exist: Create panel
-      try {
-        // Get email and organization safely with a default fallback
        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0];
+        const organization = email?.split("@")[1]?.split(".")[0] || "";
+
+        // Remove widgets for that side
+        const cleanedWidgets = selectedZone.widgets.filter(
+          (widget) => widget.panel !== side
+        );
+        const newActiveSides = selectedZone.activeSides.filter(
+          (s) => s !== side
+        );
+
+        const updatedZone = {
+          ...selectedZone,
+          widgets: cleanedWidgets,
+          activeSides: newActiveSides,
+          panelOrder: newActiveSides,
+        };
+
+        const deletePanel = {
+          organization,
+          panelName: side,
+          zoneId,
+        };
+
+        if (visualizationSocket) {
+          visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
+        }
+
+        setSelectedZone(updatedZone);
+
+        if (hiddenPanels[zoneId]?.includes(side)) {
+          setHiddenPanels((prev) => ({
+            ...prev,
+            [zoneId]: prev[zoneId].filter((s) => s !== side),
+          }));
+        }
+
+        // Remove from waiting state
+        setWaitingPanels(null);
+      }, 500); // Wait for 2 seconds
+    } else {
+      // Panel does not exist: Add it
+      try {
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0] || "";

-        // Prevent duplicate side entries
        const newActiveSides = selectedZone.activeSides.includes(side)
          ? [...selectedZone.activeSides]
          : [...selectedZone.activeSides, side];
@@ -242,32 +243,31 @@ const AddButtons: React.FC<ButtonsProps> = ({
          activeSides: newActiveSides,
          panelOrder: newActiveSides,
        };
-        let addPanel = {
-          organization: organization,
-          zoneId: selectedZone.zoneId,
+
+        const addPanel = {
+          organization,
+          zoneId,
          panelOrder: newActiveSides,
        };
+
        if (visualizationSocket) {
          visualizationSocket.emit("v2:viz-panel:add", addPanel);
        }
-        setSelectedZone(updatedZone);
-        // API call to create panels
-        // const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
-        //

-        // if (response.message === "Panels created successfully") {
-        // } else {
-        //
-        // }
-      } catch (error) {}
+        setSelectedZone(updatedZone);
+      } catch (error) {
+        console.error("Error adding panel:", error);
+      }
    }
  };
+
  return (
    <>
      <div>
        {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
          <div key={side} className={`side-button-container ${side}`}>
            {/* "+" Button */}
+
            <button
              className={`side-button ${side}${
                selectedZone.activeSides.includes(side) ? " active" : ""
@@ -286,7 +286,17 @@ const AddButtons: React.FC<ButtonsProps> = ({

            {/* Extra Buttons */}
            {selectedZone.activeSides.includes(side) && (
-              <div className="extra-Bs">
+              <div
+                className={`extra-Bs
+                  ${waitingPanels === side ? "extra-Bs-addclosing" : ""}
+                  ${
+                    !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
+                    waitingPanels !== side
+                      ? "extra-Bs-addopening"
+                      : ""
+                  }
+                `}
+              >
                {/* Hide Panel */}
                <div
                  className={`icon ${
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -43,6 +43,7 @@ interface PanelProps {
  >;
  hiddenPanels: any;
  setZonesData: React.Dispatch<React.SetStateAction<any>>;
+  waitingPanels: any;
 }

 const generateUniqueId = () =>
@@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
  setSelectedZone,
  hiddenPanels,
  setZonesData,
+  waitingPanels,
 }) => {
  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
  const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
@@ -108,8 +110,9 @@ const Panel: React.FC<PanelProps> = ({
        case "bottom":
          return {
            minWidth: "170px",
-            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-              }px)`,
+            width: `calc(100% - ${
+              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+            }px)`,
            minHeight: "170px",
            height: `${panelSize}px`,
            left: leftActive ? `${panelSize}px` : "0",
@@ -122,8 +125,9 @@ const Panel: React.FC<PanelProps> = ({
            minWidth: "170px",
            width: `${panelSize}px`,
            minHeight: "170px",
-            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-              }px)`,
+            height: `calc(100% - ${
+              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+            }px)`,
            top: topActive ? `${panelSize}px` : "0",
            bottom: bottomActive ? `${panelSize}px` : "0",
            [side]: "0",
@@ -149,7 +153,6 @@ const Panel: React.FC<PanelProps> = ({
    const currentWidgetsCount = getCurrentWidgetCount(panel);
    const maxCapacity = calculatePanelCapacity(panel);

-
    if (currentWidgetsCount < maxCapacity) {
      addWidgetToPanel(draggedAsset, panel);
    }
@@ -283,8 +286,9 @@ const Panel: React.FC<PanelProps> = ({
        <div
          key={side}
          id="panel-wrapper"
-          className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
-            }`}
+          className={`panel ${side}-panel absolute ${
+            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
+          }`}
          style={getPanelStyle(side)}
          onDrop={(e) => handleDrop(e, side)}
          onDragOver={(e) => e.preventDefault()}
@@ -297,11 +301,18 @@ const Panel: React.FC<PanelProps> = ({
          }}
        >
          <div
-            className={`panel-content ${isPlaying && "fullScreen"}`}
+            className={`panel-content
+  ${waitingPanels === side ? `${side}-closing` : ""}
+  ${
+    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+      ? `${side}-opening`
+      : ""
+  }
+  ${isPlaying ? "fullScreen" : ""}`}
            style={{
              pointerEvents:
                selectedZone.lockedPanels.includes(side) ||
-                  hiddenPanels[selectedZone.zoneId]?.includes(side)
+                hiddenPanels[selectedZone.zoneId]?.includes(side)
                  ? "none"
                  : "auto",
              opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",