@antv/layout 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/Circular.d.ts

@@ -1,13 +1,4 @@
-import type { Graph } from "@antv/graphlib";
-import type { CircularLayoutOptions, SyncLayout, LayoutMapping, PointTuple, OutNode } from "./types";
-type INodeData = OutNode & {
-    degree: number;
-    size: number | PointTuple;
-    weight: number;
-    children: string[];
-    parent: string[];
-};
-type IEdgeData = {};
+import type { Graph, CircularLayoutOptions, SyncLayout, LayoutMapping } from "./types";
 /**
  * Layout arranging the nodes in a circle.
  *
@@ -30,11 +21,10 @@ export declare class CircularLayout implements SyncLayout<CircularLayoutOptions>
     /**
      * Return the positions of nodes and edges(if needed).
      */
-    execute(graph: Graph<INodeData, IEdgeData>, options?: CircularLayoutOptions): LayoutMapping;
+    execute(graph: Graph, options?: CircularLayoutOptions): LayoutMapping;
     /**
      * To directly assign the positions to the nodes.
      */
-    assign(graph: Graph<INodeData, IEdgeData>, options?: CircularLayoutOptions): void;
+    assign(graph: Graph, options?: CircularLayoutOptions): void;
     private genericCircularLayout;
 }
-export {};

package/lib/Supervisor.d.ts

@@ -1,6 +1,6 @@
 import EventEmitter from 'eventemitter3';
 import { Graph, Node, Edge } from "@antv/graphlib";
-import type { SyncLayout } from "./types";
+import type { SyncLayout, LayoutSupervisor } from "./types";
 /**
  * The payload transferred from main thread to the worker.
  */
@@ -43,7 +43,7 @@ export declare const SupervisorEvent: {
  *
  * // TODO: Custom layout.
  */
-export declare class Supervisor extends EventEmitter {
+export declare class Supervisor extends EventEmitter implements LayoutSupervisor {
     private graph;
     private layout;
     /**

package/lib/concentric.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, LayoutMapping, ConcentricLayoutOptions, SyncLayout } from "./types";
+/**
+ * Layout arranging the nodes in concentrics
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new ConcentricLayout({ nodeSpacing: 10 });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new ConcentricLayout({ nodeSpacing: 10});
+ * const positions = layout.execute(graph, { nodeSpacing: 10 }); // { nodes: [], edges: [] }
+ *
+ * // If you want to assign the positions directly to the nodes, use assign method.
+ * layout.assign(graph, { nodeSpacing: 10 });
+ */
+export declare class ConcentricLayout implements SyncLayout<ConcentricLayoutOptions> {
+    options: ConcentricLayoutOptions;
+    id: string;
+    constructor(options?: ConcentricLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: ConcentricLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: ConcentricLayoutOptions): void;
+    private genericConcentricLayout;
+}

package/lib/grid.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, GridLayoutOptions, LayoutMapping, SyncLayout } from "./types";
+/**
+ * Layout arranging the nodes in a grid.
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new GridLayout({ rows: 10 });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new GridLayout({ rows: 10 });
+ * const positions = layout.execute(graph, { rows: 20 }); // { nodes: [], edges: [] }
+ *
+ * // If you want to assign the positions directly to the nodes, use assign method.
+ * layout.assign(graph, { rows: 20 });
+ */
+export declare class GridLayout implements SyncLayout<GridLayoutOptions> {
+    options: GridLayoutOptions;
+    id: string;
+    constructor(options?: GridLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: GridLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: GridLayoutOptions): void;
+    private genericGridLayout;
+}

package/lib/index.d.ts

@@ -1,4 +1,8 @@
 export * from "./circular";
 export * from "./supervisor";
 export * from "./registry";
-export * from "@antv/graphlib";
+export * from "./grid";
+export * from "./random";
+export * from "./mds";
+export * from "./concentric";
+export * from "./radial";

package/lib/mds.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, LayoutMapping, MDSLayoutOptions, SyncLayout } from "./types";
+/**
+ * Layout arranging the nodes with multiple dimensional scaling algorithm
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new MDSLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new MDSLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph, { rows: 20 }); // { nodes: [], edges: [] }
+ *
+ * // If you want to assign the positions directly to the nodes, use assign method.
+ * layout.assign(graph, { center: [100, 100] });
+ */
+export declare class MDSLayout implements SyncLayout<MDSLayoutOptions> {
+    options: MDSLayoutOptions;
+    id: string;
+    constructor(options?: MDSLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: MDSLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: MDSLayoutOptions): void;
+    private genericMDSLayout;
+}

package/lib/radial/RadialNonoverlapForce.d.ts

@@ -0,0 +1,16 @@
+import type { Graph, Node, Point } from "../types";
+export type RadialNonoverlapForceOptions = {
+    positions: Point[];
+    focusIdx: number;
+    radii: number[];
+    iterations: number;
+    height: number;
+    width: number;
+    k: number;
+    strictRadial: boolean;
+    nodes: Node[];
+    speed?: number;
+    gravity?: number;
+    nodeSizeFunc: (node: Node) => number;
+};
+export declare const radialNonoverlapForce: (graph: Graph, options: RadialNonoverlapForceOptions) => Point[];

package/lib/radial/index.d.ts

@@ -0,0 +1,32 @@
+import type { Graph, LayoutMapping, RadialLayoutOptions, SyncLayout } from "../types";
+/**
+ * Layout arranging the nodes' on a radial shape
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new RadialLayout({ focusNode: 'node0' });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new RadialLayout({ focusNode: 'node0' });
+ * const positions = layout.execute(graph, { focusNode: 'node0' }); // { nodes: [], edges: [] }
+ *
+ * // If you want to assign the positions directly to the nodes, use assign method.
+ * layout.assign(graph, { focusNode: 'node0' });
+ */
+export declare class RadialLayout implements SyncLayout<RadialLayoutOptions> {
+    options: RadialLayoutOptions;
+    id: string;
+    constructor(options?: RadialLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: RadialLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: RadialLayoutOptions): void;
+    private genericRadialLayout;
+    private run;
+    private oneIteration;
+}

package/lib/radial/mds.d.ts

@@ -0,0 +1,2 @@
+import type { PointTuple, Matrix } from '../types';
+export declare const mds: (dimension: number, distances: Matrix[], linkDistance: number) => PointTuple[];

package/lib/random.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, LayoutMapping, RandomLayoutOptions, SyncLayout } from "./types";
+/**
+ * Layout randomizing the nodes' position
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new RandomLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new RandomLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph, { center: [100, 100] }); // { nodes: [], edges: [] }
+ *
+ * // If you want to assign the positions directly to the nodes, use assign method.
+ * layout.assign(graph, { center: [100, 100] });
+ */
+export declare class RandomLayout implements SyncLayout<RandomLayoutOptions> {
+    options: RandomLayoutOptions;
+    id: string;
+    constructor(options?: RandomLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: RandomLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: RandomLayoutOptions): void;
+    private genericRandomLayout;
+}

