ngx-vflow 0.15.0 → 0.16.0

package/fesm2022/ngx-vflow.mjs

@@ -1213,6 +1213,176 @@ function getPointOnBezier(sourcePoint, targetPoint, sourceControl, targetControl
     return getPointOnLineByRatio(getPointOnLineByRatio(fromSourceToFirstControl, fromFirstControlToSecond, ratio), getPointOnLineByRatio(fromFirstControlToSecond, fromSecondControlToTarget, ratio), ratio);
 }
 
+const handleDirections = {
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 },
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 },
+};
+function getEdgeCenter(source, target) {
+    const xOffset = Math.abs(target.x - source.x) / 2;
+    const centerX = target.x < source.x ? target.x + xOffset : target.x - xOffset;
+    const yOffset = Math.abs(target.y - source.y) / 2;
+    const centerY = target.y < source.y ? target.y + yOffset : target.y - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+}
+const getDirection = ({ source, sourcePosition = 'bottom', target, }) => {
+    if (sourcePosition === 'left' || sourcePosition === 'right') {
+        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+// ith this function we try to mimic a orthogonal edge routing behaviour
+// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+function getPoints({ source, sourcePosition = 'bottom', target, targetPosition = 'top', offset, }) {
+    const sourceDir = handleDirections[sourcePosition];
+    const targetDir = handleDirections[targetPosition];
+    const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
+    const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
+    const dir = getDirection({
+        source: sourceGapped,
+        sourcePosition,
+        target: targetGapped,
+    });
+    const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const sourceGapOffset = { x: 0, y: 0 };
+    const targetGapOffset = { x: 0, y: 0 };
+    const [defaultCenterX, defaultCenterY] = getEdgeCenter(source, target);
+    // opposite handle positions, default case
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+        centerX = defaultCenterX;
+        centerY = defaultCenterY;
+        //    --->
+        //    |
+        // >---
+        const verticalSplit = [
+            { x: centerX, y: sourceGapped.y },
+            { x: centerX, y: targetGapped.y },
+        ];
+        //    |
+        //  ---
+        //  |
+        const horizontalSplit = [
+            { x: sourceGapped.x, y: centerY },
+            { x: targetGapped.x, y: centerY },
+        ];
+        if (sourceDir[dirAccessor] === currDir) {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+    }
+    else {
+        // sourceTarget means we take x from source and y from target, targetSource is the opposite
+        const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+        const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+        // this handles edges with same handle positions
+        if (dirAccessor === 'x') {
+            points = sourceDir.x === currDir ? targetSource : sourceTarget;
+        }
+        else {
+            points = sourceDir.y === currDir ? sourceTarget : targetSource;
+        }
+        if (sourcePosition === targetPosition) {
+            const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);
+            // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+            if (diff <= offset) {
+                const gapOffset = Math.min(offset - 1, offset - diff);
+                if (sourceDir[dirAccessor] === currDir) {
+                    sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+                else {
+                    targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+            }
+        }
+        // these are conditions for handling mixed handle positions like Right -> Bottom for example
+        if (sourcePosition !== targetPosition) {
+            const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
+            const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+                (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+            if (flipSourceTarget) {
+                points = dirAccessor === 'x' ? sourceTarget : targetSource;
+            }
+        }
+        const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+        const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+        const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+        const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+        // we want to place the label on the longest segment of the edge
+        if (maxXDistance >= maxYDistance) {
+            centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+            centerY = points[0].y;
+        }
+        else {
+            centerX = points[0].x;
+            centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+        }
+    }
+    const pathPoints = [
+        source,
+        { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
+        ...points,
+        { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
+        target,
+    ];
+    return [pathPoints, centerX, centerY];
+}
+function getBend(a, b, c, size) {
+    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
+    const { x, y } = b;
+    // no bend
+    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+        return `L${x} ${y}`;
+    }
+    // first segment is horizontal
+    if (a.y === y) {
+        const xDir = a.x < c.x ? -1 : 1;
+        const yDir = a.y < c.y ? 1 : -1;
+        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+}
+function smoothStepPath(source, target, sourcePosition, targetPosition, borderRadius = 5) {
+    const [points, labelX, labelY] = getPoints({
+        source,
+        sourcePosition,
+        target,
+        targetPosition,
+        offset: 20
+    });
+    const path = points.reduce((res, p, i) => {
+        let segment = '';
+        if (i > 0 && i < points.length - 1) {
+            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
+        }
+        else {
+            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
+        }
+        res += segment;
+        return res;
+    }, '');
+    return {
+        path,
+        points: {
+            // TODO start and end points temporary unavailable for this path
+            start: { x: labelX, y: labelY },
+            center: { x: labelX, y: labelY },
+            end: { x: labelX, y: labelY },
+        }
+    };
+}
+
 class EdgeModel {
     constructor(edge) {
         this.edge = edge;
@@ -1282,6 +1452,10 @@ class EdgeModel {
                     return straightPath(source.pointAbsolute(), target.pointAbsolute(), this.usingPoints);
                 case 'bezier':
                     return bezierPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, this.usingPoints);
+                case 'smooth-step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position);
+                case 'step':
+                    return smoothStepPath(source.pointAbsolute(), target.pointAbsolute(), source.rawHandle.position, target.rawHandle.position, 0);
             }
         });
         this.edgeLabels = {};
@@ -1558,6 +1732,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['onEdgesChange.select.many']
             }] } });
 
