@davidsouther/agathon 0.0.0-stage → 0.0.0

package/src/layout/hulls/arrange.ts

@@ -0,0 +1,94 @@
+import { getPositionOnCircle, smallestIntersectingRadius } from "../../geometry/circle.ts";
+import type { NodeCircle, NodeId, NodeRadius, Point } from "../../types.ts";
+import type { LayoutGraph } from "../types.ts";
+import { getGraphProps, getNodeProps } from "../util.ts";
+
+/**
+ * Strategy function to return the positions & locations of the children of a
+ * given node within a graph.
+ */
+export type ArrangeChildrenFn = (graph: LayoutGraph, id: NodeId) => NodeCircle[];
+
+/**
+ * Arrange the children of a node in a graph, keeping their current (x, y)
+ * positions.
+ */
+export function retainPosition(graph: LayoutGraph, id: NodeId): NodeCircle[] {
+  return [...graph.children(id)].map((cid) => {
+    const {
+      point: { x, y },
+      radius: r,
+    } = getNodeProps(graph.node(cid)!).geometry;
+    return { id, x, y, r };
+  });
+}
+
+/**
+ * Arrange the children of a node in a graph.
+ * @param graph
+ *   @property minimumSpacing - minimum spacing between two neighboring nodes in
+ * a circular arrangement.
+ *   @property hullRotation - see JSDoc for getCircleArrangement.
+ * @param id - id to get child nodes from.
+ */
+export function arrangeChildCircles(graph: LayoutGraph, id: NodeId): NodeCircle[] {
+  const { baseRadius, hullRotation } = getGraphProps(graph);
+  const arrangementOrder: NodeId[] = [...graph.children(id)].sort();
+  const sortedChildRadii: NodeRadius[] = getNodeRadii(graph, arrangementOrder);
+
+  // Find the smallest radius child circles can be arranged on to ensure a
+  // minimum distance of minimumSpacing between each circle
+  const arrangementRadius = smallestIntersectingRadius(
+    sortedChildRadii.map((a) => a.r),
+    baseRadius * 2,
+  );
+  // Lay out child circles on a virtual circle of smallestIntersectingRadius
+  const arrangement: NodeCircle[] = getCircleArrangement(
+    sortedChildRadii,
+    arrangementRadius,
+    hullRotation,
+  );
+
+  return arrangement;
+}
+
+/**
+ * Evenly arrange an array of circles on a circle of particular radius
+ * @param circles
+ * @param arrangementRadius - radius of the virtual circle to arrange circles on
+ * @param hullRotation - the angle circle arrangement starts from. I.e., with
+ * hullRotation = 45, first circle's position will be
+ * {
+ *      x: cos(0 + hullRotation) * arrangementRadius,
+ *      y: sin(0 + hullRotation) * arrangementRadius
+ * }
+ */
+export function getCircleArrangement(
+  circles: NodeRadius[],
+  arrangementRadius: number,
+  hullRotation = 0,
+): NodeCircle[] {
+  return circles.map((circle, i) => {
+    const position: Point = getPositionOnCircle(
+      arrangementRadius,
+      circles.length,
+      i,
+      -hullRotation,
+    );
+
+    return { ...circle, ...position };
+  });
+}
+
+/**
+ * Obtain an array of nodes' ids and radii for calculations that don't require
+ * positions of node circles.
+ * @param graph
+ * @param nodes - nodes to get {id, r} from.
+ */
+export function getNodeRadii(graph: LayoutGraph, nodes: NodeId[]): NodeRadius[] {
+  return nodes.map((id) => ({
+    id,
+    r: getNodeProps(graph.node(id)!).geometry.radius,
+  }));
+}

package/src/layout/hulls/hulls.ts

