@antv/layout 1.0.0-alpha.10 → 1.0.0-alpha.12

package/lib/Circular.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, CircularLayoutOptions, SyncLayout, LayoutMapping } from "./types";
+import type { Graph, CircularLayoutOptions, Layout, LayoutMapping } from "./types";
 /**
  * Layout arranging the nodes in a circle.
  *
@@ -14,7 +14,7 @@ import type { Graph, CircularLayoutOptions, SyncLayout, LayoutMapping } from "./
  * // 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);

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, LayoutSupervisor } 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();
@@ -46,6 +53,7 @@ export declare const SupervisorEvent: {
 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 implements LayoutSupervisor
      * 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

@@ -1,4 +1,4 @@
-import type { Graph, LayoutMapping, ConcentricLayoutOptions, SyncLayout } from "./types";
+import type { Graph, LayoutMapping, ConcentricLayoutOptions, Layout } from "./types";
 /**
  * Layout arranging the nodes in concentrics
  *
@@ -14,7 +14,7 @@ import type { Graph, LayoutMapping, ConcentricLayoutOptions, SyncLayout } from "
  * // 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> {
+export declare class ConcentricLayout implements Layout<ConcentricLayoutOptions> {
     options: ConcentricLayoutOptions;
     id: string;
     constructor(options?: ConcentricLayoutOptions);

package/lib/d3Force/index.d.ts

@@ -1,4 +1,5 @@
-import { Graph, Node, LayoutMapping, D3ForceLayoutOptions, SyncLayout } from "../types";
+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
  *
@@ -14,11 +15,15 @@ import { Graph, Node, LayoutMapping, D3ForceLayoutOptions, SyncLayout } from "..
  * // 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 SyncLayout<D3ForceLayoutOptions> {
+export declare class D3ForceLayout implements LayoutWithIterations<D3ForceLayoutOptions> {
     options: D3ForceLayoutOptions;
     id: string;
     private forceSimulation;
-    /** The sign of running */
+    private lastLayoutNodes;
+    private lastLayoutEdges;
+    private lastAssign;
+    private lastGraph;
+    private lastOptions;
     private running;
     constructor(options?: D3ForceLayoutOptions);
     /**
@@ -33,13 +38,22 @@ export declare class D3ForceLayout implements SyncLayout<D3ForceLayoutOptions> {
      * Stop simulation immediately.
      */
     stop(): void;
