@metadev/daga 1.5.6 → 2.0.2

package/{lib → src/lib}/interfaces/canvas.d.ts

@@ -1,11 +1,13 @@
 import { Subject } from 'rxjs';
-import { CollabEngine } from '../diagram-editor/diagram/collab/collab-engine';
-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 { ValueSet } from '../diagram-editor/diagram/diagram-property';
+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, DiagramActions } from '../diagram/diagram-action';
+import { UserActionConfig } from '../diagram/diagram-config';
+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';
@@ -19,32 +21,81 @@ export interface Canvas {
      * Parent component of the diagram.
      * @private
      */
-    parentComponent: DiagramEditor;
+    readonly parentComponent: DiagramEditor;
     /**
      * Object that contains the data of the elements of the diagram.
      * @public
      */
-    model: DiagramModel;
+    readonly model: DiagramModel;
+    /**
+     * Object that contains the functionality related to the user selection.
+     * @public
+     */
+    readonly userSelection: DiagramUserSelection;
+    /**
+     * Object that contains the functionality related to the user highlight.
+     * @public
+     */
+    readonly userHighlight: DiagramUserHighlight;
+    /**
+     * Object that contains the functionality related to the context menu.
+     * @public
+     */
+    readonly contextMenu: DiagramContextMenu;
+    /**
+     * The stack of actions performed by the user used to keep track of what actions can be undone or redone.
+     * @private
+     */
+    readonly actionStack: ActionStack;
+    /**
+     * Engine that implements collaborative actions.
+     * @private
+     */
+    readonly collabEngine: CollabEngine;
     /**
      * Background color of the diagram.
      * @public
      */
     backgroundColor: string;
     /**
-     * Distance between the grid points of the diagram.
+     * 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.
+     * @public
+     */
+    gridColor: string;
     /**
      * If true, elements moved by the user should be placed on the closest grid point rather than the exact point where they were placed.
      * @public
      */
     snapToGrid: boolean;
+    /**
+     * 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
+     */
+    zoomFactor: number;
+    /**
+     * The rate by which the view of the canvas moves when the user users buttons or keys to pan at a default zoom level in diagram units. Should be above 1.
+     * @public
+     */
+    panRate: number;
     /**
      * If true, new connections should have the type that makes most sense even if it's not the currently chosen type.
      * @public
      */
-    guessConnectionType: boolean;
+    inferConnectionType: boolean;
+    /**
+     * If true, the next drag action will create a multiple selection rectangle.
+     */
+    multipleSelectionOn: boolean;
     /**
      * When a new connection is made, it should have this type.
      * @public
@@ -55,54 +106,49 @@ export interface Canvas {
      * @public
      */
     layoutFormat?: string;
-    /**
-     * Mapping of what actions the user is allowed to perform. Absent values are assumed to be `true`.
-     * @public
-     */
-    userActions: UserActionConfig;
     /**
      * The list of validators used to check for errors in this canvas.
      * @private
      */
     validators: DiagramValidator[];
     /**
-     * The queue of actions used to keep track of what actions can be undone or redone.
-     * @private
-     */
-    actionQueue: ActionQueue;
-    /**
-     * Engine that implements collaborative actions.
-     * @private
+     * Mapping of what actions the user is allowed to perform. Absent values are assumed to be allowed.
+     * @public
      */
-    collabEngine: CollabEngine;
+    userActions: UserActionConfig;
     /**
      * Subject for tracking when the canvas' view is initialized.
      * @public
      */
-    viewInitialized$: Subject<void>;
+    readonly viewInitialized$: Subject<void>;
     /**
      * Subject for tracking when validators are added to or removed from the canvas.
      * @public
      */
-    validatorChanges$: Subject<void>;
+    readonly validatorChange$: 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<void>;
+    readonly diagramChange$: Subject<void>;
     /**
      * Subject for tracking the presence of important changes in the diagram.
      * Used to detect if there are any changes that require immediate handling.
      * @public
      */
-    diagramImportantChanges$: Subject<void>;
+    readonly diagramImportantChange$: Subject<void>;
     /**
      * Subject for tracking changes in the property editor.
      * @public
      */
-    propertyEditorChanges$: Subject<void>;
+    readonly propertyEditorChanges$: Subject<void>;
+    /**
+     * Subject for tracking user events in the diagram.
+     * @public
+     */
+    readonly diagramEvent$: Subject<DiagramEvent>;
     /**
      * Initializes the view of the diagram.
      * @private
@@ -111,15 +157,15 @@ export interface Canvas {
     /**
      * Increases the zoom level by the given factor.
      * @public
-     * @param zoom A factor of zoom.
+     * @param factor A factor of zoom.
      */
-    zoomBy(zoom: number): void;
+    zoomBy(factor: number): void;
     /**
      * Changes the zoom level to a given level.
      * @public
-     * @param zoom A level of zoom.
+     * @param level A level of zoom.
      */
-    zoomTo(zoom: number): void;
+    zoomTo(level: number): void;
     /**
      * Translates the view by the given amount.
      * @public
@@ -260,73 +306,6 @@ export interface Canvas {
      * @private
      */
     selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
-    /**
-     * Highlight the given diagram element in the canvas view and all the elements which depend on it.
-     * Highlighting an element unhighlights the previously highlighted elements.
-     * @private
-     * @param element A diagram element.
-     */
-    highlight(element: DiagramElement): void;
-    /**
-     * Unhighlights all diagram elements.
-     * @private
-     */
-    unhighlight(): void;
-    /**
-     * Checks if the given diagram element is in the current user selection.
-     * @private
-     * @param selection A diagram element.
-     */
-    isInUserSelection(selection: DiagramElement): boolean;
-    /**
-     * Adds the given diagram element to the current user selection.
-     * @private
-     * @param selection A diagram element.
-     */
-    addToUserSelection(selection: DiagramElement): void;
-    /**
-     * Removes the given diagram element from the current user selection.
-     * @private
-     * @param selection A diagram element.
-     */
-    removeFromUserSelection(selection: DiagramElement): void;
-    /**
-     * Adds the given diagram element to the current user selection if it's not in the current user selection.
-     * If it is part of the current user selection, removes it from the current user selection.
-     * @private
-     * @param selection A diagram element.
-     */
-    toggleUserSelection(selection: DiagramElement): void;
-    /**
-     * Removes all elements from the current user selection.
-     * @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
@@ -337,11 +316,4 @@ export interface Canvas {
      * @public
      */
     canUserPerformAction(action: DiagramActions): boolean;
-    /**
-     * Sets the diagram element whose ValueSet is being displayed in the value set editor.
-     * @private
-     */
-    setPropertyEditorSelection(selection?: {
-        valueSet: ValueSet;
-    } & (DiagramElement | DiagramModel)): void;
 }

