ngx-vflow 0.13.0 → 0.14.1

package/fesm2022/ngx-vflow.mjs

@@ -1,13 +1,12 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe } 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, NgZone, ContentChild, NgModule } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, EventEmitter, Output, DestroyRef, Input, runInInjectionContext, Component, Injector, ChangeDetectionStrategy, HostListener, ViewChild, NgZone, ContentChild, NgModule } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { switchMap, merge, fromEvent, tap, Subject, observeOn, animationFrameScheduler, skip, map, pairwise, filter, distinctUntilChanged, asyncScheduler, zip, share, Observable, startWith } from 'rxjs';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { drag } from 'd3-drag';
-import { path } from 'd3-path';
 import { __decorate } from 'tslib';
 
 function getNodesBounds(nodes) {
@@ -94,6 +93,10 @@ class FlowEntitiesService {
             // empty arrays considered equal, other arrays may not be equal
             equal: (a, b) => !a.length && !b.length ? true : a === b
         });
+        this.validEdges = computed(() => {
+            const nodes = this.nodes();
+            return this.edges().filter(e => nodes.includes(e.source()) && nodes.includes(e.target()));
+        });
         this.connection = signal(new ConnectionModel({}));
         this.markers = computed(() => {
             const markersMap = new Map();
@@ -114,14 +117,11 @@ class FlowEntitiesService {
             }
             return markersMap;
         });
-        this.validEdges = computed(() => {
-            const nodes = this.nodes();
-            return this.edges().filter(e => nodes.includes(e.source()) && nodes.includes(e.target()));
-        });
         this.entities = computed(() => [
             ...this.nodes(),
             ...this.edges()
         ]);
+        this.minimap = signal(null);
     }
     getNode(id) {
         return this.nodes().find(({ node }) => node.id === id);
@@ -174,6 +174,7 @@ class FlowSettingsService {
         this.computedFlowHeight = signal(0);
         this.minZoom = signal(0.5);
         this.maxZoom = signal(3);
+        this.background = signal({ type: 'solid', color: '#fff' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlowSettingsService }); }
@@ -1125,11 +1126,8 @@ function getPointOnLineByRatio(start, end, ratio) {
 function straightPath(source, target, usingPoints = [false, false, false]) {
     const [start, center, end] = usingPoints;
     const nullPoint = { x: 0, y: 0 };
-    const path$1 = path();
-    path$1.moveTo(source.x, source.y);
-    path$1.lineTo(target.x, target.y);
     return {
-        path: path$1.toString(),
+        path: `M ${source.x},${source.y}L ${target.x},${target.y}`,
         points: {
             start: start ? getPointOnLineByRatio(source, target, .15) : nullPoint,
             center: center ? getPointOnLineByRatio(source, target, .50) : nullPoint,
@@ -1139,13 +1137,11 @@ function straightPath(source, target, usingPoints = [false, false, false]) {
 }
 
 function bezierPath(source, target, sourcePosition, targetPosition, usingPoints = [false, false, false]) {
-    const path$1 = path();
-    path$1.moveTo(source.x, source.y);
     const distanceVector = { x: source.x - target.x, y: source.y - target.y };
-    const firstControl = calcControlPoint(source, sourcePosition, distanceVector);
-    const secondControl = calcControlPoint(target, targetPosition, distanceVector);
-    path$1.bezierCurveTo(firstControl.x, firstControl.y, secondControl.x, secondControl.y, target.x, target.y);
-    return getPathData(path$1, source, target, firstControl, secondControl, usingPoints);
+    const sourceControl = calcControlPoint(source, sourcePosition, distanceVector);
+    const targetControl = calcControlPoint(target, targetPosition, distanceVector);
+    const path = `M${source.x},${source.y} C${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${target.x},${target.y}`;
+    return getPathData(path, source, target, sourceControl, targetControl, usingPoints);
 }
 /**
  * Calculate control point based on provided point
@@ -1185,20 +1181,20 @@ function calcControlPoint(point, pointPosition, distanceVector) {
         y: point.y - factorPoint.y * controlOffset,
     };
 }
-function getPathData(path, source, target, firstControl, secondControl, usingPoints) {
+function getPathData(path, source, target, sourceControl, targetControl, usingPoints) {
     const [start, center, end] = usingPoints;
     const nullPoint = { x: 0, y: 0 };
     return {
-        path: path.toString(),
+        path,
         points: {
             start: start
-                ? getPointOnBezier(source, target, firstControl, secondControl, 0.1)
+                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.1)
                 : nullPoint,
             center: center
-                ? getPointOnBezier(source, target, firstControl, secondControl, 0.5)
+                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.5)
                 : nullPoint,
             end: end
-                ? getPointOnBezier(source, target, firstControl, secondControl, 0.9)
+                ? getPointOnBezier(source, target, sourceControl, targetControl, 0.9)
                 : nullPoint,
         },
     };
@@ -1206,10 +1202,10 @@ function getPathData(path, source, target, firstControl, secondControl, usingPoi
 /**
  * Get point on bezier curve by ratio
  */
-function getPointOnBezier(sourcePoint, targetPoint, controlPoint1, controlPoint2, ratio) {
-    const fromSourceToFirstControl = getPointOnLineByRatio(sourcePoint, controlPoint1, ratio);
-    const fromFirstControlToSecond = getPointOnLineByRatio(controlPoint1, controlPoint2, ratio);
-    const fromSecondControlToTarget = getPointOnLineByRatio(controlPoint2, targetPoint, ratio);
+function getPointOnBezier(sourcePoint, targetPoint, sourceControl, targetControl, ratio) {
+    const fromSourceToFirstControl = getPointOnLineByRatio(sourcePoint, sourceControl, ratio);
+    const fromFirstControlToSecond = getPointOnLineByRatio(sourceControl, targetControl, ratio);
+    const fromSecondControlToTarget = getPointOnLineByRatio(targetControl, targetPoint, ratio);
     return getPointOnLineByRatio(getPointOnLineByRatio(fromSourceToFirstControl, fromFirstControlToSecond, ratio), getPointOnLineByRatio(fromFirstControlToSecond, fromSecondControlToTarget, ratio), ratio);
 }
 
@@ -1676,6 +1672,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'g[spacePointContext]' }]
         }] });
 
