@metadev/daga 1.3.1 → 1.4.0

package/index.d.ts

@@ -9,7 +9,7 @@ export { DiagramModelExporter } from './lib/diagram-editor/diagram/converters/di
 export { DiagramModelImporter } from './lib/diagram-editor/diagram/converters/diagram-model-importer';
 export { ActionQueue, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction, MoveNodeAction, RemoveAction, StretchNodeAction, UpdateValuesAction } from './lib/diagram-editor/diagram/diagram-action';
 export { ACTION_QUEUE_SIZE, DiagramCanvas } from './lib/diagram-editor/diagram/diagram-canvas';
-export { ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteConfig, PortConfig, SectionConfig } from './lib/diagram-editor/diagram/diagram-config';
+export { ButtonsComponentConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram-editor/diagram/diagram-config';
 export { DiagramConnection, DiagramConnectionSet, DiagramConnectionType } from './lib/diagram-editor/diagram/diagram-connection';
 export { DiagramElement, DiagramEntity, DiagramEntitySet } from './lib/diagram-editor/diagram/diagram-element';
 export { DiagramField, DiagramFieldSet } from './lib/diagram-editor/diagram/diagram-field';

package/lib/diagram/diagram.component.d.ts

@@ -1,4 +1,5 @@
-import { OnInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, EventEmitter, OnInit } from '@angular/core';
+import { DagaModel } from '../diagram-editor/diagram/converters/daga-model';
 import { DiagramConfig } from '../diagram-editor/diagram/diagram-config';
 import { CanvasProviderService } from '../services/canvas-provider.service';
 import { DagaConfigurationService } from '../services/daga-configuration.service';
@@ -8,12 +9,36 @@ import * as i0 from "@angular/core";
  * This component defines a {@link DagaConfigurationService} and a {@link CanvasProviderService}, which is shared by all the components within and allows accessing the configuration and the canvas of this component's diagram, respectively.
  * @public
  */
-export declare class DiagramComponent implements OnInit {
+export declare class DiagramComponent implements AfterContentInit, AfterViewInit, OnInit {
     private configurationService;
     private canvasProvider;
+    /**
+     * Configuration for the diagram.
+     * @public
+     */
     config: DiagramConfig;
+    private importer;
+    private exporter;
+    private _model;
+    /**
+     * Serialized model for the diagram. Used for data binding to the model.
+     * @public
+     */
+    get model(): DagaModel;
+    /**
+     * Serialized model for the diagram. Used for data binding to the model.
+     * @public
+     */
+    set model(model: DagaModel);
+    /**
+     * Output for changes to the diagram's model.
+     * @public
+     */
+    modelChange: EventEmitter<DagaModel>;
     constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "daga-diagram", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "daga-diagram", never, { "config": { "alias": "config"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "modelChange": "modelChange"; }, never, ["*"], true, never>;
 }

package/lib/diagram-buttons/diagram-buttons.component.d.ts

@@ -1,16 +1,20 @@
-import { ElementRef } from '@angular/core';
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { DiagramActions } from '../diagram-editor/diagram/diagram-action';
 import { Canvas } from '../interfaces/canvas';
 import { DiagramButtons } from '../interfaces/diagram-buttons';
 import { CanvasProviderService } from '../services/canvas-provider.service';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * Buttons used to trigger diagram functionalities by the user.
  * @private
  */
-export declare class DiagramButtonsComponent implements DiagramButtons {
+export declare class DiagramButtonsComponent implements AfterViewInit, DiagramButtons {
     private canvasProvider;
     get canvas(): Canvas;
     collapsableButtons: ElementRef<HTMLDivElement>;
+    location: Corner;
+    direction: Side;
     enableFilter: boolean;
     enableLayout: boolean;
     enableUndoRedo: boolean;
@@ -19,7 +23,14 @@ export declare class DiagramButtonsComponent implements DiagramButtons {
     filterOn: boolean;
     collapsed: boolean;
     animationOngoing: boolean;
+    private sizeAttribute;
+    private transformFunction;
+    private transformOrigin;
+    private marginSide;
+    private collapsableButtonsSize;
+    DiagramActions: typeof DiagramActions;
     constructor(canvasProvider: CanvasProviderService);
+    ngAfterViewInit(): void;
     toggleCollapse(): Promise<void>;
     zoomIn(): void;
     zoomOut(): void;
@@ -29,5 +40,5 @@ export declare class DiagramButtonsComponent implements DiagramButtons {
     undo(): void;
     redo(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramButtonsComponent, "daga-diagram-buttons", never, { "enableFilter": { "alias": "enableFilter"; "required": false; }; "enableLayout": { "alias": "enableLayout"; "required": false; }; "enableUndoRedo": { "alias": "enableUndoRedo"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramButtonsComponent, "daga-diagram-buttons", never, { "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "enableFilter": { "alias": "enableFilter"; "required": false; }; "enableLayout": { "alias": "enableLayout"; "required": false; }; "enableUndoRedo": { "alias": "enableUndoRedo"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -30,6 +30,8 @@ export interface DagaModel {
                 label: string;
             }[];
             label: string;
+            indexXInNode: number;
+            indexYInNode: number;
             coords: Point;
             width: number;
             height: number;
@@ -61,4 +63,7 @@ export interface DagaModel {
             [key: string]: unknown;
         };
     }[];
+    data: {
+        [key: string]: unknown;
+    };
 }

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

@@ -13,6 +13,11 @@ import { DiagramSection } from './diagram-section';
  * @private
  */
 export declare class ActionQueue {
+    /**
+     * Canvas that this action queue belongs to.
+     * @private
+     */
+    canvas: Canvas;
     /**
      * Maximum number of actions that can be recorded simultaneously.
      * When new actions are added past this limit, older actions are removed.
@@ -29,7 +34,7 @@ export declare class ActionQueue {
      * @private
      */
     index: number;
-    constructor(maximum: number);
+    constructor(canvas: Canvas, maximum: number);
     /**
      * Adds an action to the history.
      * @private
@@ -56,17 +61,63 @@ export interface DiagramAction {
 }
 /**
  * Enum listing the actions that can be taken by the user.
- * @private
+ * The actions can correspond to a DiagramAction that can be recorded in the action queue of a diagram or they may not correspond to any DiagramAction implementations.
+ * @public
  */
 export declare enum DiagramActions {
-    AddConnectionAction = "add-connection",
-    AddNodeAction = "add-node",
-    EditFieldAction = "edit-field",
-    MoveNodeAction = "move-node",
-    RemoveAction = "remove",
-    StretchNodeAction = "stretch-node",
-    StretchSectionAction = "stretch-section",
-    UpdateValuesAction = "update-values"
+    /**
+     * Action that corresponds to the addition of a connection.
+     * @see AddConnectionAction
+     * @public
+     */
+    AddConnection = "add-connection",
+    /**
+     * Action that corresponds to the addition of a node.
+     * @see AddNodeAction
+     * @public
+     */
+    AddNode = "add-node",
+    /**
+     * Action that corresponds to the edition of a field's text content.
+     * @see EditFieldAction
+     * @public
+     */
+    EditField = "edit-field",
+    /**
+     * Action that corresponds to moving a node.
+     * @see MoveNodeAction
+     * @public
+     */
+    MoveNode = "move-node",
+    /**
+     * Action that corresponds to removing elements.
+     * @see RemoveAction
+     * @public
+     */
+    Remove = "remove",
+    /**
+     * Action that corresponds to altering a node's dimensions.
+     * @see StretchNodeAction
+     * @public
+     */
+    StretchNode = "stretch-node",
+    /**
+     * Action that corresponds to altering a sections's dimensions.
+     * @see StretchSectionAction
+     * @public
+     */
+    StretchSection = "stretch-section",
+    /**
+     * Action that corresponds to changing the values of a value set.
+     * @see UpdateValuesAction
+     * @public
+     */
+    UpdateValues = "update-values",
+    /**
+     * Action that corresponds to changing the view point of a diagram by zooming or panning.
+     * @public
+     */
+    Zoom = "zoom"
 }
 /**
  * Action which consists of adding a node.

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

@@ -11,6 +11,7 @@ import { DiagramElement } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
 import { ValueSet } from './diagram-property';
+import { CursorStyle } from '../../util/style';
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
  * @private
@@ -37,13 +38,11 @@ export declare class DiagramCanvas implements Canvas {
     parentComponent: DiagramEditor;
     diagramRoot: HTMLElement;
     model: DiagramModel;
-    color: string;
+    backgroundColor: string;
     gridSize: number;
     snapToGrid: boolean;
     guessConnectionType: boolean;
     connectionType?: DiagramConnectionType;
-    priorityThreshold?: number;
-    priorityThresholds: number[];
     validators: DiagramValidator[];
     layoutFormat?: string;
     userActions: {
@@ -54,22 +53,31 @@ export declare class DiagramCanvas implements Canvas {
     private backgroundPatternId;
     private zoomBehavior;
     private zoomTransform;
+    private priorityThreshold?;
+    private priorityThresholds;
     private mainUserHighlight?;
     private userHighlight;
     private userSelection;
     private propertyEditorSelection?;
     private propertyEditorValues?;
     private unfinishedConnection?;
+    /**
+     * Invisible path followed by an unfinished connection. Used for making unfinished connections stop before the cursor rather than stopping right at the cursor.
+     */
+    private unfinishedConnectionTracer?;
     private inputFieldContainer?;
     private draggingFrom;
     private currentAction?;
     viewInitialized$: Subject<void>;
     validatorChanges$: Subject<void>;
-    diagramChanges$: Subject<number>;
+    diagramChanges$: Subject<void>;
     diagramImportantChanges$: Subject<void>;
     constructor(parentComponent: DiagramEditor, config: DiagramConfig);
     addValidator(validator: DiagramValidator): void;
     removeValidator(validator: DiagramValidator): void;
+    getPriorityThresholdOptions(): number[] | undefined;
+    getPriorityThreshold(): number | undefined;
+    setPriorityThreshold(priority: number): void;
     initView(appendTo: HTMLElement): void;
     zoomBy(zoom: number): void;
     zoomTo(zoom: number): void;
@@ -88,23 +96,33 @@ export declare class DiagramCanvas implements Canvas {
     updateFieldsInView(...ids: string[]): void;
     updateConnectionLabelsInView(connection: DiagramConnection): void;
     updateConnectionMarkersInView(connection: DiagramConnection): void;
+    fitFieldRootInView(id: string): void;
+    fitNodeInView(id: string): void;
     selectRoot(): d3.Selection<d3.BaseType, unknown, null, unknown>;
-    selectCanvas(): d3.Selection<SVGGElement, 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>;
     startConnection(port: DiagramPort): void;
     finishConnection(port: DiagramPort): void;
     dropConnection(): void;
     highlight(element: DiagramElement): void;
     unhighlight(): void;
-    setPropertyEditorSelection(selection?: DiagramElement & {
+    setPropertyEditorSelection(selection?: {
         valueSet: ValueSet;
-    }): void;
+    } & (DiagramElement | DiagramModel)): void;
     isInUserSelection(selection: DiagramElement): boolean;
     addToUserSelection(selection: DiagramElement): void;
     removeFromUserSelection(selection: DiagramElement): void;
     toggleUserSelection(selection: DiagramElement): void;
     clearUserSelection(): void;
     cancelAllUserActions(): void;
+    canUserPerformAction(action: DiagramActions): boolean;
     private createInputField;
     private removeInputField;
+    private minimumSizeOfField;
 }
+export declare const cursorStyle: (style?: CursorStyle) => void;

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

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { LineShape, LineStyle } from '../../util/line';
 import { ClosedShape } from '../../util/shape';
-import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { DiagramActions } from './diagram-action';
 import { Property } from './diagram-property';
 /**
@@ -23,7 +23,7 @@ export interface DiagramConfig {
      * Background color of this diagram.
      * @default "#FFFFFF"
      */
-    color?: string;
+    backgroundColor?: string;
     /**
      * Distance between each point of the grid of this diagram in pixels. 0 or negative is interpreted as no grid.
      * @default 0
@@ -44,13 +44,9 @@ export interface DiagramConfig {
      * @default undefined
      */
     defaultConnection?: string;
-    /**
-     * Initial threshold value used to hide nodes whose priority value is below it.
-     * @default undefined
-     */
-    defaultPriorityThreshold?: number;
     /**
      * Possible values of the priority threshold that the user can toggle between to hide nodes whose priority value is below it.
+     * If it is possible to toggle the priority threshold via the filter button, it should have at least two values.
      * @default []
      */
     priorityThresholds?: number[];
@@ -66,11 +62,10 @@ export interface DiagramConfig {
      */
     userActions?: UserActionConfig;
     /**
-     * Configuration for the palettes of this diagram. Each configuration provided will configure one palette, which will be displayed as one of the tabs in the palette component.
-     * @see PaletteComponent
-     * @default undefined
+     * Mapping of components to a boolean indicating whether those components are enabled.
+     * @default {}
      */
-    palettes?: PaletteConfig[];
+    components?: ComponentsConfig;
     /**
      * Default attributes for each of the types of node of this diagram.
      * @default undefined
@@ -105,12 +100,152 @@ export interface DiagramConfig {
 export type UserActionConfig = {
     [key in DiagramActions]?: boolean;
 };
+/**
+ * Configuration for the components of the diagram.
+ * @public
+ */
+export type ComponentsConfig = {
+    /**
+     * Configuration for the buttons component in the diagram.
+     */
+    buttons?: ButtonsComponentConfig;
+    /**
+     * Configuration for the errors component in the diagram.
+     */
+    errors?: ErrorsComponentConfig;
+    /**
+     * Configuration for the palette component in the diagram.
+     */
+    palette?: PaletteComponentConfig;
+    /**
+     * Configuration for the property editor component in the diagram.
+     */
+    propertyEditor?: PropertyEditorComponentConfig;
+};
+/**
+ * Configuration for the buttons component in a diagram.
+ * @see DiagramButtonsComponent
+ * @public
+ */
+export interface ButtonsComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    exists?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'bottom-right'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'top'
+     */
+    direction?: Side;
+    /**
+     * Whether to enable the filter button in this component.
+     * @default true
+     */
+    enableFilter?: boolean;
+    /**
+     * Whether to enable the layout button in this component.
+     * @default true
+     */
+    enableLayout?: boolean;
+    /**
+     * Whether to enable the undo and redo buttons in this component.
+     * @default true
+     */
+    enableUndoRedo?: boolean;
+    /**
+     * Whether to enable the zoom button in this component.
+     * @default true
+     */
+    enableZoom?: boolean;
+    /**
+     * The rate by which the zoom level increases or decreses in this component.
+     * @default 2
+     */
+    zoomRate?: number;
+}
+/**
+ * Configuration for the errors component in a diagram.
+ * @see ErrorsComponent
+ * @public
+ */
+export interface ErrorsComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    exists?: boolean;
+}
+/**
+ * Configuration for the palette component in a diagram.
+ * @see PaletteComponent
+ * @public
+ */
+export interface PaletteComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    exists?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'top-left'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'bottom'
+     */
+    direction?: Side;
+    /**
+     * Dimension of this component in the direction perpendicular to the direction that it extends towards.
+     * @default '12rem'
+     */
+    width?: string;
+    /**
+     * Configuration for the sections of this palette.
+     * @default undefined
+     */
+    sections?: PaletteSectionConfig[];
+}
+/**
+ * Configuration for the property editor component in a diagram.
+ * @see PropertyEditorComponent
+ * @public
+ */
+export interface PropertyEditorComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    exists?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'top-right'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'bottom'
+     */
+    direction?: Side;
+    /**
+     * Dimension of this component in the direction perpendicular to the direction that it extends towards.
+     * @default '24rem'
+     */
+    width?: string;
+}
 /**
  * Configuration for a palette.
  * @see PaletteComponent
  * @public
  */
-export interface PaletteConfig {
+export interface PaletteSectionConfig {
     /**
      * Name of this palette. Displayed in the tab of this palette in the palette component. Can be left undefined if this is the only palette.
      */
@@ -143,7 +278,11 @@ export interface NodeTemplateConfig {
     /**
      * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
      */
-    label: string;
+    label?: string;
+    /**
+     * Look of the label of this template as it appears on the palette. By default, the label of the type of node is used.
+     */
+    labelLook?: FieldConfig | null;
     /**
      * Default values of the properties of nodes created from this template.
      */
@@ -172,7 +311,7 @@ export interface ConnectionTemplateConfig {
     /**
      * Background color of this template as it appears on the palette.
      */
-    color: string;
+    backgroundColor: string;
     /**
      * File path of the background image of this template as it appears on the palette.
      */
@@ -202,22 +341,22 @@ export interface NodeTypeConfig {
     name?: string;
     /**
      * Default width of nodes of this type in pixels.
-     * @default 0
+     * @default 1
      */
     defaultWidth?: number;
     /**
      * Default height of nodes of this type in pixels.
-     * @default 0
+     * @default 1
      */
     defaultHeight?: number;
     /**
      * Minimum width of nodes of this type in pixels.
-     * @default 0
+     * @default 1
      */
     minWidth?: number;
     /**
      * Minimum height of nodes of this type in pixels.
-     * @default 0
+     * @default 1
      */
     minHeight?: number;
     /**
@@ -235,19 +374,19 @@ export interface NodeTypeConfig {
      * @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 for the sections of this diagram if applicable.
-     * @default null
-     */
-    sections?: SectionConfig | null;
     /**
      * Configuration of the look of nodes of this type as it should appear to the user.
-     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, color: '#FFFFFF', borderColor: '#000000', selectedColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, fillColor: '#FFFFFF', borderColor: '#000000', selectedFillColor: '#FFFFFF', selectedBorderColor: '#000000'}
      */
     look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
     /**
@@ -319,6 +458,12 @@ export interface FieldConfig {
      * @default 'center'
      */
     verticalAlign?: VerticalAlign;
+    /**
+     * 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;
 }
 /**
  * Configuration for a port that is part of another element.
@@ -341,36 +486,44 @@ export interface PortConfig {
     label?: FieldConfig | null;
 }
 /**
- * Configuration for the sections of a node.
+ * Configuration for the grid of sections of a node.
  * @see DiagramSection
  * @public
  */
-export interface SectionConfig {
+export interface SectionGridConfig {
     /**
-     * The number of sections this node can accomodate along the x axis.
-     * @default 1
+     * Default widths of each column of sections of this grid in pixels.
      */
-    sectionsX?: number;
+    defaultWidths?: number[];
     /**
-     * The number of sections this node can accomodate along the y axis.
-     * @default 1
+     * Default heights of each row of sections of this grid in pixels.
      */
-    sectionsY?: number;
+    defaultHeights?: number[];
     /**
-     * Minimum width of sections of this node in pixels.
-     * @default 0
+     * Minimum widths of each column of sections of this grid in pixels.
      */
-    minWidth?: number;
+    minWidths?: number[];
     /**
-     * Minimum height of sections of this node in pixels.
-     * @default 0
+     * Minimum heights of each row of sections of this grid in pixels.
      */
-    minHeight?: number;
+    minHeights?: number[];
     /**
-     * The margin left around sections in pixels.
+     * The margin left around the sections of this grid in pixels.
      * @default 0
      */
     margin?: number;
+    /**
+     * Configuration for the sections of this grid.
+     * @default [[]]
+     */
+    sections: SectionConfig[][];
+}
+/**
+ * Configuration for a section of a node.
+ * @see DiagramSection
+ * @public
+ */
+export interface SectionConfig {
     /**
      * Configuration for the label of the sections.
      * @default null
@@ -386,6 +539,11 @@ export interface SectionConfig {
      * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, color: '#FFFFFF', borderColor: '#000000', selectedColor: '#FFFFFF', selectedBorderColor: '#000000'}
      */
     look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    /**
+     * The priority of this section when filtering out sections below a given threshold.
+     * @default 0
+     */
+    priority?: number;
 }
 /**
  * Configuration for the look of a node given by shape and color.
@@ -403,7 +561,7 @@ export interface NodeShapedLook {
     /**
      * Background color of nodes using this look.
      */
-    color: string;
+    fillColor: string;
     /**
      * Border color of nodes using this look.
      */
@@ -411,7 +569,7 @@ export interface NodeShapedLook {
     /**
      * Background color of nodes using this look when selected.
      */
-    selectedColor: string;
+    selectedFillColor: string;
     /**
      * Border color of nodes using this look when selected.
      */