@metadev/daga 4.2.0 → 4.2.1

package/package.json

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

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

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

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

@@ -65,10 +65,12 @@ export declare class DiagramUserSelection extends DiagramElementSet<DiagramEleme
      * Opens the value set of a diagram model or a diagram element in the property editor.
      * @public
      * @param selection A diagram model or a diagram element with a value set.
+     * @param makeUpdateValuesAction Whether the method should create an UpdateValuesAction.
      * @see PropertyEditor
+     * @see UpdateValuesAction
      */
     openInPropertyEditor(selection?: {
         valueSet: ValueSet;
-    } & (DiagramElement | DiagramModel)): void;
+    } & (DiagramElement | DiagramModel), makeUpdateValuesAction?: boolean): void;
     private makeUpdateValuesAction;
 }

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

@@ -1,4 +1,4 @@
-import { Point } from '../../util/canvas-util';
+import { AnchorPoint, Point } from '../../util/canvas-util';
 import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { DiagramActions } from '../diagram-action';
 import { Property } from '../property/property';
@@ -258,6 +258,24 @@ export interface PortConfig {
      * Direction that the connections passing by this port follow at the point of the port.
      */
     direction: Side;
+    /**
+     * Horizontal anchor point for this port. Determines how the port behaves when its root element is resized.
+     * - 'start': Always maintains the same distance from the left edge
+     * - 'middle': Always maintains the same relative position from the center
+     * - 'end': Always maintains the same distance from the right edge
+     * - 'floating': Scales proportionally with the element (default behavior)
+     * @default 'floating'
+     */
+    anchorPointX?: AnchorPoint;
+    /**
+     * Vertical anchor point for this port. Determines how the port behaves when its root element is resized.
+     * - 'start': Always maintains the same distance from the top edge
+     * - 'middle': Always maintains the same relative position from the center
+     * - 'end': Always maintains the same distance from the bottom edge
+     * - 'floating': Scales proportionally with the element (default behavior)
+     * @default 'floating'
+     */
+    anchorPointY?: AnchorPoint;
 }
 /**
  * Configuration for a field that is part of another element.
@@ -322,6 +340,11 @@ export interface FieldConfig {
      * @default false
      */
     fit?: boolean;
+    /**
+     * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space.
+     * @default true
+     */
+    shrink?: boolean;
 }
 /**
  * Configuration for a decorator that is part of another element.
@@ -347,6 +370,24 @@ export interface DecoratorConfig {
      * Inner HTML of this decorator.
      */
     html: string;
+    /**
+     * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
+     * - 'start': Always maintains the same distance from the left edge
+     * - 'middle': Always maintains the same relative position from the center
+     * - 'end': Always maintains the same distance from the right edge
+     * - 'floating': Scales proportionally with the element (default behavior)
+     * @default 'floating'
+     */
+    anchorPointX?: AnchorPoint;
+    /**
+     * Vertical anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
+     * - 'start': Always maintains the same distance from the top edge
+     * - 'middle': Always maintains the same relative position from the center
+     * - 'end': Always maintains the same distance from the bottom edge
+     * - 'floating': Scales proportionally with the element (default behavior)
+     * @default 'floating'
+     */
+    anchorPointY?: AnchorPoint;
 }
 /**
  * Configuration for the grid of sections of a node.
@@ -406,6 +447,18 @@ export interface SectionConfig {
      * @default 0
      */
     priority?: number;
+    /**
+     * Whether this section can be resized horizontally.
+     * If undefined, inherits from the parent node's resizableX setting.
+     * @default undefined
+     */
+    resizableX?: boolean;
+    /**
+     * Whether this section can be resized vertically.
+     * If undefined, inherits from the parent node's resizableY setting.
+     * @default undefined
+     */
+    resizableY?: boolean;
 }
 /**
  * Configuration for a type of connection.

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

@@ -1,4 +1,4 @@
-import { Point } from '../../util/canvas-util';
+import { AnchorPoint, Point } from '../../util/canvas-util';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 import { DiagramNode } from './diagram-node';
@@ -35,7 +35,17 @@ export declare class DiagramDecorator extends DiagramElement {
     height: number;
     priority: number;
     html: string;
-    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string);
+    /**
+     * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
+     * @public
+     */
+    anchorPointX: AnchorPoint;
+    /**
+     * Vertical anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
+     * @public
+     */
+    anchorPointY: AnchorPoint;
+    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -65,6 +75,6 @@ export declare class DiagramDecoratorSet extends DiagramElementSet<DiagramDecora
      * @param id The id of the decorator. Cannot be an empty string.
      * @returns The instanced decorator.
      */
-    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string): DiagramDecorator;
+    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramDecorator;
     remove(id: string): void;
 }

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

@@ -21,6 +21,7 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     verticalAlign: VerticalAlign;
     orientation: Side;
     fit: boolean;
