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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/src/components/icons/ContextMenuIcons.tsx
View File

@ -42,44 +42,46 @@ export function FlipXAxisIcon() {
} }
export function FlipYAxisIcon() { export function FlipYAxisIcon() {
<svg return (
width="12" <svg
height="12" width="12"
viewBox="0 0 12 12" height="12"
fill="none" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" fill="none"
> xmlns="http://www.w3.org/2000/svg"
<path >
d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z" <path
fill="var(--text-color)" d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
/> fill="var(--text-color)"
<path />
d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z" <path
stroke="var(--text-color)" d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
strokeWidth="0.75" stroke="var(--text-color)"
/> strokeWidth="0.75"
<path />
opacity="0.5" <path
d="M7 6H5" opacity="0.5"
stroke="var(--text-color)" d="M7 6H5"
strokeWidth="0.75" stroke="var(--text-color)"
strokeLinecap="round" strokeWidth="0.75"
/> strokeLinecap="round"
<path />
opacity="0.5" <path
d="M3 6H1" opacity="0.5"
stroke="var(--text-color)" d="M3 6H1"
strokeWidth="0.75" stroke="var(--text-color)"
strokeLinecap="round" strokeWidth="0.75"
/> strokeLinecap="round"
<path />
opacity="0.5" <path
d="M11 6H9" opacity="0.5"
stroke="var(--text-color)" d="M11 6H9"
strokeWidth="0.75" stroke="var(--text-color)"
strokeLinecap="round" strokeWidth="0.75"
/> strokeLinecap="round"
</svg>; />
</svg>
);
} }
export function FlipZAxisIcon() { export function FlipZAxisIcon() {
return ( return (

14
app/src/components/icons/ExportCommonIcons.tsx
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

12
app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
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>

2
app/src/components/layout/Dashboard/SidePannel.tsx
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">

8
app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
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>

4
app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
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",

2
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
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) => {

31
app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
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={"Today’s Earnings"} header={"Today’s Earnings"}

8
app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
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>

24
app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
View File

@ -3,19 +3,17 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
const DespawnAction: React.FC = () => { const DespawnAction: React.FC = () => {
return ( return (
<> <InputWithDropDown
<InputWithDropDown label="Delay"
label="Delay" value=""
value="" min={0}
min={0} step={0.1}
step={0.1} max={10}
max={10} defaultValue="0"
defaultValue="0" activeOption="s"
activeOption="s" onClick={() => {}}
onClick={() => {}} onChange={(value) => console.log(value)}
onChange={(value) => console.log(value)} />
/>
</>
); );
}; };

6
app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
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;

10
app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
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}

6
app/src/components/ui/list/List.tsx
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>

45
app/src/modules/scene/scene.tsx
View File

@ -9,28 +9,35 @@ 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: "backward", keys: ["ArrowDown", "s", "S"] }, { name: "forward", keys: ["ArrowUp", "w", "W"] },
{ name: "left", keys: ["ArrowLeft", "a", "A"] }, { name: "backward", keys: ["ArrowDown", "s", "S"] },
{ name: "right", keys: ["ArrowRight", "d", "D"] },], { name: "left", keys: ["ArrowLeft", "a", "A"] },
[]); { 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 /> <Builder />
<Builder /> <Simulation />
<Simulation /> <Visualization />
</Canvas>
<Visualization /> </KeyboardControls>
);
</Canvas>
</KeyboardControls>
);
} }

34
app/src/modules/visualization/RealTimeVisulization.tsx
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()}
> >

3
app/src/modules/visualization/visualization.tsx
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 (
<> <>

7
app/src/styles/base/reset.scss
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;
}

3
app/src/styles/layout/sidebar.scss
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);
} }