ngx-vflow 1.4.0 → 1.4.2

package/fesm2022/ngx-vflow.mjs

@@ -2243,10 +2243,9 @@ class ResizableComponent {
     resize(event) {
         if (!this.resizeSide)
             return;
-        if (this.isResizeConstrained(event))
-            return;
         const offset = calcOffset(event.movementX, event.movementY, this.zoom());
-        const { x, y, width, height } = constrainRect(applyResize(this.resizeSide, this.model, offset), this.model, this.resizeSide, this.minWidth, this.minHeight);
+        const resized = applyResize(this.resizeSide, this.model, offset, this.getDistanceToEdge(event));
+        const { x, y, width, height } = constrainRect(resized, this.model, this.resizeSide, this.minWidth, this.minHeight);
         this.model.setPoint({ x, y });
         this.model.width.set(width);
         this.model.height.set(height);
@@ -2255,41 +2254,15 @@ class ResizableComponent {
         this.resizeSide = null;
         this.model.resizing.set(false);
     }
-    isResizeConstrained({ x, y, movementX, movementY }) {
-        const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x, y });
-        if (this.resizeSide?.includes('right')) {
-            if (movementX > 0 && flowPoint.x < this.model.point().x + this.model.size().width) {
-                return true;
-            }
-            if (movementX < 0 && flowPoint.x > this.model.point().x + this.model.size().width) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('left')) {
-            if (movementX < 0 && flowPoint.x > this.model.point().x) {
-                return true;
-            }
-            if (movementX > 0 && flowPoint.x < this.model.point().x) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('bottom')) {
-            if (movementY > 0 && flowPoint.y < this.model.point().y + this.model.size().height) {
-                return true;
-            }
-            if (movementY < 0 && flowPoint.y > this.model.point().y + this.model.size().height) {
-                return true;
-            }
-        }
-        if (this.resizeSide?.includes('top')) {
-            if (movementY < 0 && flowPoint.y > this.model.point().y) {
-                return true;
-            }
-            if (movementY > 0 && flowPoint.y < this.model.point().y) {
-                return true;
-            }
-        }
-        return false;
+    getDistanceToEdge(event) {
+        const flowPoint = this.spacePointContext.documentPointToFlowPoint({ x: event.x, y: event.y });
+        const { x, y } = this.model.globalPoint();
+        return {
+            left: flowPoint.x - x,
+            right: flowPoint.x - (x + this.model.width()),
+            top: flowPoint.y - y,
+            bottom: flowPoint.y - (y + this.model.height()),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: ResizableComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top', $event)\" />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      stroke-width=\"2\"\n      [attr.x1]=\"-gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('left', $event)\" />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\n      stroke-width=\"2\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"model.size().height + gap()\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"model.size().height + gap()\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom', $event)\" />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\n      stroke-width=\"2\"\n      [attr.x1]=\"model.size().width + gap()\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"model.size().width + gap()\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor()\"\n      (pointerStart)=\"startResize('right', $event)\" />\n\n    <!-- Top Left -->\n    <svg:rect\n      class=\"top-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-left', $event)\" />\n\n    <!-- Top right -->\n    <svg:rect\n      class=\"top-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"-(handleSize / 2) - gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('top-right', $event)\" />\n\n    <!-- Bottom left -->\n    <svg:rect\n      class=\"bottom-left\"\n      [attr.x]=\"-(handleSize / 2) - gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-left', $event)\" />\n\n    <!-- Bottom right -->\n    <svg:rect\n      class=\"bottom-right\"\n      [attr.x]=\"model.size().width - handleSize / 2 + gap()\"\n      [attr.y]=\"model.size().height - handleSize / 2 + gap()\"\n      [attr.width]=\"handleSize\"\n      [attr.height]=\"handleSize\"\n      [attr.fill]=\"resizerColor()\"\n      (pointerStart)=\"startResize('bottom-right', $event)\" />\n  </svg:g>\n</ng-template>\n\n<ng-content />\n", styles: [".top{cursor:n-resize}.left{cursor:w-resize}.right{cursor:e-resize}.bottom{cursor:s-resize}.top-left{cursor:nw-resize}.top-right{cursor:ne-resize}.bottom-left{cursor:sw-resize}.bottom-right{cursor:se-resize}\n"], dependencies: [{ kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2307,43 +2280,44 @@ function calcOffset(movementX, movementY, zoom) {
         offsetY: round(movementY / zoom),
     };
 }
-function applyResize(side, model, offset) {
+function applyResize(side, model, offset, distanceToEdge) {
     const { offsetX, offsetY } = offset;
     const { x, y } = model.point();
-    const { width, height } = model.size();
+    const width = model.width();
+    const height = model.height();
     // Handle each case of resizing (top, bottom, left, right, corners)
     switch (side) {
         case 'left':
-            return { x: x + offsetX, y, width: width - offsetX, height };
+            return { x: x + offsetX + distanceToEdge.left, y, width: width - offsetX - distanceToEdge.left, height };
         case 'right':
-            return { x, y, width: width + offsetX, height };
+            return { x, y, width: width + offsetX + distanceToEdge.right, height };
         case 'top':
-            return { x, y: y + offsetY, width, height: height - offsetY };
+            return { x, y: y + offsetY + distanceToEdge.top, width, height: height - offsetY - distanceToEdge.top };
         case 'bottom':
-            return { x, y, width, height: height + offsetY };
+            return { x, y, width, height: height + offsetY + distanceToEdge.bottom };
         case 'top-left':
             return {
-                x: x + offsetX,
-                y: y + offsetY,
-                width: width - offsetX,
-                height: height - offsetY,
+                x: x + offsetX + distanceToEdge.left,
+                y: y + offsetY + distanceToEdge.top,
+                width: width - offsetX - distanceToEdge.left,
+                height: height - offsetY - distanceToEdge.top,
             };
         case 'top-right':
             return {
                 x,
-                y: y + offsetY,
-                width: width + offsetX,
-                height: height - offsetY,
+                y: y + offsetY + distanceToEdge.top,
+                width: width + offsetX + distanceToEdge.right,
+                height: height - offsetY - distanceToEdge.top,
             };
         case 'bottom-left':
             return {
-                x: x + offsetX,
+                x: x + offsetX + distanceToEdge.left,
                 y,
-                width: width - offsetX,
-                height: height + offsetY,
+                width: width - offsetX - distanceToEdge.left,
+                height: height + offsetY + distanceToEdge.bottom,
             };
         case 'bottom-right':
-            return { x, y, width: width + offsetX, height: height + offsetY };
+            return { x, y, width: width + offsetX + distanceToEdge.right, height: height + offsetY + distanceToEdge.bottom };
     }
 }
 function constrainRect(rect, model, side, minWidth, minHeight) {
@@ -2355,27 +2329,33 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
     width = Math.max(minWidth, width);
     height = Math.max(minHeight, height);
     // Apply left/top constraints based on minimum size
-    x = Math.min(x, model.point().x + model.size().width - minWidth);
-    y = Math.min(y, model.point().y + model.size().height - minHeight);
+    x = Math.min(x, model.point().x + model.width() - minWidth);
+    y = Math.min(y, model.point().y + model.height() - minHeight);
     const parent = model.parent();
     // 3. Apply maximum size constraints based on parent size (if exists)
     if (parent) {
-        x = Math.max(x, 0); // Left boundary of the parent
-        y = Math.max(y, 0); // Top boundary of the parent
-        if (x === 0) {
-            width = model.point().x + model.size().width;
+        const parentWidth = parent.width();
+        const parentHeight = parent.height();
+        const modelX = model.point().x;
+        const modelY = model.point().y;
+        x = Math.max(x, 0);
+        y = Math.max(y, 0);
+        // Stop resizing when hitting left or top boundary
+        if (side.includes('left') && x === 0) {
+            width = Math.min(width, modelX + model.width());
         }
-        if (y === 0) {
-            height = model.point().y + model.size().height;
+        if (side.includes('top') && y === 0) {
+            height = Math.min(height, modelY + model.height());
         }
-        width = Math.min(width, parent.size().width - model.point().x);
-        height = Math.min(height, parent.size().height - model.point().y);
+        // Allow right/bottom resizing without being blocked
+        width = Math.min(width, parentWidth - x);
+        height = Math.min(height, parentHeight - y);
     }
     const bounds = getNodesBounds(model.children());
     // 4. Apply child node constraints (if children exist)
     if (bounds) {
         if (side.includes('left')) {
-            x = Math.min(x, model.point().x + model.size().width - (bounds.x + bounds.width));
+            x = Math.min(x, model.point().x + model.width() - (bounds.x + bounds.width));
             width = Math.max(width, bounds.x + bounds.width);
         }
         if (side.includes('right')) {
@@ -2385,7 +2365,7 @@ function constrainRect(rect, model, side, minWidth, minHeight) {
             height = Math.max(height, bounds.y + bounds.height);
         }
         if (side.includes('top')) {
-            y = Math.min(y, model.point().y + model.size().height - (bounds.y + bounds.height));
+            y = Math.min(y, model.point().y + model.height() - (bounds.y + bounds.height));
             height = Math.max(height, bounds.y + bounds.height);
         }
     }
@@ -2490,23 +2470,6 @@ class HandleModel {
     }
 }
 
-function InjectionContext(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        if (implementsWithInjector(this)) {
-            return runInInjectionContext(this.injector, () => originalMethod.apply(this, args));
-        }
-        else {
-            throw new Error('Class that contains decorated method must extends WithInjectorDirective class');
-        }
-    };
-    // Return the modified descriptor
-    return descriptor;
-}
-const implementsWithInjector = (instance) => {
-    return 'injector' in instance && 'get' in instance.injector;
-};
-
 class HandleComponent {
     constructor() {
         this.injector = inject(Injector);
@@ -2528,30 +2491,29 @@ class HandleComponent {
         this.template = input();
     }
     ngOnInit() {
-        const node = this.handleService.node();
-        if (node) {
-            this.model = new HandleModel({
-                position: this.position(),
-                type: this.type(),
-                id: this.id(),
-                hostReference: this.element.parentElement,
-                template: this.template(),
-            }, node);
-            this.handleService.createHandle(this.model);
-            requestAnimationFrame(() => this.model.updateHost());
-            this.destroyRef.onDestroy(() => this.handleService.destroyHandle(this.model));
-        }
+        runInInjectionContext(this.injector, () => {
+            const node = this.handleService.node();
+            if (node) {
+                const model = new HandleModel({
+                    position: this.position(),
+                    type: this.type(),
+                    id: this.id(),
+                    hostReference: this.element.parentElement,
+                    template: this.template(),
+                }, node);
+                this.handleService.createHandle(model);
+                requestAnimationFrame(() => model.updateHost());
+                this.destroyRef.onDestroy(() => this.handleService.destroyHandle(model));
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    InjectionContext
-], HandleComponent.prototype, "ngOnInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
-        }], propDecorators: { ngOnInit: [] } });
+        }] });
 
 class NodeHandlesControllerDirective {
     constructor() {
@@ -3776,20 +3738,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class VflowMockComponent {
     constructor() {
-        this.nodes = input.required();
-        this.edges = input.required();
-        this.view = input([400, 400]);
-        this.minZoom = input(0.5);
-        this.maxZoom = input(3);
-        this.background = input('#fff');
+        this.view = [400, 400];
+        this.minZoom = 0.5;
+        this.maxZoom = 3;
+        this.background = '#fff';
         this.optimization = input({
             detachedGroupsLayer: false,
         });
-        this.entitiesSelectable = input(true);
-        this.keyboardShortcuts = input({
+        this.entitiesSelectable = true;
+        this.keyboardShortcuts = {
             multiSelection: null,
-        });
-        this.connection = input();
+        };
+        this.connection = new ConnectionModel({});
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onComponentNodeEvent = output();
         this.nodeTemplateDirective = contentChild(NodeHtmlTemplateMockDirective);
@@ -3808,6 +3768,8 @@ class VflowMockComponent {
         this.nodesChange$ = toObservable(this.nodesChange);
         this.edgesChange$ = toObservable(this.edgesChange);
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
     viewportTo(viewport) {
         this.viewport.set(viewport);
     }
@@ -3822,9 +3784,8 @@ class VflowMockComponent {
     documentPointToFlowPoint(point) {
         return point;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getNode(id) {
-        return this.nodes().find((node) => node.id === id);
+        return this.nodes.find((node) => node.id === id);
     }
     getDetachedEdges() {
         return [];
@@ -3833,10 +3794,10 @@ class VflowMockComponent {
         return signal(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VflowMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: true, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: true, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: VflowMockComponent, isStandalone: true, selector: "vflow", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: false, isRequired: true, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: false, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: false, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: false, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: false, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: false, isRequired: false, transformFunction: null }, optimization: { classPropertyName: "optimization", publicName: "optimization", isSignal: true, isRequired: false, transformFunction: null }, entitiesSelectable: { classPropertyName: "entitiesSelectable", publicName: "entitiesSelectable", isSignal: false, isRequired: false, transformFunction: null }, keyboardShortcuts: { classPropertyName: "keyboardShortcuts", publicName: "keyboardShortcuts", isSignal: false, isRequired: false, transformFunction: null }, connection: { classPropertyName: "connection", publicName: "connection", isSignal: false, isRequired: false, transformFunction: (settings) => new ConnectionModel(settings) }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: false, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateMockDirective, descendants: true, isSignal: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateMockDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-content />
 
-    @for (node of nodes(); track $index) {
+    @for (node of nodes; track $index) {
       @if (node.type === 'html-template') {
         <ng-component
           [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
@@ -3862,7 +3823,7 @@ class VflowMockComponent {
       }
     }
 
-    @for (edge of edges(); track $index) {
+    @for (edge of edges; track $index) {
       @if (edge.type === 'template') {
         <ng-component
           [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
@@ -3910,7 +3871,7 @@ class VflowMockComponent {
       }
     }
 
-    @if (connection()?.type === 'template') {
+    @if (connection.type === 'template') {
       <ng-component
         [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
         [ngTemplateOutletContext]="{
@@ -3929,7 +3890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <ng-content />
 
-    @for (node of nodes(); track $index) {
+    @for (node of nodes; track $index) {
       @if (node.type === 'html-template') {
         <ng-component
           [ngTemplateOutlet]="nodeTemplateDirective()?.templateRef ?? null"
@@ -3955,7 +3916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       }
     }
 
-    @for (edge of edges(); track $index) {
+    @for (edge of edges; track $index) {
       @if (edge.type === 'template') {
         <ng-component
           [ngTemplateOutlet]="edgeTemplateDirective()?.templateRef ?? null"
@@ -4003,7 +3964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       }
     }
 
-    @if (connection()?.type === 'template') {
+    @if (connection.type === 'template') {
       <ng-component
         [ngTemplateOutlet]="connectionTemplateDirective()?.templateRef ?? null"
         [ngTemplateOutletContext]="{
@@ -4018,7 +3979,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     standalone: true,
                     imports: [NgTemplateOutlet],
                 }]
-        }] });
+        }], propDecorators: { nodes: [{
+                type: Input,
+                args: [{ required: true }]
+            }], edges: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], minZoom: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], entitiesSelectable: [{
+                type: Input
+            }], keyboardShortcuts: [{
+                type: Input
+            }], connection: [{
+                type: Input,
+                args: [{
+                        transform: (settings) => new ConnectionModel(settings),
+                    }]
+            }], snapGrid: [{
+                type: Input
+            }], elevateNodesOnSelect: [{
+                type: Input
+            }] } });
 
 class HandleMockComponent {
     constructor() {
@@ -4027,6 +4014,8 @@ class HandleMockComponent {
         this.id = input();
         this.template = input();
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HandleMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: HandleMockComponent, isStandalone: true, selector: "handle", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4046,6 +4035,10 @@ class ResizableMockComponent {
         this.resizerColor = input('#2e414c');
         this.gap = input(1.5);
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngAfterViewInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizableMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ResizableMockComponent, isStandalone: true, selector: "[resizable]", inputs: { resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizerColor: { classPropertyName: "resizerColor", publicName: "resizerColor", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4066,6 +4059,8 @@ class MiniMapMockComponent {
         this.position = input('bottom-right');
         this.scaleOnHover = input(false);
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniMapMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: MiniMapMockComponent, isStandalone: true, selector: "mini-map", inputs: { maskColor: { classPropertyName: "maskColor", publicName: "maskColor", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4083,6 +4078,10 @@ class NodeToolbarMockComponent {
     constructor() {
         this.position = input('top');
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnInit() { }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NodeToolbarMockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: NodeToolbarMockComponent, isStandalone: true, selector: "node-toolbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4101,6 +4100,14 @@ class ConnectionControllerMockDirective {
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onConnect = output();
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    startConnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    validateConnection(handle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    resetValidateConnection(targetHandle) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    endConnection() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConnectionControllerMockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ConnectionControllerMockDirective, isStandalone: true, selector: "[onConnect]", outputs: { onConnect: "onConnect" }, ngImport: i0 }); }
 }