@metadev/daga-angular 3.0.0 → 3.1.1

package/index.d.ts

@@ -1,8 +1,7 @@
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, ButtonsComponentConfig, Canvas, ClosedShape, CollabAction, CollabActionSerialized, CollabClient, CollabTimestamp, CollabTimestampSet, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, Corner, DagaExporter, DagaImporter, DagaModel, DiagramAction, DiagramActions, DiagramButtons, DiagramCanvas, DiagramConfig, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramEditor, DiagramElement, DiagramElementSet, DiagramEntity, DiagramEntitySet, DiagramError, DiagramEvent, DiagramField, DiagramFieldSet, DiagramLayout, DiagramModel, DiagramModelExporter, DiagramModelImporter, DiagramNode, DiagramNodeGeometry, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionGeometry, DiagramSectionSet, DiagramValidator, EditFieldAction, ErrorsComponentConfig, FieldConfig, ForceLayout, HorizontalAlign, HorizontalLayout, Line, LineShape, LineStyle, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, Palette, PaletteComponentConfig, PaletteSectionConfig, Point, PortConfig, PriorityLayout, Property, PropertyEditor, PropertyEditorComponentConfig, PropertySet, Rectangle, RemoveAction, SectionConfig, SectionGridConfig, SetGeometryAction, Side, TreeLayout, Type, UpdateValuesAction, UserActionConfig, ValueSet, VerticalAlign, VerticalLayout, layouts } from '@metadev/daga';
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ButtonsComponentConfig, Canvas, ClosedShape, CollabAction, CollabActionSerialized, CollabClient, CollabTimestamp, CollabTimestampSet, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, Corner, DagaExporter, DagaImporter, DagaModel, DiagramAction, DiagramActionMethod, DiagramActions, DiagramButtons, DiagramCanvas, DiagramConfig, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramEditor, DiagramElement, DiagramElementSet, DiagramEntity, DiagramEntitySet, DiagramError, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramLayout, DiagramModel, DiagramModelExporter, DiagramModelImporter, DiagramNode, DiagramNodeGeometry, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionGeometry, DiagramSectionSet, DiagramValidator, EditFieldAction, ErrorsComponentConfig, FieldConfig, ForceLayout, getLocationsOfNodes, HorizontalAlign, HorizontalLayout, layouts, Line, LineShape, LineStyle, MoveAction, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, Palette, PaletteComponentConfig, PaletteSectionConfig, PasteAction, Point, PortConfig, PriorityLayout, Property, PropertyEditor, PropertyEditorComponentConfig, PropertySet, Rectangle, RemoveAction, SectionConfig, SectionGridConfig, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, UserActionConfig, ValueSet, VerticalAlign, VerticalLayout } from '@metadev/daga';
 export { CollapseButtonComponent } from './lib/collapse-button/collapse-button.component';
 export { DagaModule } from './lib/daga.module';
 export { DiagramButtonsComponent } from './lib/diagram-buttons/diagram-buttons.component';
-export { DiagramEditorComponent } from './lib/diagram-editor/diagram-editor.component';
 export { DiagramComponent } from './lib/diagram/diagram.component';
 export { ErrorsComponent } from './lib/errors/errors.component';
 export { PaletteComponent } from './lib/palette/palette.component';

package/lib/daga.module.d.ts

@@ -2,17 +2,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "./collapse-button/collapse-button.component";
 import * as i2 from "./diagram-buttons/diagram-buttons.component";
 import * as i3 from "./diagram/diagram.component";
