import { type Snippet } from "svelte";
import type { DOMAttributes } from "svelte/elements";
import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, FontSpec, BrowserUIModel, PreparedShape, PointXY, FixedElementConstraints, PopupPosition, OverlaySpec, PaperOptions } from "@visuallyjs/browser-ui";
/**
 * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
 */
export interface SvelteSurfaceRenderOptions extends Omit<SurfaceOptions, "directRender" | "enhancedView" | "view" | "templates"> {
}
/**
 * Render options for a PaperComponent. This interface is the same as PaperOptions but with several vanilla-only options removed.
 */
export interface SveltePaperRenderOptions extends Omit<PaperOptions, "directRender" | "enhancedView" | "view" | "templates"> {
}
/**
 * Definition of a node - its component, and behaviour.
 */
export interface SvelteNodeMapping extends Omit<NodeMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
    /**
     * component used to render this node type. Optional; if you do not supply it a default component will be used.
     */
    component?: any;
}
/**
 * Definition of a group - its component, and behaviour.
 */
export interface SvelteGroupMapping extends Omit<GroupMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
    /**
     * component used to render this group type. Optional; if you do not supply it a default component will be used.
     */
    component?: any;
}
/**
 * Definition of a port - its component, and behaviour.
 */
export interface SveltePortMapping extends Omit<PortMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
    /**
     * component used to render this port type. Optional; if you do not supply it a default component will be used.
     */
    component?: any;
}
/**
 * Defines a value holder. This is a direct copy of the `RefObject` concept from React.
 */
export type RefObject<T> = {
    current: T | null;
};
/**
 * Definition for an overlay when using Svelte components.
 */
export interface SvelteOverlaySpec {
    /**
     * Component used to render this overlay.
     */
    component: any;
    /**
     * Props to pass to the component.
     */
    props?: Record<string, any>;
}
/**
 * Mapping definition for edges in a Svelte view.
 */
export interface SvelteEdgeMapping extends Omit<EdgeMapping, "overlays"> {
    overlays?: Array<OverlaySpec | SvelteOverlaySpec>;
}
/**
 * Options for the view in the Svelte surface component. Maps node/group/port/edge types to components and behaviour.
 */
export interface SvelteSurfaceViewOptions {
    /**
     * Optional node mappings
     */
    nodes?: Record<string, SvelteNodeMapping>;
    /**
     * Optional group mappings
     */
    groups?: Record<string, SvelteGroupMapping>;
    /**
     * Optional port mappings. Because of the nature of Svelte 5, separate port mappings are a little rare in VisuallyJs Svelte, but they are supported if you need them.
     */
    ports?: Record<string, SveltePortMapping>;
    /**
     * Optional edge mappings.
     */
    edges?: Record<string, SvelteEdgeMapping>;
}
/**
 * Options for the view in the Svelte paper component. Maps node/group/port/edge types to components and behaviour.
 */
export interface SveltePaperViewOptions extends SvelteSurfaceViewOptions {
}
/**
 * @group Props
 */
export interface SurfaceComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * @internal
     */
    children?: Snippet;
    /**
     * Optional class name to set on the surface component's container
     */
    className?: string;
    /**
     * Render options for the Surface.
     */
    renderOptions?: SvelteSurfaceRenderOptions;
    /**
     * View options for the Surface.
     */
    viewOptions?: SvelteSurfaceViewOptions;
    /**
     * Options for the underlying model instance.
     */
    modelOptions?: ModelOptions;
    /**
     * Optional Visually JS instance to use. If this is not provided, a Visually JS instance will be created, with `modelOptions` if you provide them.
     */
    model?: BrowserUIModel;
    /**
     * Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be `Record<string, any>`. It may be null.
     */
    injector?: (v: Vertex) => Record<string, any>;
    /**
     * Optional data to load after the component has been mounted.
     */
    data?: any;
    /**
     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
     */
    url?: string;
    /**
     * Shape library to use to render SVG shapes. Optional.
     */
    shapeLibrary?: ShapeLibraryImpl<ObjectData>;
    /**
     * An optional array of reactive objects. The properties from these objects will be
     * merged into the props passed to each WrapperComponent, preserving reactivity.
     */
    additionalProps?: Array<Record<string, any>>;
}
/**
 * @group Props
 */