@@ -0,0 +1,243 @@
+/**
+ * @fileoverview When running layouts, children of nodes are handled using Hulls
+ * & Segments, as opposed to subgraphs. To not include children during the
+ * layout, these helpers will keep track of all the children its found, their
+ * edges, and their parent associations, removing them from the graph safely
+ * until they can be added back after layout of top-level nodes is complete.
+ */
+
+import { assertExists } from "../../assert.ts";
+import { getSmallestEnclosingCircle } from "../../geometry/circle.ts";
+import { TsabreGraph } from "../../tsabre/graph.ts";
+import type { Circle, NodeId, Point } from "../../types.ts";
+import type { LayoutEdge, LayoutGraph, LayoutNode } from "../types.ts";
+import {
+  bottomUpBFTraversal,
+  getEdgeProps,
+  getGraphProps,
+  getNodeProps,
+  getSegmentProps,
+  position,
+} from "../util.ts";
+
+import { type ArrangeChildrenFn, arrangeChildCircles } from "./arrange.ts";
+
+/**
+ * A childrenHandler returns a pair of functions bound to a known set of
+ * children.
+ */
+export function handler(): {
+  remove: (input: LayoutGraph) => LayoutGraph;
+  replace: (input: LayoutGraph) => LayoutGraph;
+} {
+  let graph: LayoutGraph;
+  return {
+    /**
+     * Stash child nodes, their parent links, and their edges. This is done so
+     * that only top-level nodes participate in ranking, ordering and
+     * positioning.
+     */
+    remove(input: LayoutGraph) {
+      graph = input;
+      const output = new TsabreGraph<LayoutNode, LayoutEdge>();
+      for (const id of graph.children()) {
+        output.setNode(id, graph.node(id)!);
+      }
+
+      // Create an edge in the new graph for every top level segment. For those
+      // edges, sum the underlying edge weights and choose the largest
+      // minLength value.
+      for (const segment of graph.topSegments) {
+        for (const edge of segment.edges) {
+          const source = graph.ancestors(edge.source).pop()!;
+          const target = graph.ancestors(edge.target).pop()!;
+          const layout = getEdgeProps(edge);
+          if (output.hasEdge({ source, target })) {
+            const { minLength, weight } = getEdgeProps(output.edge({ source, target })!);
+            layout.minLength = Math.max(layout.minLength, minLength);
+            layout.weight += weight;
+          } else {
+            output.setEdge({ source, target }, { source, target, layout });
+          }
+        }
+      }
+
+      // Most of properties of Symbol(layout) are static and don't change from
+      // graph to graph, because they're set to default. However, fas and
+      // virtualNodeLayout are dynamic, and the values set on first layout() run
+      // need to be passed on to subsequent runs of partialLayout(). That's why
+      // it's important to transfer Symbol(layout) from one version of graph to
+      // another.
+      Object.assign(getGraphProps(output), getGraphProps(input));
+
+      return output;
+    },
+
+    /**
+     * Copy updated values out of temporary graph back to original graph.
+     */
+    replace(input: LayoutGraph) {
+      for (const inSeg of input.topSegments) {
+        const outSeg = graph.topSegment(inSeg.source, inSeg.target);
+        if (!outSeg) continue;
+        getSegmentProps(outSeg).points = getSegmentProps(inSeg).points;
+      }
+
+      // See end of remove().
+      if (graph) {
+        Object.assign(getGraphProps(graph), getGraphProps(input));
+      }
+
+      return graph;
+    },
+  };
+}
+
+/** Options to control how hull layout will proceed. */
+export interface HullLayoutOptions {
+  // The node that layout is being triggered for, to minimize the neighborhood
+  // to perform layout on.
+  triggeredNodeId?: NodeId;
+  // Strategy function to use when performing child layout. Defaults to
+  // arrangeChildCircles.
+  arrangeChildren?: ArrangeChildrenFn;
+}
+
+function fillOptions(options?: NodeId | HullLayoutOptions): HullLayoutOptions {
+  if (typeof options === "string") {
+    return { triggeredNodeId: options };
+  } else {
+    return options ?? {};
+  }
+}
+
+/**
+ * Traverse the entire graph and calculate relative HULL positions of a
+ * particular set of nodes. Traversal order is bottom-up breadth-first.
+ *
+ * General case:
+ * All nodes' hull positions are recalculated or calculated for the first time.
+ * Set of nodes = all nodes of the graph.
+ *
+ * Specific case:
+ * A node with triggeredNodeId has been expanded/collapsed -
+ * triggered - hull positions of only a subset of nodes will be recalculated.
+ *
+ * Set of nodes = "children of all ancestors of the triggered
+ * node".
+ *
+ * Children get traversed along the way, so the traversed set is only
+ * "all ancestors of the triggered node".
+ *
+ * @param graph - the graph to be re-laid out
+ * @param triggeredNodeId - See manager/manager.ts::run(). ID of the
+ * expanded/collapsed node. Each such event triggers a partial layout
+ * recalculation. If no event fired and/or we need the complete layout
+ * recalculation, no triggeredNodeId is passed.
+ */
+export function layout(graph: LayoutGraph, options?: NodeId | HullLayoutOptions): void {
+  options = fillOptions(options);
+  const arrangeChildren = options.arrangeChildren ?? arrangeChildCircles;
+  const triggeredNodeId = options.triggeredNodeId;
+  const subsetToLayout: NodeId[] = triggeredNodeId
+    ? graph.ancestors(triggeredNodeId)
+    : bottomUpBFTraversal(graph);
+
+  const { baseRadius } = getGraphProps(graph);
+
+  for (const id of subsetToLayout) {
+    const node = graph.node(id)!;
+    const nodeProps = getNodeProps(node);
+
+    // Expanded node's radius (and subsequently height and width) is handled
+    // here, by layout(), because it depends on expanded node's children.
+    // Collapsed node's radius is handled by
+    // drag_manager.ts::NoopLayoutManager::collapsing(), where it is set to
+    // its pre-expansion value, which was cached by
+    // NoopLayoutManager::expanding().
+    if (node.expanded && graph.hasChildren(id)) {
+      const childArrangement = arrangeChildren(graph, id);
+
+      // Having layed out the child circles, find the smallest circle to enclose
+      // them. Why not use a circle of existing smallestIntersectingRadius?
+      // Considering the sizes of child circles can vary, using an enclosing
+      // circle of smallestIntersectingRadius and centered at [0, 0] leads to
+      // uneven distances between child circles and the enclosing circle (hull).
+      // getEnclosingCircle() finds an enclosing circle potentially of different
+      // size and centered at a different point.
+      const hull = getSmallestEnclosingCircle(childArrangement, baseRadius);
+
+      // Align the inner children circles with the enclosing hull
+      // Why not add hull position to the parent node position? Due to relative
+      // positioning, changing parent's position doesn't change children nodes'
+      // positions relative to the parent. If child nodes are  misaligned and/or
+      // extend beyond parent hull's boundaries, changing
+      // parent's position won't change it.
+      for (const circle of childArrangement) {
+        setPosition(circle.id, { x: circle.x - hull.x, y: circle.y - hull.y });
+      }
+
+      nodeProps.geometry.resize(hull.r | 0);
+    }
+  }
+
+  function setPosition(id: NodeId, newPosition: Point) {
+    const node = assertExists(graph.node(id), `children::layout::changePosition: ${id} missing`);
+    // Truncate x and y to whole numbers
+    newPosition.x |= 0;
+    newPosition.y |= 0;
+    getNodeProps(node).geometry.moveTo(newPosition);
+  }
+}
+
+/**
+ * @param graph
+ * @param moveId - the node being moved inside its parent's hull. Starts with
+ *     the dragged node directly, then its parent, then its parent, and so on to
+ *     the top level.
+ * @param delta - drag amount.
+ * @param hullPadding - padding for getSmallestEnclosingCircle
+ */
+export function moveNodeBy(
+  graph: LayoutGraph,
+  moveId: NodeId,
+  delta: Point,
+  hullPadding: number = getGraphProps(graph).baseRadius,
+): void {
+  // Step [1].
+  const moved = getNodeProps(graph.node(moveId)!).geometry;
+  moved.drag(delta);
+
+  // There are no siblings and no parent to position.
+  if (graph.hasParent(moveId)) {
+    const neighborhood: Set<NodeId> = graph.children(graph.parent(moveId));
+    const neighborCircles: Circle[] = [];
+
+    for (const neighborId of neighborhood) {
+      neighborCircles.push({
+        ...position(graph.node(neighborId)!),
+        r: getNodeProps(graph.node(neighborId)!).geometry.height / 2,
+      });
+    }
+
+    // Step [2]. getSmallestEnclosingCircle takes in the neighborhood of the
+    // moved node and returns a minimal enclosing circle, SHIFTED to accommodate
+    // for the user-introduced changes to the layout. The minimal enclosing
+    // circle is assigned to the parent circle and its children (moved node's
+    // neighborhood) are shifted by the parent's new center position.
+    const enclosingCircle = getSmallestEnclosingCircle(neighborCircles, hullPadding);
+    const props = getNodeProps(graph.node(graph.parent(moveId))!);
+    props.geometry.resize(enclosingCircle.r);
+    const drag = { x: -enclosingCircle.x, y: -enclosingCircle.y };
+
+    // Step [3].
+    for (const neighborId of neighborhood) {
+      const neighbor = getNodeProps(graph.node(neighborId)!).geometry;
+      neighbor.drag(drag);
+    }
+
+    // Step [4]. Recursively repeat the entire process, but now, for the
+    // ancestor chain. Parent's center shift is the delta now.
+    moveNodeBy(graph, graph.parent(moveId), enclosingCircle, hullPadding);
+  }
+}

