@metadev/daga 1.5.0 → 1.5.2

package/lib/diagram-editor/diagram/collab/collab-action.d.ts

@@ -1,8 +1,9 @@
 import { Canvas } from '../../../interfaces/canvas';
 import { Point } from '../../../util/canvas-util';
-import { CollabTimestamp } from './primitives';
+import { DagaConnection, DagaNode } from '../converters/daga-model';
 import { DiagramNodeGeometry } from '../diagram-node';
 import { ValueSet } from '../diagram-property';
+import { CollabTimestamp } from './primitives';
 /**
  * An action taken by a local or remote user.
  *
@@ -31,7 +32,7 @@ export interface CollabAction {
 /**
  * @private
  */
-export type CollabActionSerialized = AddNodeSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized;
+export type CollabActionSerialized = AddNodeSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
 /**
  * @private
  */
@@ -210,3 +211,26 @@ export declare class SetSelfRemovedCollabAction implements CollabAction {
     serialize(): CollabActionSerialized;
     static deserialize(canvas: Canvas, serialized: SetSelfRemovedSerialized): SetSelfRemovedCollabAction;
 }
+/**
+ * @private
+ */
+export type PasteSerialized = {
+    type: 'paste';
+    readonly nodes: DagaNode[];
+    readonly connections: DagaConnection[];
+};
+/**
+ * Collaborative action which consists of pasting elements from an external source into a diagram.
+ *
+ * @see PasteAction
+ * @private
+ */
+export declare class PasteCollabAction implements CollabAction {
+    readonly canvas: Canvas;
+    readonly nodes: DagaNode[];
+    readonly connections: DagaConnection[];
+    constructor(canvas: Canvas, nodes: DagaNode[], connections: DagaConnection[]);
+    do(): void;
+    serialize(): CollabActionSerialized;
+    static deserialize(canvas: Canvas, serialized: PasteSerialized): PasteCollabAction;
+}

package/lib/diagram-editor/diagram/converters/daga-exporter.d.ts

@@ -1,5 +1,8 @@
+import { DiagramConnection } from '../diagram-connection';
+import { DiagramField } from '../diagram-field';
 import { DiagramModel } from '../diagram-model';
-import { DagaModel } from './daga-model';
+import { DiagramNode } from '../diagram-node';
+import { DagaConnection, DagaModel, DagaNode } from './daga-model';
 import { DiagramModelExporter } from './diagram-model-exporter';
 /**
  * Importer which exports a diagram to its daga model representation.
@@ -7,4 +10,18 @@ import { DiagramModelExporter } from './diagram-model-exporter';
  */
 export declare class DagaExporter implements DiagramModelExporter<DagaModel> {
     export(model: DiagramModel, includeCollabMeta?: boolean): DagaModel;
+    exportNode(node: DiagramNode, includeCollabMeta?: boolean): DagaNode;
+    exportConnection(connection: DiagramConnection, includeCollabMeta?: boolean): DagaConnection;
+    exportLabelCollabMeta({ label }: {
+        label?: DiagramField;
+    }): {
+        label: {
+            removed: boolean;
+            selfRemoved: boolean;
+            selfRemovedTimestamp: import("@metadev/daga").CollabTimestamp | null;
+            textTimestamp: import("@metadev/daga").CollabTimestamp | null;
+        };
+    } | {
+        label?: undefined;
+    };
 }

package/lib/diagram-editor/diagram/converters/daga-importer.d.ts

@@ -1,5 +1,7 @@
+import { CollabTimestamp } from '../collab/primitives';
+import { DiagramField } from '../diagram-field';
 import { DiagramModel } from '../diagram-model';
-import { DagaModel } from './daga-model';
+import { DagaConnection, DagaModel, DagaNode } from './daga-model';
 import { DiagramModelImporter } from './diagram-model-importer';
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -7,4 +9,11 @@ import { DiagramModelImporter } from './diagram-model-importer';
  */
 export declare class DagaImporter implements DiagramModelImporter<DagaModel> {
     import(model: DiagramModel, data: DagaModel): DiagramModel;
+    importNode(model: DiagramModel, node: DagaNode): DiagramModel;
+    importConnection(model: DiagramModel, connection: DagaConnection): DiagramModel;
+    importLabelCollabMeta(newLabel?: DiagramField, labelCollabMeta?: {
+        selfRemoved: boolean;
+        selfRemovedTimestamp: CollabTimestamp | null;
+        textTimestamp: CollabTimestamp | null;
+    }): void;
 }

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

