Merge pull request #121 from neuroglia-io/feat-dagre-center-to-node

Feat dagre center to node
neuroglia-io · Jan 24, 2025 · 6b99f80 · 6b99f80
2 parents 2bfda38 + 72a3449
commit 6b99f80
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/src/Neuroglia.Blazor.Dagre/DagreGraph.razor b/src/Neuroglia.Blazor.Dagre/DagreGraph.razor
@@ -5,10 +5,10 @@
 
 @if (graph != null) {
     <svg class="svg-definitions"
-         version="1.2"
-         baseProfile="tiny"
-         xmlns="http://www.w3.org/2000/svg"
-         xmlns:xlink="http://www.w3.org/1999/xlink">
+    version="1.2"
+    baseProfile="tiny"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
         <defs>
             <svg id="center-target" viewBox="0 0 29.334 29.334">
                 <!-- from https://www.svgrepo.com/svg/174124/circle-outline-with-huge-dot-at-the-center -->
@@ -40,15 +40,15 @@
     <div class="graph-container">
         <CascadingValue Value="graph">
             <svg @ref="graphReference"
-                class="graph-canvas @graph.CssClass"
-                 width="@(graph.Width != 0 ? graph.Width.ToString() : "100%")"
-                 height="@(graph.Height != 0 ? graph.Height.ToString() : "100%")"
-                @onmouseenter="HandleOnMouseEnter"
-                @onmouseleave="HandleOnMouseLeave"
-                @onmousedown="HandleOnMouseDown"
-                @onmouseup="HandleOnMouseUp"
-                @onmousemove="HandleOnMouseMove"
-                @onwheel="HandleOnWheel"
+            class="graph-canvas @graph.CssClass"
+            width="@(graph.Width != 0 ? graph.Width.ToString() : "100%")"
+            height="@(graph.Height != 0 ? graph.Height.ToString() : "100%")"
+            @onmouseenter="HandleOnMouseEnter"
+            @onmouseleave="HandleOnMouseLeave"
+            @onmousedown="HandleOnMouseDown"
+            @onmouseup="HandleOnMouseUp"
+            @onmousemove="HandleOnMouseMove"
+            @onwheel="HandleOnWheel"
             >
                 <defs>
                     @foreach(var def in graph.ReferenceableComponentTypes)
@@ -57,8 +57,8 @@
                     }
                 </defs>
                 <g 
-                    class="graph"
-                    transform="scale(@(graph.Scale.ToInvariantString())) translate(@graph.X.ToInvariantString(), @graph.Y.ToInvariantString())"
+                class="graph"
+                transform="scale(@(graph.Scale.ToInvariantString())) translate(@graph.X.ToInvariantString(), @graph.Y.ToInvariantString())"
                 >
                     <g class="clusters">
                         @foreach(var cluster in graph.AllClusters.Values)
@@ -138,9 +138,9 @@
                 </button>
             }
             <!--<button class="btn" type="button" @onclick="ToggleOrientationAsync" title="toggle orientation">
-                <svg>
-                    <use href="#toggle-orientation" />
-                </svg>
+            <svg>
+            <use href="#toggle-orientation" />
+            </svg>
             </button>-->
         </div>
     </div>
@@ -306,8 +306,18 @@
         if (this.graph == null) 
             return;
         var position = await this.JSRuntime.InvokeAsync<BoundingBox>("neuroglia.blazor.getCenter", this.graphReference);
-        this.graph.X = position.X / (double)this.graph.Scale;
-        this.graph.Y = position.Y / (double)this.graph.Scale;
+        this.graph.X = position.X;
+        this.graph.Y = position.Y;
+        this.isDirty = true;
+    }
+
+    public virtual async Task CenterAsync(INodeViewModel node)
+    {
+        if (this.graph == null)
+            return;
+        var position = await this.JSRuntime.InvokeAsync<BoundingBox>("neuroglia.blazor.getCenter", this.graphReference, node);
+        this.graph.X = position.X;
+        this.graph.Y = position.Y;
         this.isDirty = true;
     }
 

diff --git a/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre-interop.js b/src/Neuroglia.Blazor.Dagre/wwwroot/neuroglia-blazor-dagre-interop.js
@@ -34,12 +34,18 @@
     window.neuroglia.blazor.preventScroll = (graphElement) => {
         graphElement.addEventListener("wheel", e => e.preventDefault(), { passive: false });
     }
-    window.neuroglia.blazor.getCenter = (graphElement) => {
+    window.neuroglia.blazor.getCenter = (graphElement, node) => {
+        const scale = window.neuroglia.blazor.getScale(graphElement);
         const svgBounds = graphElement.getBoundingClientRect();
         const graphBounds = graphElement.getBBox();
+        const center = {
+            x: (((svgBounds.width / scale) - graphBounds.width) / 2),
+            y: (((svgBounds.height / scale) - graphBounds.height) / 2)
+        };
+        if (!node) return center;
         return {
-            x: ((svgBounds.width - graphBounds.width) / 2) - Math.min(graphBounds.x, 0),
-            y: ((svgBounds.height - graphBounds.height) / 2) - Math.min(graphBounds.y, 0)
+            x: center.x + ((graphBounds.width / 2) - node.x),
+            y: center.y + ((graphBounds.height / 2) - node.y),
         };
     }
     window.neuroglia.blazor.getScale = (graphElement) => {