+function transformBackground(background) {
+    return typeof background === 'string'
+        ? { type: 'solid', color: background }
+        : background;
+}
+
 function Microtask(target, key, descriptor) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args) {
@@ -1754,6 +1756,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+class DefaultNodeComponent {
+    constructor() {
+        this.selected = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultNodeComponent, selector: "default-node", inputs: { selected: "selected" }, host: { properties: { "class.selected": "selected" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'default-node', host: {
+                        '[class.selected]': 'selected'
+                    }, template: "<ng-content />\n", styles: [":host{border:1.5px solid #1b262c;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#000;background-color:#fff}:host(.selected){border-width:2px}\n"] }]
+        }], propDecorators: { selected: [{
+                type: Input
+            }] } });
+
 class HandleModel {
     constructor(rawHandle, parentNode) {
         this.rawHandle = rawHandle;
@@ -1821,7 +1839,8 @@ class HandleModel {
         this.templateContext = {
             $implicit: {
                 point: this.offset,
-                state: this.state
+                state: this.state,
+                node: this.parentNode.node
             }
         };
     }
@@ -2268,7 +2287,7 @@ 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", 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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"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 }); }
+    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  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <default-node\n    #htmlWrapper\n    [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  </default-node>\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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"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-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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }, { 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
@@ -2278,7 +2297,7 @@ __decorate([
 ], 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, 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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"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"] }]