package/{lib → src/lib}/interfaces/diagram-buttons.d.ts

@@ -1,41 +1,41 @@
 /**
  * General canvas commands for zooming and filtering used by the buttons of the diagram's user interface.
- * @private
+ * @public
  */
 export interface DiagramButtons {
     /**
      * Increase the zoom level of the diagram by this component's zoom rate.
-     * @private
+     * @public
      */
     zoomIn(): void;
     /**
      * Decrease the zoom level of the diagram by this component's zoom rate.
-     * @private
+     * @public
      */
     zoomOut(): void;
     /**
      * Center the view of the diagram.
-     * @private
+     * @public
      */
     center(): void;
     /**
      * Apply the diagram's current layout if applicable.
-     * @private
+     * @public
      */
     layout(): void;
     /**
      * Change the current priority threshold of the canvas, hide any nodes with a priority below the threshold and recalculate the diagram's layout.
-     * @private
+     * @public
      */
     filter(): void;
     /**
      * Undo the latest user change in the diagram.
-     * @private
+     * @public
      */
     undo(): void;
     /**
      * Redo the latest undone user change in the diagram.
-     * @private
+     * @public
      */
     redo(): void;
 }

package/{lib → src/lib}/interfaces/diagram-editor.d.ts

@@ -1,31 +1,24 @@
-import { EventEmitter } from '@angular/core';
 import { DiagramButtons } from './diagram-buttons';
 import { Palette } from './palette';
 import { PropertyEditor } from './property-editor';
