Function FloatingToolbar

components/FloatingToolbar.tsx:36–148

()

};

const FloatingToolbar = () => {
  const selectedTool = useStateStore((s: StateStore) => s.selectedTool);
  const setSelectedTool = useStateStore((s) => s.setSelectedTool);
  const [isLocked, setIsLocked] = useState(false);

  // History store
  const undo = useHistoryStore((state) => state.undo);
  const redo = useHistoryStore((state) => state.redo);
  const canUndo = useHistoryStore((state) => state.past.length > 0);
  const canRedo = useHistoryStore((state) => state.future.length > 0);

  // Keyboard shortcuts for undo/redo
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === "z") {
        e.preventDefault();
        if (e.shiftKey) {
          redo();
        } else {
          undo();
        }
      }
      if ((e.ctrlKey || e.metaKey) && e.key === "y") {
        e.preventDefault();
        redo();
      }
    },
    [undo, redo]
  );

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleKeyDown]);

  const tools: Tool[] = [
    { id: "lock", icon: Lock, label: "Lock", special: true },
    { id: "hand", icon: Hand, label: "Hand Tool" },
    { id: "pointer", icon: MousePointer, label: "Select", isDefault: true },
    { id: "rectangle", icon: Square, label: "Rectangle" },
    { id: "ellipse", icon: Circle, label: "Ellipse" },
    { id: "arrow", icon: ArrowRight, label: "Arrow" },
    { id: "line", icon: Minus, label: "Line" },
    { id: "pen", icon: Edit3, label: "Pen" },
    { id: "eraser", icon: Eraser, label: "Eraser" },
    { id: "text", icon: Type, label: "Text" },
    { id: "image", icon: Image, label: "Image" },
    { id: "duplicate", icon: Copy, label: "Duplicate" },
    { id: "connect", icon: Share2, label: "Connect" },
  ];

  const handleToolClick = (toolId: selectedToolType) => {
    if (toolId === "lock") {
      setIsLocked(!isLocked);
    } else {
      setSelectedTool(toolId);
    }
  };