refactor: Update SVG attributes for consistency and improve styling in analysis icons; remove unused imports in ProductionCapacity component; enhance simulation player UI with custom slider wrapper
This commit is contained in:
@@ -87,6 +87,7 @@ const SimulationPlayer: React.FC = () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
// Slider function ends
|
||||
|
||||
@@ -310,25 +311,29 @@ const SimulationPlayer: React.FC = () => {
|
||||
<div className="marker marker-70"></div>
|
||||
<div className="marker marker-80"></div>
|
||||
<div className="marker marker-90"></div>
|
||||
<div className="custom-slider">
|
||||
<button
|
||||
className={`slider-handle ${isDragging ? "dragging" : ""}`}
|
||||
style={{ left: `${calculateHandlePosition()}%` }}
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
{speed.toFixed(1)}x
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max={MAX_SPEED}
|
||||
step="0.1"
|
||||
value={speed}
|
||||
onChange={handleSpeedChange}
|
||||
className="slider-input"
|
||||
/>
|
||||
<div className="custom-slider-wrapper">
|
||||
<div className="custom-slider">
|
||||
<button
|
||||
className={`slider-handle ${
|
||||
isDragging ? "dragging" : ""
|
||||
}`}
|
||||
style={{ left: `${calculateHandlePosition()}%` }}
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
{speed.toFixed(1)}x
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max={MAX_SPEED}
|
||||
step="0.1"
|
||||
value={speed}
|
||||
onChange={handleSpeedChange}
|
||||
className="slider-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="speed-label max-value">4x</div>
|
||||
</div>
|
||||
<div className="speed-label max-value">4x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -369,6 +374,7 @@ const SimulationPlayer: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
{/* {subModule === "analysis" && ( */}
|
||||
{subModule === "analysis" && (
|
||||
<div className="analysis">
|
||||
<div className="analysis-wrapper">
|
||||
<ProductionCapacity />
|
||||
@@ -376,6 +382,7 @@ const SimulationPlayer: React.FC = () => {
|
||||
</div>
|
||||
<ROISummary />
|
||||
</div>
|
||||
)}
|
||||
{/* )} */}
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user