@antv/layout 0.2.0 → 0.2.3

package/src/layout/concentric.ts

@@ -0,0 +1,289 @@
+/**
+ * @fileOverview concentric layout
+ * @author shiwu.wyy@antfin.com
+ * this algorithm refers to <cytoscape.js> - https://github.com/cytoscape/cytoscape.js/
+ */
+
+import {
+  OutNode,
+  Edge,
+  PointTuple,
+  Size,
+  IndexMap,
+  ConcentricLayoutOptions
+} from "./types";
+import { isString, isArray, isNumber, getDegree, isObject, isFunction } from "../util";
+import { Base } from "./base";
+
+type INode = OutNode & {
+  degree: number;
+  size: number | PointTuple | Size;
+};
+
+type NodeMap = {
+  [key: string]: INode;
+};
+
+/**
+ * 同心圆布局
+ */
+export class ConcentricLayout extends Base {
+  /** 布局中心 */
+  public center: PointTuple;
+
+  public nodeSize: number | PointTuple = 30;
+
+  /** min spacing between outside of nodes (used for radius adjustment) */
+  public minNodeSpacing: number = 10;
+
+  /** same as minNodeSpacing. min spacing between outside of nodes (used for radius adjustment) */
+  public nodeSpacing: number | number[] | ((d?: unknown) => number) | undefined = 10;
+
+  /** prevents node overlap, may overflow boundingBox if not enough space */
+  public preventOverlap: boolean = false;
+
+  /** how many radians should be between the first and last node (defaults to full circle) */
+  public sweep: number | undefined;
+
+  /** whether levels have an equal radial distance betwen them, may cause bounding box overflow */
+  public equidistant: boolean = false;
+
+  /** where nodes start in radians */
+  public startAngle: number = (3 / 2) * Math.PI;
+
+  /** whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) */
+  public clockwise: boolean = true;
+
+  /** the letiation of concentric values in each level */
+  public maxLevelDiff: undefined | number;
+
+  /** 根据 sortBy 指定的属性进行排布，数值高的放在中心，如果是 sortBy 则会计算节点度数，度数最高的放在中心 */
+  public sortBy: string = "degree";
+
+  public nodes: INode[] = [];
+
+  public edges: Edge[] = [];
+
+  public width: number = 300;
+
+  public height: number = 300;
+
+  /** 迭代结束的回调函数 */
+  public onLayoutEnd: () => void = () => {};
+
+  private maxValueNode: INode | undefined;
+
+  private counterclockwise: boolean | undefined;
+
+  constructor(options?: ConcentricLayoutOptions) {
+    super();
+    this.updateCfg(options);
+  }
+
+  public getDefaultCfg() {
+    return {
+      nodeSize: 30,
+      minNodeSpacing: 10,
+      nodeSpacing: 10,
+      preventOverlap: false,
+      sweep: undefined,
+      equidistant: false,
+      startAngle: (3 / 2) * Math.PI,
+      clockwise: true,
+      maxLevelDiff: undefined,
+      sortBy: "degree"
+    };
+  }
+
+  /**
+   * 执行布局
+   */
+  public execute() {
+    const self = this;
+    const { nodes, edges } = self;
+    const n = nodes.length;
+    if (n === 0) {
+      self.onLayoutEnd?.();
+      return;
+    }
+
+    if (!self.width && typeof window !== "undefined") {
+      self.width = window.innerWidth;
+    }
+    if (!self.height && typeof window !== "undefined") {
+      self.height = window.innerHeight;
+    }
+    if (!self.center) {
+      self.center = [self.width / 2, self.height / 2];
+    }
+    const center = self.center;
+
+    if (n === 1) {
+      nodes[0].x = center[0];
+      nodes[0].y = center[1];
+      self.onLayoutEnd?.();
+      return;
+    }
+
+    const { nodeSize, nodeSpacing } = self;
+
+    const layoutNodes: INode[] = [];
+    let maxNodeSize: number;
+    let maxNodeSpacing: number = 0;
+    if (isArray(nodeSize)) {
+      maxNodeSize = Math.max(nodeSize[0], nodeSize[1]);
+    } else {
+      maxNodeSize = nodeSize;
+    }
+    if (isArray(nodeSpacing)) {
+      maxNodeSpacing = Math.max(nodeSpacing[0], nodeSpacing[1]);
+    } else if (isNumber(nodeSpacing)) {
+      maxNodeSpacing = nodeSpacing;
+    }
+    nodes.forEach((node) => {
+      layoutNodes.push(node);
+      let nodeSize: number = maxNodeSize;
+      if (isArray(node.size)) {
+        nodeSize = Math.max(node.size[0], node.size[1]);
+      } else if (isNumber(node.size)) {
+        nodeSize = node.size;
+      } else if (isObject(node.size)) {
+        nodeSize = Math.max((node.size as any).width, (node.size as any).height);
+      }
+      maxNodeSize = Math.max(maxNodeSize, nodeSize);
+
+      if (isFunction(nodeSpacing)) {
+        maxNodeSpacing = Math.max(nodeSpacing(node), maxNodeSpacing);
+      }
+    });
+
+    self.clockwise =
+      self.counterclockwise !== undefined
+        ? !self.counterclockwise
+        : self.clockwise;
+
+    // layout
+    const nodeMap: NodeMap = {};
+    const indexMap: IndexMap = {};
+    layoutNodes.forEach((node, i) => {
+      nodeMap[node.id] = node;
+      indexMap[node.id] = i;
+    });
+
+    // get the node degrees
+    if (
+      self.sortBy === "degree" ||
+      !isString(self.sortBy) ||
+      (layoutNodes[0] as any)[self.sortBy] === undefined
+    ) {
+      self.sortBy = "degree";
+      if (!isNumber(nodes[0].degree)) {
+        const values = getDegree(nodes.length, indexMap, edges);
+        layoutNodes.forEach((node, i) => {
+          node.degree = values[i];
+        });
+      }
+    }
+    // sort nodes by value
+    layoutNodes.sort(
+      (n1: INode, n2: INode) =>
+        (n2 as any)[self.sortBy] - (n1 as any)[self.sortBy]
+    );
+
+    self.maxValueNode = layoutNodes[0];
+
+    self.maxLevelDiff =
+      self.maxLevelDiff || (self.maxValueNode as any)[self.sortBy] / 4;
+
+    // put the values into levels
+    const levels: any[] = [[]];
+    let currentLevel = levels[0];
+    layoutNodes.forEach((node) => {
+      if (currentLevel.length > 0) {
+        const diff = Math.abs(
+          currentLevel[0][self.sortBy] - (node as any)[self.sortBy]
+        );
+        if (self.maxLevelDiff && diff >= self.maxLevelDiff) {
+          currentLevel = [];
+          levels.push(currentLevel);
+        }
+      }
+      currentLevel.push(node);
+    });
+
+    // create positions for levels
+    let minDist = maxNodeSize + (maxNodeSpacing || self.minNodeSpacing); // min dist between nodes
+    if (!self.preventOverlap) {
+      // then strictly constrain to bb
+      const firstLvlHasMulti = levels.length > 0 && levels[0].length > 1;
+      const maxR = Math.min(self.width, self.height) / 2 - minDist;
+      const rStep = maxR / (levels.length + (firstLvlHasMulti ? 1 : 0));
+
+      minDist = Math.min(minDist, rStep);
+    }
+
+    // find the metrics for each level
+    let r = 0;
+    levels.forEach((level) => {
+      let sweep = self.sweep;
+      if (sweep === undefined) {
+        sweep = 2 * Math.PI - (2 * Math.PI) / level.length;
+      }
+      const dTheta = (level.dTheta = sweep / Math.max(1, level.length - 1));
+
+      // calculate the radius
+      if (level.length > 1 && self.preventOverlap) {
+        // but only if more than one node (can't overlap)
+        const dcos = Math.cos(dTheta) - Math.cos(0);
+        const dsin = Math.sin(dTheta) - Math.sin(0);
+        const rMin = Math.sqrt(
+          (minDist * minDist) / (dcos * dcos + dsin * dsin)
+        ); // s.t. no nodes overlapping
+
+        r = Math.max(rMin, r);
+      }
+      level.r = r;
+      r += minDist;
+    });
+
+    if (self.equidistant) {
+      let rDeltaMax = 0;
+      let rr = 0;
+      for (let i = 0; i < levels.length; i++) {
+        const level = levels[i];
+        const rDelta = level.r - rr;
+        rDeltaMax = Math.max(rDeltaMax, rDelta);
+      }
+      rr = 0;
+      levels.forEach((level, i) => {
+        if (i === 0) {
+          rr = level.r;
+        }
+        level.r = rr;
+        rr += rDeltaMax;
+      });
+    }
+
+    // calculate the node positions
+    levels.forEach((level) => {
+      const dTheta = level.dTheta;
+      const rr = level.r;
+      level.forEach((node: INode, j: number) => {
+        const theta = self.startAngle + (self.clockwise ? 1 : -1) * dTheta * j;
+        node.x = center[0] + rr * Math.cos(theta);
+        node.y = center[1] + rr * Math.sin(theta);
+      });
+    });
+
+    if (self.onLayoutEnd) self.onLayoutEnd();
+
+    return {
+      nodes,
+      edges
+    };
+  }
+
+  public getType() {
+    return "concentric";
+  }
+}

