@metadev/daga 1.3.1 → 1.4.1

package/lib/interfaces/canvas.d.ts

@@ -1,12 +1,13 @@
 import { Subject } from 'rxjs';
-import { ActionQueue } from '../diagram-editor/diagram/diagram-action';
+import { ActionQueue, DiagramActions } from '../diagram-editor/diagram/diagram-action';
+import { UserActionConfig } from '../diagram-editor/diagram/diagram-config';
 import { DiagramConnectionType } from '../diagram-editor/diagram/diagram-connection';
 import { DiagramElement } from '../diagram-editor/diagram/diagram-element';
 import { DiagramModel } from '../diagram-editor/diagram/diagram-model';
 import { DiagramValidator } from '../errors/diagram-validator';
 import { Point } from '../util/canvas-util';
 import { DiagramEditor } from './diagram-editor';
-import { UserActionConfig } from '../diagram-editor/diagram/diagram-config';
+import { ValueSet } from '../diagram-editor/diagram/diagram-property';
 /**
  * Provides the functionality for the visual representation of the elements of a model.
  * @public
@@ -26,7 +27,7 @@ export interface Canvas {
      * Background color of the diagram.
      * @public
      */
-    color: string;
+    backgroundColor: string;
     /**
      * Distance between the grid points of the diagram.
      * @public
@@ -47,16 +48,6 @@ export interface Canvas {
      * @public
      */
     connectionType?: DiagramConnectionType;
-    /**
-     * Elements below the priority threshold shouldn't be displayed.
-     * @public
-     */
-    priorityThreshold?: number;
-    /**
-     * Possible values that the priority threshold can take.
-     * @public
-     */
-    priorityThresholds: number[];
     /**
      * Identifier of the current layout format used by the diagram.
      * @public
@@ -83,19 +74,20 @@ export interface Canvas {
      */
     viewInitialized$: Subject<void>;
     /**
-     * Subject for tracking when validators are added to the canvas.
+     * Subject for tracking when validators are added to or removed from the canvas.
      * @public
      */
     validatorChanges$: Subject<void>;
     /**
      * Subject for tracking changes in the diagram.
      * Used to detect if there have been changes over a period of time.
+     * Values are sent when the user performs changes on the diagram, but not when the changes are performed programmatically.
      * @public
      */
-    diagramChanges$: Subject<number>;
+    diagramChanges$: Subject<void>;
     /**
      * Subject for tracking the presence of important changes in the diagram.
-     * Used to detect if there are any changes that require an immediate reaction.
+     * Used to detect if there are any changes that require immediate handling.
      * @public
      */
     diagramImportantChanges$: Subject<void>;
