@metadev/daga 3.1.3 → 3.1.5

package/package.json

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

package/src/index.d.ts

@@ -11,14 +11,14 @@ export { DagaImporter } from './lib/diagram/converters/daga-importer';
 export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
 export type { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
-export { ActionStack, ApplyLayoutAction, MoveAction, PasteAction, SetParentAction, AddConnectionAction, AddNodeAction, DiagramActionMethod, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram/diagram-action';
+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 { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramSecondaryClickEvent } from './lib/diagram/diagram-event';
+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';
 export { BreadthLayout } from './lib/diagram/layout/breadth-layout';
-export { layouts, getLocationsOfNodes } from './lib/diagram/layout/diagram-layout';
+export { getLocationsOfNodes, layouts } from './lib/diagram/layout/diagram-layout';
 export type { DiagramLayout } from './lib/diagram/layout/diagram-layout';
 export { ForceLayout } from './lib/diagram/layout/force-layout';
 export { HorizontalLayout } from './lib/diagram/layout/horizontal-layout';
@@ -35,7 +35,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.d.ts

@@ -117,7 +117,8 @@ export declare class DiagramCanvas implements Canvas {
     private updateConnectionMarkersInView;
     fitFieldRootInView(id: string): void;
     fitNodeInView(id: string): void;
-    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
+    selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
+    selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;
     selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasElements(): d3.Selection<SVGGElement, unknown, null, unknown>;
     private startConnection;

package/src/lib/diagram/converters/daga-model.d.ts

@@ -79,7 +79,9 @@ export interface DagaSection {
 }
 export interface DagaPort {
     id: string;
+    type?: string;
     coords: Point;
+    connectionPoint?: Point;
     direction: Side;
     label: string;
     collabMeta?: {

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

@@ -60,6 +60,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 +348,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?: ShapedLook | ImageLook | StretchableImageLook;
     /**
      * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
      */
@@ -461,7 +471,7 @@ export interface NodeTypeConfig {
      * 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'}
      */
-    look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    look?: ShapedLook | ImageLook | StretchableImageLook;
     /**
      * 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 +499,71 @@ 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 nodes 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. Can be used to override the default look of ports.
+     * @default undefined
+     */
+    look?: ImageLook;
+}
+/**
+ * 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 +623,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
@@ -621,7 +676,7 @@ export interface SectionConfig {
      * 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'}
      */
-    look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    look?: ShapedLook | ImageLook | StretchableImageLook;
     /**
      * The priority of this section when filtering out sections below a given threshold.
      * @default 0
@@ -632,7 +687,7 @@ export interface SectionConfig {
  * Configuration for the look of a node given by shape and color.
  * @public
  */
-export interface NodeShapedLook {
+export interface ShapedLook {
     /**
      * String used to discern the type of node look this is.
      */
@@ -662,7 +717,7 @@ export interface NodeShapedLook {
  * Configuration for the look of a node given by an image.
  * @public
  */
-export interface NodeImageLook {
+export interface ImageLook {
     /**
      * String used to discern the type of node look this is.
      */
@@ -680,7 +735,7 @@ export interface NodeImageLook {
  * 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 {
+export interface StretchableImageLook {
     /**
      * String used to discern the type of node look this is.
      */

package/src/lib/diagram/model/diagram-node.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
-import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from '../diagram-config';
+import { FieldConfig, ImageLook, NodeTypeConfig, PortConfig, SectionGridConfig, ShapedLook, StretchableImageLook } from '../diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
@@ -16,7 +16,7 @@ import { DiagramSection, DiagramSectionGeometry } from './diagram-section';
  * @private
  * @see DIAGRAM_NODE_TYPE_DEFAULTS
  */
-export declare const DIAGRAM_NODE_LOOK_DEFAULTS: NodeShapedLook;
+export declare const DIAGRAM_NODE_LOOK_DEFAULTS: ShapedLook;
 /**
  * Default values of the parameters of a diagram node.
  * @private
@@ -34,7 +34,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     label: null;
     ports: never[];
     sectionGrid: null;
-    look: NodeShapedLook;
+    look: ShapedLook;
     isUnique: boolean;
     canBeParentless: boolean;
     childrenTypes: never[];
@@ -73,7 +73,7 @@ export declare class DiagramNodeType implements DiagramEntity {
     label: FieldConfig | null;
     ports: PortConfig[];
     sectionGrid: SectionGridConfig | null;
-    look: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    look: ShapedLook | ImageLook | StretchableImageLook;
     isUnique: boolean;
     canBeParentless: boolean;
     childrenTypes: string[];

package/src/lib/diagram/model/diagram-port.d.ts

@@ -1,7 +1,9 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
+import { FieldConfig, ImageLook, PortTypeConfig } from '../diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
+import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramField, LabeledElement } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramNode } from './diagram-node';
@@ -12,10 +14,48 @@ import { DiagramSection } from './diagram-section';
  * @see DiagramPort
  */
 export declare const DIAGRAM_PORT_DEFAULTS: {
-    radius: number;
     highlightedColor: string;
     selectedColor: string;
 };
+/**
+ * Default values of the parameters of a diagram port.
+ * @private
+ * @see DiagramPort
+ */
+export declare const DIAGRAM_PORT_TYPE_DEFAULTS: {
+    name: string;
+    label: null;
+    allowsOutgoing: boolean;
+    allowsIncoming: boolean;
+    width: number;
+};
+/**
+ * A port type, which holds properties that ports of this type share in common.
+ * @public
+ * @see PortTypeConfig
+ */
+export declare class DiagramPortType implements DiagramEntity {
+    readonly id: string;
+    name: string;
+    label: FieldConfig | null;
+    /**
+     * Whether ports of this type can be used as a connection start point.
+     */
+    allowsOutgoing: boolean;
+    /**
+     * Whether ports of this type can be used as a connection end point.
+     */
+    allowsIncoming: boolean;
+    /**
+     * Width of ports of this type in diagram units.
+     */
+    width: number;
+    /**
+     * Look of ports of this type.
+     */
+    look?: ImageLook;
+    constructor(options: PortTypeConfig);
+}
 /**
  * A port which is part of a node or section and at which connections can start or end.
  * @public
@@ -24,6 +64,7 @@ export declare const DIAGRAM_PORT_DEFAULTS: {
  * @see DiagramSection
  */
 export declare class DiagramPort extends DiagramElement implements LabeledElement {
+    type: DiagramPortType | undefined;
     /**
      * Element that this port belongs to.
      * @public
@@ -34,16 +75,29 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      * @public
      */
     label?: DiagramField;
+    /**
+     * Coordinates of this port.
+     * @public
+     */
+    coords: Point;
+    /**
+     * Coordinates of the point where connections end and start from this port.
+     * @public
+     */
+    connectionPoint: Point;
     /**
      * Direction of the connections of this port at the coordinates of this port.
      * @public
      */
     direction: Side;
     /**
-     * Coordinates of this port.
-     * @public
+     * Whether this port can be used as a connection start point.
      */
-    coords: Point;
+    get allowsOutgoing(): boolean;
+    /**
+     * Whether this port can be used as a connection end point.
+     */
+    get allowsIncoming(): boolean;
     /**
      * Connections that start at this port.
      * @public
@@ -54,7 +108,13 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      * @public
      */
     incomingConnections: DiagramConnection[];
-    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id: string);
+    /**
+     * Name of this port. Alias for this port's label's text.
+     * @public
+     */
+    get name(): string;
+    set name(name: string);
+    constructor(model: DiagramModel, type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -87,6 +147,11 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
 }
 export declare class DiagramPortSet extends DiagramElementSet<DiagramPort> {
     private model;
+    /**
+     * Set of the possible types of port that the ports of this set can have.
+     * @public
+     */
+    types: DiagramEntitySet<DiagramPortType>;
     /**
      * Instance a set of ports for the given model. This method is used internally.
      * @private
@@ -96,6 +161,6 @@ export declare class DiagramPortSet extends DiagramElementSet<DiagramPort> {
      * Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
      * @private
      */
-    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id: string): DiagramPort;
+    new(type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string): DiagramPort;
     remove(id: string): void;
 }

package/src/lib/diagram/model/diagram-section.d.ts

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { NodeShapedLook, SectionConfig } from '../diagram-config';
+import { SectionConfig, ShapedLook } from '../diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
@@ -13,7 +13,7 @@ import { DiagramPort } from './diagram-port';
  * @private
  * @see DIAGRAM_SECTION_DEFAULTS
  */
-export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: NodeShapedLook;
+export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: ShapedLook;
 /**
  * Default values of the parameters of a diagram section.
  * @private
@@ -22,7 +22,7 @@ export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: NodeShapedLook;
 export declare const DIAGRAM_SECTION_DEFAULTS: {
     label: null;
     ports: never[];
-    look: NodeShapedLook;
+    look: ShapedLook;
     priority: number;
 };
 /**

package/src/lib/interfaces/canvas.d.ts

@@ -289,10 +289,15 @@ export interface Canvas {
      */
     fitNodeInView(id: string): void;
     /**
-     * Get the d3 Selection containing the svg root node of the canvas.
+     * Get the d3 Selection containing the root html div element of the canvas.
      * @private
      */
-    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
+    selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
+    /**
+     * Get the d3 Selection containing the svg element of the canvas.
+     * @private
+     */
+    selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;
     /**
      * Get the d3 Selection containing the view of all the elements in the canvas.
      * @private