package/src/layout/constants.ts

@@ -0,0 +1,21 @@
+/** layout message type */
+export const LAYOUT_MESSAGE = {
+  // run layout
+  RUN: "LAYOUT_RUN",
+  // layout ended with success
+  END: "LAYOUT_END",
+  // layout error
+  ERROR: "LAYOUT_ERROR",
+  // layout tick, used in force directed layout
+  TICK: "LAYOUT_TICK",
+  GPURUN: "GPU_LAYOUT_RUN",
+  GPUEND: "GPU_LAYOUT_END"
+};
+
+export const FORCE_LAYOUT_TYPE_MAP: { [key: string]: boolean } = {
+  'gForce': true,
+  'fruchterman': true,
+  'forceAtlas2': true,
+  'force': true,
+  'graphin-force': true,
+};

package/src/layout/dagre/graph.ts

@@ -0,0 +1,104 @@
+import { Graph as RawGraph } from "@antv/graphlib";
+
+export class Graph extends RawGraph<
+  string,
+  Node<Record<string, any>> & NodeConfig,
+  Partial<EdgeConfig & Edge & GraphEdge>,
+  Partial<GraphLabel>
+> {}
+
+export interface GraphLabel {
+  width?: number | undefined;
+  height?: number | undefined;
+  compound?: boolean | undefined;
+  rankdir?: string | undefined;
+  align?: string | undefined;
+  nodesep?: number | undefined;
+  edgesep?: number | undefined;
+  ranksep?: number | undefined;
+  marginx?: number | undefined;
+  marginy?: number | undefined;
+  acyclicer?: string | undefined;
+  ranker?: string | undefined;
+  maxRank?: number;
+  nestingRoot?: string;
+  nodeRankFactor?: number;
+  dummyChains?: string[];
+  root?: string;
+}
+
+export interface NodeConfig {
+  width?: number | undefined;
+  height?: number | undefined;
+}
+
+export interface EdgeConfig {
+  minlen?: number | undefined;
+  weight?: number | undefined;
+  width?: number | undefined;
+  height?: number | undefined;
+  lablepos?: "l" | "c" | "r" | undefined;
+  labeloffest?: number | undefined;
+}
+
+export interface CustomConfig {
+  edgeLabelSpace?: boolean | undefined;
+  keepNodeOrder?: boolean | undefined;
+  nodeOrder?: string[] | undefined;
+  prevGraph?: Graph | undefined;
+}
+
+export type layout = (
+  graph: Graph,
+  layout?: GraphLabel & NodeConfig & EdgeConfig & CustomConfig
+) => void;
+
+export interface Edge {
+  v: string;
+  w: string;
+  name?: string | undefined;
+  label?: any;
+  e?: any;
+}
+
+export interface GraphEdge {
+  points: { x: number; y: number }[];
+  [key: string]: any;
+}
+
+export type Node<T = {}> = T & {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  class?: string | undefined;
+  label?: any;
+  padding?: number | undefined;
+  paddingX?: number | undefined;
+  paddingY?: number | undefined;
+  rx?: number | undefined;
+  ry?: number | undefined;
+  shape?: string | undefined;
+  order?: number;
+  rank?: number;
+  in?: number;
+  out?: number;
+  fixorder?: number;
+  _order?: number;
+  _rank?: number;
+  dummy?: string;
+  selfEdges?: any;
+  borderTop?: any;
+  borderBottom?: any;
+  borderLeft?: any;
+  borderRight?: any;
+  minRank?: number;
+  maxRank?: number;
+  layer?: number;
+  edgeLabel?: any;
+  edgeObj?: Edge;
+  borderType?: string;
+  labelpos?: string;
+  parent?: string;
+  lim?: number;
+};

