@metadev/daga 1.5.7 → 3.0.0

package/{lib/diagram-editor → src/lib}/diagram/diagram-config.d.ts

@@ -1,9 +1,9 @@
-import { Point } from '../../util/canvas-util';
-import { LineShape, LineStyle } from '../../util/line';
-import { ClosedShape } from '../../util/shape';
-import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { Point } from '../util/canvas-util';
+import { LineShape, LineStyle } from '../util/line';
+import { ClosedShape } from '../util/shape';
+import { Corner, HorizontalAlign, Side, VerticalAlign } from '../util/svg-util';
 import { DiagramActions } from './diagram-action';
-import { Property } from './diagram-property';
+import { Property } from './model/diagram-property';
 /**
  * The configuration for a diagram.
  * @public
@@ -20,40 +20,24 @@ export interface DiagramConfig {
      */
     name?: string;
     /**
-     * Background color of this diagram.
-     * @default "#FFFFFF"
-     */
-    backgroundColor?: string;
-    /**
-     * Distance between each point of the grid of this diagram in pixels. 0 or negative is interpreted as no grid.
-     * @default 0
-     */
-    gridSize?: number;
-    /**
-     * When true, nodes moved by the user will be moved to the closest point where the top left corner matches a grid point.
-     * @default false
+     * Configuration regarding the canvas.
+     * @default {}
      */
-    snapToGrid?: boolean;
+    canvas?: CanvasConfig;
     /**
      * When true, connections made by the user will have their type assumed based on the type of the source and target nodes.
      * @default false
      */
-    guessConnectionType?: boolean;
+    inferConnectionType?: boolean;
     /**
-     * Id of the type of connection that is selected by default initially for the user to make.
+     * Id of the type of connection that is initially selected for the user to draw when drawing connections. By default, no type is selected.
      * @default undefined
      */
     defaultConnection?: string;
-    /**
-     * 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[];
     /**
      * Name of the layout format used to arrange the nodes of this diagram when pressing the layout button in the diagram buttons component.
-     * @see DiagramButtonsComponent
      * @default undefined
+     * @see DiagramButtonsComponent
      */
     layoutFormat?: string;
     /**
@@ -67,32 +51,95 @@ export interface DiagramConfig {
      */
     components?: ComponentsConfig;
     /**
-     * Default attributes for each of the types of node of this diagram.
+     * Default attributes for each of the types of node of this diagram. By default, no attributes are set.
      * @default undefined
      */
     nodeTypeDefaults?: Partial<NodeTypeConfig>;
     /**
-     * List of the types of node that can be used in this diagram.
+     * List of the types of node that can be used in this diagram. By default, no types are created.
      * @default undefined
      */
     nodeTypes?: NodeTypeConfig[];
     /**
-     * Default attributes for each of the types of connection of this diagram.
+     * Default attributes for each of the types of connection of this diagram. By default, no attributes are set.
      * @default undefined
      */
     connectionTypeDefaults?: Partial<ConnectionTypeConfig>;
     /**
-     * List of the types of connection that can be used in this diagram.
+     * List of the types of connection that can be used in this diagram. By default, no types are created.
      * @default undefined
      */
     connectionTypes?: ConnectionTypeConfig[];
     /**
      * Properties of this diagram that can be edited in the property editor component.
-     * @see PropertyEditorComponent
      * @default []
+     * @see PropertyEditorComponent
      */
     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
