@activecollab/components/dist/esm/presentation/whiteboard/bottomDock.d.ts

ActiveCollab Components

import React, { ReactElement, ReactNode } from "react";
export declare const ToolSurface: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const verticalDivider = "\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n";
export declare const StyledBottomDock: import("styled-components").StyledComponent<"div", any, {}, never>;
/**
 * The floating second toolbar row — a small pill above the dock that holds the
 * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).
 *
 * It is the same surface as the dock itself, so a family reads as an extension
 * of the button that opened it rather than as a different kind of UI. Only one
 * pill is ever up, because only one tool is ever armed.
 */
export declare const StyledToolPill: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledHint: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../..").ICaptionProps & Omit<import("../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
export declare const TOOL_HINTS: {
    readonly circle: "Click to drop a default circle, or draw one to size. Press O for a circle.";
    readonly roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.";
    readonly triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.";
    readonly connector: "Drag from one element to another to connect them. Press C to connect.";
    readonly projectElements: "Put a task or a project on the board — pick which above, then draw its card.";
    readonly project: "Draw a box to place a project card, then pick the project it shows.";
    readonly task: "Draw a box to place a task card, then pick the task it shows.";
    readonly link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.";
    readonly file: "Draw a box to place a file, or drop one on the board. Press F for file.";
    readonly sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.";
    readonly text: "Click anywhere on the canvas to start typing. Press T for text.";
    readonly draw: "Click and drag to draw freehand. Press D for the pen.";
    readonly shapes: "Pick a shape above, then draw it on the board. Press R for a rectangle.";
};
export type ToolHintKey = keyof typeof TOOL_HINTS;
export type ShapeTool = "circle" | "roundedRectangle" | "triangle";
/**
 * The armed board tool. Link, File, Project, Task and the three shapes are
 * wired — arming one turns the next canvas click into "drop the default-size
 * element here" and a drag into "draw one this big"; everything else stays a
 * mock, so the board is otherwise always in select mode.
 */
export type BoardTool = "select" | "link" | "file" | "project" | "task" | ShapeTool;
export declare const SHAPE_TOOLS: readonly ShapeTool[];
export declare const isShapeTool: (tool: BoardTool) => tool is ShapeTool;
/**
 * What a dock button arms the instant its pill opens.
 *
 * Opening a family and choosing inside it are two separate decisions, and the
 * second one has a right answer often enough that asking for it every time is
 * just a toll: a shape is usually a rectangle, and the thing people put on a
 * board is usually a task. So the pill opens with that member already armed and
 * the gesture can start immediately — picking another member is a correction,
 * not a required step.
 */
export declare const DEFAULT_SHAPE_TOOL: ShapeTool;
export declare const DEFAULT_PROJECT_ELEMENT_TOOL: BoardTool;
export declare const SHAPE_DEFAULT_SIZES: Record<ShapeTool, {
    width: number;
    height: number;
}>;
export declare const CARD_PREVIEW_HEIGHT = 240;
/** The kinds of card the draw gesture can place. */
export type DrawableTool = Exclude<BoardTool, "select">;
export interface ToolButtonProps {
    tip: string;
    active?: boolean;
    children: ReactNode;
    onClick?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
}
export declare const ToolButton: ({ tip, active, children, onClick, onMouseEnter, onMouseLeave, }: ToolButtonProps) => ReactElement;
export interface BottomDockProps {
    activeTool: BoardTool;
    onToolChange: (tool: BoardTool) => void;
}
export declare const BottomDock: ({ activeTool, onToolChange, }: BottomDockProps) => ReactElement;
//# sourceMappingURL=bottomDock.d.ts.map