@@ -19,108 +19,96 @@ export interface DagaModel {
     createdAt: Date;
     updatedAt: Date;
     updatedDaysAgo?: string;
-    nodes: {
-        id: string;
-        type: string;
-        sections?: {
-            id: string;
-            ports?: {
-                id: string;
-                coords: Point;
-                direction: Side;
-                label: string;
-                collabMeta?: {
-                    removed: boolean;
-                    selfRemoved: boolean;
-                    selfRemovedTimestamp: CollabTimestamp | null;
-                    label?: {
-                        removed: boolean;
-                        selfRemoved: boolean;
-                        selfRemovedTimestamp: CollabTimestamp | null;
-                        textTimestamp: CollabTimestamp | null;
-                    };
-                };
-            }[];
-            label: string;
-            indexXInNode: number;
-            indexYInNode: number;
-            coords: Point;
-            width: number;
-            height: number;
-            collabMeta?: {
-                removed: boolean;
-                selfRemoved: boolean;
-                selfRemovedTimestamp: CollabTimestamp | null;
-                label?: {
-                    removed: boolean;
-                    selfRemoved: boolean;
-                    selfRemovedTimestamp: CollabTimestamp | null;
-                    textTimestamp: CollabTimestamp | null;
-                };
-            };
-        }[];
-        ports?: {
-            id: string;
-            coords: Point;
-            direction: Side;
-            label: string;
-            collabMeta?: {
-                removed: boolean;
-                selfRemoved: boolean;
-                selfRemovedTimestamp: CollabTimestamp | null;
-                label?: {
-                    removed: boolean;
-                    selfRemoved: boolean;
-                    selfRemovedTimestamp: CollabTimestamp | null;
-                    textTimestamp: CollabTimestamp | null;
-                };
-            };
-        }[];
-        label: string;
-        coords: Point;
-        width: number;
-        height: number;
-        data: {
-            [key: string]: unknown;
-        };
-        collabMeta?: {
+    nodes: DagaNode[];
+    connections: DagaConnection[];
+    data: {
+        [key: string]: unknown;
+    };
+    collabMeta?: {
+        logicalClock: number;
+        dataTimestamps: CollabTimestampSet;
+    };
+}
+export interface DagaNode {
+    id: string;
+    type: string;
+    sections?: DagaSection[];
+    ports?: DagaPort[];
+    label: string;
+    coords: Point;
+    width: number;
+    height: number;
+    data: {
+        [key: string]: unknown;
+    };
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+        selfRemovedTimestamp: CollabTimestamp | null;
+        geometryTimestamp: CollabTimestamp | null;
+        dataTimestamps: CollabTimestampSet;
+        label?: {
             removed: boolean;
             selfRemoved: boolean;
             selfRemovedTimestamp: CollabTimestamp | null;
-            geometryTimestamp: CollabTimestamp | null;
-            dataTimestamps: CollabTimestampSet;
-            label?: {
-                removed: boolean;
-                selfRemoved: boolean;
-                selfRemovedTimestamp: CollabTimestamp | null;
-                textTimestamp: CollabTimestamp | null;
-            };
+            textTimestamp: CollabTimestamp | null;
         };
-    }[];
-    connections: {
-        id: string;
-        type: string;
-        start: string;
-        end: string;
-        startLabel: string;
-        middleLabel: string;
-        endLabel: string;
-        points: Point[];
-        data: {
-            [key: string]: unknown;
+    };
+}
+export interface DagaSection {
+    id: string;
+    ports?: DagaPort[];
+    label: string;
+    indexXInNode: number;
+    indexYInNode: number;
+    coords: Point;
+    width: number;
+    height: number;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+        selfRemovedTimestamp: CollabTimestamp | null;
+        label?: {
+            removed: boolean;
+            selfRemoved: boolean;
+            selfRemovedTimestamp: CollabTimestamp | null;
+            textTimestamp: CollabTimestamp | null;
         };
-        collabMeta?: {
+    };
+}
+export interface DagaPort {
+    id: string;
+    coords: Point;
+    direction: Side;
+    label: string;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+        selfRemovedTimestamp: CollabTimestamp | null;
+        label?: {
             removed: boolean;
             selfRemoved: boolean;
             selfRemovedTimestamp: CollabTimestamp | null;
-            dataTimestamps: CollabTimestampSet;
+            textTimestamp: CollabTimestamp | null;
         };
-    }[];
+    };
+}
+export interface DagaConnection {
+    id: string;
+    type: string;
+    start: string;
+    end: string;
+    startLabel: string;
+    middleLabel: string;
+    endLabel: string;
+    points: Point[];
     data: {
         [key: string]: unknown;
     };
     collabMeta?: {
-        logicalClock: number;
+        removed: boolean;
+        selfRemoved: boolean;
+        selfRemovedTimestamp: CollabTimestamp | null;
         dataTimestamps: CollabTimestampSet;
     };
 }

