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

ActiveCollab Components

import React, { ReactElement } from "react";
import { CanvasElementDef, ShapeElementState, ShapeType, StickyTextStyle } from "./elements";
import { FileElementDef } from "./fileElement";
import { LinkElementDef } from "./linkElement";
import { ProjectElementDef } from "./projectElements";
export type RightPanel = "inspector" | "comments" | null;
export interface ElementTraits {
    geometry: boolean;
    fill: boolean;
    renamable?: boolean;
    fillTransparent?: boolean;
    stroke: boolean;
    text: boolean;
    autoWidth?: boolean;
    autoHeight?: boolean;
    readOnly?: boolean;
}
export declare const elementTraits: (def: CanvasElementDef) => ElementTraits;
/**
 * A project / task card's traits. It is the most constrained element on the
 * board, and every "false" here is a fact about the card rather than a feature
 * that has not been built yet:
 *
 *   fill / stroke / text   the card's appearance is the design system's, not
 *                          the board's — recolouring it would make a task look
 *                          like something it is not on another person's screen.
 *   autoHeight             the card is content-sized; only its width is given.
 *   renamable              the title belongs to the task / project record.
 *
 * Rotation is absent for the same reason it is absent on link and file cards:
 * the Geometry group for a card simply does not render one.
 */
export declare const PROJECT_ELEMENT_TRAITS: ElementTraits;
/**
 * A LIMITED-ACCESS card's traits: the project card's, with everything the
 * viewer could have changed taken away.
 *
 * The panel is not empty, and that is deliberate — geometry still renders, so
 * the viewer can see that the thing has a position and a size, which is
 * precisely the amount that Workload's limited cell exposes (its data shape is
 * a quantity and an offset). It simply cannot be edited.
 */
export declare const LIMITED_ELEMENT_TRAITS: ElementTraits;
export declare const TYPE_LABEL: Record<ShapeType, string>;
export declare const sameColor: (a: string | undefined, b: string) => boolean;
export declare const StyledInspectorSidebar: import("styled-components").StyledComponent<"aside", any, {}, never>;
export declare const StyledInspectorResizer: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledInspectorBody: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledPropGroups: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledInspectorHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledInspectorEmpty: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledPropGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledPropRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledFieldGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledControl: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledCheckboxRow: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledBody: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledAutoField: import("styled-components").StyledComponent<"div", any, {}, never>;
export declare const StyledSegmented: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface NumberFieldProps {
    label: string;
    value: number;
    min?: number;
    unit?: string;
    onCommit: (value: number) => void;
}
export declare const NumberField: ({ label, value, min, unit, onCommit, }: NumberFieldProps) => ReactElement;
export declare const AutoField: ({ label }: {
    label: string;
}) => ReactElement;
export declare const ReadOnlyField: ({ label, value, }: {
    label: string;
    value: string;
}) => ReactElement;
export interface OptionSelectProps {
    options: {
        id: string | number;
        name: string;
    }[];
    value: string | number;
    triggerLabel: string;
    onChange: (value: string | number) => void;
}
export declare const OptionSelect: ({ options, value, triggerLabel, onChange, }: OptionSelectProps) => ReactElement;
export declare const TRANSPARENT_OPTION: {
    id: string;
    name: string;
    color: string;
    textColor: string;
};
export declare const colorName: (hex: string | undefined) => string;
export interface ColorPickerFieldProps {
    value: string | undefined;
    disabled?: boolean;
    includeTransparent?: boolean;
    onSelect: (color: string) => void;
}
export declare const ColorPickerField: ({ value, disabled, includeTransparent, onSelect, }: ColorPickerFieldProps) => ReactElement;
export interface RightInspectorProps {
    selectedId: string | null;
    positions: Record<string, {
        x: number;
        y: number;
    }>;
    setPositions: React.Dispatch<React.SetStateAction<Record<string, {
        x: number;
        y: number;
    }>>>;
    sizes: Record<string, {
        width: number;
        height: number;
    }>;
    setSizes: React.Dispatch<React.SetStateAction<Record<string, {
        width: number;
        height: number;
    }>>>;
    rotations: Record<string, number>;
    setRotations: React.Dispatch<React.SetStateAction<Record<string, number>>>;
    shapes: Record<string, ShapeElementState>;
    setShapes: React.Dispatch<React.SetStateAction<Record<string, ShapeElementState>>>;
    stickyStyle: StickyTextStyle;
    setStickyStyle: React.Dispatch<React.SetStateAction<StickyTextStyle>>;
    links: LinkElementDef[];
    setLinks: React.Dispatch<React.SetStateAction<LinkElementDef[]>>;
    files: FileElementDef[];
    setFiles: React.Dispatch<React.SetStateAction<FileElementDef[]>>;
    createdShapes: CanvasElementDef[];
    projectElements: ProjectElementDef[];
    setProjectElements: React.Dispatch<React.SetStateAction<ProjectElementDef[]>>;
    locks: Record<string, boolean>;
    setLocks: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
}
export declare const RightInspector: ({ selectedId, positions, setPositions, sizes, setSizes, rotations, setRotations, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, createdShapes, projectElements, setProjectElements, locks, setLocks, }: RightInspectorProps) => ReactElement;
//# sourceMappingURL=inspector.d.ts.map