+            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  (pointerStart)=\"pullNode(); selectNode()\"\n>\n  <default-node\n    #htmlWrapper\n    [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  </default-node>\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  (pointerStart)=\"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  (pointerStart)=\"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  (pointerStart)=\"pullNode(); selectNode()\"\n/>\n\n<!-- Template group node  -->\n<svg:g\n  *ngIf=\"nodeModel.node.type === 'template-group' && groupNodeTemplate\"\n  class=\"selectable\"\n  (pointerStart)=\"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-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
             }], nodeTemplate: [{
@@ -2514,7 +2533,7 @@ class DefsComponent {
         this.defaultColor = 'rgb(177, 177, 183)';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefsComponent, selector: "defs[flowDefs]", inputs: { markers: "markers" }, ngImport: i0, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefsComponent, selector: "defs[flowDefs]", inputs: { markers: "markers" }, ngImport: i0, template: "<svg:marker\n  *ngFor=\"let marker of markers | keyvalue\"\n  [attr.id]=\"marker.key\"\n  [attr.markerWidth]=\"marker.value.width ?? 16.5\"\n  [attr.markerHeight]=\"marker.value.height ?? 16.5\"\n  [attr.orient]=\"marker.value.orient ?? 'auto-start-reverse'\"\n  viewBox=\"-10 -10 20 20\"\n  [attr.markerUnits]=\"marker.value.markerUnits ?? 'userSpaceOnUse'\"\n  refX=\"0\"\n  refY=\"0\"\n>\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow-closed' || !marker.value.type\"\n    class=\"marker__arrow_closed\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    [style.fill]=\"marker.value.color ?? defaultColor\"\n    points=\"-5,-4 1,0 -5,4 -5,-4\"\n  />\n\n  <polyline\n    *ngIf=\"marker.value.type === 'arrow'\"\n    class=\"marker__arrow_default\"\n    [style.stroke]=\"marker.value.color ?? defaultColor\"\n    [style.stroke-width]=\"marker.value.strokeWidth ?? 2\"\n    points=\"-5,-4 0,0 -5,4\"\n  />\n</svg:marker>\n", styles: [".marker__arrow_default{stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;fill:none}.marker__arrow_closed{stroke-linecap:round;stroke-linejoin:round}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefsComponent, decorators: [{
             type: Component,
@@ -2534,13 +2553,11 @@ const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
 class BackgroundComponent {
-    set background(value) {
-        this.backgroundSignal.set(value);
-    }
     constructor() {
         this.viewportService = inject(ViewportService);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
-        this.backgroundSignal = signal({ type: 'solid', color: defaultBg });
+        this.settingsService = inject(FlowSettingsService);
+        this.backgroundSignal = this.settingsService.background;
         this.scaledGap = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2574,20 +2591,12 @@ class BackgroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", inputs: { background: ["background", "background", transform] }, ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BackgroundComponent, selector: "g[background]", ngImport: i0, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackgroundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'g[background]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"backgroundSignal().type === 'dots'\">\n  <svg:pattern\n    [attr.id]=\"patternId\"\n    [attr.x]=\"x()\"\n    [attr.y]=\"y()\"\n    [attr.width]=\"scaledGap()\"\n    [attr.height]=\"scaledGap()\"\n    patternUnits=\"userSpaceOnUse\"\n  >\n    <svg:circle\n      [attr.cx]=\"patternSize()\"\n      [attr.cy]=\"patternSize()\"\n      [attr.r]=\"patternSize()\"\n      [attr.fill]=\"patternColor()\"\n    />\n  </svg:pattern>\n\n  <svg:rect\n    x=\"0\"\n    y=\"0\"\n    width=\"100%\"\n    height=\"100%\"\n    [attr.fill]=\"patternUrl\"\n  />\n</ng-container>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
-                type: Input,
-                args: [{ required: true, transform }]
-            }] } });
-function transform(background) {
-    return typeof background === 'string'
-        ? { type: 'solid', color: background }
-        : background;
-}
+        }], ctorParameters: function () { return []; } });
 
 // TODO: too general purpose nane
 class RootSvgContextDirective {
@@ -2696,10 +2705,6 @@ class VflowComponent {
         this.componentEventBusService = inject(ComponentEventBusService);
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
-        /**
-         * Background for flow
-         */
-        this.background = '#fff';
         this.optimization = {
             computeLayersOnInit: true
         };
@@ -2744,6 +2749,7 @@ class VflowComponent {
         this.edgesChange$ = this.edgesChangeService.changes$;
         // #endregion
         this.markers = this.flowEntitiesService.markers;
+        this.minimap = this.flowEntitiesService.minimap;
     }
     // #endregion
     // #region SETTINGS
@@ -2780,6 +2786,12 @@ class VflowComponent {
     set handlePositions(handlePositions) {
         this.flowSettingsService.handlePositions.set(handlePositions);
     }
+    /**
+     * Background for flow
+     */
+    set background(value) {
+        this.flowSettingsService.background.set(transformBackground(value));
+    }
     /**
      * Global rule if you can or can't select entities
      */
@@ -2899,7 +2911,7 @@ class VflowComponent {
             FlowSettingsService,
             ComponentEventBusService,
             KeyboardService
-        ], 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 }); }
+        ], 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 />\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  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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]" }, { 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,
@@ -2918,7 +2930,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      [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"] }]
+                    ], 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 />\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  <!-- Minimap -->\n  <ng-container *ngIf=\"minimap() as minimap\">\n    <ng-container [ngTemplateOutlet]=\"minimap.template()\" />\n  </ng-container>\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: [{
@@ -3004,9 +3016,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['touchstart']
             }] } });
 