package/lib/types.d.ts

@@ -1,102 +1,45 @@
-import type { Graph, PlainObject } from "@antv/graphlib";
-export interface Node extends PlainObject {
-    id: string;
+import { Graph as IGraph, Node as INode, Edge as IEdge, PlainObject } from "@antv/graphlib";
+export interface NodeData extends PlainObject {
+    visible?: boolean;
+    size?: number | number[];
+    bboxSize?: number[];
 }
-export interface OutNode extends Node {
+export interface OutNodeData extends NodeData {
     x: number;
     y: number;
-    fx?: number;
-    fy?: number;
-    comboId?: string;
-    layer?: number;
-    _order?: number;
-    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;
-    collapsed?: boolean;
-}
-export interface Model {
-    nodes?: Node[];
-    edges?: Edge[];
-    combos?: Combo[];
-    comboEdges?: Edge[];
-    hiddenNodes?: Node[];
-    hiddenEdges?: Edge[];
-    hiddenCombos?: Combo[];
-    vedges?: Edge[];
-}
-export interface OutModel extends Model {
-    nodes?: OutNode[];
-}
-export interface Size {
-    width: number;
-    height: number;
 }
-export type IndexMap = {
-    [key: string]: number;
-};
-export type INode = OutNode & {
-    degree: number;
-    size: number | PointTuple;
-};
-export type NodeMap = {
-    [key: string]: INode;
-};
-export type Matrix = number[];
-export type Point = {
-    x: number;
-    y: number;
-};
+export interface EdgeData extends PlainObject {
+    visible?: boolean;
+    virtual?: boolean;
+}
+/** input node */
+export type Node = INode<NodeData>;
+/** output node */
+export type OutNode = INode<OutNodeData>;
+/** input and output edge */
+export type Edge = IEdge<EdgeData>;
 export type Degree = {
     in: number;
     out: number;
     all: 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 type IndexMap = {
+    [nodeId: string]: number;
+};
+export type Graph = IGraph<NodeData, EdgeData>;
 export type PointTuple = [number, number];
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Matrix = number[];
 export type LayoutMapping = {
     nodes: OutNode[];
     edges: Edge[];
 };
 export interface SyncLayout<LayoutOptions> {
-    assign(graph: Graph<any, any>, options?: LayoutOptions): void;
-    execute(graph: Graph<any, any>, options?: LayoutOptions): LayoutMapping;
+    assign(graph: Graph, options?: LayoutOptions): void;
+    execute(graph: Graph, options?: LayoutOptions): LayoutMapping;
     options: LayoutOptions;
     id: string;
 }
@@ -107,8 +50,13 @@ export interface LayoutSupervisor {
     start(): void;
     stop(): void;
     kill(): void;
+    isRunning(): boolean;
 }
-export interface CircularLayoutOptions {
+interface CommonOptions {
+    layoutInvisibles?: boolean;
+    onLayoutEnd?: (data: LayoutMapping) => void;
+}
+export interface CircularLayoutOptions extends CommonOptions {
     center?: PointTuple;
     width?: number;
     height?: number;
@@ -119,10 +67,157 @@ export interface CircularLayoutOptions {
     divisions?: number;
     ordering?: "topology" | "topology-directed" | "degree" | null;
     angleRatio?: number;
-    workerEnabled?: boolean;
     startAngle?: number;
     endAngle?: number;
-    nodeSpacing?: ((d?: unknown) => number) | number;
-    nodeSize?: number;
-    onLayoutEnd?: () => void;
+    nodeSpacing?: ((node?: Node) => number) | number;
+    nodeSize?: number | number[];
+}
+export interface GridLayoutOptions extends CommonOptions {
+    width?: number;
+    height?: number;
+    begin?: PointTuple;
+    preventOverlap?: boolean;
+    nodeSize?: number | number[];
+    preventOverlapPadding?: number;
+    condense?: boolean;
+    rows?: number;
+    cols?: number;
+    sortBy?: string;
+    columns?: number | undefined;
+    position?: ((node?: Node) => {
+        row?: number;
+        col?: number;
+    }) | undefined;
+    nodeSpacing?: ((node?: Node) => number) | number | undefined;
+}
+export interface RandomLayoutOptions extends CommonOptions {
+    center?: PointTuple;
+    width?: number;
+    height?: number;
+}
+export interface MDSLayoutOptions extends CommonOptions {
+    center?: PointTuple;
+    linkDistance?: number;
+}
+export interface ConcentricLayoutOptions extends CommonOptions {
+    center?: PointTuple;
+    preventOverlap?: boolean;
+    nodeSize?: number | PointTuple;
+    minNodeSpacing?: number;
+    sweep?: number;
+    equidistant?: boolean;
+    startAngle?: number;
+    clockwise?: boolean;
+    maxLevelDiff?: number;
+    sortBy?: string;
+    width?: number;
+    height?: number;
+    nodeSpacing: number | number[] | ((node?: Node) => number) | undefined;
+}
+export interface RadialLayoutOptions extends CommonOptions {
+    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;
+}
+export interface DagreLayoutOptions extends CommonOptions {
+    rankdir?: "TB" | "BT" | "LR" | "RL";
+    align?: "UL" | "UR" | "DL" | "DR";
+    begin?: PointTuple;
+    nodeSize?: number | number[] | undefined;
+    nodesep?: number;
+    ranksep?: number;
+    controlPoints?: boolean;
+    sortByCombo?: boolean;
+    edgeLabelSpace?: boolean;
+    nodeOrder?: string[];
+    radial?: boolean;
+    focusNode: string | Node | null;
+    preset?: {
+        nodes: OutNode[];
+        edges: Edge[];
+    };
+    nodesepFunc?: ((d?: Node) => number) | undefined;
+    ranksepFunc?: ((d?: Node) => number) | undefined;
+}
+export interface D3ForceLayoutOptions extends CommonOptions {
+    center?: PointTuple;
+    linkDistance?: number | ((d?: Edge) => number) | undefined;
+    edgeStrength?: number | ((d?: Edge) => number) | undefined;
+    nodeStrength?: number | ((d?: Node) => number) | undefined;
+    preventOverlap?: boolean;
+    collideStrength?: number;
+    nodeSize?: number | number[] | ((d?: Node) => number) | undefined;
+    nodeSpacing?: number | number[] | ((d?: Node) => number) | undefined;
+    alpha?: number;
+    alphaDecay?: number;
+    alphaMin?: number;
+    clustering?: boolean;
+    clusterNodeStrength?: number;
+    clusterEdgeStrength?: number;
+    clusterEdgeDistance?: number;
+    clusterNodeSize?: number;
+    clusterFociStrength?: number;
+    forceSimulation?: any;
+    onTick?: (data: LayoutMapping) => void;
+}
+export interface CentripetalOptions {
+    /** Force strength for leaf nodes. */
+    leaf?: number | ((node: Node, nodes: Node[], edges: Edge[]) => number);
+    /** Force strength for single nodes. */
+    single?: number | ((node: Node) => number);
+    /** Force strength for other nodes. */
+    others?: number | ((node: Node) => number);
+    /** Centri force's position and sterngth, points to the canvas center by default */
+    center?: (node: Node, nodes: Node[], edges: Edge[], width: number, height: number) => {
+        x: number;
+        y: number;
+        centerStrength?: number;
+    };
+}
+export interface ForceLayoutOptions extends CommonOptions {
+    center?: PointTuple;
+    width?: number;
+    height?: number;
+    linkDistance?: number | ((edge?: Edge, source?: any, target?: any) => number) | undefined;
+    nodeStrength?: number | ((d?: Node) => number) | undefined;
+    edgeStrength?: number | ((d?: Edge) => number) | undefined;
+    preventOverlap?: boolean;
+    nodeSize?: number | number[] | ((d?: Node) => number) | undefined;
+    nodeSpacing?: number | number[] | ((d?: Node) => number) | undefined;
+    minMovement?: number;
+    maxIteration?: number;
+    damping?: number;
+    maxSpeed?: number;
+    coulombDisScale?: number;
+    gravity?: number;
+    factor?: number;
+    centripetalOptions?: CentripetalOptions;
+    leafCluster?: boolean;
+    clustering?: boolean;
+    nodeClusterBy?: string;
+    clusterNodeStrength?: number | ((node: Node) => number);
+    collideStrength?: number;
+    distanceThresholdMode?: "mean" | "max" | "min";
+    animate?: boolean;
+    onTick?: (data: LayoutMapping) => void;
+    getMass?: ((d?: Node) => number) | undefined;
+    getCenter?: ((d?: Node, degree?: number) => number[]) | undefined;
+    monitor?: (params: {
+        energy: number;
+        nodes: Node[];
+        edge: Edge[];
+        iterations: number;
+    }) => void;
 }
+export {};

package/lib/util/math.d.ts

@@ -1,11 +1,13 @@
-import { Matrix, Model, IndexMap, Edge, Node, OutNode, Degree, NodeMap } from "../types";
-export declare const getEdgeTerminal: (edge: Edge, type: "source" | "target") => any;
+import type { Matrix, IndexMap, Edge, Node, OutNode, Degree } from "../types";
 export declare const getDegree: (n: number, nodeIdxMap: IndexMap, edges: Edge[] | null) => Degree[];
 export declare const getDegreeMap: (nodes: Node[], edges: Edge[] | null) => {
     [id: string]: Degree;
 };
 export declare const floydWarshall: (adjMatrix: Matrix[]) => Matrix[];
-export declare const getAdjMatrix: (data: Model, directed: boolean) => Matrix[];
+export declare const getAdjMatrix: (data: {
+    nodes: Node[];
+    edges: Edge[];
+}, directed: boolean) => Matrix[];
 /**
  * scale matrix
  * @param matrix [ [], [], [] ]
@@ -41,7 +43,9 @@ export declare const getAvgNodePosition: (nodes: OutNode[]) => {
 };
 export declare const getCoreNodeAndRelativeLeafNodes: (type: "leaf" | "all", node: Node, edges: Edge[], nodeClusterBy: string, degreesMap: {
     [id: string]: Degree;
-}, nodeMap: NodeMap) => {
+}, nodeMap: {
+    [id: string]: Node;
+}) => {
     coreNode: Node;
     relativeLeafNodes: Node[];
     sameTypeLeafNodes: Node[];

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@antv/layout",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "graph layout algorithm",
   "main": "dist/index.min.js",
-  "module": "dist/index.min.js",
+  "module": "esm/index.esm.js",
   "types": "lib/index.d.ts",
   "unpkg": "dist/index.min.js",
   "files": [
     "package.json",
     "dist",
+    "esm",
     "lib",
     "LICENSE",
     "README.md"
@@ -20,9 +21,10 @@
     "antv"
   ],
   "dependencies": {
-    "@antv/graphlib": "^2.0.0-alpha.0",
+    "@antv/graphlib": "^2.0.0-alpha.1",
     "@naoak/workerize-transferable": "^0.1.0",
-    "eventemitter3": "^4.0.0"
+    "eventemitter3": "^4.0.0",
+    "ml-matrix": "^6.10.4"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
@@ -36,6 +38,11 @@
     "workerize-loader": "^2.0.2"
   },
   "scripts": {
-    "build:umd": "webpack --config webpack.config.js --mode production"
+    "dev": "webpack --config webpack.dev.config.js --mode development",
+    "build": "npm run build:esm && npm run build:umd",
+    "build:esm": "webpack --config webpack.esm.config.js --mode production",
+    "build:umd": "webpack --config webpack.config.js --mode production",
+    "publish:alpha": "npm publish --tag alpha",
+    "test": "jest"
   }
 }