@@ -107,32 +154,40 @@ export type UserActionConfig = {
 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.
- * @see DiagramButtonsComponent
  * @public
+ * @see DiagramButtonsComponent
  */
 export interface ButtonsComponentConfig {
     /**
      * Whether this component is present in the diagram.
      * @default true
      */
-    exists?: boolean;
+    enabled?: boolean;
     /**
      * Location of this component in the screen.
      * @default 'bottom-right'
@@ -144,54 +199,54 @@ export interface ButtonsComponentConfig {
      */
     direction?: Side;
     /**
-     * Whether to enable the filter button in this component.
+     * 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 true
+     * @default false
      */
     enableLayout?: boolean;
     /**
-     * Whether to enable the undo and redo buttons in this component.
+     * Whether to enable the user selection (copy, paste, cut, delete) buttons in this component.
      * @default true
      */
-    enableUndoRedo?: boolean;
+    enableSelection?: boolean;
     /**
-     * Whether to enable the zoom button in this component.
+     * Whether to enable the zoom buttons 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
+ * @see ErrorsComponent
  */
 export interface ErrorsComponentConfig {
     /**
      * Whether this component is present in the diagram.
      * @default true
      */
-    exists?: boolean;
+    enabled?: boolean;
 }
 /**
  * Configuration for the palette component in a diagram.
- * @see PaletteComponent
  * @public
+ * @see PaletteComponent
  */
 export interface PaletteComponentConfig {
     /**
      * Whether this component is present in the diagram.
      * @default true
      */
-    exists?: boolean;
+    enabled?: boolean;
     /**
      * Location of this component in the screen.
      * @default 'top-left'
@@ -208,22 +263,27 @@ export interface PaletteComponentConfig {
      */
     width?: string;
     /**
-     * Configuration for the sections of this palette.
+     * 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.
- * @see PropertyEditorComponent
  * @public
+ * @see PropertyEditorComponent
  */
 export interface PropertyEditorComponentConfig {
     /**
      * Whether this component is present in the diagram.
      * @default true
      */
-    exists?: boolean;
+    enabled?: boolean;
     /**
      * Location of this component in the screen.
      * @default 'top-right'
@@ -242,8 +302,8 @@ export interface PropertyEditorComponentConfig {
 }
 /**
  * Configuration for a palette.
- * @see PaletteComponent
  * @public
+ * @see PaletteComponent
  */
 export interface PaletteSectionConfig {
     /**
@@ -263,8 +323,8 @@ export interface PaletteSectionConfig {
 }
 /**
  * Configuration for a template of a node in a palette.
- * @see PaletteComponent
  * @public
+ * @see PaletteComponent
  */
 export interface NodeTemplateConfig {
     /**
@@ -292,8 +352,8 @@ export interface NodeTemplateConfig {
 }
 /**
  * Configuration for a template of a connection in a palette.
- * @see PaletteComponent
  * @public
+ * @see PaletteComponent
  */
 export interface ConnectionTemplateConfig {
     /**
@@ -317,18 +377,22 @@ export interface ConnectionTemplateConfig {
      */
     icon: string;
     /**
-     * Width of this template in pixels as it appears on the palette.
+     * 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 pixels as it appears on the palette.
+     * Height of this template in diagram units as it appears on the palette.
      */
     height: number;
 }
 /**
  * Configuration for a type of node.
- * @see DiagramNodeType
  * @public
+ * @see DiagramNodeType
  */
 export interface NodeTypeConfig {
     /**
@@ -340,22 +404,22 @@ export interface NodeTypeConfig {
      */
     name?: string;
     /**
-     * Default width of nodes of this type in pixels.
+     * Default width of nodes of this type in diagram units.
      * @default 1
      */
     defaultWidth?: number;
     /**
-     * Default height of nodes of this type in pixels.
+     * Default height of nodes of this type in diagram units.
      * @default 1
      */
     defaultHeight?: number;
     /**
-     * Minimum width of nodes of this type in pixels.
+     * Minimum width of nodes of this type in diagram units.
      * @default 1
      */
     minWidth?: number;
     /**
-     * Minimum height of nodes of this type in pixels.
+     * Minimum height of nodes of this type in diagram units.
      * @default 1
      */
     minHeight?: number;
@@ -401,15 +465,15 @@ export interface NodeTypeConfig {
     priority?: number;
     /**
      * Properties of nodes of this type that can be edited in the property editor component.
-     * @see PropertyEditorComponent
      * @default []
+     * @see PropertyEditorComponent
      */
     properties?: Property[];
 }
 /**
  * Configuration for a field that is part of another element.
- * @see DiagramField
  * @public
+ * @see DiagramField
  */
 export interface FieldConfig {
     /**
@@ -418,24 +482,24 @@ export interface FieldConfig {
      */
     editable?: boolean;
     /**
-     * The size of the font of this field in pixels.
+     * The size of the font of this field in diagram units.
      * @default 0
      */
     fontSize?: number;
     /**
-     * The margin around the field in pixels. May be a single value or an array, in which case the value is interpreted in the same way as in CSS margin.
+     * The margin around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS margin.
      * @default 0
      */
     margin?: number | number[];
     /**
-     * The padding around the field in pixels. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * The padding around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
      * @default 0
      */
     padding?: number | number[];
     /**
      * The font family of the text of this field.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |font-family}
      * @default null
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |font-family}
      */
     fontFamily?: string | null;
     /**
@@ -467,8 +531,8 @@ export interface FieldConfig {
 }
 /**
  * Configuration for a port that is part of another element.
- * @see DiagramPort
  * @public
+ * @see DiagramPort
  */
 export interface PortConfig {
     /**
@@ -487,28 +551,28 @@ export interface PortConfig {
 }
 /**
  * Configuration for the grid of sections of a node.
- * @see DiagramSection
  * @public
+ * @see DiagramSection
  */
 export interface SectionGridConfig {
     /**
-     * Default widths of each column of sections of this grid in pixels.
+     * Default widths of each column of sections of this grid in diagram units.
      */
     defaultWidths?: number[];
     /**
-     * Default heights of each row of sections of this grid in pixels.
+     * Default heights of each row of sections of this grid in diagram units.
      */
     defaultHeights?: number[];
     /**
-     * Minimum widths of each column of sections of this grid in pixels.
+     * Minimum widths of each column of sections of this grid in diagram units.
      */
     minWidths?: number[];
     /**
-     * Minimum heights of each row of sections of this grid in pixels.
+     * Minimum heights of each row of sections of this grid in diagram units.
      */
     minHeights?: number[];
     /**
-     * The margin left around the sections of this grid in pixels.
+     * The margin left around the sections of this grid in diagram units.
      * @default 0
      */
     margin?: number;
@@ -520,8 +584,8 @@ export interface SectionGridConfig {
 }
 /**
  * Configuration for a section of a node.
- * @see DiagramSection
  * @public
+ * @see DiagramSection
  */
 export interface SectionConfig {
     /**
@@ -603,19 +667,19 @@ export interface NodeStretchableImageLook {
      */
     lookType: 'stretchable-image-look';
     /**
-     * Width taken up by the images at the left of nodes using this look in pixels.
+     * Width taken up by the images at the left of nodes using this look in diagram units.
      */
     leftMargin: number;
     /**
-     * Width taken up by the images at the right of nodes using this look in pixels.
+     * Width taken up by the images at the right of nodes using this look in diagram units.
      */
     rightMargin: number;
     /**
-     * Width taken up by the images at the top of nodes using this look in pixels.
+     * Width taken up by the images at the top of nodes using this look in diagram units.
      */
     topMargin: number;
     /**
-     * Width taken up by the images at the bottom of nodes using this look in pixels.
+     * Width taken up by the images at the bottom of nodes using this look in diagram units.
      */
     bottomMargin: number;
     /**
@@ -693,8 +757,8 @@ export interface NodeStretchableImageLook {
 }
 /**
  * Configuration for a type of connection.
- * @see DiagramConnectionType
  * @public
+ * @see DiagramConnectionType
  */
 export interface ConnectionTypeConfig {
     /**
@@ -716,7 +780,7 @@ export interface ConnectionTypeConfig {
      */
     selectedColor?: string;
     /**
-     * Width of the line of connections of this type in pixels.
+     * Width of the line of connections of this type in diagram units.
      * @default 1
      */
     width?: number;
@@ -756,8 +820,8 @@ export interface ConnectionTypeConfig {
     endTypes?: string[];
     /**
      * Properties of connections of this type that can be edited in the property editor component.
-     * @see PropertyEditorComponent
      * @default []
+     * @see PropertyEditorComponent
      */
     properties?: Property[];
 }
@@ -775,13 +839,13 @@ export interface ConnectionMarkerLook {
      */
     selectedImage: string;
     /**
-     * The width of the marker in pixels.
+     * The width of the marker in diagram units.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerWidth |markerWidth}
      */
     markerWidth: number;
     /**
-     * The height of the marker in pixels.
+     * The height of the marker in diagram units.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerHeight |markerHeight}
      */

package/{lib/diagram-editor → src/lib}/diagram/diagram-event.d.ts

@@ -1,6 +1,6 @@
-import { Point } from '../../util/canvas-util';
-import { Events } from '../../util/events';
-import { DiagramElement } from './diagram-element';
+import { Point } from '../util/canvas-util';
+import { Events } from '../util/events';
+import { DiagramElement } from './model/diagram-element';
 /**
  * Represents an action taken by the user on the diagram.
  * @public

package/{lib/diagram-editor → src/lib}/diagram/layout/adjacency-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to depth first search.

package/{lib/diagram-editor → src/lib}/diagram/layout/breadth-adjacency-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which places adjacent nodes close by, placing nodes in order according to breadth first search.

package/{lib/diagram-editor → src/lib}/diagram/layout/breadth-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which arranges the nodes by a breadth first search system according to their distance to the first node in the list.

package/{lib/diagram-editor → src/lib}/diagram/layout/diagram-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 /**
  * A layout algorithm that can be applied to a diagram.
  * @public

package/{lib/diagram-editor → src/lib}/diagram/layout/force-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which attracts connected nodes and repels unconnected nodes.

package/{lib/diagram-editor → src/lib}/diagram/layout/horizontal-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which arranges all the nodes in a horizontal line.

package/{lib/diagram-editor → src/lib}/diagram/layout/priority-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which arranges the nodes by their priority first.

package/{lib/diagram-editor → src/lib}/diagram/layout/tree-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which arranges the nodes in trees from left to right by depth relative to the nodes with most priority.

package/{lib/diagram-editor → src/lib}/diagram/layout/vertical-layout.d.ts

@@ -1,4 +1,4 @@
-import { DiagramModel } from '../diagram-model';
+import { DiagramModel } from '../model/diagram-model';
 import { DiagramLayout } from './diagram-layout';
 /**
  * A layout which arranges all the nodes in a vertical line.

package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-connection.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
-import { ConnectionMarkerLook, ConnectionTypeConfig, FieldConfig } from './diagram-config';
+import { ConnectionMarkerLook, ConnectionTypeConfig, FieldConfig } from '../diagram-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramModel } from './diagram-model';
@@ -9,8 +9,8 @@ import { DiagramPort } from './diagram-port';
 import { PropertySet, ValueSet } from './diagram-property';
 /**
  * Default values of the parameters of a diagram connection.
- * @see DiagramConnection
  * @private
+ * @see DiagramConnection
  */
 export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
     name: string;
@@ -44,8 +44,8 @@ export declare const CAN_CONNECTIONS_SHARE_PORTS = true;
 export declare const CAN_TIGHTEN_CONNECTIONS = true;
 /**
  * A connection type, which holds properties that connections of this type share in common.
- * @see ConnectionTypeConfig
  * @public
+ * @see ConnectionTypeConfig
  */
 export declare class DiagramConnectionType implements DiagramEntity {
     id: string;
@@ -67,8 +67,8 @@ export declare class DiagramConnectionType implements DiagramEntity {
 }
 /**
  * A connection which goes from one port to another.
- * @see DiagramPort
  * @public
+ * @see DiagramPort
  */
 export declare class DiagramConnection extends DiagramElement {
     type: DiagramConnectionType;