@metadev/daga 1.4.1 → 1.4.2

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

@@ -1,5 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
+import { CollabTimestamp } from './collab/primitives';
 import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntity, DiagramEntitySet } from './diagram-element';
@@ -97,6 +98,11 @@ export declare class DiagramNode extends DiagramElement {
      * @public
      */
     coords: Point;
+    /**
+     * Collaborative timestamp for coords.
+     * @public
+     */
+    coordsTimestamp?: CollabTimestamp;
     /**
      * Dimension of this node along the x axis.
      * @public
@@ -116,21 +122,79 @@ export declare class DiagramNode extends DiagramElement {
     constructor(model: DiagramModel, type: DiagramNodeType, coords?: Point, id?: string);
     updateInView(): void;
     getPriority(): number;
+    /**
+     * Get the port of this node which is closest to the given coordinates.
+     * @param coords A point in the diagram.
+     * @returns The port of this node closest to the given coordinates, `undefined` if this node has no ports.
+     */
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
+    /**
+     * Get all incoming connections of all ports of this node, not including incoming connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getIncomingConnections(): DiagramConnection[];
+    /**
+     * Get all outgoing connections of all ports of this node, not including outgoing connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getOutgoingConnections(): DiagramConnection[];
+    /**
+     * Get all connections of all ports of this node, not including connections of sections of this node.
+     * @public
+     * @returns A list of connections.
+     */
     getConnections(): DiagramConnection[];
+    /**
+     * Get all nodes that have a direct connection to this node, not including nodes that have a direct connection to sections of this node.
+     * @public
+     * @returns A list of nodes.
+     */
     getAdjacentNodes(): DiagramNode[];
+    /**
+     * Change the coordinates of this node to the given coordinates and move its sections, ports and labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords: Point): void;
+    /**
+     * Change the dimensions of this node in the given direction by the given amount without changing the dimensions of the sections of this node.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     */
     stretch(direction: Side, distance: number): void;
+    /**
+     * Change the dimensions of this node and its sections in the given direction by the given amount, with the sections of the given index being stretched.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     * @param indexX A section index.
+     * @param indexY A section index.
+     */
     stretchSections(direction: Side, distance: number, indexX: number, indexY: number): void;
 }
 export declare class DiagramNodeSet extends DiagramEntitySet<DiagramNode> {
     private model;
+    /**
+     * Set of the possible types of node that the nodes of this set can have.
+     * @public
+     */
     types: DiagramEntitySet<DiagramNodeType>;
+    /**
+     * Instance a set of nodes for the given model. This method is used internally.
+     * @private
+     */
     constructor(model: DiagramModel);
-    new(type: DiagramNodeType, coords: Point, id?: string | undefined, sectionIds?: (string | undefined)[], sectionPortIds?: (string | undefined)[][], sectionPortLabelIds?: (string | undefined)[][], portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[], labelId?: string | undefined): DiagramNode;
+    /**
+     * Instance a new node and add it to this set.
+     * @public
+     * @param type The type of the node given as either the type itself or the id of the type.
+     * @param coords The coordinates of the top left corner of the node in the diagram.
+     * @param id The id of the node. Should be left undefined unless a specific id is required.
+     * @returns The instanced node.
+     */
+    new(type: DiagramNodeType | string, coords: Point, id?: string | undefined): DiagramNode;
     remove(id: string): void;
-    filter(type?: string, threshold?: number): DiagramNode[];
-    find(type?: string, threshold?: number): DiagramNode | undefined;
 }

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

@@ -56,18 +56,44 @@ export declare class DiagramPort extends DiagramElement {
     incomingConnections: DiagramConnection[];
     constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id?: string);
     updateInView(): void;
+    /**
+     * Add a connection to this port's list of outgoing connections.
+     * @public
+     * @param connection A connection.
+     */
     startConnection(connection: DiagramConnection): void;
+    /**
+     * Add a connection to this port's list of incoming connections.
+     * @public
+     * @param connection A connection.
+     */
     finishConnection(connection: DiagramConnection): void;