+    shrink: boolean;
 };
 export interface LabeledElement {
     label?: DiagramField;
@@ -87,7 +88,7 @@ export declare class DiagramField extends DiagramElement {
      * Orientation of the text of this field.
      * @public
      */
-    orientation: Side | number;
+    orientation: number;
     private _text;
     /**
      * Default text that this field's text resets to when empty.
@@ -115,7 +116,12 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     fit: 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);
+    /**
+     * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space.
+     * @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);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -138,7 +144,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): 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, 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-port.d.ts

@@ -1,4 +1,4 @@
-import { Point } from '../../util/canvas-util';
+import { AnchorPoint, Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { FieldConfig, PortTypeConfig } from '../config/diagram-config';
 import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig } from '../config/diagram-look-config';
@@ -100,6 +100,16 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      * @public
      */
     direction: Side;
+    /**
+     * Horizontal anchor point for this port. Determines how the port behaves when its root element is resized.
+     * @public
+     */
+    anchorPointX: AnchorPoint;
+    /**
+     * Vertical anchor point for this port. Determines how the port behaves when its root element is resized.
+     * @public
+     */
+    anchorPointY: AnchorPoint;
     /**
      * Whether this port can be used as a connection start point.
      */
@@ -149,7 +159,7 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      * @private
      */
     get height(): number;
-    constructor(model: DiagramModel, type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string);
+    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;
@@ -196,6 +206,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(type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string): DiagramPort;
+    new(type: DiagramPortType | undefined, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, connectionPoint: Point | undefined, direction: Side, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramPort;
     remove(id: string): void;
 }

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

@@ -61,6 +61,8 @@ export declare class DiagramSectionType {
     highlightedLook: NodeLook;
     selectedAndHighlightedLook: NodeLook;
     priority: number;
+    resizableX: boolean | undefined;
+    resizableY: boolean | undefined;
     constructor(options: SectionConfig);
 }
 /**
@@ -143,6 +145,20 @@ export declare class DiagramSection extends DiagramElement implements LabeledEle
     getMinWidth(): number;
     getMinHeight(): number;
     getPriority(): number;
+    /**
+     * Returns whether this section can be resized horizontally.
+     * If the section has a specific resizableX setting, it uses that.
+     * Otherwise, it inherits from the parent node's resizableX setting.
+     * @public
+     */
+    getResizableX(): boolean;
+    /**
+     * Returns whether this section can be resized vertically.
+     * If the section has a specific resizableY setting, it uses that.
+     * Otherwise, it inherits from the parent node's resizableY setting.
+     * @public
+     */
+    getResizableY(): boolean;
     /**
      * Get the port of this section which is closest to the given coordinates.
      * @param coords A point in the diagram.

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

@@ -299,8 +299,9 @@ export interface Canvas {
     /**
      * Fit a node to encompass the totality of its sections.
      * @param id The id of a node
+     * @param shrink Whether the node should shrink if there is excess space; `true` by default
      */
-    fitNodeInView(id: string): void;
+    fitNodeInView(id: string, shrink?: boolean): void;
     /**
      * Get the d3 Selection containing the root html div element of the canvas.
      * @private

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

@@ -53,6 +53,24 @@ export declare const translateCoordinate: (oldCoordinate: number, oldCoordinates
  * @returns A new point.
  */
 export declare const translatePoint: (oldPoint: Point, oldCoordsX: [number, number], oldCoordsY: [number, number], newCoordsX: [number, number], newCoordsY: [number, number]) => Point;
+/**
+ * Types of anchor points for ports and decorators.
+ * @public
+ */
+export type AnchorPoint = 'start' | 'middle' | 'end' | 'floating';
+/**
+ * Moves the coordinates of the given point according to the given changes in coordinates and anchor points.
+ * @public
+ * @param oldPoint A point.
+ * @param oldCoordsX A range of coordinates along the x axis.
+ * @param oldCoordsY A range of coordinates along the y axis.
+ * @param newCoordsX A range of coordinates along the x axis.
+ * @param newCoordsY A range of coordinates along the y axis.
+ * @param anchorPointX The horizontal anchor point behavior.
+ * @param anchorPointY The vertical anchor point behavior.
+ * @returns A new point.
+ */
+export declare const translatePointWithAnchors: (oldPoint: Point, oldCoordsX: [number, number], oldCoordsY: [number, number], newCoordsX: [number, number], newCoordsY: [number, number], anchorPointX: AnchorPoint, anchorPointY: AnchorPoint) => Point;
 /**
  * Calculates the result of moving the given point by the given distance in the given direction.
  * @public

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

@@ -0,0 +1,20 @@
+export declare const degreesToRadians: (theta: number) => number;
+export declare const radiansToDegrees: (theta: number) => number;
+/**
+ * Calculates the size of the bounding box of a rectangle that has been rotated by the given number of degrees.
+ *
+ * @param width The width of a rectangle.
+ * @param height The height of a rectangle.
+ * @param orientation A rotation in degrees.
+ * @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];