+class MinimapModel {
+    constructor() {
+        this.template = signal(null);
+    }
+}
+
+class MiniMapComponent {
+    constructor() {
+        this.entitiesService = inject(FlowEntitiesService);
+        this.flowSettingsService = inject(FlowSettingsService);
+        this.viewportService = inject(ViewportService);
+        this.injector = inject(Injector);
+        /**
+         * The color outside the viewport (invisible area)
+         */
+        this.maskColor = `rgba(215, 215, 215, 0.6)`;
+        /**
+         * The minimap stroke color
+         */
+        this.strokeColor = `rgb(200, 200, 200)`;
+        this.minimapOffset = 10;
+        this.minimapScale = computed(() => {
+            if (this.scaleOnHoverSignal()) {
+                return this.hovered() ? 0.4 : 0.2;
+            }
+            return 0.2;
+        });
+        this.viewportColor = computed(() => this.flowSettingsService.background().color ?? '#fff');
+        this.hovered = signal(false);
+        this.minimapPoint = computed(() => {
+            switch (this.minimapPosition()) {
+                case 'top-left':
+                    return { x: this.minimapOffset, y: this.minimapOffset };
+                case 'top-right':
+                    return {
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
+                        y: this.minimapOffset
+                    };
+                case 'bottom-left':
+                    return {
+                        x: this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                    };
+                case 'bottom-right':
+                    return {
+                        x: this.flowSettingsService.computedFlowWidth() - this.minimapWidth() - this.minimapOffset,
+                        y: this.flowSettingsService.computedFlowHeight() - this.minimapHeight() - this.minimapOffset
+                    };
+            }
+        });
+        this.minimapWidth = computed(() => this.flowSettingsService.computedFlowWidth() * this.minimapScale());
+        this.minimapHeight = computed(() => this.flowSettingsService.computedFlowHeight() * this.minimapScale());
+        this.viewportTransform = computed(() => {
+            const viewport = this.viewportService.readableViewport();
+            let scale = 1 / viewport.zoom;
+            let x = -(viewport.x * this.minimapScale()) * scale;
+            x /= this.minimapScale();
+            let y = -(viewport.y * this.minimapScale()) * scale;
+            y /= this.minimapScale();
+            scale /= this.minimapScale();
+            return `translate(${x}, ${y}) scale(${scale})`;
+        });
+        this.boundsViewport = computed(() => {
+            const nodes = this.entitiesService.nodes();
+            return getViewportForBounds(getNodesBounds(nodes), this.flowSettingsService.computedFlowWidth(), this.flowSettingsService.computedFlowHeight(), -Infinity, 1.5, 0);
+        });
+        this.minimapTransform = computed(() => {
+            const vport = this.boundsViewport();
+            const x = vport.x * this.minimapScale();
+            const y = vport.y * this.minimapScale();
+            const scale = vport.zoom * this.minimapScale();
+            return `translate(${x} ${y}) scale(${scale})`;
+        });
+        this.minimapPosition = signal('bottom-right');
+        this.scaleOnHoverSignal = signal(false);
+    }
+    /**
+     * The corner of the flow where to render a mini-map
+     */
+    set position(value) {
+        this.minimapPosition.set(value);
+    }
+    /**
+     * Make a minimap bigger on hover
+     */
+    set scaleOnHover(value) {
+        this.scaleOnHoverSignal.set(value);
+    }
+    ngOnInit() {
+        const model = new MinimapModel();
+        model.template.set(this.minimap);
+        this.entitiesService.minimap.set(model);
+    }
+    trackNodes(idx, { node }) {
+        return node;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniMapComponent, selector: "mini-map", inputs: { position: "position", maskColor: "maskColor", strokeColor: "strokeColor", scaleOnHover: "scaleOnHover" }, viewQueries: [{ propertyName: "minimap", first: true, predicate: ["minimap"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DefaultNodeComponent, selector: "default-node", inputs: ["selected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mini-map', template: "<ng-template #minimap>\n  <svg:rect\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    [attr.stroke]=\"strokeColor\"\n    fill=\"none\"\n  />\n\n  <svg:svg\n    [attr.x]=\"minimapPoint().x\"\n    [attr.y]=\"minimapPoint().y\"\n    [attr.width]=\"minimapWidth()\"\n    [attr.height]=\"minimapHeight()\"\n    (mouseover)=\"hovered.set(true)\"\n    (mouseleave)=\"hovered.set(false)\"\n  >\n    <svg:rect\n      [attr.width]=\"minimapWidth()\"\n      [attr.height]=\"minimapHeight()\"\n      [attr.fill]=\"maskColor\"\n    />\n\n    <svg:g [attr.transform]=\"minimapTransform()\">\n      <svg:rect\n        [attr.fill]=\"viewportColor()\"\n        [attr.transform]=\"viewportTransform()\"\n        [attr.width]=\"minimapWidth()\"\n        [attr.height]=\"minimapHeight()\"\n      />\n\n      <ng-container\n        *ngFor=\"let model of entitiesService.nodes(); trackBy: trackNodes\"\n      >\n        <svg:foreignObject\n          *ngIf=\"model.node.type === 'default' || model.node.type === 'html-template' || model.isComponentType\"\n          [attr.transform]=\"model.pointTransform()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n        >\n          <default-node\n            [selected]=\"model.selected()\"\n            [style.width.px]=\"model.size().width\"\n            [style.height.px]=\"model.size().height\"\n            [style.max-width.px]=\"model.size().width\"\n            [style.max-height.px]=\"model.size().height\"\n          >\n            <div [outerHTML]=\"model.text()\"></div>\n          </default-node>\n        </svg:foreignObject>\n\n        <svg:rect\n          *ngIf=\"model.node.type === 'default-group' || model.node.type === 'template-group'\"\n          class=\"default-group-node\"\n          rx=\"5\"\n          ry=\"5\"\n          [attr.transform]=\"model.pointTransform()\"\n          [class.default-group-node_selected]=\"model.selected()\"\n          [attr.width]=\"model.size().width\"\n          [attr.height]=\"model.size().height\"\n          [style.stroke]=\"model.color()\"\n          [style.fill]=\"model.color()\"\n        />\n\n      </ng-container>\n    </svg:g>\n  </svg:svg>\n</ng-template>\n", styles: [".default-group-node{stroke-width:1.5px;fill-opacity:.05}.default-group-node_selected{stroke-width:2px}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], maskColor: [{
+                type: Input
+            }], strokeColor: [{
+                type: Input
+            }], scaleOnHover: [{
+                type: Input
+            }], minimap: [{
+                type: ViewChild,
+                args: ['minimap', { static: true }]
+            }] } });
+
 const components = [
     VflowComponent,
     NodeComponent,
+    DefaultNodeComponent,
     EdgeComponent,
     EdgeLabelComponent,
     ConnectionComponent,
@@ -3014,6 +3142,7 @@ const components = [
     DefsComponent,
     BackgroundComponent,
     ResizableComponent,
+    MiniMapComponent
 ];
 const directives = [
     SpacePointContextDirective,
@@ -3038,13 +3167,15 @@ class VflowModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, declarations: [VflowComponent,
             NodeComponent,
+            DefaultNodeComponent,
             EdgeComponent,
             EdgeLabelComponent,
             ConnectionComponent,
             HandleComponent,
             DefsComponent,
             BackgroundComponent,
-            ResizableComponent, SpacePointContextDirective,
+            ResizableComponent,
+            MiniMapComponent, SpacePointContextDirective,
             MapContextDirective,
             RootSvgReferenceDirective,
             RootSvgContextDirective,
@@ -3057,26 +3188,28 @@ class VflowModule {
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
-            HandleTemplateDirective], imports: [CommonModule], exports: [VflowComponent,
+            HandleTemplateDirective], imports: [NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe], exports: [VflowComponent,
             HandleComponent,
             ResizableComponent,
-            SelectableDirective, NodeHtmlTemplateDirective,
+            SelectableDirective,
+            MiniMapComponent, NodeHtmlTemplateDirective,
             GroupNodeTemplateDirective,
             EdgeLabelHtmlTemplateDirective,
             EdgeTemplateDirective,
             ConnectionTemplateDirective,
             HandleTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VflowModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [NgIf, NgFor, NgTemplateOutlet, NgComponentOutlet, KeyValuePipe],
                     exports: [
                         VflowComponent,
                         HandleComponent,
                         ResizableComponent,
                         SelectableDirective,
+                        MiniMapComponent,
                         ...templateDirectives
                     ],
                     declarations: [...components, ...directives, ...templateDirectives],
@@ -3089,5 +3222,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, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
+export { ChangesControllerDirective, ConnectionControllerDirective, ConnectionTemplateDirective, CustomDynamicNodeComponent, CustomNodeComponent, EdgeLabelHtmlTemplateDirective, EdgeTemplateDirective, GroupNodeTemplateDirective, HandleComponent, HandleTemplateDirective, MiniMapComponent, NodeHtmlTemplateDirective, ResizableComponent, SelectableDirective, VflowComponent, VflowModule, isComponentDynamicNode, isComponentStaticNode, isDefaultDynamicGroupNode, isDefaultDynamicNode, isDefaultStaticGroupNode, isDefaultStaticNode, isDynamicNode, isStaticNode, isTemplateDynamicGroupNode, isTemplateDynamicNode, isTemplateStaticGroupNode, isTemplateStaticNode };
 //# sourceMappingURL=ngx-vflow.mjs.map