-import * as i4 from "./diagram-editor/diagram-editor.component";
-import * as i5 from "./errors/errors.component";
-import * as i6 from "./property-editor/object-editor/object-editor.component";
-import * as i7 from "./palette/palette.component";
-import * as i8 from "./property-editor/text-list-editor/text-list-editor.component";
-import * as i9 from "./property-editor/text-map-editor/text-map-editor.component";
-import * as i10 from "./property-editor/property-editor.component";
-import * as i11 from "@angular/common";
-import * as i12 from "@angular/forms";
+import * as i4 from "./errors/errors.component";
+import * as i5 from "./property-editor/object-editor/object-editor.component";
+import * as i6 from "./palette/palette.component";
+import * as i7 from "./property-editor/text-list-editor/text-list-editor.component";
+import * as i8 from "./property-editor/text-map-editor/text-map-editor.component";
+import * as i9 from "./property-editor/property-editor.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@angular/forms";
 export declare class DagaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DagaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DagaModule, never, [typeof i1.CollapseButtonComponent, typeof i2.DiagramButtonsComponent, typeof i3.DiagramComponent, typeof i4.DiagramEditorComponent, typeof i5.ErrorsComponent, typeof i6.ObjectEditorComponent, typeof i7.PaletteComponent, typeof i8.TextListEditorComponent, typeof i9.TextMapEditorComponent, typeof i10.PropertyEditorComponent, typeof i11.CommonModule, typeof i12.FormsModule], [typeof i3.DiagramComponent, typeof i4.DiagramEditorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DagaModule, never, [typeof i1.CollapseButtonComponent, typeof i2.DiagramButtonsComponent, typeof i3.DiagramComponent, typeof i4.ErrorsComponent, typeof i5.ObjectEditorComponent, typeof i6.PaletteComponent, typeof i7.TextListEditorComponent, typeof i8.TextMapEditorComponent, typeof i9.PropertyEditorComponent, typeof i10.CommonModule, typeof i11.FormsModule], [typeof i3.DiagramComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DagaModule>;
 }

package/lib/diagram/diagram.component.d.ts

@@ -1,5 +1,8 @@
-import { AfterContentInit, AfterViewInit, EventEmitter, OnInit } from '@angular/core';
-import { DagaModel, DiagramConfig } from '@metadev/daga';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Canvas, Corner, DagaModel, DiagramConfig, DiagramEditor, DiagramEvent, Side } from '@metadev/daga';
+import { DiagramButtonsComponent } from '../diagram-buttons/diagram-buttons.component';
+import { PaletteComponent } from '../palette/palette.component';
+import { PropertyEditorComponent } from '../property-editor/property-editor.component';
 import { CanvasProviderService } from '../services/canvas-provider.service';
 import { DagaConfigurationService } from '../services/daga-configuration.service';
 import * as i0 from "@angular/core";
@@ -8,17 +11,33 @@ import * as i0 from "@angular/core";
  * This component defines a {@link DagaConfigurationService} and a {@link CanvasProviderService}, which is shared by all the components within and allows accessing the configuration and the canvas of this component's diagram, respectively.
  * @public
  */
