@metadev/daga-angular 3.0.0 → 3.1.0

package/Changelog.md

@@ -4,7 +4,21 @@ List of releases and changes.
 
 ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
 
-## Next release Excalibur
+## Next release Joyeuse
+
+## v. 3.1.0 Excalibur
+
+Date: _2025-01-21_
+
+- Add node continence [#200](https://github.com/metadevpro/daga/pull/200)
+- Enable defining custom shape functions for nodes in the configuration [#206](https://github.com/metadevpro/daga/pull/206)
+- Fix order of diagram elements [#208](https://github.com/metadevpro/daga/pull/208)
+- Simplify usage of `<daga-diagram>` tag in angular by removing the need to include a `<daga-diagram-editor>` inside [#210](https://github.com/metadevpro/daga/pull/210)
+- Distinguish between diagram actions (which affect the model) and diagram events (which don't affect the model) [#210](https://github.com/metadevpro/daga/pull/210)
+- Add layout action so layouts applied by the user can be undone and redone (which don't affect the model) [#210](https://github.com/metadevpro/daga/pull/210)
+- Add diagram events for the selection and highlight of diagram elements [#212](https://github.com/metadevpro/daga/pull/212) [#214](https://github.com/metadevpro/daga/pull/214)
+- Enable customizing the look of nodes in the palette [#216](https://github.com/metadevpro/daga/pull/216)
+- Enable adding custom line shapes [#217](https://github.com/metadevpro/daga/pull/217)
 
 ## v. 3.0.0 Curtana
 

package/README.md

@@ -14,7 +14,17 @@ Made and comercial suport by [Metadev](https://metadev.pro).
 
 ## Requirements
 
-- Angular 18
+- Angular
+
+### Compatibility Matrix
+
+Please ensure you use a compatible Angular version with Daga version.
+
+|Daga Version |Angular Version |
+|---------:|-----:|
+|3.x       | 19.x |
+|1.5 - 2.x | 18.x |
+|1.x - 1.4 | 17.x |
 
 ## Build Daga
 

package/fesm2022/metadev-daga-angular.mjs

@@ -1,5 +1,5 @@
-import { Side, DiagramCanvas, DiagramActions, layouts, Events, setCursorStyle, CursorStyle, DragEvents, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, Corner, DagaImporter, DagaExporter } from '@metadev/daga';
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts } from '@metadev/daga';
+import { Side, DiagramCanvas, DiagramActions, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, Corner, DagaImporter, DagaExporter } from '@metadev/daga';
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, getLocationsOfNodes, layouts } from '@metadev/daga';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -254,7 +254,11 @@ class DiagramButtonsComponent {
     }
     layout() {
         if (this.canvas.layoutFormat && this.canvas.layoutFormat in layouts) {
+            const from = getLocationsOfNodes(this.canvas.model);
             layouts[this.canvas.layoutFormat].apply(this.canvas.model);
+            const to = getLocationsOfNodes(this.canvas.model);
+            const action = new ApplyLayoutAction(this.canvas, from, to);
+            this.canvas.actionStack.add(action);
         }
     }
     filter() {
@@ -600,8 +604,21 @@ class PaletteComponent {
                 if (this.canvas.snapToGrid) {
                     newNodeCoords = this.canvas.getClosestGridPoint(newNodeCoords);
                 }
-                const addNodeAction = new AddNodeAction(this.canvas, type, newNodeCoords, templateConfig.label, templateConfig.values);
+                // check whether we dropped this node on a potential parent
+                const nodesAtLocation = this.canvas.model.nodes.getAtCoordinates(pointerCoords[0], pointerCoords[1]);
+                // filter by which nodes can have this type as a child
+                const nodesAtLocationWhichCanHaveNodeAsAChild = nodesAtLocation.filter((n) => n.type.childrenTypes.includes(type.id));
+                // filter by which nodes don't have descendants in this collection
+                const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
+                const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
+                if (!type.canBeParentless && droppedOn === undefined) {
+                    // can't place, node must have a parent and no suitable parent has been found
+                    return;
+                }
+                const ancestor = droppedOn?.getLastAncestor();
+                const addNodeAction = new AddNodeAction(this.canvas, type, newNodeCoords, droppedOn?.id, ancestor?.id, ancestor?.getGeometry(), undefined, templateConfig.label, templateConfig.values);
                 addNodeAction.do();
+                addNodeAction.toAncestorGeometry = ancestor?.getGeometry();
                 this.canvas.actionStack.add(addNodeAction);
                 // reset cursor
                 setCursorStyle();
@@ -614,13 +631,14 @@ class PaletteComponent {
             .style('top', 0)
             .style('width', '100%')
             .style('height', '100%');
-        switch (type.look.lookType) {
+        const nodeLook = templateConfig.look || type.look;
+        switch (nodeLook.lookType) {
             case 'shaped-look':
                 thisComponent
                     .append('path')
-                    .attr('d', generalClosedPath(type.look.shape, 0, 0, type.defaultWidth, type.defaultHeight))
-                    .attr('fill', type.look.fillColor)
-                    .attr('stroke', type.look.borderColor)
+                    .attr('d', generalClosedPath(nodeLook.shape, 0, 0, type.defaultWidth, type.defaultHeight))
+                    .attr('fill', nodeLook.fillColor)
+                    .attr('stroke', nodeLook.borderColor)
                     .attr('stroke-width', '1px');
                 break;
             case 'image-look':
@@ -630,7 +648,7 @@ class PaletteComponent {
                     .attr('y', 0)
                     .attr('width', type.defaultWidth)
                     .attr('height', type.defaultHeight)
-                    .attr('href', type.look.backgroundImage)
+                    .attr('href', nodeLook.backgroundImage)
                     .attr('preserveAspectRatio', 'none');
                 break;
             case 'stretchable-image-look':
@@ -638,73 +656,73 @@ class PaletteComponent {
                     .append('image')
                     .attr('x', 0)
                     .attr('y', 0)
-                    .attr('width', type.look.leftMargin)
-                    .attr('height', type.look.topMargin)
-                    .attr('href', type.look.backgroundImageTopLeft)
+                    .attr('width', nodeLook.leftMargin)
+                    .attr('height', nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageTopLeft)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.look.leftMargin)
+                    .attr('x', nodeLook.leftMargin)
                     .attr('y', 0)
-                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
-                    .attr('height', type.look.topMargin)
-                    .attr('href', type.look.backgroundImageTop)
+                    .attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
+                    .attr('height', nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageTop)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.defaultWidth - type.look.rightMargin)
+                    .attr('x', type.defaultWidth - nodeLook.rightMargin)
                     .attr('y', 0)
-                    .attr('width', type.look.rightMargin)
-                    .attr('height', type.look.topMargin)
-                    .attr('href', type.look.backgroundImageTopRight)
+                    .attr('width', nodeLook.rightMargin)
+                    .attr('height', nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageTopRight)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
                     .attr('x', 0)
-                    .attr('y', type.look.topMargin)
-                    .attr('width', type.look.leftMargin)
-                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
-                    .attr('href', type.look.backgroundImageLeft)
+                    .attr('y', nodeLook.topMargin)
+                    .attr('width', nodeLook.leftMargin)
+                    .attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageLeft)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.look.leftMargin)
-                    .attr('y', type.look.topMargin)
-                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
-                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
-                    .attr('href', type.look.backgroundImageCenter)
+                    .attr('x', nodeLook.leftMargin)
+                    .attr('y', nodeLook.topMargin)
+                    .attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
+                    .attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageCenter)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.defaultWidth - type.look.rightMargin)
-                    .attr('y', type.look.topMargin)
-                    .attr('width', type.look.rightMargin)
-                    .attr('height', type.defaultHeight - type.look.bottomMargin - type.look.topMargin)
-                    .attr('href', type.look.backgroundImageRight)
+                    .attr('x', type.defaultWidth - nodeLook.rightMargin)
+                    .attr('y', nodeLook.topMargin)
+                    .attr('width', nodeLook.rightMargin)
+                    .attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
+                    .attr('href', nodeLook.backgroundImageRight)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
                     .attr('x', 0)
-                    .attr('y', type.defaultHeight - type.look.bottomMargin)
-                    .attr('width', type.look.leftMargin)
-                    .attr('height', type.look.bottomMargin)
-                    .attr('href', type.look.backgroundImageBottomLeft)
+                    .attr('y', type.defaultHeight - nodeLook.bottomMargin)
+                    .attr('width', nodeLook.leftMargin)
+                    .attr('height', nodeLook.bottomMargin)
+                    .attr('href', nodeLook.backgroundImageBottomLeft)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.look.leftMargin)
-                    .attr('y', type.defaultHeight - type.look.bottomMargin)
-                    .attr('width', type.defaultWidth - type.look.rightMargin - type.look.leftMargin)
-                    .attr('height', type.look.bottomMargin)
-                    .attr('href', type.look.backgroundImageBottom)
+                    .attr('x', nodeLook.leftMargin)
+                    .attr('y', type.defaultHeight - nodeLook.bottomMargin)
+                    .attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
+                    .attr('height', nodeLook.bottomMargin)
+                    .attr('href', nodeLook.backgroundImageBottom)
                     .attr('preserveAspectRatio', 'none');
                 thisComponent
                     .append('image')
-                    .attr('x', type.defaultWidth - type.look.rightMargin)
-                    .attr('y', type.defaultHeight - type.look.bottomMargin)
-                    .attr('width', type.look.rightMargin)
-                    .attr('height', type.look.bottomMargin)
-                    .attr('href', type.look.backgroundImageBottomRight)
+                    .attr('x', type.defaultWidth - nodeLook.rightMargin)
+                    .attr('y', type.defaultHeight - nodeLook.bottomMargin)
+                    .attr('width', nodeLook.rightMargin)
+                    .attr('height', nodeLook.bottomMargin)
+                    .attr('href', nodeLook.backgroundImageBottomRight)
                     .attr('preserveAspectRatio', 'none');
         }
         if (templateConfig.label) {
@@ -1554,8 +1572,6 @@ class ObjectEditorComponent {
         if (property.editable) {
             if (!equals(this.valueSet.getValue(property.name), value)) {
                 this.valueSet.setValue(property.name, value);
-                // register a diagram change when editing a value
-                this.canvas.diagramChange$?.next();
                 this.canvas.propertyEditorChanges$?.next();
             }
         }
@@ -1722,11 +1738,6 @@ class DiagramEditorComponent {
     constructor(configurationService, canvasProvider) {
         this.configurationService = configurationService;
         this.canvasProvider = canvasProvider;
-        /**
-         * Output for user events on the diagram's model.
-         * @public
-         */
-        this.modelEvent = new EventEmitter();
         this.Corner = Corner;
         this.Side = Side;
     }
@@ -1735,12 +1746,9 @@ class DiagramEditorComponent {
     }
     ngAfterViewInit() {
         this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
-        this.canvas.diagramEvent$.subscribe((e) => {
-            this.modelEvent.emit(e);
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", outputs: { modelEvent: "modelEvent" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"\r\n    config.components?.buttons !== undefined &&\r\n    config.components?.buttons?.enabled !== false\r\n  \"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n  [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette !== undefined &&\r\n    config.components?.palette?.enabled !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"\r\n    config.components?.propertyEditor !== undefined &&\r\n    config.components?.propertyEditor?.enabled !== false\r\n  \"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n  *ngIf=\"\r\n    config.components?.buttons !== undefined &&\r\n    config.components?.buttons?.enabled !== false\r\n  \"\r\n  #diagramButtons\r\n  [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n  [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n  [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n  [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n  [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n  [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n  [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n/>\r\n<daga-palette\r\n  *ngIf=\"\r\n    config.components?.palette !== undefined &&\r\n    config.components?.palette?.enabled !== false &&\r\n    config.components?.palette?.sections &&\r\n    (config.components?.palette?.sections?.length || 0) > 0\r\n  \"\r\n  #palette\r\n  [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n  [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.palette?.width || '12rem'\"\r\n  [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n  [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n  *ngIf=\"\r\n    config.components?.propertyEditor !== undefined &&\r\n    config.components?.propertyEditor?.enabled !== false\r\n  \"\r\n  #propertyEditor\r\n  [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n  [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n  [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n  *ngIf=\"\r\n    config.components?.errors !== undefined &&\r\n    config.components?.errors?.enabled !== false\r\n  \"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, decorators: [{
             type: Component,
@@ -1763,8 +1771,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], propertyEditor: [{
                 type: ViewChild,
                 args: ['propertyEditor']
-            }], modelEvent: [{
-                type: Output
             }] } });
 
 /**
@@ -1773,6 +1779,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @public
  */
 class DiagramComponent {
+    /**
+     * Getter for the canvas of this diagram.
+     * @public
+     */
+    get canvas() {
+        return this.canvasProvider.getCanvas();
+    }
     /**
      * Serialized model for the diagram. Used for data binding to the model.
      * @public
@@ -1787,9 +1800,9 @@ class DiagramComponent {
     set model(model) {
         if (this._model !== model) {
             this._model = model;
-            const canvas = this.canvasProvider.getCanvas();
+            const canvas = this.canvas;
             if (canvas) {
-                this.importer.import(this.canvasProvider.getCanvas().model, model);
+                this.importer.import(canvas.model, model);
             }
         }
     }
@@ -1803,44 +1816,52 @@ class DiagramComponent {
          * @public
          */
         this.modelChange = new EventEmitter();
+        /**
+         * Output for user events on the diagram.
+         * @public
+         */
+        this.diagramEvent = new EventEmitter();
     }
     ngOnInit() {
         this.configurationService.init(this.config);
     }
-    ngAfterContentInit() {
-        this.canvasProvider
-            .getCanvas()
-            .viewInitialized$.pipe(delay(1))
-            .subscribe(() => {
-            if (this.model) {
-                this.importer.import(this.canvasProvider.getCanvas().model, this.model);
-            }
-        });
-    }
     ngAfterViewInit() {
-        this.canvasProvider.getCanvas().diagramChange$.subscribe(() => {
-            const exportedModel = this.exporter.export(this.canvasProvider.getCanvas().model);
+        const canvas = this.canvas;
+        if (this.model) {
+            this.importer.import(canvas.model, this.model);
+        }
+        canvas.diagramEvent$.subscribe((e) => {
+            this.diagramEvent.emit(e);
+        });
+        canvas.diagramChange$.subscribe(() => {
+            const exportedModel = this.exporter.export(this.canvas.model);
             this._model = exportedModel;
             this.modelChange.emit(exportedModel);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, providers: [CanvasProviderService, DagaConfigurationService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], viewQueries: [{ propertyName: "editor", first: true, predicate: DiagramEditorComponent, descendants: true }], ngImport: i0, template: `<daga-diagram-editor /><ng-content />`, isInline: true, dependencies: [{ kind: "component", type: DiagramEditorComponent, selector: "daga-diagram-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: 'daga-diagram',
-                    template: `<ng-content />`,
-                    providers: [CanvasProviderService, DagaConfigurationService]
+                    template: `<daga-diagram-editor /><ng-content />`,
+                    providers: [CanvasProviderService, DagaConfigurationService],
+                    imports: [DiagramEditorComponent]
                 }]
-        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { editor: [{
+                type: ViewChild,
+                args: [DiagramEditorComponent]
+            }], config: [{
                 type: Input
             }], model: [{
                 type: Input
             }], modelChange: [{
                 type: Output
+            }], diagramEvent: [{
+                type: Output
             }] } });
 
 class DagaModule {
@@ -1859,6 +1880,7 @@ class DagaModule {
             FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
             DiagramButtonsComponent,
+            DiagramComponent,
             DiagramEditorComponent,
             ErrorsComponent,
             ObjectEditorComponent,