Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 12814x 3847x 3847x 3847x 3847x 104x 3951x 3847x 3951x 3847x 104x 3847x 3951x 3847x 11541x 3847x 104x 3847x 3951x 3847x 11541x 15388x | import { useCommand } from "just-search-it";
import { Hand, MousePointer } from "lucide-react";
import { motion } from "motion/react";
import { useSelector } from "react-redux";
import { Button } from "@/ahuora-design-system/ui/button";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import { cn } from "@/lib/utils";
import { RootState } from "@/store/store";
import { TogglePointerState } from "../flowsheet/Canvas/FlowsheetCommands";
//will expand later on once functionality is added
const Pointers = () => {
const pointerState = useSelector((state: RootState) => state.pointer);
const handleSetPointerCommand = useCommand(TogglePointerState, "select");
const handleSetHandCommand = useCommand(TogglePointerState, "hand");
const activeTool = pointerState.state === "move" ? "move" : "select";
return (
<div className="relative border-x border-border px-1 flex flex-row gap-1 h-full items-center">
<motion.div
className="pointer-events-none absolute left-1 h-9 w-9 -translate-y-1/2 rounded-md bg-secondary shadow-sm"
animate={{ x: activeTool === "move" ? 40 : 0 }}
transition={{ type: "spring", stiffness: 520, damping: 38 }}
/>
<ToolTipCover
content="Select tool (S)
Select single/multiple operations and groups"
asChild
>
<Button
size="icon"
variant="ghost"
className={cn(
"relative z-10 hover:bg-transparent",
activeTool === "select" &&
"text-secondary-foreground hover:text-secondary-foreground",
)}
onClick={handleSetPointerCommand}
>
<MousePointer size={18} />
</Button>
</ToolTipCover>
{/* <ToolTipCover
content="Arc Pointer (A)
Allows you to add arcs between material nodes, decision nodes and unit operations." asChild>
<Button size="icon" variant="disabled">
<Spline size={18}/>
</Button>
</ToolTipCover> */}
<ToolTipCover
content="Move Tool (M)
Move the flowsheet and select single operations and groups"
asChild
>
<Button
size="icon"
variant="ghost"
className={cn(
"relative z-10 hover:bg-transparent",
activeTool === "move" &&
"text-secondary-foreground hover:text-secondary-foreground",
)}
onClick={handleSetHandCommand}
>
<Hand size={18} />
</Button>
</ToolTipCover>
</div>
);
};
export default Pointers;
|