@hpcc-js/graph 2.87.2 → 2.87.3

package/src/graph2/index.ts

@@ -1,7 +1,7 @@
-export * from "./graphT";
-export * from "./graphReactT";
-export * from "./graph";
-export * from "./dataGraph";
-export * from "./sankeyGraph";
-export * from "./subgraph";
-export * from "./vertex";
+export * from "./graphT";
+export * from "./graphReactT";
+export * from "./graph";
+export * from "./dataGraph";
+export * from "./sankeyGraph";
+export * from "./subgraph";
+export * from "./vertex";

package/src/graph2/layouts/circle.ts

@@ -1,37 +1,37 @@
-import { Layout } from "./layout";
-
-const rads = (degrees: number) => degrees * Math.PI / 180;
-const radius = (vertexCount: number, sideLength: number) => sideLength / (2 * Math.sin(rads(180 / vertexCount)));
-
-export class Circle extends Layout {
-
-    constructor(graph, readonly sideLength = 60) {
-        super(graph);
-    }
-
-    start(): Promise<this> {
-        return super.start().then(() => {
-            const size = this._graph.size();
-            const data = this._graph.graphData();
-            const vertices = data.allVertices();
-            const edges = data.allEdges();
-            edges.forEach(e => delete e.points);
-
-            const r = radius(vertices.length, this.sideLength);
-            const angle = 360 / vertices.length;
-            vertices.forEach((v, i) => {
-                delete v.fx;
-                delete v.fy;
-                v.x = size.width / 2 + Math.cos(rads(i * angle)) * r;
-                v.y = size.height / 2 + Math.sin(rads(i * angle)) * r;
-            });
-            this._graph
-                .moveVertices(true)
-                .moveEdges(true)
-                ;
-            this.stop();
-            this._running = false;
-            return this;
-        });
-    }
-}
+import { Layout } from "./layout";
+
+const rads = (degrees: number) => degrees * Math.PI / 180;
+const radius = (vertexCount: number, sideLength: number) => sideLength / (2 * Math.sin(rads(180 / vertexCount)));
+
+export class Circle extends Layout {
+
+    constructor(graph, readonly sideLength = 60) {
+        super(graph);
+    }
+
+    start(): Promise<this> {
+        return super.start().then(() => {
+            const size = this._graph.size();
+            const data = this._graph.graphData();
+            const vertices = data.allVertices();
+            const edges = data.allEdges();
+            edges.forEach(e => delete e.points);
+
+            const r = radius(vertices.length, this.sideLength);
+            const angle = 360 / vertices.length;
+            vertices.forEach((v, i) => {
+                delete v.fx;
+                delete v.fy;
+                v.x = size.width / 2 + Math.cos(rads(i * angle)) * r;
+                v.y = size.height / 2 + Math.sin(rads(i * angle)) * r;
+            });
+            this._graph
+                .moveVertices(true)
+                .moveEdges(true)
+                ;
+            this.stop();
+            this._running = false;
+            return this;
+        });
+    }
+}

package/src/graph2/layouts/dagre.ts

