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

ActiveCollab Components

import React, { ReactElement } from "react";
import { ProjectElementDef } from "./projectElements";
export type OutlineElementType = "circle" | "roundedRectangle" | "triangle" | "postit" | "text" | "freehand" | "link" | "file" | "task" | "project";
export type OutlineIcon = React.ComponentType<React.SVGProps<SVGSVGElement>>;
export declare const OUTLINE_TYPE_ICONS: Record<OutlineElementType, OutlineIcon>;
export declare const OUTLINE_TYPE_LABELS: Record<OutlineElementType, string>;
export interface OutlineElement {
    id: string;
    name: string | null;
    type: OutlineElementType;
    locked?: boolean;
    connections?: number;
    renamable?: boolean;
    limited?: boolean;
    groupId: string | null;
}
export interface OutlineGroup {
    id: string;
    name: string;
}
export declare const OUTLINE_GROUPS: OutlineGroup[];
export declare const OUTLINE_ELEMENTS: OutlineElement[];
export declare const OUTLINE_MIN_WIDTH = 260;
export declare const OUTLINE_MAX_WIDTH: number;
export declare const OUTLINE_WIDTH = 320;
export declare const UNGROUPED = "__ungrouped__";
export declare const StyledOutlineSidebar: import("styled-components").StyledComponent<"aside", any, {}, never>;
export declare const StyledOutlineResizer: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledOutlineBody: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledOutlineRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledOutlineGroupRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledOutlineChildRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledOutlineToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
export declare const StyledOutlineCounter: import("styled-components").StyledComponent<"span", any, {}, never>;
export declare const OutlineCounter: ({ count }: {
    count: number;
}) => ReactElement;
export declare const StyledOutlineSignifiers: import("styled-components").StyledComponent<"span", any, {}, never>;
export declare const StyledOutlineTypeIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
export declare const StyledOutlineName: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const outlineLabel: (element: OutlineElement) => string;
/**
 * Outline rows for the entity cards on the canvas.
 *
 * They are DERIVED on every render rather than seeded into the outline's own
 * state the way the mock elements are. That is the whole trick that keeps this
 * cheap: the canvas already owns these elements, so there is no second copy to
 * reconcile when one is added, resolved or cancelled, and the drag-reorder and
 * grouping state the outline holds for its mock rows is left completely alone.
 *
 * The row id IS the canvas element id, which is what makes selection sync free
 * in both directions — the sidebar and the canvas already share `selectedId`.
 */
export declare const entityOutlineRows: (elements: ProjectElementDef[], locks: Record<string, boolean>) => OutlineElement[];
export declare const OUTLINE_MENU_LIST_STYLE: {
    padding: string;
};
export declare const OUTLINE_MENU_WIDTH = 264;
export declare const OutlineMenuSliderStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
export declare const StyledOutlineElementMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const ARRANGE_ITEMS: {
    label: string;
    Icon: OutlineIcon;
}[];
export interface OutlineElementOptionsMenuProps {
    locked: boolean;
    onToggleLock: () => void;
    renamable?: boolean;
}
export declare const OutlineElementOptionsMenu: ({ locked, onToggleLock, renamable, }: OutlineElementOptionsMenuProps) => ReactElement;
export declare const OutlineGroupOptionsMenu: () => ReactElement;
export type DropSpot = {
    kind: "before" | "after";
    id: string;
} | {
    kind: "into";
    id: string;
};
export type LeftPanel = "info" | "outline";
export declare const INFO_ROWS: [string, string][];
export declare const LeftMenuContents: ({ sidebarOpen, onToggleSidebar, boardName, onRenameBoard, }: {
    sidebarOpen: boolean;
    onToggleSidebar: () => void;
    boardName: string;
    onRenameBoard: (name: string) => void;
}) => ReactElement;
export declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledChooseRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledPanelChooseSlot: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledInfoPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const InfoPanelContent: ({ boardName, }: {
    boardName: string;
}) => ReactElement;
export declare const StyledNewGroupRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface LeftSidebarProps {
    selectedId: string | null;
    onSelect: (id: string | null) => void;
    activePanel: LeftPanel;
    onPanelChange: (panel: LeftPanel) => void;
    sidebarOpen: boolean;
    onToggleSidebar: () => void;
    boardName: string;
    onRenameBoard: (name: string) => void;
    projectElements: ProjectElementDef[];
    locks: Record<string, boolean>;
    onToggleElementLock: (id: string) => void;
}
export declare const LeftSidebar: ({ selectedId, onSelect, activePanel, onPanelChange, sidebarOpen, onToggleSidebar, boardName, onRenameBoard, projectElements, locks, onToggleElementLock, }: LeftSidebarProps) => ReactElement;
//# sourceMappingURL=outline.d.ts.map