@metadev/daga 5.0.5 → 5.1.1

package/src/lib/diagram/converters/daga-model.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 { CollabTimestamp, CollabTimestampSet } from '../collab/primitives';
 export declare const DAGA_FILE_VERSION = 1;
@@ -18,9 +18,9 @@ export interface DagaModel {
     typeVersion: number;
     createdAt: Date;
     updatedAt: Date;
-    updatedDaysAgo?: string;
     nodes: DagaNode[];
     connections: DagaConnection[];
+    objects?: DagaObject[];
     data: {
         [key: string]: unknown;
     };
@@ -35,6 +35,7 @@ export interface DagaNode {
     children?: DagaNode[];
     sections?: DagaSection[];
     ports?: DagaPort[];
+    decorators?: DagaDecorator[];
     label: string;
     coords: Point;
     width: number;
@@ -59,6 +60,7 @@ export interface DagaNode {
 export interface DagaSection {
     id: string;
     ports?: DagaPort[];
+    decorators?: DagaDecorator[];
     label: string;
     indexXInNode: number;
     indexYInNode: number;
@@ -115,3 +117,28 @@ export interface DagaConnection {
         dataTimestamps: CollabTimestampSet;
     };
 }
+export interface DagaObject {
+    id: string;
+    coords: Point;
+    width: number;
+    height: number;
+    priority: number;
+    svg: string;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+    };
+}
+export interface DagaDecorator {
+    id: string;
+    coords: Point;
+    width: number;
+    height: number;
+    priority: number;
+    anchorPoints: [AnchorPoint, AnchorPoint];
+    svg: string;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+    };
+}

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

@@ -33,7 +33,8 @@ export declare class DiagramZoomEvent extends DiagramEvent {
     /**
      * Create a diagram zoom event.
      *
-     * @param coords .
+     * @param coords Coordinates to which the user panned. Calling the method `canvas.translateTo()` with these coordinates after this event should cause no changes.
+     * @param zoom Zoom level to which the user zoomed. Calling the method `canvas.zoomTo()` with this zoom level after this event should cause no changes.
      */
     constructor(coords: Point, zoom: 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-decorator.d.ts

@@ -4,7 +4,7 @@ import { DiagramModel } from './diagram-model';
 import { DiagramNode } from './diagram-node';
 import { DiagramSection } from './diagram-section';
 /**
- * A foreign object which is inserted with arbitrary html into a diagram.
+ * A foreign object which is inserted with arbitrary SVG code into a diagram.
  * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
  * Diagram decorators are not serialized with other diagram elements.
  * @public
@@ -34,7 +34,7 @@ export declare class DiagramDecorator extends DiagramElement {
      */
     height: number;
     priority: number;
-    html: string;
+    svg: string;
     /**
      * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
      * @public
@@ -45,7 +45,7 @@ export declare class DiagramDecorator extends DiagramElement {
      * @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);
+    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, svg: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -71,10 +71,10 @@ export declare class DiagramDecoratorSet extends DiagramElementSet<DiagramDecora
      * @param width The dimension of the decorator along the x axis.
      * @param height The dimension of the decorator along the y axis.
      * @param priority The priority of the decorator. Used when filtering by priority.
-     * @param html The html contents of the decorator.
+     * @param svg The SVG contents of the decorator.
      * @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, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramDecorator;
+    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, svg: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramDecorator;
     remove(id: string): void;
 }

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

@@ -2,6 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
 import { FieldConfig } from '../config/diagram-config';
+import { FieldLook, FieldLookConfig } from '../config/diagram-look-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 /**
@@ -11,19 +12,21 @@ import { DiagramModel } from './diagram-model';
  */
 export declare const DIAGRAM_FIELD_DEFAULTS: {
     editable: boolean;
-    fontSize: number;
     margin: number;
     padding: number;
-    fontFamily: string;
-    color: string;
-    selectedColor: string;
-    backgroundColor: string;
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
     orientation: Side;
     multiline: boolean;
     fit: boolean;
     shrink: boolean;
+    look: {
+        fillColor: string;
+        fontColor: string;
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+    };
 };
 export interface LabeledElement {
     label?: DiagramField;
@@ -56,26 +59,6 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     height: number;
-    /**
-     * Font size of this field.
-     * @public
-     */
-    fontSize: number;
-    /**
-     * Font family of this field. `null` for the default one.
-     * @public
-     */
-    fontFamily: string | null;
-    /**
-     * Font color of this field.
-     * @public
-     */
-    color: string;
-    /**
-     * Font color of this field when selected.
-     * @public
-     */
-    selectedColor: string;
     /**
      * Horizontal alignment of the text of this field.
      * @public
@@ -128,7 +111,16 @@ 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, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean);
+    private defaultLook;
+    private selectedLook;
+    private highlightedLook;
+    private selectedAndHighlightedLook;
+    /**
+     * Current look of this field.
+     * @private
+     */
+    get look(): FieldLook;
+    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, look: FieldLookConfig, text: string, editable: boolean, fit: boolean, shrink: boolean);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -151,7 +143,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, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
+    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, look: FieldLookConfig, 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, 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-object.d.ts

@@ -2,7 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 /**
- * A foreign object which is inserted with arbitrary html into a diagram.
+ * A foreign object which is inserted with arbitrary SVG code into a diagram.
  * Diagram objects are not serialized with other diagram elements.
  * @public
  */
@@ -23,8 +23,8 @@ export declare class DiagramObject extends DiagramElement {
      */
     height: number;
     priority: number;
-    html: string;
-    constructor(model: DiagramModel, coords: Point, width: number, height: number, priority: number, html: string, id: string);
+    svg: string;
+    constructor(model: DiagramModel, coords: Point, width: number, height: number, priority: number, svg: string, id: string);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -50,10 +50,10 @@ export declare class DiagramObjectSet extends DiagramElementSet<DiagramObject> {
      * @param width The dimension of the object along the x axis.
      * @param height The dimension of the object along the y axis.
      * @param priority The priority of the object. Used when filtering by priority.
-     * @param html The html contents of the object.
+     * @param svg The SVG contents of the object.
      * @param id The id of the object. Cannot be an empty string.
      * @returns The instanced object.
      */
-    new(coords: Point, width: number, height: number, priority: number, html: string, id: string): DiagramObject;
+    new(coords: Point, width: number, height: number, priority: number, svg: string, id: string): DiagramObject;
     remove(id: string): void;
 }

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/interfaces/canvas.d.ts

@@ -3,15 +3,15 @@ import { DiagramContextMenu } from '../diagram/canvas/diagram-context-menu';
 import { DiagramUserHighlight } from '../diagram/canvas/diagram-user-highlight';
 import { DiagramUserSelection } from '../diagram/canvas/diagram-user-selection';
 import { CollabEngine } from '../diagram/collab/collab-engine';
-import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram/diagram-action';
+import { BackgroundConfig, GridConfig } from '../diagram/config/diagram-canvas-config';
 import { UserActionConfig } from '../diagram/config/diagram-config';
+import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram/diagram-action';
 import { DiagramEvent } from '../diagram/diagram-event';
 import { DiagramConnectionType } from '../diagram/model/diagram-connection';
 import { DiagramModel } from '../diagram/model/diagram-model';
 import { DiagramValidator } from '../errors/diagram-validator';
 import { Point } from '../util/canvas-util';
 import { DiagramEditor } from './diagram-editor';
-import { GridStyle } from '../diagram/config/diagram-canvas-config';
 /**
  * Represents a specific replica or view of the model.
  * Provides the functionality for the visual representation of the elements of a model.
@@ -54,35 +54,15 @@ export interface Canvas {
      */
     readonly collabEngine: CollabEngine;
     /**
-     * Background color of the diagram.
-     * @public
-     */
-    backgroundColor: string;
-    /**
-     * Style of the grid elements of the diagram.
-     * @public
-     */
-    gridStyle: GridStyle;
-    /**
-     * Distance between the grid points of the diagram in diagram units.
-     * @public
-     */
-    gridSize: number;
-    /**
-     * Size of the grid points of the diagram relative to the distance between grid points in diagram units.
-     * @public
-     */
-    gridThickness: number;
-    /**
-     * Color of the grid elements of the diagram.
+     * Background config of the diagram.
      * @public
      */
-    gridColor: string;
+    backgroundConfig: BackgroundConfig;
     /**
-     * If true, elements moved by the user should be placed on the closest grid point rather than the exact point where they were placed.
+     * Grid config of the diagram.
      * @public
      */
-    snapToGrid: boolean;
+    gridConfig: GridConfig;
     /**
      * The factor by which the zoom level increases or decreases when the user users buttons or keys to zoom in or out. Should be above 1.
      * @public

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"