forum-logic/src/classes/display/force-directed.js

import {
  DEFAULT_OVERLAP_FORCE,
  DEFAULT_TARGET_RADIUS,
  DEFAULT_TIME_STEP,
  DISTANCE_FACTOR,
  EPSILON,
  MINIMUM_FORCE,
  VISCOSITY_FACTOR,
  TIME_DILATION_FACTOR,
  MINIMUM_VELOCITY,
} from '../../util/constants.js';
import { Edge } from '../supporting/edge.js';
import { WeightedDirectedGraph } from '../supporting/wdg.js';
import { Box } from './box.js';
import { Rectangle, Vector } from './geometry.js';

// Render children with absolute css positioning.

// Let there be a force between elements such that the force between
// any two elements is along the line between their centers,
// so that the elements repel when too close but attract when too far.

// The equilibrium distance can be tuned, e.g. can be scaled by an input.

// NOTE: (with optional overlay preferring a grid or some other shape?),

// NOTE: Could also allow user input dragging elements.
// What might be neat here is to implement a force-based resistance effect;
// basically, the mouse pointer drags the element with a spring rather than directly.
// If the shape of the graph resists the transformation,
// the distance between the element and the cursor should increase.

// On an interval, compute forces among the elements.
// Simulate the effects of these forces

// NOTE: Impart random nudges, and resolve their effects to a user-visible resolution
// before rendering.

// NOTE: When mouse is in our box, we could hijack the scroll actions to zoom in/out.

export class ForceDirectedGraph extends WeightedDirectedGraph {
  constructor(name, parentEl, options = {}) {
    super(name, options);
    this.box = new Box(name, parentEl, options);
    this.box.addClass('fixed');
    this.box.addClass('force-directed-graph');
    this.intervalTask = null;
    this.canvas = window.document.createElement('canvas');
    this.box.el.style.width = `${options.width ?? 800}px`;
    this.box.el.style.height = `${options.height ?? 600}px`;
    this.box.el.appendChild(this.canvas);
    this.fitCanvasToGraph();
    this.nodes = [];
    this.edges = [];
  }

  fitCanvasToGraph() {
    [this.canvas.width, this.canvas.height] = this.box.getGeometry().dimensions;
  }

  addVertex(...args) {
    const vertex = super.addVertex(...args);
    const box = this.box.addBox(vertex.id);
    box.addClass('absolute');
    box.addClass('vertex');
    box.el.style.left = '0px';
    box.el.style.top = '0px';
    box.velocity = Vector.from([0, 0]);
    box.setInnerHTML(vertex.getHTML());
    box.vertex = vertex;
    this.nodes.push(box);
    vertex.onUpdate = () => {
      box.setInnerHTML(vertex.getHTML());
    };
    return vertex;
  }

  addEdge(type, from, to, ...rest) {
    const fromBox = this.nodes.find(({ name }) => name === from);
    const toBox = this.nodes.find(({ name }) => name === to);
    if (!fromBox) throw new Error(`from ${from}: Node not found`);
    if (!toBox) throw new Error(`to ${to}: Node not found`);

    const edge = super.addEdge(type, from, to, ...rest);
    const box = this.box.addBox(Edge.getKey({ from, to, type }));
    box.addClass('absolute');
    box.addClass('edge');
    // TODO: Center between nodes
    box.el.style.left = '0px';
    box.el.style.top = '0px';
    box.velocity = Vector.from([0, 0]);
    box.setInnerHTML(edge.getHTML());
    box.edge = edge;
    this.edges.push(box);
    return edge;
  }

  setEdgeWeight(...args) {
    const edge = super.setEdgeWeight(...args);
    edge.displayEdgeNode();
    return edge;
  }

  static pairwiseForce(boxA, boxB, targetRadius) {
    const rectA = boxA instanceof Rectangle ? boxA : boxA.getGeometry();
    const centerA = rectA.center;
    const rectB = boxB instanceof Rectangle ? boxB : boxB.getGeometry();
    const centerB = rectB.center;
    const r = centerB.subtract(centerA);

    // Apply a stronger force when overlap occurs
    if (rectA.doesOverlap(rectB)) {
      // if their centers actually coincide we can just randomize the direction.
      if (r.magnitudeSquared === 0) {
        return Vector.randomUnitVector(rectA.dim).scale(DEFAULT_OVERLAP_FORCE);
      }
      return r.normalize().scale(DEFAULT_OVERLAP_FORCE);
    }
    // repel if closer than targetRadius
    // attract if farther than targetRadius
    const force = -DISTANCE_FACTOR * (r.magnitude - targetRadius);
    return r.normalize().scale(force);
  }

  async runUntilEquilibrium(tDelta = DEFAULT_TIME_STEP) {
    if (this.intervalTask) {
      return Promise.resolve();
    }
    return new Promise((resolve) => {
      this.intervalTask = setInterval(() => {
        const { atEquilibrium } = this.computeEulerFrame(tDelta);
        if (atEquilibrium) {
          clearInterval(this.intervalTask);
          this.intervalTask = null;
          resolve();
        }
      }, tDelta * TIME_DILATION_FACTOR);
    });
  }

  computeEulerFrame(tDelta = DEFAULT_TIME_STEP) {
    // Compute all net forces
    const netForces = Array.from(Array(this.nodes.length), () => Vector.from([0, 0]));
    let atEquilibrium = true;
    for (const boxA of this.nodes) {
      const idxA = this.nodes.indexOf(boxA);
      for (const boxB of this.nodes.slice(idxA + 1)) {
        const idxB = this.nodes.indexOf(boxB);
        const force = ForceDirectedGraph.pairwiseForce(boxA, boxB, DEFAULT_TARGET_RADIUS);
        // Ignore forces below a certain threshold
        if (force.magnitude >= MINIMUM_FORCE) {
          netForces[idxA] = netForces[idxA].subtract(force);
          netForces[idxB] = netForces[idxB].add(force);
        }
      }
    }

    // Compute motions
    for (const box of this.nodes) {
      const idx = this.nodes.indexOf(box);
      box.velocity = box.velocity.add(netForces[idx].scale(tDelta));
      // Apply some drag
      box.velocity = box.velocity.scale(1 - VISCOSITY_FACTOR);
    }

    for (const box of this.nodes) {
      if (box.velocity.magnitude >= MINIMUM_VELOCITY) {
        atEquilibrium = false;
        box.move(box.velocity);
      }
    }

    // Translate everything to keep coordinates positive
    // TODO: Consider centering and scaling to viewport size
    const topLeft = this.box.getGeometry().startPoint;
    const translate = Vector.zeros(2);
    for (const box of this.nodes) {
      const rect = box.getGeometry();
      for (const vertex of rect.vertices) {
        translate[0] = Math.max(translate[0], topLeft[0] - vertex[0]);
        translate[1] = Math.max(translate[1], topLeft[1] - vertex[1]);
      }
    }
    for (const box of this.nodes) {
      box.move(translate);
    }

    this.fitCanvasToGraph();

    return { atEquilibrium };
  }
}