ngx-vflow 0.10.0 → 0.12.0

package/fesm2022/ngx-vflow.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, HostBinding, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Injector, Component, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, HostBinding, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { Subject, tap, merge, observeOn, animationFrameScheduler, switchMap, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, fromEvent, share, Observable, startWith } from 'rxjs';
@@ -420,10 +420,19 @@ class DraggableService {
             deltaY = model.point().y - event.y;
         })
             .on('drag', (event) => {
-            model.setPoint({
+            let point = {
                 x: round(event.x + deltaX),
                 y: round(event.y + deltaY)
-            });
+            };
+            const parent = model.parent();
+            // keep node in bounds of parent
+            if (parent) {
+                point.x = Math.min(parent.size().width - model.size().width, point.x);
+                point.x = Math.max(0, point.x);
+                point.y = Math.min(parent.size().height - model.size().height, point.y);
+                point.y = Math.max(0, point.y);
+            }
+            model.setPoint(point, true);
         });
     }
     /**
@@ -487,6 +496,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Directive,
             args: [{ selector: 'ng-template[nodeHtml]' }]
         }] });
+class GroupNodeTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupNodeTemplateDirective, selector: "ng-template[groupNode]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupNodeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[groupNode]' }]
+        }] });
 class HandleTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -811,24 +831,54 @@ function isDefaultStaticNode(node) {
 function isDefaultDynamicNode(node) {
     return node.type === 'default';
 }
+function isDefaultStaticGroupNode(node) {
+    return node.type === 'default-group';
+}
+function isDefaultDynamicGroupNode(node) {
+    return node.type === 'default-group';
+}
+function isTemplateStaticGroupNode(node) {
+    return node.type === 'template-group';
+}
+function isTemplateDynamicGroupNode(node) {
+    return node.type === 'template-group';
+}
 
+// TODO bad naming around points
 class NodeModel {
     static { this.defaultWidth = 100; }
     static { this.defaultHeight = 50; }
+    static { this.defaultColor = '#1b262c'; }
     constructor(node) {
         this.node = node;
         this.flowSettingsService = inject(FlowSettingsService);
+        this.entitiesService = inject(FlowEntitiesService);
         this.internalPoint = this.createInternalPointSignal();
         this.throttledPoint$ = toObservable(this.internalPoint).pipe(observeOn(animationFrameScheduler));
-        this.point = toSignal(this.throttledPoint$, {
+        this.notThrottledPoint$ = new Subject();
+        this.point = toSignal(merge(this.throttledPoint$, this.notThrottledPoint$), {
             initialValue: this.internalPoint()
         });
         this.point$ = this.throttledPoint$;
         this.size = signal({ width: 0, height: 0 });
+        this.size$ = toObservable(this.size);
+        this.width = computed(() => this.size().width);
+        this.height = computed(() => this.size().height);
         this.renderOrder = signal(0);
         this.selected = signal(false);
         this.selected$ = toObservable(this.selected);
-        this.pointTransform = computed(() => `translate(${this.point().x}, ${this.point().y})`);
+        this.globalPoint = computed(() => {
+            let parent = this.parent();
+            let x = this.point().x;
+            let y = this.point().y;
+            while (parent !== null) {
+                x += parent.point().x;
+                y += parent.point().y;
+                parent = parent.parent();
+            }
+            return { x, y };
+        });
+        this.pointTransform = computed(() => `translate(${this.globalPoint().x}, ${this.globalPoint().y})`);
         // Now source and handle positions derived from parent flow
         this.sourcePosition = computed(() => this.flowSettingsService.handlePositions().source);
         this.targetPosition = computed(() => this.flowSettingsService.handlePositions().target);
@@ -849,6 +899,13 @@ class NodeModel {
                 _selected: this.selected()
             };
         });
+        this.parent = computed(() => this.entitiesService.nodes().find(n => n.node.id === this.parentId()) ?? null);
+        this.children = computed(() => this.entitiesService.nodes().filter(n => n.parentId() === this.node.id));
+        this.color = signal(NodeModel.defaultColor);
+        this.resizable = signal(false);
+        this.resizing = signal(false);
+        this.resizerTemplate = signal(null);
+        this.parentId = signal(null);
         if (isDefined(node.draggable)) {
             if (isDynamicNode(node)) {
                 this.draggable = node.draggable;
@@ -857,29 +914,79 @@ class NodeModel {
                 this.draggable.set(node.draggable);
             }
         }
+        if (isDefined(node.parentId)) {
+            if (isDynamicNode(node)) {
+                this.parentId = node.parentId;
+            }
+            else {
+                this.parentId.set(node.parentId);
+            }
+        }
+        if (node.type === 'default-group' && node.color) {
+            if (isDynamicNode(node)) {
+                this.color = node.color;
+            }
+            else {
+                this.color.set(node.color);
+            }
+        }
+        if (node.type === 'default-group' && node.resizable) {
+            if (isDynamicNode(node)) {
+                this.resizable = node.resizable;
+            }
+            else {
+                this.resizable.set(node.resizable);
+            }
+        }
     }
-    setPoint(point) {
-        this.internalPoint.set(point);
+    setPoint(point, throttle) {
+        if (throttle) {
+            this.internalPoint.set(point);
+        }
+        else {
+            this.notThrottledPoint$.next(point);
+        }
     }
     /**
      * TODO find the way to implement this better
      */
     linkDefaultNodeSizeWithModelSize() {
         const node = this.node;
-        if (node.type === 'default') {
-            if (isDynamicNode(node)) {
-                effect(() => {
+        switch (node.type) {
+            case 'default':
+            case 'default-group':
+            case 'template-group': {
+                if (isDynamicNode(node)) {
+                    effect(() => {
+                        this.size.set({
+                            width: node.width?.() ?? NodeModel.defaultWidth,
+                            height: node.height?.() ?? NodeModel.defaultHeight,
+                        });
+                    }, { allowSignalWrites: true });
+                }
+                else {
                     this.size.set({
-                        width: node.width?.() ?? NodeModel.defaultWidth,
-                        height: node.height?.() ?? NodeModel.defaultHeight,
+                        width: node.width ?? NodeModel.defaultWidth,
+                        height: node.height ?? NodeModel.defaultHeight
                     });
+                }
+            }
+        }
+        if (node.type === 'html-template' || this.isComponentType) {
+            if (isDynamicNode(node)) {
+                effect(() => {
+                    if (node.width && node.height) {
+                        this.size.set({
+                            width: node.width(),
+                            height: node.height(),
+                        });
+                    }
                 }, { allowSignalWrites: true });
             }
             else {
-                this.size.set({
-                    width: node.width ?? NodeModel.defaultWidth,
-                    height: node.height ?? NodeModel.defaultHeight
-                });
+                if (node.width && node.height) {
+                    this.size.set({ width: node.width, height: node.height });
+                }
             }
         }
     }
@@ -1142,6 +1249,10 @@ class NodesChangeService {
         map(changedNode => [
             { type: 'position', id: changedNode.node.id, point: changedNode.point() }
         ]));
+        this.nodeSizeChange$ = toObservable(this.entitiesService.nodes)
+            .pipe(switchMap((nodes) => merge(...nodes.map(node => node.size$.pipe(skip(1), map(() => node))))), map(changedNode => [
+            { type: 'size', id: changedNode.node.id, size: changedNode.size() }
+        ]));
         this.nodeAddChange$ = toObservable(this.entitiesService.nodes)
             .pipe(pairwise(), map(([oldList, newList]) => newList.filter(node => !oldList.includes(node))), filter((nodes) => !!nodes.length), map((nodes) => nodes.map(node => ({ type: 'add', id: node.node.id }))));
         this.nodeRemoveChange$ = toObservable(this.entitiesService.nodes)
@@ -1150,7 +1261,7 @@ class NodesChangeService {
             .pipe(switchMap((nodes) => merge(...nodes.map(node => node.selected$.pipe(distinctUntilChanged(), skip(1), map(() => node))))), map((changedNode) => [
             { type: 'select', id: changedNode.node.id, selected: changedNode.selected() }
         ]));
-        this.changes$ = merge(this.nodesPositionChange$, this.nodeAddChange$, this.nodeRemoveChange$, this.nodeSelectedChange$).pipe(
+        this.changes$ = merge(this.nodesPositionChange$, this.nodeSizeChange$, this.nodeAddChange$, this.nodeRemoveChange$, this.nodeSelectedChange$).pipe(
         // this fixes a bug when on fire node event change,
         // you can't get valid list of detached edges
         observeOn(asyncScheduler, DELAY_FOR_SCHEDULER));
@@ -1217,6 +1328,9 @@ class ChangesControllerDirective {
         this.onNodesChangePosition = this.nodeChangesOfType('position');
         this.onNodesChangePositionSignle = this.singleChange(this.nodeChangesOfType('position'));
         this.onNodesChangePositionMany = this.manyChanges(this.nodeChangesOfType('position'));
+        this.onNodesChangeSize = this.nodeChangesOfType('size');
+        this.onNodesChangeSizeSingle = this.singleChange(this.nodeChangesOfType('size'));
+        this.onNodesChangeSizeMany = this.manyChanges(this.nodeChangesOfType('size'));
         this.onNodesChangeAdd = this.nodeChangesOfType('add');
         this.onNodesChangeAddSingle = this.singleChange(this.nodeChangesOfType('add'));
         this.onNodesChangeAddMany = this.manyChanges(this.nodeChangesOfType('add'));
@@ -1256,7 +1370,7 @@ class ChangesControllerDirective {
         return changes$.pipe(filter(changes => changes.length > 1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ChangesControllerDirective, isStandalone: true, selector: "[changesController]", outputs: { onNodesChange: "onNodesChange", onNodesChangePosition: "onNodesChange.position", onNodesChangePositionSignle: "onNodesChange.position.single", onNodesChangePositionMany: "onNodesChange.position.many", onNodesChangeSize: "onNodesChange.size", onNodesChangeSizeSingle: "onNodesChange.size.single", onNodesChangeSizeMany: "onNodesChange.size.many", onNodesChangeAdd: "onNodesChange.add", onNodesChangeAddSingle: "onNodesChange.add.single", onNodesChangeAddMany: "onNodesChange.add.many", onNodesChangeRemove: "onNodesChange.remove", onNodesChangeRemoveSingle: "onNodesChange.remove.single", onNodesChangeRemoveMany: "onNodesChange.remove.many", onNodesChangeSelect: "onNodesChange.select", onNodesChangeSelectSingle: "onNodesChange.select.single", onNodesChangeSelectMany: "onNodesChange.select.many", onEdgesChange: "onEdgesChange", onNodesChangeDetached: "onEdgesChange.detached", onNodesChangeDetachedSingle: "onEdgesChange.detached.single", onNodesChangeDetachedMany: "onEdgesChange.detached.many", onEdgesChangeAdd: "onEdgesChange.add", onEdgeChangeAddSingle: "onEdgesChange.add.single", onEdgeChangeAddMany: "onEdgesChange.add.many", onEdgeChangeRemove: "onEdgesChange.remove", onEdgeChangeRemoveSingle: "onEdgesChange.remove.single", onEdgeChangeRemoveMany: "onEdgesChange.remove.many", onEdgeChangeSelect: "onEdgesChange.select", onEdgeChangeSelectSingle: "onEdgesChange.select.single", onEdgeChangeSelectMany: "onEdgesChange.select.many" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChangesControllerDirective, decorators: [{
             type: Directive,
@@ -1275,6 +1389,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], onNodesChangePositionMany: [{
                 type: Output,
                 args: ['onNodesChange.position.many']
+            }], onNodesChangeSize: [{
+                type: Output,
+                args: ['onNodesChange.size']
+            }], onNodesChangeSizeSingle: [{
+                type: Output,
+                args: ['onNodesChange.size.single']
+            }], onNodesChangeSizeMany: [{
+                type: Output,
+                args: ['onNodesChange.size.many']
             }], onNodesChangeAdd: [{
                 type: Output,
                 args: ['onNodesChange.add']
@@ -1349,10 +1472,19 @@ class NodeRenderingService {
             return this.flowEntitiesService.nodes()
                 .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
+        this.maxOrder = computed(() => {
+            return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
+        });
     }
     pullNode(node) {
-        const maxOrder = Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
-        node.renderOrder.set(maxOrder + 1);
+        // TODO do not pull when the node is already on top
+        // pull node
+        node.renderOrder.set(this.maxOrder() + 1);
+        // pull children
+        this.flowEntitiesService
+            .nodes()
+            .filter(n => n.parent() === node)
+            .forEach(n => this.pullNode(n));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeRenderingService }); }
@@ -1365,25 +1497,42 @@ class RootPointerDirective {
     constructor() {
         this.host = inject(ElementRef).nativeElement;
         this.initialTouch$ = new Subject();
+        this.prevTouchEvent = null;
         // TODO: do not emit if mouse not down
         this.mouseMovement$ = fromEvent(this.host, 'mousemove').pipe(map(event => ({
             x: event.clientX,
             y: event.clientY,
+            movementX: event.movementX,
+            movementY: event.movementY,
+            target: event.target,
             originalEvent: event
         })), observeOn(animationFrameScheduler), share());
         this.touchMovement$ = merge(this.initialTouch$, fromEvent(this.host, 'touchmove')).pipe(tap((event) => event.preventDefault()), map((originalEvent) => {
             const x = originalEvent.touches[0]?.clientX ?? 0;
             const y = originalEvent.touches[0]?.clientY ?? 0;
+            const movementX = this.prevTouchEvent
+                ? originalEvent.touches[0].pageX - this.prevTouchEvent.touches[0].pageX
+                : 0;
+            const movementY = this.prevTouchEvent
+                ? originalEvent.touches[0].pageY - this.prevTouchEvent.touches[0].pageY
+                : 0;
             const target = document.elementFromPoint(x, y);
-            return { x, y, target, originalEvent };
-        }), observeOn(animationFrameScheduler), share());
+            return { x, y, movementX, movementY, target, originalEvent };
+        }), tap((event) => this.prevTouchEvent = event.originalEvent), observeOn(animationFrameScheduler), share());
+        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
         this.touchEnd$ = fromEvent(this.host, 'touchend').pipe(map((originalEvent) => {
             const x = originalEvent.changedTouches[0]?.clientX ?? 0;
             const y = originalEvent.changedTouches[0]?.clientY ?? 0;
             const target = document.elementFromPoint(x, y);
             return { x, y, target, originalEvent };
+        }), tap(() => this.prevTouchEvent = null), share());
+        this.mouseUp$ = fromEvent(this.host, 'mouseup').pipe(map((originalEvent) => {
+            const x = originalEvent.clientX;
+            const y = originalEvent.clientY;
+            const target = originalEvent.target;
+            return { x, y, target, originalEvent };
         }), share());
-        this.pointerMovement$ = merge(this.mouseMovement$, this.touchMovement$);
+        this.documentPointerEnd$ = merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend')).pipe(share());
     }
     /**
      * We should know when user started a touch in order to not
@@ -1434,6 +1583,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'g[spacePointContext]' }]
         }] });
 
+function Microtask(target, key, descriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args) {
+        queueMicrotask(() => {
+            originalMethod?.apply(this, args);
+        });
+    };
+    // Return the modified descriptor
+    return descriptor;
+}
+
 class HandleService {
     constructor() {
         this.node = signal(null);
@@ -1453,14 +1613,17 @@ class HandleService {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService }); }
 }
+__decorate([
+    Microtask // TODO fixes rendering of handle for group node
+], HandleService.prototype, "createHandle", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleService, decorators: [{
             type: Injectable
-        }] });
+        }], propDecorators: { createHandle: [] } });
 
-function resizable(elems) {
+function resizable(elems, zone) {
     return new Observable((subscriber) => {
         let ro = new ResizeObserver((entries) => {
-            subscriber.next(entries);
+            zone.run(() => subscriber.next(entries));
         });
         elems.forEach(e => ro.observe(e));
         return () => ro.disconnect();
@@ -1484,16 +1647,19 @@ const implementsWithInjector = (instance) => {
     return 'injector' in instance && 'get' in instance.injector;
 };
 
-function Microtask(target, key, descriptor) {
-    const originalMethod = descriptor.value;
-    descriptor.value = function (...args) {
-        queueMicrotask(() => {
-            originalMethod?.apply(this, args);
-        });
-    };
-    // Return the modified descriptor
-    return descriptor;
+/**
+ * Service to fix cyclic dependency between node and resizable component
+ */
+class NodeAccessorService {
+    constructor() {
+        this.model = signal(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeAccessorService, decorators: [{
+            type: Injectable
+        }] });
 
 class HandleModel {
     constructor(rawHandle, parentNode) {
@@ -1538,21 +1704,22 @@ class HandleModel {
         });
         this.pointAbsolute = computed(() => {
             return {
-                x: this.parentNode.point().x + this.offset().x + this.sizeOffset().x,
-                y: this.parentNode.point().y + this.offset().y + this.sizeOffset().y,
+                x: this.parentNode.globalPoint().x + this.offset().x + this.sizeOffset().x,
+                y: this.parentNode.globalPoint().y + this.offset().y + this.sizeOffset().y,
             };
         });
         this.state = signal('idle');
         this.updateParentSizeAndPosition$ = new Subject();
-        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
-            width: this.parentReference.offsetWidth,
-            height: this.parentReference.offsetHeight
-        }))), {
+        this.parentSize = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => this.getParentSize())), {
             initialValue: { width: 0, height: 0 }
         });
         this.parentPosition = toSignal(this.updateParentSizeAndPosition$.pipe(map(() => ({
-            x: this.parentReference.offsetLeft,
-            y: this.parentReference.offsetTop
+            x: this.parentReference instanceof HTMLElement
+                ? this.parentReference.offsetLeft
+                : 0,
+            y: this.parentReference instanceof HTMLElement
+                ? this.parentReference.offsetTop
+                : 0 // for now just 0 for group nodes
         }))), {
             initialValue: { x: 0, y: 0 }
         });
@@ -1568,6 +1735,18 @@ class HandleModel {
     updateParent() {
         this.updateParentSizeAndPosition$.next();
     }
+    getParentSize() {
+        if (this.parentReference instanceof HTMLElement) {
+            return {
+                width: this.parentReference.offsetWidth,
+                height: this.parentReference.offsetHeight
+            };
+        }
+        else if (this.parentReference instanceof SVGGraphicsElement) {
+            return this.parentReference.getBBox();
+        }
+        return { width: 0, height: 0 };
+    }
 }
 
 class HandleComponent {
@@ -1611,42 +1790,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], ngOnInit: [] } });
 
-class HandleSizeControllerDirective {
-    constructor() {
-        this.handleWrapper = inject(ElementRef);
-    }
-    ngAfterViewInit() {
-        const element = this.handleWrapper.nativeElement;
-        const rect = element.getBBox();
-        const stroke = getChildStrokeWidth(element);
-        this.handleModel.size.set({
-            width: rect.width + stroke,
-            height: rect.height + stroke
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: { handleModel: ["handleSizeController", "handleModel"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[handleSizeController]' }]
-        }], propDecorators: { handleModel: [{
-                type: Input,
-                args: [{ required: true, alias: 'handleSizeController' }]
-            }] } });
-function getChildStrokeWidth(element) {
-    const child = element.firstElementChild;
-    if (child) {
-        const stroke = getComputedStyle(child).strokeWidth;
-        const strokeAsNumber = Number(stroke.replace('px', ''));
-        if (isNaN(strokeAsNumber)) {
-            return 0;
-        }
-        return strokeAsNumber;
-    }
-    return 0;
-}
-
 class PointerDirective {
     constructor() {
         this.hostElement = inject(ElementRef).nativeElement;
@@ -1726,6 +1869,295 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['mouseout', ['$event']]
             }] } });
 
+class ResizableComponent {
+    constructor() {
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.rootPointer = inject(RootPointerDirective);
+        this.viewportService = inject(ViewportService);
+        this.hostRef = inject(ElementRef);
+        this.resizerColor = '#2e414c';
+        this.gap = 1.5;
+        this.lineGap = 3;
+        this.handleSize = 6;
+        this.resizeSide = null;
+        this.zoom = computed(() => this.viewportService.readableViewport().zoom ?? 0);
+        this.minWidth = 0;
+        this.minHeight = 0;
+        // TODO: allow reszie beside the flow
+        this.resizeOnGlobalMouseMove = this.rootPointer.pointerMovement$
+            .pipe(filter(() => this.resizeSide !== null), tap((event) => this.resize(event)), takeUntilDestroyed())
+            .subscribe();
+        this.endResizeOnGlobalMouseUp = this.rootPointer.documentPointerEnd$
+            .pipe(tap(() => this.endResize()), takeUntilDestroyed())
+            .subscribe();
+    }
+    set resizable(value) {
+        if (typeof value === 'boolean') {
+            this.model.resizable.set(value);
+        }
+        else {
+            this.model.resizable.set(true);
+        }
+    }
+    get model() {
+        return this.nodeAccessor.model();
+    }
+    ngOnInit() {
+        this.model.resizerTemplate.set(this.resizer);
+    }
+    ngAfterViewInit() {
+        this.minWidth = +getComputedStyle(this.hostRef.nativeElement).minWidth.replace('px', '') || 0;
+        this.minHeight = +getComputedStyle(this.hostRef.nativeElement).minHeight.replace('px', '') || 0;
+    }
+    startResize(side, event) {
+        event.stopPropagation();
+        this.resizeSide = side;
+        this.model.resizing.set(true);
+    }
+    resize({ movementX, movementY }) {
+        const offsetX = round(movementX / this.zoom());
+        const offsetY = round(movementY / this.zoom());
+        switch (this.resizeSide) {
+            case 'left':
+                let x = this.model.point().x + offsetX;
+                x = Math.max(x, this.getMinX());
+                x = Math.min(x, this.getMaxX());
+                // TODO this fixes increasing width when current node hits the parent
+                if (x === this.getMinX() || x === this.getMaxX()) {
+                    return;
+                }
+                this.model.setPoint({ x, y: this.model.point().y }, false);
+                this.model.size.update(({ height, width }) => {
+                    width -= offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    return { height, width: width };
+                });
+                return;
+            case 'right':
+                this.model.size.update(({ height, width }) => {
+                    width += offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    const bounds = getNodesBounds(this.model.children());
+                    width = Math.max(width, bounds.x + bounds.width);
+                    return { height, width };
+                });
+                return;
+            case 'top':
+                let y = this.model.point().y + offsetY;
+                y = Math.max(y, this.getMinY());
+                y = Math.min(y, this.getMaxY());
+                if (y === this.getMinY() || y === this.getMaxY()) {
+                    return;
+                }
+                this.model.setPoint({ x: this.model.point().x, y }, false);
+                this.model.size.update(({ height, width }) => {
+                    height -= offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    return { width, height };
+                });
+                return;
+            case 'bottom':
+                this.model.size.update(({ height, width }) => {
+                    height += offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    const bounds = getNodesBounds(this.model.children());
+                    height = Math.max(height, bounds.y + bounds.height);
+                    return { width, height };
+                });
+                return;
+            case 'top-left': {
+                let x = this.model.point().x + offsetX;
+                x = Math.max(x, this.getMinX());
+                x = Math.min(x, this.getMaxX());
+                let y = this.model.point().y + offsetY;
+                y = Math.max(y, this.getMinY());
+                y = Math.min(y, this.getMaxY());
+                if (x === this.getMinX() || y === this.getMinY() ||
+                    x === this.getMaxX() || y === this.getMaxY()) {
+                    return;
+                }
+                this.model.setPoint({ x, y }, false);
+                this.model.size.update(({ height, width }) => {
+                    width -= offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    height -= offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    return { height, width };
+                });
+                return;
+            }
+            case 'top-right': {
+                let y = this.model.point().y + offsetY;
+                y = Math.max(y, this.getMinY());
+                y = Math.min(y, this.getMaxY());
+                if (y === this.getMinX() || y === this.getMaxY()) {
+                    return;
+                }
+                this.model.setPoint({ x: this.model.point().x, y }, false);
+                this.model.size.update(({ height, width }) => {
+                    const bounds = getNodesBounds(this.model.children());
+                    width += offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    width = Math.max(width, bounds.x + bounds.width);
+                    height -= offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    return { height, width };
+                });
+                return;
+            }
+            case 'bottom-left': {
+                let x = this.model.point().x + offsetX;
+                x = Math.max(x, this.getMinX());
+                x = Math.min(x, this.getMaxX());
+                if (x === this.getMinX() || x === this.getMaxX()) {
+                    return;
+                }
+                this.model.setPoint({ x, y: this.model.point().y }, false);
+                this.model.size.update(({ height, width }) => {
+                    width -= offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    height += offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    const bounds = getNodesBounds(this.model.children());
+                    height = Math.max(height, bounds.y + bounds.height);
+                    return { height, width };
+                });
+                return;
+            }
+            case 'bottom-right': {
+                this.model.size.update(({ height, width }) => {
+                    const bounds = getNodesBounds(this.model.children());
+                    width += offsetX;
+                    width = Math.max(width, this.minWidth);
+                    width = Math.min(width, this.getMaxWidth());
+                    width = Math.max(width, bounds.x + bounds.width);
+                    height += offsetY;
+                    height = Math.max(height, this.minHeight);
+                    height = Math.min(height, this.getMaxHeight());
+                    height = Math.max(height, bounds.y + bounds.height);
+                    return { height, width };
+                });
+            }
+        }
+    }
+    endResize() {
+        this.resizeSide = null;
+        this.model.resizing.set(false);
+    }
+    getMaxWidth() {
+        const parent = this.model.parent();
+        if (parent) {
+            return parent.size().width - this.model.point().x;
+        }
+        return Infinity;
+    }
+    getMaxHeight() {
+        const parent = this.model.parent();
+        if (parent) {
+            return parent.size().height - this.model.point().y;
+        }
+        return Infinity;
+    }
+    getMinX() {
+        const parent = this.model.parent();
+        if (parent) {
+            return 0;
+        }
+        return -Infinity;
+    }
+    getMinY() {
+        const parent = this.model.parent();
+        if (parent) {
+            return 0;
+        }
+        return -Infinity;
+    }
+    getMaxX() {
+        const x = this.model.point().x;
+        const width = this.model.size().width;
+        const children = this.model.children();
+        if (children) {
+            const bounds = getNodesBounds(children);
+            return x + (bounds.x + bounds.width) >= x + width ? x : (width - this.minWidth) + x;
+        }
+        return (width - this.minWidth) + x;
+    }
+    getMaxY() {
+        const y = this.model.point().y;
+        const height = this.model.size().height;
+        const children = this.model.children();
+        if (children) {
+            const bounds = getNodesBounds(children);
+            return y + (bounds.y + bounds.height) >= y + height ? y : (height - this.minHeight) + y;
+        }
+        return (height - this.minHeight) + y;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResizableComponent, selector: "[resizable]", inputs: { resizable: "resizable", resizerColor: "resizerColor", gap: "gap" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\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\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\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\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    />\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"] }] }); }
+}
+__decorate([
+    Microtask
+], ResizableComponent.prototype, "ngAfterViewInit", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[resizable]', template: "<ng-template #resizer>\n  <svg:g>\n    <!-- top line -->\n    <svg:line\n      class=\"top\"\n      [attr.x1]=\"lineGap\"\n      [attr.y1]=\"-gap\"\n      [attr.x2]=\"model.size().width - lineGap\"\n      [attr.y2]=\"-gap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('top', $event)\"\n    />\n    <!-- Left line -->\n    <svg:line\n      class=\"left\"\n      [attr.x1]=\"-gap\"\n      [attr.y1]=\"lineGap\"\n      [attr.x2]=\"-gap\"\n      [attr.y2]=\"model.size().height - lineGap\"\n      [attr.stroke]=\"resizerColor\"\n      stroke-width=\"2\"\n      (pointerStart)=\"startResize('left', $event)\"\n    />\n    <!-- Bottom line -->\n    <svg:line\n      class=\"bottom\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('bottom', $event)\"\n    />\n    <!-- Right line -->\n    <svg:line\n      class=\"right\"\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      stroke-width=\"2\"\n      (pointerStart)=\"startResize('right', $event)\"\n    />\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\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\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\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    />\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"] }]
+        }], propDecorators: { resizable: [{
+                type: Input
+            }], resizerColor: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], resizer: [{
+                type: ViewChild,
+                args: ['resizer', { static: true }]
+            }], ngAfterViewInit: [] } });
+
+class HandleSizeControllerDirective {
+    constructor() {
+        this.handleWrapper = inject(ElementRef);
+    }
+    ngAfterViewInit() {
+        const element = this.handleWrapper.nativeElement;
+        const rect = element.getBBox();
+        const stroke = getChildStrokeWidth(element);
+        this.handleModel.size.set({
+            width: rect.width + stroke,
+            height: rect.height + stroke
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: { handleModel: ["handleSizeController", "handleModel"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HandleSizeControllerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[handleSizeController]' }]
+        }], propDecorators: { handleModel: [{
+                type: Input,
+                args: [{ required: true, alias: 'handleSizeController' }]
+            }] } });
+function getChildStrokeWidth(element) {
+    const child = element.firstElementChild;
+    if (child) {
+        const stroke = getComputedStyle(child).strokeWidth;
+        const strokeAsNumber = Number(stroke.replace('px', ''));
+        if (isNaN(strokeAsNumber)) {
+            return 0;
+        }
+        return strokeAsNumber;
+    }
+    return 0;
+}
+
 class NodeComponent {
     constructor() {
         this.injector = inject(Injector);
@@ -1737,12 +2169,15 @@ class NodeComponent {
         this.selectionService = inject(SelectionService);
         this.hostRef = inject(ElementRef);
         this.connectionController = inject(ConnectionControllerDirective);
+        this.nodeAccessor = inject(NodeAccessorService);
+        this.zone = inject(NgZone);
         this.showMagnet = computed(() => this.flowStatusService.status().state === 'connection-start' ||
             this.flowStatusService.status().state === 'connection-validation');
         this.styleWidth = computed(() => `${this.nodeModel.size().width}px`);
         this.styleHeight = computed(() => `${this.nodeModel.size().height}px`);
     }
     ngOnInit() {
+        this.nodeAccessor.model.set(this.nodeModel);
         this.handleService.node.set(this.nodeModel);
         effect(() => {
             if (this.nodeModel.draggable()) {
@@ -1753,7 +2188,8 @@ class NodeComponent {
             }
         });
         this.nodeModel.handles$
-            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference)).pipe(map(() => handles))), tap((handles) => {
+            .pipe(switchMap((handles) => resizable(handles.map(h => h.parentReference), this.zone)
+            .pipe(map(() => handles))), tap((handles) => {
             // TODO (performance) inspect how to avoid calls of this when flow initially rendered
             handles.forEach(h => h.updateParent());
         }), takeUntilDestroyed())
@@ -1762,8 +2198,8 @@ class NodeComponent {
     ngAfterViewInit() {
         this.nodeModel.linkDefaultNodeSizeWithModelSize();
         if (this.nodeModel.node.type === 'html-template' || this.nodeModel.isComponentType) {
-            resizable([this.htmlWrapperRef.nativeElement])
-                .pipe(startWith(null), tap(() => {
+            resizable([this.htmlWrapperRef.nativeElement], this.zone)
+                .pipe(startWith(null), tap(() => this.nodeModel.handles().forEach(h => h.updateParent())), filter(() => !this.nodeModel.resizing()), tap(() => {
                 const width = this.htmlWrapperRef.nativeElement.clientWidth;
                 const height = this.htmlWrapperRef.nativeElement.clientHeight;
                 this.nodeModel.size.set({ width, height });
@@ -1796,22 +2232,22 @@ class NodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeHtmlTemplate: "nodeHtmlTemplate" }, providers: [HandleService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "g[node]", inputs: { nodeModel: "nodeModel", nodeTemplate: "nodeTemplate", groupNodeTemplate: "groupNodeTemplate" }, providers: [HandleService, NodeAccessorService], viewQueries: [{ propertyName: "nodeContentRef", first: true, predicate: ["nodeContent"], descendants: true }, { propertyName: "htmlWrapperRef", first: true, predicate: ["htmlWrapper"], descendants: true }], ngImport: i0, template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (mousedown)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (mousedown)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HandleComponent, selector: "handle", inputs: ["position", "type", "id", "template"] }, { kind: "component", type: ResizableComponent, selector: "[resizable]", inputs: ["resizable", "resizerColor", "gap"] }, { kind: "directive", type: HandleSizeControllerDirective, selector: "[handleSizeController]", inputs: ["handleSizeController"] }, { kind: "directive", type: PointerDirective, selector: "[pointerStart], [pointerEnd], [pointerOver], [pointerOut]", outputs: ["pointerOver", "pointerOut", "pointerStart", "pointerEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     InjectionContext
 ], NodeComponent.prototype, "ngOnInit", null);
 __decorate([
-    Microtask // TODO (performance) check if we need microtask here
-    ,
     InjectionContext
 ], NodeComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService], template: "<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeHtmlTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngTemplateOutlet]=\"nodeHtmlTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div #htmlWrapper class=\"wrapper\">\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".wrapper{width:max-content}.magnet{opacity:0}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
+            args: [{ selector: 'g[node]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [HandleService, NodeAccessorService], template: "<!-- Default node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'default'\"\n  class=\"selectable\"\n  #nodeContent\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode(); selectNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"default-node\"\n    [class.default-node_selected]=\"nodeModel.selected()\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n    [style.max-width]=\"styleWidth()\"\n    [style.max-height]=\"styleHeight()\"\n  >\n    <div [outerHTML]=\"nodeModel.text()\"></div>\n\n    <handle type=\"source\" [position]=\"nodeModel.sourcePosition()\" />\n    <handle type=\"target\" [position]=\"nodeModel.targetPosition()\" />\n  </div>\n</svg:foreignObject>\n\n<!-- Template node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.node.type === 'html-template' && nodeTemplate\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"nodeTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected } }\"\n      [ngTemplateOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Component node -->\n<svg:foreignObject\n  *ngIf=\"nodeModel.isComponentType\"\n  class=\"selectable\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  (mousedown)=\"pullNode()\"\n>\n  <div\n    #htmlWrapper\n    class=\"wrapper\"\n    [style.width]=\"styleWidth()\"\n    [style.height]=\"styleHeight()\"\n  >\n    <ng-container\n      [ngComponentOutlet]=\"$any(nodeModel.node.type)\"\n      [ngComponentOutletInputs]=\"nodeModel.componentTypeInputs()\"\n      [ngComponentOutletInjector]=\"injector\"\n    />\n  </div>\n</svg:foreignObject>\n\n<!-- Default group node -->\n<svg:rect\n  *ngIf=\"nodeModel.node.type === 'default-group'\"\n  [resizable]=\"nodeModel.resizable()\"\n  [gap]=\"3\"\n  [resizerColor]=\"nodeModel.color()\"\n  class=\"default-group-node\"\n  rx=\"5\"\n  ry=\"5\"\n  [class.default-group-node_selected]=\"nodeModel.selected()\"\n  [attr.width]=\"nodeModel.size().width\"\n  [attr.height]=\"nodeModel.size().height\"\n  [style.stroke]=\"nodeModel.color()\"\n  [style.fill]=\"nodeModel.color()\"\n  (mousedown)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (mousedown)=\"pullNode()\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"groupNodeTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: { node: nodeModel.node, selected: nodeModel.selected, width: nodeModel.width, height: nodeModel.height } }\"\n    [ngTemplateOutletInjector]=\"injector\"\n  />\n</svg:g>\n\n<!-- Resizer -->\n<ng-container *ngIf=\"nodeModel.resizerTemplate() as template\">\n  <ng-container *ngIf=\"nodeModel.resizable()\">\n    <ng-template [ngTemplateOutlet]=\"template\" />\n  </ng-container>\n</ng-container>\n\n<!-- Handles -->\n<ng-container *ngFor=\"let handle of nodeModel.handles()\">\n  <svg:circle\n    *ngIf=\"!handle.template\"\n    class=\"default-handle\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    [attr.stroke-width]=\"handle.strokeWidth\"\n    r=\"5\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  />\n\n  <svg:g\n    *ngIf=\"handle.template\"\n    [handleSizeController]=\"handle\"\n    (pointerStart)=\"startConnection($event, handle)\"\n    (pointerEnd)=\"endConnection(handle)\"\n  >\n    <ng-container *ngTemplateOutlet=\"handle.template; context: handle.templateContext\" />\n  </svg:g>\n\n  <svg:circle\n    *ngIf=\"showMagnet()\"\n    class=\"magnet\"\n    [attr.r]=\"nodeModel.magnetRadius\"\n    [attr.cx]=\"handle.offset().x\"\n    [attr.cy]=\"handle.offset().y\"\n    (pointerEnd)=\"endConnection(handle); resetValidateConnection(handle)\"\n    (pointerOver)=\"validateConnection(handle)\"\n    (pointerOut)=\"resetValidateConnection(handle)\"\n  />\n</ng-container>\n", styles: [".magnet{opacity:0}.wrapper{display:table-cell}.default-node{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}.default-node_selected{border-width:2px}.default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}.default-handle{stroke:#fff;fill:#1b262c}\n"] }]
         }], propDecorators: { nodeModel: [{
                 type: Input
-            }], nodeHtmlTemplate: [{
+            }], nodeTemplate: [{
+                type: Input
+            }], groupNodeTemplate: [{
                 type: Input
             }], nodeContentRef: [{
                 type: ViewChild,
@@ -2154,7 +2590,7 @@ class FlowSizeControllerDirective {
             this.flowWidth = view === 'auto' ? '100%' : view[0];
             this.flowHeight = view === 'auto' ? '100%' : view[1];
         });
-        resizable([this.host.nativeElement]).pipe(tap(([entry]) => {
+        resizable([this.host.nativeElement], inject(NgZone)).pipe(tap(([entry]) => {
             this.flowSettingsService.computedFlowWidth.set(entry.contentRect.width);
             this.flowSettingsService.computedFlowHeight.set(entry.contentRect.height);
         }), takeUntilDestroyed()).subscribe();
@@ -2184,6 +2620,9 @@ const changesControllerHostDirective = {
         'onNodesChange.position',
         'onNodesChange.position.single',
         'onNodesChange.position.many',
+        'onNodesChange.size',
+        'onNodesChange.size.single',
+        'onNodesChange.size.many',
         'onNodesChange.add',
         'onNodesChange.add.single',
         'onNodesChange.add.many',
@@ -2223,6 +2662,9 @@ class VflowComponent {
          * Background for flow
          */
         this.background = '#fff';
+        this.optimization = {
+            computeLayersOnInit: true
+        };
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
@@ -2333,6 +2775,9 @@ class VflowComponent {
         addNodesToEdges(this.nodeModels(), newModels);
         this.flowEntitiesService.edges.set(newModels);
     }
+    ngOnInit() {
+        this.setInitialNodesOrder();
+    }
     // #region METHODS_API
     /**
      * Change viewport to specified state
@@ -2388,8 +2833,20 @@ class VflowComponent {
     trackEdges(idx, { edge }) {
         return edge;
     }
+    setInitialNodesOrder() {
+        if (this.optimization.computeLayersOnInit) {
+            this.nodeModels().forEach(model => {
+                switch (model.node.type) {
+                    case 'default-group':
+                    case 'template-group': {
+                        this.nodeRenderingService.pullNode(model);
+                    }
+                }
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", entitiesSelectable: "entitiesSelectable", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: VflowComponent, selector: "vflow", inputs: { view: "view", minZoom: "minZoom", maxZoom: "maxZoom", handlePositions: "handlePositions", background: "background", optimization: "optimization", entitiesSelectable: "entitiesSelectable", connection: ["connection", "connection", (settings) => new ConnectionModel(settings)], nodes: "nodes", edges: "edges" }, outputs: { onComponentNodeEvent: "onComponentNodeEvent" }, providers: [
             DraggableService,
             ViewportService,
             FlowStatusService,
@@ -2400,7 +2857,7 @@ class VflowComponent {
             SelectionService,
             FlowSettingsService,
             ComponentEventBusService
-        ], queries: [{ propertyName: "nodeHtmlDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeHtmlTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodeTemplateDirective", first: true, predicate: NodeHtmlTemplateDirective, descendants: true }, { propertyName: "groupNodeTemplateDirective", first: true, predicate: GroupNodeTemplateDirective, descendants: true }, { propertyName: "edgeTemplateDirective", first: true, predicate: EdgeTemplateDirective, descendants: true }, { propertyName: "edgeLabelHtmlDirective", first: true, predicate: EdgeLabelHtmlTemplateDirective, descendants: true }, { propertyName: "connectionTemplateDirective", first: true, predicate: ConnectionTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "mapContext", first: true, predicate: MapContextDirective, descendants: true }, { propertyName: "spacePointContext", first: true, predicate: SpacePointContextDirective, descendants: true }], hostDirectives: [{ directive: ConnectionControllerDirective, outputs: ["onConnect", "onConnect"] }, { directive: ChangesControllerDirective, outputs: ["onNodesChange", "onNodesChange", "onNodesChange.position", "onNodesChange.position", "onNodesChange.position.single", "onNodesChange.position.single", "onNodesChange.position.many", "onNodesChange.position.many", "onNodesChange.size", "onNodesChange.size", "onNodesChange.size.single", "onNodesChange.size.single", "onNodesChange.size.many", "onNodesChange.size.many", "onNodesChange.add", "onNodesChange.add", "onNodesChange.add.single", "onNodesChange.add.single", "onNodesChange.add.many", "onNodesChange.add.many", "onNodesChange.remove", "onNodesChange.remove", "onNodesChange.remove.single", "onNodesChange.remove.single", "onNodesChange.remove.many", "onNodesChange.remove.many", "onNodesChange.select", "onNodesChange.select", "onNodesChange.select.single", "onNodesChange.select.single", "onNodesChange.select.many", "onNodesChange.select.many", "onEdgesChange", "onEdgesChange", "onEdgesChange.detached", "onEdgesChange.detached", "onEdgesChange.detached.single", "onEdgesChange.detached.single", "onEdgesChange.detached.many", "onEdgesChange.detached.many", "onEdgesChange.add", "onEdgesChange.add", "onEdgesChange.add.single", "onEdgesChange.add.single", "onEdgesChange.add.many", "onEdgesChange.add.many", "onEdgesChange.remove", "onEdgesChange.remove", "onEdgesChange.remove.single", "onEdgesChange.remove.single", "onEdgesChange.remove.many", "onEdgesChange.remove.many", "onEdgesChange.select", "onEdgesChange.select", "onEdgesChange.select.single", "onEdgesChange.select.single", "onEdgesChange.select.many", "onEdgesChange.select.many"] }], ngImport: i0, template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "g[node]", inputs: ["nodeModel", "nodeTemplate", "groupNodeTemplate"] }, { kind: "component", type: EdgeComponent, selector: "g[edge]", inputs: ["model", "edgeTemplate", "edgeLabelHtmlTemplate"] }, { kind: "component", type: ConnectionComponent, selector: "g[connection]", inputs: ["model", "template"] }, { kind: "component", type: DefsComponent, selector: "defs[flowDefs]", inputs: ["markers"] }, { kind: "component", type: BackgroundComponent, selector: "g[background]", inputs: ["background"] }, { kind: "directive", type: SpacePointContextDirective, selector: "g[spacePointContext]" }, { kind: "directive", type: MapContextDirective, selector: "g[mapContext]" }, { kind: "directive", type: RootSvgReferenceDirective, selector: "svg[rootSvgRef]" }, { kind: "directive", type: RootSvgContextDirective, selector: "svg[rootSvgContext]" }, { kind: "directive", type: RootPointerDirective, selector: "svg[rootPointer]" }, { kind: "directive", type: FlowSizeControllerDirective, selector: "svg[flowSizeController]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowComponent, decorators: [{
             type: Component,
@@ -2418,7 +2875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], hostDirectives: [
                         connectionControllerHostDirective,
                         changesControllerHostDirective
-                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeHtmlTemplate]=\"nodeHtmlDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
+                    ], template: "<svg:svg\n  rootSvgRef\n  rootSvgContext\n  rootPointer\n  flowSizeController\n  class=\"root-svg\"\n  #flow\n>\n  <defs [markers]=\"markers()\" flowDefs />\n\n  <g [background]=\"background\"/>\n\n  <svg:g\n    mapContext\n    spacePointContext\n  >\n    <!-- Connection -->\n    <svg:g\n      connection\n      [model]=\"connection\"\n      [template]=\"connectionTemplateDirective?.templateRef\"\n    />\n\n    <!-- Edges  -->\n    <svg:g\n      *ngFor=\"let model of edgeModels(); trackBy: trackEdges\"\n      edge\n      [model]=\"model\"\n      [edgeTemplate]=\"edgeTemplateDirective?.templateRef\"\n      [edgeLabelHtmlTemplate]=\"edgeLabelHtmlDirective?.templateRef\"\n    />\n\n    <!-- Nodes -->\n    <svg:g\n      *ngFor=\"let model of nodeModels(); trackBy: trackNodes\"\n      node\n      [nodeModel]=\"model\"\n      [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n      [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n      [attr.transform]=\"model.pointTransform()\"\n    />\n  </svg:g>\n\n</svg:svg>\n", styles: [":host{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}:host ::ng-deep *{box-sizing:border-box}\n"] }]
         }], propDecorators: { view: [{
                 type: Input
             }], minZoom: [{
@@ -2429,6 +2886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], background: [{
                 type: Input
+            }], optimization: [{
+                type: Input
             }], entitiesSelectable: [{
                 type: Input
             }], connection: [{
@@ -2441,9 +2900,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], onComponentNodeEvent: [{
                 type: Output
-            }], nodeHtmlDirective: [{
+            }], nodeTemplateDirective: [{
                 type: ContentChild,
                 args: [NodeHtmlTemplateDirective]
+            }], groupNodeTemplateDirective: [{
+                type: ContentChild,
+                args: [GroupNodeTemplateDirective]
             }], edgeTemplateDirective: [{
                 type: ContentChild,
                 args: [EdgeTemplateDirective]
@@ -2502,7 +2964,8 @@ const components = [
     ConnectionComponent,
     HandleComponent,
     DefsComponent,
-    BackgroundComponent
+    BackgroundComponent,
+    ResizableComponent,
 ];
 const directives = [
     SpacePointContextDirective,
@@ -2513,10 +2976,11 @@ const directives = [
     SelectableDirective,
     PointerDirective,
     RootPointerDirective,
-    FlowSizeControllerDirective
+    FlowSizeControllerDirective,
 ];
 const templateDirectives = [
     NodeHtmlTemplateDirective,
+    GroupNodeTemplateDirective,
     EdgeLabelHtmlTemplateDirective,
     EdgeTemplateDirective,
     ConnectionTemplateDirective,
@@ -2531,7 +2995,8 @@ class VflowModule {
             ConnectionComponent,
             HandleComponent,
             DefsComponent,
-            BackgroundComponent, SpacePointContextDirective,
+            BackgroundComponent,
+            ResizableComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,
@@ -2540,12 +3005,15 @@ class VflowModule {
             PointerDirective,
             RootPointerDirective,
             FlowSizeControllerDirective, NodeHtmlTemplateDirective,
+            GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
             HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
             HandleComponent,
+            ResizableComponent,
             SelectableDirective, NodeHtmlTemplateDirective,
+            GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
@@ -2559,6 +3027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exports: [
                         VflowComponent,
                         HandleComponent,
+                        ResizableComponent,
                         SelectableDirective,
                         ...templateDirectives
                     ],
@@ -2572,5 +3041,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicNode, isTemplateStaticNode };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
 //# sourceMappingURL=ngx-vflow.mjs.map