-export declare class DiagramComponent implements AfterContentInit, AfterViewInit, OnInit {
+export declare class DiagramComponent implements DiagramEditor, OnInit, AfterViewInit, OnDestroy {
     private configurationService;
     private canvasProvider;
-    /**
-     * Configuration for the diagram.
-     * @public
-     */
-    config: DiagramConfig;
+    private cdr;
+    appendTo: ElementRef<HTMLDivElement>;
+    diagramButtons: DiagramButtonsComponent;
+    palette: PaletteComponent;
+    propertyEditor: PropertyEditorComponent;
     private importer;
     private exporter;
     private _model;
+    private _config;
+    /**
+     * Getter for the configuration of this diagram.
+     * @public
+     */
+    get config(): DiagramConfig;
+    /**
+     * Setter for the configuration for the diagram.
+     * @public
+     */
+    set config(config: DiagramConfig);
+    /**
+     * Getter for the canvas of this diagram.
+     * @public
+     */
+    get canvas(): Canvas;
     /**
      * Serialized model for the diagram. Used for data binding to the model.
      * @public
@@ -34,10 +53,20 @@ export declare class DiagramComponent implements AfterContentInit, AfterViewInit
      * @public
      */
     modelChange: EventEmitter<DagaModel>;
-    constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService);
+    /**
+     * Output for user events on the diagram.
+     * @public
+     */
+    diagramEvent: EventEmitter<DiagramEvent>;
+    private configurationSub?;
+    private canvasSub?;
+    Corner: typeof Corner;
+    Side: typeof Side;
+    constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
-    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setUpCanvas;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "daga-diagram", never, { "config": { "alias": "config"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "modelChange": "modelChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "daga-diagram", never, { "config": { "alias": "config"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "modelChange": "modelChange"; "diagramEvent": "diagramEvent"; }, never, ["*"], true, never>;
 }

package/lib/diagram-buttons/diagram-buttons.component.d.ts

@@ -1,13 +1,15 @@
-import { AfterViewInit, ElementRef } from '@angular/core';
-import { Canvas, Corner, DiagramActions, DiagramButtons, Side } from '@metadev/daga';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Canvas, Corner, DiagramActions, DiagramButtons, DiagramConfig, Side } from '@metadev/daga';
 import { CanvasProviderService } from '../services/canvas-provider.service';
+import { DagaConfigurationService } from '../services/daga-configuration.service';
 import * as i0 from "@angular/core";
 /**
  * Buttons used to trigger diagram functionalities by the user.
  * @private
  */
-export declare class DiagramButtonsComponent implements AfterViewInit, DiagramButtons {
+export declare class DiagramButtonsComponent implements DiagramButtons, OnInit, AfterViewInit, OnDestroy {
     private canvasProvider;
+    private configService;
     get canvas(): Canvas;
     collapsableButtons: ElementRef<HTMLDivElement>;
     location: Corner;
@@ -25,9 +27,14 @@ export declare class DiagramButtonsComponent implements AfterViewInit, DiagramBu
     private transformOrigin;
     private marginSide;
     private collapsableButtonsSize;
+    private sub?;
     DiagramActions: typeof DiagramActions;
-    constructor(canvasProvider: CanvasProviderService);
+    constructor(canvasProvider: CanvasProviderService, configService: DagaConfigurationService);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    init(config: DiagramConfig): void;
+    recalculateSizeOfButtons(): void;
     toggleCollapse(): Promise<void>;
     zoomIn(): void;
     zoomOut(): void;

package/lib/errors/errors.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { Canvas, DiagramError, Side } from '@metadev/daga';
 import * as d3 from 'd3';
 import { CanvasProviderService } from '../services/canvas-provider.service';
@@ -8,15 +8,20 @@ import * as i0 from "@angular/core";
  * @private
  * @see DiagramValidator
  */
-export declare class ErrorsComponent implements AfterViewInit {
+export declare class ErrorsComponent implements AfterViewInit, OnDestroy {
     private canvasProvider;
+    private cdf;
     get canvas(): Canvas;
     errorsContainer: ElementRef<HTMLDivElement>;
     errors: DiagramError[];
+    private canvasSub?;
+    private validationSub?;
     Side: typeof Side;
-    constructor(canvasProvider: CanvasProviderService);
+    constructor(canvasProvider: CanvasProviderService, cdf: ChangeDetectorRef);
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     selectPanel(): d3.Selection<d3.BaseType, unknown, null, unknown>;
+    private updateCanvas;
     validate(): void;
     showError(error: DiagramError): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ErrorsComponent, never>;

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

@@ -1,7 +1,8 @@
-import { AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
-import { Canvas, Corner, Palette, PaletteSectionConfig, Side } from '@metadev/daga';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Canvas, Corner, DiagramConfig, Palette, PaletteSectionConfig, Side } from '@metadev/daga';
 import * as d3 from 'd3';
 import { CanvasProviderService } from '../services/canvas-provider.service';
+import { DagaConfigurationService } from '../services/daga-configuration.service';
 import * as i0 from "@angular/core";
 /**
  * Palette that the user can drag and drop nodes from.
@@ -9,8 +10,9 @@ import * as i0 from "@angular/core";
  * @see DiagramConfig
  * @see DiagramNode
  */
-export declare class PaletteComponent implements AfterContentInit, AfterViewInit, Palette {
+export declare class PaletteComponent implements Palette, OnInit, AfterViewInit, OnDestroy {
     private canvasProvider;
+    private configService;
     get canvas(): Canvas;
     panel: ElementRef<HTMLDivElement>;
     palettes: PaletteSectionConfig[];
@@ -21,9 +23,12 @@ export declare class PaletteComponent implements AfterContentInit, AfterViewInit
     width: string;
     gap: string;
     private priorityThreshold?;
-    constructor(canvasProvider: CanvasProviderService);
-    ngAfterContentInit(): void;
+    private sub?;
+    constructor(canvasProvider: CanvasProviderService, configService: DagaConfigurationService);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    init(config: DiagramConfig): void;
     refreshPalette(): void;
     switchPalette(palette: PaletteSectionConfig): void;
     selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;

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

@@ -1,8 +1,7 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
-import { Corner, Side } from '@metadev/daga';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Corner, DiagramConfig, PropertyEditor, Side, ValueSet } from '@metadev/daga';
 import * as d3 from 'd3';
-import { ValueSet } from '@metadev/daga';
-import { PropertyEditor } from '@metadev/daga';
+import { DagaConfigurationService } from '../services/daga-configuration.service';
 import * as i0 from "@angular/core";
 /**
  * Duration of the highlight property animation in milliseconds.
@@ -13,8 +12,9 @@ export declare const HIGHLIGHT_ANIMATION_DURATION_MS = 1000;
  * @private
  * @see ValueSet
  */
-export declare class PropertyEditorComponent implements AfterViewInit, PropertyEditor {
+export declare class PropertyEditorComponent implements PropertyEditor, OnInit, AfterViewInit, OnDestroy {
     private cdr;
+    private configService;
     panel: ElementRef<HTMLDivElement>;
     location: Corner;
     direction: Side;
@@ -24,11 +24,16 @@ export declare class PropertyEditorComponent implements AfterViewInit, PropertyE
     get valueSet(): ValueSet | undefined;
     set valueSet(valueSet: ValueSet | undefined);
     settings?: boolean;
-    constructor(cdr: ChangeDetectorRef);
+    private sub?;
+    constructor(cdr: ChangeDetectorRef, configService: DagaConfigurationService);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    init(config: DiagramConfig): void;
+    setPanelWidth(): 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; }; "direction": { "alias": "direction"; "required": false; }; "width": { "alias": "width"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
 }
 export declare const getStyleClassName: (s: string) => string;

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

@@ -6,23 +6,35 @@ import * as i0 from "@angular/core";
  */
 export declare class CanvasProviderService {
     private _canvas;
+    private canvasSubject$;
     /**
-     * Initialize the diagram canvas object of this context.
+     * Subject used to track when the canvas has been updated.
+     * @public
+     */
+    canvas$: import("rxjs").Observable<Canvas>;
+    private viewInitializedSubject$;
+    /**
+     * Subject used to track when the view of the canvas has been updated after updating the canvas.
+     * @public
+     */
+    viewInitialized$: import("rxjs").Observable<Canvas>;
+    /**
+     * Initialize the diagram canvas object of this context using the given diagram configuration.
      * @private
      * @param parentComponent A diagram editor.
      * @param config A diagram configuration.
      */
     initCanvas(parentComponent: DiagramEditor, config: DiagramConfig): void;
     /**
-     * Attach the canvas of this context to an HTML Element to render it there.
+     * Attach the canvas of this context to an HTML element to render it there.
      * @private
-     * @param appendTo An HTML Element.
+     * @param appendTo An HTML element.
      */
     initCanvasView(appendTo: HTMLElement): void;
     /**
-     * Get the diagram canvas of this context. Should only be called after the view of the {@link DiagramComponent} context has been initialized.
+     * Get the current canvas of this context.
      * @public
-     * @returns A diagram canvas.
+     * @returns A canvas.
      */
     getCanvas(): Canvas;
     static ɵfac: i0.ɵɵFactoryDeclaration<CanvasProviderService, never>;

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

@@ -1,4 +1,5 @@
 import { DiagramConfig } from '@metadev/daga';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
@@ -6,6 +7,12 @@ import * as i0 from "@angular/core";
  */
 export declare class DagaConfigurationService {
     private _config;
+    private configSubject$;
+    /**
+     * Subject used to track when the diagram configuration has been updated.
+     * @public
+     */
+    config$: Observable<DiagramConfig>;
     /**
      * Set the diagram configuration of this context.
      * @private
@@ -13,7 +20,7 @@ export declare class DagaConfigurationService {
      */
     init(config: DiagramConfig): void;
     /**
-     * Get the diagram configuration of this context. Should only be called after the {@link DiagramComponent} context has been initialized.
+     * Get the current diagram configuration of this context.
      * @public
      * @returns A diagram configuration.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga-angular",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",
@@ -21,7 +21,7 @@
     "@angular/common": "^19.0.5",
     "@angular/core": "^19.0.5",
     "@angular/forms": "^19.0.5",
-    "@metadev/daga": "^3.0.0",
+    "@metadev/daga": "^3.1.1",
     "d3": "^7.9.0",
     "rxjs": "~7.8.1"
   },

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

@@ -1,34 +0,0 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnInit } from '@angular/core';
-import { Canvas, Corner, DiagramConfig, DiagramEditor, DiagramEvent, Side } from '@metadev/daga';
-import { DiagramButtonsComponent } from '../diagram-buttons/diagram-buttons.component';
-import { PaletteComponent } from '../palette/palette.component';
-import { PropertyEditorComponent } from '../property-editor/property-editor.component';
-import { CanvasProviderService } from '../services/canvas-provider.service';
-import { DagaConfigurationService } from '../services/daga-configuration.service';
-import * as i0 from "@angular/core";
-/**
- * A diagram's user interface editor.
- * @private
- */
-export declare class DiagramEditorComponent implements AfterViewInit, DiagramEditor, OnInit {
-    private configurationService;
-    private canvasProvider;
-    appendTo: ElementRef<HTMLDivElement>;
-    diagramButtons: DiagramButtonsComponent;
-    palette: PaletteComponent;
-    propertyEditor: PropertyEditorComponent;
-    /**
-     * Output for user events on the diagram's model.
-     * @public
-     */
-    modelEvent: EventEmitter<DiagramEvent>;
-    get config(): DiagramConfig;
-    get canvas(): Canvas;
-    Corner: typeof Corner;
-    Side: typeof Side;
-    constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DiagramEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramEditorComponent, "daga-diagram-editor", never, {}, { "modelEvent": "modelEvent"; }, never, never, true, never>;
-}