package/src/layout/dagre/index.ts

@@ -0,0 +1,31 @@
+/*
+Copyright (c) 2012-2014 Chris Pettitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+import layout from './src/layout';
+import { time, notime } from './src/util';
+
+export default {
+  layout,
+  util: {
+    time,
+    notime
+  },
+};

package/src/layout/dagre/src/acyclic.ts

@@ -0,0 +1,58 @@
+import { Edge, Graph } from "../graph";
+import greedyFAS from "./greedy-fas";
+
+const run = (g: Graph) => {
+  const weightFn = (g: Graph) => {
+    return (e: Edge) => g.edge(e)?.weight || 1;
+  };
+  const fas =
+    g.graph().acyclicer === "greedy" ? greedyFAS(g, weightFn(g)) : dfsFAS(g);
+  fas?.forEach((e: Edge) => {
+    const label = g.edge(e)!;
+    g.removeEdgeObj(e);
+    label.forwardName = e.name;
+    label.reversed = true;
+    g.setEdge(e.w, e.v, label, `rev-${Math.random()}`);
+  });
+};
+
+const dfsFAS = (g: Graph) => {
+  const fas: Edge[] = [];
+  const stack: Record<string, boolean> = {};
+  const visited: Record<string, boolean> = {};
+
+  const dfs = (v: string) => {
+    if (visited[v]) {
+      return;
+    }
+    visited[v] = true;
+    stack[v] = true;
+    g.outEdges(v)?.forEach((e) => {
+      if (stack[e.w]) {
+        fas.push(e);
+      } else {
+        dfs(e.w);
+      }
+    });
+    delete stack[v];
+  };
+
+  g.nodes().forEach(dfs);
+  return fas;
+};
+
+const undo = (g: Graph) => {
+  g.edges().forEach((e) => {
+    const label = g.edge(e)!;
+    if (label.reversed) {
+      g.removeEdgeObj(e);
+
+      const forwardName = label.forwardName;
+      delete label.reversed;
+      delete label.forwardName;
+      g.setEdge(e.w, e.v, label, forwardName);
+    }
+  });
+};
+
+export default { run, undo };

package/src/layout/dagre/src/add-border-segments.ts

@@ -0,0 +1,47 @@
+import { Graph, Node } from "../graph";
+import { addDummyNode } from "./util";
+
+const addBorderSegments = (g: Graph) => {
+  const dfs = (v: string) => {
+    const children = g.children(v);
+    const node = g.node(v)!;
+    if (children?.length) {
+      children.forEach((child) => dfs(child));
+    }
+
+    if (node.hasOwnProperty("minRank")) {
+      node.borderLeft = [];
+      node.borderRight = [];
+      for (
+        let rank = node.minRank!, maxRank = node.maxRank! + 1;
+        rank < maxRank;
+        rank += 1
+      ) {
+        addBorderNode(g, "borderLeft", "_bl", v, node, rank);
+        addBorderNode(g, "borderRight", "_br", v, node, rank);
+      }
+    }
+  };
+
+  g.children()?.forEach((child) => dfs(child));
+};
+
+const addBorderNode = (
+  g: Graph,
+  prop: string,
+  prefix: string,
+  sg: string,
+  sgNode: Node<Record<string, any>>,
+  rank: number
+) => {
+  const label = { rank, borderType: prop, width: 0, height: 0 };
+  const prev = sgNode[prop][rank - 1];
+  const curr = addDummyNode(g, "border", label, prefix);
+  sgNode[prop][rank] = curr;
+  g.setParent(curr, sg);
+  if (prev) {
+    g.setEdge(prev, curr, { weight: 1 });
+  }
+};
+
+export default addBorderSegments;

package/src/layout/dagre/src/coordinate-system.ts

@@ -0,0 +1,77 @@
+import { Graph } from "../graph";
+
+const adjust = (g: Graph) => {
+  const rankDir = g.graph().rankdir?.toLowerCase();
+  if (rankDir === "lr" || rankDir === "rl") {
+    swapWidthHeight(g);
+  }
+};
+
+const undo = (g: Graph) => {
+  const rankDir = g.graph().rankdir?.toLowerCase();
+  if (rankDir === "bt" || rankDir === "rl") {
+    reverseY(g);
+  }
+
+  if (rankDir === "lr" || rankDir === "rl") {
+    swapXY(g);
+    swapWidthHeight(g);
+  }
+};
+
+const swapWidthHeight = (g: Graph) => {
+  g.nodes().forEach((v) => {
+    swapWidthHeightOne(g.node(v)!);
+  });
+  g.edges().forEach((e) => {
+    swapWidthHeightOne(g.edge(e)!);
+  });
+};
+
+const swapWidthHeightOne = (attrs: { width?: number; height?: number }) => {
+  const w = attrs.width;
+  attrs.width = attrs.height;
+  attrs.height = w;
+};
+
+const reverseY = (g: Graph) => {
+  g.nodes().forEach((v) => {
+    reverseYOne(g.node(v)!);
+  });
+
+  g.edges().forEach((e) => {
+    const edge = g.edge(e)!;
+    edge.points?.forEach((point) => reverseYOne(point));
+    if (edge.hasOwnProperty("y")) {
+      reverseYOne(edge as { y: number });
+    }
+  });
+};
+
+const reverseYOne = (attrs: { y?: number }) => {
+  if (attrs?.y) {
+    attrs.y = -attrs.y;
+  }
+};
+
+const swapXY = (g: Graph) => {
+  g.nodes().forEach((v) => {
+    swapXYOne(g.node(v));
+  });
+
+  g.edges().forEach((e) => {
+    const edge = g.edge(e)!;
+    edge.points?.forEach((point) => swapXYOne(point));
+    if (edge.hasOwnProperty("x")) {
+      swapXYOne(edge);
+    }
+  });
+};
+
+const swapXYOne = (attrs: any) => {
+  const x = attrs.x;
+  attrs.x = attrs.y;
+  attrs.y = x;
+};
+
+export default { adjust, undo };

package/src/layout/dagre/src/data/list.ts

@@ -0,0 +1,60 @@
+const filterOutLinks = (k: string, v: string) => {
+  if (k !== "next" && k !== "prev") {
+    return v;
+  }
+};
+
+type LinkedNode<T> = {
+  prev?: LinkedNode<T>;
+  next?: LinkedNode<T>;
+} & T;
+
+const unlink = <T>(entry: LinkedNode<T>) => {
+  entry.prev!.next = entry.next;
+  entry.next!.prev = entry.prev;
+  delete entry.next;
+  delete entry.prev;
+};
+
+export default class List<T> {
+  // a shortcut that next is head and prev is tail
+  public shortcut: LinkedNode<T>;
+
+  constructor() {
+    const shortcut: LinkedNode<any> = {};
+    shortcut.prev = shortcut;
+    shortcut.next = shortcut.prev;
+    this.shortcut = shortcut;
+  }
+
+  public dequeue() {
+    const shortcut = this.shortcut;
+    const entry = shortcut.prev;
+    if (entry && entry !== shortcut) {
+      unlink(entry);
+      return entry;
+    }
+  }
+
+  public enqueue(entry: LinkedNode<T>) {
+    const shortcut = this.shortcut;
+    if (entry.prev && entry.next) {
+      unlink(entry);
+    }
+    entry.next = shortcut.next;
+    shortcut.next!.prev = entry;
+    shortcut.next = entry;
+    entry.prev = shortcut;
+  }
+
+  public toString() {
+    const strs = [];
+    const sentinel = this.shortcut;
+    let curr = sentinel.prev;
+    while (curr !== sentinel) {
+      strs.push(JSON.stringify(curr, filterOutLinks));
+      curr = curr?.prev;
+    }
+    return `[${strs.join(", ")}]`;
+  }
+}