package/src/layout/hulls/segments.ts

@@ -0,0 +1,174 @@
+/**
+ * @fileoverview Functions to calculate layouts for graph segments.
+ */
+
+import { assert, assertExists } from "../../assert.ts";
+import { CircleGeometry as Circle } from "../../geometry.ts";
+import { segmentId } from "../../tsabre/graph.ts";
+import type { Edge, FullGraph, Point, Segment } from "../../types.ts";
+import {
+  getGraphProps,
+  getLineSegmentBetweenNodes,
+  getNodeProps,
+  getSegmentProps,
+} from "../util.ts";
+
+/**
+ * When a segment path ends without crossing a hull (eg an edge between a parent
+ * and a child), the final edge will leave at this angle from the child.
+ */
+const DEGREE_ANGLE_TO_PARENT = 45;
+const ANGLE_TO_PARENT = (DEGREE_ANGLE_TO_PARENT * Math.PI) / 180;
+const COS_TO_PARENT = Math.sin(ANGLE_TO_PARENT);
+const SIN_TO_PARENT = Math.cos(ANGLE_TO_PARENT);
+
+/**
+ * Given a graph, update points for a given collection of segments (or all
+ * segments).
+ *
+ * When laying out children relatively, segment points must be relative to the
+ * _target_ node.
+ */
+export function assignSegmentPoints(
+  graph: FullGraph,
+  segments: Iterable<Segment<Edge>> = graph.allSegments,
+): void {
+  const { childrenRelative, bendLongEdges } = getGraphProps(graph);
+  for (const segment of segments) {
+    const props = getSegmentProps(segment);
+    if (graph.parent(segment.source) === graph.parent(segment.target)) {
+      props.points = topCurve(segment);
+    } else {
+      props.points = hulls(segment);
+    }
+
+    if (childrenRelative) {
+      assert(props.points.length >= 2, `segment ${segmentId(segment)} has insufficient points`);
+
+      const median = (props.points.length / 2) | 0;
+      let { x: lsx, y: lsy } = props.points[median - 1];
+      let { x: ltx, y: lty } = props.points[median];
+      if (lsx > ltx) {
+        const [ttx, tty] = [ltx, lty];
+        [ltx, lty] = [lsx, lsy];
+        [lsx, lsy] = [ttx, tty];
+        props.label.flippedBy180 = true;
+      } else {
+        props.label.flippedBy180 = false;
+      }
+
+      props.label.position.x = (lsx + ltx) / 2;
+      props.label.position.y = (lsy + lty) / 2;
+      props.label.rotation = (Math.atan2(lty - lsy, ltx - lsx) * 180) / Math.PI;
+    }
+  }
+
+  /**
+   * Calculate the points along a path between two nodes who share a parent.
+   * These links may have corresponding edges which have their `points` array
+   * filled in from the layout algorithm. These points represent the "safe" path
+   * for an edge to travel while minimizing crossing other nodes.
+   *
+   * To build the PointTuple array, we create a list of node positions and sizes
+   * for the source, each point in the edge, and the target. Nodes created for
+   * edge points have a size 0. If there is no corresponding edge, or no edge
+   * points, this is then just a two-element array. Otherwise it is N + 2, for
+   * each intervening point.
+   *
+   * With this array, the PointTuple for each node is the point on its border
+   * closest to the center of the adjacent point of the array.
+   */
+  function topCurve(segment: Segment<Edge>): Point[] {
+    const source = getNodeProps(assertExists(graph.node(segment.source))).geometry;
+    const target = getNodeProps(assertExists(graph.node(segment.target))).geometry;
+
+    let edgePoints = (getSegmentProps(segment).points || []) as Point[];
+
+    if (edgePoints.length <= 2 || !bendLongEdges) {
+      const { source: s, target: t } = getLineSegmentBetweenNodes(source, target);
+      edgePoints = [s, t];
+    } else {
+      const closePoint = Circle.point(edgePoints[1]);
+      const farPoint = Circle.point(edgePoints[edgePoints.length - 2]);
+      edgePoints[0] = getLineSegmentBetweenNodes(source, closePoint).source;
+      edgePoints[edgePoints.length - 1] = getLineSegmentBetweenNodes(farPoint, target).target;
+    }
+
+    return edgePoints;
+  }
+
+  /**
+   * For a segment from a child to a parent, hulls calculates the PointTuple
+   * pointing at the "next" point out. This first follows the segment path to
+   * the top-level segment (a segment with both nodes having the same parent).
+   * After calculating the topCurve, it then finds the closest point on the edge
+   * of the child to the adjacent topCurve point. This repeats down until the
+   * segment itself is laid out.
+   */
+  function hulls(segment: Segment<Edge>): Point[] {
+    // From a segment, track up to find the outermost point
+    const path: Array<Segment<Edge>> = [segment];
+    while (segment.next) {
+      segment = segment.next;
+      path.unshift(segment);
+    }
+
+    let line: { source: Point; target: Point } = {
+      source: { x: 0, y: 0 },
+      target: { x: 0, y: 0 },
+    };
+
+    if (graph.parent(path[0].source) === graph.parent(path[0].target)) {
+      // Find the next closest point
+      const hullPoints = topCurve(path[0]);
+      if (path.length === 1) {
+        return hullPoints;
+      }
+
+      if (path[1].target === path[0].source) {
+        line.source.x = hullPoints[0].x;
+        line.source.y = hullPoints[0].y;
+        line.target.x = hullPoints[1].x;
+        line.target.y = hullPoints[1].y;
+      } else {
+        const l = hullPoints.length - 1;
+        line.source.x = hullPoints[l].x;
+        line.source.y = hullPoints[l].y;
+        line.target.x = hullPoints[l - 1].x;
+        line.target.y = hullPoints[l - 1].y;
+      }
+    } else {
+      // line segment from child to parent
+      const parent = getNodeProps(assertExists(graph.node(path[0].source))).geometry;
+      const child = getNodeProps(assertExists(graph.node(path[0].target))).geometry;
+
+      // Get a point `target` on parent that is ANGLE_TO_PARENT from parent's
+      // center.
+      const target = Circle.point(parent);
+      const out = target.clone();
+      out.move({
+        x: parent.radius * 2 * COS_TO_PARENT,
+        y: parent.radius * 2 * SIN_TO_PARENT,
+      });
+      const tmp = { x: target.x, y: target.y };
+      parent.clipi([out, tmp]);
+      target.moveTo(tmp);
+
+      // Get the line from the target point on the parent to the child.
+      line = getLineSegmentBetweenNodes(target, child);
+    }
+
+    for (let i = 1; i < path.length; i++) {
+      if (childrenRelative) {
+        // adjust line source by path[i].target
+        const { x, y } = getNodeProps(assertExists(graph.node(path[i].target))).geometry;
+        line.source.x -= x;
+        line.source.y -= y;
+      }
+      const source = getNodeProps(assertExists(graph.node(path[i].source))).geometry;
+      line = getLineSegmentBetweenNodes(source, Circle.point(line.source));
+    }
+
+    return [line.source, line.target];
+  }
+}