export interface PaperComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * @internal
     */
    children?: Snippet;
    /**
     * Optional class name to set on the paper component's container
     */
    className?: string;
    /**
     * Render options for the Paper.
     */
    renderOptions?: SveltePaperRenderOptions;
    /**
     * View options for the Paper.
     */
    viewOptions?: SveltePaperViewOptions;
    /**
     * Options for the underlying model instance.
     */
    modelOptions?: ModelOptions;
    /**
     * Optional Visually JS instance to use. If this is not provided, a Visually JS instance will be created, with `modelOptions` if you provide them.
     */
    model?: BrowserUIModel;
    /**
     * Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be `Record<string, any>`. It may be null.
     */
    injector?: (v: Vertex) => Record<string, any>;
    /**
     * Optional data to load after the component has been mounted.
     */
    data?: any;
    /**
     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
     */
    url?: string;
    /**
     * Shape library to use to render SVG shapes. Optional.
     */
    shapeLibrary?: ShapeLibraryImpl<ObjectData>;
}
/**
 * @group Props
 */
export interface MiniviewComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Defaults to true, determines whether or not the miniview can be collapsed.
     */
    collapsible?: boolean;
    /**
     * Optional function to use to derive a type for each rendered node/group. This is written onto the corresponding element as the value of the `data-vjs-miniview-type` attribute, and can be useful for styling.
     */
    typeFunction?: (v: Node | Group) => string;
    /**
     * Optional override for how sensitive the wheel zoom should be.
     */
    wheelSensitivity?: number;
    /**
     * Optional filter for elements to display. Defaults to undefined - all elements displayed.
     * @param v
     */
    elementFilter?: (v: Vertex) => boolean;
    /**
     * Defaults to true, Whether or not to enable the wheel zoom.
     */
    enableWheelZoom?: boolean;
    /**
     * Defaults to true. Whether or not the miniview is initially visible.
     */
    visible?: boolean;
    /**
     * Defaults to false. Whether or not to reverse the zoom direction in response to a wheel event.
     */
    wheelReverse?: boolean;
    /**
     * Defaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set to false, the miniview only updates after mouseup.
     */
    activeTracking?: boolean;
    /**
     * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
     */
    clickToCenter?: boolean;
    /**
     * Defaults to true - the miniview will display a lasso as the user is using the lasso in the canvas
     */
    showLasso?: boolean;
    /**
     * Defaults to true - the miniview will add a CSS class to elements whose model object is in the current selection.
     */
    trackSelection?: boolean;
    /**
     * Optional class name to set on the miniview component's container
     */
    className?: string;
}
/**
 * @group Props
 */
export interface ControlsComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Whether or not to show the clear button, defaults to true.
     */
    clear?: boolean;
    /**
     * Whether or not to show undo/redo buttons, defaults to true
     */
    undoRedo?: boolean;
    /**
     * Whether or not to show the zoom to extents button, defaults to true
     */
    zoomToExtents?: boolean;
    /**
     * Whether or not to show the zoom in/zoom out buttons, defaults to false
     */
    zoomButtons?: boolean;
    /**
     * Optional message to show the user when prompting them to confirm they want to clear the dataset
     */
    clearMessage?: string;
    /**
     * Optional extra buttons to add to the controls component.
     */
    buttons?: ControlsComponentButtons;
    /**
     * Optional orientation for the controls. Defaults to 'row'.
     */
    orientation?: "row" | "column";
    /**
     * Optional class name to set on the control component's container
     */
    className?: string;
}
/**
 * @group Props
 */
export interface PaletteComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * @internal
     */
    children?: Snippet;
    /**
     * Optional class name to set on the component's root element.
     */
    className?: string;
    /**
     * CSS selector identifying draggable elements. Defaults to '[data-vjs-type]'
     */
    selector?: string;
    /**
     * Function to invoke to get a payload for an element that is being dragged/has been tapped. Defaults to a function that extracts `type` from the element via its `data-vjs-type` attribute.
     */
    dataGenerator?: DataGeneratorFunction<BrowserElement>;
    /**
     * Optional function to invoke after a vertex has been added
     */
    onVertexAdded?: OnVertexAddedCallback;
    /**
     * Defaults to false. When true, a newly added vertex is set as the model's current selection.
     */
    selectAfterAdd?: boolean;
    /**
     * Optional size for elements dragged from the palette; used in drag mode only.
     */
    dragSize?: Size;
    /**
     * Optional filter to use to decide at run time which elements may be dragged/dropped
     */
    canvasDropFilter?: CanvasDropFilter<BrowserElement>;
    /**
     * Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
     */
    mode?: PaletteMode;
    /**
     * When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drag to draw functionality also still works)
     */
    allowClickToAdd?: boolean;
    /**
     * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
     */
    clickToAddOnly?: boolean;
    /**
     * Whether or not to allow drop on edge. Defaults to false.
     */
    allowDropOnEdge?: boolean;
    /**
     * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
     */
    allowDropOnCanvas?: boolean;
    /**
     * Whether or not to allow drop on existing vertices. Defaults to true.
     */
    allowDropOnGroup?: boolean;
    /**
     * Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace. Note that when this is false and the user has dragged something over a node, the drag item is still not considered to be over the canvas, and releasing the mouse button at that time will not cause a new node to be added. Use `ignoreDropOnNode` if that's the behaviour you want.
     */
    allowDropOnNode?: boolean;
    /**
     * Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this.  Note that this flag will force `allowDropOnNode` to `false`.
     */
    ignoreDropOnNode?: boolean;
}
/**
 * @group Props
 */
