added dublicate widget function and added missed drag and drop

2025-03-27 12:24:36 +05:30
parent f1a72e4afb 1bbb210786
commit 7e44ba94ca
23 changed files with 901 additions and 487 deletions
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -285,9 +285,13 @@ const Tools: React.FC = () => {
          </div>
        </>
      ) : (
-        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
-          X
-        </div>
+        <>
+          {activeModule !== "simulation" && (
+            <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+              X
+            </div>
+          )}
+        </>
      )}
    </>
  );
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -4,6 +4,7 @@ import {
  EyeIcon,
  LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
+import { AddIcon } from "../../icons/ExportCommonIcons";

 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
        <div key={side} className={`side-button-container ${side}`}>
          <button
-            className={`side-button ${side}`}
+            className={`side-button ${side}${
+              selectedZone.activeSides.includes(side) ? " active" : ""
+            }`}
            onClick={() => handlePlusButtonClick(side)}
            title={
              selectedZone.activeSides.includes(side)
@@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
                : `Activate ${side} panel`
            }
          >
-            +
+            <div className="add-icon">
+              <AddIcon />
+            </div>
          </button>

          {/* Extra Buttons */}
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
+import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";

 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -134,27 +135,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
  };

  return (
-    <div className="zoon-wrapper">
+    <div className="zone-wrapper">
      {/* Left Arrow */}
      {showLeftArrow && (
        <button className="arrow left-arrow" onClick={handleScrollLeft}>
-          {"<"}
+          <MoveArrowLeft />
        </button>
      )}

      {/* Zones Wrapper */}
-      <div
-        ref={containerRef}
-        className="zones-wrapper"
-        style={{
-          display: "flex",
-          gap: "6px",
-          padding: "4px",
-          borderRadius: "8px",
-          overflowX: "auto",
-          maxWidth: "calc(100% - 10px)", // Uncomment this line if needed
-        }}
-      >
+      <div ref={containerRef} className="zones-wrapper">
        {Object.keys(zonesData).map((zoneName, index) => (
          <div
            key={index}
@@ -163,7 +153,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
            }`}
            onClick={() => {
              console.log("zoneName: ", zoneName);
-
              setSelectedZone({
                zoneName,
                activeSides: zonesData[zoneName].activeSides || [],
@@ -181,11 +170,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      {/* Right Arrow */}
      {showRightArrow && (
        <button className="arrow right-arrow" onClick={handleScrollRight}>
-          {">"}
+          <MoveArrowRight />
        </button>
      )}
    </div>
  );
 };

-export default DisplayZone;
+export default DisplayZone;
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -151,6 +151,26 @@ export const DraggableWidget = ({
    };
  }, [setOpenKebabId]);

+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
+  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  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
+    if (fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+    }
+  };
+
  return (
    <>
      <div
@@ -160,6 +180,10 @@ export const DraggableWidget = ({
          selectedChartId?.id === widget.id && "activeChart"
        }`}
        onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
        style={{
          opacity: isPanelHidden ? 0 : 1,
          pointerEvents: isPanelHidden ? "none" : "auto",
@@ -174,7 +198,9 @@ export const DraggableWidget = ({
        {openKebabId === widget.id && (
          <div className="kebab-options" ref={widgetRef}>
            <div
-              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""}`}
+              className={`edit btn ${
+                isPanelFull(widget.panel) ? "btn-blur" : ""
+              }`}
              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
            >
              <div className="icon">
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -123,34 +123,34 @@ const RealTimeVisulization: React.FC = () => {
  });
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

-  // useEffect(() => {
-  //   async function GetZoneData() {
-  //     try {
-  //       const response: { data: Zone[] } | undefined = await getZonesApi(
-  //         "hexrfactory"
-  //       );
+  useEffect(() => {
+    async function GetZoneData() {
+      try {
+        const response: { data: Zone[] } | undefined = await getZonesApi(
+          "hexrfactory"
+        );

-  //       if (!response || !response.data) {
-  //         return;
-  //       }
-  //       const formattedData = response?.data?.reduce<FormattedZoneData>(
-  //         (acc, zone) => {
-  //           acc[zone.zoneName] = {
-  //             activeSides: [],
-  //             panelOrder: [],
-  //             lockedPanels: [],
-  //             zoneCentrePoint: [],
-  //             widgets: [],
-  //           };
-  //           return acc;
-  //         },
-  //         {}
-  //       );
-  //       setZonesData(formattedData);
-  //     } catch (error) { }
-  //   }
-  //   GetZoneData();
-  // }, []);
+        if (!response || !response.data) {
+          return;
+        }
+        const formattedData = response?.data?.reduce<FormattedZoneData>(
+          (acc, zone) => {
+            acc[zone.zoneName] = {
+              activeSides: [],
+              panelOrder: [],
+              lockedPanels: [],
+              zoneCentrePoint: [],
+              widgets: [],
+            };
+            return acc;
+          },
+          {}
+        );
+        setZonesData(formattedData);
+      } catch (error) { }
+    }
+    GetZoneData();
+  }, []);

  useEffect(() => {}, [zonesData]);

--- a/app/src/components/ui/inputs/Search.tsx
+++ b/app/src/components/ui/inputs/Search.tsx
@@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
  };

  return (
-    <div className="asset-search-wrapper">
+    <div className="search-wrapper">
      <div
        className={`search-container ${
          isFocused || inputValue ? "active" : ""
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -13,6 +13,7 @@ interface DropDownListProps {
  kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
  defaultOpen?: boolean; // Determines if the dropdown list should be open by default
  listType?: string; // Type of list to display
+  remove?: boolean;
 }

 const DropDownList: React.FC<DropDownListProps> = ({
@@ -28,25 +29,29 @@ const DropDownList: React.FC<DropDownListProps> = ({
  ],
  defaultOpen = false,
  listType = "default",
+  remove,
 }) => {
  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);

  const handleToggle = () => {
    setIsOpen((prev) => !prev); // Toggle the state
  };
-  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+  const [zoneDataList, setZoneDataList] = useState<
+    { id: string; name: string }[]
+  >([]);

  useEffect(() => {
    async function GetZoneData() {
-      const response = await getZonesApi("hexrfactory")
-      
-      setZoneDataList([{ id: "1", name: "zone1" },
-      { id: "2", name: "Zone 2" },])
+      const response = await getZonesApi("hexrfactory");
+      console.log("response: ", response.data);
+      setZoneDataList([
+        { id: "1", name: "zone1" },
+        { id: "2", name: "Zone 2" },
+      ]);
    }

-    GetZoneData()
-
-  }, [])
+    GetZoneData();
+  }, []);

  return (
    <div className="dropdown-list-container">
@@ -81,7 +86,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
      </div>
      {isOpen && (
        <div className="lists-container">
-          {listType === "default" && <List items={items} />}
+          {listType === "default" && <List items={items} remove={remove} />}
          {listType === "outline" && (
            <>
              <DropDownList
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -5,9 +5,10 @@ import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
 interface ListProps {
  items?: { id: string; name: string }[]; // Optional array of items to render
  placeholder?: string; // Optional placeholder text
+  remove?: boolean;
 }

-const List: React.FC<ListProps> = ({ items = [] }) => {
+const List: React.FC<ListProps> = ({ items = [], remove }) => {
  return (
    <>
      {items.length > 0 ? (
@@ -25,9 +26,11 @@ const List: React.FC<ListProps> = ({ items = [] }) => {
                  <div className="visibe option">
                    <EyeIcon isClosed />
                  </div>
-                  <div className="remove option">
-                    <RmoveIcon />
-                  </div>
+                  {remove && (
+                    <div className="remove option">
+                      <RmoveIcon />
+                    </div>
+                  )}
                </div>
              </div>
            </li>
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -0,0 +1,133 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+
+const SimulationPlayer: React.FC = () => {
+  const [speed, setSpeed] = useState<number>(1);
+  const [playSimulation, setPlaySimulation] = useState(false);
+  const { setIsPlaying } = usePlayButtonStore();
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  // Button functions
+  const handleReset = () => {
+    setSpeed(1);
+  };
+  const handlePlayStop = () => {
+    setPlaySimulation(!playSimulation);
+  };
+  const handleExit = () => {
+    setPlaySimulation(false);
+    setIsPlaying(false);
+  };
+
+  // Slider functions starts
+  const handleSpeedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSpeed(parseFloat(event.target.value));
+  };
+
+  const calculateHandlePosition = () => {
+    return ((speed - 0.5) / (50 - 0.5)) * 100;
+  };
+
+  const handleMouseDown = () => {
+    isDragging.current = true;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging.current || !sliderRef.current) return;
+
+    const sliderRect = sliderRef.current.getBoundingClientRect();
+    const offsetX = e.clientX - sliderRect.left;
+    const percentage = Math.min(Math.max(offsetX / sliderRect.width, 0), 1);
+    const newValue = 0.5 + percentage * (50 - 0.5);
+    setSpeed(parseFloat(newValue.toFixed(1)));
+  };
+
+  const handleMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  // Slider function ends
+
+  return (
+    <div className="simulation-player-wrapper">
+      <div className="simulation-player-container">
+        <div className="controls-container">
+          <div
+            className="simulation-button-container"
+            onClick={() => {
+              handleReset();
+            }}
+          >
+            <ResetIcon />
+            Reset
+          </div>
+          <div
+            className="simulation-button-container"
+            onClick={() => {
+              handlePlayStop();
+            }}
+          >
+            <PlayStopIcon />
+            {playSimulation ? "Play" : "Stop"}
+          </div>
+          <div
+            className="simulation-button-container"
+            onClick={() => {
+              handleExit();
+            }}
+          >
+            <ExitIcon />
+            Exit
+          </div>
+        </div>
+        <div className="speed-control-container">
+          <div className="min-value">0.5x</div>
+          <div className="slider-container" ref={sliderRef}>
+            <div className="marker marker-10"></div>
+            <div className="marker marker-20"></div>
+            <div className="marker marker-30"></div>
+            <div className="marker marker-40"></div>
+            <div className="marker marker-50"></div>
+            <div className="marker marker-60"></div>
+            <div className="marker marker-70"></div>
+            <div className="marker marker-80"></div>
+            <div className="marker marker-90"></div>
+            <div className="custom-slider">
+              <div
+                className={`slider-handle ${isDragging ? "dragging" : ""}`}
+                style={{ left: `${calculateHandlePosition()}%` }}
+                onMouseDown={handleMouseDown}
+              >
+                {speed.toFixed(1)}x
+              </div>
+              <input
+                type="range"
+                min="0.5"
+                max="50"
+                step="0.1"
+                value={speed}
+                onChange={handleSpeedChange}
+                className="slider-input"
+              />
+            </div>
+          </div>
+          <div className="max-value">50x</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SimulationPlayer;