@metadev/daga 4.0.1 → 4.1.0

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

@@ -1,8 +1,9 @@
 import { Point } from '../../util/canvas-util';
-import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { DiagramActions } from '../diagram-action';
-import { Property } from '../model/diagram-property';
+import { Property } from '../property/property';
 import { CanvasConfig } from './diagram-canvas-config';
+import { ComponentsConfig } from './diagram-components-config';
 import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
@@ -94,252 +95,6 @@ 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.
-     * If left undefined, it is interpreted as disabling the buttons component,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    buttons?: ButtonsComponentConfig;
-    /**
-     * Configuration for the errors component in the diagram.
-     * If left undefined, it is interpreted as disabling the errors component,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    errors?: ErrorsComponentConfig;
-    /**
-     * Configuration for the palette component in the diagram.
-     * If left undefined, it is interpreted as disabling the palette component,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    palette?: PaletteComponentConfig;
-    /**
-     * Configuration for the property editor component in the diagram.
-     * If left undefined, it is interpreted as disabling the property editor component,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    propertyEditor?: PropertyEditorComponentConfig;
-};
-/**
- * Configuration for the buttons component in a diagram.
- * @public
- * @see DiagramButtonsComponent
- */
-export interface ButtonsComponentConfig {
-    /**
-     * Whether this component is present in the diagram.
-     * @default true
-     */
-    enabled?: 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 user action (undo, redo) buttons in this component.
-     * @default true
-     */
-    enableAction?: boolean;
-    /**
-     * Whether to enable the filter button in this component.
-     * @default false
-     */
-    enableFilter?: boolean;
-    /**
-     * Whether to enable the layout button in this component.
-     * @default false
-     */
-    enableLayout?: boolean;
-    /**
-     * Whether to enable the user selection (copy, paste, cut, delete) buttons in this component.
-     * @default true
-     */
-    enableSelection?: boolean;
-    /**
-     * Whether to enable the zoom buttons in this component.
-     * @default true
-     */
-    enableZoom?: boolean;
-}
-/**
- * Configuration for the errors component in a diagram.
- * @public
- * @see ErrorsComponent
- */
-export interface ErrorsComponentConfig {
-    /**
-     * Whether this component is present in the diagram.
-     * @default true
-     */
-    enabled?: boolean;
-}
-/**
- * Configuration for the palette component in a diagram.
- * @public
- * @see PaletteComponent
- */
-export interface PaletteComponentConfig {
-    /**
-     * Whether this component is present in the diagram.
-     * @default true
-     */
-    enabled?: 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;
-    /**
-     * 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
-     */
-    sections?: PaletteSectionConfig[];
-}
-/**
- * Configuration for the property editor component in a diagram.
- * @public
- * @see PropertyEditorComponent
- */
-export interface PropertyEditorComponentConfig {
-    /**
-     * Whether this component is present in the diagram.
-     * @default true
-     */
-    enabled?: 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.
- * @public
- * @see PaletteComponent
- */
-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.
-     */
-    name?: string;
-    /**
-     * Categories of this palette. Used to enable displaying one of different categories of templates as defined here. Can be left undefined if there are no categories.
-     */
-    categories?: {
-        [key: string]: (NodeTemplateConfig | ConnectionTemplateConfig)[];
-    };
-    /**
-     * List of templates that are always displayed in this palette. Can be left undefined.
-     */
-    templates?: (NodeTemplateConfig | ConnectionTemplateConfig)[];
-}
-/**
- * Configuration for a template of a node in a palette.
- * @public
- * @see PaletteComponent
- */
-export interface NodeTemplateConfig {
-    /**
-     * String used to indicate that this is a template of a node.
-     */
-    templateType: 'node';
-    /**
-     * 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?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
-    /**
-     * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
-     */
-    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.
-     */
-    values?: {
-        [key: string]: unknown;
-    };
-}
-/**
- * Configuration for a template of a connection in a palette.
- * @public
- * @see PaletteComponent
- */
-export interface ConnectionTemplateConfig {
-    /**
-     * String used to indicate that this is a template of a connection.
-     */
-    templateType: 'connection';
-    /**
-     * Id of the type of connection of this template. Must correspond to the id of a type of connection defined in the connectionTypes list.
-     */
-    type: string;
-    /**
-     * Label of this template as it appears on the palette.
-     */
-    label: string;
-    /**
-     * Background color of this template as it appears on the palette.
-     */
-    backgroundColor: string;
-    /**
-     * 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.
-     */
-    width: number;
-    /**
-     * Height of this template in diagram units as it appears on the palette.
-     */
-    height: number;
-}
 /**
  * Configuration for a type of node.
  * @public
@@ -404,6 +159,11 @@ export interface NodeTypeConfig {
      * @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.
      */
@@ -558,6 +318,31 @@ export interface FieldConfig {
      */
     fit?: boolean;
 }
+/**
+ * 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 HTML of this decorator.
+     */
+    html: string;
+}
 /**
  * Configuration for the grid of sections of a node.
  * @public

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

@@ -102,6 +102,12 @@ export declare enum DiagramActions {
      * @see AddNodeAction
      */
     AddNode = "add-node",
