useTool

function useTool(): UseToolResult;

interface UseToolResult {
    activeTool: string;
    setTool: (toolId: string) => void;
    toolConfig: Record<string, unknown>;
    setToolConfig: (config: Record<string, unknown>) => void;
}

import { useTool } from '@hfu.digital/boardkit-react';
import { TOOL_IDS } from '@hfu.digital/boardkit-core';

function ToolSelector() {
    const { activeTool, setTool, toolConfig, setToolConfig } = useTool();

    return (
        <div>
            <button
                onClick={() => setTool(TOOL_IDS.PEN)}
                data-active={activeTool === TOOL_IDS.PEN}
            >
                Pen
            </button>
            <button
                onClick={() => setTool(TOOL_IDS.SHAPE)}
                data-active={activeTool === TOOL_IDS.SHAPE}
            >
                Shape
            </button>
            <button
                onClick={() => setTool(TOOL_IDS.ERASER)}
                data-active={activeTool === TOOL_IDS.ERASER}
            >
                Eraser
            </button>

            {activeTool === TOOL_IDS.SHAPE && (
                <select
                    value={(toolConfig.shapeType as string) ?? 'rectangle'}
                    onChange={(e) => setToolConfig({ shapeType: e.target.value })}
                >
                    <option value="rectangle">Rectangle</option>
                    <option value="ellipse">Ellipse</option>
                    <option value="triangle">Triangle</option>
                    <option value="line">Line</option>
                    <option value="arrow">Arrow</option>
                </select>
            )}
        </div>
    );
}

import { TOOL_IDS } from '@hfu.digital/boardkit-core';

TOOL_IDS.PEN          // 'pen'
TOOL_IDS.SHAPE        // 'shape'
TOOL_IDS.SELECT       // 'select'
TOOL_IDS.ERASER       // 'eraser'
TOOL_IDS.TEXT         // 'text'
TOOL_IDS.HAND         // 'hand'
TOOL_IDS.STICKY_NOTE  // 'stickyNote'
TOOL_IDS.CONNECTOR    // 'connector'
TOOL_IDS.LASER        // 'laser'