@metadev/daga 3.1.5 → 4.0.1

package/package.json

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

package/src/index.d.ts

@@ -1,11 +1,15 @@
 export { Corner, HorizontalAlign, Side, VerticalAlign } from '../../daga/src/lib/util/svg-util';
-export { ACTION_STACK_SIZE, DiagramCanvas, setCursorStyle } from './lib/diagram/canvas/diagram-canvas';
+export { ACTION_STACK_SIZE, DiagramCanvas } from './lib/diagram/canvas/diagram-canvas';
+export { setCursorStyle } from './lib/diagram/canvas/diagram-canvas-util';
 export { DiagramContextMenu } from './lib/diagram/canvas/diagram-context-menu';
 export { DiagramUserHighlight } from './lib/diagram/canvas/diagram-user-highlight';
 export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selection';
 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 } from './lib/diagram/config/diagram-canvas-config';
+export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
+export type { 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';
@@ -13,7 +17,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, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, ImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, ShapedLook, StretchableImageLook, UserActionConfig } from './lib/diagram/diagram-config';
 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';

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

@@ -0,0 +1,26 @@
+import * as d3 from 'd3';
+import { Point } from '../../util/canvas-util';
+import { LineFunction, LineShape } from '../../util/line';
+import { CursorStyle } from '../../util/style';
+import { Side } from '../../util/svg-util';
+import { DiagramField } from '../model/diagram-field';
+import { DiagramNode } from '../model/diagram-node';
+import { DiagramPort } from '../model/diagram-port';
+import { DiagramSection } from '../model/diagram-section';
+/**
+ * Checks if the given mouse event was produced with a secondary button press.
+ * @private
+ * @param event A mouse event.
+ * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ */
+export declare const isSecondaryButton: (event: MouseEvent) => boolean;
+/**
+ * Get the SVG path of a diagram connection.
+ * @private
+ * @see linePath
+ */
+export declare const getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, width: number, startMarkerWidth: number | undefined, endMarkerWidth: number | undefined) => string;
+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;

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

@@ -4,10 +4,9 @@ import { DiagramValidator } from '../../errors/diagram-validator';
 import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
-import { CursorStyle } from '../../util/style';
 import { CollabEngine } from '../collab/collab-engine';
+import { DiagramConfig } from '../config/diagram-config';
 import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
-import { DiagramConfig } from '../diagram-config';
 import { DiagramEvent } from '../diagram-event';
 import { DiagramConnectionType } from '../model/diagram-connection';
 import { DiagramModel } from '../model/diagram-model';
@@ -145,4 +144,3 @@ export declare class DiagramCanvas implements Canvas {
     private continueMultipleSelection;
     private finishMultipleSelection;
 }
-export declare const setCursorStyle: (style?: CursorStyle) => void;

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/config/diagram-canvas-config.d.ts

@@ -0,0 +1,97 @@
+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[];
+}
+/**
+ * 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;
+}
+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/{diagram-config.d.ts → config/diagram-config.d.ts}

@@ -1,9 +1,9 @@
-import { Point } from '../util/canvas-util';
-import { LineFunction, LineShape, LineStyle } from '../util/line';
-import { ClosedShape, ShapeFunction } from '../util/shape';
-import { Corner, HorizontalAlign, Side, VerticalAlign } from '../util/svg-util';
-import { DiagramActions } from './diagram-action';
-import { Property } from './model/diagram-property';
+import { Point } from '../../util/canvas-util';
+import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { DiagramActions } from '../diagram-action';
+import { Property } from '../model/diagram-property';
+import { CanvasConfig } from './diagram-canvas-config';
+import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -87,69 +87,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
@@ -348,7 +285,7 @@ export interface NodeTemplateConfig {
     /**
      * 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?: ShapedLook | ImageLook | StretchableImageLook;
+    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.
      */
@@ -468,10 +405,9 @@ export interface NodeTypeConfig {
      */
     ports?: PortConfig[];
     /**
-     * Configuration of the look of nodes of this type as it should appear to the user.
-     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, fillColor: '#FFFFFF', borderColor: '#000000', selectedFillColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     * Configuration of the look of nodes of this type as they should appear to the user.
      */
-    look?: ShapedLook | ImageLook | StretchableImageLook;
+    look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
     /**
      * If true and a node of this type already exists in the diagram, the user can't create more nodes of this type.
      * @default false
@@ -524,7 +460,7 @@ export interface PortTypeConfig {
      */
     allowsIncoming?: boolean;
     /**
-     * Configuration for the label of nodes of this type.
+     * Configuration for the label of ports of this type.
      * @default null
      */
     label?: FieldConfig | null;
@@ -534,10 +470,9 @@ export interface PortTypeConfig {
      */
     width?: number;
     /**
-     * Configuration of the look of ports of this type as they should appear to the user. Can be used to override the default look of ports.
-     * @default undefined
+     * Configuration of the look of ports of this type as they should appear to the user.
      */
-    look?: ImageLook;
+    look?: ShapedLookConfig | ImageLookConfig;
 }
 /**
  * Configuration for a port that is part of another element.
@@ -651,7 +586,7 @@ export interface SectionGridConfig {
      */
     margin?: number;
     /**
-     * Configuration for the sections of this grid.
+     * Configuration for the look of each section of this grid.
      * @default [[]]
      */
     sections: SectionConfig[][];
@@ -673,162 +608,15 @@ export interface SectionConfig {
      */
     ports?: PortConfig[];
     /**
-     * Configuration of the look of the sections as it should appear to the user.
-     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, color: '#FFFFFF', borderColor: '#000000', selectedColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     * Configuration of the look of nodes of this type as they should appear to the user.
      */
-    look?: ShapedLook | ImageLook | StretchableImageLook;
+    look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
     /**
      * The priority of this section when filtering out sections below a given threshold.
      * @default 0
      */
     priority?: number;
 }
-/**
- * Configuration for the look of a node given by shape and color.
- * @public
- */
-export interface ShapedLook {
-    /**
-     * String used to discern the type of node look this is.
-     */
-    lookType: 'shaped-look';
-    /**
-     * Shape of nodes using this look.
-     */
-    shape: ClosedShape | ShapeFunction;
-    /**
-     * Background color of nodes using this look.
-     */
-    fillColor: string;
-    /**
-     * Border color of nodes using this look.
-     */
-    borderColor: string;
-    /**
-     * Background color of nodes using this look when selected.
-     */
-    selectedFillColor: string;
-    /**
-     * Border color of nodes using this look when selected.
-     */
-    selectedBorderColor: string;
-}
-/**
- * Configuration for the look of a node given by an image.
- * @public
- */
-export interface ImageLook {
-    /**
-     * String used to discern the type of node look this is.
-     */
-    lookType: 'image-look';
-    /**
-     * File path to the background image used by nodes using this look.
-     */
-    backgroundImage: string;
-    /**
-     * File path to the background image used by nodes using this look when selected.
-     */
-    selectedBackgroundImage: string;
-}
-/**
- * Configuration for the look of a node given by fixed size images in the corners and stretchable images in the middle.
- * @public
- */
-export interface StretchableImageLook {
-    /**
-     * String used to discern the type of node look this is.
-     */
-    lookType: 'stretchable-image-look';
-    /**
-     * 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 diagram units.
-     */
-    rightMargin: number;
-    /**
-     * 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 diagram units.
-     */
-    bottomMargin: number;
-    /**
-     * File path to the background image used at the top left of nodes using this look.
-     */
-    backgroundImageTopLeft: string;
-    /**
-     * File path to the background image used at the top of nodes using this look.
-     */
-    backgroundImageTop: string;
-    /**
-     * File path to the background image used at the top right of nodes using this look.
-     */
-    backgroundImageTopRight: string;
-    /**
-     * File path to the background image used at the left of nodes using this look.
-     */
-    backgroundImageLeft: string;
-    /**
-     * File path to the background image used at the center of nodes using this look.
-     */
-    backgroundImageCenter: string;
-    /**
-     * File path to the background image used at the right of nodes using this look.
-     */
-    backgroundImageRight: string;
-    /**
-     * File path to the background image used at the bottom left of nodes using this look.
-     */
-    backgroundImageBottomLeft: string;
-    /**
-     * File path to the background image used at the bottom of nodes using this look.
-     */
-    backgroundImageBottom: string;
-    /**
-     * File path to the background image used at the bottom right of nodes using this look.
-     */
-    backgroundImageBottomRight: string;
-    /**
-     * File path to the background image used at the top left of nodes using this look when selected.
-     */
-    selectedBackgroundImageTopLeft: string;
-    /**
-     * File path to the background image used at the top of nodes using this look when selected.
-     */
-    selectedBackgroundImageTop: string;
-    /**
-     * File path to the background image used at the top right of nodes using this look when selected.
-     */
-    selectedBackgroundImageTopRight: string;
-    /**
-     * File path to the background image used at the left of nodes using this look when selected.
-     */
-    selectedBackgroundImageLeft: string;
-    /**
-     * File path to the background image used at the center of nodes using this look when selected.
-     */
-    selectedBackgroundImageCenter: string;
-    /**
-     * File path to the background image used at the right of nodes using this look when selected.
-     */
-    selectedBackgroundImageRight: string;
-    /**
-     * File path to the background image used at the bottom left of nodes using this look when selected.
-     */
-    selectedBackgroundImageBottomLeft: string;
-    /**
-     * File path to the background image used at the bottom of nodes using this look when selected.
-     */
-    selectedBackgroundImageBottom: string;
-    /**
-     * File path to the background image used at the bottom right of nodes using this look when selected.
-     */
-    selectedBackgroundImageBottomRight: string;
-}
 /**
  * Configuration for a type of connection.
  * @public
@@ -843,45 +631,24 @@ export interface ConnectionTypeConfig {
      * Name of this type of connection as displayed to the user.
      */
     name?: string;
-    /**
-     * Color of the line of connections of this type.
-     * @default '#000000'
-     */
-    color?: string;
-    /**
-     * Color of the line of connections of this type when selected.
-     * @default '#000000'
-     */
-    selectedColor?: string;
-    /**
-     * Width of the line of connections of this type in diagram units.
-     * @default 1
-     */
-    width?: number;
-    /**
-     * Shape of the line of connections of this type.
-     * @default 'straight'
-     */
-    shape?: LineShape | LineFunction;
-    /**
-     * Style of the line of connections of this type.
-     * @default 'solid'
-     */
-    style?: LineStyle;
     /**
      * Configuration of the labels of connections of this type.
      */
     label?: FieldConfig | null;
+    /**
+     * Configuration of the look of connections of this type as they should appear to the user.
+     */
+    look?: ConnectionLookConfig;
     /**
      * Configuration of the look of the marker at the start of connections of this type as it should appear to the user. Undefined for no marker.
-     * @default null
+     * @default undefined
      */
-    defaultStartMarkerLook?: ConnectionMarkerLook | null;
+    startMarkerLook?: MarkerImageLookConfig;
     /**
      * Configuration of the look of the marker at the end of connections of this type as it should appear to the user. Undefined for no marker.
-     * @default null
+     * @default undefined
      */
-    defaultEndMarkerLook?: ConnectionMarkerLook | null;
+    endMarkerLook?: MarkerImageLookConfig;
     /**
      * Ids of the types of nodes that connections of this type can start from. Must correspond to the ids of types of node defined in the nodeTypes list. Should list one id at minimum.
      * @default []
@@ -899,41 +666,3 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
-/**
- * Configuration for the look of the markers at the start and end of a connection.
- * @public
- */
-export interface ConnectionMarkerLook {
-    /**
-     * File path to the image used for the marker.
-     */
-    image: string;
-    /**
-     * File path to the image used for the marker when selected.
-     */
-    selectedImage: string;
-    /**
-     * 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 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}
-     */
-    markerHeight: number;
-    /**
-     * The x coordinate of the reference point of the image used for the marker.
-     * @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/refX |refX}
-     */
-    markerRefX: number;
-    /**
-     * The y coordinate of the reference point of the image used for the marker.
-     * @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/refY |refY}
-     */
-    markerRefY: number;
-}