@antv/layout 0.2.0 → 0.2.3

package/src/layout/random.ts

@@ -0,0 +1,75 @@
+/**
+ * @fileOverview random layout
+ * @author shiwu.wyy@antfin.com
+ */
+
+import { PointTuple, OutNode, Edge, RandomLayoutOptions } from "./types";
+import { Base } from "./base";
+
+/**
+ * 随机布局
+ */
+export class RandomLayout extends Base {
+  /** 布局中心 */
+  public center: PointTuple = [0, 0];
+
+  /** 宽度 */
+  public width: number = 300;
+
+  /** 高度 */
+  public height: number = 300;
+
+  public nodes: OutNode[] = [];
+
+  public edges: Edge[] = [];
+
+  /** 迭代结束的回调函数 */
+  public onLayoutEnd: () => void = () => {};
+
+  constructor(options?: RandomLayoutOptions) {
+    super();
+    this.updateCfg(options);
+  }
+
+  public getDefaultCfg() {
+    return {
+      center: [0, 0],
+      width: 300,
+      height: 300
+    };
+  }
+
+  /**
+   * 执行布局
+   */
+  public execute() {
+    const self = this;
+    const nodes = self.nodes;
+    const layoutScale = 0.9;
+    const center = self.center;
+    if (!self.width && typeof window !== "undefined") {
+      self.width = window.innerWidth;
+    }
+    if (!self.height && typeof window !== "undefined") {
+      self.height = window.innerHeight;
+    }
+
+    if (nodes) {
+      nodes.forEach((node) => {
+        node.x = (Math.random() - 0.5) * layoutScale * self.width + center[0];
+        node.y = (Math.random() - 0.5) * layoutScale * self.height + center[1];
+      });
+    }
+
+    if (self.onLayoutEnd) self.onLayoutEnd();
+
+    return {
+      nodes,
+      edges: this.edges
+    };
+  }
+
+  public getType() {
+    return "random";
+  }
+}

package/src/layout/types.ts

@@ -0,0 +1,421 @@
+import { Base } from "./base";
+
+export interface Node {
+  id: string;
+}
+
+export interface OutNode extends Node {
+  x: number;
+  y: number;
+  comboId?: string;
+  layer?: number; // dagre布局中指定的层级
+  _order?: number; // dagre布局中层内排序结果，用于增量布局
+  layout?: boolean;
+  size?: number | number[] | undefined;
+}
+
+export interface Edge {
+  source: string;
+  target: string;
+}
+
+export interface Combo {
+  id: string;
+  parentId?: string;
+  x?: number;
+  y?: number;
+  name?: string | number;
+  cx?: number;
+  cy?: number;
+  count?: number;
+  depth?: number;
+  children?: any[];
+  empty?: boolean;
+  minX?: number;
+  maxX?: number;
+  minY?: number;
+  maxY?: number;
+  size?: number;
+  r?: number;
+  itemType?: string;
+}
+
+export interface Model {
+  nodes?: Node[];
+  edges?: Edge[];
+  combos?: Combo[];
+  comboEdges?: Edge[];
+  hiddenNodes?: Node[];
+  hiddenEdges?: Edge[];
+  hiddenCombos?: Combo[];
+}
+
+export interface OutModel extends Model {
+  nodes?: OutNode[];
+}
+
+export type PointTuple = [number, number];
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export type IndexMap = {
+  [key: string]: number;
+};
+
+export type Matrix = number[];
+
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export interface ComboTree {
+  id: string;
+  children?: ComboTree[];
+  depth?: number;
+  parentId?: string;
+  itemType?: "node" | "combo";
+  [key: string]: unknown;
+}
+export interface ComboConfig {
+  id: string;
+  parentId?: string;
+  children?: ComboTree[];
+  depth?: number;
+}
+
+export interface CircularLayoutOptions {
+  type: "circular";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  radius?: number | null;
+  startRadius?: number | null;
+  endRadius?: number | null;
+  clockwise?: boolean;
+  divisions?: number;
+  ordering?: "topology" | "topology-directed" | "degree" | null;
+  angleRatio?: number;
+  workerEnabled?: boolean;
+  startAngle?: number;
+  endAngle?: number;
+  onLayoutEnd?: () => void;
+}
+
+export interface ComboForceLayoutOptions {
+  type: "comboForce";
+  center?: PointTuple;
+  maxIteration?: number;
+  linkDistance?: number | ((d?: unknown) => number);
+  nodeStrength?: number | ((d?: unknown) => number);
+  edgeStrength?: number | ((d?: unknown) => number);
+  preventOverlap?: boolean;
+  preventNodeOverlap?: boolean;
+  preventComboOverlap?: boolean;
+  collideStrength?: number | undefined;
+  nodeCollideStrength?: number | undefined;
+  comboCollideStrength?: number | undefined;
+  nodeSize?: number | number[] | ((d?: unknown) => number) | undefined;
+  nodeSpacing?: ((d?: unknown) => number) | number | undefined;
+  comboSpacing?: ((d?: unknown) => number) | number | undefined;
+  comboPadding?: ((d?: unknown) => number) | number | number[] | undefined;
+  alpha?: number;
+  alphaDecay?: number;
+  alphaMin?: number;
+  onTick?: () => void;
+  onLayoutEnd?: () => void;
+  gravity?: number;
+  comboGravity?: number;
+  optimizeRangeFactor?: number;
+  depthAttractiveForceScale?: number;
+  depthRepulsiveForceScale?: number;
+  velocityDecay?: number;
+  workerEnabled?: boolean;
+}
+export interface ComboCombinedLayoutOptions {
+  type: "comboConcentricForce";
+  center?: PointTuple;
+  nodeSize?: number | number[] | ((d?: any) => number) | undefined;
+  spacing?: number | number[] | ((d?: any) => number) | undefined;
+  comboPadding?: ((d?: unknown) => number) | number | number[] | undefined;
+  comboTrees?: ComboTree[];
+  outerLayout?: Base;
+  innerLayout?: Base;
+}
+
+export interface ConcentricLayoutOptions {
+  type: "concentric";
+  center?: PointTuple;
+  preventOverlap?: boolean;
+  nodeSize?: number | PointTuple;
+  minNodeSpacing?: number;
+  sweep?: number;
+  equidistant?: boolean;
+  startAngle?: number;
+  clockwise?: boolean;
+  maxLevelDiff?: number;
+  sortBy?: string;
+  workerEnabled?: boolean;
+  width?: number;
+  height?: number;
+  onLayoutEnd?: () => void;
+}
+
+export interface DagreLayoutOptions {
+  type: "dagre";
+  rankdir?: "TB" | "BT" | "LR" | "RL";
+  align?: "UL" | "UR" | "DL" | "DR";
+  begin?: PointTuple;
+  nodeSize?: number | number[] | undefined;
+  nodesep?: number;
+  ranksep?: number;
+  nodesepFunc?: ((d?: any) => number) | undefined;
+  ranksepFunc?: ((d?: any) => number) | undefined;
+  controlPoints?: boolean;
+  sortByCombo?: boolean;
+  workerEnabled?: boolean;
+  onLayoutEnd?: () => void;
+  edgeLabelSpace?: boolean;
+  nodeOrder?: string[];
+}
+
+export interface DagreCompoundLayoutOptions {
+  type?: "dagreCompound";
+  rankdir?: "TB" | "BT" | "LR" | "RL";
+  align?: "UL" | "UR" | "DL" | "DR";
+  begin?: PointTuple;
+  nodeSize?: number | number[] | undefined;
+  nodesep?: number;
+  ranksep?: number;
+  controlPoints?: boolean;
+  anchorPoint?: boolean;
+  settings?: any;
+  onLayoutEnd?: () => void;
+}
+
+export interface FruchtermanLayoutOptions {
+  type: "fruchterman";
+  center?: PointTuple;
+  maxIteration?: number;
+  width?: number;
+  height?: number;
+  gravity?: number;
+  speed?: number;
+  clustering?: boolean;
+  clusterGravity?: number;
+  workerEnabled?: boolean;
+  gpuEnabled?: boolean;
+  onLayoutEnd?: () => void;
+}
+
+export interface GForceLayoutOptions {
+  type?: "gForce";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  linkDistance?: number | ((edge?: any, source?: any, target?: any) => number) | undefined;
+  nodeStrength?: number | ((d?: any) => number) | undefined;
+  edgeStrength?: number | ((d?: any) => number) | undefined;
+  preventOverlap?: boolean;
+  nodeSize?: number | number[] | ((d?: any) => number) | undefined;
+  nodeSpacing?: number | number[] | ((d?: any) => number) | undefined;
+  minMovement?: number;
+  maxIteration?: number;
+  damping?: number;
+  maxSpeed?: number;
+  coulombDisScale?: number;
+  getMass?: ((d?: any) => number) | undefined;
+  getCenter?: ((d?: any, degree?: number) => number[]) | undefined;
+  gravity?: number;
+  factor?: number;
+  tick?: () => void;
+  onLayoutEnd?: () => void;
+  workerEnabled?: boolean;
+  gpuEnabled?: boolean;
+}
+
+type INode = OutNode & {
+  degree: number;
+  size: number | PointTuple;
+};
+
+export interface GridLayoutOptions {
+  type: "grid";
+  width?: number;
+  height?: number;
+  begin?: PointTuple;
+  preventOverlap?: boolean;
+  nodeSize?: number | number[];
+  preventOverlapPadding?: number;
+  condense?: boolean;
+  rows?: number;
+  cols?: number;
+  sortBy?: string;
+  workerEnabled?: boolean;
+  position?: ((node: INode) => { row?: number; col?: number }) | undefined;
+  onLayoutEnd?: () => void;
+}
+
+export interface MDSLayoutOptions {
+  type: "mds";
+  center?: PointTuple;
+  linkDistance?: number;
+  workerEnabled?: boolean;
+  onLayoutEnd?: () => void;
+}
+
+export interface RandomLayoutOptions {
+  type: "random";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  workerEnabled?: boolean;
+  onLayoutEnd?: () => void;
+}
+
+export interface ForceLayoutOptions {
+  type: "force";
+  center?: PointTuple;
+  linkDistance?: number | ((d?: any) => number) | undefined;
+  edgeStrength?: number | ((d?: any) => number) | undefined;
+  nodeStrength?: number | ((d?: any) => number) | undefined;
+  preventOverlap?: boolean;
+  collideStrength?: number;
+  nodeSize?: number | number[] | ((d?: any) => number) | undefined;
+  nodeSpacing?: number | number[] | ((d?: any) => number) | undefined;
+  alpha?: number;
+  alphaDecay?: number;
+  alphaMin?: number;
+  clustering?: boolean;
+  clusterNodeStrength?: number;
+  clusterEdgeStrength?: number;
+  clusterEdgeDistance?: number;
+  clusterNodeSize?: number;
+  clusterFociStrength?: number;
+  forceSimulation?: any;
+  tick?: () => void;
+  onLayoutEnd?: () => void;
+  workerEnabled?: boolean;
+}
+
+export interface RadialLayoutOptions {
+  type: "radial";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  linkDistance?: number;
+  maxIteration?: number;
+  focusNode?: string | Node | null;
+  unitRadius?: number | null;
+  preventOverlap?: boolean;
+  nodeSize?: number | number[] | undefined;
+  nodeSpacing?: number | Function | undefined;
+  maxPreventOverlapIteration?: number;
+  strictRadial?: boolean;
+  sortBy?: string | undefined;
+  sortStrength?: number;
+  workerEnabled?: boolean;
+  onLayoutEnd?: () => void;
+}
+
+export interface FruchtermanGPULayoutOptions {
+  type: "fruchterman-gpu";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  maxIteration?: number;
+  gravity?: number;
+  speed?: number;
+  clustering?: boolean;
+  clusterGravity?: number;
+  workerEnabled?: boolean;
+  gpuEnabled?: boolean;
+  onLayoutEnd?: () => void;
+}
+
+export interface GForceGPULayoutOptions {
+  type: "gForce-gpu";
+  center?: PointTuple;
+  linkDistance?: number | ((d?: any) => number) | undefined;
+  nodeStrength?: number | ((d?: any) => number) | undefined;
+  edgeStrength?: number | ((d?: any) => number) | undefined;
+  minMovement?: number;
+  maxIteration?: number;
+  damping?: number;
+  maxSpeed?: number;
+  coulombDisScale?: number;
+  getMass?: ((d?: any) => number) | undefined;
+  getCenter?: ((d?: any, degree?: number) => number[]) | undefined;
+  gravity?: number;
+  onLayoutEnd?: () => void;
+  workerEnabled?: boolean;
+  gpuEnabled?: boolean;
+}
+
+
+export interface ForceAtlas2LayoutOptions {
+  type: "forceAtlas2";
+  center?: PointTuple;
+  width?: number;
+  height?: number;
+  workerEnabled?: boolean;
+  onLayoutEnd?: () => void;
+  tick?: () => void;
+  kr?: number;
+  kg?: number;
+  ks?: number;
+  ksmax?: number;
+  tao?: number;
+  maxIteration?: number;
+  mode?: 'normal' | 'linlog';
+  preventOverlap?: boolean;
+  dissuadeHubs?: boolean;
+  barnesHut?: boolean;
+  prune?: boolean;
+}
+
+export interface ERLayoutOptions {
+  type: "er";
+  width?: number;
+  height?: number;
+  nodeMinGap?: number;
+}
+export namespace ILayout {
+  export type LayoutTypes =
+    | "grid"
+    | "random"
+    | "force"
+    | "circular"
+    | "dagre"
+    | "radial"
+    | "concentric"
+    | "mds"
+    | "fruchterman"
+    | "fruchterman-gpu"
+    | "gForce"
+    | "gForce-gpu"
+    | "comboForce"
+    | "forceAtlas2"
+    | "er";
+
+  export type LayoutOptions =
+    | GridLayoutOptions
+    | RandomLayoutOptions
+    | ForceLayoutOptions
+    | CircularLayoutOptions
+    | DagreLayoutOptions
+    | RadialLayoutOptions
+    | ConcentricLayoutOptions
+    | MDSLayoutOptions
+    | FruchtermanLayoutOptions
+    | FruchtermanGPULayoutOptions
+    | GForceLayoutOptions
+    | GForceGPULayoutOptions
+    | ComboForceLayoutOptions
+    | ComboCombinedLayoutOptions
+    | ForceAtlas2LayoutOptions
+    | ERLayoutOptions;
+}

package/src/registy/index.ts

@@ -0,0 +1,43 @@
+import { Base } from "../layout/base";
+import { isObject } from "../util";
+
+const map: Map<string, any> = new Map();
+
+export const registerLayout = (name: string, layoutOverride: any) => {
+  if (map.get(name)) {
+    console.warn(`The layout with the name ${name} exists already, it will be overridden`);
+  }
+  if (isObject(layoutOverride)) {
+    // tslint:disable-next-line: max-classes-per-file
+    class GLayout extends Base {
+      constructor(cfg: any) {
+        super();
+        const self = this as any;
+        const props: any = {};
+        const defaultCfg = self.getDefaultCfg();
+        Object.assign(props, defaultCfg, layoutOverride, cfg as unknown);
+        Object.keys(props).forEach((key: string) => {
+          const value = props[key];
+          self[key] = value;
+        });
+      }
+    }
+    map.set(name, GLayout);
+  } else {
+    map.set(name, layoutOverride);
+  }
+  return map.get(name);
+};
+
+export const unRegisterLayout = (name: string) => {
+  if (map.has(name)) {
+    map.delete(name);
+  }
+};
+
+export const getLayoutByName = (name: string) => {
+  if (map.has(name)) {
+    return map.get(name);
+  }
+  return null;
+};