@@ -1,132 +1,132 @@
-import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
-import { dagre, Options } from "./dagreWorker";
-import { Layout, Point } from "./layout";
-import { EdgePlaceholder } from "./placeholders";
-
-const lineBasis = d3Line<Point>()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(d3CurveBasis)
-    ;
-
-const clusterID = (id: string | number) => `cluster_${id}`;
-const rClusterID = (id: string) => id.substring(8);
-
-function distance(x1, y1, x2, y2) {
-    const a = x1 - x2;
-    const b = y1 - y2;
-    return Math.sqrt(a * a + b * b);
-}
-
-export class Dagre extends Layout {
-
-    constructor(graph, readonly _options: Options) {
-        super(graph);
-    }
-
-    start() {
-        super.start();
-        const size = this._graph.size();
-        const data = this._graph.graphData();
-
-        return dagre({
-            subgraphs: data.allSubgraphs().map(s => ({
-                ...s.props,
-                id: clusterID(s.id)
-            })),
-            nodes: data.allVertices().map(v => {
-                delete v.fx;
-                delete v.fy;
-                const bbox = v.element.node().getBBox();
-                return {
-                    width: bbox.width,
-                    height: bbox.height,
-                    ...v.props,
-                    id: String(v.id)
-                };
-            }),
-            links: data.allEdges().map(e => {
-                return {
-                    id: String(e.props.id),
-                    source: {
-                        id: String(e.source.props.id),
-                        text: e.source.props.text,
-                    },
-                    target: {
-                        id: String(e.target.props.id),
-                        text: e.target.props.text,
-                    }
-                };
-            }),
-            hierarchy: [
-                ...data.allSubgraphs()
-                    .filter(s => !!data.subgraphParent(s.id))
-                    .map(s => ({
-                        parent: clusterID(data.subgraphParent(s.id).props.id),
-                        child: clusterID(s.id)
-                    })),
-                ...data.allVertices()
-                    .filter(v => data.vertexParent(v.id) !== undefined)
-                    .map(v => ({
-                        parent: clusterID(data.vertexParent(v.id).props.id),
-                        child: String(v.id)
-                    }))
-            ]
-        }, this._options).response.then((response: any) => {
-            if (this.running()) {
-                response.subgraphs.forEach(n => {
-                    const sg = data.subgraph(rClusterID(n.id));
-                    sg.x = n.x + size.width / 2;
-                    sg.y = n.y + size.height / 2;
-                    sg.props.width = n.width;
-                    sg.props.height = n.height;
-                });
-                response.nodes.forEach(n => {
-                    const v = data.vertex(n.id);
-                    v.x = n.x + size.width / 2;
-                    v.y = n.y + size.height / 2;
-                });
-                response.links.forEach(l => {
-                    const e = data.edge(l.id);
-                    const sourceDist = distance(e.source.x, e.source.y, l.points[0][0] + size.width / 2, l.points[0][1] + size.height / 2);
-                    const targetDist = distance(e.target.x, e.target.y, l.points[0][0] + size.width / 2, l.points[0][1] + size.height / 2);
-                    e.points = [
-                        sourceDist < targetDist ? [e.source.x, e.source.y] : [e.target.x, e.target.y],
-                        ...l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]),
-                        sourceDist < targetDist ? [e.target.x, e.target.y] : [e.source.x, e.source.y]
-                    ];
-                });
-                this._graph
-                    .moveVertices(true)
-                    .moveSubgraphs(true)
-                    .moveEdges(true)
-                    ;
-                this.stop();
-            }
-            return this;
-        });
-    }
-
-    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
-        let points = [];
-        let hasNaN = false;
-        if (ep.points) {
-            points = ep.points.map(p => {
-                const x = this._graph.project(p[0], false);
-                const y = this._graph.project(p[1], false);
-                if (isNaN(x) || isNaN(y)) {
-                    hasNaN = true;
-                }
-                return [x, y];
-            });
-        }
-        if (hasNaN || points.length < 2) {
-            return super.edgePath(ep, curveDepth);
-        }
-        return {
-            path: lineBasis(points),
-            labelPos: this.center(points)
-        };
-    }
-
-}
+import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
+import { dagre, Options } from "./dagreWorker";
+import { Layout, Point } from "./layout";
+import { EdgePlaceholder } from "./placeholders";
+
+const lineBasis = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveBasis)
+    ;
+
+const clusterID = (id: string | number) => `cluster_${id}`;
+const rClusterID = (id: string) => id.substring(8);
+
+function distance(x1, y1, x2, y2) {
+    const a = x1 - x2;
+    const b = y1 - y2;
+    return Math.sqrt(a * a + b * b);
+}
+
+export class Dagre extends Layout {
+
+    constructor(graph, readonly _options: Options) {
+        super(graph);
+    }
+
+    start() {
+        super.start();
+        const size = this._graph.size();
+        const data = this._graph.graphData();
+
+        return dagre({
+            subgraphs: data.allSubgraphs().map(s => ({
+                ...s.props,
+                id: clusterID(s.id)
+            })),
+            nodes: data.allVertices().map(v => {
+                delete v.fx;
+                delete v.fy;
+                const bbox = v.element.node().getBBox();
+                return {
+                    width: bbox.width,
+                    height: bbox.height,
+                    ...v.props,
+                    id: String(v.id)
+                };
+            }),
+            links: data.allEdges().map(e => {
+                return {
+                    id: String(e.props.id),
+                    source: {
+                        id: String(e.source.props.id),
+                        text: e.source.props.text,
+                    },
+                    target: {
+                        id: String(e.target.props.id),
+                        text: e.target.props.text,
+                    }
+                };
+            }),
+            hierarchy: [
+                ...data.allSubgraphs()
+                    .filter(s => !!data.subgraphParent(s.id))
+                    .map(s => ({
+                        parent: clusterID(data.subgraphParent(s.id).props.id),
+                        child: clusterID(s.id)
+                    })),
+                ...data.allVertices()
+                    .filter(v => data.vertexParent(v.id) !== undefined)
+                    .map(v => ({
+                        parent: clusterID(data.vertexParent(v.id).props.id),
+                        child: String(v.id)
+                    }))
+            ]
+        }, this._options).response.then((response: any) => {
+            if (this.running()) {
+                response.subgraphs.forEach(n => {
+                    const sg = data.subgraph(rClusterID(n.id));
+                    sg.x = n.x + size.width / 2;
+                    sg.y = n.y + size.height / 2;
+                    sg.props.width = n.width;
+                    sg.props.height = n.height;
+                });
+                response.nodes.forEach(n => {
+                    const v = data.vertex(n.id);
+                    v.x = n.x + size.width / 2;
+                    v.y = n.y + size.height / 2;
+                });
+                response.links.forEach(l => {
+                    const e = data.edge(l.id);
+                    const sourceDist = distance(e.source.x, e.source.y, l.points[0][0] + size.width / 2, l.points[0][1] + size.height / 2);
+                    const targetDist = distance(e.target.x, e.target.y, l.points[0][0] + size.width / 2, l.points[0][1] + size.height / 2);
+                    e.points = [
+                        sourceDist < targetDist ? [e.source.x, e.source.y] : [e.target.x, e.target.y],
+                        ...l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]),
+                        sourceDist < targetDist ? [e.target.x, e.target.y] : [e.source.x, e.source.y]
+                    ];
+                });
+                this._graph
+                    .moveVertices(true)
+                    .moveSubgraphs(true)
+                    .moveEdges(true)
+                    ;
+                this.stop();
+            }
+            return this;
+        });
+    }
+
+    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
+        let points = [];
+        let hasNaN = false;
+        if (ep.points) {
+            points = ep.points.map(p => {
+                const x = this._graph.project(p[0], false);
+                const y = this._graph.project(p[1], false);
+                if (isNaN(x) || isNaN(y)) {
+                    hasNaN = true;
+                }
+                return [x, y];
+            });
+        }
+        if (hasNaN || points.length < 2) {
+            return super.edgePath(ep, curveDepth);
+        }
+        return {
+            path: lineBasis(points),
+            labelPos: this.center(points)
+        };
+    }
+
+}

