Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

3d widget editoption function added.

This commit is contained in:
Gomathi 2025-04-03 19:31:25 +05:30
parent 1dc04d19bb
commit 22bb0332ac
16 changed files with 312 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/layout/3D-cards/CardsScene.tsx
View File

@ -8,7 +8,7 @@ import StateWorking from "./cards/StateWorking";
const CardsScene = () => { const CardsScene = () => {
return ( return (
<div className="cards-scene" style={{ width: "100%", height: "100%" }}> <div className="cards-scene" style={{ width: "100%", height: "100%" }}>
<Canvas> {/* <Canvas> */}
{/* 3d-cards */} {/* 3d-cards */}
{/* <ProductionCapacity /> */} {/* <ProductionCapacity /> */}
@ -16,8 +16,8 @@ const CardsScene = () => {
{/* <StateWorking /> */} {/* <StateWorking /> */}
{/* <Throughput /> */} {/* <Throughput /> */}
<OrbitControls /> {/* <OrbitControls /> */}
</Canvas> {/* </Canvas> */}
</div> </div>
); );
}; };

34
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
View File

@ -30,11 +30,13 @@ interface ProductionCapacityProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
} }
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, position }) => { const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
@ -111,7 +113,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@ -146,8 +148,8 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@ -173,20 +175,18 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
fetchSavedInputes(); fetchSavedInputes();
} }
} }
,[chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform zIndexRange={[1, 0]}
sprite> transform
sprite>
<div className="productionCapacity-wrapper card" <div className="productionCapacity-wrapper card"
onClick={ onClick={() => setSelectedChartId({ id: id, type: type })}
() => setSelectedChartId({ onContextMenu={onContextMenu}
id: id, >
type: type
})
}>
<div className="headeproductionCapacityr-wrapper"> <div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div> <div className="header">Production Capacity</div>
<div className="production-capacity"> <div className="production-capacity">
@ -207,7 +207,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
</div>{" "} </div>{" "}
<div className="bar-chart charts"> <div className="bar-chart charts">
{/* Bar Chart */} {/* Bar Chart */}
<Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData } options={chartOptions} /> <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData} options={chartOptions} />
</div> </div>
</div> </div>
</Html> </Html>

28
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
View File

@ -43,10 +43,11 @@ interface ReturnOfInvestmentProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
} }
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position }) => { const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h")
@ -138,7 +139,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@ -155,8 +156,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
return { return {
label: datasetKey, label: datasetKey,
data: responseData[datasetKey]?.values ?? [], data: responseData[datasetKey]?.values ?? [],
borderColor: index === 0 ? "rgba(75, 192, 192, 1)": "rgba(255, 99, 132, 1)", // Light blue color borderColor: index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)": "rgba(255, 99, 132, 0.2)", backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
fill: true, fill: true,
tension: 0.4, // Smooth curve effect tension: 0.4, // Smooth curve effect
pointRadius: 0, // Hide dots pointRadius: 0, // Hide dots
@ -174,8 +175,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@ -201,21 +202,18 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
fetchSavedInputes(); fetchSavedInputes();
} }
} }
,[chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1,0]} zIndexRange={[1, 0]}
sprite> sprite>
<div className="returnOfInvestment card" <div className="returnOfInvestment card"
onClick={ onClick={() => setSelectedChartId({ id: id, type: type })}
() => setSelectedChartId({ onContextMenu={onContextMenu}
id: id, >
type: type
})
}>
<div className="header">Return of Investment</div> <div className="header">Return of Investment</div>
<div className="lineGraph charts"> <div className="lineGraph charts">
{/* Smooth curve graph with two datasets */} {/* Smooth curve graph with two datasets */}

54
app/src/components/layout/3D-cards/cards/StateWorking.tsx
View File