+    /**
+     * Action that corresponds to the addition or removal of sections in a node.
+     * @public
+     * @see AddSectionAction
+     */
+    AddSectionAction = "add-section",
     /**
      * Action that corresponds to applying a layout which changes the location of several nodes.
      * @public
@@ -192,6 +198,23 @@ export declare class AddNodeAction implements DiagramAction {
     undo(): boolean;
     redo(): boolean;
 }
+/**
+ * Action which consists of adding or removing sections in a node.
+ * @private
+ * @see DiagramSection
+ */
+export declare class AddSectionAction implements DiagramAction {
+    readonly canvas: Canvas;
+    nodeId: string;
+    copyColumnIndex: number | undefined;
+    copyRowIndex: number | undefined;
+    removeColumnIndex: number | undefined;
+    removeRowIndex: number | undefined;
+    constructor(canvas: Canvas, nodeId: string, copyColumnIndex: number | undefined, copyRowIndex: number | undefined, removeColumnIndex: number | undefined, removeRowIndex: number | undefined);
+    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

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class AdjacencyLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class BreadthAdjacencyLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class BreadthLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class ForceLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class HorizontalLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class PriorityLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class TreeLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class VerticalLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -7,7 +7,8 @@ import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
-import { PropertySet, ValueSet } from './diagram-property';
+import { PropertySet } from '../property/property';
+import { ValueSet } from '../property/value';
 /**
  * Default values of the parameters of a diagram connection.
  * @private

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

@@ -1,11 +1,12 @@
 import { Canvas } from '../../interfaces/canvas';
+import { Property } from '../property/property';
+import { ValueSet } from '../property/value';
 import { DiagramConnectionSet } from './diagram-connection';
 import { DiagramDecoratorSet } from './diagram-decorator';
 import { DiagramFieldSet } from './diagram-field';
 import { DiagramNodeSet } from './diagram-node';
 import { DiagramObjectSet } from './diagram-object';
 import { DiagramPortSet } from './diagram-port';
-import { Property, ValueSet } from './diagram-property';
 import { DiagramSectionSet } from './diagram-section';
 /**
  * Stores the data of a diagram.

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

@@ -1,8 +1,10 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
-import { FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
+import { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
 import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look-config';
+import { PropertySet } from '../property/property';
+import { ValueSet } from '../property/value';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
@@ -10,7 +12,6 @@ import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramField, LabeledElement } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
-import { PropertySet, ValueSet } from './diagram-property';
 import { DiagramSection, DiagramSectionGeometry, DiagramSectionGrid } from './diagram-section';
 /**
  * Default values of the look of a diagram node.
@@ -34,6 +35,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     padding: number;
     label: null;
     ports: never[];
+    decorators: never[];
     sectionGrid: null;
     look: ShapedLookConfig;
     isUnique: boolean;
@@ -80,6 +82,7 @@ export declare class DiagramNodeType implements DiagramEntity {
     topPadding: number;
     label: FieldConfig | null;
     ports: PortConfig[];
+    decorators: DecoratorConfig[];
     sectionGrid: DiagramSectionGrid | null;
     defaultLook: NodeLook;
     selectedLook: NodeLook;
@@ -273,6 +276,26 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      * @public
      */
     setGeometry(geometry: DiagramNodeGeometry): void;
+    /**
+     * Removes all sections with the given index along the x axis.
+     * @public
+     */
+    removeSectionColumn(columnIndex: number): void;
+    /**
+     * Removes all sections with the given index along the y axis.
+     * @public
+     */
+    removeSectionRow(rowIndex: number): void;
+    /**
+     * Creates a copy of all sections with the given index along the x axis.
+     * @public
+     */
+    copySectionColumn(columnIndex: number): void;
+    /**
+     * Creates a copy of all sections with the given index along the y axis.
+     * @public
+     */
+    copySectionRow(rowIndex: number): void;
 }
 export declare class DiagramNodeSet extends DiagramElementSet<DiagramNode> {
     private model;

package/src/lib/diagram/property/property-util.d.ts

@@ -0,0 +1,61 @@
+import { ValueSet } from './value';
+/**
+ * Checks if the given value is not empty.
+ * @private
+ * @param a A value.
+ * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
+ */
+export declare const empty: (a: unknown) => boolean;
+/**
+ * Checks whether the given values are equal.
+ * @public
+ * @param a A value.
+ * @param b A value.
+ * @returns `true` if the given values are equal, `false` otherwise.
+ */
+export declare const equals: (a: unknown, b: unknown) => boolean;
+/**
+ * Calculates the differences between the two given objects and returns two objects containing the differences in each relative to the other.
+ *
+ * For each key that holds a different value in the two objects, the resulting objects will contain the differences in the values under that key.
+ *
+ * This function is recursive, that is, if the value under the key is an object, the function will be applied to that value recursively.
+ *
+ * @public
+ * @param a An object.
+ * @param b An object.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+export declare const diff: (a: {
+    [key: string]: unknown;
+}, b: {
+    [key: string]: unknown;
+}) => [{
+    [key: string]: unknown;
+}, {
+    [key: string]: unknown;
+}];
+/**
+ * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
+ *
+ * @param a An object.
+ * @param b An object.
+ * @param valueSet A ValueSet to use as reference for the keys and types of each property.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+export declare const diffProperties: (a: {
+    [key: string]: unknown;
+}, b: {
+    [key: string]: unknown;
+}, valueSet: ValueSet) => [{
+    [key: string]: unknown;
+}, {
+    [key: string]: unknown;
+}];
+/**
+ * Checks if the given value is an object.
+ * @public
+ * @param x A value.
+ * @returns `true` if the given value is an object, `false` otherwise.
+ */
+export declare const isObject: (x: unknown) => boolean;