package/src/graph2/layouts/dagreWorker.ts

@@ -1,38 +1,38 @@
-export interface Subgraph {
-    id: string;
-    text: string;
-}
-
-export interface Node {
-    id: string;
-    text: string;
-}
-
-export interface Link {
-    id: string;
-    source: Node;
-    target: Node;
-}
-
-export interface Hierarchy {
-    parent: string;
-    child: string;
-}
-
-export interface Data {
-    subgraphs: Subgraph[];
-    nodes: Node[];
-    links: Link[];
-    hierarchy: Hierarchy[];
-}
-
-export interface Options {
-    rankdir: "TB" | "BT" | "LR" | "RL";
-    nodesep: number;
-    edgesep: number;
-    ranksep: number;
-    digraph: boolean;
-}
+export interface Subgraph {
+    id: string;
+    text: string;
+}
+
+export interface Node {
+    id: string;
+    text: string;
+}
+
+export interface Link {
+    id: string;
+    source: Node;
+    target: Node;
+}
+
+export interface Hierarchy {
+    parent: string;
+    child: string;
+}
+
+export interface Data {
+    subgraphs: Subgraph[];
+    nodes: Node[];
+    links: Link[];
+    hierarchy: Hierarchy[];
+}
+
+export interface Options {
+    rankdir: "TB" | "BT" | "LR" | "RL";
+    nodesep: number;
+    edgesep: number;
+    ranksep: number;
+    digraph: boolean;
+}
 
 export function dagre(data: Data, options: Options) {
     // eslint-disable-next-line quotes

package/src/graph2/layouts/forceDirected.ts

@@ -1,117 +1,117 @@
-import { forceCenter as d3ForceCenter, forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation, forceX as d3ForceX, forceY as d3ForceY } from "d3-force";
-
-import { Layout } from "./layout";
-
-import { Options } from "./forceDirectedWorker";
-
-//  Non worker ---
-
-export class ForceDirectedBase extends Layout {
-
-    protected _links;
-    protected _charge;
-    protected _center;
-    protected _simulation;
-
-    constructor(graph, readonly _options: Options) {
-        super(graph);
-    }
-
-    start() {
-        return super.start().then(() => {
-
-            const size = this._graph.size();
-            const data = this._graph.graphData();
-            const vertices = data.allVertices();
-            const edges = data.allEdges();
-            edges.forEach(e => delete e.points);
-
-            this._links = d3ForceLink(edges)
-                .id(d => d.id)
-                .distance(this._options.linkDistance)
-                .strength(this._options.linkStrength)
-                ;
-
-            this._charge = d3ForceManyBody()
-                .strength(this._options.repulsionStrength)
-                .distanceMin(this._options.distanceMin)
-                .distanceMax(this._options.distanceMax)
-                ;
-
-            this._center = d3ForceCenter(size.width / 2, size.height / 2);
-
-            const fx = d3ForceX()
-                .strength(this._options.forceStrength)
-                ;
-            const fy = d3ForceY()
-                .strength(this._options.forceStrength)
-                ;
-
-            this._simulation = d3ForceSimulation(vertices.map(v => {
-                const { width, height } = v.element.node().getBBox();
-                v.fx = (this._options.pinCentroid && v.props.centroid) ? size.width / 2 : undefined;
-                v.fy = (this._options.pinCentroid && v.props.centroid) ? size.height / 2 : undefined;
-                v["width"] = width;
-                v["height"] = height;
-                return v;
-            }))
-                .force("link", this._links)
-                .force("charge", this._charge)
-                .force("center", this._center)
-                .force("x", fx)
-                .force("y", fy)
-                .alpha(this._options.alpha / 2)
-                .alphaMin(this._options.alphaMin)
-                .alphaDecay(this._options.alphaDecay)
-                .velocityDecay(this._options.velocityDecay)
-                .stop()
-                ;
-
-            return this;
-        });
-    }
-
-    stop() {
-        this._simulation.stop();
-        return super.stop();
-    }
-}
-
-export class ForceDirected extends ForceDirectedBase {
-
-    start() {
-        return super.start().then(() => {
-            this._simulation.tick(this._options.iterations);
-            this.stop();
-            this._graph
-                .moveVertices(false)
-                .moveEdges(false)
-                ;
-            return this;
-        });
-    }
-}
-
-export class ForceDirectedAnimated extends ForceDirectedBase {
-
-    start() {
-        return super.start().then(() => {
-            return new Promise<this>(resolve => {
-                this._simulation
-                    .on("tick", () => {
-                        this._graph
-                            .moveVertices(false)
-                            .moveEdges(false)
-                            ;
-                        this._graph.progress("layout-tick");
-                    })
-                    .on("end", () => {
-                        this._running = false;
-                        resolve(this);
-                    })
-                    .restart()
-                    ;
-            });
-        });
-    }
-}
+import { forceCenter as d3ForceCenter, forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation, forceX as d3ForceX, forceY as d3ForceY } from "d3-force";
+
+import { Layout } from "./layout";
+
+import { Options } from "./forceDirectedWorker";
+
+//  Non worker ---
+
+export class ForceDirectedBase extends Layout {
+
+    protected _links;
+    protected _charge;
+    protected _center;
+    protected _simulation;
+
+    constructor(graph, readonly _options: Options) {
+        super(graph);
+    }
+
+    start() {
+        return super.start().then(() => {
+
+            const size = this._graph.size();
+            const data = this._graph.graphData();
+            const vertices = data.allVertices();
+            const edges = data.allEdges();
+            edges.forEach(e => delete e.points);
+
+            this._links = d3ForceLink(edges)
+                .id(d => d.id)
+                .distance(this._options.linkDistance)
+                .strength(this._options.linkStrength)
+                ;
+
+            this._charge = d3ForceManyBody()
+                .strength(this._options.repulsionStrength)
+                .distanceMin(this._options.distanceMin)
+                .distanceMax(this._options.distanceMax)
+                ;
+
+            this._center = d3ForceCenter(size.width / 2, size.height / 2);
+
+            const fx = d3ForceX()
+                .strength(this._options.forceStrength)
+                ;
+            const fy = d3ForceY()
+                .strength(this._options.forceStrength)
+                ;
+
+            this._simulation = d3ForceSimulation(vertices.map(v => {
+                const { width, height } = v.element.node().getBBox();
+                v.fx = (this._options.pinCentroid && v.props.centroid) ? size.width / 2 : undefined;
+                v.fy = (this._options.pinCentroid && v.props.centroid) ? size.height / 2 : undefined;
+                v["width"] = width;
+                v["height"] = height;
+                return v;
+            }))
+                .force("link", this._links)
+                .force("charge", this._charge)
+                .force("center", this._center)
+                .force("x", fx)
+                .force("y", fy)
+                .alpha(this._options.alpha / 2)
+                .alphaMin(this._options.alphaMin)
+                .alphaDecay(this._options.alphaDecay)
+                .velocityDecay(this._options.velocityDecay)
+                .stop()
+                ;
+
+            return this;
+        });
+    }
+
+    stop() {
+        this._simulation.stop();
+        return super.stop();
+    }
+}
+
+export class ForceDirected extends ForceDirectedBase {
+
+    start() {
+        return super.start().then(() => {
+            this._simulation.tick(this._options.iterations);
+            this.stop();
+            this._graph
+                .moveVertices(false)
+                .moveEdges(false)
+                ;
+            return this;
+        });
+    }
+}
+
+export class ForceDirectedAnimated extends ForceDirectedBase {
+
+    start() {
+        return super.start().then(() => {
+            return new Promise<this>(resolve => {
+                this._simulation
+                    .on("tick", () => {
+                        this._graph
+                            .moveVertices(false)
+                            .moveEdges(false)
+                            ;
+                        this._graph.progress("layout-tick");
+                    })
+                    .on("end", () => {
+                        this._running = false;
+                        resolve(this);
+                    })
+                    .restart()
+                    ;
+            });
+        });
+    }
+}