feat: prevent SVG rendering artifacts by introducing a rendering offset in path calculations

Author: shuzarevich

projects/f-flow/src/f-connection/common/domain/adaptive-curve-builder.ts

@@ -10,6 +10,8 @@ import {
   IFConnectionBuilderResponse,
 } from '../../f-connection-builder';
 
+const RENDERING_OFFSET = 0.0002; // Prevents SVG rendering artifacts at path endpoints;
+
 /**
  * AdaptiveCurveBuilder
  *
@@ -184,7 +186,7 @@ export class AdaptiveCurveBuilder implements IFConnectionBuilder {
     const c1 = AdaptiveCurveBuilder._softControl(sourceSide, p0, p3, h0);
     const c2 = AdaptiveCurveBuilder._softControl(targetSide, p3, p0, h3);
 
-    const path = `M ${p0.x} ${p0.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${p3.x + 0.0002} ${p3.y + 0.0002}`;
+    const path = `M ${p0.x} ${p0.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${p3.x + RENDERING_OFFSET} ${p3.y + RENDERING_OFFSET}`;
 
     const connectionCenter = new CalculateConnectionCenterHandler().handle(
       new CalculateConnectionCenterRequest([p0, c1, c2, p3]),

projects/f-flow/src/f-connection/common/domain/f-bezier.path-builder.ts

@@ -10,6 +10,8 @@ import {
   IFConnectionBuilderResponse,
 } from '../../f-connection-builder';
 
+const RENDERING_OFFSET = 0.0002; // Prevents SVG rendering artifacts at path endpoints;
+
 export class FBezierPathBuilder implements IFConnectionBuilder {
   private static _getConnectorOffset(distance: number, offset: number): number {
     if (distance >= offset) {
@@ -52,7 +54,7 @@ export class FBezierPathBuilder implements IFConnectionBuilder {
 
     const targetAnglePoint = FBezierPathBuilder._getAnglePoint(targetSide, target, source, offset);
 
-    const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + 0.0002} ${target.y + 0.0002}`;
+    const path = `M ${source.x} ${source.y} C ${sourceAnglePoint.x} ${sourceAnglePoint.y}, ${targetAnglePoint.x} ${targetAnglePoint.y}, ${target.x + RENDERING_OFFSET} ${target.y + RENDERING_OFFSET}`;
 
     const connectionCenter = new CalculateConnectionCenterHandler().handle(
       new CalculateConnectionCenterRequest([source, sourceAnglePoint, targetAnglePoint, target]),

projects/f-flow/src/f-connection/common/domain/f-segment.path-builder.ts

@@ -15,6 +15,8 @@ import {
 } from '../../f-connection-builder';
 import { IMap } from '../../../domain';
 
+const RENDERING_OFFSET = 0.0002; // Prevents SVG rendering artifacts at path endpoints;
+
 const CONNECTOR_SIDE_POINT: IMap<IPoint> = {
   [EFConnectableSide.LEFT]: PointExtensions.initialize(-1, 0),
 
@@ -76,7 +78,7 @@ export class FSegmentPathBuilder implements IFConnectionBuilder {
     const directionAccessor = direction.x !== 0 ? 'x' : 'y';
     const currentDirection = direction[directionAccessor];
 
-    let points: IPoint[] = [];
+    let points: IPoint[];
     const sourceGapOffset = PointExtensions.initialize();
     const targetGapOffset = PointExtensions.initialize();
 
@@ -182,7 +184,7 @@ export class FSegmentPathBuilder implements IFConnectionBuilder {
       if (i > 0 && i < points.length - 1) {
         segment = this._getBend(points[i - 1], p, points[i + 1], borderRadius);
       } else if (i === points.length - 1) {
-        segment = this._buildLastLineSegment(i, p);
+        segment = this._buildLastLineSegment(p);
       } else {
         segment = this._buildMoveOrLineSegment(i, p);
       }
@@ -217,7 +219,7 @@ export class FSegmentPathBuilder implements IFConnectionBuilder {
     return `${index === 0 ? 'M' : 'L'}${point.x} ${point.y}`;
   }
 
-  private _buildLastLineSegment(index: number, point: IPoint): string {
-    return `L${point.x + 0.0002} ${point.y + 0.0002}`;
+  private _buildLastLineSegment(point: IPoint): string {
+    return `L${point.x + RENDERING_OFFSET} ${point.y + RENDERING_OFFSET}`;
   }
 }

projects/f-flow/src/f-connection/common/domain/f-straight.path-builder.ts

@@ -8,10 +8,12 @@ import {
   IFConnectionBuilderResponse,
 } from '../../f-connection-builder';
 
+const RENDERING_OFFSET = 0.0002; // Prevents SVG rendering artifacts at path endpoints;
+
 export class FStraightPathBuilder implements IFConnectionBuilder {
   public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
     const { source, target } = request;
-    const path = `M ${source.x} ${source.y} L ${target.x + 0.0002} ${target.y + 0.0002}`;
+    const path = `M ${source.x} ${source.y} L ${target.x + RENDERING_OFFSET} ${target.y + RENDERING_OFFSET}`;
 
     const connectionCenter = new CalculateConnectionCenterHandler().handle(
       new CalculateConnectionCenterRequest([source, target]),