package/src/layout/hulls.ts

@@ -0,0 +1,3 @@
+export * as arrange from "./hulls/arrange.ts";
+export * as hulls from "./hulls/hulls.ts";
+export * as segments from "./hulls/segments.ts";

package/src/layout/manager/child_manager.ts

@@ -0,0 +1,42 @@
+import type { NodeId } from "../../types.ts";
+import { hulls } from "../hulls.ts";
+
+import type { NoopLayoutManager } from "./manager.ts";
+
+/**
+ * ChildManager handles running layout for child nodes.
+ */
+export class ChildManager {
+  protected manager: NoopLayoutManager;
+  constructor(manager: NoopLayoutManager) {
+    this.manager = manager;
+  }
+
+  runLayoutAfterNodeExpanded(id: NodeId): void {
+    // Collapsed node's bounds are set in collapsing() from the cached
+    // pre-expansion bounds.
+    this.manager.drag.expanding(id);
+
+    this.doChildLayout(id);
+
+    this.doNodeResize(id);
+  }
+
+  runLayoutAfterNodeCollapsed(id: NodeId): void {
+    // Collapsed node's bounds are set in collapsing() from the cached
+    // pre-expansion bounds.
+    this.manager.drag.collapsing(id);
+
+    this.doNodeResize(id);
+  }
+
+  protected doChildLayout(parent: NodeId): void {
+    hulls.layout(this.manager.graph, parent);
+  }
+
+  protected doNodeResize(id: NodeId): void {
+    // Expanded node's dimensions & affected nodes' positions are set
+    // in run() => hulls.ts::layout().
+    this.manager.run(this.manager.graph, id);
+  }
+}