-import { DiagramEvent } from '../diagram-editor/diagram/diagram-event';
 /**
  * Exposes the components of the diagram editor.
- * @private
+ * @public
  */
 export interface DiagramEditor {
     /**
      * Diagram buttons component of the diagram editor.
-     * @private
+     * @public
      */
     diagramButtons: DiagramButtons;
     /**
      * Palette component of the diagram editor.
-     * @private
+     * @public
      */
     palette: Palette;
     /**
      * Property editor component of the diagram editor.
-     * @private
+     * @public
      */
     propertyEditor: PropertyEditor;
-    /**
-     * Event emitter of user actions taken on the diagram.
-     * @private
-     */
-    modelEvent: EventEmitter<DiagramEvent>;
 }

package/{lib → src/lib}/interfaces/palette.d.ts

@@ -1,12 +1,12 @@
 /**
  * Exposes the commands of the palette component.
- * @private
+ * @public
  */
 export interface Palette {
     /**
      * Refresh the current items being displayed in the palette.
      * Used when it is necessary to update the contents of the palette but the state of the palette doesn't change.
-     * @private
+     * @public
      */
     refreshPalette(): void;
 }

package/{lib → src/lib}/interfaces/property-editor.d.ts

@@ -1,22 +1,22 @@
-import { ValueSet } from '../diagram-editor/diagram/diagram-property';
+import { ValueSet } from '../diagram/model/diagram-property';
 /**
  * Exposes the commands of the property editor component.
- * @private
+ * @public
  */
 export interface PropertyEditor {
     /**
      * Title of the ValueSet displayed in the UI.
-     * @private
+     * @public
      */
     title?: string;
     /**
      * ValueSet being edited in this component by the user.
-     * @private
+     * @public
      */
     valueSet?: ValueSet;
     /**
      * Highlight the property given by the list of keys it can be found under.
-     * @private
+     * @public
      * @param propertyNames The keys under which a property can be found in the ValueSet being edited in this component.
      */
     highlightProperty(...propertyNames: string[]): void;

package/{lib → src/lib}/util/canvas-util.d.ts

@@ -1,20 +1,20 @@
 import { Side } from './svg-util';
 /**
  * A point on a canvas defined as its coordinates along the x and y axes.
- * @see DiagramCanvas
  * @public
+ * @see DiagramCanvas
  */
 export type Point = [number, number];
 /**
  * A line on a canvas defined as its start point and end point.
- * @see DiagramCanvas
  * @public
+ * @see DiagramCanvas
  */
 export type Line = [Point, Point];
 /**
  * A rectangle on a canvas defined as the points of its opposite corners.
- * @see DiagramCanvas
  * @public
+ * @see DiagramCanvas
  */
 export type Rectangle = [Point, Point];
 /**
@@ -32,7 +32,7 @@ export declare const roundPoint: (point: Point) => Point;
  * @param end A coordinate determine one of the extremes in the range.
  * @returns `true` if the given coordinate is in the given range; `false` otherwise.
  */
-export declare const between: (coordinate: number, start: number, end: number) => boolean;
+export declare const isBetweenCoordinates: (coordinate: number, start: number, end: number) => boolean;
 /**
  * Moves the given coordinate according to the given changes in coordinates.
  * @public
@@ -69,7 +69,7 @@ export declare const movePoint: (point: Point, direction: Side, distance: number
  * @param point2 A point.
  * @returns `true` if the two points have the same coordinates; `false` otherwise.
  */
-export declare const equals: (point1: Point, point2: Point) => boolean;
+export declare const pointsEqual: (point1: Point, point2: Point) => boolean;
 /**
  * Calculates the euclidean distance between two points.
  * @public
@@ -78,6 +78,13 @@ export declare const equals: (point1: Point, point2: Point) => boolean;
  * @returns The euclidean distance between the given points.
  */
 export declare const distanceBetweenPoints: (point1: Point, point2: Point) => number;
+/**
+ * Calculates the slope of the line as the ratio between the increase of the second coordinate and the increase of the first coordinate.
+ * @public
+ * @param line A line.
+ * @returns The ratio between the increase of the second coordinate and the increase of the first coordinate. `Infinity` if the increase of the first coordiante is zero. `NaN` if the line is a point.
+ */
+export declare const slope: (line: Line) => number;
 /**
  * Checks whether the given point is inside the given line.
  * @public
@@ -118,3 +125,11 @@ export declare const linesOverlap: (line1: Line, line2: Line) => boolean;
  * @returns `true` if the line intersects with the rectangle; `false` otherwise.
  */
 export declare const lineIntersectsRectangle: (line: Line, rectangle: Rectangle) => boolean;
+/**
+ * Checks whether the two given reactangles share at least one point.
+ * @public
+ * @param rectangle1 A rectangle.
+ * @param rectangle2 A rectangle.
+ * @returns `true` if the rectangles intersect; `false` otherwise.
+ */
+export declare const rectanglesIntersect: (rectangle1: Rectangle, rectangle2: Rectangle) => boolean;

package/src/lib/util/device-util.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Detects if the current device is a touchscreen.
+ * @returns `true` if the current device is a touchscreen, `false` otherwise.
+ */
+export declare const isTouchscreen: () => boolean;

package/{lib → src/lib}/util/events.d.ts

@@ -1,6 +1,6 @@
 /**
  * User events.
- * @private
+ * @public
  */
 export declare enum Events {
     Blur = "blur",
@@ -25,7 +25,7 @@ export declare enum Events {
 }
 /**
  * Keys in keyboard events.
- * @private
+ * @public
  */
 export declare enum Keys {
     Alt = "Alt",
@@ -49,7 +49,7 @@ export declare enum Keys {
 }
 /**
  * Types of events used by D3's drag functionality.
- * @private
+ * @public
  */
 export declare enum DragEvents {
     Drag = "drag",
@@ -58,7 +58,7 @@ export declare enum DragEvents {
 }
 /**
  * Types of events used by D3's zoom functionality.
- * @private
+ * @public
  */
 export declare enum ZoomEvents {
     Zoom = "zoom",

package/{lib → src/lib}/util/style.d.ts

@@ -1,6 +1,7 @@
 export declare enum CursorStyle {
     AllScroll = "all-scroll",
     Auto = "auto",
+    Crosshair = "crosshair",
     EWResize = "ew-resize",
     Grab = "grab",
     Grabbing = "grabbing",

package/src/lib/util/test-util.d.ts

@@ -0,0 +1,11 @@
+import { DiagramConfig } from '../diagram/diagram-config';
+/**
+ * Creates the structuredClone function if it doesn't exist.
+ * @private
+ */
+export declare const createStructuredClone: () => void;
+/**
+ * Generic diagram configuration used for testing.
+ * @private
+ */
+export declare const GENERIC_DIAGRAM_CONFIG: DiagramConfig;

package/assets/icon/action/drop-down-arrow.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
-<g id="arrow-drop-down">
-  <polygon points="0,63.75 127.5,191.25 255,63.75"/>
-</g>
-</svg>

package/assets/icon/action/drop-horizontal-left.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M 15  1
-			L  9 12
-			L 15 23
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/action/drop-horizontal-none.svg

@@ -1,13 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M 12  1
-			L 12 23
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/action/drop-horizontal-right.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M  9  1
-			L 15 12
-			L  9 23
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/action/drop-vertical-down.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M  1  9
-			L 12 15
-			L 23  9
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/action/drop-vertical-none.svg

@@ -1,13 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M  1 12
-			L 23 12
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/action/drop-vertical-up.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="
-			M  1 15
-			L 12  9
-			L 23 15
-		"
-		fill="none"
-		stroke="#C1CDD9"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/assets/icon/buttons/center-hover.svg

@@ -1,10 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="#F5F5F5"/>
-<circle cx="24" cy="24" r="7" stroke="#33363F" stroke-width="2"/>
-<circle cx="24" cy="24" r="2" fill="#33363F" stroke="#33363F" stroke-width="2"/>
-<path d="M24 17V13" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
-<path d="M31 24L35 24" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
-<path d="M24 35L24 31" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
-<path d="M13 24H17" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
-<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#E5E5E5"/>
-</svg>