package/lib/diagram-editor/diagram/diagram-action.d.ts

@@ -1,7 +1,8 @@
 import { Canvas } from '../../interfaces/canvas';
 import { Point } from '../../util/canvas-util';
+import { DagaConnection, DagaNode } from './converters/daga-model';
 import { DiagramConnectionType } from './diagram-connection';
-import { DiagramNodeType, DiagramNodeGeometry } from './diagram-node';
+import { DiagramNodeGeometry, DiagramNodeType } from './diagram-node';
 /**
  * A queue of recent actions taken by the user that can be undone and redone.
  * @private
@@ -85,6 +86,16 @@ export declare enum DiagramActions {
      * @public
      */
     AddNode = "add-node",
+    /**
+     * Action that corresponds to copying diagram elements to the clipboard.
+     * @public
+     */
+    Clipboard = "clipboard",
+    /**
+     * Action that corresponds to opening the context menu.
+     * @public
+     */
+    ContextMenu = "context-menu",
     /**
      * Action that corresponds to the edition of a field's text content.
      * @see EditFieldAction
@@ -97,6 +108,12 @@ export declare enum DiagramActions {
      * @public
      */
     MoveNode = "move-node",
+    /**
+     * Action that corresponds to pasting diagram elements from the clipboard.
+     * @see PasteAction
+     * @public
+     */
+    Paste = "paste",
     /**
      * Action that corresponds to removing elements.
      * @see RemoveAction
@@ -241,3 +258,18 @@ export declare class RemoveAction implements DiagramAction {
     undo(): void;
     redo(): void;
 }
+/**
+ * Action which consists of pasting elements from an external source into a diagram.
+ *
+ * @private
+ */
+export declare class PasteAction implements DiagramAction {
+    canvas: Canvas;
+    nodes: DagaNode[];
+    connections: DagaConnection[];
+    coords?: Point;
+    constructor(canvas: Canvas, nodes: DagaNode[], connections: DagaConnection[], coords?: Point);
+    do(): void;
+    undo(): void;
+    redo(): void;
+}

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

@@ -5,6 +5,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
 import { CursorStyle } from '../../util/style';
+import { CollabEngine } from './collab/collab-engine';
 import { ActionQueue, DiagramActions } from './diagram-action';
 import { DiagramConfig } from './diagram-config';
 import { DiagramConnection, DiagramConnectionType } from './diagram-connection';
@@ -12,7 +13,6 @@ import { DiagramElement } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
 import { ValueSet } from './diagram-property';
-import { CollabEngine } from './collab/collab-engine';
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
  * @private