export interface InspectorComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Optional style to set on the component's root element.
     */
    style?: string;
    /**
     * Optional class name to set on the component's root element.
     */
    className?: string;
    /**
     * Callback invoked when a new object has started to be edited.
     * @param obj
     * @param cb
     * @deprecated From 1.2.0 onwards, use the `current` state object approach instead.
     */
    refresh?: (obj: Base) => void;
    /**
     * Optional filter function that you can supply if you want to ignore certain objects in your dataset.
     */
    filter?: (obj: Base) => boolean;
    /**
     * Whether or not to allow multiple objects to be selected and edited at once.
     * Defaults to false.
     */
    multipleSelections?: boolean;
    /**
     * Whether or not to auto commit changes on blur or enter keypress. Defaults to true.
     */
    autoCommit?: boolean;
    /**
     * A $state ref that the inspector will apply 2-way binding to. Since 1.2.0 this is the preferred way to use an inspector, as it reduces the amount of boilerplate you need to configure.
     * @since 1.2.0
     */
    current?: Base | null;
    children?: Snippet;
}
/**
 * @group Props
 */
export interface ShapePaletteComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Optional class name to set on the container
     */
    className?: string;
    /**
     * Optional size to use for dragged elements.
     */
    dragSize?: Size;
    /**
     * Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc. Defaults to "#000000"
     */
    fill?: string;
    /**
     * Optional color to use for outline of dragged elements. Should be in RGB format.
     */
    outline?: string;
    /**
     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
     */
    showAllMessage?: string;
    /**
     * When true (which is the default), a newly dropped vertex will be set as the underlying model's selection.
     */
    selectAfterDrop?: boolean;
    /**
     * Stroke width to use for shapes in palette. Defaults to 1.
     */
    paletteStrokeWidth?: number;
    /**
     * Optional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's `type` with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
     */
    dataGenerator?: DataGeneratorFunction<ObjectData>;
    /**
     * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
     */
    iconSize?: Size;
    /**
     * Optional ID of the first set to show, hiding the others.
     */
    initialSet?: string;
    /**
     * Optionally show each icon's label underneath it
     */
    showLabels?: boolean;
    /**
     * Optional callback to invoke when a new vertex has been added
     * @param v
     * @param dropTarget
     */
    onVertexAdded?: (v: Vertex, dropTarget?: DropTargetInfo) => any;
    /**
     * Mode to operate in - 'drag' or 'tap'. Defaults to 'drag' (DROP_MANAGER_MODE_DRAG).
     */
    mode?: PaletteMode;
    /**
     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
     */
    allowClickToAdd?: boolean;
    /**
     * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the surface is set back to pan mode.
     */
    autoExitDrawMode?: boolean;
    /**
     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
     */
    inspector?: boolean;
    /**
     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
     */
    preparedShapes?: Array<PreparedShape>;
}
/**
 * @group Props
 */
export interface ShapeComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Backing data for the vertex. Required. This is passed in as a prop to a component used to render a node/group, so you can pass it straight through from the parent to this component.
     */
    data: ObjectData;
    /**
     * Whether or not to show labels on each shape. Defaults to false.
     */
    showLabels?: boolean;
    /**
     * The name of the property containing each vertex's label. Defaults to `label`.
     */
    labelProperty?: string;
    /**
     * Stroke width to use on the text element rendering a label. Defaults to "0.25px".
     */
    labelStrokeWidth: string;
    /**
     * Optional font size/style.
     */
    font?: FontSpec;
}
/**
 * @group Props
 */
export interface EdgeTypePickerComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Name of the property in the backing data that this picker is manipulating.
     */
    propertyName: string;
}
/**
 * @group Props
 */
