@metadev/daga 5.1.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {},
   "peerDependencies": {

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

@@ -26,6 +26,7 @@ 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 needsResizerXY: (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;
@@ -37,7 +38,7 @@ export declare const updateLook: (selection: d3.Selection<SVGGElement, DiagramNo
 export declare const BACKGROUND_DEFAULTS: SolidBackgroundConfig;
 export declare const GRID_DEFAULTS: EmptyGridConfig;
 export declare const DOTS_GRID_DEFAULTS: DotsGridConfig;
-export declare const initializeBackground: (canvas: DiagramCanvas, canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, backgroundConfig: BackgroundConfig | undefined | null) => d3.Selection<SVGRectElement, unknown, null, unknown> | d3.Selection<SVGImageElement, unknown, null, unknown>;
+export declare const initializeBackground: (canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, backgroundConfig: BackgroundConfig | undefined | null) => d3.Selection<SVGRectElement, unknown, null, unknown> | d3.Selection<SVGImageElement, unknown, null, unknown>;
 export declare const applyGridDefaults: (gridConfig?: GridConfig) => GridConfig;
 export declare const initializeGrid: (canvas: DiagramCanvas, canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, canvasDefs: d3.Selection<SVGDefsElement, unknown, null, unknown>, gridPatternId: string, gridConfig: GridConfig) => d3.Selection<SVGRectElement, unknown, null, unknown> | undefined;
 export declare const getGridSpacingX: (gridConfig: GridConfig) => number;

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

@@ -19,11 +19,6 @@ import { DiagramUserSelection } from './diagram-user-selection';
  * @private
  */
 export declare const CONNECTION_PATH_BOX_THICKNESS = 12;
-/**
- * Thickness of the resizer line used to resize nodes and sections on drag, in diagram units.
- * @private
- */
-export declare const RESIZER_THICKNESS = 6;
 /**
  * Maximum number of user actions that can be recorded in the user action stack.
  * @private

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

@@ -4,7 +4,7 @@ import { DiagramActions } from '../diagram-action';
 import { Property } from '../property/property';
 import { CanvasConfig } from './diagram-canvas-config';
 import { ComponentsConfig } from './diagram-components-config';
-import { ConnectionLookConfig, FieldLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
+import { ConnectionLookConfig, FieldLookConfig, ImageLookConfig, MarkerImageLookConfig, ResizerLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -171,15 +171,20 @@ export interface NodeTypeConfig {
      */
     minHeight?: number;
     /**
-     * Whether the user can resize nodes of this type along the x axis.
+     * Whether the user can resize nodes of this type horizontally.
      * @default false
      */
-    resizableX?: boolean | ResizableMode;
+    resizableX?: boolean | ResizableMode | ResizerConfig;
     /**
-     * Whether the user can resize nodes of this type along the y axis.
+     * Whether the user can resize nodes of this type vertically.
      * @default false
      */
-    resizableY?: boolean | ResizableMode;
+    resizableY?: boolean | ResizableMode | ResizerConfig;
+    /**
+     * Whether the user can resize nodes of this type diagonally.
+     * @default false
+     */
+    resizableXY?: boolean | ResizableMode | ResizerConfig;
     /**
      * 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.
@@ -187,10 +192,11 @@ export interface NodeTypeConfig {
      */
     snapToGridOffset?: [number, number, number, number];
     /**
-     * The padding between the node and its children in diagram units if children are present. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * The padding between the node and its children in diagram units if children are present.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding.
      * @default 0
      */
-    padding?: number | number[];
+    padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
      * Configuration for the label of nodes of this type.
      * @default null
@@ -347,15 +353,17 @@ export interface FieldConfig {
      */
     shrink?: boolean;
     /**
-     * The margin around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS margin.
+     * The margin around the field in diagram units.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS margin.
      * @default 0
      */
-    margin?: number | number[];
+    margin?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
-     * The padding around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * The padding around the field in diagram units.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding.
      * @default 0
      */
-    padding?: number | number[];
+    padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
      * The horizontal alignment of the text of this field.
      * @default 'center'
@@ -487,13 +495,19 @@ export interface SectionConfig {
      * If undefined, inherits from the parent node's resizableX setting.
      * @default undefined
      */
-    resizableX?: boolean | ResizableMode;
+    resizableX?: boolean | ResizableMode | ResizerConfig;
     /**
      * Whether this section can be resized vertically.
      * If undefined, inherits from the parent node's resizableY setting.
      * @default undefined
      */
-    resizableY?: boolean | ResizableMode;
+    resizableY?: boolean | ResizableMode | ResizerConfig;
+    /**
+     * Whether this section can be resized diagonally.
+     * If undefined, inherits from the parent node's resizableXY setting.
+     * @default undefined
+     */
+    resizableXY?: boolean | ResizableMode | ResizerConfig;
 }
 /**
  * Configuration for a type of connection.
@@ -544,6 +558,51 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
+/**
+ * Configuration for the resizers of a node or section.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
+export interface ResizerConfig {
+    /**
+     * Mode of the resizer.
+     * @default ResizableMode.Never
+     */
+    mode?: ResizableMode;
+    /**
+     * Thickness of the resizer.
+     * @default 10
+     */
+    thickness?: number;
+    /**
+     * The margin around the resizer in diagram units. Used to shift the resizer relative to its default position.
+     * @default 0
+     */
+    outerMargin?: number;
+    /**
+     * Configuration of the look of the resizer.
+     * @default { fillColor: 'transparent' }
+     */
+    look?: ResizerLookConfig;
+}
+/**
+ * The different modes for when a node or section can be resized.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
 export declare enum ResizableMode {
-    OnlyWhenSelected = 0
+    /**
+     * Resizable mode for always being resizable.
+     */
+    Always = 0,
+    /**
+     * Resizable mode for only being resizable while selected.
+     */
+    OnlyWhenSelected = 1,
+    /**
+     * Resizable mode for never being resizable.
+     */
+    Never = 2
 }

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

@@ -65,11 +65,18 @@ export interface ConnectionLookConfig extends ConnectionLook, LookConfig<Connect
  */
 export interface FieldLookConfig extends FieldLook, LookConfig<FieldLook> {
 }
+/**
+ * Configuration for a look for a resizer.
+ * @public
+ * @see ResizerLook
+ */
+export interface ResizerLookConfig extends ResizerLook, LookConfig<ResizerLook> {
+}
 export interface Look {
     /**
-     * String used to discern the type of look this is.
+     * String used to discern the type of look this is in cases where different types of looks can be used.
      */
-    lookType: string;
+    lookType?: string;
 }
 /**
  * Configuration for a look given by a shape.
@@ -178,7 +185,6 @@ export interface StretchableImageLook extends Look {
  * @public
  */
 export interface MarkerImageLook extends Look {
-    lookType: 'marker-image-look';
     /**
      * File path to the image used for the marker.
      */
@@ -213,7 +219,6 @@ export interface MarkerImageLook extends Look {
  * @public
  */
 export interface ConnectionLook extends Look {
-    lookType: 'connection-look';
     /**
      * Color of the line of connections of this type.
      * @default '#000000'
@@ -240,7 +245,6 @@ export interface ConnectionLook extends Look {
  * @public
  */
 export interface FieldLook extends Look {
-    lookType: 'field-look';
     /**
      * Background color of this look.
      * @default '#FFFFFF'
@@ -259,12 +263,33 @@ export interface FieldLook extends Look {
     fontFamily?: string | null;
     /**
      * Font size of this field.
-     * @default 0
+     * @default 10
      */
     fontSize?: number;
     /**
      * Font weight of this field.
-     * @default 0
+     * @default 400
      */
     fontWeight?: number;
 }
+/**
+ * Configuration for a look for a resizer.
+ * @public
+ */
+export interface ResizerLook extends Look {
+    /**
+     * Color of this resizer.
+     * @default 'transparent'
+     */
+    fillColor?: string;
+    /**
+     * Border color of this resizer.
+     * @default 'transparent'
+     */
+    borderColor?: string;
+    /**
+     * Border thickness of this resizer in diagram units.
+     * @default 0
+     */
+    borderThickness?: number;
+}

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

@@ -3,12 +3,12 @@ import { LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
 import { ConnectionTypeConfig, FieldConfig } from '../config/diagram-config';
 import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look-config';
+import { PropertySet } from '../property/property';
+import { ValueSet } from '../property/value';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
-import { PropertySet } from '../property/property';
-import { ValueSet } from '../property/value';
 /**
  * Default values of the parameters of a diagram connection.
  * @private
@@ -18,7 +18,6 @@ export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
     name: string;
     label: null;
     look: {
-        lookType: string;
         color: string;
         thickness: number;
         shape: LineShape;

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

@@ -21,7 +21,6 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     fit: boolean;
     shrink: boolean;
     look: {
-        lookType: "field-look";
         fillColor: string;
         fontColor: string;
         fontFamily: string;

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, ResizableMode } from '../config/diagram-config';
+import { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig } 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';
@@ -12,6 +12,7 @@ import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramField, LabeledElement } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
+import { DiagramResizer } from './diagram-resizer';
 import { DiagramSection, DiagramSectionGeometry, DiagramSectionGrid } from './diagram-section';
 /**
  * Default values of the look of a diagram node.
@@ -75,8 +76,9 @@ export declare class DiagramNodeType implements DiagramEntity {
     defaultHeight: number;
     minWidth: number;
     minHeight: number;
-    resizableX: boolean | ResizableMode;
-    resizableY: boolean | ResizableMode;
+    resizerX: DiagramResizer;
+    resizerY: DiagramResizer;
+    resizerXY: DiagramResizer;
     snapToGridOffset: [number, number, number, number];
     bottomPadding: number;
     leftPadding: number;
@@ -182,7 +184,7 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
     private _highlightedLook?;
     private _selectedAndHighlightedLook?;
     /**
-     * Current look of this port.
+     * Current look of this node.
      * @private
      */
     get look(): NodeLook;
@@ -207,6 +209,21 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
     updateInView(): void;
     raise(): void;
     getPriority(): number;
+    /**
+     * Returns the horizontal resizer of this node.
+     * @public
+     */
+    getResizerX(): DiagramResizer;
+    /**
+     * Returns the vertical resizer of this node.
+     * @public
+     */
+    getResizerY(): DiagramResizer;
+    /**
+     * Returns the diagonal resizer of this node.
+     * @public
+     */
+    getResizerXY(): DiagramResizer;
     /**
      * Returns whether this node can be resized horizontally.
      * @public
@@ -217,6 +234,11 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      * @public
      */
     getResizableY(): boolean;
+    /**
+     * Returns whether this node can be resized diagonally.
+     * @public
+     */
+    getResizableXY(): 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-resizer.d.ts

@@ -0,0 +1,32 @@
+import { ResizableMode, ResizerConfig } from '../config/diagram-config';
+import { ResizerLook } from '../config/diagram-look-config';
+import { DiagramNode } from './diagram-node';
+import { DiagramSection } from './diagram-section';
+/**
+ * Default values of the parameters of a diagram field.
+ * @private
+ * @see ResizerConfig
+ */
+export declare const DIAGRAM_RESIZER_DEFAULTS: ResizerConfig;
+/**
+ * Holds the data for the resizers of a type of node or section.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
+export declare class DiagramResizer {
+    mode: ResizableMode;
+    thickness: number;
+    outerMargin: number;
+    defaultLook: ResizerLook;
+    selectedLook: ResizerLook;
+    highlightedLook: ResizerLook;
+    selectedAndHighlightedLook: ResizerLook;
+    constructor(options: boolean | ResizableMode | ResizerConfig);
+    /**
+     * Current look of this resizer.
+     * @private
+     */
+    getLook(rootElement?: DiagramNode | DiagramSection): ResizerLook;
+}
+export declare const DIAGRAM_DEFAULT_RESIZER: DiagramResizer;

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, ResizableMode, SectionConfig, SectionGridConfig } from '../config/diagram-config';
+import { FieldConfig, PortConfig, 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';
@@ -9,6 +9,7 @@ import { DiagramField, LabeledElement } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramNode, NodeLook } from './diagram-node';
 import { DiagramPort } from './diagram-port';
+import { DiagramResizer } from './diagram-resizer';
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -61,8 +62,9 @@ export declare class DiagramSectionType {
     highlightedLook: NodeLook;
     selectedAndHighlightedLook: NodeLook;
     priority: number;
-    resizableX: boolean | ResizableMode | undefined;
-    resizableY: boolean | ResizableMode | undefined;
+    resizerX: DiagramResizer | undefined;
+    resizerY: DiagramResizer | undefined;
+    resizerXY: DiagramResizer | undefined;
     constructor(options: SectionConfig);
 }
 /**
@@ -156,6 +158,21 @@ export declare class DiagramSection extends DiagramElement implements LabeledEle
     getMinWidth(): number;
     getMinHeight(): number;
     getPriority(): number;
+    /**
+     * Returns the horizontal resizer of this section.
+     * @public
+     */
+    getResizerX(): DiagramResizer;
+    /**
+     * Returns the vertical resizer of this section.
+     * @public
+     */
+    getResizerY(): DiagramResizer;
+    /**
+     * Returns the diagonal resizer of this section.
+     * @public
+     */
+    getResizerXY(): DiagramResizer;
     /**
      * Returns whether this section can be resized horizontally.
      * If the section has a specific resizableX setting, it uses that.
@@ -170,6 +187,13 @@ export declare class DiagramSection extends DiagramElement implements LabeledEle
      * @public
      */
     getResizableY(): boolean;
+    /**
+     * Returns whether this section can be resized diagonally.
+     * If the section has a specific resizableXY setting, it uses that.
+     * Otherwise, it inherits from the parent node's resizableXY setting.
+     * @public
+     */
+    getResizableXY(): boolean;
     /**
      * Get the port of this section which is closest to the given coordinates.
      * @param coords A point in the diagram.

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

@@ -7,7 +7,9 @@ export declare enum CursorStyle {
     Grabbing = "grabbing",
     Move = "move",
     NoDrop = "no-drop",
+    NESWResize = "nesw-resize",
     NSResize = "ns-resize",
+    NWSEResize = "nwse-resize",
     NotAllowed = "not-allowed",
     ZoomIn = "zoom-in",
     ZoomOut = "zoom-out"