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

updated realTimeViz panel style

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-07 17:55:14 +05:30
parent f738fec057 8526379703
commit 4a05bb8cdf
74 changed files with 3243 additions and 3138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,14 +30,13 @@ interface ProductionCapacityProps {
id: string;
type: string;
position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
}
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h")
@@ -158,10 +157,10 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
setDuration(response.data.Data.duration)
setName(response.data.widgetName)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
}
@@ -177,15 +176,42 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
}
, [chartMeasurements, chartDuration, widgetName])
useEffect(() => {
}, [rotation])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return (
<Html position={[position[0], position[1], position[2]]}
<Html position={position}
scale={[0.5, 0.5, 0.5]}
zIndexRange={[1, 0]}
transform
sprite>
sprite
zIndexRange={[1,0]}
// center
// distanceFactor={10} // Adjusted for visual balance
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}>
<div className="productionCapacity-wrapper card"
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
style={{
width: '300px', // Original width
height: '300px', // Original height
transform: transformStyle.transform,
transformStyle: 'preserve-3d'
}}
>
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>

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

@@ -43,9 +43,10 @@ interface ReturnOfInvestmentProps {
id: string;
type: string;
position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@@ -203,13 +204,29 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
}
}
, [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite>
sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="returnOfInvestment card"
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

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

@@ -10,9 +10,10 @@ interface StateWorkingProps {
id: string;
type: string;
position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
@@ -45,7 +46,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onConte
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response;
console.log("responceeeeeeeeeee", response);
setDatas(responseData);
});
@@ -75,7 +76,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onConte
}
}
console.log("dataaaaa", datas);
useEffect(() => {
@@ -89,13 +90,28 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onConte
}
, [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite>
sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="stateWorking-wrapper card"
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

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

@@ -45,10 +45,11 @@ interface ThroughputProps {
id: string;
type: string;
position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {
const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@@ -183,13 +184,29 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMe
}
}
, [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite>
sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="throughput-wrapper"
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

136
app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
View File

@@ -13,7 +13,8 @@ import {
useFloorItems,
useSelectedActionSphere,
useSelectedPath,
useSimulationPaths,
useSimulationStates,
useSocketStore,
} from "../../../../store/store";
import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes";
@@ -24,44 +25,53 @@ import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAss
const ConveyorMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { selectedPath, setSelectedPath } = useSelectedPath();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const { simulationStates, setSimulationStates } = useSimulationStates();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const actionsContainerRef = useRef<HTMLDivElement>(null);
const triggersContainerRef = useRef<HTMLDivElement>(null);
const selectedPoint = useMemo(() => {
if (!selectedActionSphere) return null;
return simulationPaths
return simulationStates
.filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.point.uuid);
}, [selectedActionSphere, simulationPaths]);
.find((point) => point.uuid === selectedActionSphere.points.uuid);
}, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
if (!updatedPath) return;
// const email = localStorage.getItem("email");
// const organization = email ? email.split("@")[1].split(".")[0] : "";
// console.log('updatedPath: ', updatedPath);
// const a = await setEventApi(
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// updatedPath.points
// { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
// );
// console.log('a: ', a);
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
}
socket.emit('v2:model-asset:updateEventData', data);
}
const handleAddAction = () => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) => {
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Conveyor") {
return {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
if (point.uuid === selectedActionSphere.points.uuid) {
const actionIndex = point.actions.length;
const newAction = {
uuid: THREE.MathUtils.generateUUID(),
@@ -86,23 +96,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleDeleteAction = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.filter(
@@ -119,23 +129,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleActionSelect = (uuid: string, actionType: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -167,12 +177,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Update the selected item to reflect changes
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -181,7 +191,7 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((p) => p.uuid === selectedActionSphere.point.uuid)
.find((p) => p.uuid === selectedActionSphere.points.uuid)
?.actions.find((a) => a.uuid === uuid);
if (updatedAction) {
@@ -197,12 +207,12 @@ const ConveyorMechanics: React.FC = () => {
const handleMaterialSelect = (uuid: string, material: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -222,12 +232,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Update selected item if it's the current action
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -244,12 +254,12 @@ const ConveyorMechanics: React.FC = () => {
const handleDelayChange = (uuid: string, delay: number | string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -266,12 +276,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleSpawnIntervalChange = (
@@ -280,12 +290,12 @@ const ConveyorMechanics: React.FC = () => {
) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) =>
@@ -304,18 +314,18 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleSpeedChange = (speed: number | string) => {
if (!selectedPath) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
);
@@ -323,24 +333,24 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
};
const handleAddTrigger = () => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
if (point.uuid === selectedActionSphere.points.uuid) {
const triggerIndex = point.triggers.length;
const newTrigger = {
uuid: THREE.MathUtils.generateUUID(),
@@ -362,23 +372,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleDeleteTrigger = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.filter(
@@ -395,23 +405,23 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
};
const handleTriggerSelect = (uuid: string, triggerType: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
@@ -430,12 +440,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Ensure the selectedItem is updated immediately
const updatedTrigger = updatedPaths
@@ -451,12 +461,12 @@ const ConveyorMechanics: React.FC = () => {
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
actions: point.actions.map((action) => ({
@@ -474,12 +484,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
@@ -497,12 +507,12 @@ const ConveyorMechanics: React.FC = () => {
const handleTriggerToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) => ({
@@ -520,12 +530,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
@@ -542,12 +552,12 @@ const ConveyorMechanics: React.FC = () => {
const handleTriggerBufferTimeChange = (uuid: string, bufferTime: number) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
const updatedPaths = simulationStates.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
point.uuid === selectedActionSphere.points.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
@@ -566,12 +576,12 @@ const ConveyorMechanics: React.FC = () => {
(path): path is Types.ConveyorEventsSchema =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.point.uuid
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
updateBackend(updatedPath);
setSimulationPaths(updatedPaths);
setSimulationStates(updatedPaths);
// Immediately update selectedItem if it's the currently selected trigger
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {

97
app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
View File

@@ -1,56 +1,79 @@
import React, { useRef, useMemo } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes';
import PositionInput from "../customInput/PositionInputs";
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
const VehicleMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const { simulationStates, setSimulationStates } = useSimulationStates();
const { eyeDropMode, setEyeDropMode } = useEyeDropMode();
const { editingPoint, setEditingPoint } = useEditingPoint();
const { previewPosition, setPreviewPosition } = usePreviewPosition();
const { socket } = useSocketStore();
const propertiesContainerRef = useRef<HTMLDivElement>(null);
const { selectedPoint, connectedPointUuids } = useMemo(() => {
if (!selectedActionSphere?.point?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
const vehiclePaths = simulationPaths.filter(
const vehiclePaths = simulationStates.filter(
(path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
);
const point = vehiclePaths.find(
(path) => path.point.uuid === selectedActionSphere.point.uuid
)?.point;
const points = vehiclePaths.find(
(path) => path.points.uuid === selectedActionSphere.points.uuid
)?.points;
if (!point) return { selectedPoint: null, connectedPointUuids: [] };
if (!points) return { selectedPoint: null, connectedPointUuids: [] };
const connectedUuids: string[] = [];
if (point.connections?.targets) {
point.connections.targets.forEach(target => {
if (points.connections?.targets) {
points.connections.targets.forEach(target => {
connectedUuids.push(target.pointUUID);
});
}
return {
selectedPoint: point,
selectedPoint: points,
connectedPointUuids: connectedUuids
};
}, [selectedActionSphere, simulationPaths]);
}, [selectedActionSphere, simulationStates]);
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['point']['actions']>) => {
if (!selectedActionSphere?.point?.uuid) return;
const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => {
if (!updatedPath) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Vehicle", points: updatedPath.points }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Vehicle", points: updatedPath.points }
}
socket.emit('v2:model-asset:updateEventData', data);
}
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['points']['actions']>) => {
if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) {
return {
...path,
point: {
...path.point,
points: {
...path.points,
actions: {
...path.point.actions,
...path.points.actions,
...updatedAction
}
}
@@ -59,14 +82,15 @@ const VehicleMechanics: React.FC = () => {
return path;
});
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema =>
path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid
);
updateBackend(updatedPath);
const handleStartPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
const handleEndPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
setSimulationStates(updatedPaths);
}, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);
const handleHitCountChange = React.useCallback((hitCount: number) => {
handleActionUpdate({ hitCount });
@@ -77,14 +101,14 @@ const VehicleMechanics: React.FC = () => {
}, [handleActionUpdate]);
const handleSpeedChange = React.useCallback((speed: number) => {
if (!selectedActionSphere?.point?.uuid) return;
if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
const updatedPaths = simulationStates.map((path) => {
if (path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid) {
return {
...path,
point: {
...path.point,
points: {
...path.points,
speed: speed
}
};
@@ -92,8 +116,15 @@ const VehicleMechanics: React.FC = () => {
return path;
});
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema =>
path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid
);
updateBackend(updatedPath);
setSimulationStates(updatedPaths);
}, [selectedActionSphere?.points?.uuid, simulationStates, setSimulationStates]);
const handleStartEyeDropClick = () => {
setEditingPoint('start');

2
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
const { setPlaneValue, setGridValue, planeValue, gridValue } =
useTileDistance();
useEffect(() => {
// console.log(gridValue, planeValue, "values");
}, [gridValue, planeValue]);
const { socket } = useSocketStore();
const { limitDistance, setLimitDistance } = useLimitDistance();

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

@@ -45,7 +45,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

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

@@ -45,7 +45,7 @@ const FlotingWidgetInput = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

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

@@ -45,7 +45,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)

38
app/src/components/layout/sidebarRight/visualization/design/Design.tsx
View File

@@ -42,16 +42,19 @@ const Design = () => {
const [elementColor, setElementColor] = useState("#6f42c1");
const [showColorPicker, setShowColorPicker] = useState(false);
const [chartElements, setChartElements] = useState<ChartElement[]>([]);
const [selectedElementToStyle, setSelectedElementToStyle] = useState<string | null>(null);
const [selectedElementToStyle, setSelectedElementToStyle] = useState<
string | null
>(null);
const [nameInput, setNameInput] = useState("");
const chartRef = useRef<HTMLDivElement>(null);
const { selectedChartId, setSelectedChartId, widgets, setWidgets } = useWidgetStore();
const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
useWidgetStore();
// Initialize name input and extract elements when selectedChartId changes
useEffect(() => {
setNameInput(selectedChartId?.header || selectedChartId?.title || "");
if (!chartRef.current) return;
const timer = setTimeout(() => {
@@ -65,13 +68,16 @@ const Design = () => {
})
.map((el, index) => {
const tagName = el.tagName.toLowerCase();
const className = typeof el.className === "string" ? el.className : "";
const className =
typeof el.className === "string" ? el.className : "";
const textContent = el.textContent?.trim() || "";
let selector = tagName;
if (className && typeof className === "string") {
const classList = className.split(/\s+/).filter((c) => c.length > 0);
const classList = className
.split(/\s+/)
.filter((c) => c.length > 0);
if (classList.length > 0) {
selector += "." + classList.join(".");
}
@@ -126,7 +132,13 @@ const Design = () => {
useEffect(() => {
applyStyles();
}, [selectedFont, selectedSize, selectedWeight, elementColor, selectedElementToStyle]);
}, [
selectedFont,
selectedSize,
selectedWeight,
elementColor,
selectedElementToStyle,
]);
const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
if (!selectedChartId) return;
@@ -138,7 +150,9 @@ const Design = () => {
setSelectedChartId(updatedChartId);
const updatedWidgets = widgets.map((widget) =>
widget.id === selectedChartId.id ? { ...widget, ...updatedProperties } : widget
widget.id === selectedChartId.id
? { ...widget, ...updatedProperties }
: widget
);
setWidgets(updatedWidgets);
};
@@ -146,7 +160,7 @@ const Design = () => {
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newName = e.target.value;
setNameInput(newName);
if (selectedChartId?.title) {
handleUpdateWidget({ title: newName });
} else if (selectedChartId?.header) {
@@ -155,12 +169,12 @@ const Design = () => {
};
const defaultChartData = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: elementColor,
borderColor: "#ffffff",
backgroundColor: "#6f42c1",
borderColor: "#b392f0",
borderWidth: 1,
},
],
@@ -311,4 +325,4 @@ const Design = () => {
);
};
export default Design;
export default Design;

1
app/src/components/ui/Tools.tsx
View File

@@ -438,7 +438,6 @@ const Tools: React.FC = () => {
}`}
onClick={() => {
setIsPlaying(!isPlaying);
setActiveTool("play");
}}
>
<PlayIcon isActive={activeTool === "play"} />

101
app/src/components/ui/componets/DraggableWidget.tsx
View File

@@ -96,16 +96,16 @@ export const DraggableWidget = ({
let deleteWidget = {
zoneId: selectedZone.zoneId,
widgetID: widget.id,
organization: organization
}
console.log('deleteWidget: ', deleteWidget);
organization: organization,
};
console.log("deleteWidget: ", deleteWidget);
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget)
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
}
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
);
console.log('updatedWidgets: ', updatedWidgets);
console.log("updatedWidgets: ", updatedWidgets);
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: updatedWidgets,
@@ -168,10 +168,10 @@ export const DraggableWidget = ({
let duplicateWidget = {
organization: organization,
zoneId: selectedZone.zoneId,
widget: duplicatedWidget
}
widget: duplicatedWidget,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget)
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
}
setSelectedZone((prevZone: any) => ({
...prevZone,
@@ -239,29 +239,95 @@ export const DraggableWidget = ({
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
}
};
console.log("widget.type", widget.type);
// useClickOutside(chartWidget, () => {
// setSelectedChartId(null);
// });
const { isPlaying } = usePlayButtonStore();
console.log('isPanelHidden: ', isPanelHidden);
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
// Track canvas dimensions
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
console.log("selectedChartId: ", widget);
return (
<>
<style>
{`
:root {
--realTimeViz-container-width: ${canvasDimensions.width * 0.25}px;
--realTimeViz-container-height: ${canvasDimensions.height}px;
}
`}
</style>
<div
draggable
key={widget.id}
className={`chart-container ${(selectedChartId?.id === widget.id) && !isPlaying && "activeChart"
}`}
className={`chart-container ${
selectedChartId?.id === widget.id && !isPlaying && "activeChart"
}`}
onPointerDown={handlePointerDown}
onDragStart={handleDragStart}
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
// pointerEvents: isPanelHidden ? "none" : "auto",
// opacity: isPanelHidden ? "0.1" : "0",
// Apply styles based on panel position
width: ["top", "bottom"].includes(widget.panel)
? `calc(${canvasDimensions.width * 0.16}px - 2px)` // For top/bottom panels, set width
: undefined, // Don't set width if it's left or right
height: ["left", "right"].includes(widget.panel)
? `calc(${canvasDimensions.height * 0.3}px - 2px)` // For left/right panels, set height
: undefined, // Don't set height if it's top or bottom
}}
ref={chartWidget}
onClick={() => setSelectedChartId(widget)}
@@ -275,8 +341,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">
@@ -350,3 +417,5 @@ export const DraggableWidget = ({
</>
);
};
// in style if widget .panel is top or bottom set width if left or right set height

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

@@ -1,5 +1,5 @@
import { useThree } from "@react-three/fiber";
import React, { useState, useEffect, useRef } from "react";
import React, { useEffect, useRef } from "react";
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
import useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes";
@@ -13,9 +13,19 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { use3DWidget } from "../../../store/useDroppedObjectsStore";
import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import { useWidgetStore } from "../../../store/useWidgetStore";
import EditWidgetOption from "../menu/EditWidgetOption";
import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
import { update3dWidget, update3dWidgetRotation } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
type WidgetData = {
id: string;
type: string;
position: [number, number, number];
rotation?: [number, number, number];
tempPosition?: [number, number, number];
};
export default function Dropped3dWidgets() {
const { widgetSelect } = useAsset3dWidget();
@@ -23,22 +33,23 @@ export default function Dropped3dWidgets() {
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
const { widgetSubOption } = useWidgetSubOption();
const { selectedZone } = useSelectedZoneStore();
const { top, setTop } = useTopData()
const { left, setLeft } = useLeftData()
const { rightSelect, setRightSelect } = useRightSelected()
// ✅ Use Zustand Store instead of useState
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
const { top, setTop } = useTopData();
const { left, setLeft } = useLeftData();
const { rightSelect, setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
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))
// );
// const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
// const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
// const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
useEffect(() => {
if (activeModule !== "visualization") return;
@@ -48,16 +59,18 @@ export default function Dropped3dWidgets() {
const organization = email?.split("@")[1]?.split(".")[0];
async function get3dWidgetData() {
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result);
const formattedWidgets = result.map((widget: any) => ({
const formattedWidgets = result.map((widget: WidgetData) => ({
id: widget.id,
type: widget.type,
position: widget.position,
rotation: widget.rotation || [0, 0, 0],
}));
setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
}
@@ -91,28 +104,24 @@ export default function Dropped3dWidgets() {
if (intersects.length > 0) {
const { x, y, z } = intersects[0].point;
const newWidget = {
const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetSelect,
position: [x, y, z] as [number, number, number],
position: [x, y, z],
rotation: [0, 0, 0],
};
let add3dWidget = {
const add3dWidget = {
organization: organization,
widget: newWidget,
zoneId: selectedZone.zoneId
}
};
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);
//
// if (response.message === "Widget created successfully") {
addWidget(selectedZone.zoneId, newWidget);
// }
}
};
@@ -128,63 +137,101 @@ export default function Dropped3dWidgets() {
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);
async function duplicateWidget() {
const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
if (!widgetToDuplicate) return;
const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
widgetToDuplicate.position[0] + 0.5,
widgetToDuplicate.position[1],
widgetToDuplicate.position[2] + 0.5,
],
rotation: widgetToDuplicate.rotation || [0, 0, 0],
};
const adding3dWidget = {
organization: organization,
widget: newWidget,
zoneId: selectedZone.zoneId
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget);
}
// let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
// console.log('response: ', response);
addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null);
setRightClickSelected(null);
}
duplicateWidget()
}
if (rightSelect === "Delete") {
let deleteWidget = {
organization,
widgetId: rightClickSelected,
zoneId: selectedZone.zoneId
const deleteWidgetApi = async () => {
try {
const deleteWidget = {
organization,
id: rightClickSelected,
zoneId: selectedZone.zoneId,
};
console.log('deleteWidget: ', deleteWidget);
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
}
// Call the API to delete the widget
// const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
setZoneWidgetData(
selectedZone.zoneId,
activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
);
} catch (error) {
console.error("Error deleting widget:", error);
} finally {
setRightClickSelected(null);
setRightSelect(null);
}
};
// 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") {
deleteWidgetApi();
}
if (rightSelect === "Vertical Move") {
}
}, [rightSelect, rightClickSelected]);
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (selectedWidget) {
rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
}
}
};
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect();
@@ -194,72 +241,200 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [
const newPosition: [number, number, number] = [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z
]);
];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
}
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
planeIntersect.current.y,
selectedWidget.position[2]
]);
} else {
console.log("No Intersection with Vertical Plane");
}
}
if (rightSelect === "RotateX") {
const deltaX = event.clientX - mouseStartRef.current.x;
const rotationSpeed = 0.03;
const newRotation: [number, number, number] = [
rotationStartRef.current[0] + deltaX * rotationSpeed,
rotationStartRef.current[1],
rotationStartRef.current[2]
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
if (rightSelect === "RotateY") {
const deltaY = event.clientY - mouseStartRef.current.y;
const rotationSpeed = 0.03;
const newRotation: [number, number, number] = [
rotationStartRef.current[0],
rotationStartRef.current[1] + deltaY * rotationSpeed,
rotationStartRef.current[2]
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
if (rightSelect === "RotateZ") {
const deltaX = event.movementX;
const rotationSpeed = 0.03;
const currentRotation = selectedWidget.rotation || [0, 0, 0];
const newRotation: [number, number, number] = [
currentRotation[0],
currentRotation[1],
currentRotation[2] + deltaX * rotationSpeed
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
};
const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
);
if (!selectedZone) return;
if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
// Format values to 2 decimal places
const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2)));
if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") {
console.log(`${rightSelect} Completed - Full Position:`, formatValues(selectedWidget.position));
let lastPosition = formatValues(selectedWidget.position) as [number, number, number];
// (async () => {
// let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition);
// console.log('response: ', response);
// if (response) {
// console.log("Widget position updated in API:", response);
// }
// })();
let updatingPosition = {
organization: organization,
zoneId: selectedZone,
id: rightClickSelected,
position: lastPosition,
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingPosition);
}
setTimeout(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
}
};
else if (rightSelect.includes("Rotate")) {
const rotation = selectedWidget.rotation || [0, 0, 0];
console.log(`${rightSelect} Completed - Full Rotation:`, formatValues(rotation));
let lastRotation = formatValues(rotation) as [number, number, number];
// (async () => {
// let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation);
// console.log('response: ', response);
// if (response) {
// console.log("Widget position updated in API:", response);
// }
// })();
let updatingRotation = {
organization: organization,
zoneId: selectedZone,
id: rightClickSelected,
rotation: lastRotation,
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingRotation);
}
}
// Attach events to window instead of gl.domElement
// Reset selection
setTimeout(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
};
window.addEventListener("mousedown", handleMouseDown);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
return (
<>
{activeZoneWidgets.map(({ id, type, position }) => {
const handleRightClick = (event: React.MouseEvent) => {
{activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (event: React.MouseEvent, id: string) => {
event.preventDefault();
setRightClickSelected(id)
const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
setEditWidgetOptions(true);
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
};
switch (type) {
case "ui-Widget 1":
return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
return (
<ProductionCapacity
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 2":
return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
return (
<ReturnOfInvestment
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 3":
return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
return (
<StateWorking
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 4":
return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
return (
<Throughput
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
default:
return null;
}
})}
</>
);
}
}

55
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@@ -126,11 +126,12 @@ const DroppedObjects: React.FC = () => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteFloatingWidget = {
floatWidgetID: id,
organization: organization,
zoneId: zone.zoneId,
};
zoneId: zone.zoneId
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
@@ -143,7 +144,9 @@ const DroppedObjects: React.FC = () => {
// if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// }
} catch (error) {}
} catch (error) {
}
}
const handlePointerDown = (event: React.PointerEvent, index: number) => {
@@ -458,15 +461,15 @@ const DroppedObjects: React.FC = () => {
position: boundedPosition,
},
index: draggingIndex.index,
zoneId: zone.zoneId,
};
zoneId: zone.zoneId
}
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
}
// if (response.message === "Widget updated successfully") {
console.log("boundedPosition: ", boundedPosition);
console.log('boundedPosition: ', boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// }
@@ -509,43 +512,37 @@ const DroppedObjects: React.FC = () => {
{zone.objects.map((obj, index) => (
<div
key={`${zoneName}-${index}`}
className={`${obj.className} ${
selectedChartId?.id === obj.id && !isPlaying && "activeChart"
}`}
className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"}`}
ref={chartWidget}
style={{
position: "absolute",
top:
typeof obj.position.top === "number"
? `calc(${obj.position.top}px + ${
isPlaying && selectedZone.activeSides.includes("top")
? 90
: 0
}px)`
? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
? 90
: 0
}px)`
: "auto",
left:
typeof obj.position.left === "number"
? `calc(${obj.position.left}px + ${
isPlaying && selectedZone.activeSides.includes("left")
? 90
: 0
}px)`
? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
? 90
: 0
}px)`
: "auto",
right:
typeof obj.position.right === "number"
? `calc(${obj.position.right}px + ${
isPlaying && selectedZone.activeSides.includes("right")
? 90
: 0
}px)`
? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
? 90
: 0
}px)`
: "auto",
bottom:
typeof obj.position.bottom === "number"
? `calc(${obj.position.bottom}px + ${
isPlaying && selectedZone.activeSides.includes("bottom")
? 90
: 0
}px)`
? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
? 90
: 0
}px)`
: "auto",
}}
onPointerDown={(event) => {

99
app/src/components/ui/componets/Panel.tsx
View File

@@ -64,6 +64,59 @@ const Panel: React.FC<PanelProps> = ({
const { isPlaying } = usePlayButtonStore();
const { visualizationSocket } = useSocketStore();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
// Track canvas dimensions
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
const getPanelStyle = useMemo(
() => (side: Side) => {
const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -72,36 +125,50 @@ const Panel: React.FC<PanelProps> = ({
const rightActive = previousPanels.includes("right");
const topActive = previousPanels.includes("top");
const bottomActive = previousPanels.includes("bottom");
const panelSize = isPlaying ? 300 : 210;
// Dynamic panel sizes based on canvas width
const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
switch (side) {
case "top":
case "bottom":
return {
minWidth: "200px", // Minimum width constraint
width: `calc(100% - ${
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
(leftActive ? panelSizeWidth : 0) + (rightActive ? panelSizeWidth : 0)
}px)`,
height: `${panelSize - 2}px`,
left: leftActive ? `${panelSize}px` : "0",
right: rightActive ? `${panelSize}px` : "0",
minHeight: "200px", // Minimum height constraint
height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
left: leftActive ? `${panelSizeWidth}px` : "0",
right: rightActive ? `${panelSizeWidth}px` : "0",
[side]: "0",
};
case "left":
case "right":
return {
width: `${panelSize - 2}px`,
minWidth: "200px", // Minimum width constraint
width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
minHeight: "200px", // Minimum height constraint
height: `calc(100% - ${
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
(topActive ? panelSizeHeight : 0) + (bottomActive ? panelSizeHeight : 0)
}px)`,
top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "0",
top: topActive ? `${panelSizeHeight}px` : "0",
bottom: bottomActive ? `${panelSizeHeight}px` : "0",
[side]: "0",
};
default:
return {};
}
},
[selectedZone.panelOrder, isPlaying]
[
selectedZone.panelOrder,
isPlaying,
canvasDimensions.width,
canvasDimensions.height,
]
);
const handleDrop = (e: React.DragEvent, panel: Side) => {
@@ -153,10 +220,10 @@ const Panel: React.FC<PanelProps> = ({
let addWidget = {
organization: organization,
zoneId: selectedZone.zoneId,
widget: newWidget
}
widget: newWidget,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:add", addWidget)
visualizationSocket.emit("v2:viz-widget:add", addWidget);
}
setSelectedZone((prev) => ({
...prev,
@@ -165,7 +232,6 @@ const Panel: React.FC<PanelProps> = ({
try {
// let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
// if (response.message === "Widget created successfully") {
// setSelectedZone((prev) => ({
// ...prev,
@@ -175,7 +241,6 @@ const Panel: React.FC<PanelProps> = ({
} catch (error) {
console.error("Error adding widget:", error);
}
};
useEffect(() => {
@@ -281,3 +346,5 @@ const Panel: React.FC<PanelProps> = ({
};
export default Panel;
// canvasDimensions.width as percent

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

@@ -7,7 +7,6 @@ import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene";
import useModuleStore from "../../../store/useModuleStore";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import {
useAsset3dWidget,
@@ -24,7 +23,11 @@ import RenderOverlay from "../../templates/Overlay";
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
import DroppedObjects from "./DroppedFloatingWidgets";
import EditWidgetOption from "../menu/EditWidgetOption";
import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";
import {
useEditWidgetOptionsStore,
useRightClickSelected,
useRightSelected,
} from "../../../store/useZone3DWidgetStore";
type Side = "top" | "bottom" | "left" | "right";
@@ -58,8 +61,10 @@ const RealTimeVisulization: React.FC = () => {
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
const { rightSelect, setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } =
useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const [floatingWidgets, setFloatingWidgets] = useState<
@@ -69,6 +74,7 @@ const RealTimeVisulization: React.FC = () => {
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
useEffect(() => {
async function GetZoneData() {
const email = localStorage.getItem("email") || "";
@@ -96,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
{}
);
setZonesData(formattedData);
} catch (error) { }
} catch (error) {}
}
GetZoneData();
@@ -142,8 +148,8 @@ const RealTimeVisulization: React.FC = () => {
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
const newPosition = determinePosition(canvasRect, relativeX, relativeY)
console.log('newPosition: ', newPosition);
const newPosition = determinePosition(canvasRect, relativeX, relativeY);
console.log("newPosition: ", newPosition);
const newObject = {
...droppedData,
id: generateUniqueId(),
@@ -162,12 +168,12 @@ const RealTimeVisulization: React.FC = () => {
let addFloatingWidget = {
organization: organization,
widget: newObject,
zoneId: selectedZone.zoneId
}
console.log('newObject: ', newObject);
zoneId: selectedZone.zoneId,
};
console.log("newObject: ", newObject);
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget)
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
}
// let response = await addingFloatingWidgets(
@@ -194,76 +200,134 @@ const RealTimeVisulization: React.FC = () => {
],
},
}));
} catch (error) { }
} catch (error) {}
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector(
".editWidgetOptions-wrapper"
);
if (
editWidgetOptions &&
!editWidgetOptions.contains(event.target as Node)
) {
setRightClickSelected(null);
setRightSelect(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setRightClickSelected]);
// Add this useEffect hook to your component
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector(
".editWidgetOptions-wrapper"
);
if (
editWidgetOptions &&
!editWidgetOptions.contains(event.target as Node)
) {
setRightClickSelected(null);
setRightSelect(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setRightClickSelected]);
function handleRightClickSel(){}
return (
<div
ref={containerRef}
id="real-time-vis-canvas"
className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
}}
>
{openConfirmationPopup && (
<RenderOverlay>
<ConfirmationPopup
message={"Are you sure want to delete?"}
onConfirm={() => console.log("confirm")}
onCancel={() => setOpenConfirmationPopup(false)}
/>
</RenderOverlay>
)}
<>
<div
ref={containerRef}
id="real-time-vis-canvas"
className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
}}
>
<div className="realTime-viz-wrapper">
{openConfirmationPopup && (
<RenderOverlay>
<ConfirmationPopup
message={"Are you sure want to delete?"}
onConfirm={() => console.log("confirm")}
onCancel={() => setOpenConfirmationPopup(false)}
/>
</RenderOverlay>
)}
{/* <div
className="scene-container"
style={{
height: "100%",
width: "100%",
borderRadius:
isPlaying || activeModule !== "visualization" ? "" : "6px",
}}
onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()}
>
<Scene />
</div>
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
{activeModule === "visualization" && <SocketRealTimeViz />}
{activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]}
/>}
{activeModule === "visualization" && (
<>
<DisplayZone
zonesData={zonesData}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
/>
{!isPlaying && selectedZone?.zoneName !== "" && (
<AddButtons
hiddenPanels={hiddenPanels}
setHiddenPanels={setHiddenPanels}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
/>
isPlaying || activeModule !== "visualization" ? "" : "6px",
}}
onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()}
>
<Scene />
</div> */}
{activeModule === "visualization" && selectedZone.zoneName !== "" && (
<DroppedObjects />
)}
{activeModule === "visualization" && <SocketRealTimeViz />}
<Panel
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setZonesData={setZonesData}
/>
</>
)}
</div>
{activeModule === "visualization" &&
editWidgetOptions &&
rightClickSelected && (
<EditWidgetOption
options={[
"Duplicate",
"Vertical Move",
"Horizontal Move",
"RotateX",
"RotateY",
"Delete",
]}
/>
)}
{activeModule === "visualization" && (
<>
<DisplayZone
zonesData={zonesData}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
/>
{!isPlaying && selectedZone?.zoneName !== "" && (
<AddButtons
hiddenPanels={hiddenPanels}
setHiddenPanels={setHiddenPanels}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
/>
)}
<Panel
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setZonesData={setZonesData}
/>
</>
)}
</div>
</div>
</>
);
};

1
app/src/components/ui/list/List.tsx
View File

@@ -31,7 +31,6 @@ interface ListProps {
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items);
const { activeModule, setActiveModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setSubModule } = useSubModuleStore();

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

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

2
app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
View File

@@ -238,7 +238,7 @@ const BarGraphComponent = ({
};
useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[])
// Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
View File

@@ -51,7 +51,7 @@ const DoughnutGraphComponent = ({
};
useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[])
// Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
View File

@@ -51,7 +51,7 @@ const LineGraphComponent = ({
};
useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[])
// Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
View File

@@ -237,7 +237,7 @@ const PieChartComponent = ({
};
useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[])
// Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx
View File

@@ -51,7 +51,7 @@ const PolarAreaGraphComponent = ({
};
useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[])
// Memoize Theme Colors

22
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@@ -1,24 +1,36 @@
import React, { useState, useRef, useEffect } from "react";
import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useActiveTool } from "../../../store/store";
import {
useAnimationPlaySpeed,
usePauseButtonStore,
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
const SimulationPlayer: React.FC = () => {
const [speed, setSpeed] = useState<number>(1);
const { speed, setSpeed } = useAnimationPlaySpeed();
const [playSimulation, setPlaySimulation] = useState(false);
const { setIsPlaying } = usePlayButtonStore();
const sliderRef = useRef<HTMLDivElement>(null);
const isDragging = useRef(false);
const { setActiveTool } = useActiveTool();
const { isPaused, setIsPaused } = usePauseButtonStore();
const { isReset, setReset } = useResetButtonStore();
// Button functions
const handleReset = () => {
setReset(true);
setSpeed(1);
};
const handlePlayStop = () => {
setIsPaused(!isPaused);
setPlaySimulation(!playSimulation);
};
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
setActiveTool("cursor")
};
// Slider functions starts
@@ -27,7 +39,7 @@ const SimulationPlayer: React.FC = () => {
};
const calculateHandlePosition = () => {
return ((speed - 0.5) / (50 - 0.5)) * 100;
return ((speed - 0.5) / (8 - 0.5)) * 100;
};
const handleMouseDown = () => {
@@ -115,7 +127,7 @@ const SimulationPlayer: React.FC = () => {
<input
type="range"
min="0.5"
max="50"
max="8"
step="0.1"
value={speed}
onChange={handleSpeedChange}
@@ -123,7 +135,7 @@ const SimulationPlayer: React.FC = () => {
/>
</div>
</div>
<div className="max-value">50x</div>
<div className="max-value">8x</div>
</div>
</div>
</div>