@metadev/daga 4.0.1 → 4.0.2

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

@@ -2,7 +2,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { Point } from '../../util/canvas-util';
 import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
 import { DiagramModel } from '../model/diagram-model';
-import { ValueSet } from '../model/diagram-property';
+import { ValueSet } from '../property/value';
 /**
  * Text to display as the title of the property editor when editing the properties of a diagram's value set.
  * @private

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

@@ -2,7 +2,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { Point } from '../../util/canvas-util';
 import { DagaConnection, DagaNode } from '../converters/daga-model';
 import { DiagramNodeGeometry } from '../model/diagram-node';
-import { ValueSet } from '../model/diagram-property';
+import { ValueSet } from '../property/value';
 import { CollabTimestamp } from './primitives';
 /**
  * An action taken by a local or remote user.

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

@@ -37,6 +37,7 @@ export interface CanvasConfig {
      */
     priorityThresholds?: number[];
 }
+export type GridStyle = 'dots' | 'lines';
 /**
  * Configuration of the guide grid in the background of the diagram.
  */
@@ -46,6 +47,11 @@ export interface GridConfig {
      * @default true
      */
     enabled?: boolean;
+    /**
+     * The style of the grid.
+     * @default "dots"
+     */
+    style?: GridStyle;
     /**
      * Color of grid elements such as the points or axes.
      * @default "rgba(0, 0, 0, 0.1)"

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

@@ -0,0 +1,249 @@
+import { Corner, Side } from '../../util/svg-util';
+import { FieldConfig } from './diagram-config';
+import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
+/**
+ * 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;
+}

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

@@ -1,9 +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 { 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
@@ -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/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;