@ -7,11 +7,12 @@ import io from "socket.io-client";
// import image from "../../../../assets/image/temp/image.png"; // import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps { interface StateWorkingProps {
id:string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
} }
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => { const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
@ -38,14 +39,14 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
duration, duration,
interval: 1000, interval: 1000,
}; };
const startStream = () => { const startStream = () => {
socket.emit("lastInput", inputData); socket.emit("lastInput", inputData);
}; };
socket.on("connect", startStream); socket.on("connect", startStream);
socket.on("lastOutput", (response) => { socket.on("lastOutput", (response) => {
const responseData = response; const responseData = response;
console.log("responceeeeeeeeeee",response); console.log("responceeeeeeeeeee", response);
setDatas(responseData); setDatas(responseData);
}); });
@ -56,8 +57,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@ -74,8 +75,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
} }
} }
console.log("dataaaaa",datas); console.log("dataaaaa", datas);
useEffect(() => { useEffect(() => {
fetchSavedInputes(); fetchSavedInputes();
@ -86,27 +87,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
fetchSavedInputes(); fetchSavedInputes();
} }
} }
,[chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1,0]} zIndexRange={[1, 0]}
sprite> sprite>
<div className="stateWorking-wrapper card" <div className="stateWorking-wrapper card"
onClick={ onClick={() => setSelectedChartId({ id: id, type: type })}
() => setSelectedChartId({ onContextMenu={onContextMenu}
id: id, >
type: type
})
}>
<div className="header-wrapper"> <div className="header-wrapper">
<div className="header"> <div className="header">
<span>State</span> <span>State</span>
<span> <span>
{datas?.input1 ? datas.input1 : 'input1'} <span>.</span> {datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
</span> </span>
</div> </div>
<div className="img"> <div className="img">
@ -126,24 +124,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
<div className="key">{datas?.input2 ? datas.input2 : 'data'}</div> <div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
</div> </div>
<div className="data-table"> <div className="data-table">
<div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div> <div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
<div className="key">{datas?.input3 ? datas.input3 : 'data'}</div> <div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
</div> </div>
<div className="data-table"> <div className="data-table">
<div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div> <div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
<div className="key">{datas?.input4 ? datas.input4 : 'data'}</div> <div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
</div> </div>
<div className="data-table"> <div className="data-table">
<div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div> <div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
<div className="key">{datas?.input5 ? datas.input5 : 'data'}</div> <div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
</div> </div>
<div className="data-table"> <div className="data-table">
<div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div> <div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
<div className="key">{datas?.input6 ? datas.input6 : 'data'}</div> <div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
</div> </div>
<div className="data-table"> <div className="data-table">
<div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div> <div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
<div className="key">{datas?.input7 ? datas.input7 : 'data'}</div> <div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
</div> </div>
</div> </div>
</div> </div>

24
app/src/components/layout/3D-cards/cards/Throughput.tsx
View File

@ -45,11 +45,12 @@ interface ThroughputProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
} }
const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => { const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h")
@ -121,7 +122,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@ -154,8 +155,8 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@ -181,7 +182,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
fetchSavedInputes(); fetchSavedInputes();
} }
} }
,[chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
@ -189,13 +190,10 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite> sprite>
<div className="throughput-wrapper" <div className="throughput-wrapper"
onClick={ onClick={() => setSelectedChartId({ id: id, type: type })}
() => setSelectedChartId({ onContextMenu={onContextMenu}
id: id, >
type: type
})
}>
<div className="header">{name}</div> <div className="header">{name}</div>
<div className="display-value"> <div className="display-value">
<div className="left"> <div className="left">

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
View File

@ -14,8 +14,6 @@ import { useWidgetStore } from '../../../../../store/useWidgetStore'
const InputSelecterComponent = () => { const InputSelecterComponent = () => {
const { selectedChartId } = useWidgetStore(); const { selectedChartId } = useWidgetStore();
console.log('selectedChartId:',selectedChartId);
if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) { if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
return ( return (

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
View File

@ -21,8 +21,6 @@ const Widget2InputCard3D = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0]
console.log(selectedChartId);
useEffect(() => { useEffect(() => {
const fetchZoneData = async () => { const fetchZoneData = async () => {

4
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
View File

@ -19,9 +19,7 @@ const Widget3InputCard3D = () => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0]
console.log(selectedChartId);
useEffect(() => { useEffect(() => {
const fetchZoneData = async () => { const fetchZoneData = async () => {
try { try {

4
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
View File

@ -21,9 +21,7 @@ const Widget4InputCard3D = (props: Props) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0]
console.log(selectedChartId);
useEffect(() => { useEffect(() => {
const fetchZoneData = async () => { const fetchZoneData = async () => {
try { try {

160
app/src/components/ui/componets/Dropped3dWidget.tsx
View File

@ -1,5 +1,5 @@
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store"; import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes"; import { ThreeState } from "../../../types/world/worldTypes";
@ -13,30 +13,43 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget"; import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { use3DWidget } from "../../../store/useDroppedObjectsStore"; import { use3DWidget } from "../../../store/useDroppedObjectsStore";
import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore"; import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import { useWidgetStore } from "../../../store/useWidgetStore";
import EditWidgetOption from "../menu/EditWidgetOption";
export default function Dropped3dWidgets() { export default function Dropped3dWidgets() {
const { widgetSelect } = useAsset3dWidget(); const { widgetSelect } = useAsset3dWidget();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { raycaster, gl, scene }: ThreeState = useThree(); const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
const { widgetSubOption } = useWidgetSubOption(); const { widgetSubOption } = useWidgetSubOption();
const { selectedZone } = useSelectedZoneStore(); const { selectedZone } = useSelectedZoneStore();
const { top, setTop } = useTopData()
const { left, setLeft } = useLeftData()
const { rightSelect, setRightSelect } = useRightSelected()
// ✅ Use Zustand Store instead of useState // ✅ Use Zustand Store instead of useState
const { zoneWidgetData, setZoneWidgetData, addWidget } = useZoneWidgetStore(); const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget(); const { setWidgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
const planeIntersect = useRef(new THREE.Vector3());
// let [verticalPlane, setFloorPlanesVertical] = useState(
// new THREE.Plane(new THREE.Vector3(0, 1, 0))
// );
useEffect(() => { useEffect(() => {
if (activeModule !== "visualization") return; if (activeModule !== "visualization") return;
if (!selectedZone.zoneId) return; if (!selectedZone.zoneId) return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
async function get3dWidgetData() { async function get3dWidgetData() {
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization); let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result); setWidgets3D(result);
const formattedWidgets = result.map((widget: any) => ({ const formattedWidgets = result.map((widget: any) => ({
@ -89,13 +102,13 @@ export default function Dropped3dWidgets() {
widget: newWidget, widget: newWidget,
zoneId: selectedZone.zoneId zoneId: selectedZone.zoneId
} }
console.log('add3dWidget: ', add3dWidget);
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget) visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
} }
// let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget); // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
// console.log('response: ', response); //
// if (response.message === "Widget created successfully") { // if (response.message === "Widget created successfully") {
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
@ -111,23 +124,142 @@ export default function Dropped3dWidgets() {
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => {
if (!rightClickSelected) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
if (rightSelect === "Duplicate") {
const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
if (!widgetToDuplicate) return;
const newWidget = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
widgetToDuplicate.position[0] + 0.5, // Slightly shift position
widgetToDuplicate.position[1],
widgetToDuplicate.position[2] + 0.5,
] as [number, number, number],
};
let add3dWidget = {
organization,
widget: newWidget,
zoneId: selectedZone.zoneId
};
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
// }
addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null);
setRightClickSelected(null);
}
if (rightSelect === "Delete") {
let deleteWidget = {
organization,
widgetId: rightClickSelected,
zoneId: selectedZone.zoneId
};
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
// }
setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
setRightClickSelected(null);
setRightSelect(null);
}
if (rightSelect === "Horizontal Move") {
}
if (rightSelect === "Vertical Move") {
}
}, [rightSelect, rightClickSelected]);
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z
]);
}
if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [
selectedWidget.position[0],
planeIntersect.current.y, // Ensure Y value updates correctly
selectedWidget.position[2]
]);
} else {
console.log("No Intersection with Vertical Plane");
}
}
};
const handleMouseUp = () => {
if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
setTimeout(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
}
};
// Attach events to window instead of gl.domElement
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
return ( return (
<> <>
{activeZoneWidgets.map(({ id, type, position }) => { {activeZoneWidgets.map(({ id, type, position }) => {
console.log('Typeeeeeeeeeeee',type); const handleRightClick = (event: React.MouseEvent) => {
event.preventDefault();
setRightClickSelected(id)
};
switch (type) { switch (type) {
case "ui-Widget 1": case "ui-Widget 1":
return <ProductionCapacity key={id} id={id} type={type} position={position} />; return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
case "ui-Widget 2": case "ui-Widget 2":
return <ReturnOfInvestment key={id} id={id} type={type} position={position} />; return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
case "ui-Widget 3": case "ui-Widget 3":
return <StateWorking key={id} id={id} type={type} position={position} />; return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
case "ui-Widget 4": case "ui-Widget 4":
return <Throughput key={id} id={id} type={type} position={position} />; return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
default: default:
return null; return null;
} }
})} })}
</> </>
); );
} }

27
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -23,6 +23,8 @@ import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.
import RenderOverlay from "../../templates/Overlay"; import RenderOverlay from "../../templates/Overlay";
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup"; import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
import DroppedObjects from "./DroppedFloatingWidgets"; import DroppedObjects from "./DroppedFloatingWidgets";
import EditWidgetOption from "../menu/EditWidgetOption";
import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@ -55,8 +57,9 @@ const RealTimeVisulization: React.FC = () => {
const [droppedObjects, setDroppedObjects] = useState<any[]>([]); const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zones } = useZones();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const [floatingWidgets, setFloatingWidgets] = useState< const [floatingWidgets, setFloatingWidgets] = useState<
@ -93,7 +96,7 @@ const RealTimeVisulization: React.FC = () => {
{} {}
); );
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) {} } catch (error) { }
} }
GetZoneData(); GetZoneData();
@ -178,7 +181,6 @@ const RealTimeVisulization: React.FC = () => {
.getState() .getState()
.addObject(selectedZone.zoneName, newObject); .addObject(selectedZone.zoneName, newObject);
// } // }
// Update floating widgets state // Update floating widgets state
setFloatingWidgets((prevWidgets) => ({ setFloatingWidgets((prevWidgets) => ({
...prevWidgets, ...prevWidgets,
@ -192,9 +194,10 @@ const RealTimeVisulization: React.FC = () => {
], ],
}, },
})); }));
} catch (error) {} } catch (error) { }
}; };
function handleRightClickSel(){}
return ( return (
<div <div
ref={containerRef} ref={containerRef}
@ -206,11 +209,6 @@ const RealTimeVisulization: React.FC = () => {
left: isPlaying || activeModule !== "visualization" ? "0%" : "", left: isPlaying || activeModule !== "visualization" ? "0%" : "",
}} }}
> >
{/* <RenderOverlay>
<EditWidgetOption
options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
/>
</RenderOverlay> */}
{openConfirmationPopup && ( {openConfirmationPopup && (
<RenderOverlay> <RenderOverlay>
<ConfirmationPopup <ConfirmationPopup
@ -235,12 +233,11 @@ const RealTimeVisulization: React.FC = () => {
</div> </div>
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />} {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
{activeModule === "visualization" && <SocketRealTimeViz />} {activeModule === "visualization" && <SocketRealTimeViz />}
{/* <DroppedObjects /> */}
{/* <RenderOverlay> {activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
<EditWidgetOption options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]}
options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]} />}
/>
</RenderOverlay> */}
{activeModule === "visualization" && ( {activeModule === "visualization" && (
<> <>
<DisplayZone <DisplayZone

29
app/src/components/ui/componets/handleDropTemplate .tsx
View File

@ -1,29 +0,0 @@
// import { useSelectedZoneStore } from "../../../store/useZoneStore";
// type HandleDropTemplateProps = {
// templateId: string;
// };
// export const handleDropTemplate = ({ templateId }: HandleDropTemplateProps): void => {
// const { getTemplate } = useTemplateStore.getState();
// const { setSelectedZone } = useSelectedZoneStore.getState();
// // Find the template by ID
// const template: Template | undefined = getTemplate(templateId);
// if (!template) {
// console.error("Template not found!");
// return;
// }
// // Update the selected zone with the template data
// setSelectedZone((prev) => ({
// ...prev,
// panelOrder: template.panelOrder,
// activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])),
// widgets: template.widgets, // Keep widget structure the same
// }));
// console.log("Dropped template applied:", template);
// };

17
app/src/components/ui/menu/EditWidgetOption.tsx
View File

@ -1,15 +1,26 @@
import React from "react"; import React, { useEffect } from "react";
import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore";
interface EditWidgetOptionProps { interface EditWidgetOptionProps {
options: string[]; options: string[];
} }
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => { const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
const { top, setTop } = useTopData()
const { left, setLeft } = useLeftData()
const { rightSelect, setRightSelect } = useRightSelected()
useEffect(() => {
console.log('left: ', left);
console.log('top: ', top);
}, [top, left])
return ( return (
<div className="editWidgetOptions-wrapper"> <div className="editWidgetOptions-wrapper" style={{ top: top + "px", left: left + "px" }}>
<div className="editWidgetOptions"> <div className="editWidgetOptions">
{options.map((option, index) => ( {options.map((option, index) => (
<div className="option" key={index}> <div className="option" key={index} onClick={(e) => setRightSelect(option)}>
{option} {option}
</div> </div>
))} ))}

2
app/src/store/store.ts
View File

@ -12,7 +12,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
} }
const socket = io( const socket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`, `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
{ {
reconnection: false, reconnection: false,
auth: { email, organization }, auth: { email, organization },

90
app/src/store/useZone3DWidgetStore.ts
View File

@ -1,33 +1,77 @@
import { create } from "zustand"; import { create } from "zustand";
type WidgetData = { type WidgetData = {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
tempPosition?: [number, number, number];
}; };
type ZoneWidgetStore = { type ZoneWidgetStore = {
zoneWidgetData: Record<string, WidgetData[]>; zoneWidgetData: Record<string, WidgetData[]>;
setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void; setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
addWidget: (zoneId: string, widget: WidgetData) => void; addWidget: (zoneId: string, widget: WidgetData) => void;
updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
}; };
export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({ export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
zoneWidgetData: {}, zoneWidgetData: {},
setZoneWidgetData: (zoneId, widgets) => setZoneWidgetData: (zoneId, widgets) =>
set((state) => ({ set((state) => ({
zoneWidgetData: { zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets },
...state.zoneWidgetData, })),
[zoneId]: widgets,
}, addWidget: (zoneId, widget) =>
})), set((state) => ({
zoneWidgetData: {
addWidget: (zoneId, widget) => ...state.zoneWidgetData,
set((state) => ({ [zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
zoneWidgetData: { },
...state.zoneWidgetData, })),
[zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
}, updateWidgetPosition: (zoneId, widgetId, newPosition) =>
})), set((state) => {
const widgets = state.zoneWidgetData[zoneId] || [];
return {
zoneWidgetData: {
...state.zoneWidgetData,
[zoneId]: widgets.map((widget) =>
widget.id === widgetId ? { ...widget, position: newPosition } : widget
),
},
};
}),
}));
interface RightClickStore {
rightClickSelected: string | null;
setRightClickSelected: (x: string | null) => void;
}
export const useRightClickSelected = create<RightClickStore>((set) => ({
rightClickSelected: null, // Default to null
setRightClickSelected: (x) => set({ rightClickSelected: x }),
}));
export const useTopData = create<any>((set: any) => ({
top: 0,
setTop: (x: any) => set({ top: x }),
}));
export const useLeftData = create<any>((set: any) => ({
left: 0,
setLeft: (x: any) => set({ left: x }),
}));
interface RightSelectStore {
rightSelect: string | null;
setRightSelect: (x: string | null) => void;
}
export const useRightSelected = create<RightSelectStore>((set) => ({
rightSelect: null, // Default state is null
setRightSelect: (x) => set({ rightSelect: x }),
})); }));

5
app/src/styles/pages/realTimeViz.scss
View File

@ -716,11 +716,6 @@
} }
.editWidgetOptions-wrapper {
height: 100vh;
width: 100vw;
}
.editWidgetOptions { .editWidgetOptions {
position: absolute; position: absolute;