export interface ExportControlsComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Optional class name to set on the element.
     */
    className?: string;
    /**
     * Whether or not to show a label in front of the buttons. Defaults to true.
     */
    showLabel?: boolean;
    /**
     * What to show in the label, if visible. Defaults to "Export:".
     */
    label?: string;
    /**
     * Options for SVG exports.
     */
    svgOptions?: SvgExportUIOptions;
    /**
     * Options for image exports.
     */
    imageOptions?: ImageExportUIOptions;
    /**
     * Defaults to true.
     */
    allowSvgExport?: boolean;
    /**
     * Defaults to true.
     */
    allowPngExport?: boolean;
    /**
     * Defaults to true.
     */
    allowJpgExport?: boolean;
}
/**
 * @group Props
 */
export interface DiagramComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Options for the model used by the diagram. Only required for
     * certain advanced use cases.
     */
    modelOptions?: ModelOptions;
    /**
     * Options for the diagram.
     */
    options?: DiagramOptions;
    /**
     * Optional class name to set on the diagram component's container
     */
    className?: string;
    /**
     * Optional data to load after the component has been mounted.
     */
    data?: any;
    /**
     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
     */
    url?: string;
    /**
     * @internal
     */
    children?: Snippet;
}
/**
 * Props for the diagram palette.
 * @group Props
 */
export interface DiagramPaletteProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
     */
    fill?: string;
    /**
     * Optional color to use for outline of dragged elements. Should be in RGB format.
     */
    outline?: string;
    /**
     * Optional size to use for dragged elements.
     */
    dragSize?: Size;
    /**
     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
     */
    inspector?: boolean;
    /**
     * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
     */
    iconSize?: Size;
    /**
     * Optionally show each shape icon's label underneath it
     */
    showLabels?: boolean;
    /**
     * Stroke width to use for shapes in palette. Defaults to 1.
     */
    paletteStrokeWidth?: number;
    /**
     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
     */
    showAllMessage?: string;
    /**
     * Callback to invoke when a new diagram cell has been added.
     * @param dc
     */
    onCellAdded?: (dc: DiagramCell) => any;
    /**
     * Mode to operate in - 'drag' or 'tap'. Defaults to 'drag' (PALETTE_MODE_DRAG).
     */
    mode?: PaletteMode;
    /**
     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
     */
    allowClickToAdd?: boolean;
    /**
     * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the UI is set back to pan mode.
     */
    autoExitDrawMode?: boolean;
    /**
     * When true (which is the default), a newly dropped shape will be set as the underlying model's selection.
     */
    selectAfterAdd?: boolean;
    /**
     * Optional diagram to attach to. In most cases it is better to use a DiagramProvider to provision the diagram to this component.
     */
    diagram?: Diagram;
    /**
     * Optional class name to set on the diagram palette root element.
     */
    className?: string;
    /**
     * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
     * @param v
     */
    onVertexAdded?: OnVertexAddedCallback;
    /**
     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
     */
    preparedShapes?: Array<PreparedShape>;
}
/**
 * Props for the ColorPicker inspector component.
 * @group Props
 */
export interface ColorPickerComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Maximum color swatches to show. Defaults to 10.
     */
    maxColors?: number;
    /**
     * Property name in the data that this picker represents. Required.
     */
    propertyName: string;
}
/**
 * The props that are passed in to a component used to render a node/group by a surface component.
 * @group Props
 */
export interface SvelteWrapperProps {
    data: ObjectData;
    ui: BrowserUI;
    vertex: Vertex;
    model: BrowserUIModel;
}
/**
 * Props for the decorator component.
 * @props
 */
export interface DecoratorComponentProps extends DOMAttributes<HTMLDivElement> {
    /**
     * Whether to float the element over the UI (floating) or place it on the canvas (fixed). Floating is the default.
     */
    placement: string;
    /**
     * Position relative to viewport (floating) or canvas (fixed).
     */
    position: PointXY;
    /**
     * Optional constraints when using fixed placement.
     */
    constraints?: FixedElementConstraints;
    /**
     * @internal
     */
    children?: Snippet;
}
/**
 * Props for the SurfacePopup component.
 * @group Props
 */
export interface SurfacePopupProps {
    /**
     * CSS3 selector identifying elements from which this popup is launched.
     */
    selector: string;
    /**
     * Optional position to place this popup. Defaults to "bottom", and can also be overridden on a per-launcher basis via a DOM attribute.
     */
    anchor?: PopupPosition;
    /**
     * The snippet that renders the content for the popup.
     */
    popup: Snippet<[Vertex | null, BrowserUIModel, BrowserUI]>;
}