+    /**
+     * Get the root node of this port, which is either its rootElement if it's a node or it's rootElement's node if it's a section.
+     * @public
+     * @returns A node if it could be found, `undefined` otherwise.
+     */
     getNode(): DiagramNode | undefined;
     getPriority(): number;
+    /**
+     * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords: Point): void;
     distanceTo(coords: Point): number;
 }
 export declare class DiagramPortSet extends DiagramEntitySet<DiagramPort> {
     private model;
+    /**
+     * Instance a set of ports for the given model. This method is used internally.
+     * @private
+     */
     constructor(model: DiagramModel);
+    /**
+     * 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(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id?: string | undefined): DiagramPort;
     remove(id: string): void;
-    filter(threshold?: number): DiagramPort[];
-    find(threshold?: number): DiagramPort | undefined;
 }

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

@@ -1,4 +1,3 @@
-import { DataSource } from '@metadev/lux';
 /**
  * A property which is part of a property set and defines what values a value in a value set can take.
  * @see PropertySet
@@ -16,8 +15,9 @@ export declare class Property {
     type: Type;
     /**
      * The default value of this property.
+     * @default undefined
      */
-    defaultValue: unknown;
+    defaultValue?: unknown;
     /**
      * Whether this property should always appear in the property editor component.
      * @see PropertyEditorComponent
@@ -28,22 +28,33 @@ export declare class Property {
      */
     editable: boolean;
     /**
-     * Which attribute of the parent component the value of this property is linked to. Null if none.
+     * Which attribute of the parent component the value of this property is linked to. `undefined` if none.
+     * @default undefined
      */
-    rootAttribute: string[] | string | null;
+    rootAttribute?: string[] | string;
     /**
      * The list of possible values if the value of the property is chosen from a set of possible values. Undefined otherwise.
      * @default undefined
      */
-    options?: DataSource<unknown, string>;
+    options?: Option<unknown>[];
     /**
-     * The list of properties that are part of this property if the type of this property is 'object'.
+     * The list of properties that are part of this property if the type of this property is `'object'`.
+     * @default undefined
      */
     properties?: Property[];
-    constructor(name: string, type: Type, defaultValue: unknown, basic: boolean, editable: boolean, rootAttribute: string[] | string | null);
+    constructor(name: string, type: Type, defaultValue: unknown, basic: boolean, editable: boolean, rootAttribute?: string[] | string);
+}
+/**
+ * Each of the possible values that a property of type option can have.
+ * @see Property
+ * @see Type.Option
+ */
+export interface Option<T> {
+    key: T;
+    label: string;
 }
 /**
- * The type that a property can hvae..
+ * The type that a property can have.
  * @see Property
  * @private
  */
