@metadev/daga 1.3.1 → 1.4.1

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.
      */

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

@@ -136,6 +136,7 @@ export declare class DiagramConnection extends DiagramElement {
     setStart(start?: DiagramPort): void;
     setEnd(end?: DiagramPort): void;
     tighten(): void;
+    getPriority(): number;
 }
 export declare class DiagramConnectionSet extends DiagramEntitySet<DiagramConnection> {
     private model;

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

@@ -1,5 +1,10 @@
 import * as d3 from 'd3';
 import { DiagramModel } from './diagram-model';
+/**
+ * Default priority value for diagram elements.
+ * @private
+ */
+export declare const DEFAULT_PRIORITY = 0;
 /**
  * Represents an object which exists as part of a diagram model.
  * @public
@@ -37,6 +42,11 @@ export declare abstract class DiagramElement implements DiagramEntity {
      */
     selected: boolean;
     constructor(model: DiagramModel, id: string);
+    /**
+     * Get the priority of this element to calculate whether it should be filtered out in the view or not.
+     * @public
+     */
+    abstract getPriority(): number;
     /**
      * Update the view of the canvas to show the current state of this element.
      * @public

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

@@ -15,11 +15,12 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     fontSize: number;
     margin: number;
     padding: number;
-    fontFamily: null;
+    fontFamily: string;
     color: string;
     selectedColor: string;
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
+    fit: boolean;
 };
 /**
  * A field which displays text and is part of a diagram element.
@@ -96,15 +97,21 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     editable: 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, id?: string);
+    /**
+     * Whether this field's size can adapt to the size of the text.
+     * @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, id?: string);
+    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     updateInView(): void;
     move(coords: Point): void;
-    getClosestNode(): DiagramNode | undefined;
+    getPriority(): number;
 }
 export declare class DiagramFieldSet extends DiagramEntitySet<DiagramField> {
     private model;
     constructor(model: DiagramModel);
-    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, id?: string | undefined): DiagramField;
+    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, id?: string | undefined): DiagramField;
     remove(id: string): void;
     filter(threshold?: number): DiagramField[];
     find(threshold?: number): DiagramField | undefined;

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

@@ -15,11 +15,6 @@ export declare class DiagramModel {
      * @private
      */
     canvas?: Canvas;
-    /**
-     * Whether changes to this model are updated in the canvas in real time.
-     * @private
-     */
-    renderToCanvas: boolean;
     /**
      * Nodes of this model.
      * @see DiagramNode
@@ -86,17 +81,6 @@ export declare class DiagramModel {
      */
     valueSet: ValueSet;
     constructor(canvas: Canvas | undefined, id: string | undefined, name: string, description: string | undefined, type: string, properties?: Property[]);
-    /**
-     * Enables rendering to canvas in real time and updates the view of this model in the canvas.
-     * @public
-     */
-    enableRenderToCanvas(): void;
-    /**
-     * Disables rendering to canvas in real time.
-     * Used to perform batches of changes to the model without the computational cost of rendering each change to the canvas individually.
-     * @public
-     */
-    disableRenderToCanvas(): void;
     /**
      * Deletes everything in this diagram.
      * @public

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

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionConfig } from './diagram-config';
+import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntity, DiagramEntitySet } from './diagram-element';
 import { DiagramField } from './diagram-field';
@@ -29,7 +29,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     resizableY: boolean;
     label: null;
     ports: never[];
-    sections: null;
+    sectionGrid: null;
     look: NodeShapedLook;
     isUnique: boolean;
     priority: number;
@@ -51,7 +51,7 @@ export declare class DiagramNodeType implements DiagramEntity {
     resizableY: boolean;
     label: FieldConfig | null;
     ports: PortConfig[];
-    sections: SectionConfig | null;
+    sectionGrid: SectionGridConfig | null;
     look: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
     isUnique: boolean;
     priority: number;
@@ -115,6 +115,7 @@ export declare class DiagramNode extends DiagramElement {
     set name(name: string);
     constructor(model: DiagramModel, type: DiagramNodeType, coords?: Point, id?: string);
     updateInView(): void;
+    getPriority(): number;
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
     getIncomingConnections(): DiagramConnection[];
     getOutgoingConnections(): DiagramConnection[];
@@ -122,7 +123,7 @@ export declare class DiagramNode extends DiagramElement {
     getAdjacentNodes(): DiagramNode[];
     move(coords: Point): void;
     stretch(direction: Side, distance: number): void;
-    stretchSections(direction: Side, distance: number, point: Point): void;
+    stretchSections(direction: Side, distance: number, indexX: number, indexY: number): void;
 }
 export declare class DiagramNodeSet extends DiagramEntitySet<DiagramNode> {
     private model;

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

@@ -59,6 +59,7 @@ export declare class DiagramPort extends DiagramElement {
     startConnection(connection: DiagramConnection): void;
     finishConnection(connection: DiagramConnection): void;
     getNode(): DiagramNode | undefined;
+    getPriority(): number;
     move(coords: Point): void;
     distanceTo(coords: Point): number;
 }

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

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { NodeShapedLook } from './diagram-config';
+import { NodeShapedLook, SectionConfig } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntitySet } from './diagram-element';
 import { DiagramField } from './diagram-field';
@@ -19,15 +19,35 @@ export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: NodeShapedLook;
  * @private
  */
 export declare const DIAGRAM_SECTION_DEFAULTS: {
-    sectionsX: number;
-    sectionsY: number;
-    minWidth: number;
-    minHeight: number;
-    margin: number;
     label: null;
     ports: never[];
     look: NodeShapedLook;
+    priority: number;
 };
+/**
+ * Default value of the default width of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_DEFAULT_WIDTH = 1;
+/**
+ * Default value of the default height of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_DEFAULT_HEIGHT = 1;
+/**
+ * Default value of the minimum width of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_MIN_WIDTH = 1;
+/**
+ * Default value of the minimum height of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_MIN_HEIGHT = 1;
 /**
  * A section of a node which can have connections and display a property of the node.
  * @see DiagramConnection
@@ -41,6 +61,14 @@ export declare class DiagramSection extends DiagramElement {
      * @public
      */
     node?: DiagramNode;
+    /**
+     * X index of this section in the parent node's section array.
+     */
+    indexXInNode: number;
+    /**
+     * Y index of this section in the parent node's section array.
+     */
+    indexYInNode: number;
     /**
      * Label of this section.
      * @public
@@ -72,8 +100,12 @@ export declare class DiagramSection extends DiagramElement {
      */
     get name(): string;
     set name(name: string);
-    constructor(model: DiagramModel, node: DiagramNode | undefined, coords: Point, width: number, height: number, id?: string);
+    constructor(model: DiagramModel, node: DiagramNode | undefined, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string);
     updateInView(): void;
+    getConfig(): SectionConfig | undefined;
+    getMinWidth(): number;
+    getMinHeight(): number;
+    getPriority(): number;
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
     getIncomingConnections(): DiagramConnection[];
     getOutgoingConnections(): DiagramConnection[];
@@ -84,7 +116,7 @@ export declare class DiagramSection extends DiagramElement {
 export declare class DiagramSectionSet extends DiagramEntitySet<DiagramSection> {
     private model;
     constructor(model: DiagramModel);
-    new(node: DiagramNode, coords: Point, width: number, height: number, id?: string | undefined, portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[]): DiagramSection;
+    new(node: DiagramNode, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string | undefined, portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[]): DiagramSection;
     remove(id: string): void;
     filter(threshold?: number): DiagramSection[];
     find(threshold?: number): DiagramSection | undefined;

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

@@ -7,7 +7,7 @@ import { PaletteComponent } from '../palette/palette.component';
 import { PropertyEditorComponent } from '../property-editor/property-editor.component';
 import { CanvasProviderService } from '../services/canvas-provider.service';
 import { DagaConfigurationService } from '../services/daga-configuration.service';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * A diagram's user interface editor.
@@ -23,6 +23,7 @@ export declare class DiagramEditorComponent implements AfterViewInit, DiagramEdi
     get config(): DiagramConfig;
     get canvas(): Canvas;
     Corner: typeof Corner;
+    Side: typeof Side;
     constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService);
     ngOnInit(): void;
     ngAfterViewInit(): void;