package/src/layout/manager/drag_manager.ts

@@ -0,0 +1,112 @@
+import { assertExists } from "../../assert.ts";
+import { origin } from "../../geometry/geometry.ts";
+import type { NodeId, Point } from "../../types.ts";
+import { moveNodeBy as moveNodeInHullBy } from "../hulls/hulls.ts";
+import { assignSegmentPoints } from "../hulls/segments.ts";
+import { findSegmentNeighborhood, getGraphProps, getNodeProps } from "../util.ts";
+
+import type { NoopLayoutManager } from "./manager.ts";
+
+/** A class to delegate node dragging functionality for a layout manager. */
+export class NoopDragManager {
+  // tracks the radius of a node pre-expansion, so it can be reset after
+  // collapse
+  protected readonly preExpansionRadius = new Map<NodeId, number>();
+
+  protected movingNode: NodeId | undefined = undefined;
+
+  draggable = false;
+
+  protected readonly layoutManager: NoopLayoutManager;
+  constructor(layoutManager: NoopLayoutManager) {
+    this.layoutManager = layoutManager;
+  }
+
+  isDragging(id?: NodeId): boolean {
+    if (id) {
+      return id === this.movingNode;
+    } else {
+      return this.movingNode !== undefined;
+    }
+  }
+
+  startMovingNode(id: NodeId): void {
+    this.movingNode = id;
+  }
+
+  stopMovingNode(): void {
+    this.movingNode = undefined;
+  }
+
+  moveNodeBy(id: NodeId, delta: Point): void {
+    // noop
+  }
+
+  expanding(id: NodeId): void {
+    const target = assertExists(
+      this.layoutManager.graph.node(id),
+      `DragManager::expanding ${id} missing`,
+    );
+    this.preExpansionRadius.set(id, getNodeProps(target).geometry.height / 2);
+  }
+
+  collapsing(id: NodeId): void {
+    const graph = this.layoutManager.graph;
+    /*
+      Children can't have a dx and dy before they are laid out because their
+      final position is an offset of their parent's position, and their parent's
+      position depends on their final position, so including dx and dy makes a
+      dependency loop. Without them, the children's position can be determined.
+     */
+    // Reset dx, dy for all descendants.
+    for (const cid of graph.children(id)) {
+      resetPosition(cid);
+    }
+
+    const target = assertExists(graph.node(id), `DragManager::collapsing target ${id} missing`);
+    const newRadius =
+      this.preExpansionRadius.get(id) || getGraphProps(this.layoutManager.graph).baseRadius;
+    this.preExpansionRadius.delete(id);
+    const { geometry } = getNodeProps(target);
+    geometry.resize(newRadius);
+
+    function resetPosition(nid: NodeId) {
+      const node = assertExists(
+        graph.node(nid),
+        `DragManager::collapsing::resetPosition ${nid} missing`,
+      );
+      getNodeProps(node).geometry.dragTo(origin());
+      for (const cid of graph.children(nid)) {
+        resetPosition(cid);
+      }
+    }
+  }
+}
+
+/** A class to delegate node dragging functionality for a layout manager. */
+export class DragManager extends NoopDragManager {
+  override draggable = true;
+
+  constructor(layoutManager: NoopLayoutManager) {
+    super(layoutManager);
+  }
+
+  override moveNodeBy(id: NodeId, delta: Point): void {
+    if (this.movingNode !== id) {
+      if (this.movingNode !== undefined) {
+        this.stopMovingNode();
+      }
+      this.startMovingNode(id);
+    }
+
+    const graph = this.layoutManager.graph;
+    moveNodeInHullBy(graph, id, delta);
+    const root = graph.ancestors(id).pop();
+    assertExists(root, `DragManager::moveNodeBy ${id} must have ancestor in order to move`);
+
+    // After a node has been moved, update the end points of segments in its
+    // neighborhood.
+    assignSegmentPoints(graph, findSegmentNeighborhood(this.layoutManager.graph, root));
+    this.layoutManager.updateAt(root);
+  }
+}