@@ -153,6 +145,12 @@ export interface Canvas {
      * @param event A MouseEvent.
      */
     getPointerLocationRelativeToBody(event: MouseEvent): Point;
+    /**
+     * Get the location of the pointer in the given event relative to the screen.
+     * @private
+     * @param event A MouseEvent.
+     */
+    getPointerLocationRelativeToScreen(event: MouseEvent): Point;
     /**
      * Adds a validator to the list of validators of the diagram.
      * @public
@@ -163,6 +161,22 @@ export interface Canvas {
      * @public
      */
     removeValidator(validator: DiagramValidator): void;
+    /**
+     * Get the possible priority thresholds of the diagram.
+     * @public
+     */
+    getPriorityThresholdOptions(): number[] | undefined;
+    /**
+     * Get the current priority threshold of the diagram.
+     * @public
+     */
+    getPriorityThreshold(): number | undefined;
+    /**
+     * Changes the current priority threshold of the diagram.
+     * @public
+     * @param priority A priority threshold.
+     */
+    setPriorityThreshold(priority: number): void;
     /**
      * Update the view of the canvas to show the current state of the model.
      * @public
@@ -193,6 +207,16 @@ export interface Canvas {
      * @public
      */
     updateFieldsInView(...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
+     */
+    fitFieldRootInView(id: string): void;
+    /**
+     * Fit a node to encompass the totality of its sections.
+     * @param id The id of a node
+     */
+    fitNodeInView(id: string): void;
     /**
      * Get the d3 Selection containing the view of all the elements in the canvas.
      * @private
@@ -245,9 +269,16 @@ export interface Canvas {
      * @public
      */
     cancelAllUserActions(): void;
+    /**
+     * Checks whether the user can perform the given action.
+     * @public
+     */
+    canUserPerformAction(action: DiagramActions): boolean;
     /**
      * Sets the diagram element whose ValueSet is being displayed in the value set editor.
      * @private
      */
-    setPropertyEditorSelection(selection?: DiagramElement): void;
+    setPropertyEditorSelection(selection?: {
+        valueSet: ValueSet;
+    } & (DiagramElement | DiagramModel)): void;
 }

package/lib/palette/palette.component.d.ts

@@ -1,10 +1,10 @@
 import { AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
 import * as d3 from 'd3';
-import { PaletteConfig } from '../diagram-editor/diagram/diagram-config';
+import { PaletteSectionConfig } from '../diagram-editor/diagram/diagram-config';
 import { Canvas } from '../interfaces/canvas';
 import { Palette } from '../interfaces/palette';
 import { CanvasProviderService } from '../services/canvas-provider.service';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * Palette that the user can drag and drop nodes from.
@@ -16,16 +16,18 @@ export declare class PaletteComponent implements AfterContentInit, AfterViewInit
     private canvasProvider;
     get canvas(): Canvas;
     panel: ElementRef<HTMLDivElement>;
-    palettes: PaletteConfig[];
-    currentPalette: PaletteConfig;
+    palettes: PaletteSectionConfig[];
+    currentPalette: PaletteSectionConfig;
     currentCategory: string;
     location: Corner;
+    direction: Side;
+    width: string;
     private priorityThreshold?;
     constructor(canvasProvider: CanvasProviderService);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     refreshPalette(): void;
-    switchPalette(palette: PaletteConfig): void;
+    switchPalette(palette: PaletteSectionConfig): void;
     selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     selectPalette(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     private appendCategories;
@@ -33,5 +35,5 @@ export declare class PaletteComponent implements AfterContentInit, AfterViewInit
     private appendNodeTemplate;
     private appendConnectionTemplate;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaletteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteComponent, "daga-palette", never, { "palettes": { "alias": "palettes"; "required": false; }; "currentPalette": { "alias": "currentPalette"; "required": false; }; "currentCategory": { "alias": "currentCategory"; "required": false; }; "location": { "alias": "location"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteComponent, "daga-palette", never, { "palettes": { "alias": "palettes"; "required": false; }; "currentPalette": { "alias": "currentPalette"; "required": false; }; "currentCategory": { "alias": "currentCategory"; "required": false; }; "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -1,23 +1,28 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+import * as d3 from 'd3';
 import { ValueSet } from '../diagram-editor/diagram/diagram-property';
 import { PropertyEditor } from '../interfaces/property-editor';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * Editor of the values of a value set.
  * @see ValueSet
  * @private
  */
-export declare class PropertyEditorComponent implements PropertyEditor {
+export declare class PropertyEditorComponent implements AfterViewInit, PropertyEditor {
     private cdr;
     panel: ElementRef<HTMLDivElement>;
     location: Corner;
+    direction: Side;
+    width: string;
     title?: string;
     _valueSet: ValueSet | undefined;
     get valueSet(): ValueSet | undefined;
     set valueSet(valueSet: ValueSet | undefined);
     constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     highlightProperty(...propertyNames: string[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PropertyEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "location": { "alias": "location"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "width": { "alias": "width"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/services/canvas-provider.service.d.ts

@@ -22,7 +22,7 @@ export declare class CanvasProviderService {
      */
     initCanvasView(appendTo: HTMLElement): void;
     /**
-     * Get the diagram canvas of this context.
+     * Get the diagram canvas of this context. Should only be called after the view of the {@link DiagramComponent} context has been initialized.
      * @public
      * @returns A diagram canvas.
      */

package/lib/services/daga-configuration.service.d.ts

@@ -13,7 +13,7 @@ export declare class DagaConfigurationService {
      */
     init(config: DiagramConfig): void;
     /**
-     * Get the diagram configuration of this context.
+     * Get the diagram configuration of this context. Should only be called after the {@link DiagramComponent} context has been initialized.
      * @public
      * @returns A diagram configuration.
      */

package/lib/util/events.d.ts

@@ -7,11 +7,15 @@ export declare enum Events {
     Change = "change",
     Click = "click",
     DoubleClick = "dblclick",
+    Focus = "focus",
+    FocusIn = "focusin",
+    FocusOut = "focusout",
     Input = "input",
     KeyUp = "keyup",
     MouseMove = "mousemove",
     MouseOut = "mouseout",
-    MouseOver = "mouseover"
+    MouseOver = "mouseover",
+    Wheel = "wheel"
 }
 /**
  * Keys in keyboard events.

package/lib/util/style.d.ts

@@ -0,0 +1,13 @@
+export declare enum CursorStyle {
+    AllScroll = "all-scroll",
+    Auto = "auto",
+    EWResize = "ew-resize",
+    Grab = "grab",
+    Grabbing = "grabbing",
+    Move = "move",
+    NoDrop = "no-drop",
+    NSResize = "ns-resize",
+    NotAllowed = "not-allowed",
+    ZoomIn = "zoom-in",
+    ZoomOut = "zoom-out"
+}

package/lib/util/text-util.d.ts

@@ -0,0 +1,2 @@
+export declare const numberOfColumns: (s: string) => number;
+export declare const numberOfRows: (s: string) => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",

package/assets/config/generic-diagram.json

@@ -1,94 +0,0 @@
-{
-  "type": "generic-diagram",
-  "color": "#FFFFFF",
-  "gridSize": 50,
-  "snapToGrid": true,
-  "guessConnectionType": false,
-  "defaultConnection": "diagram-connection",
-  "palettes": [
-    {
-      "name": "",
-      "templates": [
-        {
-          "templateType": "node",
-          "type": "diagram-node",
-          "label": "Node"
-        },
-        {
-          "templateType": "connection",
-          "type": "diagram-connection",
-          "label": "",
-          "color": "white",
-          "icon": "/assets/daga/icon/connection/filled-arrow.svg",
-          "width": 150,
-          "height": 50
-        }
-      ]
-    }
-  ],
-  "nodeTypes": [
-    {
-      "id": "diagram-node",
-      "name": "Node",
-      "defaultWidth": 150,
-      "defaultHeight": 50,
-      "label": {
-        "fontSize": 20,
-        "margin": 10
-      },
-      "ports": [
-        {
-          "coords": [75, 0],
-          "direction": "top"
-        },
-        {
-          "coords": [0, 25],
-          "direction": "left"
-        },
-        {
-          "coords": [75, 50],
-          "direction": "bottom"
-        },
-        {
-          "coords": [150, 25],
-          "direction": "right"
-        }
-      ],
-      "look": {
-        "lookType": "shaped-look",
-        "shape": "rectangle",
-        "color": "#FFFFFF",
-        "borderColor": "#000000",
-        "selectedColor": "#FFAAFF",
-        "selectedBorderColor": "#AA00AA"
-      }
-    }
-  ],
-  "connectionTypes": [
-    {
-      "id": "diagram-connection",
-      "name": "Connection",
-      "color": "#000000",
-      "selectedColor": "#AA00AA",
-      "width": 3,
-      "shape": "bezier",
-      "defaultEndMarkerLook": {
-        "image": "/assets/marker/arrow.svg",
-        "selectedImage": "/assets/marker/arrow.svg",
-        "markerWidth": 4,
-        "markerHeight": 8,
-        "markerRefX": 4,
-        "markerRefY": 4
-      },
-      "label": {
-        "color": "#FFFFFF",
-        "selectedColor": "#FFFFFF",
-        "fontSize": 12,
-        "padding": 6,
-        "margin": 20
-      },
-      "startTypes": ["diagram-node"],
-      "endTypes": ["diagram-node"]
-    }
-  ]
-}

package/assets/icon/connection/arrow.svg

@@ -1,23 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-	<line
-		x1="120"
-		y1="5"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-	<line
-		x1="120"
-		y1="45"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-</svg>

package/assets/icon/connection/empty-arrow.svg

@@ -1,19 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="120"
-		y2="25"
-		stroke="black"
-	/>
-	<path
-		d="
-			M 140, 25
-			L 120,  5
-			L 120, 45
-			z
-		"
-		stroke="black"
-		fill="white"
-	/>
-</svg>

package/assets/icon/connection/empty-diamond.svg

@@ -1,20 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="100"
-		y2="25"
-		stroke="black"
-	/>
-	<path
-		d="
-			M 140, 25
-			L 100,  5
-			L  60, 25
-			L 100, 45
-			z
-		"
-		stroke="black"
-		fill="white"
-	/>
-</svg>

package/assets/icon/connection/filled-arrow.svg

@@ -1,19 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="120"
-		y2="25"
-		stroke="black"
-	/>
-	<path
-		d="
-			M 140, 25
-			L 120,  5
-			L 120, 45
-			z
-		"
-		stroke="none"
-		fill="black"
-	/>
-</svg>

package/assets/icon/connection/filled-diamond.svg

@@ -1,20 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="100"
-		y2="25"
-		stroke="black"
-	/>
-	<path
-		d="
-			M 140, 25
-			L 100,  5
-			L  60, 25
-			L 100, 45
-			z
-		"
-		stroke="none"
-		fill="black"
-	/>
-</svg>

package/assets/icon/connection/line.svg

@@ -1,9 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-</svg>