+function isGroupNode(node) {
+    return node.node.type === 'default-group' || node.node.type === 'template-group';
+}
+
 class NodeRenderingService {
     constructor() {
         this.flowEntitiesService = inject(FlowEntitiesService);
@@ -1565,6 +1743,12 @@ class NodeRenderingService {
             return this.flowEntitiesService.nodes()
                 .sort((aNode, bNode) => aNode.renderOrder() - bNode.renderOrder());
         });
+        this.groups = computed(() => {
+            return this.nodes().filter(n => isGroupNode(n));
+        });
+        this.nonGroups = computed(() => {
+            return this.nodes().filter(n => !isGroupNode(n));
+        });
         this.maxOrder = computed(() => {
             return Math.max(...this.flowEntitiesService.nodes().map((n) => n.renderOrder()));
         });
@@ -2470,6 +2654,8 @@ class ConnectionComponent {
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
                     case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             if (status.state === 'connection-validation') {
@@ -2487,6 +2673,8 @@ class ConnectionComponent {
                 switch (this.model.curve) {
                     case 'straight': return straightPath(sourcePoint, targetPoint).path;
                     case 'bezier': return bezierPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'smooth-step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition).path;
+                    case 'step': return smoothStepPath(sourcePoint, targetPoint, sourcePosition, targetPosition, 0).path;
                 }
             }
             return null;
@@ -2592,12 +2780,15 @@ const defaultBg = '#fff';
 const defaultGap = 20;
 const defaultDotSize = 2;
 const defaultDotColor = 'rgb(177, 177, 183)';
+const defaultImageScale = 0.1;
+const defaultRepeated = true;
 class BackgroundComponent {
     constructor() {
         this.viewportService = inject(ViewportService);
         this.rootSvg = inject(RootSvgReferenceDirective).element;
         this.settingsService = inject(FlowSettingsService);
         this.backgroundSignal = this.settingsService.background;
+        // DOTS PATTERN
         this.scaledGap = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2608,7 +2799,13 @@ class BackgroundComponent {
         });
         this.x = computed(() => this.viewportService.readableViewport().x % this.scaledGap());
         this.y = computed(() => this.viewportService.readableViewport().y % this.scaledGap());
-        this.patternColor = computed(() => this.backgroundSignal().color ?? defaultDotColor);
+        this.patternColor = computed(() => {
+            const bg = this.backgroundSignal();
+            if (bg.type === 'dots') {
+                return bg.color ?? defaultDotColor;
+            }
+            return defaultDotColor;
+        });
         this.patternSize = computed(() => {
             const background = this.backgroundSignal();
             if (background.type === 'dots') {
@@ -2616,6 +2813,56 @@ class BackgroundComponent {
             }
             return 0;
         });
+        // IMAGE PATTERN
+        this.bgImageSrc = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' ? background.src : '';
+        });
+        this.imageSize = toSignal(toObservable(this.backgroundSignal).pipe(switchMap(() => createImage(this.bgImageSrc())), map((image) => ({ width: image.naturalWidth, height: image.naturalHeight }))), { initialValue: { width: 0, height: 0 } });
+        this.scaledImageWidth = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().width * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.scaledImageHeight = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                const zoom = background.fixed ? 1 : this.viewportService.readableViewport().zoom;
+                return this.imageSize().height * zoom * (background.scale ?? defaultImageScale);
+            }
+            return 0;
+        });
+        this.imageX = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().x;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().x % this.scaledImageWidth();
+            }
+            return 0;
+        });
+        this.imageY = computed(() => {
+            const background = this.backgroundSignal();
+            if (background.type === 'image') {
+                if (!background.repeat) {
+                    return background.fixed ? 0 : this.viewportService.readableViewport().y;
+                }
+                return background.fixed
+                    ? 0
+                    : this.viewportService.readableViewport().y % this.scaledImageHeight();
+            }
+            return 0;
+        });
+        this.repeated = computed(() => {
+            const background = this.backgroundSignal();
+            return background.type === 'image' && (background.repeat ?? defaultRepeated);
+        });
         // Without ID there will be pattern collision for several flows on the page
         // Later pattern ID may be exposed to API
         this.patternId = id();
