@metadev/daga 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -7,6 +7,10 @@ export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selectio
 export type { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
 export { CollabClient } from './lib/diagram/collab/collab-client';
 export type { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
+export type { CanvasConfig, GridConfig, GridStyle } from './lib/diagram/config/diagram-canvas-config';
+export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ErrorsComponentConfig, NodeTemplateConfig, PaletteComponentConfig, PaletteSectionConfig, PropertyEditorComponentConfig } from './lib/diagram/config/diagram-components-config';
+export type { ConnectionTypeConfig, DiagramConfig, FieldConfig, NodeTypeConfig, PortConfig, PortTypeConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
+export type { ConnectionLook, ConnectionLookConfig, ImageLook, ImageLookConfig, Look, LookConfig, MarkerImageLook, MarkerImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from './lib/diagram/config/diagram-look-config';
 export { DagaExporter } from './lib/diagram/converters/daga-exporter';
 export { DagaImporter } from './lib/diagram/converters/daga-importer';
 export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
@@ -14,8 +18,6 @@ export type { DiagramModelExporter } from './lib/diagram/converters/diagram-mode
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
 export { ActionStack, AddConnectionAction, AddNodeAction, ApplyLayoutAction, DiagramActionMethod, DiagramActions, EditFieldAction, MoveAction, PasteAction, RemoveAction, SetGeometryAction, SetParentAction, UpdateValuesAction } from './lib/diagram/diagram-action';
 export type { DiagramAction } from './lib/diagram/diagram-action';
-export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
-export type { MarkerImageLook, StretchableImageLook, ImageLook, ShapedLook, Look, MarkerImageLookConfig, StretchableImageLookConfig, ImageLookConfig, ShapedLookConfig, LookConfig } from './lib/diagram/config/diagram-look';
 export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';
@@ -38,10 +40,12 @@ export { DiagramNode, DiagramNodeSet, DiagramNodeType, filterByOnlyAncestors, fi
 export type { DiagramNodeGeometry } from './lib/diagram/model/diagram-node';
 export { DiagramObject, DiagramObjectSet } from './lib/diagram/model/diagram-object';
 export { DiagramPort, DiagramPortSet, DiagramPortType } from './lib/diagram/model/diagram-port';
-export { diff, equals, isObject, Property, PropertySet, Type, ValueSet } from './lib/diagram/model/diagram-property';
-export type { Option } from './lib/diagram/model/diagram-property';
 export { DiagramSection, DiagramSectionSet } from './lib/diagram/model/diagram-section';
 export type { DiagramSectionGeometry } from './lib/diagram/model/diagram-section';
+export { Property, PropertySet, Type } from './lib/diagram/property/property';
+export type { Option } from './lib/diagram/property/property';
+export { diff, equals, isObject } from './lib/diagram/property/property-util';
+export { ValueSet } from './lib/diagram/property/value';
 export type { DiagramError } from './lib/errors/diagram-error';
 export type { DiagramValidator } from './lib/errors/diagram-validator';
 export type { Canvas } from './lib/interfaces/canvas';

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

@@ -7,6 +7,7 @@ import { DiagramField } from '../model/diagram-field';
 import { DiagramNode } from '../model/diagram-node';
 import { DiagramPort } from '../model/diagram-port';
 import { DiagramSection } from '../model/diagram-section';
+import { DiagramCanvas } from './diagram-canvas';
 /**
  * Checks if the given mouse event was produced with a secondary button press.
  * @private
@@ -24,3 +25,12 @@ export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const updateLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
+export declare const GRID_DEFAULTS: {
+    enabled: boolean;
+    style: string;
+    color: string;
+    snap: boolean;
+    spacing: number;
+    thickness: number;
+};
+export declare const initializeGrid: (canvas: DiagramCanvas, canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, backgroundPatternId: string) => void;

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

@@ -5,6 +5,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
 import { CollabEngine } from '../collab/collab-engine';
+import { GridStyle } from '../config/diagram-canvas-config';
 import { DiagramConfig } from '../config/diagram-config';
 import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
 import { DiagramEvent } from '../diagram-event';
@@ -40,6 +41,7 @@ export declare class DiagramCanvas implements Canvas {
     readonly actionStack: ActionStack;
     readonly collabEngine: CollabEngine;
     backgroundColor: string;
+    gridStyle: GridStyle;
     gridSize: number;
     gridThickness: number;
     gridColor: string;

package/src/lib/diagram/canvas/diagram-context-menu.d.ts

@@ -1,4 +1,8 @@
 import { Canvas } from '../../interfaces/canvas';
+import { ContextMenuConfig } from '../config/diagram-canvas-config';
+export declare const CONTEXT_MENU_DEFAULTS: {
+    customButtons: never[];
+};
 /**
  * Stores the functionality regarding the context menu of a diagram canvas.
  * @public
@@ -6,13 +10,14 @@ import { Canvas } from '../../interfaces/canvas';
  */
 export declare class DiagramContextMenu {
     private readonly canvas;
+    private config;
     private contextMenuContainer?;
     /**
      * Constructs a context menu object.
      * @public
      * @param canvas A canvas.
      */
-    constructor(canvas: Canvas);
+    constructor(canvas: Canvas, config?: ContextMenuConfig);
     /**
      * Opens the context menu at the location determined by the given mouse event.
      * @public

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

@@ -0,0 +1,103 @@
+import { Canvas } from '../../interfaces/canvas';
+/**
+ * The configuration for the visual behavior of a diagram in the user interface.
+ * @public
+ */
+export interface CanvasConfig {
+    /**
+     * Configuration for the context menu in this diagram.
+     * If left undefined, the default context menu is used.
+     */
+    contextMenu?: ContextMenuConfig;
+    /**
+     * 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[];
+}
+export type GridStyle = 'dots' | 'lines';
+/**
+ * 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;
+    /**
+     * 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)"
+     */
+    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;
+}
+export interface ContextMenuConfig {
+    /**
+     * Custom buttons to be added to the context menu.
+     * @default []
+     */
+    customButtons?: ContextMenuButtonConfig[];
+}
+export interface ContextMenuButtonConfig {
+    /**
+     * Text on the button.
+     */
+    name: string;
+    /**
+     * File path to the image icon used by this button.
+     */
+    image?: string;
+    /**
+     * A function which is executed when the user clicks on this button.
+     * @param canvas The diagram's canvas.
+     */
+    onPress?: (canvas: Canvas) => void;
+    /**
+     * A function which given the canvas determines if the button should be present if the user opens a context menu on the canvas.
+     * @param canvas The diagram's canvas.
+     * @returns `true` if the button should be present on the menu, `false` otherwise.
+     */
+    condition?: (canvas: Canvas) => boolean;
+}

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;
+}