@antv/layout 1.2.14-beta.8 → 2.0.0-alpha.1

package/lib/d3-force/index.js

@@ -1,12 +1,59 @@
-import { __awaiter } from "tslib";
-import { deepMix, pick } from '@antv/util';
-import { forceCenter, forceCollide, forceLink, forceManyBody, forceRadial, forceSimulation, forceX, forceY, } from 'd3-force';
-export class D3ForceLayout {
+import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.54.0_tslib@2.8.1_typescript@4.9.5/node_modules/tslib/tslib.es6.js';
+import { BaseLayoutWithIterations } from '../core/base-layout.js';
+import { assignDefined } from '../util/object.js';
+import { normalizeViewport } from '../util/viewport.js';
+import { formatNodeSizeFn } from '../util/format.js';
+import forceInABox from './force-in-a-box.js';
+import deepMix from '../node_modules/.pnpm/@antv_util@3.3.11/node_modules/@antv/util/esm/lodash/deep-mix.js';
+import forceSimulation from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/simulation.js';
+import forceCenter from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/center.js';
+import forceManyBody from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/manyBody.js';
+import forceLink from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/link.js';
+import forceCollide from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/collide.js';
+import forceX from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/x.js';
+import forceY from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/y.js';
+import forceRadial from '../node_modules/.pnpm/d3-force@3.0.0/node_modules/d3-force/src/radial.js';
+
+const DEFAULTS_LAYOUT_OPTIONS$6 = {
+    centerStrength: 1,
+    edgeId: (d) => String(d.id),
+    linkDistance: 30,
+    edgeStrength: undefined,
+    edgeIterations: 1,
+    preventOverlap: false,
+    nodeSize: 10,
+    nodeSpacing: 0,
+    collideStrength: 1,
+    collideIterations: 1,
+    nodeStrength: -30,
+    distanceMin: undefined,
+    distanceMax: undefined,
+    theta: undefined,
+    alpha: 1,
+    alphaMin: 0.001,
+    alphaDecay: 1 - Math.pow(0.001, 1 / 300),
+    alphaTarget: 0,
+    velocityDecay: 0.4,
+    clustering: false,
+    clusterNodeStrength: -1,
+    clusterEdgeStrength: 0.1,
+    clusterEdgeDistance: 100,
+    clusterFociStrength: 0.8,
+    clusterNodeSize: 10,
+};
+class D3ForceLayout extends BaseLayoutWithIterations {
+    getDefaultOptions() {
+        return DEFAULTS_LAYOUT_OPTIONS$6;
+    }
+    mergeOptions(base, patch) {
+        return deepMix({}, base, patch);
+    }
     constructor(options) {
+        super(options);
         this.id = 'd3-force';
+        this.d3Nodes = [];
+        this.d3Edges = [];
         this.config = {
-            inputNodeAttrs: ['x', 'y', 'vx', 'vy', 'fx', 'fy'],
-            outputNodeAttrs: ['x', 'y', 'vx', 'vy'],
             simulationAttrs: [
                 'alpha',
                 'alphaMin',
@@ -16,71 +63,93 @@ export class D3ForceLayout {
                 'randomSource',
             ],
         };
-        this.forceMap = {
-            link: forceLink,
-            manyBody: forceManyBody,
-            center: forceCenter,
-            collide: forceCollide,
-            radial: forceRadial,
-            x: forceX,
-            y: forceY,
-        };
-        // @ts-ignore
-        this.options = {
-            link: {
-                id: (edge) => edge.id,
-            },
-            manyBody: {},
-            center: {
-                x: 0,
-                y: 0,
-            },
-        };
-        this.context = {
-            options: {},
-            assign: false,
-            nodes: [],
-            edges: [],
-        };
-        deepMix(this.options, options);
         if (this.options.forceSimulation) {
             this.simulation = this.options.forceSimulation;
         }
     }
-    execute(graph, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.genericLayout(false, graph, options);
-        });
+    stop() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        return this;
     }
-    assign(graph, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.genericLayout(true, graph, options);
-        });
+    tick(iterations = 1) {
+        var _a, _b;
+        if (this.simulation) {
+            for (let i = 0; i < iterations; i++) {
+                this.simulation.tick();
+            }
+            this.syncPositionsFromD3();
+            (_b = (_a = this.options).onTick) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        }
+        return this;
     }
