visualization functions seperated

This commit is contained in:
2025-03-20 09:36:10 +05:30
parent 299b3ed381
commit b9fa37cef8
21 changed files with 564 additions and 701 deletions

View File

@@ -1,5 +1,9 @@
import React from "react";
import { CleanPannel, EyeIcon, LockIcon } from "../../icons/RealTimeVisulationIcons";
import {
CleanPannel,
EyeIcon,
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -137,47 +141,42 @@ const AddButtons: React.FC<ButtonsProps> = ({
</button>
{/* Extra Buttons */}
<div
className="extra-Bs"
style={{
display: selectedZone.activeSides.includes(side)
? "flex"
: "none",
}}
>
{/* Hide Panel */}
<div
className="icon"
title="Hide Panel"
onClick={() => toggleVisibility(side)}
>
<EyeIcon />
</div>
{selectedZone.activeSides.includes(side) && (
<div className="extra-Bs">
{/* Hide Panel */}
<div
className="icon"
title="Hide Panel"
onClick={() => toggleVisibility(side)}
>
<EyeIcon />
</div>
{/* Clean Panel */}
<div
className="icon"
title="Clean Panel"
onClick={() => cleanPanel(side)}
>
<CleanPannel />
</div>
{/* Clean Panel */}
<div
className="icon"
title="Clean Panel"
onClick={() => cleanPanel(side)}
>
<CleanPannel />
</div>
{/* Lock/Unlock Panel */}
<div
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
: "Lock Panel"
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon />
{/* Lock/Unlock Panel */}
<div
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
: "Lock Panel"
}
onClick={() => toggleLockPanel(side)}
>
<LockIcon />
</div>
</div>
</div>
)}
</div>
))}
</div>