feat: Refactor icon components and update button elements for improved accessibility and consistency

This commit is contained in:
Vishnu 2025-04-24 14:05:55 +05:30
parent e43bfb6e98
commit d7f1c5224d
18 changed files with 125 additions and 172 deletions

View File

@ -42,6 +42,7 @@ export function FlipXAxisIcon() {
} }
export function FlipYAxisIcon() { export function FlipYAxisIcon() {
return (
<svg <svg
width="12" width="12"
height="12" height="12"
@ -79,7 +80,8 @@ export function FlipYAxisIcon() {
strokeWidth="0.75" strokeWidth="0.75"
strokeLinecap="round" strokeLinecap="round"
/> />
</svg>; </svg>
);
} }
export function FlipZAxisIcon() { export function FlipZAxisIcon() {
return ( return (

View File

@ -168,20 +168,6 @@ export function AddIcon() {
); );
} }
export function RmoveIcon() {
return (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
</svg>
);
}
export function CloseIcon() { export function CloseIcon() {
return ( return (
<svg <svg

View File

@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
<path <path
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111" d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
stroke="white" stroke="white"
stroke-width="3" strokeWidth="3"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
<path <path
d="M10.662 118.326L1.59439 111.524L9.47334 103.374" d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
stroke="white" stroke="white"
stroke-width="3" strokeWidth="3"
stroke-linecap="round" strokeLinecap="round"
stroke-linejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
</div> </div>

View File

@ -11,7 +11,7 @@ import {
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons"; import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
const SidePannel: React.FC = () => { const SidePannel: React.FC = () => {
const userName = localStorage.getItem("userName") || "Anonymous"; const userName = localStorage.getItem("userName") ?? "Anonymous";
return ( return (
<div className="side-pannel-container"> <div className="side-pannel-container">
<div className="side-pannel-header"> <div className="side-pannel-header">

View File

@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
<div className="confirmation-modal"> <div className="confirmation-modal">
<p className="message">{message}</p> <p className="message">{message}</p>
<div className="buttton-wrapper"> <div className="buttton-wrapper">
<div className="confirmation-button" onClick={onConfirm}> <button className="confirmation-button" onClick={onConfirm}>
OK OK
</div> </button>
<div className="confirmation-button" onClick={onCancel}> <button className="confirmation-button" onClick={onCancel}>
Cancel Cancel
</div> </button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,5 @@
import React, { useEffect, useRef, useMemo } from "react"; import React, { useEffect, useRef, useMemo } from "react";
import { Chart } from "chart.js/auto"; import { Chart } from "chart.js/auto";
// import { useThemeStore } from "../../../../../store/useThemeStore";
// Define Props Interface // Define Props Interface
interface ChartComponentProps { interface ChartComponentProps {
@ -29,7 +28,6 @@ const ChartComponent = ({
data: propsData, data: propsData,
}: ChartComponentProps) => { }: ChartComponentProps) => {
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
// const { themeColor } = useThemeStore();
// Memoize Theme Colors to Prevent Unnecessary Recalculations // Memoize Theme Colors to Prevent Unnecessary Recalculations
// const buttonActionColor = useMemo( // const buttonActionColor = useMemo(
@ -66,7 +64,7 @@ const ChartComponent = ({
// Memoize Chart Font Style // Memoize Chart Font Style
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", family: fontFamily ?? "Arial",
size: fontSizeValue, size: fontSizeValue,
weight: fontWeightValue, weight: fontWeightValue,
color: "#2B3344", color: "#2B3344",

View File

@ -1,4 +1,3 @@
import { useState } from "react";
import ToggleHeader from "../../../../ui/inputs/ToggleHeader"; import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
import Widgets2D from "./Widgets2D"; import Widgets2D from "./Widgets2D";
import Widgets3D from "./Widgets3D"; import Widgets3D from "./Widgets3D";
@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
import { useWidgetSubOption } from "../../../../../store/store"; import { useWidgetSubOption } from "../../../../../store/store";
const Widgets = () => { const Widgets = () => {
const [activeOption, setActiveOption] = useState("2D");
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const handleToggleClick = (option: string) => { const handleToggleClick = (option: string) => {

View File

@ -8,42 +8,11 @@ import {
import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard"; import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput"; import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency"; import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";
interface Widget {
id: string;
name: string;
}
const WidgetsFloating = () => { const WidgetsFloating = () => {
// const [widgets, setWidgets] = useState<Widget[]>([
// { id: "1", name: "Working State Widget" },
// { id: "2", name: "Floating Widget 2" },
// { id: "3", name: "Floating Widget 3" },
// { id: "4", name: "Floating Widget 4" },
// ]);
// Function to handle drag start
const handleDragStart = (
e: React.DragEvent<HTMLDivElement>,
widget: Widget
) => {
e.dataTransfer.setData("application/json", JSON.stringify(widget));
};
return ( return (
<div className="floatingWidgets-wrapper widgets-wrapper"> <div className="floatingWidgets-wrapper widgets-wrapper">
{/* {widgets.map((widget) => (
<div
key={widget.id}
className="floating"
draggable
onDragStart={(e) => handleDragStart(e, widget)}
>
{widget.name}
</div>
))} */}
{/* Floating 1 */} {/* Floating 1 */}
<SimpleCard <SimpleCard
header={"Todays Earnings"} header={"Todays Earnings"}

View File

@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
const actionsContainerRef = useRef<HTMLDivElement>(null); const actionsContainerRef = useRef<HTMLDivElement>(null);
const [activeOption, setActiveOption] = useState("default"); const [activeOption, setActiveOption] = useState("default");
const [dummyactiveOption, setTypeOption] = useState("default");
const getAvailableActions = () => { const getAvailableActions = () => {
if (assetType === "conveyor") { if (assetType === "conveyor") {
@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
<div className="actions"> <div className="actions">
<div className="header"> <div className="header">
<div className="header-value">Actions</div> <div className="header-value">Actions</div>
<div className="add-button" onClick={() => {}}> <button className="add-button" onClick={() => {}}>
<AddIcon /> Add <AddIcon /> Add
</div> </button>
</div> </div>
<div <div
className="lists-main-container" className="lists-main-container"
@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
{activeOption === "swap" && <SwapAction />} {/* done */} {activeOption === "swap" && <SwapAction />} {/* done */}
{activeOption === "despawn" && <DespawnAction />} {/* done */} {activeOption === "despawn" && <DespawnAction />} {/* done */}
{activeOption === "travel" && <TravelAction />} {/* done */} {activeOption === "travel" && <TravelAction />} {/* done */}
{activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */} {activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
{/* done */}
{activeOption === "process" && <ProcessAction />} {/* done */} {activeOption === "process" && <ProcessAction />} {/* done */}
{activeOption === "store" && <StorageAction />} {/* done */} {activeOption === "store" && <StorageAction />} {/* done */}
</div> </div>

View File

@ -3,7 +3,6 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
const DespawnAction: React.FC = () => { const DespawnAction: React.FC = () => {
return ( return (
<>
<InputWithDropDown <InputWithDropDown
label="Delay" label="Delay"
value="" value=""
@ -15,7 +14,6 @@ const DespawnAction: React.FC = () => {
onClick={() => {}} onClick={() => {}}
onChange={(value) => console.log(value)} onChange={(value) => console.log(value)}
/> />
</>
); );
}; };

View File

@ -2,11 +2,7 @@ import React from "react";
import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload"; import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
const SwapAction: React.FC = () => { const SwapAction: React.FC = () => {
return ( return <PreviewSelectionWithUpload />;
<>
<PreviewSelectionWithUpload />
</>
);
}; };
export default SwapAction; export default SwapAction;

View File

@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
<div className="trigger-wrapper"> <div className="trigger-wrapper">
<div className="header"> <div className="header">
<div className="title">Trigger</div> <div className="title">Trigger</div>
<div <button
className="add-button" className="add-button"
onClick={addTrigger} onClick={addTrigger}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
<AddIcon /> Add <AddIcon /> Add
</div> </button>
</div> </div>
<div className="trigger-list"> <div className="trigger-list">
{/* Map over triggers and render them */} {/* Map over triggers and render them */}
{triggers.map((trigger, index) => ( {triggers.map((trigger, index) => (
<div key={index} className="trigger-item"> <div key={index.toFixed()} className="trigger-item">
<div className="trigger-name"> <div className="trigger-name">
{trigger} {trigger}
<div <button
className="remove-button" className="remove-button"
onClick={() => removeTrigger(index)} onClick={() => removeTrigger(index)}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
<RemoveIcon /> <RemoveIcon />
</div> </button>
</div> </div>
<LabledDropdown <LabledDropdown
defaultOption={activeOption} defaultOption={activeOption}

View File

@ -10,7 +10,7 @@ import {
ArrowIcon, ArrowIcon,
EyeIcon, EyeIcon,
LockIcon, LockIcon,
RmoveIcon, RemoveIcon,
} from "../../icons/ExportCommonIcons"; } from "../../icons/ExportCommonIcons";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store"; import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
</div> </div>
{remove && ( {remove && (
<div className="remove option"> <div className="remove option">
<RmoveIcon /> <RemoveIcon />
</div> </div>
)} )}
{item.assets && item.assets.length > 0 && ( {item.assets && item.assets.length > 0 && (
@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
</div> </div>
{remove && ( {remove && (
<div className="remove option"> <div className="remove option">
<RmoveIcon /> <RemoveIcon />
</div> </div>
)} )}
</div> </div>

View File

@ -9,17 +9,25 @@ import Simulation from "../simulation/simulation";
import Collaboration from "../collaboration/collaboration"; import Collaboration from "../collaboration/collaboration";
export default function Scene() { export default function Scene() {
const map = useMemo(() => [ const map = useMemo(
() => [
{ name: "forward", keys: ["ArrowUp", "w", "W"] }, { name: "forward", keys: ["ArrowUp", "w", "W"] },
{ name: "backward", keys: ["ArrowDown", "s", "S"] }, { name: "backward", keys: ["ArrowDown", "s", "S"] },
{ name: "left", keys: ["ArrowLeft", "a", "A"] }, { name: "left", keys: ["ArrowLeft", "a", "A"] },
{ name: "right", keys: ["ArrowRight", "d", "D"] },], { name: "right", keys: ["ArrowRight", "d", "D"] },
[]); ],
[]
);
return ( return (
<KeyboardControls map={map}> <KeyboardControls map={map}>
<Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}> <Canvas
eventPrefix="client"
gl={{ powerPreference: "high-performance", antialias: true }}
onContextMenu={(e) => {
e.preventDefault();
}}
>
<Setup /> <Setup />
<Collaboration /> <Collaboration />
@ -29,7 +37,6 @@ export default function Scene() {
<Simulation /> <Simulation />
<Visualization /> <Visualization />
</Canvas> </Canvas>
</KeyboardControls> </KeyboardControls>
); );

View File

@ -12,15 +12,12 @@ import {
useFloatingWidget, useFloatingWidget,
} from "../../store/visualization/useDroppedObjectsStore"; } from "../../store/visualization/useDroppedObjectsStore";
import { import {
useAsset3dWidget,
useSocketStore, useSocketStore,
useWidgetSubOption, useWidgetSubOption,
useZones,
} from "../../store/store"; } from "../../store/store";
import { getZone2dData } from "../../services/visulization/zone/getZoneData"; import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId"; import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition"; import { determinePosition } from "./functions/determinePosition";
import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev"; import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
import RenderOverlay from "../../components/templates/Overlay"; import RenderOverlay from "../../components/templates/Overlay";
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup"; import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { rightSelect, setRightSelect } = useRightSelected(); const { setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = const { editWidgetOptions } = useEditWidgetOptionsStore();
useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected(); const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
// const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({}); const { widgetSubOption } = useWidgetSubOption();
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore(); const { setSelectedChartId } = useWidgetStore();
@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
try { try {
const response = await getZone2dData(organization); const response = await getZone2dData(organization);
// console.log('response: ', response);
if (!Array.isArray(response)) { if (!Array.isArray(response)) {
return; return;
@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
{} {}
); );
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) {} } catch (error) {
console.log(error);
}
} }
GetZoneData(); GetZoneData();
@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
}); });
}, [selectedZone]); }, [selectedZone]);
// useEffect(() => {}, [floatingWidgets]);
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => { const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const data = event.dataTransfer.getData("text/plain"); const data = event.dataTransfer.getData("text/plain");
@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
const relativeY = event.clientY - rect.top; const relativeY = event.clientY - rect.top;
// Widget dimensions // Widget dimensions
const widgetWidth = droppedData.width || 125; const widgetWidth = droppedData.width ?? 125;
const widgetHeight = droppedData.height || 100; const widgetHeight = droppedData.height ?? 100;
// Center the widget at cursor // Center the widget at cursor
const centerOffsetX = widgetWidth / 2; const centerOffsetX = widgetWidth / 2;
@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
return () => { return () => {
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
}; };
}, [setRightClickSelected]); }, [setRightClickSelected, setRightSelect]);
const [canvasDimensions, setCanvasDimensions] = useState({ const [canvasDimensions, setCanvasDimensions] = useState({
width: 0, width: 0,
@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
borderRadius: borderRadius:
isPlaying || activeModule !== "visualization" ? "" : "6px", isPlaying || activeModule !== "visualization" ? "" : "6px",
}} }}
role="application"
onDrop={(event) => handleDrop(event)} onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()} onDragOver={(event) => event.preventDefault()}
> >

View File

@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
import ZoneCentreTarget from './zone/zoneCameraTarget' import ZoneCentreTarget from './zone/zoneCameraTarget'
import ZoneAssets from './zone/zoneAssets' import ZoneAssets from './zone/zoneAssets'
import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents' import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'
const Visualization = () => { const Visualization:React.FC = () => {
return ( return (
<> <>

View File

@ -12,3 +12,10 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
input[type="password"]::-webkit-inner-spin-button { /* Just in case */ input[type="password"]::-webkit-inner-spin-button { /* Just in case */
display: none; display: none;
} }
button{
border: none;
outline: none;
background: none;
cursor: pointer;
}

View File

@ -675,7 +675,8 @@
color: var(--primary-color); color: var(--primary-color);
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
cursor: pointer; cursor: pointer;
outline: none;
border: none;
path { path {
stroke: var(--primary-color); stroke: var(--primary-color);
} }