feat: Refactor icon components and update button elements for improved accessibility and consistency
This commit is contained in:
parent
e43bfb6e98
commit
d7f1c5224d
|
|
@ -42,44 +42,46 @@ export function FlipXAxisIcon() {
|
|||
}
|
||||
|
||||
export function FlipYAxisIcon() {
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
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"
|
||||
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"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6H5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6H1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M11 6H9"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>;
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
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"
|
||||
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"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6H5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6H1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M11 6H9"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
export function FlipZAxisIcon() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
return (
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
|
|||
<path
|
||||
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
|
||||
stroke="white"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
|
||||
stroke="white"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
|
||||
|
||||
const SidePannel: React.FC = () => {
|
||||
const userName = localStorage.getItem("userName") || "Anonymous";
|
||||
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
||||
return (
|
||||
<div className="side-pannel-container">
|
||||
<div className="side-pannel-header">
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
|
|||
<div className="confirmation-modal">
|
||||
<p className="message">{message}</p>
|
||||
<div className="buttton-wrapper">
|
||||
<div className="confirmation-button" onClick={onConfirm}>
|
||||
<button className="confirmation-button" onClick={onConfirm}>
|
||||
OK
|
||||
</div>
|
||||
<div className="confirmation-button" onClick={onCancel}>
|
||||
</button>
|
||||
<button className="confirmation-button" onClick={onCancel}>
|
||||
Cancel
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useEffect, useRef, useMemo } from "react";
|
||||
import { Chart } from "chart.js/auto";
|
||||
// import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
|
||||
// Define Props Interface
|
||||
interface ChartComponentProps {
|
||||
|
|
@ -29,7 +28,6 @@ const ChartComponent = ({
|
|||
data: propsData,
|
||||
}: ChartComponentProps) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
// const { themeColor } = useThemeStore();
|
||||
|
||||
// Memoize Theme Colors to Prevent Unnecessary Recalculations
|
||||
// const buttonActionColor = useMemo(
|
||||
|
|
@ -66,7 +64,7 @@ const ChartComponent = ({
|
|||
// Memoize Chart Font Style
|
||||
const chartFontStyle = useMemo(
|
||||
() => ({
|
||||
family: fontFamily || "Arial",
|
||||
family: fontFamily ?? "Arial",
|
||||
size: fontSizeValue,
|
||||
weight: fontWeightValue,
|
||||
color: "#2B3344",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { useState } from "react";
|
||||
import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
|
||||
import Widgets2D from "./Widgets2D";
|
||||
import Widgets3D from "./Widgets3D";
|
||||
|
|
@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
|
|||
import { useWidgetSubOption } from "../../../../../store/store";
|
||||
|
||||
const Widgets = () => {
|
||||
const [activeOption, setActiveOption] = useState("2D");
|
||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||
|
||||
const handleToggleClick = (option: string) => {
|
||||
|
|
|
|||
|
|
@ -8,42 +8,11 @@ import {
|
|||
import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
|
||||
|
||||
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";
|
||||
|
||||
interface Widget {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
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 (
|
||||
<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 */}
|
||||
<SimpleCard
|
||||
header={"Today’s Earnings"}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
|||
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [activeOption, setActiveOption] = useState("default");
|
||||
const [dummyactiveOption, setTypeOption] = useState("default");
|
||||
|
||||
const getAvailableActions = () => {
|
||||
if (assetType === "conveyor") {
|
||||
|
|
@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
|||
<div className="actions">
|
||||
<div className="header">
|
||||
<div className="header-value">Actions</div>
|
||||
<div className="add-button" onClick={() => {}}>
|
||||
<button className="add-button" onClick={() => {}}>
|
||||
<AddIcon /> Add
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="lists-main-container"
|
||||
|
|
@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
|
|||
{activeOption === "swap" && <SwapAction />} {/* done */}
|
||||
{activeOption === "despawn" && <DespawnAction />} {/* done */}
|
||||
{activeOption === "travel" && <TravelAction />} {/* done */}
|
||||
{activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
|
||||
{activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
|
||||
{/* done */}
|
||||
{activeOption === "process" && <ProcessAction />} {/* done */}
|
||||
{activeOption === "store" && <StorageAction />} {/* done */}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,19 +3,17 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
|
|||
|
||||
const DespawnAction: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Delay"
|
||||
value=""
|
||||
min={0}
|
||||
step={0.1}
|
||||
max={10}
|
||||
defaultValue="0"
|
||||
activeOption="s"
|
||||
onClick={() => {}}
|
||||
onChange={(value) => console.log(value)}
|
||||
/>
|
||||
</>
|
||||
<InputWithDropDown
|
||||
label="Delay"
|
||||
value=""
|
||||
min={0}
|
||||
step={0.1}
|
||||
max={10}
|
||||
defaultValue="0"
|
||||
activeOption="s"
|
||||
onClick={() => {}}
|
||||
onChange={(value) => console.log(value)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,7 @@ import React from "react";
|
|||
import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
|
||||
|
||||
const SwapAction: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<PreviewSelectionWithUpload />
|
||||
</>
|
||||
);
|
||||
return <PreviewSelectionWithUpload />;
|
||||
};
|
||||
|
||||
export default SwapAction;
|
||||
|
|
|
|||
|
|
@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
|
|||
<div className="trigger-wrapper">
|
||||
<div className="header">
|
||||
<div className="title">Trigger</div>
|
||||
<div
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={addTrigger}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<AddIcon /> Add
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="trigger-list">
|
||||
{/* Map over triggers and render them */}
|
||||
{triggers.map((trigger, index) => (
|
||||
<div key={index} className="trigger-item">
|
||||
<div key={index.toFixed()} className="trigger-item">
|
||||
<div className="trigger-name">
|
||||
{trigger}
|
||||
<div
|
||||
<button
|
||||
className="remove-button"
|
||||
onClick={() => removeTrigger(index)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<LabledDropdown
|
||||
defaultOption={activeOption}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {
|
|||
ArrowIcon,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
RmoveIcon,
|
||||
RemoveIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
||||
|
|
@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
</div>
|
||||
{remove && (
|
||||
<div className="remove option">
|
||||
<RmoveIcon />
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
{item.assets && item.assets.length > 0 && (
|
||||
|
|
@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
</div>
|
||||
{remove && (
|
||||
<div className="remove option">
|
||||
<RmoveIcon />
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,35 @@ import Simulation from "../simulation/simulation";
|
|||
import Collaboration from "../collaboration/collaboration";
|
||||
|
||||
export default function Scene() {
|
||||
const map = useMemo(() => [
|
||||
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
|
||||
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
|
||||
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
|
||||
{ name: "right", keys: ["ArrowRight", "d", "D"] },],
|
||||
[]);
|
||||
const map = useMemo(
|
||||
() => [
|
||||
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
|
||||
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
|
||||
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
|
||||
{ name: "right", keys: ["ArrowRight", "d", "D"] },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<KeyboardControls map={map}>
|
||||
<Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}>
|
||||
return (
|
||||
<KeyboardControls map={map}>
|
||||
<Canvas
|
||||
eventPrefix="client"
|
||||
gl={{ powerPreference: "high-performance", antialias: true }}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Setup />
|
||||
|
||||
<Setup />
|
||||
<Collaboration />
|
||||
|
||||
<Collaboration />
|
||||
<Builder />
|
||||
|
||||
<Builder />
|
||||
<Simulation />
|
||||
|
||||
<Simulation />
|
||||
|
||||
<Visualization />
|
||||
|
||||
</Canvas>
|
||||
</KeyboardControls>
|
||||
);
|
||||
<Visualization />
|
||||
</Canvas>
|
||||
</KeyboardControls>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,15 +12,12 @@ import {
|
|||
useFloatingWidget,
|
||||
} from "../../store/visualization/useDroppedObjectsStore";
|
||||
import {
|
||||
useAsset3dWidget,
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
useZones,
|
||||
} from "../../store/store";
|
||||
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
|
||||
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
|
||||
import RenderOverlay from "../../components/templates/Overlay";
|
||||
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
|
||||
|
|
@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
|
||||
const [zonesData, setZonesData] = useState<FormattedZoneData>({});
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
|
||||
const { rightSelect, setRightSelect } = useRightSelected();
|
||||
const { editWidgetOptions, setEditWidgetOptions } =
|
||||
useEditWidgetOptionsStore();
|
||||
const { setRightSelect } = useRightSelected();
|
||||
const { editWidgetOptions } = useEditWidgetOptionsStore();
|
||||
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
|
||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||
|
||||
// const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
|
||||
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||
const { setFloatingWidget } = useFloatingWidget();
|
||||
const { widgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
|
||||
|
|
@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {
|
|||
|
||||
useEffect(() => {
|
||||
async function GetZoneData() {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const email = localStorage.getItem("email") ?? "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
try {
|
||||
const response = await getZone2dData(organization);
|
||||
// console.log('response: ', response);
|
||||
|
||||
if (!Array.isArray(response)) {
|
||||
return;
|
||||
|
|
@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
|
|||
{}
|
||||
);
|
||||
setZonesData(formattedData);
|
||||
} catch (error) {}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
GetZoneData();
|
||||
|
|
@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
|
|||
});
|
||||
}, [selectedZone]);
|
||||
|
||||
// useEffect(() => {}, [floatingWidgets]);
|
||||
|
||||
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const email = localStorage.getItem("email") ?? "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
const data = event.dataTransfer.getData("text/plain");
|
||||
|
|
@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const relativeY = event.clientY - rect.top;
|
||||
|
||||
// Widget dimensions
|
||||
const widgetWidth = droppedData.width || 125;
|
||||
const widgetHeight = droppedData.height || 100;
|
||||
const widgetWidth = droppedData.width ?? 125;
|
||||
const widgetHeight = droppedData.height ?? 100;
|
||||
|
||||
// Center the widget at cursor
|
||||
const centerOffsetX = widgetWidth / 2;
|
||||
|
|
@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [setRightClickSelected]);
|
||||
}, [setRightClickSelected, setRightSelect]);
|
||||
|
||||
const [canvasDimensions, setCanvasDimensions] = useState({
|
||||
width: 0,
|
||||
|
|
@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
borderRadius:
|
||||
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
||||
}}
|
||||
role="application"
|
||||
onDrop={(event) => handleDrop(event)}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
|
|||
import ZoneCentreTarget from './zone/zoneCameraTarget'
|
||||
import ZoneAssets from './zone/zoneAssets'
|
||||
import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
|
||||
import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'
|
||||
|
||||
const Visualization = () => {
|
||||
const Visualization:React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
button{
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -675,7 +675,8 @@
|
|||
color: var(--primary-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
cursor: pointer;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue