@metadev/daga 3.1.4 → 4.0.0

package/package.json

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

package/src/index.d.ts

@@ -1,5 +1,6 @@
 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';
@@ -13,7 +14,8 @@ 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, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/diagram-config';
+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';
@@ -35,7 +37,7 @@ export { DiagramModel } from './lib/diagram/model/diagram-model';
 export { DiagramNode, DiagramNodeSet, DiagramNodeType, filterByOnlyAncestors, filterByOnlyDescendants } from './lib/diagram/model/diagram-node';
 export type { DiagramNodeGeometry } from './lib/diagram/model/diagram-node';
 export { DiagramObject, DiagramObjectSet } from './lib/diagram/model/diagram-object';
-export { DiagramPort, DiagramPortSet } from './lib/diagram/model/diagram-port';
+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';

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/{diagram-config.d.ts → config/diagram-config.d.ts}

@@ -1,9 +1,8 @@
-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 { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look';
 /**
  * The configuration for a diagram.
  * @public
@@ -60,6 +59,16 @@ export interface DiagramConfig {
      * @default undefined
      */
     nodeTypes?: NodeTypeConfig[];
+    /**
+     * Default attributes for each of the types of port of this diagram. By default, no attributes are set.
+     * @default undefined
+     */
+    portTypeDefaults?: Partial<PortTypeConfig>;
+    /**
+     * List of the types of port that can be used in this diagram. By default, no types are created.
+     * @default undefined
+     */
+    portTypes?: PortTypeConfig[];
     /**
      * Default attributes for each of the types of connection of this diagram. By default, no attributes are set.
      * @default undefined
@@ -338,7 +347,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?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    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.
      */
@@ -458,10 +467,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?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    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
@@ -489,6 +497,70 @@ export interface NodeTypeConfig {
      */
     properties?: Property[];
 }
+/**
+ * Configuration for a type of port.
+ * @public
+ * @see DiagramPortType
+ */
+export interface PortTypeConfig {
+    /**
+     * Id of this type of port used to reference this type of port internally.
+     */
+    id: string;
+    /**
+     * Name of this type of port as displayed to the user.
+     */
+    name?: string;
+    /**
+     * Whether this type of port can be used as a connection start point.
+     * @default true
+     */
+    allowsOutgoing?: boolean;
+    /**
+     * Whether this type of port can be used as a connection end point.
+     * @default true
+     */
+    allowsIncoming?: boolean;
+    /**
+     * Configuration for the label of ports of this type.
+     * @default null
+     */
+    label?: FieldConfig | null;
+    /**
+     * Width of this type of port as it appears in the diagram in diagram units.
+     * @default 24
+     */
+    width?: number;
+    /**
+     * Configuration of the look of ports of this type as they should appear to the user.
+     */
+    look?: ShapedLookConfig | ImageLookConfig;
+}
+/**
+ * Configuration for a port that is part of another element.
+ * @public
+ * @see DiagramPort
+ */
+export interface PortConfig {
+    /**
+     * Id of the type of this port. May be left `undefined` to use the default look. If set, it must correspond to the id of a type of port defined in the portTypes list.
+     * @default undefined
+     */
+    type?: string;
+    /**
+     * Coordinates of this port relative to its root element's coordinates.
+     */
+    coords: Point;
+    /**
+     * Optional coordinates of the point where connections start and end within this port relative to its root element's coordinates.
+     * By default, it is the same as the port's coordinates.
+     */
+    connectionPoint?: Point;
+    /**
+     * Direction that the connections passing by this port follow at the point of the port.
+     */
+    direction: Side;
+}
 /**
  * Configuration for a field that is part of another element.
  * @public
@@ -548,26 +620,6 @@ export interface FieldConfig {
      */
     fit?: boolean;
 }
-/**
- * Configuration for a port that is part of another element.
- * @public
- * @see DiagramPort
- */
-export interface PortConfig {
-    /**
-     * Coordinates of this port relative to its root element's coordinates.
-     */
-    coords: Point;
-    /**
-     * Direction that the connections passing by this port follow at the point of the port.
-     */
-    direction: Side;
-    /**
-     * Configuration for the label of this port.
-     * @default null
-     */
-    label?: FieldConfig | null;
-}
 /**
  * Configuration for the grid of sections of a node.
  * @public
@@ -596,7 +648,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[][];
@@ -618,162 +670,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?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    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 NodeShapedLook {
-    /**
-     * 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 NodeImageLook {
-    /**
-     * 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 NodeStretchableImageLook {
-    /**
-     * 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
@@ -788,45 +693,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 []
@@ -844,41 +728,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;
-}