v2-ui #87
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { HelpIcon } from "../icons/DashboardIcon";
|
||||
import { useLogger } from "../ui/log/LoggerContext";
|
||||
import { GetLogIcon } from "./getLogIcons";
|
||||
|
|
@ -7,12 +7,36 @@ import {
|
|||
CurserMiddleIcon,
|
||||
CurserRightIcon,
|
||||
} from "../icons/LogIcons";
|
||||
import ShortcutHelper from "./shortcutHelper";
|
||||
import { useShortcutStore } from "../../store/store";
|
||||
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const { logs, setIsLogListVisible } = useLogger();
|
||||
const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
|
||||
|
||||
const { showShortcuts, setShowShortcuts } = useShortcutStore();
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
|
||||
// Listen for Ctrl + Shift + ?
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (
|
||||
e.ctrlKey &&
|
||||
e.shiftKey &&
|
||||
(e.key === "?" || e.key === "/") // for some keyboards ? and / share the same key
|
||||
) {
|
||||
e.preventDefault();
|
||||
setShowShortcuts(!showShortcuts); // toggle visibility directly
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [showShortcuts, setShowShortcuts]);
|
||||
|
||||
return (
|
||||
<div className="footer-container">
|
||||
<div className="footer-wrapper">
|
||||
<div className="selection-wrapper">
|
||||
<div className="selector-wrapper">
|
||||
|
|
@ -61,6 +85,17 @@ const Footer: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isPlaying && (
|
||||
<div
|
||||
className={`shortcut-helper-overlay ${
|
||||
showShortcuts ? "visible" : ""
|
||||
}`}
|
||||
>
|
||||
<ShortcutHelper />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,317 @@
|
|||
import React from "react";
|
||||
|
||||
import {
|
||||
UndoIcon,
|
||||
RedoIcon,
|
||||
ESCIcon,
|
||||
HelpIcon,
|
||||
FindIcon,
|
||||
InfoIcon,
|
||||
CurserIcon,
|
||||
DeleteIcon,
|
||||
FreeHandIcon,
|
||||
MeasurementToolIcon,
|
||||
WallToolIcon,
|
||||
ZoneToolIcon,
|
||||
AisleToolIcon,
|
||||
FloorToolIcon,
|
||||
MoveIcon,
|
||||
RotateIcon,
|
||||
ToogleViewIcon,
|
||||
UIVisiblityIcon,
|
||||
FirstPersonViewIcon,
|
||||
BuilderIcon,
|
||||
SimulationIcon,
|
||||
VisualizationIcon,
|
||||
MarketplaceIcon,
|
||||
CopyIcon,
|
||||
PasteIcon,
|
||||
DublicateIcon,
|
||||
DuplicateInstanceIcon,
|
||||
PlayIcon,
|
||||
BrowserIcon,
|
||||
} from "../icons/ShortcutIcons";
|
||||
|
||||
interface ShortcutItem {
|
||||
keys: string[];
|
||||
name?: string;
|
||||
description: string;
|
||||
icon: any;
|
||||
}
|
||||
|
||||
interface ShortcutGroup {
|
||||
category: string;
|
||||
items: ShortcutItem[];
|
||||
}
|
||||
|
||||
const ShortcutHelper = () => {
|
||||
return <div className="shirtcut-helper-container"></div>;
|
||||
const shortcuts: ShortcutGroup[] = [
|
||||
{
|
||||
category: "Essential",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "Z"],
|
||||
name: "Undo",
|
||||
description: "Undo Last action",
|
||||
icon: <UndoIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "Y"],
|
||||
name: "Redo",
|
||||
description: "Redo Last action",
|
||||
icon: <RedoIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["ESC"],
|
||||
name: "Escape",
|
||||
description: "Reset to Cursor & Stop Playback",
|
||||
icon: <ESCIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "H"],
|
||||
name: "Help",
|
||||
description: "Open Help",
|
||||
icon: <HelpIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "F"],
|
||||
name: "Find",
|
||||
description: "Find / Search Functionality",
|
||||
icon: <FindIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "?"],
|
||||
name: "Info",
|
||||
description: "Show Shortcut Info",
|
||||
icon: <InfoIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Tools",
|
||||
items: [
|
||||
{
|
||||
keys: ["V"],
|
||||
name: "Cursor Tool",
|
||||
description: "Activate Cursor tool",
|
||||
icon: <CurserIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["X"],
|
||||
name: "Delete Tool",
|
||||
description: "Activate Delete tool",
|
||||
icon: <DeleteIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["H"],
|
||||
name: "Freehand Tool",
|
||||
description: "Activate Free-Hand tool",
|
||||
icon: <FreeHandIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["M"],
|
||||
name: "Measurement Tool",
|
||||
description: "Activate Measurement tool",
|
||||
icon: <MeasurementToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["Q", "OR", "6"],
|
||||
name: "Wall Tool",
|
||||
description: "Select Wall floor tool (2D)",
|
||||
icon: <WallToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["E", "OR", "8"],
|
||||
name: "Zone Tool",
|
||||
description: "Select Draw zone tool (2D)",
|
||||
icon: <ZoneToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["R", "OR", "7"],
|
||||
name: "Aisle Tool",
|
||||
description: "Select Aisle floor tool (2D)",
|
||||
icon: <AisleToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["T", "OR", "9"],
|
||||
name: "Floor Tool",
|
||||
description: "Select Draw floor tool (2D)",
|
||||
icon: <FloorToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["G"],
|
||||
name: "Move Asset",
|
||||
description: "Move Selected Asset",
|
||||
icon: <MoveIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["R"],
|
||||
name: "Rotate Asset",
|
||||
description: "Rotate Selected Asset",
|
||||
icon: <RotateIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "View & Navigation",
|
||||
items: [
|
||||
{
|
||||
keys: ["TAB"],
|
||||
name: "Toggle View",
|
||||
description: "Toggle between 2D & 3D views (Builder)",
|
||||
icon: <ToogleViewIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "."],
|
||||
name: "Toggle UI",
|
||||
description: "Toggle UI Visibility",
|
||||
icon: <UIVisiblityIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["/"],
|
||||
name: "First Person View",
|
||||
description: "Switch to First-person View",
|
||||
icon: <FirstPersonViewIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Module Switching",
|
||||
items: [
|
||||
{
|
||||
keys: ["1"],
|
||||
name: "Builder",
|
||||
description: "Switch to Builder module",
|
||||
icon: <BuilderIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["2"],
|
||||
name: "Simulation",
|
||||
description: "Switch to Simulation module",
|
||||
icon: <SimulationIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["3"],
|
||||
name: "Visualization",
|
||||
description: "Switch to Visualization module",
|
||||
icon: <VisualizationIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["4"],
|
||||
name: "Marketplace",
|
||||
description: "Switch to Marketplace module",
|
||||
icon: <MarketplaceIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Selection",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "C"],
|
||||
name: "Copy",
|
||||
description: "Copy an Asset",
|
||||
icon: <CopyIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "V"],
|
||||
name: "Paste",
|
||||
description: "Paste an Asset",
|
||||
icon: <PasteIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "D"],
|
||||
name: "Duplicate",
|
||||
description: "Duplicate an Asset",
|
||||
icon: <DublicateIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["ALT", "+", "D"],
|
||||
name: "Duplicate (Instance)",
|
||||
description: "Duplicate an Instanced Asset",
|
||||
icon: <DuplicateInstanceIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Simulation",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "P"],
|
||||
name: "Play",
|
||||
description: "Play Simulation",
|
||||
icon: <PlayIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Miscellaneous",
|
||||
items: [
|
||||
{
|
||||
keys: ["F5", "F11", "F12", "CTRL", "+", "R"],
|
||||
name: "Browser Defaults",
|
||||
description: "Reserved for browser defaults",
|
||||
icon: <BrowserIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [activeCategory, setActiveCategory] =
|
||||
React.useState<string>("Essential");
|
||||
|
||||
const activeShortcuts =
|
||||
shortcuts.find((group) => group.category === activeCategory)?.items || [];
|
||||
|
||||
return (
|
||||
<div className="shortcut-helper-container">
|
||||
<div className="header">
|
||||
<div className="header-wrapper">
|
||||
{shortcuts.map((group) => (
|
||||
<button
|
||||
key={group.category}
|
||||
onClick={() => setActiveCategory(group.category)}
|
||||
className={activeCategory === group.category ? "active" : ""}
|
||||
>
|
||||
{group.category}
|
||||
</button>
|
||||
))}
|
||||
<div className="type">Keyboard</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`shortcut-wrapper ${
|
||||
activeShortcuts.length === 1 ? "single-item" : ""
|
||||
}`}
|
||||
>
|
||||
{activeShortcuts.map((item) => (
|
||||
<div
|
||||
key={`${item.name}-${item.keys.join("")}`}
|
||||
className="shortcut-item"
|
||||
>
|
||||
<div className="shortcut-intro">
|
||||
<div className="icon">{item.icon}</div>
|
||||
<div className="value-wrapper">
|
||||
<div className="name">{item.name}</div>
|
||||
<div className="description">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="keys">
|
||||
{item.keys.map((key, i) => (
|
||||
<span
|
||||
key={`${key}-${i}`}
|
||||
className={`key ${key === "+" || key === "OR" ? "add" : ""}`}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShortcutHelper;
|
||||
|
|
|
|||
|
|
@ -958,8 +958,8 @@ export const LocationIcon = () => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3 9.45984L10.4205 9.98901L11.085 17.5L18 2.5L3 9.45984Z"
|
||||
fill="white"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -166,3 +166,6 @@ export function StockIncreseIcon() {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,827 @@
|
|||
export function UndoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.33398 5.82812H12.5007C14.0583 5.82812 14.8372 5.82812 15.4173 6.16307C15.7974 6.38248 16.113 6.69808 16.3324 7.07812C16.6673 7.65825 16.6673 8.43712 16.6673 9.99479C16.6673 11.5525 16.6673 12.3313 16.3324 12.9115C16.113 13.2915 15.7974 13.6071 15.4173 13.8265C14.8372 14.1615 14.0583 14.1615 12.5007 14.1615H6.66733M3.33398 5.82812L5.83398 3.32812M3.33398 5.82812L5.83398 8.32812"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RedoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.666 5.82812H7.49935C5.94168 5.82812 5.16277 5.82812 4.58268 6.16307C4.2026 6.38248 3.88702 6.69808 3.6676 7.07812C3.33268 7.65825 3.33268 8.43712 3.33268 9.99479C3.33268 11.5525 3.33268 12.3313 3.6676 12.9115C3.88702 13.2915 4.2026 13.6071 4.58268 13.8265C5.16277 14.1615 5.94168 14.1615 7.49935 14.1615H13.3327M16.666 5.82812L14.166 3.32812M16.666 5.82812L14.166 8.32812"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ESCIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.0175 14.3653C9.21173 14.3331 8.45367 14.1688 7.75 13.8936L8.19729 12.878C8.68009 13.1022 9.24614 13.2321 9.84215 13.2321C10.204 13.2321 10.5558 13.1844 10.8888 13.0934C11.0231 12.9724 11.1274 12.777 11.1274 12.5562C11.2051 12.0789 10.8832 11.868 9.82883 11.4463C8.90762 11.1244 7.56465 10.6028 7.79773 9.1377C7.87764 8.47842 8.30828 7.93679 8.89541 7.69928C9.14292 7.64045 9.41262 7.60938 9.68898 7.60938C10.4925 7.60938 11.2351 7.8702 11.8355 8.31194L11.204 9.1488C10.7978 8.87354 10.2972 8.70928 9.75891 8.70928C9.62239 8.70928 9.4892 8.71927 9.35824 8.74036C9.11961 8.83359 8.93981 9.06889 8.92871 9.34747C8.83992 9.79254 9.08409 9.99232 10.2051 10.4585C11.1485 10.8247 12.4249 11.3131 12.2029 12.7671C12.1285 13.3342 11.7989 13.8104 11.335 14.0834C10.9765 14.2643 10.5625 14.3675 10.1252 14.3675C10.0874 14.3675 10.0486 14.3664 10.0109 14.3653H10.0175Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M16.3565 14.3716C16.3265 14.3727 16.2921 14.3727 16.2577 14.3727C15.6106 14.3727 15.0102 14.1729 14.5152 13.8311C13.7982 13.2228 13.3398 12.3105 13.3398 11.2905C13.3398 11.2028 13.3431 11.1163 13.3498 11.0297C13.3376 10.942 13.332 10.8266 13.332 10.71C13.332 9.71225 13.7904 8.82211 14.5085 8.2372C15.0635 7.92421 15.7194 7.74219 16.4175 7.74219C16.9092 7.74219 17.3809 7.83209 17.8149 7.99746L17.3998 9.02078C17.0935 8.89759 16.7394 8.82544 16.3676 8.82544C15.937 8.82544 15.5285 8.922 15.1622 9.09404C14.7238 9.49471 14.4386 10.0852 14.4386 10.7422C14.4386 10.8477 14.4464 10.9509 14.4597 11.0519C14.4486 11.1218 14.4419 11.2162 14.4419 11.3116C14.4419 11.9764 14.7249 12.5747 15.1778 12.992C15.5618 13.1884 16.0146 13.3028 16.493 13.3028C16.8171 13.3028 17.129 13.2506 17.4198 13.154L17.7871 14.1585C17.3621 14.2928 16.8737 14.3694 16.3676 14.3694C16.3632 14.3694 16.3587 14.3694 16.3543 14.3694L16.3565 14.3716Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.68957 5.48489V4.375H2.25V14.364H6.68957V13.2541H3.35989V9.92447H6.68957V8.81457H3.35989V5.48489H6.68957Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HelpIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 16.25C13.4517 16.25 16.25 13.4517 16.25 10C16.25 6.54822 13.4517 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4517 6.54822 16.25 10 16.25ZM10 17.5C14.1422 17.5 17.5 14.1422 17.5 10C17.5 5.85787 14.1422 2.5 10 2.5C5.85787 2.5 2.5 5.85787 2.5 10C2.5 14.1422 5.85787 17.5 10 17.5ZM10.625 12.5V13.75H9.375V12.5H10.625ZM8.75 8.69317C8.75 8.05219 9.29142 7.5 10 7.5C10.7086 7.5 11.25 8.05219 11.25 8.69317C11.25 8.94917 11.0959 9.25258 10.7563 9.59658C10.4272 9.93008 10.0087 10.2161 9.66067 10.441L9.375 10.6257V11.875H10.625V11.3019C10.9427 11.0858 11.319 10.8059 11.646 10.4747C12.0682 10.047 12.5 9.44133 12.5 8.69317C12.5 7.32586 11.3624 6.25 10 6.25C8.63758 6.25 7.5 7.32586 7.5 8.69317H8.75Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FindIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.30571 14.1905C10.2741 14.1914 11.2262 13.9412 12.0691 13.4642L14.4072 15.8024C14.692 16.0872 15.0783 16.2472 15.4812 16.2472C15.884 16.2472 16.2703 16.0872 16.5551 15.8024C16.84 15.5175 17 15.1312 17 14.7284C17 14.3256 16.84 13.9393 16.5551 13.6544L14.217 11.3163C14.8857 10.1292 15.1017 8.74014 14.8251 7.40609C14.5485 6.07203 13.7981 4.88332 12.7126 4.0599C11.6272 3.23649 10.2802 2.83412 8.92098 2.92725C7.56174 3.02039 6.28225 3.60271 5.31926 4.56648C4.5308 5.35491 3.99384 6.35945 3.7763 7.45306C3.55876 8.54666 3.67041 9.68021 4.09712 10.7104C4.52382 11.7405 5.24643 12.621 6.17355 13.2405C7.10068 13.8599 8.19068 14.1906 9.30571 14.1905ZM6.31148 5.55871C7.00418 4.86634 7.9155 4.43555 8.89019 4.33975C9.86488 4.24394 10.8426 4.48905 11.6569 5.03331C12.4711 5.57757 13.0715 6.3873 13.3556 7.32456C13.6398 8.26182 13.5902 9.26861 13.2153 10.1734C12.8404 11.0782 12.1634 11.825 11.2996 12.2866C10.4359 12.7482 9.43875 12.8961 8.47819 12.705C7.51763 12.5139 6.65304 11.9956 6.03174 11.2385C5.41044 10.4814 5.07086 9.53232 5.07085 8.55293C5.06915 7.99657 5.17794 7.44541 5.39091 6.93141C5.60388 6.41742 5.91679 5.95083 6.31148 5.55871Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function InfoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.5204 13.4659C10.7701 13.4659 10.9725 13.2635 10.9725 13.0138V9.39737C10.9725 9.14771 10.7701 8.94531 10.5204 8.94531C10.2708 8.94531 10.0684 9.14771 10.0684 9.39737V13.0138C10.0684 13.2635 10.2708 13.4659 10.5204 13.4659Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M10.5207 6.98438C10.8536 6.98438 11.1235 7.25424 11.1235 7.58712C11.1235 7.92 10.8536 8.18986 10.5207 8.18986C10.1878 8.18986 9.91797 7.92 9.91797 7.58712C9.91797 7.25424 10.1878 6.98438 10.5207 6.98438Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.04102 10.0029C4.04102 6.42441 6.94198 3.52344 10.5205 3.52344C14.0991 3.52344 17 6.42441 17 10.0029C17 13.5815 14.0991 16.4824 10.5205 16.4824C6.94198 16.4824 4.04102 13.5815 4.04102 10.0029ZM10.5205 4.42755C7.44131 4.42755 4.94513 6.92374 4.94513 10.0029C4.94513 13.0821 7.44131 15.5783 10.5205 15.5783C13.5997 15.5783 16.0959 13.0821 16.0959 10.0029C16.0959 6.92374 13.5997 4.42755 10.5205 4.42755Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CurserIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FreeHandIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MeasurementToolIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.68619 10.1004H12.2277V8.29688C11.6885 9.02845 10.8343 9.64163 9.75173 10.0751C9.73059 10.0835 9.70733 10.092 9.68619 10.1004Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M0.402344 9.34082C0.601078 9.51641 0.81855 9.68176 1.05371 9.83594L1.29883 9.98926C2.50601 10.7059 4.04736 11.1172 5.67578 11.1807H19.1543C19.4004 11.1808 19.5994 11.3799 19.5996 11.626V16.3164C19.5994 16.5626 19.4005 16.7616 19.1543 16.7617H18.4463V15.8613C18.4462 15.3192 18.007 14.88 17.4648 14.8799C16.9226 14.8799 16.4835 15.3191 16.4834 15.8613V16.7617H16.0361V14.498C16.0361 13.9559 15.5968 13.5168 15.0547 13.5166C14.5124 13.5166 14.0732 13.9557 14.0732 14.498V16.7617H13.625V15.8613C13.6249 15.3191 13.1858 14.8799 12.6436 14.8799C12.1015 14.8801 11.6622 15.3192 11.6621 15.8613V16.7617H11.2148V14.498C11.2148 13.9557 10.7757 13.5166 10.2334 13.5166C9.69113 13.5166 9.25195 13.9558 9.25195 14.498V16.7617H8.80469V15.8613C8.80459 15.3192 8.36541 14.88 7.82324 14.8799C7.281 14.8799 6.8419 15.3191 6.8418 15.8613V16.7617H6.11426C4.4855 16.7617 3.03028 16.368 1.99609 15.7529C0.9536 15.1328 0.402397 14.333 0.402344 13.5273V9.34082Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.8"
|
||||
/>
|
||||
<path
|
||||
d="M6.1123 3.22852C7.74123 3.22852 9.19625 3.62154 10.2305 4.23633C11.2731 4.8562 11.8252 5.65597 11.8252 6.46289C11.8252 6.82463 11.7175 7.18064 11.5049 7.51953L11.4072 7.66309L11.4062 7.66406C10.5765 8.8129 8.56553 9.69717 6.11523 9.69727C6.03208 9.69727 5.94957 9.69551 5.8623 9.69336H5.86328C3.67006 9.63747 1.86351 8.87579 0.982422 7.86816L0.818359 7.66309C0.542765 7.28046 0.400421 6.87494 0.400391 6.46289C0.400391 5.65713 0.951389 4.85653 1.99414 4.23633C3.02833 3.62125 4.48355 3.22858 6.1123 3.22852ZM6.11523 4.44141C5.30316 4.44141 4.54863 4.63609 3.98438 4.97168C3.46367 5.28142 3.04694 5.75161 2.99805 6.33984L2.99316 6.45898C2.99325 6.743 3.07951 7.00517 3.22363 7.23633L3.28906 7.33301C3.76857 7.99795 4.75288 8.40763 5.82324 8.46973V8.4707C5.92262 8.47795 6.02029 8.48047 6.11523 8.48047C7.30572 8.48037 8.42116 8.05532 8.94238 7.33301L8.94141 7.33203C9.00567 7.24348 9.06173 7.14976 9.10742 7.04785L9.1084 7.04883C9.19323 6.86454 9.23824 6.66587 9.23828 6.46094C9.23828 5.81632 8.80107 5.30238 8.24512 4.97168C7.68051 4.63594 6.9262 4.44147 6.11523 4.44141Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WallToolIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_3986_5423)">
|
||||
<path
|
||||
d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="#3A383D"
|
||||
stroke-width="1.08709"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3986_5423">
|
||||
<rect width="20" height="20" fill="var(--text-color)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ZoneToolIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_3986_5423)">
|
||||
<path
|
||||
d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="#3A383D"
|
||||
stroke-width="1.08709"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3986_5423">
|
||||
<rect width="20" height="20" fill="var(--text-color)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AisleToolIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.25821 9.16406H1.13638L1.13638 13.4806L3.25821 9.16406Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M4.57633 16.6641H1.53737L5.22405 9.16406L8.26301 9.16406L4.57633 16.6641Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M9.82919 16.6641H6.79023L10.4769 9.16406L13.5159 9.16406L9.82919 16.6641Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M15.1917 16.6641H12.1528L15.8395 9.16406L18.8637 9.16406V9.19409L15.1917 16.6641Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M18.8637 14.3136V16.6641H17.7083L18.8637 14.3136Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M7.75001 0.835938L10 3.08594L4.75001 8.33594H2.50001V6.08594L7.75001 0.835938Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FloorToolIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
opacity="0.3"
|
||||
x="3.33398"
|
||||
y="3.32812"
|
||||
width="12.5"
|
||||
height="12.5"
|
||||
fill="#F3F3FD"
|
||||
fill-opacity="0.85"
|
||||
/>
|
||||
<path
|
||||
d="M15.834 15.8281V3.32812H3.33398V15.8281"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M11.084 6.67188L13.334 8.92188L8.08398 14.1719H5.83398V11.9219L11.084 6.67188Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<circle cx="3.29961" cy="3.30156" r="1.2" fill="var(--text-color)" />
|
||||
<circle cx="15.7996" cy="3.30156" r="1.2" fill="var(--text-color)" />
|
||||
<circle cx="15.7996" cy="15.8016" r="1.2" fill="var(--text-color)" />
|
||||
<circle cx="3.29961" cy="15.8016" r="1.2" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MoveIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 17.5V2.5M10 17.5L11.6667 15.8333M10 17.5L8.33334 15.8333M10 2.5L11.6667 4.16667M10 2.5L8.33334 4.16667M17.5 10H2.50001M17.5 10L15.8333 8.33333M17.5 10L15.8333 11.6667M2.50001 10L4.16667 8.33333M2.50001 10L4.16667 11.6667"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RotateIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.6094 11.6094H14.29V14.2899"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.63995 13.7509H7.3205V11.0703"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.2899 11.8218C13.9146 12.2507 13.5394 12.6795 13.1105 13.1084C9.35771 16.8612 4.908 18.5768 3.19244 16.8612C1.47689 15.1457 3.13883 10.6959 6.94521 6.94317C10.7516 3.1904 15.1477 1.47485 16.8632 3.1904C17.6138 3.94095 17.721 5.1204 17.2921 6.56789"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.32051 13.4832C7.15968 13.3759 7.05246 13.2151 6.89163 13.0543C3.13886 9.3015 1.4233 4.85178 3.13886 3.13623C4.85441 1.42068 9.30412 3.08262 13.0569 6.889C16.8097 10.6954 18.5252 15.0915 16.8097 16.807C15.8983 17.7184 14.2363 17.6648 12.3063 16.8607"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToogleViewIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.8333 7.5026H4.16663C2.78592 7.5026 1.66663 8.62185 1.66663 10.0026C1.66663 11.3834 2.78592 12.5026 4.16663 12.5026H10.833M18.3333 10.0026C18.3333 12.3038 16.4678 14.1693 14.1666 14.1693C11.8655 14.1693 9.99996 12.3038 9.99996 10.0026C9.99996 7.70142 11.8655 5.83594 14.1666 5.83594C16.4678 5.83594 18.3333 7.70142 18.3333 10.0026Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function UIVisiblityIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.96428 14.3726C7.02007 14.3726 6.13243 14.0049 5.46483 13.3373C4.79685 12.6694 4.42896 11.7815 4.42896 10.8373V6.5152C4.42896 6.39928 4.475 6.28811 4.55697 6.20614C4.63894 6.12417 4.75011 6.07813 4.86603 6.07812C4.98195 6.07813 5.09312 6.12417 5.17509 6.20614C5.25706 6.28811 5.30311 6.39928 5.30311 6.5152V10.8373C5.30311 11.548 5.58009 12.2163 6.08298 12.7192C6.58543 13.2218 7.25359 13.4984 7.96428 13.4984C9.43161 13.4984 10.6255 12.3047 10.6255 10.8373V6.5152C10.6255 6.39928 10.6715 6.28811 10.7535 6.20614C10.8354 6.12417 10.9466 6.07812 11.0625 6.07812C11.1785 6.07812 11.2896 6.12417 11.3716 6.20614C11.4536 6.28811 11.4996 6.39928 11.4996 6.5152V10.8373C11.4996 12.7866 9.91364 14.3726 7.96428 14.3726ZM13.7949 14.3726C13.679 14.3726 13.5678 14.3265 13.4858 14.2446C13.4039 14.1626 13.3578 14.0514 13.3578 13.9355V6.5152C13.3578 6.4578 13.3691 6.40097 13.3911 6.34794C13.413 6.29491 13.4452 6.24673 13.4858 6.20614C13.5264 6.16556 13.5746 6.13336 13.6276 6.1114C13.6806 6.08943 13.7375 6.07813 13.7949 6.07812C13.8523 6.07813 13.9091 6.08943 13.9621 6.1114C14.0152 6.13336 14.0634 6.16556 14.1039 6.20614C14.1445 6.24673 14.1767 6.29491 14.1987 6.34794C14.2207 6.40097 14.232 6.4578 14.232 6.5152V13.9355C14.232 14.0514 14.1859 14.1626 14.1039 14.2446C14.022 14.3265 13.9108 14.3726 13.7949 14.3726Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M7.96457 12.8347C7.36265 12.8347 6.79732 12.6004 6.37273 12.1751C5.9479 11.7511 5.71362 11.1855 5.71362 10.5832V6.55454C5.71362 6.43862 5.75967 6.32745 5.84164 6.24548C5.92361 6.16351 6.03478 6.11746 6.1507 6.11746C6.26662 6.11746 6.37779 6.16351 6.45976 6.24548C6.54173 6.32745 6.58778 6.43862 6.58778 6.55454V10.5832C6.58778 10.9517 6.73089 11.2975 6.99082 11.557C7.25082 11.8175 7.59642 11.9606 7.96457 11.9606C8.72377 11.9606 9.34136 11.3427 9.34136 10.5832V6.55454C9.34136 6.43862 9.38741 6.32745 9.46937 6.24548C9.55134 6.16351 9.66252 6.11746 9.77844 6.11746C9.89435 6.11746 10.0055 6.16351 10.0875 6.24548C10.1695 6.32745 10.2155 6.43862 10.2155 6.55454V10.5832C10.2155 11.8247 9.20574 12.8347 7.96457 12.8347ZM15.1688 14.3726C15.0529 14.3726 14.9417 14.3265 14.8598 14.2446C14.7778 14.1626 14.7318 14.0514 14.7318 13.9355V6.5152C14.7318 6.39928 14.7778 6.28811 14.8598 6.20614C14.9417 6.12417 15.0529 6.07812 15.1688 6.07812C15.2848 6.07812 15.3959 6.12417 15.4779 6.20614C15.5599 6.28811 15.6059 6.39928 15.6059 6.5152V13.9355C15.6059 14.0514 15.5599 14.1626 15.4779 14.2446C15.3959 14.3265 15.2848 14.3726 15.1688 14.3726Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FirstPersonViewIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.04 11.8262C11.0513 11.8262 11.8711 11.0064 11.8711 9.99512C11.8711 8.98385 11.0513 8.16406 10.04 8.16406C9.02878 8.16406 8.20898 8.98385 8.20898 9.99512C8.20898 11.0064 9.02878 11.8262 10.04 11.8262Z"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
/>
|
||||
<path
|
||||
d="M14.6021 9.54529C14.6963 9.73096 14.7434 9.82375 14.7434 9.99902C14.7434 10.1743 14.6963 10.2671 14.6021 10.4528C14.1433 11.3564 12.8336 13.2949 10.0416 13.2949C7.24964 13.2949 5.94002 11.3564 5.4812 10.4528C5.38696 10.2671 5.33984 10.1743 5.33984 9.99902C5.33984 9.82375 5.38696 9.73096 5.4812 9.54529C5.94002 8.64163 7.24964 6.70312 10.0416 6.70312C12.8336 6.70312 14.1433 8.64163 14.6021 9.54529Z"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
/>
|
||||
<path
|
||||
d="M14.0703 3.77344H14.2168C15.5288 3.77344 16.1848 3.77344 16.5924 4.18103C17 4.58862 17 5.24462 17 6.55664V6.70312"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.0703 16.2266H14.2168C15.5288 16.2266 16.1848 16.2266 16.5924 15.819C17 15.4114 17 14.7553 17 13.4434V13.2969"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.01367 3.77344H5.86719C4.55517 3.77344 3.89916 3.77344 3.49158 4.18103C3.08398 4.58862 3.08398 5.24462 3.08398 6.55664V6.70312"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.01367 16.2266H5.86719C4.55517 16.2266 3.89916 16.2266 3.49158 15.819C3.08398 15.4114 3.08398 14.7553 3.08398 13.4434V13.2969"
|
||||
stroke="#F3F3FD"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.732422"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function BuilderIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5ZM14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5ZM3.5 8.125H5.875C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125ZM8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125ZM3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75ZM14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5C13.375 4.08579 13.7108 3.75 14.125 3.75Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SimulationIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.2632 11.0672C12.2632 11.4899 12.1379 11.9032 11.903 12.2547C11.6681 12.6062 11.3343 12.8802 10.9437 13.0419C10.5532 13.2037 10.1234 13.246 9.70876 13.1636C9.29413 13.0811 8.91327 12.8775 8.61434 12.5786C8.3154 12.2797 8.11183 11.8988 8.02935 11.4842C7.94688 11.0695 7.98921 10.6398 8.15099 10.2492C8.31277 9.85862 8.58674 9.52479 8.93824 9.28992C9.28975 9.05505 9.70301 8.92969 10.1258 8.92969C10.6927 8.92969 11.2363 9.15489 11.6372 9.55574C12.038 9.9566 12.2632 10.5003 12.2632 11.0672Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M10.1254 6.26248C10.7156 6.26248 11.1941 5.78399 11.1941 5.19374C11.1941 4.60349 10.7156 4.125 10.1254 4.125C9.53513 4.125 9.05664 4.60349 9.05664 5.19374C9.05664 5.78399 9.53513 6.26248 10.1254 6.26248Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M5.31874 15.8719C5.90899 15.8719 6.38748 15.3934 6.38748 14.8031C6.38748 14.2129 5.90899 13.7344 5.31874 13.7344C4.72849 13.7344 4.25 14.2129 4.25 14.8031C4.25 15.3934 4.72849 15.8719 5.31874 15.8719Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M14.932 15.8719C15.5223 15.8719 16.0008 15.3934 16.0008 14.8031C16.0008 14.2129 15.5223 13.7344 14.932 13.7344C14.3418 13.7344 13.8633 14.2129 13.8633 14.8031C13.8633 15.3934 14.3418 15.8719 14.932 15.8719Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M8.43583 12.375L6.16406 14.1488"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M14.0862 14.1488L11.8145 12.375"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M10.125 8.93468V6.26562"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.671459"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function VisualizationIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 3.33594V16.6693"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1667 7.5V16.6667"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.83325 7.5V16.6667"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MarketplaceIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.6665 2.89844L2.87558 2.96813C3.91742 3.31541 4.43834 3.48905 4.73629 3.90244C5.03425 4.31582 5.03425 4.86492 5.03425 5.96312V8.02855C5.03425 10.2609 5.03425 11.377 5.72774 12.0705C6.42124 12.764 7.5374 12.764 9.76973 12.764H11.3482M16.0837 12.764H14.5052"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.0076 14.7344C7.66144 14.7344 8.19147 15.2644 8.19147 15.9182C8.19147 16.5721 7.66144 17.1021 7.0076 17.1021C6.35377 17.1021 5.82373 16.5721 5.82373 15.9182C5.82373 15.2644 6.35377 14.7344 7.0076 14.7344Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M14.1106 14.7344C14.7644 14.7344 15.2945 15.2644 15.2945 15.9182C15.2945 16.5721 14.7644 17.1021 14.1106 17.1021C13.4568 17.1021 12.9268 16.5721 12.9268 15.9182C12.9268 15.2644 13.4568 14.7344 14.1106 14.7344Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5.03418 5.26562H7.40192M5.4288 10.7904H13.7331C14.4903 10.7904 14.8689 10.7904 15.1654 10.5949C15.462 10.3993 15.6111 10.0513 15.9094 9.35535L16.2477 8.5661C16.8865 7.07532 17.206 6.32995 16.8551 5.79778C16.5042 5.26563 15.6933 5.26562 14.0714 5.26562H10.5589"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CopyIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.8029 3.3125H9.28064C8.13792 3.31249 7.23281 3.31248 6.52446 3.40772C5.79545 3.50573 5.2054 3.71224 4.74007 4.17757C4.27474 4.6429 4.06823 5.23295 3.97022 5.96196C3.87498 6.67031 3.87499 7.57541 3.875 8.71812V12.484C3.875 13.6481 4.72813 14.613 5.8433 14.7875C5.92909 15.2626 6.09327 15.6681 6.42333 15.9982C6.7976 16.3724 7.26884 16.5334 7.82853 16.6087C8.3676 16.6811 9.053 16.6811 9.90336 16.6811H11.837C12.6874 16.6811 13.3728 16.6811 13.9119 16.6087C14.4716 16.5334 14.9428 16.3724 15.3171 15.9982C15.6913 15.6239 15.8523 15.1527 15.9276 14.593C16 14.0539 16 13.3685 16 12.5181V9.34086C16 8.49052 16 7.80511 15.9276 7.26603C15.8523 6.70634 15.6913 6.2351 15.3171 5.86083C14.987 5.53077 14.5815 5.36659 14.1064 5.2808C13.9319 4.16563 12.967 3.3125 11.8029 3.3125ZM13.1269 5.19105C12.9386 4.6408 12.417 4.24519 11.8029 4.24519H9.31571C8.13005 4.24519 7.28773 4.24618 6.64873 4.33209C6.02315 4.4162 5.66273 4.57393 5.39958 4.83708C5.13643 5.10023 4.9787 5.46065 4.89459 6.08623C4.80868 6.72523 4.80769 7.56755 4.80769 8.75321V12.484C4.80769 13.0981 5.2033 13.6197 5.75355 13.808C5.74037 13.4287 5.74038 12.9999 5.74038 12.5181V9.34086C5.74037 8.49052 5.74036 7.80511 5.81284 7.26603C5.88809 6.70634 6.04906 6.2351 6.42333 5.86083C6.7976 5.48656 7.26884 5.32559 7.82853 5.25034C8.3676 5.17786 9.053 5.17787 9.90336 5.17788H11.837C12.3188 5.17788 12.7476 5.17787 13.1269 5.19105ZM7.08285 6.52035C7.25493 6.34826 7.49655 6.23606 7.95281 6.17472C8.42248 6.11157 9.04498 6.11058 9.9375 6.11058H11.8029C12.6954 6.11058 13.3179 6.11157 13.7876 6.17472C14.2439 6.23606 14.4854 6.34826 14.6575 6.52035C14.8297 6.69243 14.9418 6.93405 15.0032 7.39031C15.0663 7.85998 15.0673 8.48246 15.0673 9.375V12.484C15.0673 13.3765 15.0663 13.999 15.0032 14.4687C14.9418 14.925 14.8297 15.1665 14.6575 15.3386C14.4854 15.5107 14.2439 15.6229 13.7876 15.6843C13.3179 15.7474 12.6954 15.7484 11.8029 15.7484H9.9375C9.04498 15.7484 8.42248 15.7474 7.95281 15.6843C7.49655 15.6229 7.25493 15.5107 7.08285 15.3386C6.91076 15.1665 6.79856 14.925 6.73722 14.4687C6.67407 13.999 6.67308 13.3765 6.67308 12.484V9.375C6.67308 8.48246 6.67407 7.85998 6.73722 7.39031C6.79856 6.93405 6.91076 6.69243 7.08285 6.52035Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PasteIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.8521 5.3385H12.4447C13.0033 5.3385 13.2826 5.3385 13.4562 5.51422C13.6297 5.68995 13.6297 5.97278 13.6297 6.53843V8.67163M11.8521 5.3385V5.8718C11.8521 6.15462 11.8521 6.29604 11.7653 6.3839C11.6785 6.47177 11.5389 6.47177 11.2596 6.47177H7.70421C7.42488 6.47177 7.28521 6.47177 7.19843 6.3839C7.11166 6.29604 7.11166 6.15462 7.11166 5.8718V5.3385M11.8521 5.3385C11.8521 5.05568 11.8521 4.8476 11.7653 4.75974C11.6785 4.67188 11.5389 4.67188 11.2596 4.67188H7.70421C7.42488 4.67188 7.28521 4.67188 7.19843 4.75974C7.11166 4.8476 7.11166 5.05568 7.11166 5.3385M7.11166 5.3385H6.5191C5.96043 5.3385 5.6811 5.3385 5.50754 5.51422C5.33398 5.68995 5.33398 5.97278 5.33398 6.53843V13.4686C5.33398 14.0343 5.33398 14.3171 5.50754 14.4928C5.6811 14.6685 5.96043 14.6685 6.5191 14.6685H9.1856M12.0002 15.3379H14.6667C15.2952 15.3379 15.6095 15.3379 15.8047 15.1426C16 14.9474 16 14.6331 16 14.0046V11.3381C16 10.7096 16 10.3954 15.8047 10.2001C15.6095 10.0049 15.2952 10.0049 14.6667 10.0049H12.0002C11.3717 10.0049 11.0575 10.0049 10.8622 10.2001C10.667 10.3954 10.667 10.7096 10.667 11.3381V14.0046C10.667 14.6331 10.667 14.9474 10.8622 15.1426C11.0575 15.3379 11.3717 15.3379 12.0002 15.3379Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.666626"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DublicateIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.8617 10.0003H6.66616C6.48206 10.0003 6.33281 9.85105 6.33281 9.66694C6.33281 9.48284 6.48206 9.33359 6.66616 9.33359H11.8617L10.4306 7.90256C10.3005 7.77238 10.3005 7.56131 10.4306 7.43113C10.5608 7.30095 10.7719 7.30095 10.9021 7.43113L12.9022 9.43123C13.0324 9.56141 13.0324 9.77248 12.9022 9.90266L10.9021 11.9028C10.7719 12.0329 10.5608 12.0329 10.4306 11.9028C10.3005 11.7726 10.3005 11.5615 10.4306 11.4313L11.8617 10.0003ZM8.99961 5.66675C8.99961 5.85085 8.85036 6.0001 8.66626 6.0001C8.48216 6.0001 8.33291 5.85085 8.33291 5.66675C8.33291 4.74623 9.07914 4 9.99966 4H15.3333C16.2538 4 17 4.74623 17 5.66675V14.3338C17 15.2544 16.2538 16.0006 15.3333 16.0006H9.99966C9.07914 16.0006 8.33291 15.2544 8.33291 14.3338C8.33291 14.1497 8.48216 14.0005 8.66626 14.0005C8.85036 14.0005 8.99961 14.1497 8.99961 14.3338C8.99961 14.8861 9.44735 15.3339 9.99966 15.3339H15.3333C15.8856 15.3339 16.3333 14.8861 16.3333 14.3338V5.66675C16.3333 5.11444 15.8856 4.6667 15.3333 4.6667H9.99966C9.44735 4.6667 8.99961 5.11444 8.99961 5.66675ZM7.33286 15.3339C7.51697 15.3339 7.66621 15.4831 7.66621 15.6672C7.66621 15.8513 7.51697 16.0006 7.33286 16.0006H5.33276C4.41224 16.0006 3.66602 15.2544 3.66602 14.3338V5.66675C3.66602 4.74623 4.41224 4 5.33276 4H7.33286C7.51697 4 7.66621 4.14925 7.66621 4.33335C7.66621 4.51745 7.51697 4.6667 7.33286 4.6667H5.33276C4.78045 4.6667 4.33271 5.11444 4.33271 5.66675V14.3338C4.33271 14.8861 4.78045 15.3339 5.33276 15.3339H7.33286Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DuplicateInstanceIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.8617 10.0003H6.66616C6.48206 10.0003 6.33281 9.85105 6.33281 9.66694C6.33281 9.48284 6.48206 9.33359 6.66616 9.33359H11.8617L10.4306 7.90256C10.3005 7.77238 10.3005 7.56131 10.4306 7.43113C10.5608 7.30095 10.7719 7.30095 10.9021 7.43113L12.9022 9.43123C13.0324 9.56141 13.0324 9.77248 12.9022 9.90266L10.9021 11.9028C10.7719 12.0329 10.5608 12.0329 10.4306 11.9028C10.3005 11.7726 10.3005 11.5615 10.4306 11.4313L11.8617 10.0003ZM8.99961 5.66675C8.99961 5.85085 8.85036 6.0001 8.66626 6.0001C8.48216 6.0001 8.33291 5.85085 8.33291 5.66675C8.33291 4.74623 9.07914 4 9.99966 4H15.3333C16.2538 4 17 4.74623 17 5.66675V14.3338C17 15.2544 16.2538 16.0006 15.3333 16.0006H9.99966C9.07914 16.0006 8.33291 15.2544 8.33291 14.3338C8.33291 14.1497 8.48216 14.0005 8.66626 14.0005C8.85036 14.0005 8.99961 14.1497 8.99961 14.3338C8.99961 14.8861 9.44735 15.3339 9.99966 15.3339H15.3333C15.8856 15.3339 16.3333 14.8861 16.3333 14.3338V5.66675C16.3333 5.11444 15.8856 4.6667 15.3333 4.6667H9.99966C9.44735 4.6667 8.99961 5.11444 8.99961 5.66675ZM7.33286 15.3339C7.51697 15.3339 7.66621 15.4831 7.66621 15.6672C7.66621 15.8513 7.51697 16.0006 7.33286 16.0006H5.33276C4.41224 16.0006 3.66602 15.2544 3.66602 14.3338V5.66675C3.66602 4.74623 4.41224 4 5.33276 4H7.33286C7.51697 4 7.66621 4.14925 7.66621 4.33335C7.66621 4.51745 7.51697 4.6667 7.33286 4.6667H5.33276C4.78045 4.6667 4.33271 5.11444 4.33271 5.66675V14.3338C4.33271 14.8861 4.78045 15.3339 5.33276 15.3339H7.33286Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PlayIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function BrowserIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.5 8.33073H17.5M5 6.2474H5.00833M7.5 6.2474H15M5.16667 15.8307H14.8333C15.7667 15.8307 16.2335 15.8307 16.59 15.6491C16.9036 15.4893 17.1586 15.2343 17.3183 14.9207C17.5 14.5642 17.5 14.0975 17.5 13.1641V6.83073C17.5 5.89731 17.5 5.4306 17.3183 5.07408C17.1586 4.76047 16.9036 4.5055 16.59 4.34572C16.2335 4.16406 15.7667 4.16406 14.8333 4.16406H5.16667C4.23325 4.16406 3.76653 4.16406 3.41002 4.34572C3.09641 4.5055 2.84144 4.76047 2.68166 5.07408C2.5 5.4306 2.5 5.8973 2.5 6.83073V13.1641C2.5 14.0975 2.5 14.5642 2.68166 14.9207C2.84144 15.2343 3.09641 15.4893 3.41002 15.6491C3.76653 15.8307 4.23324 15.8307 5.16667 15.8307Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
ArrowIcon,
|
||||
CloseIcon,
|
||||
KebabIcon,
|
||||
LocationIcon,
|
||||
} from "../../../icons/ExportCommonIcons";
|
||||
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
|
||||
const VersionHistory = () => {
|
||||
// Start with only v1.0
|
||||
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
||||
const initialVersions = [
|
||||
{
|
||||
versionName: "v1.0",
|
||||
timestamp: "April 09, 2025",
|
||||
savedBy: "Nanni",
|
||||
savedBy: userName,
|
||||
},
|
||||
];
|
||||
|
||||
const [versions, setVersions] = useState(initialVersions);
|
||||
const [selectedVersion, setSelectedVersion] = useState(initialVersions[0]);
|
||||
const userName = localStorage.getItem("userName") ?? "Anonymous";
|
||||
|
||||
// Function to simulate adding a new version
|
||||
const addNewVersion = () => {
|
||||
const newVersionNumber = versions.length + 1;
|
||||
const newVersion = {
|
||||
|
|
@ -30,7 +30,7 @@ const VersionHistory = () => {
|
|||
month: "long",
|
||||
day: "2-digit",
|
||||
}),
|
||||
savedBy: userName, // Simulate user name
|
||||
savedBy: userName,
|
||||
};
|
||||
|
||||
const updated = [newVersion, ...versions];
|
||||
|
|
@ -38,24 +38,25 @@ const VersionHistory = () => {
|
|||
setSelectedVersion(newVersion);
|
||||
};
|
||||
|
||||
// Handle user selecting a version
|
||||
const handleSelectVersion = (version: any) => {
|
||||
setSelectedVersion(version);
|
||||
const reordered = [version, ...versions.filter((v) => v !== version)];
|
||||
setVersions(reordered);
|
||||
};
|
||||
|
||||
const handleTimestampChange = (newTimestamp: string, index: number) => {
|
||||
const updatedVersions = [...versions];
|
||||
updatedVersions[index].timestamp = newTimestamp;
|
||||
setVersions(updatedVersions);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="version-history-container">
|
||||
{/* Header */}
|
||||
<div className="version-history-header">
|
||||
<div className="version-history-title">Version History</div>
|
||||
<div className="version-history-icons">
|
||||
<button
|
||||
className="icon add-icon"
|
||||
onClick={addNewVersion}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<button className="icon add-icon" onClick={addNewVersion}>
|
||||
<AddIcon />
|
||||
</button>
|
||||
<div className="icon kebab-icon">
|
||||
|
|
@ -95,17 +96,27 @@ const VersionHistory = () => {
|
|||
{versions.map((version, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={"saved-version"}
|
||||
className="saved-version"
|
||||
onClick={() => handleSelectVersion(version)}
|
||||
>
|
||||
<div className="version-name">{version.versionName}</div>
|
||||
<div className="version-details">
|
||||
<span className="timestamp">{version.timestamp}</span>
|
||||
<div className="details">
|
||||
<span className="timestamp">
|
||||
<RenameInput
|
||||
value={version.timestamp}
|
||||
onRename={(newTimestamp) =>
|
||||
handleTimestampChange(newTimestamp, index)
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
<span className="saved-by">
|
||||
<div className="user-profile">{userName[0]}</div>
|
||||
<div className="user-profile">{version.savedBy[0]}</div>
|
||||
<div className="user-name">{version.savedBy}</div>
|
||||
</span>
|
||||
</div>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import {
|
|||
useToolMode,
|
||||
useTransformMode,
|
||||
useActiveSubTool,
|
||||
useShortcutStore,
|
||||
} from "../../store/store";
|
||||
import useToggleStore from "../../store/useUIToggleStore";
|
||||
import {
|
||||
|
|
@ -50,6 +51,7 @@ const Tools: React.FC = () => {
|
|||
const { activeModule } = useModuleStore();
|
||||
const { toggleThreeD, setToggleThreeD } = useThreeDStore();
|
||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
||||
const { showShortcuts } = useShortcutStore();
|
||||
|
||||
const {
|
||||
activeTool,
|
||||
|
|
@ -300,7 +302,7 @@ const Tools: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="tools-container">
|
||||
<div className={`tools-container ${showShortcuts ? "visible" : ""}`}>
|
||||
<div className="activeDropicon">
|
||||
{/* Tool Picker (cursor, delete, etc.) */}
|
||||
{["cursor", "free-hand", "delete"].map(
|
||||
|
|
|
|||
|
|
@ -158,13 +158,13 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
<ul className="list-wrapper">
|
||||
{items?.map((item) => (
|
||||
<React.Fragment key={`zone-${item.id}`}>
|
||||
<li className="list-container">
|
||||
<div className={`list-item ${item.active ? "active" : ""}`}>
|
||||
<div className="zone-header">
|
||||
<button
|
||||
className="value"
|
||||
<li
|
||||
className="list-container"
|
||||
onClick={() => handleSelectZone(item.id)}
|
||||
>
|
||||
<div className={`list-item ${item.active ? "active" : ""}`}>
|
||||
<div className="zone-header">
|
||||
<button className="value">
|
||||
<RenameInput
|
||||
value={item.name}
|
||||
onRename={handleZoneNameChange}
|
||||
|
|
|
|||
|
|
@ -478,6 +478,7 @@ const DroppedObjects: React.FC = () => {
|
|||
|
||||
const widthMultiplier = parseFloat(containerWidth) * 0.13;
|
||||
|
||||
console.log('zone?.objects: ', zone?.objects);
|
||||
return (
|
||||
<div
|
||||
onPointerMove={handlePointerMove}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
|
|||
});
|
||||
|
||||
event.dataTransfer.setData("text/plain", cardData);
|
||||
console.log("cardData: ", cardData);
|
||||
console.log('cardData: ', cardData);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -12,10 +12,12 @@ import {
|
|||
} from "../../../../../components/icons/3dChartIcons";
|
||||
|
||||
const TotalCardComponent = ({ object }: any) => {
|
||||
console.log('object: ', object);
|
||||
const [progress, setProgress] = useState<any>(0);
|
||||
const [measurements, setmeasurements] = useState<any>({});
|
||||
const [duration, setDuration] = useState("1h");
|
||||
const [name, setName] = useState(object.header ? object.header : "");
|
||||
console.log('name: ', name);
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const { header, flotingDuration, flotingMeasurements } = useChartStore();
|
||||
|
|
|
|||
|
|
@ -436,6 +436,7 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
|
|||
setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
|
||||
}));
|
||||
|
||||
// version visible hidden
|
||||
interface VersionHistoryState {
|
||||
viewVersionHistory: boolean;
|
||||
setVersionHistory: (value: boolean) => void;
|
||||
|
|
@ -447,3 +448,16 @@ const useVersionHistoryStore = create<VersionHistoryState>((set) => ({
|
|||
}));
|
||||
|
||||
export default useVersionHistoryStore;
|
||||
|
||||
interface ShortcutStore {
|
||||
showShortcuts: boolean;
|
||||
setShowShortcuts: (value: boolean) => void;
|
||||
toggleShortcuts: () => void;
|
||||
}
|
||||
|
||||
export const useShortcutStore = create<ShortcutStore>((set) => ({
|
||||
showShortcuts: false,
|
||||
setShowShortcuts: (value) => set({ showShortcuts: value }),
|
||||
toggleShortcuts: () =>
|
||||
set((state) => ({ showShortcuts: !state.showShortcuts })),
|
||||
}));
|
||||
|
|
@ -1,15 +1,21 @@
|
|||
@use "../../abstracts/variables" as *;
|
||||
@use "../../abstracts/mixins" as *;
|
||||
|
||||
.footer-wrapper {
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
padding: 2px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.footer-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 2px 12px;
|
||||
|
||||
.selection-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -154,3 +160,159 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-helper-container {
|
||||
min-height: 320px;
|
||||
height: 320px;
|
||||
border-radius: 18px;
|
||||
|
||||
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button,
|
||||
.type {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.type {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.2s;
|
||||
|
||||
&.active {
|
||||
background: var(--background-color-button);
|
||||
color: var(--icon-default-color-active);
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-wrapper {
|
||||
padding: 16px 0;
|
||||
margin: 0 12px;
|
||||
height: calc(100% - 60px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 350px);
|
||||
justify-content: center;
|
||||
align-content: start; // Align content to top
|
||||
gap: 16px;
|
||||
overflow-y: auto; // Allow scrolling if content is too tall
|
||||
border-radius: 18px;
|
||||
background: var(--background-color);
|
||||
|
||||
.shortcut-item {
|
||||
min-width: 330px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 0px 16px;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
gap: 12px;
|
||||
|
||||
.shortcut-intro {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.value-wrapper {
|
||||
.name {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: var(--font-size-tiny);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.key {
|
||||
background: linear-gradient(135.11deg, #656DC2 3.48%, #9526E5 91.33%);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: var(--font-size-tiny);
|
||||
color: var(--icon-default-color-active);
|
||||
}
|
||||
|
||||
.key.add {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: var(--input-text-color);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-wrapper.single-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
/* or center if vertical centering is desired */
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.shortcut-helper-overlay {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
// opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&.visible {
|
||||
max-height: 1000px; // adjust as needed
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -42,8 +42,10 @@
|
|||
text-align: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
.zone-header {
|
||||
@include flex-center;
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
|
|
@ -61,12 +63,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--highlight-accent-color);
|
||||
|
||||
.input-value {
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.asset-list {
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
|
||||
.icon {
|
||||
|
|
@ -209,6 +209,7 @@
|
|||
}
|
||||
|
||||
.assets-container {
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
|
@ -266,9 +267,11 @@
|
|||
padding: 8px 0;
|
||||
@include flex-center;
|
||||
color: var(--text-button-color);
|
||||
transition: all 0.1s linear;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,10 @@
|
|||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
background: color-mix(in srgb,
|
||||
var(--highlight-accent-color) 60%,
|
||||
transparent
|
||||
);
|
||||
transparent);
|
||||
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
|
|
@ -79,11 +78,9 @@
|
|||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
background: color-mix(in srgb,
|
||||
var(--highlight-accent-color) 60%,
|
||||
transparent
|
||||
);
|
||||
transparent);
|
||||
}
|
||||
|
||||
.drop-down-container {
|
||||
|
|
@ -180,6 +177,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.tools-container {
|
||||
transition: transform 0.4s ease-in-out 0.01s;
|
||||
|
||||
&.visible {
|
||||
transform: translate(-50%, -310px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.exitPlay {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -195,14 +202,17 @@
|
|||
z-index: 100;
|
||||
isolation: isolate;
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
background: var(--accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
|
||||
&::after {
|
||||
animation: pulse 1s ease-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -219,9 +229,11 @@
|
|||
opacity: 0;
|
||||
scale: 0.5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
scale: 2;
|
||||
|
|
|
|||
|
|
@ -484,8 +484,20 @@
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.add-icon {
|
||||
transform: scale(1.1);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.kebab-icon {
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
transform: rotate(90deg) scale(0.8);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -519,7 +531,7 @@
|
|||
.version-history-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 12px;
|
||||
|
||||
.location-details {
|
||||
display: flex;
|
||||
|
|
@ -551,7 +563,7 @@
|
|||
border-radius: 13px;
|
||||
padding: 4px 8px;
|
||||
position: relative;
|
||||
/* Ensure position relative for ::after */
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
&:not(:first-child) .version-name::after {
|
||||
|
|
@ -566,10 +578,19 @@
|
|||
}
|
||||
|
||||
.version-details {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
}
|
||||
|
||||
.saved-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -596,11 +617,14 @@
|
|||
}
|
||||
|
||||
.timestamp {
|
||||
.input-value {
|
||||
color: var(--text-color);
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1495,6 +1519,7 @@
|
|||
|
||||
&:hover {
|
||||
outline: 1px solid var(--border-color-accent);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
transition: all 0.2s;
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
}
|
||||
|
||||
.floating {
|
||||
width: calc(var(--realTimeViz-container-width) * 0.2px);
|
||||
// width: calc(var(--realTimeViz-container-width) * 0.2px);
|
||||
|
||||
transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
|
||||
// transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
|
||||
|
||||
min-width: 230px;
|
||||
max-width: 300px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue