@antv/layout 0.3.12 → 1.0.0-alpha.0

package/src/layout/force/force.ts

@@ -1,391 +0,0 @@
-/**
- * @fileOverview random layout
- * @author shiwu.wyy@antfin.com
- */
-
-import { Edge, Model, PointTuple, ForceLayoutOptions } from "../types";
-import * as d3Force from "d3-force";
-import forceInABox from "./force-in-a-box";
-import { isArray, isFunction, isNumber, isObject } from "../../util";
-import { Base } from "../base";
-import { LAYOUT_MESSAGE } from "../constants";
-
-/**
- * 经典力导布局 force-directed
- */
-export class ForceLayout extends Base {
-  /** 向心力作用点 */
-  public center: PointTuple = [0, 0];
-
-  /** 节点作用力 */
-  public nodeStrength: number | null = null;
-
-  /** 边的作用力, 默认为根据节点的入度出度自适应 */
-  public edgeStrength: number | null = null;
-
-  /** 是否防止节点相互覆盖 */
-  public preventOverlap: boolean = false;
-
-  /** 节点大小 / 直径，用于防止重叠时的碰撞检测 */
-  public nodeSize: number | number[] | ((d?: unknown) => number) | undefined;
-
-  /** 节点间距，防止节点重叠时节点之间的最小距离（两节点边缘最短距离） */
-  public nodeSpacing: ((d?: unknown) => number) | undefined;
-
-  /** 是否支持按类聚合 */
-  public clustering: boolean;
-
-  /** 聚类节点作用力 */
-  public clusterNodeStrength: number | null = null;
-
-  /** 聚类边作用力 */
-  public clusterEdgeStrength: number | null = null;
-
-  /** 聚类边长度 */
-  public clusterEdgeDistance: number | null = null;
-
-  /** 聚类节点大小 / 直径，直径越大，越分散 */
-  public clusterNodeSize: number | null = null;
-
-  /** 用于 foci 的力 */
-  public clusterFociStrength: number | null = null;
-
-  /** 默认边长度 */
-  public linkDistance: number = 50;
-
-  /** 自定义 force 方法 */
-  public forceSimulation: any;
-
-  /** 迭代阈值的衰减率 [0, 1]，0.028 对应最大迭代数为 300 */
-  public alphaDecay: number = 0.028;
-
-  /** 停止迭代的阈值 */
-  public alphaMin: number = 0.001;
-
-  /** 当前阈值 */
-  public alpha: number = 0.3;
-
-  /** 防止重叠的力强度 */
-  public collideStrength: number = 1;
-
-  /** 是否启用web worker。前提是在web worker里执行布局，否则无效	*/
-  public workerEnabled: boolean = false;
-
-  public tick: () => void = () => {};
-
-  /** 布局完成回调 */
-  public onLayoutEnd: () => void = () => {};
-
-  /** 是否正在布局 */
-  private ticking: boolean | undefined = undefined;
-
-  private edgeForce: any;
-
-  private clusterForce: any;
-
-  constructor(options?: ForceLayoutOptions) {
-    super();
-    if (options) {
-      this.updateCfg(options);
-    }
-  }
-
-  public getDefaultCfg() {
-    return {
-      center: [0, 0],
-      nodeStrength: null,
-      edgeStrength: null,
-      preventOverlap: false,
-      nodeSize: undefined,
-      nodeSpacing: undefined,
-      linkDistance: 50,
-      forceSimulation: null,
-      alphaDecay: 0.028,
-      alphaMin: 0.001,
-      alpha: 0.3,
-      collideStrength: 1,
-      clustering: false,
-      clusterNodeStrength: -1,
-      clusterEdgeStrength: 0.1,
-      clusterEdgeDistance: 100,
-      clusterFociStrength: 0.8,
-      clusterNodeSize: 10,
-      tick() {},
-      onLayoutEnd() {}, // 布局完成回调
-      // 是否启用web worker。前提是在web worker里执行布局，否则无效
-      workerEnabled: false
-    };
-  }
-
-  /**
-   * 初始化
-   * @param {object} data 数据
-   */
-  public init(data: Model) {
-    const self = this;
-    self.nodes = data.nodes || [];
-    const edges = data.edges || [];
-    self.edges = edges.map((edge) => {
-      const res: any = {};
-      const expectKeys = ["targetNode", "sourceNode", "startPoint", "endPoint"];
-      Object.keys(edge).forEach((key: keyof Edge) => {
-        if (!(expectKeys.indexOf(key) > -1)) {
-          res[key] = edge[key];
-        }
-      });
-      return res;
-    });
-    self.ticking = false;
-  }
-
-  /**
-   * 执行布局
-   */
-  public execute(reloadData?: boolean) {
-    const self = this;
-    const nodes = self.nodes;
-    const edges = self.edges;
-    // 如果正在布局，忽略布局请求
-    if (self.ticking) {
-      return;
-    }
-    let simulation = self.forceSimulation;
-    const alphaMin = self.alphaMin;
-    const alphaDecay = self.alphaDecay;
-    const alpha = self.alpha;
-    if (!simulation) {
-      try {
-        // 定义节点的力
-        const nodeForce = d3Force.forceManyBody();
-        if (self.nodeStrength) {
-          nodeForce.strength(self.nodeStrength);
-        }
-        simulation = d3Force.forceSimulation().nodes(nodes as any);
-
-        if (self.clustering) {
-          const clusterForce = forceInABox() as any;
-          clusterForce
-            .centerX(self.center[0])
-            .centerY(self.center[1])
-            .template("force")
-            .strength(self.clusterFociStrength);
-          if (edges) {
-            clusterForce.links(edges);
-          }
-          if (nodes) {
-            clusterForce.nodes(nodes);
-          }
-          clusterForce
-            .forceLinkDistance(self.clusterEdgeDistance)
-            .forceLinkStrength(self.clusterEdgeStrength)
-            .forceCharge(self.clusterNodeStrength)
-            .forceNodeSize(self.clusterNodeSize);
-
-          self.clusterForce = clusterForce;
-          simulation.force("group", clusterForce);
-        }
-        simulation
-          .force("center", d3Force.forceCenter(self.center[0], self.center[1]))
-          .force("charge", nodeForce)
-          .alpha(alpha)
-          .alphaDecay(alphaDecay)
-          .alphaMin(alphaMin);
-
-        if (self.preventOverlap) {
-          self.overlapProcess(simulation);
-        }
-        // 如果有边，定义边的力
-        if (edges) {
-          // d3 的 forceLayout 会重新生成边的数据模型，为了避免污染源数据
-          const edgeForce = d3Force
-            .forceLink()
-            .id((d: any) => d.id)
-            .links(edges);
-          if (self.edgeStrength) {
-            edgeForce.strength(self.edgeStrength);
-          }
-          if (self.linkDistance) {
-            edgeForce.distance(self.linkDistance);
-          }
-          self.edgeForce = edgeForce;
-          simulation.force("link", edgeForce);
-        }
-        if (self.workerEnabled && !isInWorker()) {
-          // 如果不是运行在web worker里，不用web worker布局
-          self.workerEnabled = false;
-          console.warn(
-            "workerEnabled option is only supported when running in web worker."
-          );
-        }
-        if (!self.workerEnabled) {
-          simulation
-            .on("tick", () => {
-              self.tick();
-            })
-            .on("end", () => {
-              self.ticking = false;
-              if (self.onLayoutEnd) self.onLayoutEnd();
-            });
-          self.ticking = true;
-        } else {
-          // worker is enabled
-          simulation.stop();
-          const totalTicks = getSimulationTicks(simulation);
-          for (let currentTick = 1; currentTick <= totalTicks; currentTick++) {
-            simulation.tick();
-            // currentTick starts from 1.
-            postMessage(
-              {
-                nodes,
-                currentTick,
-                totalTicks,
-                type: LAYOUT_MESSAGE.TICK
-              },
-              undefined as any
-            );
-          }
-          self.ticking = false;
-        }
-
-        self.forceSimulation = simulation;
-        self.ticking = true;
-      } catch (e) {
-        self.ticking = false;
-        console.warn(e);
-      }
-    } else {
-      if (reloadData) {
-        if (self.clustering && self.clusterForce) {
-          self.clusterForce.nodes(nodes);
-          self.clusterForce.links(edges);
-        }
-        simulation.nodes(nodes);
-        if (edges && self.edgeForce) self.edgeForce.links(edges);
-        else if (edges && !self.edgeForce) {
-          // d3 的 forceLayout 会重新生成边的数据模型，为了避免污染源数据
-          const edgeForce = d3Force
-            .forceLink()
-            .id((d: any) => d.id)
-            .links(edges);
-          if (self.edgeStrength) {
-            edgeForce.strength(self.edgeStrength);
-          }
-          if (self.linkDistance) {
-            edgeForce.distance(self.linkDistance);
-          }
-          self.edgeForce = edgeForce;
-          simulation.force("link", edgeForce);
-        }
-      }
-      if (self.preventOverlap) {
-        self.overlapProcess(simulation);
-      }
-      simulation.alpha(alpha).restart();
-      this.ticking = true;
-    }
-  }
-
-  /**
-   * 防止重叠
-   * @param {object} simulation 力模拟模型
-   */
-  public overlapProcess(simulation: any) {
-    const self = this;
-    const nodeSize = self.nodeSize;
-    const nodeSpacing = self.nodeSpacing;
-    let nodeSizeFunc: (d: any) => number;
-    let nodeSpacingFunc: any;
-    const collideStrength = self.collideStrength;
-
-    if (isNumber(nodeSpacing)) {
-      nodeSpacingFunc = () => nodeSpacing;
-    } else if (isFunction(nodeSpacing)) {
-      nodeSpacingFunc = nodeSpacing;
-    } else {
-      nodeSpacingFunc = () => 0;
-    }
-
-    if (!nodeSize) {
-      nodeSizeFunc = (d) => {
-        if (d.size) {
-          if (isArray(d.size)) {
-            const res = d.size[0] > d.size[1] ? d.size[0] : d.size[1];
-            return res / 2 + nodeSpacingFunc(d);
-          }  if (isObject(d.size)) {
-            const res = d.size.width > d.size.height ? d.size.width : d.size.height;
-            return res / 2 + nodeSpacingFunc(d);
-          }
-          return d.size / 2 + nodeSpacingFunc(d);
-        }
-        return 10 + nodeSpacingFunc(d);
-      };
-    } else if (isFunction(nodeSize)) {
-      nodeSizeFunc = (d) => {
-        const size = nodeSize(d);
-        return size + nodeSpacingFunc(d);
-      };
-    } else if (isArray(nodeSize)) {
-      const larger = nodeSize[0] > nodeSize[1] ? nodeSize[0] : nodeSize[1];
-      const radius = larger / 2;
-      nodeSizeFunc = (d) => radius + nodeSpacingFunc(d);
-    } else if (isNumber(nodeSize)) {
-      const radius = nodeSize / 2;
-      nodeSizeFunc = (d) => radius + nodeSpacingFunc(d);
-    } else {
-      nodeSizeFunc = () => 10;
-    }
-
-    // forceCollide's parameter is a radius
-    simulation.force(
-      "collisionForce",
-      d3Force.forceCollide(nodeSizeFunc).strength(collideStrength)
-    );
-  }
-
-  /**
-   * 更新布局配置，但不执行布局
-   * @param {object} cfg 需要更新的配置项
-   */
-  public updateCfg(cfg: ForceLayoutOptions) {
-    const self = this;
-    if (self.ticking) {
-      self.forceSimulation.stop();
-      self.ticking = false;
-    }
-    self.forceSimulation = null;
-    Object.assign(self, cfg);
-  }
-
-  public destroy() {
-    const self = this;
-    if (self.ticking) {
-      self.forceSimulation.stop();
-      self.ticking = false;
-    }
-    self.nodes = null;
-    self.edges = null;
-    self.destroyed = true;
-  }
-}
-
-// Return total ticks of d3-force simulation
-function getSimulationTicks(simulation: any): number {
-  const alphaMin = simulation.alphaMin();
-  const alphaTarget = simulation.alphaTarget();
-  const alpha = simulation.alpha();
-  const totalTicksFloat =
-    Math.log((alphaMin - alphaTarget) / (alpha - alphaTarget)) /
-    Math.log(1 - simulation.alphaDecay());
-  const totalTicks = Math.ceil(totalTicksFloat);
-  return totalTicks;
-}
-declare const WorkerGlobalScope: any;
-
-// 判断是否运行在web worker里
-function isInWorker(): boolean {
-  // eslint-disable-next-line no-undef
-  return (
-    typeof WorkerGlobalScope !== "undefined" &&
-    self instanceof WorkerGlobalScope
-  );
-}

package/src/layout/force/index.ts

@@ -1 +0,0 @@
-export * from './force';

package/src/layout/force2/ForceNBody.ts

@@ -1,128 +0,0 @@
-import { quadtree } from 'd3-quadtree';
-import { NodeMap } from '..';
-
-const theta2 = 0.81; // Barnes-Hut approximation threshold
-const epsilon = 0.1; // 为了防止出现除0的情况，加一个epsilon
-
-interface Node {
-  x: number;
-  y: number;
-}
-
-interface InternalNode {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  weight: number;
-  size: number;
-}
-
-export function forceNBody(
-  nodes: Node[],
-  nodeMap: NodeMap,
-  factor: number,
-  coulombDisScale2: number,
-  accArray: number[]
-) {
-  const weightParam = factor / coulombDisScale2;
-  const data = nodes.map((n, i) => {
-    // @ts-ignore
-    const mappedNode = nodeMap[n.id];
-    // @ts-ignore
-    const { data: nodeData, x, y, size } = mappedNode;
-    const { nodeStrength } = nodeData.layout.force;
-    return {
-      x,
-      y,
-      size,
-      index: i,
-      vx: 0,
-      vy: 0,
-      weight: weightParam * nodeStrength,
-    };
-  });
-
-  const tree = quadtree(
-    data,
-    (d: any) => d.x,
-    (d: any) => d.y,
-  ).visitAfter(accumulate); // init internal node
-
-  data.forEach((n) => {
-    // @ts-ignore
-    computeForce(n, tree);
-  });
-
-  data.map((n, i) => {
-    // @ts-ignore
-    const mappedNode = nodeMap[nodes[i].id];
-    // @ts-ignore
-    const { mass = 1 } = mappedNode.data.layout.force;
-    // 从 0 开始，= 初始化 + 加斥力
-    accArray[2 * i] = n.vx / mass;
-    accArray[2 * i + 1] = n.vy / mass;
-  });
-  return accArray;
-}
-
-// @ts-ignore
-function accumulate(quad) {
-  let accWeight = 0;
-  let accX = 0;
-  let accY = 0;
-
-  if (quad.length) {
-    // internal node, accumulate 4 child quads
-    for (let i = 0; i < 4; i++) {
-      const q = quad[i];
-      if (q && q.weight) {
-        accWeight += q.weight;
-        accX += q.x * q.weight;
-        accY += q.y * q.weight;
-      }
-    }
-    quad.x = accX / accWeight;
-    quad.y = accY / accWeight;
-    quad.weight = accWeight;
-  } else {
-    // leaf node
-    const q = quad;
-    quad.x = q.data.x;
-    quad.y = q.data.y;
-    quad.weight = q.data.weight;
-  }
-}
-
-// @ts-ignore
-const apply = (quad, x1: number, y1: number, x2: number, y2: number, node: InternalNode) => {
-  const dx = (node.x - quad.x) || epsilon;
-  const dy = (node.y - quad.y) || epsilon;
-  const width = x2 - x1;
-  const len2 = dx * dx + dy * dy;
-  const len3 = Math.sqrt(len2) * len2;
-
-  // far node, apply Barnes-Hut approximation
-  if ((width * width) * theta2 < len2) {
-    const param = quad.weight / len3;
-    node.vx += dx * param;
-    node.vy += dy * param;
-    return true;
-  }
-  // near quad, compute force directly
-  if (quad.length) return false; // internal node, visit children
-
-  // leaf node
-
-  if (quad.data !== node) {
-    const param = quad.data.weight / len3;
-    node.vx += dx * param;
-    node.vy += dy * param;
-  }
-};
-
-// @ts-ignore
-function computeForce(node: InternalNode, tree) {
-  // @ts-ignore
-  tree.visit((quad, x1, y1, x2, y2) => apply(quad, x1, y1, x2, y2, node));
-}