Refactor MarketPlace and Scene components; enhance drag-and-drop functionality in DraggableWidget and Panel; add WidgetPlaceHolder component; implement global echo logging interface.

2025-05-08 14:21:21 +05:30 · 2025-05-08 14:21:21 +05:30 · 453d6efc69
parent 8bf48bfcfe
commit 453d6efc69
8 changed files with 155 additions and 54 deletions
--- a/app/src/global.d.ts
+++ 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;
+  };
+}
--- a/app/src/modules/market/MarketPlace.tsx
+++ b/app/src/modules/market/MarketPlace.tsx
@ -23,6 +23,10 @@ const MarketPlace = () => {
  const [filteredModels, setFilteredModels] = useState<ModelData[]>([]);
  const [isLoading, setisLoading] = useState<boolean>(false); // Loading state

+  useEffect(() => {
+    echo.log("opended market place");
+  }, []);
+
  useEffect(() => {
    const filteredAssets = async () => {
      setisLoading(true);
@ -42,18 +46,16 @@ const MarketPlace = () => {
    <div className="marketplace-wrapper">
      <div className="marketplace-container">
        <div className="marketPlace">
+          <FilterSearch
+            models={models}
+            setModels={setModels}
+            filteredModels={filteredModels}
+          />
          {isLoading ? (
            <SkeletonUI type="assetLibrary" /> // Show loading spinner while fetching
          ) : (
-            <>
-              <FilterSearch
-                models={models}
-                setModels={setModels}
-                filteredModels={filteredModels}
-              />
-              <CardsContainer models={models} />
-            </>
-          )}{" "}
+            <CardsContainer models={models} />
+          )}
        </div>
      </div>
    </div>
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@ -20,24 +20,24 @@ export default function Scene() {
  );

  return (
-      <KeyboardControls map={map}>
-        <Canvas
-          eventPrefix="client"
-          gl={{ powerPreference: "high-performance", antialias: true }}
-          onContextMenu={(e) => {
-            e.preventDefault();
-          }}
-        >
-          <Setup />
+    <KeyboardControls map={map}>
+      <Canvas
+        eventPrefix="client"
+        gl={{ powerPreference: "high-performance", antialias: true }}
+        onContextMenu={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Setup />

-          <Collaboration />
+        <Collaboration />

-          <Builder />
+        <Builder />

-          <Simulation />
+        <Simulation />

-          <Visualization />
-        </Canvas>
-      </KeyboardControls>
+        <Visualization />
+      </Canvas>
+    </KeyboardControls>
  );
 }
--- 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<React.SetStateAction<number | null>>;
+  hoverIndex: number | null;
+  setHoverIndex: React.Dispatch<React.SetStateAction<number | null>>;
+  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<HTMLDivElement>) => {
-    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<HTMLDivElement>) => {
-    event.preventDefault(); // Allow drop
+    event.preventDefault();
+    setHoverIndex(index); // Set where the placeholder should show
  };

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@ -253,11 +258,20 @@ export const DraggableWidget = ({

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    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 && (
+        <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}
@ -300,6 +330,7 @@ export const DraggableWidget = ({
        onDragEnter={handleDragEnter}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
+        onDragEnd={handleDragEnd}
        style={{
          width: ["top", "bottom"].includes(widget.panel)
            ? `calc(${canvasDimensions.width}px / 6)`
@ -311,7 +342,6 @@ export const DraggableWidget = ({
        ref={chartWidget}
        onClick={() => {
          setSelectedChartId(widget);
-          console.log("click");
        }}
      >
        {/* Kebab Icon */}
--- 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<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("real-time-vis-canvas");
@ -302,13 +305,14 @@ 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) ||
@ -319,7 +323,7 @@ const Panel: React.FC<PanelProps> = ({
            }}
          >
            {selectedZone.widgets
-              .filter((w) => w.panel === side)
+              .filter((w) => w.panel === "top")
              .map((widget, index) => (
                <DraggableWidget
                  hiddenPanels={hiddenPanels}
@ -329,10 +333,15 @@ 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>
--- a/app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx
+++ b/app/src/modules/visualization/widgets/panel/WidgetPlaceHolder.tsx
@ -0,0 +1,7 @@
+import React from "react";
+
+const WidgetPlaceHolder = () => {
+  return <div className="widget-placeholder"></div>;
+};
+
+export default WidgetPlaceHolder;
--- 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 && (
        <>
          <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 && (
@ -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
--- 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;
+}