-    stop() {
-        this.simulation.stop();
+    restart(alpha) {
+        if (this.simulation) {
+            if (alpha !== undefined) {
+                this.simulation.alpha(alpha);
+            }
+            this.simulation.restart();
+        }
+        return this;
+    }
+    reheat() {
+        return this.restart(1);
+    }
+    getAlpha() {
+        var _a, _b;
+        return (_b = (_a = this.simulation) === null || _a === void 0 ? void 0 : _a.alpha()) !== null && _b !== void 0 ? _b : 0;
+    }
+    setAlpha(alpha) {
+        if (this.simulation) {
+            this.simulation.alpha(alpha);
+        }
+        return this;
+    }
+    getForce(name) {
+        var _a;
+        return (_a = this.simulation) === null || _a === void 0 ? void 0 : _a.force(name);
+    }
+    force(name, force) {
+        if (this.simulation) {
+            this.simulation.force(name, force);
+        }
+        return this;
     }
-    tick(iterations) {
-        this.simulation.tick(iterations);
-        return this.getResult();
+    nodes() {
+        var _a, _b;
+        return (_b = (_a = this.simulation) === null || _a === void 0 ? void 0 : _a.nodes()) !== null && _b !== void 0 ? _b : [];
     }
-    restart() {
-        this.simulation.restart();
+    find(x, y, radius) {
+        if (!this.simulation)
+            return undefined;
+        return this.simulation.find(x, y, radius);
     }
     setFixedPosition(id, position) {
-        const node = this.context.nodes.find((n) => n.id === id);
-        if (!node)
+        const d3Node = this.d3Nodes.find((n) => n.id === id);
+        const node = this.model.node(id);
+        if (!node || !d3Node)
+            return;
+        const keys = ['fx', 'fy', 'fz'];
+        if (position === null) {
+            // Unset fixed position
+            keys.forEach((key) => {
+                delete node[key];
+                delete d3Node[key];
+            });
             return;
+        }
         position.forEach((value, index) => {
-            if (typeof value === 'number' || value === null) {
-                const key = ['fx', 'fy', 'fz'][index];
-                node[key] = value;
+            if (index < keys.length &&
+                (typeof value === 'number' || value === null)) {
+                node[keys[index]] = value;
+                d3Node[keys[index]] = value;
             }
         });
     }
-    getOptions(options) {
+    parseOptions(options) {
         var _a, _b;
-        const _ = deepMix({}, this.options, options);
+        const _ = options;
         // process nodeSize
         if (_.collide && ((_a = _.collide) === null || _a === void 0 ? void 0 : _a.radius) === undefined) {
             _.collide = _.collide || {};
@@ -96,78 +165,388 @@ export class D3ForceLayout {
                 _.iterations = _.collide.iterations;
             }
         }
-        // assign to context
-        this.context.options = _;
         return _;
     }
-    genericLayout(assign, graph, options) {
+    layout() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const _options = this.getOptions(options);
-            const nodes = graph.getAllNodes().map(({ id, data }) => (Object.assign(Object.assign({ id }, data), pick(data.data, this.config.inputNodeAttrs))));
-            const edges = graph.getAllEdges().map((edge) => (Object.assign({}, edge)));
-            Object.assign(this.context, { assign, nodes, edges, graph });
-            const promise = new Promise((resolver) => {
-                this.resolver = resolver;
+            const options = this.parseOptions(this.options || {});
+            this.createD3Copies();
+            const simulation = this.setSimulation(options);
+            simulation.nodes(this.d3Nodes);
+            (_a = simulation.force('link')) === null || _a === void 0 ? void 0 : _a.links(this.d3Edges);
+            return new Promise((resolve) => {
+                simulation.on('end', () => {
+                    this.syncPositionsFromD3();
+                    resolve();
+                });
             });
-            const simulation = this.setSimulation(_options);
-            simulation.nodes(nodes);
-            (_a = simulation.force('link')) === null || _a === void 0 ? void 0 : _a.links(edges);
-            return promise;
         });
     }
-    getResult() {
-        const { assign, nodes, edges, graph } = this.context;
-        const nodesResult = nodes.map((node) => ({
-            id: node.id,
-            data: Object.assign(Object.assign({}, node.data), pick(node, this.config.outputNodeAttrs)),
-        }));
-        const edgeResult = edges.map(({ id, source, target, data }) => ({
-            id,
-            source: typeof source === 'object' ? source.id : source,
-            target: typeof target === 'object' ? target.id : target,
-            data,
-        }));
-        if (assign) {
-            nodesResult.forEach((node) => graph.mergeNodeData(node.id, node.data));
-        }
-        return { nodes: nodesResult, edges: edgeResult };
+    createD3Copies() {
+        this.d3Nodes = [];
+        this.d3Edges = [];
+        this.model.forEachNode((node) => {
+            this.d3Nodes.push(Object.assign({}, node));
+        });
+        this.model.forEachEdge((edge) => {
+            this.d3Edges.push(Object.assign({}, edge));
+        });
+    }
+    syncPositionsFromD3() {
+        this.d3Nodes.forEach((d3Node) => {
+            const node = this.model.node(d3Node.id);
+            if (node) {
+                node.x = d3Node.x;
+                node.y = d3Node.y;
+                if (d3Node.z !== undefined)
+                    node.z = d3Node.z;
+                // 同步固定位置属性
+                if (d3Node.fx !== undefined)
+                    node.fx = d3Node.fx;
+                if (d3Node.fy !== undefined)
+                    node.fy = d3Node.fy;
+                if (d3Node.fz !== undefined)
+                    node.fz = d3Node.fz;
+                // 同步速度属性
+                if (d3Node.vx !== undefined)
+                    node.vx = d3Node.vx;
+                if (d3Node.vy !== undefined)
+                    node.vy = d3Node.vy;
+                if (d3Node.vz !== undefined)
+                    node.vz = d3Node.vz;
+            }
+        });
     }
     initSimulation() {
         return forceSimulation();
     }
     setSimulation(options) {
-        const simulation = this.simulation || this.options.forceSimulation || this.initSimulation();
+        const simulation = this.simulation ||
+            this.options.forceSimulation ||
+            this.initSimulation();
         if (!this.simulation) {
-            this.simulation = simulation
-                .on('tick', () => { var _a; return (_a = options.onTick) === null || _a === void 0 ? void 0 : _a.call(options, this.getResult()); })
-                .on('end', () => { var _a; return (_a = this.resolver) === null || _a === void 0 ? void 0 : _a.call(this, this.getResult()); });
+            this.simulation = simulation.on('tick', () => {
+                var _a;
+                this.syncPositionsFromD3();
+                (_a = options.onTick) === null || _a === void 0 ? void 0 : _a.call(options, this);
+            });
         }
-        apply(simulation, this.config.simulationAttrs.map((name) => [
+        apply$1(simulation, this.config.simulationAttrs.map((name) => [
             name,
             options[name],
         ]));
-        Object.entries(this.forceMap).forEach(([name, Ctor]) => {
-            const forceName = name;
-            if (options[name]) {
-                let force = simulation.force(forceName);
-                if (!force) {
-                    force = Ctor();
-                    simulation.force(forceName, force);
-                }
-                apply(force, Object.entries(options[forceName]));
-            }
-            else
-                simulation.force(forceName, null);
-        });
+        this.setupForces(simulation, options);
         return simulation;
     }
+    setupForces(simulation, options) {
+        this.setupLinkForce(simulation, options);
+        this.setupManyBodyForce(simulation, options);
+        this.setupCenterForce(simulation, options);
+        this.setupCollisionForce(simulation, options);
+        this.setupXForce(simulation, options);
+        this.setupYForce(simulation, options);
+        this.setupRadialForce(simulation, options);
+        this.setupClusterForce(simulation, options);
+    }
+    getCenterOptions(options) {
+        if (!options.width ||
+            !options.height ||
+            options.centerStrength !== undefined) {
+            const viewport = normalizeViewport({
+                width: options.width,
+                height: options.height,
+            });
+            return assignDefined({}, options.center || {}, {
+                x: viewport.width / 2,
+                y: viewport.height / 2,
+                strength: options.centerStrength,
+            });
+        }
+        return undefined;
+    }
+    setupCenterForce(simulation, options) {
+        const center = this.getCenterOptions(options);
+        if (center) {
+            let force = simulation.force('center');
+            if (!force) {
+                force = forceCenter(center.x, center.y);
+                simulation.force('center', force);
+            }
+            const params = [];
+            if (center.x !== undefined)
+                params.push(['x', center.x]);
+            if (center.y !== undefined)
+                params.push(['y', center.y]);
+            if (center.strength !== undefined)
+                params.push(['strength', center.strength]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('center', null);
+        }
+    }
+    getManyBodyOptions(options) {
+        if (options.manyBody !== undefined ||
+            options.nodeStrength !== undefined ||
+            options.distanceMin !== undefined ||
+            options.distanceMax !== undefined ||
+            options.theta !== undefined) {
+            return assignDefined({}, options.manyBody || {}, {
+                strength: options.nodeStrength,
+                distanceMin: options.distanceMin,
+                distanceMax: options.distanceMax,
+                theta: options.theta,
+            });
+        }
+        return undefined;
+    }
+    setupManyBodyForce(simulation, options) {
+        const manyBody = this.getManyBodyOptions(options);
+        if (manyBody) {
+            let force = simulation.force('charge');
+            if (!force) {
+                force = forceManyBody();
+                simulation.force('charge', force);
+            }
+            const params = [];
+            if (manyBody.strength !== undefined)
+                params.push(['strength', manyBody.strength]);
+            if (manyBody.distanceMin !== undefined)
+                params.push(['distanceMin', manyBody.distanceMin]);
+            if (manyBody.distanceMax !== undefined)
+                params.push(['distanceMax', manyBody.distanceMax]);
+            if (manyBody.theta !== undefined)
+                params.push(['theta', manyBody.theta]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('charge', null);
+        }
+    }
+    getLinkOptions(options) {
+        if (options.link ||
+            options.edgeId !== undefined ||
+            options.linkDistance !== undefined ||
+            options.edgeStrength !== undefined ||
+            options.edgeIterations !== undefined) {
+            return assignDefined({}, options.link || {}, {
+                id: options.edgeId,
+                distance: options.linkDistance,
+                strength: options.edgeStrength,
+                iterations: options.edgeIterations,
+            });
+        }
+        return undefined;
+    }
+    setupLinkForce(simulation, options) {
+        const edges = this.model.edges();
+        const link = this.getLinkOptions(options);
+        if (edges.length > 0 && link) {
+            let force = simulation.force('link');
+            if (!force) {
+                force = forceLink();
+                simulation.force('link', force);
+            }
+            const params = [];
+            if (link.id !== undefined)
+                params.push(['id', link.id]);
+            if (link.distance !== undefined)
+                params.push(['distance', link.distance]);
+            if (link.strength !== undefined)
+                params.push(['strength', link.strength]);
+            if (link.iterations !== undefined)
+                params.push(['iterations', link.iterations]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('link', null);
+        }
+    }
+    getCollisionOptions(options) {
+        if (!options.preventOverlap)
+            return undefined;
+        if (options.collide !== undefined ||
+            options.nodeSize !== undefined ||
+            options.nodeSpacing !== undefined ||
+            options.collideStrength !== undefined ||
+            options.collideIterations !== undefined) {
+            const radius = options.nodeSize || options.nodeSpacing
+                ? (d) => formatNodeSizeFn(options.nodeSize, options.nodeSpacing)(d._original) / 2
+                : undefined;
+            return assignDefined({}, options.collide || {}, {
+                radius,
+                strength: options.collideStrength,
+                iterations: options.collideIterations,
+            });
+        }
+        return undefined;
+    }
+    setupCollisionForce(simulation, options) {
+        const collide = this.getCollisionOptions(options);
+        if (collide) {
+            let force = simulation.force('collide');
+            if (!force) {
+                force = forceCollide();
+                simulation.force('collide', force);
+            }
+            const params = [];
+            if (collide.radius !== undefined)
+                params.push(['radius', collide.radius]);
+            if (collide.strength !== undefined)
+                params.push(['strength', collide.strength]);
+            if (collide.iterations !== undefined)
+                params.push(['iterations', collide.iterations]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('collide', null);
+        }
+    }
+    getXForceOptions(options) {
+        var _a;
+        if (options.x !== undefined ||
+            options.forceXPosition !== undefined ||
+            options.forceXStrength !== undefined ||
+            options.width !== undefined ||
+            options.height !== undefined) {
+            const center = this.getCenterOptions(options);
+            return assignDefined({}, options.x || {}, {
+                x: (_a = options.forceXPosition) !== null && _a !== void 0 ? _a : (center && center.x),
+                strength: options.forceXStrength,
+            });
+        }
+        return undefined;
+    }
+    setupXForce(simulation, options) {
+        const x = this.getXForceOptions(options);
+        if (x) {
+            let force = simulation.force('x');
+            if (!force) {
+                force = forceX();
+                simulation.force('x', force);
+            }
+            const params = [];
+            if (x.x !== undefined)
+                params.push(['x', x.x]);
+            if (x.strength !== undefined)
+                params.push(['strength', x.strength]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('x', null);
+        }
+    }
+    getYForceOptions(options) {
+        var _a;
+        if (options.y !== undefined ||
+            options.forceYPosition !== undefined ||
+            options.forceYStrength !== undefined ||
+            options.width !== undefined ||
+            options.height !== undefined) {
+            const center = this.getCenterOptions(options);
+            return assignDefined({}, options.y || {}, {
+                y: (_a = options.forceYPosition) !== null && _a !== void 0 ? _a : (center && center.y),
+                strength: options.forceYStrength,
+            });
+        }
+        return undefined;
+    }
+    setupYForce(simulation, options) {
+        const y = this.getYForceOptions(options);
+        if (y) {
+            let force = simulation.force('y');
+            if (!force) {
+                force = forceY();
+                simulation.force('y', force);
+            }
+            const params = [];
+            if (y.y !== undefined)
+                params.push(['y', y.y]);
+            if (y.strength !== undefined)
+                params.push(['strength', y.strength]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('y', null);
+        }
+    }
+    getRadialOptions(options) {
+        var _a, _b, _c;
+        if (options.radial !== undefined ||
+            options.radialStrength !== undefined ||
+            options.radialRadius !== undefined ||
+            options.radialX !== undefined ||
+            options.radialY !== undefined) {
+            const center = this.getCenterOptions(options);
+            return assignDefined({}, options.radial || {}, {
+                strength: options.radialStrength,
+                radius: (_a = options.radialRadius) !== null && _a !== void 0 ? _a : 100,
+                x: (_b = options.radialX) !== null && _b !== void 0 ? _b : (center && center.x),
+                y: (_c = options.radialY) !== null && _c !== void 0 ? _c : (center && center.y),
+            });
+        }
+        return undefined;
+    }
+    setupRadialForce(simulation, options) {
+        const radial = this.getRadialOptions(options);
+        if (radial) {
+            let force = simulation.force('radial');
+            if (!force) {
+                force = forceRadial(radial.radius || 100, radial.x, radial.y);
+                simulation.force('radial', force);
+            }
+            const params = [];
+            if (radial.radius !== undefined)
+                params.push(['radius', radial.radius]);
+            if (radial.strength !== undefined)
+                params.push(['strength', radial.strength]);
+            if (radial.x !== undefined)
+                params.push(['x', radial.x]);
+            if (radial.y !== undefined)
+                params.push(['y', radial.y]);
+            apply$1(force, params);
+        }
+        else {
+            simulation.force('radial', null);
+        }
+    }
+    setupClusterForce(simulation, options) {
+        const { clustering } = options;
+        if (clustering) {
+            const { clusterFociStrength, clusterEdgeDistance, clusterEdgeStrength, clusterNodeStrength, clusterNodeSize, clusterBy, } = options;
+            const center = this.getCenterOptions(options);
+            let force = simulation.force('group');
+            if (!force) {
+                force = forceInABox();
+                simulation.force('group', force);
+            }
+            apply$1(force, [
+                ['centerX', center && center.x],
+                ['centerY', center && center.y],
+                ['template', 'force'],
+                ['strength', clusterFociStrength],
+                ['groupBy', clusterBy],
+                ['nodes', this.model.nodes()],
+                ['links', this.model.edges()],
+                ['forceLinkDistance', clusterEdgeDistance],
+                ['forceLinkStrength', clusterEdgeStrength],
+                ['forceCharge', clusterNodeStrength],
+                ['forceNodeSize', clusterNodeSize],
+            ]);
+        }
+        else {
+            simulation.force('group', null);
+        }
+    }
 }
-const apply = (target, params) => {
+const apply$1 = (target, params) => {
     return params.reduce((acc, [method, param]) => {
         if (!acc[method] || param === undefined)
             return acc;
         return acc[method].call(target, param);
     }, target);
 };
-//# sourceMappingURL=index.js.map
+
+export { D3ForceLayout, apply$1 as apply };
+//# sourceMappingURL=index.js.map