package/src/util/array.ts

@@ -0,0 +1 @@
+export const isArray = Array.isArray;

package/src/util/function.ts

@@ -0,0 +1,64 @@
+import { isArray, isObject } from ".";
+import { isNumber } from "./number";
+
+export const isFunction = (val: unknown): val is Function =>
+  typeof val === 'function';
+
+
+export const getFunc = (
+  value: number,
+  defaultValue: number,
+  func?: ((d?: any) => number) | undefined,
+): Function => {
+  let resultFunc;
+  if (func) {
+    resultFunc = func;
+  } else if (isNumber(value)) {
+    resultFunc = () => value;
+  } else {
+    resultFunc = () => defaultValue;
+  }
+  return resultFunc;
+};
+
+export const getFuncByUnknownType = (
+  defaultValue: number,
+  value?: number | number[] | { width: number, height: number } | ((d?: any) => number) | undefined,
+  resultIsNumber: boolean = true
+): (d?: any) => number | number[] => {
+  if (!value && value !== 0) {
+    return (d) => {
+      if (d.size) {
+        if (isArray(d.size)) return d.size[0] > d.size[1] ? d.size[0] : d.size[1];
+        if (isObject(d.size)) return d.size.width > d.size.height ? d.size.width : d.size.height;
+        return d.size;
+      }
+      return defaultValue;
+    };
+  }
+  if (isFunction(value)) {
+    return value;
+  }
+  if (isNumber(value)) {
+    return () => value;
+  }
+  if (isArray(value)) {
+    return () => {
+      if (resultIsNumber) {
+        const max = Math.max(...(value as number[]));
+        return isNaN(max) ? defaultValue : max;
+      }
+      return value;
+    };
+  }
+  if (isObject(value)) {
+    return () => {
+      if (resultIsNumber) {
+        const max = Math.max(value.width, value.height);
+        return isNaN(max) ? defaultValue : max;
+      }
+      return [value.width, value.height];
+    };
+  }
+  return () => defaultValue;
+};