From 299b3ed3810122aa63b57108a285cafbac0fd83b Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 19 Mar 2025 18:15:52 +0530 Subject: [PATCH] tools updated --- app/src/components/icons/ExportToolsIcons.tsx | 105 ++++++-- app/src/components/ui/Tools.tsx | 228 +++++++++++++++++- app/src/styles/components/tools.scss | 145 +++++++++++ 3 files changed, 460 insertions(+), 18 deletions(-) diff --git a/app/src/components/icons/ExportToolsIcons.tsx b/app/src/components/icons/ExportToolsIcons.tsx index afffc88..2b7134a 100644 --- a/app/src/components/icons/ExportToolsIcons.tsx +++ b/app/src/components/icons/ExportToolsIcons.tsx @@ -10,11 +10,15 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) { @@ -37,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,35 +86,37 @@ export function FloorIcon({ isActive }: { isActive: boolean }) { /> ); @@ -366,7 +372,10 @@ export function PillerIcon({ isActive }: { isActive: boolean }) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -563,3 +572,67 @@ export function CursorIcon({ isActive }: { isActive: boolean }) { ); } + +export function PlayIcon({ isActive }: { isActive: boolean }) { + return ( + + + + ); +} + +export function PenIcon({ isActive }: { isActive: boolean }) { + return ( + + + + ); +} + +export function SaveTemplateIcon({ isActive }: { isActive: boolean }) { + return ( + + + + + ); +} diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index d1a7a14..291a8f2 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -1,8 +1,232 @@ -import React from 'react'; +import React, { useEffect, useRef, useState } from "react"; +import { + AsileIcon, + CommentIcon, + CursorIcon, + FloorIcon, + FreeMoveIcon, + PenIcon, + PlayIcon, + SaveTemplateIcon, + WallIcon, + ZoneIcon, +} from "../icons/ExportToolsIcons"; +import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons"; +import useModuleStore from "../../store/useModuleStore"; const Tools: React.FC = () => { + const [activeTool, setActiveTool] = useState("cursor"); + const [activeSubTool, setActiveSubTool] = useState("cursor"); + const [toggleThreeD, setToggleThreeD] = useState(true); + + const dropdownRef = useRef(null); + const [openDrop, setOpenDrop] = useState(false); + + const { activeModule } = useModuleStore(); + + // Reset activeTool whenever activeModule changes + useEffect(() => { + setActiveTool(activeSubTool); + setActiveSubTool(activeSubTool); + }, [activeModule]); + + useEffect(() => { + const handleOutsideClick = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setOpenDrop(false); // Close the dropdown + } + }; + + document.addEventListener("mousedown", handleOutsideClick); + + return () => { + document.removeEventListener("mousedown", handleOutsideClick); + }; + }, []); + return ( -
Tools
+
+
+
+ {activeSubTool == "cursor" && ( +
{ + setActiveTool("cursor"); + }} + > + +
+ )} + {activeSubTool == "free-hand" && ( +
{ + setActiveTool("free-hand"); + }} + > + +
+ )} + {activeModule !== "visualization" && ( +
{ + setOpenDrop(!openDrop); + console.log(openDrop); + }} + > + + {openDrop && ( +
+
{ + setOpenDrop(false); + setActiveTool("cursor"); + setActiveSubTool("cursor"); + }} + > +
+ {activeSubTool === "cursor" && } +
+ +
Cursor
+
+
{ + setOpenDrop(false); + setActiveTool("free-hand"); + setActiveSubTool("free-hand"); + }} + > +
+ {activeSubTool === "free-hand" && } +
+ +
Free Hand
+
+
+ )} +
+ )} +
+
+ {!toggleThreeD && activeModule === "builder" && ( + <> +
+
+
{ + setActiveTool("draw-wall"); + }} + > + +
+
{ + setActiveTool("draw-zone"); + }} + > + +
+
{ + setActiveTool("draw-aisle"); + }} + > + +
+
{ + setActiveTool("draw-floor"); + }} + > + +
+
+ + )} + {activeModule === "simulation" && ( + <> +
+
+
{ + setActiveTool("pen"); + }} + > + +
+
+ + )} + {activeModule === "visualization" && ( + <> +
+
+
+ +
+
+ + )} +
+
+
{ + setActiveTool("comment"); + }} + > + +
+
{ + setActiveTool("play"); + }} + > + +
+
+
+
{ + setToggleThreeD(!toggleThreeD); + }} + > +
+ 2d +
+
+ 3d +
+
+
); }; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index e69de29..e4149c0 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -0,0 +1,145 @@ +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + +.tools-container { + @include flex-center; + position: fixed; + bottom: 32px; + left: 50%; + transform: translate(-50%, 0); + padding: 8px; + gap: 10px; + box-shadow: #{$box-shadow-medium}; + border-radius: #{$border-radius-large}; + width: fit-content; + transition: width 0.2s; + .split { + height: 20px; + width: 2px; + border-radius: 2px; + background: var(--highlight-accent-color); + } + .draw-tools, + .general-options, + .activeDropicon { + @include flex-center; + gap: 8px; + interpolate-size: allow-keywords; + width: 0; + opacity: 0; + animation: expandWidth 0.2s ease-in-out forwards; + .tool-button { + @include flex-center; + height: 28px; + width: 28px; + cursor: pointer; + border-radius: #{$border-radius-small}; + &:hover { + background: color-mix( + in srgb, + var(--highlight-accent-color) 60%, + transparent + ); + } + } + .active { + background-color: var(--accent-color); + &:hover { + background-color: var(--accent-color); + } + } + } + .activeDropicon { + gap: 2px; + .drop-down-option-button { + @include flex-center; + height: 28px; + cursor: pointer; + border-radius: #{$border-radius-small}; + position: relative; + &:hover { + background: color-mix( + in srgb, + var(--highlight-accent-color) 60%, + transparent + ); + } + .drop-down-container { + position: absolute; + bottom: 40px; + left: 0; + box-shadow: #{$box-shadow-medium}; + padding: 8px; + border-radius: #{$border-radius-large}; + .option-list { + margin: 4px 0; + display: flex; + align-items: center; + white-space: nowrap; + border-radius: #{$border-radius-medium}; + gap: 6px; + padding: 4px; + &:hover { + background-color: var(--highlight-accent-color); + color: var(--accent-color); + path { + stroke: var(--accent-color); + } + } + .active-option { + height: 12px; + width: 12px; + @include flex-center; + } + .option { + color: inherit; + } + } + } + } + } + .toggle-threed-button { + @include flex-center; + padding: 3px; + border-radius: #{$border-radius-small}; + background-color: var(--highlight-accent-color); + gap: 2px; + position: relative; + .toggle-option { + font-size: var(--font-size-small); + padding: 2px; + z-index: 1; + transition: all 0.2s; + } + &::after { + content: ""; + position: absolute; + background-color: var(--accent-color); + left: 3px; + top: 3px; + height: 18px; + width: 18px; + border-radius: #{$border-radius-small}; + transition: all 0.2s; + } + .active { + color: var(--highlight-accent-color); + } + } + .toggled { + &::after { + left: 24px; + } + } +} + +@keyframes expandWidth { + from { + width: 0; + opacity: 0; + } + to { + width: fit-content; + opacity: 1; + } +}