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

ActiveCollab Components

import React, { ReactElement } from "react";
export declare const ELEMENT_FILL = "#ffffff";
export declare const ELEMENT_STROKE = "#374151";
export declare const ELEMENT_TEXT = "#1f2937";
export declare const STICKY_FILL = "#fbbf24";
export declare const SELECTION_BLUE = "#3b82f6";
export declare const COLOR_PALETTE: string[];
export declare const FONT_SIZE_OPTIONS: number[];
export declare const THICKNESS_OPTIONS: number[];
export declare const OPACITY_OPTIONS: number[];
export declare const RADIUS_OPTIONS: number[];
export declare const ELEMENT_BODIES: Record<string, string>;
export declare const COLOR_OPTIONS: {
    id: string;
    name: string;
    color: string;
    textColor: string;
}[];
export type ShapeType = "rectangle" | "roundedRectangle" | "circle" | "triangle";
export type TextAlign = "left" | "center" | "right" | "justify";
export interface ShapeElementState {
    type: ShapeType;
    fill: string;
    fillOpacity: number;
    stroke: string;
    strokeOpacity: number;
    strokeWidth: number;
    strokeDash?: "5,5" | "2,2";
    borderRadius: number;
    fontSize: number;
    bold: boolean;
    italic: boolean;
    underline: boolean;
    strikethrough: boolean;
    textColor: string;
    align?: TextAlign;
}
export declare const defaultShapeState: (type: ShapeType) => ShapeElementState;
export declare const withOpacity: (color: string, opacityPct: number) => string;
export declare const shapeBorder: (state: ShapeElementState) => string;
export declare const stickyGradient: (color: string, opacity?: number) => string;
export type GridSize = "off" | "small" | "large";
export declare const GRID_LEVELS: {
    value: GridSize;
    label: string;
    dotSpacing: number | null;
    snapStep: number | null;
}[];
export declare const gridLevel: (value: GridSize) => (typeof GRID_LEVELS)[number];
export interface CanvasElementDef {
    id: string;
    kind: "shape" | "sticky";
    initialType?: ShapeType;
    x: number;
    y: number;
    width: number;
    height: number;
}
export declare const CANVAS_ELEMENTS: CanvasElementDef[];
export declare const INITIAL_SHAPES: Record<string, ShapeElementState>;
export declare const INITIAL_POSITIONS: Record<string, {
    x: number;
    y: number;
}>;
export declare const snapValue: (value: number, step: number | null) => number;
export declare const StyledCanvasLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledCanvasElement: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledSticky: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledHandles: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const RESIZE_DIRECTIONS: string[];
export declare const ResizeHandles: () => ReactElement;
export declare const StyledFormattingToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledToolbarButton: import("styled-components").StyledComponent<"button", any, {}, never>;
export declare const StyledToolbarLink: import("styled-components").StyledComponent<"a", any, {}, never>;
export declare const StyledFontSizeValue: import("styled-components").StyledComponent<"span", any, {}, never>;
export declare const stopClick: (event: React.MouseEvent) => void;
export declare const SUBMENU_SHADOW = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
export declare const StyledColorPopover: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const WHEEL_SIZE = 200;
export declare const WHEEL_RADIUS: number;
export declare const StyledColorWheel: import("styled-components").StyledComponent<"button", any, {}, never>;
export interface ColorWheelProps {
    onColorChange: (color: string) => void;
}
export declare const ColorWheel: ({ onColorChange, }: ColorWheelProps) => ReactElement;
export declare const StyledSwatchRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface ColorSwatchRowProps {
    selectedColor?: string;
    includeTransparent?: boolean;
    onSelect: (color: string) => void;
    onAddClick: () => void;
}
export declare const ColorSwatchRow: ({ selectedColor, includeTransparent, onSelect, onAddClick, }: ColorSwatchRowProps) => ReactElement;
export declare const SHAPE_TYPE_ICON: Record<ShapeType, ReactElement>;
export declare const SHAPE_TYPE_OPTIONS: {
    type: ShapeType;
    label: string;
}[];
export declare const BORDER_STYLE_OPTIONS: {
    value?: ShapeElementState["strokeDash"];
    label: string;
}[];
export interface ToolbarActionsProps {
    locked: boolean;
    onToggleLock: () => void;
    onDelete: () => void;
}
export declare const ToolbarActions: ({ locked, onToggleLock, onDelete, }: ToolbarActionsProps) => ReactElement;
export interface ToolbarShapeTypeMenuProps {
    value: ShapeType;
    onChange: (type: ShapeType) => void;
}
export declare const ShapeTypeMenu: ({ value, onChange, }: ToolbarShapeTypeMenuProps) => ReactElement;
export interface ToolbarAlignmentMenuProps {
    value: TextAlign;
    onChange: (align: TextAlign) => void;
    disabled?: boolean;
}
export declare const AlignmentMenu: ({ value, onChange, disabled, }: ToolbarAlignmentMenuProps) => ReactElement;
export interface ToolbarColorSwatchProps {
    value: string;
    includeTransparent?: boolean;
    label: string;
    onChange: (color: string) => void;
}
export declare const ToolbarColorSwatch: ({ value, includeTransparent, label, onChange, }: ToolbarColorSwatchProps) => ReactElement;
export interface ToolbarTextControlsProps {
    fontSize: number;
    styleFlags: {
        bold: boolean;
        italic: boolean;
        underline: boolean;
        strikethrough: boolean;
    };
    align: TextAlign;
    onFontSize: (size: number) => void;
    onToggleStyle: (key: TextStyleKey) => void;
    onAlign: (align: TextAlign) => void;
}
export declare const ToolbarTextControls: ({ fontSize, styleFlags, align, onFontSize, onToggleStyle, onAlign, }: ToolbarTextControlsProps) => ReactElement;
export interface ShapeFormattingToolbarProps {
    element: ShapeElementState;
    onUpdate: (partial: Partial<ShapeElementState>) => void;
    onDelete: () => void;
    locked: boolean;
    onToggleLock: () => void;
}
export declare const ShapeFormattingToolbar: ({ element, onUpdate, onDelete, locked, onToggleLock, }: ShapeFormattingToolbarProps) => ReactElement;
export interface StickyTextStyle {
    fontSize: number;
    bold: boolean;
    italic: boolean;
    strikethrough: boolean;
    underline: boolean;
    align: TextAlign;
    textColor: string;
    color: string;
    fillOpacity: number;
}
export interface PostitFormattingToolbarProps {
    value: StickyTextStyle;
    onChange: (next: StickyTextStyle) => void;
    onDelete: () => void;
    locked: boolean;
    onToggleLock: () => void;
}
export declare const PostitFormattingToolbar: ({ value, onChange, onDelete, locked, onToggleLock, }: PostitFormattingToolbarProps) => ReactElement;
export declare const renderShapeBody: (def: CanvasElementDef, state: ShapeElementState, width?: number, height?: number) => ReactElement;
export declare const ALIGN_OPTIONS: {
    value: TextAlign;
    label: string;
    icon: ReactElement;
}[];
export type TextStyleKey = "bold" | "italic" | "underline" | "strikethrough";
export declare const STYLE_OPTIONS: {
    key: TextStyleKey;
    label: string;
    icon: ReactElement;
}[];
//# sourceMappingURL=elements.d.ts.map