@metadev/daga 4.0.0 → 4.0.2

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

@@ -1,8 +1,10 @@
 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 { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look';
+import { Property } from '../property/property';
+import { CanvasConfig } from './diagram-canvas-config';
+import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
+import { ComponentsConfig } from './diagram-components-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -86,69 +88,6 @@ export interface DiagramConfig {
      */
     properties?: Property[];
 }
-/**
- * The configuration for the visual behavior of a diagram in the user interface.
- * @public
- */
-export interface CanvasConfig {
-    /**
-     * Configuration for the grid in the canvas.
-     * If left undefined, it is interpreted as disabling the grid,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    grid?: GridConfig;
-    /**
-     * Background color of this diagram.
-     * @default "#FFFFFF"
-     */
-    backgroundColor?: string;
-    /**
-     * The factor by which the zoom level increases or decreases when the user users buttons or keys to zoom in or out. Should be above 1.
-     * @default 2
-     */
-    zoomFactor?: number;
-    /**
-     * The rate by which the view of the canvas moves when the user users buttons or keys to pan at a default zoom level in diagram units. Should be above 1.
-     * @default 100
-     */
-    panRate?: 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[];
-}
-/**
- * Configuration of the guide grid in the background of the diagram.
- */
-export interface GridConfig {
-    /**
-     * Whether the grid is present in the diagram.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Color of grid elements such as the points or axes.
-     * @default "rgba(0, 0, 0, 0.1)"
-     */
-    color?: string;
-    /**
-     * When true, the user moving or stretching nodes will cause their corners to automatically snap to the closest grid point.
-     * @default false
-     */
-    snap?: boolean;
-    /**
-     * Distance between each point of the grid of this diagram in diagram units.
-     * @default 10
-     */
-    spacing?: number;
-    /**
-     * In a range between 0 and 1, how thick the points of the grid are relative to the distance between them.
-     * @default 0.05
-     */
-    thickness?: number;
-}
 /**
  * Configuration for which user actions are allowed in a diagram.
  * @public
@@ -156,252 +95,6 @@ export interface GridConfig {
 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
@@ -466,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.
      */
@@ -620,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/model/diagram-connection.d.ts

@@ -2,12 +2,13 @@ import { Point } from '../../util/canvas-util';
 import { LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
 import { ConnectionTypeConfig, FieldConfig } from '../config/diagram-config';
-import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look';
+import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look-config';
 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-decorator.d.ts

@@ -36,7 +36,6 @@ export declare class DiagramDecorator extends DiagramElement {
     priority: number;
     html: string;
     constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string);
-    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
     raise(): void;

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

@@ -110,7 +110,6 @@ export declare class DiagramField extends DiagramElement {
      */
     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;

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 { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look';
+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;

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

@@ -25,7 +25,6 @@ export declare class DiagramObject extends DiagramElement {
     priority: number;
     html: string;
     constructor(model: DiagramModel, coords: Point, width: number, height: number, priority: number, html: string, id: string);
-    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
     raise(): void;

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

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { FieldConfig, PortTypeConfig } from '../config/diagram-config';
-import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig } from '../config/diagram-look';
+import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';

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

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { FieldConfig, PortConfig, SectionConfig, SectionGridConfig } from '../config/diagram-config';
-import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look';
+import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';

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;