refactor: improve imports and add InputToggle for view labels in SimulationPlayer component

This commit is contained in:
Nalvazhuthi 2025-06-05 14:38:51 +05:30
parent 3916f6270c
commit 8390302c5f
1 changed files with 26 additions and 9 deletions

View File

@ -1,6 +1,10 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons"; import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
import { useActiveTool, useProcessBar } from "../../../store/builder/store"; import {
useActiveTool,
useProcessBar,
useViewSceneStore,
} from "../../../store/builder/store";
import { import {
useAnimationPlaySpeed, useAnimationPlaySpeed,
usePauseButtonStore, usePauseButtonStore,
@ -19,12 +23,15 @@ import {
StartIcon, StartIcon,
} from "../../icons/ExportCommonIcons"; } from "../../icons/ExportCommonIcons";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
import { useSubModuleStore } from "../../../store/useModuleStore"; import useModuleStore, {
useSubModuleStore,
} from "../../../store/useModuleStore";
import ProductionCapacity from "../analysis/ThroughputSummary"; import ProductionCapacity from "../analysis/ThroughputSummary";
import ThroughputSummary from "../analysis/ProductionCapacity"; import ThroughputSummary from "../analysis/ProductionCapacity";
import ROISummary from "../analysis/ROISummary"; import ROISummary from "../analysis/ROISummary";
import { usePlayerStore } from "../../../store/useUIToggleStore"; import { usePlayerStore } from "../../../store/useUIToggleStore";
import { useComparisonProduct } from "../../../store/simulation/useSimulationStore"; import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
import InputToggle from "../inputs/InputToggle";
const SimulationPlayer: React.FC = () => { const SimulationPlayer: React.FC = () => {
const MAX_SPEED = 4; // Maximum speed const MAX_SPEED = 4; // Maximum speed
@ -41,7 +48,10 @@ const SimulationPlayer: React.FC = () => {
const { isReset, setReset } = useResetButtonStore(); const { isReset, setReset } = useResetButtonStore();
const { subModule } = useSubModuleStore(); const { subModule } = useSubModuleStore();
const { clearComparisonProduct } = useComparisonProduct(); const { clearComparisonProduct } = useComparisonProduct();
const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
const { isPlaying } = usePlayButtonStore();
const { activeModule } = useModuleStore();
useEffect(() => { useEffect(() => {
if (isReset) { if (isReset) {
setTimeout(() => { setTimeout(() => {
@ -113,8 +123,7 @@ const SimulationPlayer: React.FC = () => {
const monthlyROI = 50; const monthlyROI = 50;
const { processBar } = useProcessBar(); const { processBar } = useProcessBar();
useEffect(() => { useEffect(() => { }, [processBar]);
}, [processBar])
const intervals = [50, 20, 30, 40, 50, 60]; // in minutes const intervals = [50, 20, 30, 40, 50, 60]; // in minutes
const totalSegments = intervals.length; const totalSegments = intervals.length;
@ -154,6 +163,16 @@ const SimulationPlayer: React.FC = () => {
return ( return (
<> <>
{isPlaying && activeModule === "simulation" && (
<div className="label-toogler">
<InputToggle
value={viewSceneLabels}
inputKey="1"
label="Enable View Labels"
onClick={() => setViewSceneLabels(!viewSceneLabels)}
/>
</div>
)}
<div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}> <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
<div className={`simulation-player-container ${expand ? "open" : ""}`}> <div className={`simulation-player-container ${expand ? "open" : ""}`}>
<div className="controls-container"> <div className="controls-container">
@ -209,9 +228,7 @@ const SimulationPlayer: React.FC = () => {
{!hidePlayer && subModule !== "analysis" && ( {!hidePlayer && subModule !== "analysis" && (
<div className="header"> <div className="header">
<InfoIcon /> <InfoIcon />
{isPaused {isPaused ? "Paused - system idle." : "Running simulation..."}
? "Paused - system idle."
: "Running simulation..."}
</div> </div>
)} )}
<div className="controls-wrapper"> <div className="controls-wrapper">