feat(client): uninstall ngx-vflow

Author: dokolyski

libs/blog/roadmap/feature-roadmap/src/lib/feature-roadmap.component.html

@@ -1,43 +1,73 @@
-<svg #svg width="100%" height="100%" xmlns:svg="http://www.w3.org/1999/html">
-  <svg:defs>
-    <marker
-      id="arrowhead"
-      markerWidth="6"
-      markerHeight="8"
-      refX="0"
-      refY="4"
-      orient="auto"
-    >
-      <polygon points="0 0, 6 4, 0 8" fill="#FDF5FD" />
-    </marker>
-  </svg:defs>
-
+<svg width="100%" height="100%" xmlns:svg="http://www.w3.org/1999/html">
   <svg:foreignObject height="0" width="0" overflow="visible">
     <div
-      class="flex h-fit w-fit translate-x-80 translate-y-16 flex-col items-center gap-16"
+      class="relative flex h-fit w-fit translate-x-80 translate-y-16 flex-col items-center gap-16"
     >
       @for (layer of roadmapLayers(); track layer.parentNode.id) {
-        <div class="flex w-full flex-col items-center gap-12">
+        <div #layerEl class="flex w-full flex-col items-center gap-16">
+          @if (!$last) {
+            @let layerHeightWithGap = layerEl.clientHeight + 64 - 24 || 0;
+            <svg
+              [attr.height]="layerHeightWithGap"
+              style="position: absolute"
+              overflow="visible"
+              width="100"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <svg:defs>
+                <marker
+                  id="arrowhead"
+                  markerWidth="6"
+                  markerHeight="8"
+                  refX="0"
+                  refY="4"
+                  orient="auto"
+                >
+                  <polygon points="0 0, 6 4, 0 8" fill="#FDF5FD" />
+                </marker>
+              </svg:defs>
+              <line
+                [attr.y2]="layerHeightWithGap"
+                x1="50"
+                y1="0"
+                x2="50"
+                stroke="white"
+                stroke-width="4"
+                marker-end="url(#arrowhead)"
+              />
+            </svg>
+          }
+
+          <!-- layer parent node-->
           @if (layer.parentNode.nodeType === 'primary') {
             <al-ui-roadmap-primary-node [node]="layer.parentNode" />
           } @else if (layer.parentNode.nodeType === 'angular-love') {
             <al-ui-roadmap-angular-love-node
               [node]="layer.parentNode"
             ></al-ui-roadmap-angular-love-node>
           }
+
+          <!-- layer child nodes-->
           @if (layer.childNodes?.length) {
-            <div class="flex gap-12">
-              @for (node of layer.childNodes | leftSlice; track node.id) {
-                <div class="flex gap-10">
-                  @if (node.nodeType === 'secondary') {
-                    <al-ui-roadmap-secondary-node [node]="node" />
-                  } @else if (node.nodeType === 'cluster') {
-                    <al-ui-roadmap-cluster
-                      [cluster]="$any(node)"
-                    ></al-ui-roadmap-cluster>
-                  }
-                </div>
-              }
+            <div
+              #allChildNodesEl
+              class="translate-x-[{{
+                allChildNodesEl.clientWidth - leftChildNodesEl.clientWidth
+              }}px] flex gap-12"
+            >
+              <div #leftChildNodesEl class="flex gap-12">
+                @for (node of layer.childNodes | leftSlice; track node.id) {
+                  <div class="flex gap-10">
+                    @if (node.nodeType === 'secondary') {
+                      <al-ui-roadmap-secondary-node [node]="node" />
+                    } @else if (node.nodeType === 'cluster') {
+                      <al-ui-roadmap-cluster
+                        [cluster]="$any(node)"
+                      ></al-ui-roadmap-cluster>
+                    }
+                  </div>
+                }
+              </div>
               @for (node of layer.childNodes | rightSlice; track node.id) {
                 <div class="flex gap-10">
                   @if (node.nodeType === 'secondary') {

libs/blog/roadmap/feature-roadmap/src/lib/feature-roadmap.component.ts

@@ -61,11 +61,22 @@ export class FeatureRoadmapComponent {
       parentNodeId: '2',
       title: 'Change Detection',
     },
+    {
+      id: '9',
+      parentNodeId: '2',
+      previousNodeId: '4',
+      title: 'Dynamic Components',
+    },
     {
       id: '4',
       parentNodeId: '2',
       title: 'Styling',
     },
+    {
+      id: '11',
+      parentNodeId: '2',
+      title: 'Ble ble ble',
+    },
     {
       id: '6',
       parentNodeId: '4',

package.json

@@ -58,7 +58,6 @@
     "hono": "^4.4.5",
     "lint-staged": "^15.0.2",
     "ngx-skeleton-loader": "^8.1.0",
-    "ngx-vflow": "^1.4.2",
     "prettier-plugin-organize-attributes": "^1.0.0",
     "rxjs": "~7.8.1",
     "sanitize-html": "^2.13.0",