@@ -60,6 +71,10 @@ export declare enum Type {
      * A type whose value must be a date.
      */
     Date = "date",
+    /**
+     * A type whose value must be a date with a time.
+     */
+    Datetime = "datetime",
     /**
      * A type whose value must be a number.
      */
@@ -74,6 +89,7 @@ export declare enum Type {
     Option = "option",
     /**
      * A type whose value must be a list of values picked from a set of options.
+     * @see Type.Option
      */
     OptionList = "option-list",
     /**
@@ -128,35 +144,143 @@ export declare class ValueSet {
     propertySet: PropertySet;
     displayedProperties: Property[];
     hiddenProperties: Property[];
-    values: {
-        [key: string]: unknown;
-    };
-    valueSets: {
-        [key: string]: ValueSet;
-    };
+    private values;
+    private valueSets;
     constructor(propertySet: PropertySet, rootElement: unknown);
+    /**
+     * Get the value of the root element attribute under the given keys.
+     * If given an array of keys, the value is found under repeated lookups to enable obtaining nested values.
+     * @private
+     * @param rootAttribute A key or array of keys to look up in the root element.
+     * @returns The value if it could be found, `undefined` if nothing could be found.
+     */
     getRootElementValue(rootAttribute: string[] | string | null): unknown;
+    /**
+     * Set the value of the root element's attribute under the given keys.
+     * If given an array of keys, the value is found under repeated lookups to enable setting nested values.
+     * If the root element has a function `updateInView()`, it is called upon successful setting of the value.
+     * If the root element's attribute doesn't exist, it does nothing.
+     * @private
+     * @param rootAttribute A key or array of keys to look up in the root element.
+     * @param value The value to set the root element's attribute to.
+     */
     setRootElementValue(rootAttribute: string[] | string | null, value: unknown): void;
+    /**
+     * Obtain the value under the given key.
+     * @private
+     * @param key A key.
+     * @returns The value under the given key.
+     */
     getValue(key: string): any;
+    /**
+     * Obtain all the values in the set.
+     * @private
+     * @returns An object containing all the values in the set.
+     */
     getValues(): {
         [key: string]: unknown;
     };
+    /**
+     * Check if the value under the key is not empty.
+     * @private
+     * @param key A key.
+     * @returns `true` if the value under the key is empty, `false` otherwise.
+     */
     hasValue(key: string): boolean;
+    /**
+     * Check if the value under the key is not empty or the default value.
+     * @private
+     * @param key A key.
+     * @returns `true` if the value under the key is empty or the default value, `false` otherwise.
+     */
     hasSetValue(key: string): boolean;
+    /**
+     * Check if any of the values in the set are not empty or the default value.
+     * @private
+     * @returns `true` if any of the values in the set are not empty or the default value, `false` otherwise.
+     */
     hasAnySetValue(): boolean;
-    hasAnySetValueExcept(keys: string[]): boolean;
+    /**
+     * Set the value under the given key.
+     * @private
+     * @param key A key.
+     * @param value A value.
+     */
     setValue(key: string, value: unknown): void;
+    /**
+     * Reset all values and then set them to the given values.
+     * @private
+     * @param values An object containing all values to set the values to.
+     */
     setValues(values: {
         [key: string]: unknown;
     }): void;
-    hasValues(): boolean;
+    /**
+     * Writes the given values over the value set's existing values without resetting the existing values.
+     * @private
+     * @param values An object containing all values to set the values to.
+     */
+    overwriteValues(values: {
+        [key: string]: unknown;
+    }): void;
+    /**
+     * Set all the values of this set to the defaults.
+     * If this set has a root element and any of its properties have root attributes, the root element's attributes are also set to the property's default value if one is provided.
+     * @private
+     */
     resetValues(): void;
-    displayProperty(property: Property): void;
-    hideProperty(property: Property): void;
     /**
      * Constructs a ValueSet with its corresponding PropertySet representing the values of the object.
+     * @private
+     * @param key Key that the ValueSet is under.
+     * @returns The constructed ValueSet.
+     */
+    private constructSubValueSet;
+    /**
+     * Get the ValueSet under the given key when there are nested ValueSets.
+     * @private
+     * @param key A key.
+     * @returns A ValueSet.
      */
-    constructSubValueSet(key: string): ValueSet;
     getSubValueSet(key: string): ValueSet;
+    /**
+     * Move the given property to the list of displayed properties.
+     * @private
+     * @param property A property.
+     */
+    displayProperty(property: Property): void;
+    /**
+     * Move the given property to the list of hidden properties.
+     * @private
+     * @param property A property.
+     */
+    hideProperty(property: Property): void;
 }
+/**
+ * Check if the given value is not empty.
+ * @param a A value.
+ * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
+ */
+export declare const empty: (a: unknown) => boolean;
+/**
+ * Check whether the given values are equal.
+ * @param a A value.
+ * @param b A value.
+ * @returns `true` if the given values are equal, `false` otherwise.
+ */
 export declare const equals: (a: unknown, b: unknown) => boolean;
+/**
+ * Calculate the differences between the given values and return two objects, each containing the keys for which the values are different in each argument, containing the different values.
+ * @param a A dictionary.
+ * @param b A dictionary.
+ * @returns A tuple of two values with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+export declare const diff: (a: {
+    [key: string]: unknown;
+}, b: {
+    [key: string]: unknown;
+}) => [{
+    [key: string]: unknown;
+}, {
+    [key: string]: unknown;
+}];

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

@@ -106,18 +106,55 @@ export declare class DiagramSection extends DiagramElement {
     getMinWidth(): number;
     getMinHeight(): number;
     getPriority(): number;
+    /**
+     * Get the port of this section which is closest to the given coordinates.
+     * @param coords A point in the diagram.
+     * @returns The port of this section closest to the given coordinates, `undefined` if this section has no ports.
+     */
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
+    /**
+     * Get all incoming connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getIncomingConnections(): DiagramConnection[];
+    /**
+     * Get all outgoing connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getOutgoingConnections(): DiagramConnection[];
+    /**
+     * Get all connections of all ports of this section.
+     * @public
+     * @returns A list of connections.
+     */
     getConnections(): DiagramConnection[];
+    /**
+     * Change the coordinates of this section to the given coordinates and move its ports and labels correspondingly.
+     * @public
+     * @param coords A point in the diagram.
+     */
     move(coords: Point): void;
+    /**
+     * Change the dimensions of this section in the given direction by the given amount.
+     * @public
+     * @param direction A direction.
+     * @param distance A distance.
+     */
     stretch(direction: Side, distance: number): void;
 }
 export declare class DiagramSectionSet extends DiagramEntitySet<DiagramSection> {
     private model;
+    /**
+     * Instance a set of sections for the given model. This method is used internally.
+     * @private
+     */
     constructor(model: DiagramModel);
-    new(node: DiagramNode, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string | undefined, portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[]): DiagramSection;
+    /**
+     * Instance a new section and add it to this set. This method is normally called when instancing an element with a section and it is rarely called by itself.
+     * @private
+     */
+    new(node: DiagramNode, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string | undefined): DiagramSection;
     remove(id: string): void;
-    filter(threshold?: number): DiagramSection[];
-    find(threshold?: number): DiagramSection | undefined;
 }

