Fix: Hierarchical layout recenter logic

Author: AlexIchenskiy

src/renderer/canvas/canvas-renderer.ts

@@ -290,8 +290,19 @@ export class CanvasRenderer<N extends INodeBase, E extends IEdgeBase> extends Em
     // Graph view is a bounding box of the graph nodes that takes into
     // account node positions (x, y) and node sizes (style: size + border width)
     const graphView = graph.getBoundingBox();
-    const graphMiddleX = options?.anchorX === 'center' ? graphView.x + graphView.width / 2 : 0;
-    const graphMiddleY = options?.anchorY === 'center' ? graphView.y + graphView.height / 2 : 0;
+    const graphMiddleX =
+      options?.anchorX === 'center'
+        ? graphView.x + graphView.width / 2
+        : options?.anchorX === 'end'
+        ? graphView.x + graphView.width
+        : 0;
+
+    const graphMiddleY =
+      options?.anchorY === 'center'
+        ? graphView.y + graphView.height / 2
+        : options?.anchorY === 'end'
+        ? graphView.y + graphView.height
+        : 0;
 
     // Simulation view is actually a renderer view (canvas) but in the coordinate system of
     // the simulator: node position (x, y). We want to fit a graph view into a simulation view.

src/renderer/shared.ts

@@ -37,8 +37,8 @@ export interface IRendererSettingsInit extends IRendererSettings {
 }
 
 export interface IFitZoomTransformOptions {
-  anchorX?: 'center' | 'start';
-  anchorY?: 'center' | 'start';
+  anchorX?: 'start' | 'center' | 'end';
+  anchorY?: 'start' | 'center' | 'end';
 }
 
 export type RendererEvents = {

src/views/orb-view.ts

@@ -293,15 +293,14 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
 
   recenter(onRendered?: () => void) {
     const layout = this._settings.layout;
+    const isHorizontal =
+      layout.type === 'hierarchical' && (layout.options as IHierarchicalLayoutOptions).orientation === 'horizontal';
+    const isVertical =
+      layout.type === 'hierarchical' && (layout.options as IHierarchicalLayoutOptions).orientation === 'vertical';
+    const reversed = (layout.options as IHierarchicalLayoutOptions).reversed;
     const recenterOptions: IFitZoomTransformOptions = {
-      anchorX:
-        layout.type === 'hierarchical' && (layout.options as IHierarchicalLayoutOptions).orientation === 'horizontal'
-          ? 'start'
-          : 'center',
-      anchorY:
-        layout.type === 'hierarchical' && (layout.options as IHierarchicalLayoutOptions).orientation === 'vertical'
-          ? 'start'
-          : 'center',
+      anchorX: isHorizontal ? (reversed ? 'end' : 'start') : 'center',
+      anchorY: isVertical ? (reversed ? 'end' : 'start') : 'center',
     };
     const fitZoomTransform = this._renderer.getFitZoomTransform(this._graph, recenterOptions);