import { AnchorPoint, Point } from '../../util/canvas-util'; import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util'; import { DiagramActions } from '../diagram-action'; import { Property } from '../property/property'; import { CanvasConfig } from './diagram-canvas-config'; import { ComponentsConfig } from './diagram-components-config'; import { ConnectionLookConfig, FieldLookConfig, ImageLookConfig, MarkerImageLookConfig, ResizerLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config'; /** * The configuration for a diagram. * @public */ export interface DiagramConfig { /** * The name of this type of diagram. Used so that it is possible to discern the type of a diagram. * @default "" */ type?: string; /** * The default name for a new diagram of this type. * @default "unnamed" */ name?: string; /** * Configuration regarding the canvas. * @default {} */ canvas?: CanvasConfig; /** * Configuration regarding the general settings of connections. * @default {} */ connectionSettings?: ConnectionSettingsConfig; /** * Name of the layout format used to arrange the nodes of this diagram when pressing the layout button in the diagram buttons component. * @default undefined * @see DiagramButtonsComponent */ layoutFormat?: string; /** * Mapping of user actions to a boolean indicating whether the user can perform those actions. Absent values are assumed to be `true`. * @default {} */ userActions?: UserActionConfig; /** * Mapping of components to a boolean indicating whether those components are enabled. * @default {} */ components?: ComponentsConfig; /** * Default attributes for each of the types of node of this diagram. By default, no attributes are set. * @default undefined */ nodeTypeDefaults?: Partial; /** * List of the types of node that can be used in this diagram. By default, no types are created. * @default undefined */ nodeTypes?: NodeTypeConfig[]; /** * Default attributes for each of the types of port of this diagram. By default, no attributes are set. * @default undefined */ portTypeDefaults?: Partial; /** * List of the types of port that can be used in this diagram. By default, no types are created. * @default undefined */ portTypes?: PortTypeConfig[]; /** * Default attributes for each of the types of connection of this diagram. By default, no attributes are set. * @default undefined */ connectionTypeDefaults?: Partial; /** * List of the types of connection that can be used in this diagram. By default, no types are created. * @default undefined */ connectionTypes?: ConnectionTypeConfig[]; /** * Properties of this diagram that can be edited in the property editor component. * @default [] * @see PropertyEditorComponent */ properties?: Property[]; } /** * Configuration regarding the general settings of connections. * @public */ export interface ConnectionSettingsConfig { /** * When true, connections made by the user will have their type assumed based on the type of the source and target nodes. * @default false */ inferConnectionType?: boolean; /** * Id of the type of connection that is initially selected for the user to draw when drawing connections. By default, no type is selected. * @default undefined */ defaultConnection?: string; /** * Automatically try to change the start and end ports of a connection to minimize the distance between them. * @default true */ autoTighten?: boolean; /** * When tightening a connection allow changing the start and end ports to ports of a different type. * @default false */ tightenAcrossPortTypes?: boolean; /** * Whether a connection can use the same port as start and end. * @default false */ allowLoops?: boolean; /** * Whether the same port can be used by two different connections. * @default true */ sharePorts?: boolean; /** * Whether two connections can use the same ports. * @default false */ shareBothPorts?: boolean; /** * Within what radius the closest port may be highlighted when drawing a new connection as a guide to the user. * @default 100 */ portHighlightRadius?: number; } /** * Configuration for which user actions are allowed in a diagram. * @public */ export type UserActionConfig = { [key in DiagramActions]?: boolean; }; /** * Configuration for a type of node. * @public * @see DiagramNodeType */ export interface NodeTypeConfig { /** * Id of this type of node used to reference this type of node internally. */ id: string; /** * Name of this type of node as displayed to the user. */ name?: string; /** * Default width of nodes of this type in diagram units. * @default 1 */ defaultWidth?: number; /** * Default height of nodes of this type in diagram units. * @default 1 */ defaultHeight?: number; /** * Minimum width of nodes of this type in diagram units. * @default 1 */ minWidth?: number; /** * Minimum height of nodes of this type in diagram units. * @default 1 */ minHeight?: number; /** * The default z coordinate of nodes of this type when rendering them in order relative to other diagram elements. * @default 0 */ defaultZ?: number; /** * Whether the user can resize nodes of this type horizontally. * @default false */ resizableX?: boolean | ResizableMode | ResizerConfig; /** * Whether the user can resize nodes of this type vertically. * @default false */ resizableY?: boolean | ResizableMode | ResizerConfig; /** * Whether the user can resize nodes of this type diagonally. * @default false */ resizableXY?: boolean | ResizableMode | ResizerConfig; /** * By how much the location of nodes of this type should be offset when snapping to grid in diagram units. * Each value corresponds to left, top, right and bottom respectively. * @default [0, 0, 0, 0] */ snapToGridOffset?: [number, number, number, number]; /** * The padding between the node and its children in diagram units if children are present. * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding. * @default 0 */ padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number]; /** * Configuration for the label of nodes of this type. * @default null */ label?: FieldConfig | null; /** * Configuration for the sections of nodes of this type or null if nodes of this type have no sections. * @default null */ sectionGrid?: SectionGridConfig | null; /** * Configuration of the ports of nodes of this type. * @default [] */ ports?: PortConfig[]; /** * Configuration of the decorators of nodes of this type. * @default [] */ decorators?: DecoratorConfig[]; /** * Configuration of the look of nodes of this type as they should appear to the user. */ look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig; /** * If true and a node of this type already exists in the diagram, the user can't create more nodes of this type. * @default false */ isUnique?: boolean; /** * Whether nodes of this type can exist without being contained within another node. * @default true */ canBeParentless?: boolean; /** * Ids of the types of nodes that can be contained within this node. Must correspond to the ids of types of node defined in the nodeTypes list. * @default [] */ childrenTypes?: string[]; /** * The priority of this node when filtering out nodes below a given threshold. * @default 0 */ priority?: number; /** * Properties of nodes of this type that can be edited in the property editor component. * @default [] * @see PropertyEditorComponent */ properties?: Property[]; } /** * Configuration for a type of port. * @public * @see DiagramPortType */ export interface PortTypeConfig { /** * Id of this type of port used to reference this type of port internally. */ id: string; /** * Name of this type of port as displayed to the user. */ name?: string; /** * Whether this type of port can be used as a connection start point. * @default true */ allowsOutgoing?: boolean; /** * Whether this type of port can be used as a connection end point. * @default true */ allowsIncoming?: boolean; /** * Configuration for the label of ports of this type. * @default null */ label?: FieldConfig | null; /** * Width of this type of port as it appears in the diagram in diagram units. * @default 24 */ width?: number; /** * Configuration of the look of ports of this type as they should appear to the user. */ look?: ShapedLookConfig | ImageLookConfig; } /** * Configuration for a port that is part of another element. * @public * @see DiagramPort */ export interface PortConfig { /** * Id of the type of this port. May be left `undefined` to use the default look. If set, it must correspond to the id of a type of port defined in the portTypes list. * @default undefined */ type?: string; /** * Coordinates of this port relative to its root element's coordinates. */ coords: Point; /** * Optional coordinates of the point where connections start and end within this port relative to its root element's coordinates. * By default, it is the same as the port's coordinates. */ connectionPoint?: Point; /** * Direction that the connections passing by this port follow at the point of the port. */ direction: Side; /** * Horizontal anchor point for this port. Determines how the port behaves when its root element is resized. * - 'start': Always maintains the same distance from the left edge * - 'middle': Always maintains the same relative position from the center * - 'end': Always maintains the same distance from the right edge * - 'floating': Scales proportionally with the element (default behavior) * @default 'floating' */ anchorPointX?: AnchorPoint; /** * Vertical anchor point for this port. Determines how the port behaves when its root element is resized. * - 'start': Always maintains the same distance from the top edge * - 'middle': Always maintains the same relative position from the center * - 'end': Always maintains the same distance from the bottom edge * - 'floating': Scales proportionally with the element (default behavior) * @default 'floating' */ anchorPointY?: AnchorPoint; } /** * Configuration for a field that is part of another element. * @public * @see DiagramField */ export interface FieldConfig { /** * Whether this field can be edited by the user. * @default true */ editable?: boolean; /** * Whether this field and its root element should be resized automatically if the size of the text increases. * Setting this to true should also entail setting reasonable `minWidth` and `minHeight` values for the configuration of any nodes or sections that contain this field. * @default false */ fit?: boolean; /** * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space. * @default true */ shrink?: boolean; /** * The margin around the field in diagram units. * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS margin. * @default 0 */ margin?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number]; /** * The padding around the field in diagram units. * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding. * @default 0 */ padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number]; /** * The horizontal alignment of the text of this field. * @default 'center' */ horizontalAlign?: HorizontalAlign; /** * The vertical alignment of the text of this field. * @default 'center' */ verticalAlign?: VerticalAlign; /** * Whether this field can have multiple lines. * @default false */ multiline?: boolean; /** * The orientation of the text of this field. It may be a side or a number of degrees. * @default 'top' */ orientation?: Side | number; /** * Configuration of the look this field as it should appear to the user. */ look?: FieldLookConfig; } /** * Configuration for a decorator that is part of another element. * @public * @see DiagramDecorator */ export interface DecoratorConfig { /** * Coordinates of this decorator relative to its root element's coordinates. */ coords: Point; /** * Dimension of this decorator along the x axis. * @public */ width: number; /** * Dimension of this decorator along the y axis. * @public */ height: number; /** * Inner SVG of this decorator. */ svg: string; /** * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized. * - 'start': Always maintains the same distance from the left edge * - 'middle': Always maintains the same relative position from the center * - 'end': Always maintains the same distance from the right edge * - 'floating': Scales proportionally with the element (default behavior) * @default 'floating' */ anchorPointX?: AnchorPoint; /** * Vertical anchor point for this decorator. Determines how the decorator behaves when its root element is resized. * - 'start': Always maintains the same distance from the top edge * - 'middle': Always maintains the same relative position from the center * - 'end': Always maintains the same distance from the bottom edge * - 'floating': Scales proportionally with the element (default behavior) * @default 'floating' */ anchorPointY?: AnchorPoint; } /** * Configuration for the grid of sections of a node. * @public * @see DiagramSection */ export interface SectionGridConfig { /** * Default widths of each column of sections of this grid in diagram units. */ defaultWidths?: number[]; /** * Default heights of each row of sections of this grid in diagram units. */ defaultHeights?: number[]; /** * Minimum widths of each column of sections of this grid in diagram units. */ minWidths?: number[]; /** * Minimum heights of each row of sections of this grid in diagram units. */ minHeights?: number[]; /** * The margin left around the sections of this grid in diagram units. * @default 0 */ margin?: number; /** * Configuration for the look of each section of this grid. * @default [[]] */ sections: SectionConfig[][]; } /** * Configuration for a section of a node. * @public * @see DiagramSection */ export interface SectionConfig { /** * Configuration for the label of the sections. * @default null */ label?: FieldConfig | null; /** * Configuration of the ports of the sections. * @default [] */ ports?: PortConfig[]; /** * Configuration of the look of nodes of this type as they should appear to the user. */ look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig; /** * The priority of this section when filtering out sections below a given threshold. * @default 0 */ priority?: number; /** * Whether this section can be resized horizontally. * If undefined, inherits from the parent node's resizableX setting. * @default undefined */ resizableX?: boolean | ResizableMode | ResizerConfig; /** * Whether this section can be resized vertically. * If undefined, inherits from the parent node's resizableY setting. * @default undefined */ resizableY?: boolean | ResizableMode | ResizerConfig; /** * Whether this section can be resized diagonally. * If undefined, inherits from the parent node's resizableXY setting. * @default undefined */ resizableXY?: boolean | ResizableMode | ResizerConfig; } /** * Configuration for a type of connection. * @public * @see DiagramConnectionType */ export interface ConnectionTypeConfig { /** * Id of this type of connection used to reference this type of node internally. */ id: string; /** * Name of this type of connection as displayed to the user. */ name?: string; /** * Configuration of the labels of connections of this type. */ label?: FieldConfig | null; /** * Configuration of the look of connections of this type as they should appear to the user. */ look?: ConnectionLookConfig; /** * Configuration of the look of the marker at the start of connections of this type as it should appear to the user. Undefined for no marker. * @default undefined */ startMarkerLook?: MarkerImageLookConfig; /** * Configuration of the look of the marker at the end of connections of this type as it should appear to the user. Undefined for no marker. * @default undefined */ endMarkerLook?: MarkerImageLookConfig; /** * Ids of the types of nodes that connections of this type can start from. Must correspond to the ids of types of node defined in the nodeTypes list. Should list one id at minimum. * @default [] */ startTypes?: string[]; /** * Ids of the types of nodes that connections of this type can end at. Must correspond to the ids of types of node defined in the nodeTypes list. Should list one id at minimum. * @default [] */ endTypes?: string[]; /** * Properties of connections of this type that can be edited in the property editor component. * @default [] * @see PropertyEditorComponent */ properties?: Property[]; } /** * Configuration for the resizers of a node or section. * @public * @see DiagramNode * @see DiagramSection */ export interface ResizerConfig { /** * Mode of the resizer. * @default ResizableMode.Never */ mode?: ResizableMode; /** * Thickness of the resizer. * @default 10 */ thickness?: number; /** * The margin around the resizer in diagram units. Used to shift the resizer relative to its default position. * @default 0 */ outerMargin?: number; /** * Configuration of the look of the resizer. * @default { fillColor: 'transparent' } */ look?: ResizerLookConfig; } /** * The different modes for when a node or section can be resized. * @public * @see DiagramNode * @see DiagramSection */ export declare enum ResizableMode { /** * Resizable mode for always being resizable. */ Always = 0, /** * Resizable mode for only being resizable while selected. */ OnlyWhenSelected = 1, /** * Resizable mode for never being resizable. */ Never = 2 }