package/lib/interfaces/canvas.d.ts

@@ -8,7 +8,9 @@ import { DiagramValidator } from '../errors/diagram-validator';
 import { Point } from '../util/canvas-util';
 import { DiagramEditor } from './diagram-editor';
 import { ValueSet } from '../diagram-editor/diagram/diagram-property';
+import { CollabEngine } from '../diagram-editor/diagram/collab/collab-engine';
 /**
+ * Represents a specific replica or view of the model.
  * Provides the functionality for the visual representation of the elements of a model.
  * @public
  */
@@ -68,6 +70,11 @@ export interface Canvas {
      * @private
      */
     actionQueue: ActionQueue;
+    /**
+     * Engine that implements collaborative actions.
+     * @private
+     */
+    collabEngine: CollabEngine;
     /**
      * Subject for tracking when the canvas' view is initialized.
      * @public

package/lib/property-editor/autocomplete/autocomplete.component.d.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { Option } from '../../diagram-editor/diagram/diagram-property';
+import * as i0 from "@angular/core";
+export declare const LOST_FOCUS_TIME_WINDOW_MS = 200;
+/**
+ * Combobox with autocomplete.
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
+export declare class AutocompleteComponent {
+    private cdr;
+    mainElement: ElementRef;
+    private _value;
+    set value(value: unknown);
+    get value(): unknown;
+    valueInput: string;
+    focusIndex?: number;
+    options: Option<unknown>[];
+    currentOptions: Option<unknown>[];
+    currentLabelStarts: string[];
+    currentLabelMatches: string[];
+    currentLabelEnds: string[];
+    disabled: boolean;
+    showOptions: boolean;
+    valueChange: EventEmitter<unknown>;
+    constructor(cdr: ChangeDetectorRef);
+    getLabelOfValue(value: unknown): string;
+    onKeyup(event: KeyboardEvent): void;
+    openOptions(): void;
+    closeOptions(): void;
+    focusOnOption(index: number | undefined): void;
+    onLostFocus(): void;
+    scrollToOption(index: number): void;
+    clearInput(): void;
+    complete(option: Option<unknown>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "daga-autocomplete", never, { "value": { "alias": "value"; "required": false; }; "valueInput": { "alias": "valueInput"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/{object-editor → property-editor/object-editor}/object-editor.component.d.ts

@@ -1,8 +1,7 @@
 import { ChangeDetectorRef } from '@angular/core';
-import { RadioItem } from '@metadev/lux';
-import { Property, Type, ValueSet } from '../diagram-editor/diagram/diagram-property';
-import { Canvas } from '../interfaces/canvas';
-import { CanvasProviderService } from '../services/canvas-provider.service';
+import { Property, Type, ValueSet } from '../../diagram-editor/diagram/diagram-property';
+import { Canvas } from '../../interfaces/canvas';
+import { CanvasProviderService } from '../../services/canvas-provider.service';
 import * as i0 from "@angular/core";
 /**
  * Editor of a value set within a property editor.
@@ -21,12 +20,12 @@ export declare class ObjectEditorComponent {
     /** How many object-editors are parents of this object-editor. @private */
     depth: number;
     Type: typeof Type;
-    booleanRadioItems: RadioItem[];
     constructor(cdr: ChangeDetectorRef, canvasProvider: CanvasProviderService);
     displayProperty(property: Property | Event | string | undefined): void;
     hideProperty(property: Property | Event | string | undefined): void;
     setValue(property: Property, value: unknown): void;
-    convertDate(date: string | number | Date): string;
+    dateToLocalDatetimeString(date: string | number | Date | null | undefined): string;
+    localDatetimeStringToDate(string: string): Date;
     static ɵfac: i0.ɵɵFactoryDeclaration<ObjectEditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ObjectEditorComponent, "daga-object-editor", never, { "valueSet": { "alias": "valueSet"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/property-editor/option-list-editor/option-list-editor.component.d.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { Option } from '../../diagram-editor/diagram/diagram-property';
+import * as i0 from "@angular/core";
+/**
+ * Editor of a property of text list type within a property editor.
+ * @see Type.TextList
+ * @see PropertyEditor
+ * @see ValueSet
+ * @private
+ */
+export declare class OptionListEditorComponent {
+    private cdr;
+    private _value;
+    set value(value: unknown[]);
+    get value(): unknown[];
+    labelsOfValue: string[];
+    options: Option<unknown>[];
+    valueInput?: unknown;
+    disabled: boolean;
+    valueChange: EventEmitter<unknown[]>;
+    constructor(cdr: ChangeDetectorRef);
+    getLabelOfValue(value: unknown): string;
+    removeFromValue(index: number): void;
+    addToValue(): void;
+    clearInput(): void;
+    onKeyUp(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OptionListEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OptionListEditorComponent, "daga-option-list-editor", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "valueInput": { "alias": "valueInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/{text-list-editor → property-editor/text-list-editor}/text-list-editor.component.d.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Editor of a property of text list type within a property editor.
- * @see TextList
+ * @see Type.TextList
  * @see PropertyEditor
  * @see ValueSet
  * @private
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 export declare class TextListEditorComponent {
     private cdr;
     private _value;
-    set value(val: string[]);
+    set value(value: string[]);
     get value(): string[];
     valueInput: string;
     disabled: boolean;

package/lib/{text-map-editor → property-editor/text-map-editor}/text-map-editor.component.d.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Editor of a property of text map type within a property editor.
- * @see TextMap
+ * @see Type.TextMap
  * @see PropertyEditor
  * @see ValueSet
  * @private
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 export declare class TextMapEditorComponent {
     private cdr;
     private _value;
-    set value(val: {
+    set value(value: {
         [name: string]: string;
     });
     get value(): {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",
@@ -21,9 +21,9 @@
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
-    "@metadev/lux": "^0.28.0",
     "d3": "^7.8.5",
-    "rxjs": "~7.8.1"
+    "rxjs": "~7.8.1",
+    "uuid": "^9.0.0"
   },
   "sideEffects": false,
   "files": [