-    isRunning(): boolean;
+    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: any, options: {
+    overlapProcess(simulation: d3Force.Simulation<any, any>, options: {
         nodeSize: number | number[] | ((d?: Node) => number) | undefined;
         nodeSpacing: number | number[] | ((d?: Node) => number) | undefined;
         collideStrength: number;

package/lib/force/index.d.ts

@@ -1,4 +1,4 @@
-import { Graph, LayoutMapping, ForceLayoutOptions, SyncLayout, Point } from "../types";
+import { Graph, LayoutMapping, ForceLayoutOptions, Point, LayoutWithIterations } from "../types";
 import { CalcGraph, FormatedOptions } from "./types";
 /**
  * Layout with faster force
@@ -15,7 +15,7 @@ import { CalcGraph, FormatedOptions } from "./types";
  * // 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 SyncLayout<ForceLayoutOptions> {
+export declare class ForceLayout implements LayoutWithIterations<ForceLayoutOptions> {
     options: ForceLayoutOptions;
     id: string;
     /**
@@ -26,6 +26,15 @@ export declare class ForceLayout implements SyncLayout<ForceLayoutOptions> {
      * compare with minMovement to end the nodes' movement
      */
     private judgingDistance;
+    private running;
+    private lastLayoutNodes;
+    private lastLayoutEdges;
+    private lastAssign;
+    private lastCalcGraph;
+    private lastGraph;
+    private lastOptions;
+    private lastVelMap;
+    private lastResult;
     constructor(options?: ForceLayoutOptions);
     /**
      * Return the positions of nodes and edges(if needed).
@@ -35,6 +44,17 @@ export declare class ForceLayout implements SyncLayout<ForceLayoutOptions> {
      * To directly assign the positions to the nodes.
      */
     assign(graph: Graph, options?: ForceLayoutOptions): 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): LayoutMapping;
     private genericForceLayout;
     /**
      * Format merged layout options.
@@ -117,9 +137,4 @@ export declare class ForceLayout implements SyncLayout<ForceLayoutOptions> {
     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/fruchterman.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, LayoutMapping, FruchtermanLayoutOptions, SyncLayout } from "./types";
+import type { Graph, LayoutMapping, FruchtermanLayoutOptions, LayoutWithIterations } from "./types";
 /**
  * Layout with fructherman force model
  *
@@ -14,10 +14,18 @@ import type { Graph, LayoutMapping, FruchtermanLayoutOptions, SyncLayout } from
  * // 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 SyncLayout<FruchtermanLayoutOptions> {
+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;
+    private lastResult;
     constructor(options?: FruchtermanLayoutOptions);
     /**
      * Return the positions of nodes and edges(if needed).
@@ -27,11 +35,21 @@ export declare class FruchtermanLayout implements SyncLayout<FruchtermanLayoutOp
      * 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): LayoutMapping;
     private genericFruchtermanLayout;
     private formatOptions;
     private runOneStep;
     private applyCalculate;
     private calRepulsive;
     private calAttractive;
-    stop(): void;
 }

package/lib/grid.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, GridLayoutOptions, LayoutMapping, SyncLayout } from "./types";
+import type { Graph, GridLayoutOptions, LayoutMapping, Layout } from "./types";
 /**
  * Layout arranging the nodes in a grid.
  *
@@ -14,7 +14,7 @@ import type { Graph, GridLayoutOptions, LayoutMapping, SyncLayout } from "./type
  * // 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> {
+export declare class GridLayout implements Layout<GridLayoutOptions> {
     options: GridLayoutOptions;
     id: string;
     constructor(options?: GridLayoutOptions);

package/lib/mds.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, LayoutMapping, MDSLayoutOptions, SyncLayout } from "./types";
+import type { Graph, LayoutMapping, MDSLayoutOptions, Layout } from "./types";
 /**
  * Layout arranging the nodes with multiple dimensional scaling algorithm
  *
@@ -14,7 +14,7 @@ import type { Graph, LayoutMapping, MDSLayoutOptions, SyncLayout } from "./types
  * // 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> {
+export declare class MDSLayout implements Layout<MDSLayoutOptions> {
     options: MDSLayoutOptions;
     id: string;
     constructor(options?: MDSLayoutOptions);

package/lib/radial/index.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, LayoutMapping, RadialLayoutOptions, SyncLayout } from "../types";
+import type { Graph, LayoutMapping, RadialLayoutOptions, Layout } from "../types";
 /**
  * Layout arranging the nodes' on a radial shape
  *
@@ -14,7 +14,7 @@ import type { Graph, LayoutMapping, RadialLayoutOptions, SyncLayout } from "../t
  * // 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> {
+export declare class RadialLayout implements Layout<RadialLayoutOptions> {
     options: RadialLayoutOptions;
     id: string;
     constructor(options?: RadialLayoutOptions);

package/lib/random.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, LayoutMapping, RandomLayoutOptions, SyncLayout } from "./types";
+import type { Graph, LayoutMapping, RandomLayoutOptions, Layout } from "./types";
 /**
  * Layout randomizing the nodes' position
  *
@@ -14,7 +14,7 @@ import type { Graph, LayoutMapping, RandomLayoutOptions, SyncLayout } from "./ty
  * // 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> {
+export declare class RandomLayout implements Layout<RandomLayoutOptions> {
     options: RandomLayoutOptions;
     id: string;
     constructor(options?: RandomLayoutOptions);

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;

package/lib/types.d.ts

@@ -37,14 +37,45 @@ export type LayoutMapping = {
     nodes: OutNode[];
     edges: Edge[];
 };
-export interface SyncLayout<LayoutOptions> {
+export interface Layout<LayoutOptions> {
+    /**
+     * To directly assign the positions to the nodes.
+     */
     assign(graph: Graph, options?: LayoutOptions): void;
+    /**
+     * Return the positions of nodes and edges(if needed).
+     */
     execute(graph: Graph, options?: LayoutOptions): LayoutMapping;
+    /**
+     * Layout options, can be changed in runtime.
+     */
     options: LayoutOptions;
+    /**
+     * Unique ID, it will get registered and used on the webworker-side.
+     */
     id: string;
 }
-export interface SyncLayoutConstructor<LayoutOptions> {
-    new (options?: LayoutOptions): SyncLayout<LayoutOptions>;
+export declare function isLayoutWithIterations(layout: any): layout is LayoutWithIterations<any>;
+export interface LayoutWithIterations<LayoutOptions> extends Layout<LayoutOptions> {
+    /**
+     * Some layout algorithm has n iterations so that the simulation needs to be stopped at any time.
+     * This method is useful for running the simulation manually.
+     * @see https://github.com/d3/d3-force#simulation_stop
+     */
+    stop: () => void;
+    /**
+     * Restarts the simulation’s internal timer and returns the simulation.
+     * @see https://github.com/d3/d3-force#simulation_restart
+     */
+    restart: () => void;
+    /**
+     * Manually steps the simulation by the specified number of iterations.
+     * @see https://github.com/d3/d3-force#simulation_tick
+     */
+    tick: (iterations?: number) => LayoutMapping;
+}
+export interface LayoutConstructor<LayoutOptions> {
+    new (options?: LayoutOptions): Layout<LayoutOptions>;
 }
 export interface LayoutSupervisor {
     start(): void;
@@ -209,7 +240,6 @@ export interface ForceLayoutOptions extends CommonOptions {
     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;
@@ -229,7 +259,6 @@ export interface FruchtermanLayoutOptions extends CommonOptions {
     speed?: number;
     clustering?: boolean;
     clusterGravity?: number;
-    animate?: boolean;
     nodeClusterBy?: string;
     onTick?: (data: LayoutMapping) => void;
 }

package/lib/worker.d.ts

@@ -1,2 +1,3 @@
 import type { Payload } from "./supervisor";
+export declare function stopLayout(): void;
 export declare function calculateLayout(payload: Payload, transferables: Float32Array[]): Promise<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/layout",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.12",
   "description": "graph layout algorithm",
   "main": "dist/index.min.js",
   "module": "esm/index.esm.js",
@@ -32,6 +32,7 @@
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-react": "^7.7.4",
+    "@types/d3-force": "^3.0.4",
     "babel-loader": "^8.0.6",
     "ts-loader": "^7.0.3",
     "typescript": "^4.0.3",