@@ -59,6 +59,9 @@ export declare class DiagramCanvas implements Canvas {
     private priorityThresholds;
     private mainUserHighlight?;
     private userHighlight;
+    /**
+     * Elements selected by the user. Only nodes and connections should be selected.
+     */
     private userSelection;
     private propertyEditorSelection?;
     private propertyEditorValues?;
@@ -68,12 +71,14 @@ export declare class DiagramCanvas implements Canvas {
      */
     private unfinishedConnectionTracer?;
     private inputFieldContainer?;
+    private contextMenuContainer?;
     private draggingFrom;
     private currentAction?;
     viewInitialized$: Subject<void>;
     validatorChanges$: Subject<void>;
     diagramChanges$: Subject<void>;
     diagramImportantChanges$: Subject<void>;
+    propertyEditorChanges$: Subject<void>;
     constructor(parentComponent: DiagramEditor, config: DiagramConfig);
     addValidator(validator: DiagramValidator): void;
     removeValidator(validator: DiagramValidator): void;
@@ -87,8 +92,10 @@ export declare class DiagramCanvas implements Canvas {
     translateTo(x: number, y: number): void;
     center(): void;
     getClosestGridPoint(point: Point): Point;
+    getCoordinatesOnScreen(): [Point, Point];
     private getEventHoldingCoordinates;
     getPointerLocationRelativeToCanvas(event: MouseEvent): Point;
+    getPointerLocationRelativeToRoot(event: MouseEvent): Point;
     getPointerLocationRelativeToBody(event: MouseEvent): Point;
     getPointerLocationRelativeToScreen(event: MouseEvent): Point;
     updateModelInView(): void;
@@ -97,11 +104,12 @@ export declare class DiagramCanvas implements Canvas {
     updatePortsInView(...ids: string[]): void;
     updateConnectionsInView(...ids: string[]): void;
     updateFieldsInView(...ids: string[]): void;
+    updateObjectsInView(...ids: string[]): void;
     updateConnectionLabelsInView(connection: DiagramConnection): void;
     updateConnectionMarkersInView(connection: DiagramConnection): void;
     fitFieldRootInView(id: string): void;
     fitNodeInView(id: string): void;
-    selectRoot(): d3.Selection<d3.BaseType, unknown, null, unknown>;
+    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
     selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasElements(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasNodes(): d3.Selection<SVGGElement, unknown, null, unknown>;
@@ -109,6 +117,7 @@ export declare class DiagramCanvas implements Canvas {
     selectCanvasPorts(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasConnections(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasFields(): d3.Selection<SVGGElement, unknown, null, unknown>;
+    selectCanvasObjects(): d3.Selection<SVGGElement, unknown, null, unknown>;
     startConnection(port: DiagramPort): void;
     finishConnection(port: DiagramPort): void;
     dropConnection(): void;
@@ -117,11 +126,17 @@ export declare class DiagramCanvas implements Canvas {
     setPropertyEditorSelection(selection?: {
         valueSet: ValueSet;
     } & (DiagramElement | DiagramModel)): void;
+    private makeUpdateValuesAction;
     isInUserSelection(selection: DiagramElement): boolean;
     addToUserSelection(selection: DiagramElement): void;
     removeFromUserSelection(selection: DiagramElement): void;
     toggleUserSelection(selection: DiagramElement): void;
     clearUserSelection(): void;
+    deleteUserSelection(): void;
+    copyUserSelectionToClipboard(): void;
+    pasteUserSelectionFromClipboard(coords?: Point): void;
+    openContextMenu(event: MouseEvent): void;
+    closeContextMenu(): void;
     cancelAllUserActions(): void;
     canUserPerformAction(action: DiagramActions): boolean;
     private createInputField;

package/lib/diagram-editor/diagram/diagram-model.d.ts

@@ -2,6 +2,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { DiagramConnectionSet } from './diagram-connection';
 import { DiagramFieldSet } from './diagram-field';
 import { DiagramNodeSet } from './diagram-node';
+import { DiagramObjectSet } from './diagram-object';
 import { DiagramPortSet } from './diagram-port';
 import { Property, ValueSet } from './diagram-property';
 import { DiagramSectionSet } from './diagram-section';
@@ -46,6 +47,12 @@ export declare class DiagramModel {
      * @public
      */
     fields: DiagramFieldSet;
+    /**
+     * Objects of this model.
+     * @see DiagramObject
+     * @public
+     */
+    objects: DiagramObjectSet;
     /**
      * Identifier of this diagram. Set by the consumer of the diagram.
      * @public

package/lib/diagram-editor/diagram/diagram-object.d.ts

@@ -0,0 +1,52 @@
+import { Point } from '../../util/canvas-util';
+import { DiagramElement, DiagramEntitySet } from './diagram-element';
+import { DiagramModel } from './diagram-model';
+/**
+ * A foreign object which is inserted with arbitrary html into a diagram.
+ * Diagram objects are not serialized with other diagram elements.
+ * @public
+ */
+export declare class DiagramObject extends DiagramElement {
+    /**
+     * Coordinates of this object.
+     * @public
+     */
+    coords: Point;
+    /**
+     * Dimension of this object along the x axis.
+     * @public
+     */
+    width: number;
+    /**
+     * Dimension of this object along the y axis.
+     * @public
+     */
+    height: number;
+    priority: number;
+    html: string;
+    constructor(model: DiagramModel, coords: Point, width: number, height: number, priority: number, html: string, id: string);
+    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
+    get removed(): boolean;
+    updateInView(): void;
+    /**
+     * Change the coordinates of this object to the given coordinates.
+     * @public
+     * @param coords A point in the diagram.
+     */
+    move(coords: Point): void;
+    getPriority(): number;
+}
+export declare class DiagramObjectSet extends DiagramEntitySet<DiagramObject> {
+    private model;
+    /**
+     * Instance a set of objects for the given model. This method is used internally.
+     * @private
+     */
+    constructor(model: DiagramModel);
+    /**
+     * Instance a new object and add it to this set.
+     * @private
+     */
+    new(coords: Point, width: number, height: number, priority: number, html: string, id: string): DiagramObject;
+    remove(id: string): void;
+}

package/lib/diagram-editor/diagram/diagram-property.d.ts

@@ -140,6 +140,7 @@ export declare class PropertySet {
     propertyList: Property[];
     constructor(properties?: Property[]);
     getProperty(key: string): Property;
+    hasProperty(key: string): boolean;
     hasProperties(): boolean;
 }
 /**
@@ -327,12 +328,9 @@ export declare const diff: (a: {
     [key: string]: unknown;
 }, b: {
     [key: string]: unknown;
-}) => [
-    {
-        [key: string]: unknown;
-    },
-    {
-        [key: string]: unknown;
-    }
-];
+}) => [{
+    [key: string]: unknown;
+}, {
+    [key: string]: unknown;
+}];
 export declare const isObject: (x: unknown) => boolean;

package/lib/interfaces/canvas.d.ts

@@ -98,6 +98,11 @@ export interface Canvas {
      * @public
      */
     diagramImportantChanges$: Subject<void>;
+    /**
+     * Subject for tracking changes in the property editor.
+     * @public
+     */
+    propertyEditorChanges$: Subject<void>;
     /**
      * Initializes the view of the diagram.
      * @private
@@ -140,12 +145,23 @@ export interface Canvas {
      * @param point A point.
      */
     getClosestGridPoint(point: Point): Point;
+    /**
+     * Get the coordinates in the diagram of the points of the screen at the top left and the bottom right of the diagram view.
+     * @public
+     */
+    getCoordinatesOnScreen(): [Point, Point];
     /**
      * Get the location of the pointer in the given event relative to the canvas.
      * @private
      * @param event A MouseEvent.
      */
     getPointerLocationRelativeToCanvas(event: MouseEvent): Point;
+    /**
+     * Get the location of the pointer in the given event relative to the svg element.
+     * @private
+     * @param event A MouseEvent.
+     */
+    getPointerLocationRelativeToRoot(event: MouseEvent): Point;
     /**
      * Get the location of the pointer in the given event relative to the body.
      * @private
@@ -214,6 +230,11 @@ export interface Canvas {
      * @public
      */
     updateFieldsInView(...ids: string[]): void;
+    /**
+     * Update the view of the canvas to show the current state of the objects.
+     * @public
+     */
+    updateObjectsInView(...ids: string[]): void;
     /**
      * Fit the root of a diagram field to encompass the totality of the field.
      * @param id The id of a diagram field
@@ -224,6 +245,11 @@ export interface Canvas {
      * @param id The id of a node
      */
     fitNodeInView(id: string): void;
+    /**
+     * Get the d3 Selection containing the svg root node of the canvas.
+     * @private
+     */
+    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
     /**
      * Get the d3 Selection containing the view of all the elements in the canvas.
      * @private
@@ -271,6 +297,31 @@ export interface Canvas {
      * @private
      */
     clearUserSelection(): void;
+    /**
+     * Removes all elements in the user selection from the canvas.
+     * @private
+     */
+    deleteUserSelection(): void;
+    /**
+     * Copies all elements in the user selection to the clipboard.
+     * @private
+     */
+    copyUserSelectionToClipboard(): void;
+    /**
+     * Pastes all elements in the clipboard to the model.
+     * @private
+     */
+    pasteUserSelectionFromClipboard(coords?: Point): void;
+    /**
+     * Opens the context menu based on the given event.
+     * @private
+     */
+    openContextMenu(event: MouseEvent): void;
+    /**
+     * Closes the context menu.
+     * @private
+     */
+    closeContextMenu(): void;
     /**
      * Stops all unfinished user actions to ensure there are no unfinished actions before performing a different action.
      * @public

package/lib/util/events.d.ts

@@ -6,15 +6,21 @@ export declare enum Events {
     Blur = "blur",
     Change = "change",
     Click = "click",
+    ContextMenu = "contextmenu",
     DoubleClick = "dblclick",
     Focus = "focus",
     FocusIn = "focusin",
     FocusOut = "focusout",
     Input = "input",
+    KeyDown = "keydown",
     KeyUp = "keyup",
+    MouseDown = "mousedown",
     MouseMove = "mousemove",
     MouseOut = "mouseout",
     MouseOver = "mouseover",
+    MouseUp = "mouseup",
+    TouchStart = "touchstart",
+    TouchEnd = "touchend",
     Wheel = "wheel"
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",
@@ -18,12 +18,12 @@
     "angular"
   ],
   "peerDependencies": {
-    "@angular/common": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
+    "@angular/common": "^18.2.2",
+    "@angular/core": "^18.2.2",
+    "@angular/forms": "^18.2.2",
     "d3": "^7.9.0",
     "rxjs": "~7.8.1",
-    "uuid": "^9.0.0"
+    "uuid": "^10.0.0"
   },
   "sideEffects": false,
   "files": [