@metadev/daga 2.0.2 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "2.0.2",
+  "version": "3.1.0",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -3,21 +3,23 @@ export { ACTION_STACK_SIZE, DiagramCanvas, setCursorStyle } from './lib/diagram/
 export { DiagramContextMenu } from './lib/diagram/canvas/diagram-context-menu';
 export { DiagramUserHighlight } from './lib/diagram/canvas/diagram-user-highlight';
 export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selection';
-export { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
+export type { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
 export { CollabClient } from './lib/diagram/collab/collab-client';
-export { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
+export type { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
 export { DagaExporter } from './lib/diagram/converters/daga-exporter';
 export { DagaImporter } from './lib/diagram/converters/daga-importer';
-export { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
-export { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
-export { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
-export { ActionStack, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram/diagram-action';
-export { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/diagram-config';
-export { DiagramEvent } from './lib/diagram/diagram-event';
+export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
+export type { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
+export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
+export { ActionStack, ApplyLayoutAction, MoveAction, PasteAction, SetParentAction, AddConnectionAction, AddNodeAction, DiagramActionMethod, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram/diagram-action';
+export type { DiagramAction } from './lib/diagram/diagram-action';
+export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/diagram-config';
+export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramSecondaryClickEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';
 export { BreadthLayout } from './lib/diagram/layout/breadth-layout';
-export { DiagramLayout, layouts } from './lib/diagram/layout/diagram-layout';
+export { layouts, getLocationsOfNodes } from './lib/diagram/layout/diagram-layout';
+export type { DiagramLayout } from './lib/diagram/layout/diagram-layout';
 export { ForceLayout } from './lib/diagram/layout/force-layout';
 export { HorizontalLayout } from './lib/diagram/layout/horizontal-layout';
 export { PriorityLayout } from './lib/diagram/layout/priority-layout';
@@ -26,22 +28,26 @@ export { VerticalLayout } from './lib/diagram/layout/vertical-layout';
 export { DiagramConnection, DiagramConnectionSet, DiagramConnectionType } from './lib/diagram/model/diagram-connection';
 export { DiagramDecorator, DiagramDecoratorSet } from './lib/diagram/model/diagram-decorator';
 export { DiagramElement, DiagramElementSet } from './lib/diagram/model/diagram-element';
-export { DiagramEntity, DiagramEntitySet } from './lib/diagram/model/diagram-entity';
+export { DiagramEntitySet } from './lib/diagram/model/diagram-entity';
+export type { DiagramEntity } from './lib/diagram/model/diagram-entity';
 export { DIAGRAM_FIELD_DEFAULTS, DiagramField, DiagramFieldSet, getBottomMargin, getBottomPadding, getLeftMargin, getLeftPadding, getRightMargin, getRightPadding, getTopMargin, getTopPadding } from './lib/diagram/model/diagram-field';
 export { DiagramModel } from './lib/diagram/model/diagram-model';
-export { DiagramNode, DiagramNodeGeometry, DiagramNodeSet, DiagramNodeType } from './lib/diagram/model/diagram-node';
+export { DiagramNode, DiagramNodeSet, DiagramNodeType, filterByOnlyAncestors, filterByOnlyDescendants } from './lib/diagram/model/diagram-node';
+export type { DiagramNodeGeometry } from './lib/diagram/model/diagram-node';
 export { DiagramObject, DiagramObjectSet } from './lib/diagram/model/diagram-object';
 export { DiagramPort, DiagramPortSet } from './lib/diagram/model/diagram-port';
-export { diff, equals, isObject, Option, Property, PropertySet, Type, ValueSet } from './lib/diagram/model/diagram-property';
-export { DiagramSection, DiagramSectionGeometry, DiagramSectionSet } from './lib/diagram/model/diagram-section';
-export { DiagramError } from './lib/errors/diagram-error';
-export { DiagramValidator } from './lib/errors/diagram-validator';
-export { Canvas } from './lib/interfaces/canvas';
-export { DiagramButtons } from './lib/interfaces/diagram-buttons';
-export { DiagramEditor } from './lib/interfaces/diagram-editor';
-export { Palette } from './lib/interfaces/palette';
-export { PropertyEditor } from './lib/interfaces/property-editor';
-export { Line, Point, Rectangle } from './lib/util/canvas-util';
+export { diff, equals, isObject, Property, PropertySet, Type, ValueSet } from './lib/diagram/model/diagram-property';
+export type { Option } from './lib/diagram/model/diagram-property';
+export { DiagramSection, DiagramSectionSet } from './lib/diagram/model/diagram-section';
+export type { DiagramSectionGeometry } from './lib/diagram/model/diagram-section';
+export type { DiagramError } from './lib/errors/diagram-error';
+export type { DiagramValidator } from './lib/errors/diagram-validator';
+export type { Canvas } from './lib/interfaces/canvas';
+export type { DiagramButtons } from './lib/interfaces/diagram-buttons';
+export type { DiagramEditor } from './lib/interfaces/diagram-editor';
+export type { Palette } from './lib/interfaces/palette';
+export type { PropertyEditor } from './lib/interfaces/property-editor';
+export type { Line, Point, Rectangle } from './lib/util/canvas-util';
 export { DragEvents, Events, Keys, ZoomEvents } from './lib/util/events';
 export { linePath, LineShape, LineStyle, lineStyleDasharray } from './lib/util/line';
 export { addIfNotExists, removeIfExists } from './lib/util/list-util';

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -6,7 +6,7 @@ import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
 import { CursorStyle } from '../../util/style';
 import { CollabEngine } from '../collab/collab-engine';
-import { ActionStack, DiagramActions } from '../diagram-action';
+import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
 import { DiagramConfig } from '../diagram-config';
 import { DiagramEvent } from '../diagram-event';
 import { DiagramConnectionType } from '../model/diagram-connection';
@@ -49,7 +49,9 @@ export declare class DiagramCanvas implements Canvas {
     panRate: number;
     inferConnectionType: boolean;
     multipleSelectionOn: boolean;
-    connectionType?: DiagramConnectionType;
+    private _connectionType?;
+    get connectionType(): DiagramConnectionType | undefined;
+    set connectionType(value: DiagramConnectionType | undefined);
     layoutFormat?: string;
     validators: DiagramValidator[];
     userActions: {
@@ -73,10 +75,12 @@ export declare class DiagramCanvas implements Canvas {
     private currentAction?;
     readonly viewInitialized$: Subject<void>;
     readonly validatorChange$: Subject<void>;
-    readonly diagramChange$: Subject<void>;
-    readonly diagramImportantChange$: Subject<void>;
-    readonly propertyEditorChanges$: Subject<void>;
+    readonly diagramChange$: Subject<{
+        action: DiagramAction;
+        method: DiagramActionMethod;
+    }>;
     readonly diagramEvent$: Subject<DiagramEvent>;
+    readonly propertyEditorChanges$: Subject<void>;
     /**
      * Constructs a canvas object.
      * @public
@@ -117,13 +121,6 @@ export declare class DiagramCanvas implements Canvas {
     selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
     selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasElements(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasNodes(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasSections(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasPorts(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasConnections(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasFields(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasObjects(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    selectCanvasDecorators(): d3.Selection<SVGGElement, unknown, null, unknown>;
     private startConnection;
     private finishConnection;
     private dropConnection;

package/src/lib/diagram/collab/collab-action.d.ts

@@ -32,7 +32,7 @@ export interface CollabAction {
 /**
  * @private
  */
-export type CollabActionSerialized = AddNodeSerialized | MoveSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
+export type CollabActionSerialized = AddNodeSerialized | ApplyLayoutSerialized | MoveSerialized | SetGeometrySerialized | SetParentSerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
 /**
  * @private
  */
@@ -41,6 +41,7 @@ export type AddNodeSerialized = {
     id: string;
     typeId: string;
     coords: Point;
+    parentId?: string;
     label?: string;
     values?: {
         [key: string]: unknown;
@@ -56,17 +57,46 @@ export declare class AddNodeCollabAction implements CollabAction {
     readonly id: string;
     readonly typeId: string;
     readonly coords: Point;
+    readonly parentId?: string | undefined;
     readonly label?: string | undefined;
     readonly values?: {
         [key: string]: unknown;
     } | undefined;
-    constructor(canvas: Canvas, id: string, typeId: string, coords: Point, label?: string | undefined, values?: {
+    constructor(canvas: Canvas, id: string, typeId: string, coords: Point, parentId?: string | undefined, label?: string | undefined, values?: {
         [key: string]: unknown;
     } | undefined);
     do(): void;
     serialize(): AddNodeSerialized;
     static deserialize(canvas: Canvas, serialized: AddNodeSerialized): AddNodeCollabAction;
 }
+/**
+ * @private
+ */
+export type ApplyLayoutSerialized = {
+    type: 'applyLayout';
+    to: {
+        [key: string]: Point;
+    };
+    timestamp: CollabTimestamp;
+};
+/**
+ * Collaborative which consists of applying a layout to the diagram which can change the location of several nodes.
+ * @private
+ * @see ApplyLayoutAction
+ */
+export declare class ApplyLayoutCollabAction implements CollabAction {
+    readonly canvas: Canvas;
+    readonly to: {
+        [key: string]: Point;
+    };
+    readonly timestamp: CollabTimestamp;
+    constructor(canvas: Canvas, to: {
+        [key: string]: Point;
+    }, timestamp: CollabTimestamp);
+    do(): void;
+    serialize(): ApplyLayoutSerialized;
+    static deserialize(canvas: Canvas, serialized: ApplyLayoutSerialized): ApplyLayoutCollabAction;
+}
 /**
  * @private
  */
@@ -115,6 +145,32 @@ export declare class SetGeometryCollabAction implements CollabAction {
     serialize(): SetGeometrySerialized;
     static deserialize(canvas: Canvas, serialized: SetGeometrySerialized): SetGeometryCollabAction;
 }
+/**
+ * @private
+ */
+export type SetParentSerialized = {
+    type: 'setParent';
+    childId: string;
+    parentId: string | undefined;
+    childGeometry: DiagramNodeGeometry;
+    timestamp: CollabTimestamp;
+};
+/**
+ * Collaborative action which consists of setting a node's parent.
+ * @private
+ * @see SetParentAction
+ */
+export declare class SetParentCollabAction implements CollabAction {
+    readonly canvas: Canvas;
+    readonly childId: string;
+    readonly parentId: string | undefined;
+    readonly childGeometry: DiagramNodeGeometry;
+    readonly timestamp: CollabTimestamp;
+    constructor(canvas: Canvas, childId: string, parentId: string | undefined, childGeometry: DiagramNodeGeometry, timestamp: CollabTimestamp);
+    do(): void;
+    serialize(): SetParentSerialized;
+    static deserialize(canvas: Canvas, serialized: SetParentSerialized): SetParentCollabAction;
+}
 /**
  * @private
  */

package/src/lib/diagram/converters/daga-model.d.ts

@@ -32,6 +32,7 @@ export interface DagaModel {
 export interface DagaNode {
     id: string;
     type: string;
+    children?: DagaNode[];
     sections?: DagaSection[];
     ports?: DagaPort[];
     label: string;

package/src/lib/diagram/diagram-action.d.ts

@@ -4,7 +4,7 @@ import { DagaConnection, DagaNode } from './converters/daga-model';
 import { DiagramConnectionType } from './model/diagram-connection';
 import { DiagramNodeGeometry, DiagramNodeType } from './model/diagram-node';
 /**
- * A stack of recent actions taken by the user that can be undone and redone.
+ * A stack of recent actions taken by the user.
  * @private
  */
 export declare class ActionStack {
@@ -47,7 +47,17 @@ export declare class ActionStack {
     redo(): void;
 }
 /**
- * An action taken by the user that can be undone and redone.
+ * The different methods of an action.
+ * @private
+ */
+export declare enum DiagramActionMethod {
+    Do = 0,
+    Undo = 1,
+    Redo = 2
+}
+/**
+ * An action taken by the user that can be undone and redone and implies a change to the diagram's model.
+ * Contrast with {@link DiagramEvent} which doesn't have an impact on the diagram's model.
  * @private
  */
 export interface DiagramAction {
@@ -92,6 +102,12 @@ export declare enum DiagramActions {
      * @see AddNodeAction
      */
     AddNode = "add-node",
+    /**
+     * Action that corresponds to applying a layout which changes the location of several nodes.
+     * @public
+     * @see ApplyLayoutAction
+     */
+    ApplyLayout = "apply-layout",
     /**
      * Action that corresponds to copying diagram elements to the clipboard.
      * @public
@@ -160,18 +176,43 @@ export declare class AddNodeAction implements DiagramAction {
     readonly canvas: Canvas;
     type: DiagramNodeType;
     coords: Point;
+    parentId?: string;
+    ancestorId?: string | undefined;
+    fromAncestorGeometry?: DiagramNodeGeometry | undefined;
+    toAncestorGeometry?: DiagramNodeGeometry | undefined;
     label?: string;
     values?: {
         [key: string]: unknown;
     };
     id: string;
-    constructor(canvas: Canvas, type: DiagramNodeType, coords: Point, label?: string, values?: {
+    constructor(canvas: Canvas, type: DiagramNodeType, coords: Point, parentId?: string, ancestorId?: string | undefined, fromAncestorGeometry?: DiagramNodeGeometry | undefined, toAncestorGeometry?: DiagramNodeGeometry | undefined, label?: string, values?: {
         [key: string]: unknown;
     });
     do(): boolean;
     undo(): boolean;
     redo(): boolean;
 }
+/**
+ * Action which consists of applying a layout to the diagram which can change the location of several nodes.
+ * @private
+ */
+export declare class ApplyLayoutAction implements DiagramAction {
+    readonly canvas: Canvas;
+    from: {
+        [key: string]: Point;
+    };
+    to: {
+        [key: string]: Point;
+    };
+    constructor(canvas: Canvas, from: {
+        [key: string]: Point;
+    }, to: {
+        [key: string]: Point;
+    });
+    do(): boolean;
+    undo(): boolean;
+    redo(): boolean;
+}
 /**
  * Action which consists of changing the coordinates of diagram elements by a fixed amount.
  * @private
@@ -196,7 +237,29 @@ export declare class SetGeometryAction implements DiagramAction {
     nodeId: string;
     from: DiagramNodeGeometry;
     to: DiagramNodeGeometry;
-    constructor(canvas: Canvas, intent: DiagramActions.MoveNode | DiagramActions.StretchNode | DiagramActions.StretchSection, nodeId: string, from: DiagramNodeGeometry, to: DiagramNodeGeometry);
+    ancestorId: string | undefined;
+    fromAncestorGeometry: DiagramNodeGeometry | undefined;
+    toAncestorGeometry: DiagramNodeGeometry | undefined;
+    constructor(canvas: Canvas, intent: DiagramActions.MoveNode | DiagramActions.StretchNode | DiagramActions.StretchSection, nodeId: string, from: DiagramNodeGeometry, to: DiagramNodeGeometry, ancestorId?: string | undefined, fromAncestorGeometry?: DiagramNodeGeometry | undefined, toAncestorGeometry?: DiagramNodeGeometry | undefined);
+    do(): boolean;
+    undo(): boolean;
+    redo(): boolean;
+}
+/**
+ * Action which consists of setting a node's parent.
+ * @private
+ */
+export declare class SetParentAction implements DiagramAction {
+    readonly canvas: Canvas;
+    childId: string;
+    fromParentId: string | undefined;
+    toParentId: string | undefined;
+    fromChildGeometry: DiagramNodeGeometry;
+    toChildGeometry: DiagramNodeGeometry;
+    ancestorId: string | undefined;
+    fromAncestorGeometry: DiagramNodeGeometry | undefined;
+    toAncestorGeometry: DiagramNodeGeometry | undefined;
+    constructor(canvas: Canvas, childId: string, fromParentId: string | undefined, toParentId: string | undefined, fromChildGeometry: DiagramNodeGeometry, toChildGeometry: DiagramNodeGeometry, ancestorId: string | undefined, fromAncestorGeometry: DiagramNodeGeometry | undefined, toAncestorGeometry: DiagramNodeGeometry | undefined);
     do(): boolean;
     undo(): boolean;
     redo(): boolean;

package/src/lib/diagram/diagram-config.d.ts

@@ -1,6 +1,6 @@
 import { Point } from '../util/canvas-util';
-import { LineShape, LineStyle } from '../util/line';
-import { ClosedShape } from '../util/shape';
+import { LineFunction, LineShape, LineStyle } from '../util/line';
+import { ClosedShape, ShapeFunction } from '../util/shape';
 import { Corner, HorizontalAlign, Side, VerticalAlign } from '../util/svg-util';
 import { DiagramActions } from './diagram-action';
 import { Property } from './model/diagram-property';
@@ -262,6 +262,11 @@ export interface PaletteComponentConfig {
      * @default '12rem'
      */
     width?: string;
+    /**
+     * Gap between the templates in this palette.
+     * @default '1rem'
+     */
+    gap?: string;
     /**
      * Configuration for the sections of this palette. By default, no sections are created.
      * @default undefined
@@ -330,6 +335,10 @@ export interface NodeTemplateConfig {
      * Id of the type of node of this template. Must correspond to the id of a type of node defined in the nodeTypes list.
      */
     type: string;
+    /**
+     * Look of this template as it appears on the palette which can be used to override the default look of the nodes of this type.
+     */
+    look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
     /**
      * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
      */
@@ -371,6 +380,10 @@ export interface ConnectionTemplateConfig {
      * File path of the background image of this template as it appears on the palette.
      */
     icon: string;
+    /**
+     * File path of the background image of this template as it appears on the palette when this connection type is selected.
+     */
+    selectedIcon: string;
     /**
      * Width of this template in diagram units as it appears on the palette.
      */
@@ -424,6 +437,11 @@ export interface NodeTypeConfig {
      * @default false
      */
     resizableY?: boolean;
+    /**
+     * The padding between the node and its children in diagram units if children are present. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * @default 0
+     */
+    padding?: number | number[];
     /**
      * Configuration for the label of nodes of this type.
      * @default null
@@ -449,6 +467,16 @@ export interface NodeTypeConfig {
      * @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
@@ -612,7 +640,7 @@ export interface NodeShapedLook {
     /**
      * Shape of nodes using this look.
      */
-    shape: ClosedShape;
+    shape: ClosedShape | ShapeFunction;
     /**
      * Background color of nodes using this look.
      */
@@ -779,7 +807,7 @@ export interface ConnectionTypeConfig {
      * Shape of the line of connections of this type.
      * @default 'straight'
      */
-    shape?: LineShape;
+    shape?: LineShape | LineFunction;
     /**
      * Style of the line of connections of this type.
      * @default 'solid'

package/src/lib/diagram/diagram-event.d.ts

@@ -1,16 +1,82 @@
 import { Point } from '../util/canvas-util';
-import { Events } from '../util/events';
 import { DiagramElement } from './model/diagram-element';
 /**
- * Represents an action taken by the user on the diagram.
+ * Represents an action taken by the user on the diagram which doesn't have an impact on the diagram's model.
+ * Contrast with {@link DiagramAction} which does have an impact on the diagram's model.
  * @public
  */
-export declare class DiagramEvent {
-    cause: Event;
-    type: Events;
-    target?: DiagramElement;
-    coords?: Point;
+export declare abstract class DiagramEvent {
+    readonly type: DiagramEvents;
     defaultPrevented: boolean;
-    constructor(cause: Event, type: Events, target?: DiagramElement, coords?: Point);
+    constructor(type: DiagramEvents);
     preventDefault(): void;
 }
+/**
+ * Diagram user events.
+ * @public
+ */
+export declare enum DiagramEvents {
+    DoubleClick = 0,
+    SecondaryClick = 1,
+    Selection = 2,
+    Highlight = 3
+}
+/**
+ * Diagram event which consists of the user performing a double click on the diagram.
+ */
+export declare class DiagramDoubleClickEvent extends DiagramEvent {
+    cause: MouseEvent;
+    target: DiagramElement | null;
+    coords?: Point;
+    /**
+     * Create a diagram double click event.
+     *
+     * @param cause Mouse event which triggered this event.
+     * @param target Diagram element which is targeted by the event, or null if no element was targeted (the diagram background was targeted).
+     * @param coords Optionally, coordinates of the point of the diagram where the event happened.
+     */
+    constructor(cause: MouseEvent, target: DiagramElement | null, coords?: Point);
+}
+/**
+ * Diagram event which consists of the user performing a secondary click on the diagram.
+ */
+export declare class DiagramSecondaryClickEvent extends DiagramEvent {
+    cause: MouseEvent;
+    target: DiagramElement | null;
+    coords?: Point;
+    /**
+     * Create a diagram secondary click event.
+     *
+     * @param cause Mouse event which triggered this event.
+     * @param target Diagram element which is targeted by the event, or null if no element was targeted (the diagram background was targeted).
+     * @param coords Optionally, coordinates of the point of the diagram where the event happened.
+     */
+    constructor(cause: MouseEvent, target: DiagramElement | null, coords?: Point);
+}
+/**
+ * Diagram event which consists of the user either adding or removing one or several diagram elements from the user selection.
+ */
+export declare class DiagramSelectionEvent extends DiagramEvent {
+    targets: DiagramElement[];
+    selected: boolean;
+    /**
+     * Create a diagram selection event.
+     *
+     * @param targets Diagram elements which are targeted by the event.
+     * @param selected `true` if the targets were selected, `false` if the targets were deselected.
+     */
+    constructor(targets: DiagramElement[], selected: boolean);
+}
+/**
+ * Diagram event which consists of the user highlighting a diagram element.
+ * If the target is `null`, that means that the previously highlighted element was unhighlighted.
+ */
+export declare class DiagramHighlightedEvent extends DiagramEvent {
+    target: DiagramElement | null;
+    /**
+     * Create a diagram highlight event.
+     *
+     * @param target Diagram element which is targeted by the event.
+     */
+    constructor(target: DiagramElement | null);
+}

package/src/lib/diagram/layout/diagram-layout.d.ts

@@ -1,3 +1,4 @@
+import { Point } from '../../util/canvas-util';
 import { DiagramModel } from '../model/diagram-model';
 /**
  * A layout algorithm that can be applied to a diagram.
@@ -16,3 +17,6 @@ export interface DiagramLayout {
 export declare const layouts: {
     [key: string]: DiagramLayout;
 };
+export declare const getLocationsOfNodes: (model: DiagramModel) => {
+    [key: string]: Point;
+};

package/src/lib/diagram/model/diagram-connection.d.ts

@@ -1,5 +1,5 @@
 import { Point } from '../../util/canvas-util';
-import { LineShape, LineStyle } from '../../util/line';
+import { LineFunction, LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
 import { ConnectionMarkerLook, ConnectionTypeConfig, FieldConfig } from '../diagram-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
@@ -51,7 +51,7 @@ export declare class DiagramConnectionType implements DiagramEntity {
     id: string;
     name: string;
     width: number;
-    shape: LineShape;
+    shape: LineShape | LineFunction;
     style: LineStyle;
     label: FieldConfig | null;
     defaultStartMarkerLook: ConnectionMarkerLook | null;
@@ -151,6 +151,7 @@ export declare class DiagramConnection extends DiagramElement {
     constructor(model: DiagramModel, type: DiagramConnectionType, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string);
     get removed(): boolean;
     updateInView(): void;
+    raise(): void;
     /**
      * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
      * Add or remove this connection from the list of outgoing connections of ports correspondingly.

package/src/lib/diagram/model/diagram-decorator.d.ts

@@ -39,6 +39,7 @@ export declare class DiagramDecorator extends DiagramElement {
     select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
+    raise(): void;
     /**
      * Change the coordinates of this decorator to the given coordinates.
      * @public

package/src/lib/diagram/model/diagram-element.d.ts

@@ -68,6 +68,11 @@ export declare abstract class DiagramElement implements DiagramEntity {
      * @public
      */
     abstract updateInView(): void;
+    /**
+     * Put this element above other elements of its kind in the view.
+     * @public
+     */
+    abstract raise(): void;
     /**
      * Obtain the selection of this element.
      * @private

package/src/lib/diagram/model/diagram-field.d.ts

@@ -4,9 +4,6 @@ import { CollabTimestamp } from '../collab/primitives';
 import { FieldConfig } from '../diagram-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
-import { DiagramNode } from './diagram-node';
-import { DiagramPort } from './diagram-port';
-import { DiagramSection } from './diagram-section';
 /**
  * Default values of the parameters of a diagram field.
  * @private
@@ -24,6 +21,9 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     verticalAlign: VerticalAlign;
     fit: boolean;
 };
+export interface LabeledElement {
+    label?: DiagramField;
+}
 /**
  * A field which displays text and is part of a diagram element.
  * @public
@@ -36,7 +36,7 @@ export declare class DiagramField extends DiagramElement {
      * Element that this field belongs to.
      * @public
      */
-    rootElement?: DiagramNode | DiagramSection | DiagramPort;
+    rootElement?: LabeledElement & DiagramElement;
     /**
      * Coordinates of this field.
      * @public
@@ -109,10 +109,11 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     fit: boolean;
-    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean);
+    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean);
     select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
+    raise(): void;
     /**
      * Change the coordinates of this field to the given coordinates.
      * @public
@@ -132,7 +133,7 @@ export declare class DiagramFieldSet extends DiagramElementSet<DiagramField> {
      * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
      * @private
      */
-    new(rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean): DiagramField;
+    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean): DiagramField;
     remove(id: string): void;
 }
 export declare const getBottomMargin: (config?: FieldConfig | null) => number;