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

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, Layout, LayoutMapping } from "./types";
 /**
  * Layout arranging the nodes in a circle.
  *
@@ -23,18 +14,17 @@ type IEdgeData = {};
  * // If you want to assign the positions directly to the nodes, use assign method.
  * layout.assign(graph, { radius: 20 });
  */
-export declare class CircularLayout implements SyncLayout<CircularLayoutOptions> {
+export declare class CircularLayout implements Layout<CircularLayoutOptions> {
     options: CircularLayoutOptions;
     id: string;
     constructor(options?: 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 EventEmitter from "eventemitter3";
 import { Graph, Node, Edge } from "@antv/graphlib";
-import type { SyncLayout } from "./types";
+import type { Layout, LayoutSupervisor } from "./types";
 /**
  * The payload transferred from main thread to the worker.
  */
@@ -8,6 +8,7 @@ export interface Payload {
     layout: {
         id: string;
         options: any;
+        iterations: number;
     };
     nodes: Node<any>[];
     edges: Edge<any>[];
@@ -22,6 +23,12 @@ export declare const SupervisorEvent: {
      */
     LAYOUT_END: string;
 };
+interface SupervisorOptions {
+    /**
+     * Iterations run in algorithm such as d3force, will be passed in `tick()` later.
+     */
+    iterations: number;
+}
 /**
  * @example
  * const graph = new Graph();
@@ -43,9 +50,10 @@ 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;
+    private options?;
     /**
      * Internal worker.
      */
@@ -54,12 +62,11 @@ export declare class Supervisor extends EventEmitter {
      * Flag of running state.
      */
     private running;
-    constructor(graph: Graph<any, any>, layout: SyncLayout<any>, options: {
-        auto: boolean;
-    });
+    constructor(graph: Graph<any, any>, layout: Layout<any>, options?: Partial<SupervisorOptions> | undefined);
     spawnWorker(): void;
     start(): this;
     stop(): this;
     kill(): void;
     isRunning(): boolean;
 }
+export {};

package/lib/concentric.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, LayoutMapping, ConcentricLayoutOptions, Layout } 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 Layout<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/d3Force/forceInBox.d.ts

@@ -0,0 +1,28 @@
+interface INode {
+    id: string;
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    cluster: any;
+}
+export default function forceInBox(): {
+    (alpha: number): any | undefined;
+    initialize(_: any): void;
+    template: (x: any) => string | any;
+    groupBy: (x: any) => ((d: INode) => any) | any;
+    enableGrouping: (x: any) => boolean | any;
+    strength: (x: any) => number | any;
+    centerX: (_: any) => number | any;
+    centerY: (_: any) => number | any;
+    nodes: (_: any) => INode[] | any;
+    links: (_: any) => any[] | any;
+    forceNodeSize: (_: any) => ((d: any) => number) | any;
+    nodeSize: (_: any) => ((d: any) => number) | any;
+    forceCharge: (_: any) => ((d: any) => number) | any;
+    forceLinkDistance: (_: any) => ((d: any) => number) | any;
+    forceLinkStrength: (_: any) => ((d: any) => number) | any;
+    offset: (_: any) => number[] | any;
+    getFocis: () => any;
+};
+export {};

package/lib/d3Force/index.d.ts

@@ -0,0 +1,61 @@
+import * as d3Force from "d3-force";
+import { Graph, Node, LayoutMapping, OutNode, D3ForceLayoutOptions, Edge, LayoutWithIterations } from "../types";
+/**
+ * Layout the nodes' positions with d3's basic classic force
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new D3ForceLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new D3ForceLayout({ 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 D3ForceLayout implements LayoutWithIterations<D3ForceLayoutOptions> {
+    options: D3ForceLayoutOptions;
+    id: string;
+    private forceSimulation;
+    private lastLayoutNodes;
+    private lastLayoutEdges;
+    private lastAssign;
+    private lastGraph;
+    private lastOptions;
+    private running;
+    constructor(options?: D3ForceLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: D3ForceLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: D3ForceLayoutOptions): void;
+    /**
+     * Stop simulation immediately.
+     */
+    stop(): void;
+    restart(): void;
+    /**
+     * Manually steps the simulation by the specified number of iterations.
+     * When finished it will trigger `onLayoutEnd` callback.
+     * @see https://github.com/d3/d3-force#simulation_tick
+     */
+    tick(iterations?: number): {
+        nodes: OutNode[];
+        edges: Edge[];
+    };
+    private genericForceLayout;
+    /**
+     * Prevent overlappings.
+     * @param {object} simulation force simulation of d3
+     */
+    overlapProcess(simulation: d3Force.Simulation<any, any>, options: {
+        nodeSize: number | number[] | ((d?: Node) => number) | undefined;
+        nodeSpacing: number | number[] | ((d?: Node) => number) | undefined;
+        collideStrength: number;
+    }): void;
+}

package/lib/force/forceNBody.d.ts

@@ -0,0 +1,7 @@
+import { Point } from "../types";
+import { CalcGraph } from "./types";
+export declare function forceNBody(calcGraph: CalcGraph, factor: number, coulombDisScale2: number, accMap: {
+    [id: string]: Point;
+}): {
+    [id: string]: Point;
+};

package/lib/force/index.d.ts

@@ -0,0 +1,125 @@
+import { Graph, LayoutMapping, ForceLayoutOptions, Layout, Point } from "../types";
+import { CalcGraph, FormatedOptions } from "./types";
+/**
+ * Layout with faster force
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new ForceLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new ForceLayout({ 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 ForceLayout implements Layout<ForceLayoutOptions> {
+    options: ForceLayoutOptions;
+    id: string;
+    /**
+     * time interval for layout force animations
+     */
+    private timeInterval;
+    /**
+     * compare with minMovement to end the nodes' movement
+     */
+    private judgingDistance;
+    constructor(options?: ForceLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: ForceLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: ForceLayoutOptions): void;
+    private genericForceLayout;
+    /**
+     * Format merged layout options.
+     * @param options merged layout options
+     * @param graph original graph
+     * @returns
+     */
+    private formatOptions;
+    /**
+     * Format centripetalOption in the option.
+     * @param options merged layout options
+     * @param calcGraph calculation graph
+     */
+    private formatCentripetal;
+    /**
+     * One iteration.
+     * @param calcGraph calculation graph
+     * @param graph origin graph
+     * @param iter current iteration index
+     * @param velMap nodes' velocity map
+     * @param options formatted layout options
+     * @returns
+     */
+    private runOneStep;
+    /**
+     * Calculate graph energy for monitoring convergence.
+     * @param accMap acceleration map
+     * @param nodes calculation nodes
+     * @returns energy
+     */
+    private calTotalEnergy;
+    /**
+     * Calculate the repulsive forces according to coulombs law.
+     * @param calcGraph calculation graph
+     * @param accMap acceleration map
+     * @param options formatted layout options
+     */
+    calRepulsive(calcGraph: CalcGraph, accMap: {
+        [id: string]: Point;
+    }, options: FormatedOptions): void;
+    /**
+     * Calculate the attractive forces according to hooks law.
+     * @param calcGraph calculation graph
+     * @param accMap acceleration map
+     */
+    calAttractive(calcGraph: CalcGraph, accMap: {
+        [id: string]: Point;
+    }): void;
+    /**
+     * Calculate the gravity forces toward center.
+     * @param calcGraph calculation graph
+     * @param graph origin graph
+     * @param accMap acceleration map
+     * @param options formatted layout options
+     */
+    calGravity(calcGraph: CalcGraph, graph: Graph, accMap: {
+        [id: string]: Point;
+    }, options: FormatedOptions): void;
+    /**
+     * Update the velocities for nodes.
+     * @param calcGraph calculation graph
+     * @param accMap acceleration map
+     * @param velMap velocity map
+     * @param options formatted layout options
+     * @returns
+     */
+    updateVelocity(calcGraph: CalcGraph, accMap: {
+        [id: string]: Point;
+    }, velMap: {
+        [id: string]: Point;
+    }, options: FormatedOptions): void;
+    /**
+     * Update nodes' positions.
+     * @param graph origin graph
+     * @param calcGraph calculatition graph
+     * @param velMap velocity map
+     * @param options formatted layou options
+     * @returns
+     */
+    updatePosition(graph: Graph, calcGraph: CalcGraph, velMap: {
+        [id: string]: Point;
+    }, options: FormatedOptions): void;
+    /**
+     * Stop the animation for no-silence force.
+     * TODO: confirm the controller and worker's controller
+     */
+    stop(): void;
+}

package/lib/force/types.d.ts

@@ -0,0 +1,42 @@
+import { Graph as IGraph, Node as INode, Edge as IEdge } from "@antv/graphlib";
+import { CentripetalOptions, Edge, Node, EdgeData, ForceLayoutOptions, NodeData, PointTuple } from "../types";
+export interface CalcNodeData extends NodeData {
+    x: number;
+    y: number;
+    mass: number;
+    nodeStrength: number;
+}
+export type CalcNode = INode<CalcNodeData>;
+export interface CalcEdgeData extends EdgeData {
+    linkDistance?: number;
+    edgeStrength?: number;
+}
+export type CalcEdge = IEdge<CalcEdgeData>;
+export type CalcGraph = IGraph<CalcNodeData, CalcEdgeData>;
+interface FormatCentripetalOptions extends CentripetalOptions {
+    leaf: (node: Node, nodes: Node[], edges: Edge[]) => number;
+    /** Force strength for single nodes. */
+    single: (node: Node) => number;
+    /** Force strength for other nodes. */
+    others: (node: Node) => number;
+}
+export interface FormatedOptions extends ForceLayoutOptions {
+    width: number;
+    height: number;
+    center: PointTuple;
+    minMovement: number;
+    maxIteration: number;
+    factor: number;
+    interval: number;
+    damping: number;
+    maxSpeed: number;
+    coulombDisScale: number;
+    centripetalOptions: FormatCentripetalOptions;
+    nodeSize: (d?: Node) => number;
+    getMass: (d?: Node) => number;
+    nodeStrength: (d?: Node) => number;
+    edgeStrength: (d?: Edge) => number;
+    linkDistance: (edge?: Edge, source?: any, target?: any) => number;
+    clusterNodeStrength: (node?: Node) => number;
+}
+export {};

package/lib/fruchterman.d.ts

@@ -0,0 +1,57 @@
+import type { Graph, LayoutMapping, OutNode, FruchtermanLayoutOptions, Edge, LayoutWithIterations } from "./types";
+/**
+ * Layout with fructherman force model
+ *
+ * @example
+ * // Assign layout options when initialization.
+ * const layout = new FruchtermanLayout({ center: [100, 100] });
+ * const positions = layout.execute(graph); // { nodes: [], edges: [] }
+ *
+ * // Or use different options later.
+ * const layout = new FruchtermanLayout({ 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 FruchtermanLayout implements LayoutWithIterations<FruchtermanLayoutOptions> {
+    options: FruchtermanLayoutOptions;
+    id: string;
+    private timeInterval;
+    private running;
+    private lastLayoutNodes;
+    private lastLayoutEdges;
+    private lastAssign;
+    private lastGraph;
+    private lastOptions;
+    private lastClusterMap;
+    constructor(options?: FruchtermanLayoutOptions);
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
+    execute(graph: Graph, options?: FruchtermanLayoutOptions): LayoutMapping;
+    /**
+     * To directly assign the positions to the nodes.
+     */
+    assign(graph: Graph, options?: FruchtermanLayoutOptions): void;
+    /**
+     * Stop simulation immediately.
+     */
+    stop(): void;
+    restart(): void;
+    /**
+     * Manually steps the simulation by the specified number of iterations.
+     * When finished it will trigger `onLayoutEnd` callback.
+     * @see https://github.com/d3/d3-force#simulation_tick
+     */
+    tick(iterations?: number): {
+        nodes: OutNode[];
+        edges: Edge[];
+    };
+    private genericFruchtermanLayout;
+    private formatOptions;
+    private runOneStep;
+    private applyCalculate;
+    private calRepulsive;
+    private calAttractive;
+}

package/lib/grid.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, GridLayoutOptions, LayoutMapping, Layout } 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 Layout<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,11 @@
 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";
+export * from "./fruchterman";
+export * from "./d3Force";
+export * from "./force";

package/lib/mds.d.ts

@@ -0,0 +1,30 @@
+import type { Graph, LayoutMapping, MDSLayoutOptions, Layout } 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 Layout<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, Layout } 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 Layout<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, Layout } 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 Layout<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/registry.d.ts

@@ -1,3 +1,3 @@
-import type { SyncLayoutConstructor } from "./types";
-export declare const registry: Record<string, SyncLayoutConstructor<any>>;
-export declare function registerLayout(id: string, layout: SyncLayoutConstructor<any>): void;
+import type { LayoutConstructor } from "./types";
+export declare const registry: Record<string, LayoutConstructor<any>>;
+export declare function registerLayout(id: string, layout: LayoutConstructor<any>): void;