@metadev/daga 5.0.2 → 5.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",
@@ -15,7 +15,6 @@
     "index.cjs.d.ts",
     "index.cjs.default.js",
     "index.cjs.js",
-    "index.cjs.mjs",
     "index.esm.d.ts",
     "index.esm.js",
     "package.json",
@@ -26,12 +25,12 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./src/index.d.ts",
       "module": "./index.esm.js",
-      "types": "./index.d.ts",
-      "import": "./index.cjs.mjs",
+      "import": "./index.esm.js",
       "default": "./index.cjs.js"
     }
   },
   "module": "./index.esm.js",
-  "types": "./index.d.ts"
+  "types": "./src/index.d.ts"
 }

package/src/index.d.ts

@@ -9,6 +9,7 @@ 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 { ResizableMode } from './lib/diagram/config/diagram-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';
@@ -18,7 +19,7 @@ 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 { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent, DiagramZoomEvent } from './lib/diagram/diagram-event';
+export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramDraggingNodeEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent, DiagramZoomEvent } 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';

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

@@ -20,9 +20,11 @@ export declare const isSecondaryButton: (event: MouseEvent) => boolean;
  * @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 getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, points: Point[], 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 needsResizerX: (element: DiagramNode | DiagramSection) => boolean;
+export declare const needsResizerY: (element: DiagramNode | DiagramSection) => boolean;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const SHAPED_LOOK_DEFAULTS: {
     fillColor: string;

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

@@ -53,6 +53,7 @@ export declare class DiagramCanvas implements Canvas {
     get connectionType(): DiagramConnectionType | undefined;
     set connectionType(value: DiagramConnectionType | undefined);
     autoTightenConnections: boolean;
+    tightenConnectionsAcrossPortTypes: boolean;
     allowConnectionLoops: boolean;
     allowSharingPorts: boolean;
     allowSharingBothPorts: boolean;
@@ -73,6 +74,7 @@ export declare class DiagramCanvas implements Canvas {
      * Invisible path followed by an unfinished connection. Used for making unfinished connections stop before the cursor rather than stopping right at the cursor.
      */
     private unfinishedConnectionTracer?;
+    private unfinishedConnectionPort?;
     private inputFieldContainer?;
     private multipleSelectionContainer?;
     private draggingFrom;
@@ -105,7 +107,8 @@ export declare class DiagramCanvas implements Canvas {
     getViewCoordinates(): Point;
     translateBy(x: number, y: number): void;
     translateTo(x: number, y: number): void;
-    center(): void;
+    zoomAndPanTo(x: number, y: number, z: number, duration?: number): void;
+    center(nodeIds?: string[], maxZoomLevel?: number, duration?: number): void;
     getClosestGridPoint(point: Point): Point;
     getCoordinatesOnScreen(): [Point, Point];
     private getEventHoldingCoordinates;
@@ -135,9 +138,12 @@ export declare class DiagramCanvas implements Canvas {
     private dropConnection;
     cancelAllUserActions(): void;
     canUserPerformAction(action: DiagramActions): boolean;
+    openTextInput(id: string): void;
     private createInputField;
     private removeInputField;
     private minimumSizeOfField;
+    private setFieldTextAndWrap;
+    private setFieldText;
     /**
      * Method to call to start the moving of a node triggered by a user drag event.
      */

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

@@ -52,6 +52,11 @@ export interface ButtonsComponentConfig {
      * @default 'top'
      */
     direction?: Side;
+    /**
+     * Duration of the center animation when pressing the center button. May be set to `0` or `undefined` to make it instant without animation.
+     * @default undefined
+     */
+    centerAnimationDuration?: number;
     /**
      * Whether to enable the user action (undo, redo) buttons in this component.
      * @default true

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

@@ -103,6 +103,11 @@ export interface ConnectionSettingsConfig {
      * @default true
      */
     autoTighten?: boolean;
+    /**
+     * When tightening a connection allow changing the start and end ports to ports of a different type.
+     * @default false
+     */
+    tightenAcrossPortTypes?: boolean;
     /**
      * Whether a connection can use the same port as start and end.
      * @default false
@@ -169,12 +174,12 @@ export interface NodeTypeConfig {
      * Whether the user can resize nodes of this type along the x axis.
      * @default false
      */
-    resizableX?: boolean;
+    resizableX?: boolean | ResizableMode;
     /**
      * Whether the user can resize nodes of this type along the y axis.
      * @default false
      */
-    resizableY?: boolean;
+    resizableY?: boolean | ResizableMode;
     /**
      * By how much the location of nodes of this type should be offset when snapping to grid in diagram units.
      * Each value corresponds to left, top, right and bottom respectively.
@@ -381,6 +386,11 @@ export interface FieldConfig {
      * @default 'top'
      */
     orientation?: Side | number;
+    /**
+     * Whether this field can have multiple lines.
+     * @default false
+     */
+    multiline?: boolean;
     /**
      * Whether this field and its root element should be resized automatically if the size of the text increases.
      * Setting this to true should also entail setting reasonable `minWidth` and `minHeight` values for the configuration of any nodes or sections that contain this field.
@@ -499,13 +509,13 @@ export interface SectionConfig {
      * If undefined, inherits from the parent node's resizableX setting.
      * @default undefined
      */
-    resizableX?: boolean;
+    resizableX?: boolean | ResizableMode;
     /**
      * Whether this section can be resized vertically.
      * If undefined, inherits from the parent node's resizableY setting.
      * @default undefined
      */
-    resizableY?: boolean;
+    resizableY?: boolean | ResizableMode;
 }
 /**
  * Configuration for a type of connection.
@@ -556,3 +566,6 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
+export declare enum ResizableMode {
+    OnlyWhenSelected = 0
+}

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

@@ -1,5 +1,6 @@
 import { Point } from '../util/canvas-util';
 import { DiagramElement } from './model/diagram-element';
+import { DiagramNode } from './model/diagram-node';
 /**
  * Represents an action taken by the user on the diagram which doesn't have an impact on the diagram's model.
  * Contrast with {@link DiagramAction} which does have an impact on the diagram's model.
@@ -20,7 +21,8 @@ export declare enum DiagramEvents {
     DoubleClick = 1,
     SecondaryClick = 2,
     Selection = 3,
-    Highlight = 4
+    Highlight = 4,
+    DraggingNode = 5
 }
 /**
  * Diagram event which consists of the user zooming or panning.
@@ -94,3 +96,15 @@ export declare class DiagramHighlightedEvent extends DiagramEvent {
      */
     constructor(target: DiagramElement | null);
 }
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+export declare class DiagramDraggingNodeEvent extends DiagramEvent {
+    target: DiagramNode;
+    /**
+     * Create a diagram dragging node event.
+     *
+     * @param target Diagram node which is targeted by the event.
+     */
+    constructor(target: DiagramNode);
+}

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

@@ -138,7 +138,7 @@ export declare class DiagramConnection extends DiagramElement {
      */
     endLabel: string;
     /**
-     * Points that this connection passes through.
+     * Points that this connection must pass through in its route from its start point to its end point, in order.
      * @public
      */
     points: Point[];

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

@@ -21,6 +21,7 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
     orientation: Side;
+    multiline: boolean;
     fit: boolean;
     shrink: boolean;
 };
@@ -90,6 +91,11 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     orientation: number;
+    /**
+     * Whether this field can have multiple lines.
+     * @public
+     */
+    multiline: boolean;
     private _text;
     /**
      * Default text that this field's text resets to when empty.
@@ -122,7 +128,7 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     shrink: boolean;
-    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, text: string, editable: boolean, fit: boolean, shrink: boolean);
+    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -145,7 +151,7 @@ export declare class DiagramFieldSet extends DiagramElementSet<DiagramField> {
      * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
      * @private
      */
-    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
+    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
     remove(id: string): void;
 }
 export declare const getBottomMargin: (config?: FieldConfig | null) => number;

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 { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
+import { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig, ResizableMode } from '../config/diagram-config';
 import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { PropertySet } from '../property/property';
 import { ValueSet } from '../property/value';
@@ -75,8 +75,8 @@ export declare class DiagramNodeType implements DiagramEntity {
     defaultHeight: number;
     minWidth: number;
     minHeight: number;
-    resizableX: boolean;
-    resizableY: boolean;
+    resizableX: boolean | ResizableMode;
+    resizableY: boolean | ResizableMode;
     snapToGridOffset: [number, number, number, number];
     bottomPadding: number;
     leftPadding: number;
@@ -207,6 +207,16 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
     updateInView(): void;
     raise(): void;
     getPriority(): number;
+    /**
+     * Returns whether this node can be resized horizontally.
+     * @public
+     */
+    getResizableX(): boolean;
+    /**
+     * Returns whether this node can be resized vertically.
+     * @public
+     */
+    getResizableY(): boolean;
     /**
      * Get the port of this node which is closest to the given coordinates.
      * @param coords A point in the diagram.

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

@@ -173,7 +173,7 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
     constructor(model: DiagramModel, type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
     get removed(): boolean;
     updateInView(): void;
-    raise(): void;
+    raise(raiseConnections?: boolean): void;
     /**
      * Add a connection to this port's list of outgoing connections.
      * @public

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 { FieldConfig, PortConfig, SectionConfig, SectionGridConfig } from '../config/diagram-config';
+import { FieldConfig, PortConfig, ResizableMode, SectionConfig, SectionGridConfig } from '../config/diagram-config';
 import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
@@ -61,8 +61,8 @@ export declare class DiagramSectionType {
     highlightedLook: NodeLook;
     selectedAndHighlightedLook: NodeLook;
     priority: number;
-    resizableX: boolean | undefined;
-    resizableY: boolean | undefined;
+    resizableX: boolean | ResizableMode | undefined;
+    resizableY: boolean | ResizableMode | undefined;
     constructor(options: SectionConfig);
 }
 /**

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

@@ -108,6 +108,11 @@ export interface Canvas {
      * @public
      */
     autoTightenConnections: boolean;
+    /**
+     * Whether a connection can be tightened to use ports of a different type.
+     * @public
+     */
+    tightenConnectionsAcrossPortTypes: boolean;
     /**
      * Whether a connection can use the same port as start and end.
      * @public
@@ -195,7 +200,8 @@ export interface Canvas {
      */
     zoomTo(level: number): void;
     /**
-     * Gets the current coordinates of the view.
+     * Gets the current coordinates of the center of view.
+     * Ensures that calling `translateTo()` with the result causes no changes.
      * @public
      */
     getViewCoordinates(): Point;
@@ -207,17 +213,30 @@ export interface Canvas {
      */
     translateBy(x: number, y: number): void;
     /**
-     * Translates the view to the given point.
+     * Translates the center of the view to the given point.
      * @public
      * @param x A coordinate along the x axis.
      * @param y A coordinate along the y axis.
      */
     translateTo(x: number, y: number): void;
+    /**
+     * Translates the center of the view to the given point and the given zoom level over the given duration of time.
+     * The duration may be set to `0` or `undefined` to make the move instant without animation.
+     * @public
+     * @param x A coordinate along the x axis.
+     * @param y A coordinate along the y axis.
+     * @param z A level of zoom.
+     * @param duration A duration for the animation in milliseconds. May be set to `0` or `undefined` to make it instant without animation.
+     */
+    zoomAndPanTo(x: number, y: number, z: number, duration?: number): void;
     /**
      * Centers by zooming and translating the view such that every element fits in the view.
      * @public
+     * @param nodeIds A list of node ids to center the view on. If `undefined`, it encompasses all nodes.
+     * @param maxZoomLevel The maximum zoom level that can be used when zooming into the elements. Can be used to prevent zooming in past a given level. `1` by default.
+     * @param duration A duration for the animation in milliseconds. May be set to `0` or `undefined` to make it instant without animation.
      */
-    center(): void;
+    center(nodeIds?: string[], maxZoomLevel?: number, duration?: number): void;
     /**
      * Get the closest grid point to the given point.
      * @public
@@ -337,6 +356,11 @@ export interface Canvas {
      * @param shrink Whether the node should shrink if there is excess space; `true` by default
      */
     fitNodeInView(id: string, shrink?: boolean): void;
+    /**
+     * Open a text input for a field.
+     * @param id The id of a field.
+     */
+    openTextInput(id: string): void;
     /**
      * Get the d3 Selection containing the root html div element of the canvas.
      * @private

package/src/lib/util/browser-util.d.ts

@@ -0,0 +1,2 @@
+export declare const isUserAgentSafari: (userAgent: string) => boolean;
+export declare const isSafari: boolean;

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

@@ -144,7 +144,7 @@ export declare const linesOverlap: (line1: Line, line2: Line) => boolean;
  */
 export declare const lineIntersectsRectangle: (line: Line, rectangle: Rectangle) => boolean;
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.

package/src/lib/util/trig.d.ts

@@ -9,12 +9,3 @@ export declare const radiansToDegrees: (theta: number) => number;
  * @returns The size of the bounding box.
  */
 export declare const rotate: (width: number, height: number, orientation: number) => [number, number];
-/**
- * Calculates the original size of the a rectangle that has been rotated by the given number of degrees resulting in a bounding box of the given size.
- *
- * @param width The width of a bounding box.
- * @param height The height of a bounding box.
- * @param orientation A rotation in degrees.
- * @returns The size of the original rectangle.
- */
-export declare const unrotate: (width: number, height: number, orientation: number) => [number, number];

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;

package/index.cjs.mjs

@@ -1,2 +0,0 @@
-export * from './index.cjs.js';
-export { _default as default } from './index.cjs.default.js';