@@ -2631,12 +2878,19 @@ 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: "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 }); }
+    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\n<ng-container *ngIf=\"backgroundSignal().type === 'image'\">\n  <ng-container *ngIf=\"repeated()\">\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\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\n  <ng-container *ngIf=\"!repeated()\">\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\"\n    />\n  </ng-container>\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" }]
+            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\n<ng-container *ngIf=\"backgroundSignal().type === 'image'\">\n  <ng-container *ngIf=\"repeated()\">\n    <svg:pattern\n      [attr.id]=\"patternId\"\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      patternUnits=\"userSpaceOnUse\"\n    >\n      <svg:image\n        [attr.href]=\"bgImageSrc()\"\n        [attr.width]=\"scaledImageWidth()\"\n        [attr.height]=\"scaledImageHeight()\"\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\n  <ng-container *ngIf=\"!repeated()\">\n    <svg:image\n      [attr.x]=\"imageX()\"\n      [attr.y]=\"imageY()\"\n      [attr.width]=\"scaledImageWidth()\"\n      [attr.height]=\"scaledImageHeight()\"\n      [attr.href]=\"bgImageSrc()\"\n    />\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; } });
+function createImage(url) {
+    const image = new Image();
+    image.src = url;
+    return new Promise(resolve => {
+        image.onload = () => resolve(image);
+    });
+}
 
 // TODO: too general purpose nane
 class RootSvgContextDirective {
@@ -2746,9 +3000,12 @@ class VflowComponent {
         this.keyboardService = inject(KeyboardService);
         this.injector = inject(Injector);
         this.optimization = {
-            computeLayersOnInit: true
+            computeLayersOnInit: true,
+            detachedGroupsLayer: false
         };
         this.nodeModels = computed(() => this.nodeRenderingService.nodes());
+        this.groups = computed(() => this.nodeRenderingService.groups());
+        this.nonGroups = computed(() => this.nodeRenderingService.nonGroups());
         this.edgeModels = computed(() => this.flowEntitiesService.validEdges());
         // #endregion
         // #region OUTPUTS
@@ -2952,7 +3209,7 @@ class VflowComponent {
             ComponentEventBusService,
             KeyboardService,
             OverlaysService
-        ], 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\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 }); }
+        ], 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    <ng-container *ngIf=\"optimization.detachedGroupsLayer\">\n      <!-- Groups -->\n      <svg:g\n        *ngFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\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 nonGroups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!optimization.detachedGroupsLayer\">\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    </ng-container>\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\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,
@@ -2972,7 +3229,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 />\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\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    <ng-container *ngIf=\"optimization.detachedGroupsLayer\">\n      <!-- Groups -->\n      <svg:g\n        *ngFor=\"let model of groups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [groupNodeTemplate]=\"groupNodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\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 nonGroups(); trackBy: trackNodes\"\n        node\n        [nodeModel]=\"model\"\n        [nodeTemplate]=\"nodeTemplateDirective?.templateRef\"\n        [attr.transform]=\"model.pointTransform()\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"!optimization.detachedGroupsLayer\">\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    </ng-container>\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\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: [{
@@ -3085,7 +3342,13 @@ class MiniMapComponent {
             }
             return 0.2;
         });
-        this.viewportColor = computed(() => this.flowSettingsService.background().color ?? '#fff');
+        this.viewportColor = computed(() => {
+            const bg = this.flowSettingsService.background();
+            if (bg.type === 'dots' || bg.type === 'solid') {
+                return bg.color ?? '#fff';
+            }
+            return '#fff';
+        });
         this.hovered = signal(false);
         this.minimapPoint = computed(() => {
             switch (this.minimapPosition()) {