@hpcc-js/graph 3.7.4 → 3.7.6

package/src/common/layouts/forceDirectedWorker.ts

@@ -1,22 +1,22 @@
-import { type Data, type Options } from "./workers/forceDirectedOptions.ts";
-// @ts-ignore
-import ForceDirectedWorker from "./workers/forceDirected.ts?worker&inline";
-
-export {
-    type Options
-};
-
-export function forceDirected(data: Data, options: Options) {
-    const worker = new ForceDirectedWorker();
-    const response = new Promise<string>(resolve => {
-        worker.onmessage = event => {
-            resolve(event.data);
-            worker.terminate();
-        };
-        worker.postMessage([data, options]);
-    });
-    return {
-        terminate: () => worker.terminate(),
-        response
-    };
-}
+import { type Data, type Options } from "./workers/forceDirectedOptions.ts";
+// @ts-ignore
+import ForceDirectedWorker from "./workers/forceDirected.ts?worker&inline";
+
+export {
+    type Options
+};
+
+export function forceDirected(data: Data, options: Options) {
+    const worker = new ForceDirectedWorker();
+    const response = new Promise<string>(resolve => {
+        worker.onmessage = event => {
+            resolve(event.data);
+            worker.terminate();
+        };
+        worker.postMessage([data, options]);
+    });
+    return {
+        terminate: () => worker.terminate(),
+        response
+    };
+}

package/src/common/layouts/geoForceDirected.ts

@@ -1,112 +1,112 @@
-export const tmp = 42;
-/*
-import { forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation } from "d3-force";
-import { Layout } from "./layout";
-
-export class GeoForceDirectedBase extends Layout {
-
-    protected _links;
-    protected _charge;
-    protected _simulation;
-
-    constructor(graph, readonly _options = defaultOptions) {
-        super(graph);
-    }
-
-    start() {
-        return super.start().then(() => {
-            const data = this._graph.graphData();
-            this._links = d3ForceLink(data.edges())
-                .id(d => d.id)
-                .distance(this._options.linkDistance)
-                .strength(this._options.linkStrength)
-                ;
-            this._charge = d3ForceManyBody()
-                .strength(d => this._options.charge * Math.max(d.width, d.height))
-                ;
-            this._simulation = d3ForceSimulation()
-                .force("link", this._links)
-                .force("charge", this._charge)
-                .nodes(data.vertices().map(v => {
-                    // const { width, height } = v.widget.getBBox();
-                    // v["width"] = width;
-                    // v["height"] = height;
-                    return v;
-                }))
-                .stop()
-                ;
-
-            return this;
-        });
-    }
-
-    stop() {
-        this._simulation.stop();
-        return super.stop();
-    }
-}
-
-export class GeoForceDirected extends GeoForceDirectedBase {
-
-    start() {
-        return super.start().then(() => {
-            const vertices = this._graph.graphData().vertices();
-            vertices.forEach(vp => {
-                if (vp.lat && vp.lng) {
-                    // const [x, y] = this._graph.project(vp.lat, vp.lng);
-                    // vp.fx = x;
-                    // vp.fy = y;
-                }
-            });
-
-            this._simulation
-                // .velocityDecay(0.1)
-                .restart()
-                ;
-            let total = vertices.length;
-            total = Math.min(total * total, 500);
-            for (let i = 0; i < total; ++i) {
-                this._simulation.tick();
-            }
-            this._simulation.stop();
-            vertices.forEach(vp => {
-                if (vp.lat && vp.lng) {
-                    delete vp.fx;
-                    delete vp.fy;
-                }
-            });
-
-            this._graph
-                .moveVertices(true)
-                .moveEdges(true)
-                ;
-            this.stop();
-
-            return this;
-        });
-    }
-}
-
-export class GeoForceDirectedAnimated extends GeoForceDirectedBase {
-
-    start() {
-        super.start();
-        return new Promise<this>(resolve => {
-            this._simulation
-                .velocityDecay(this._options.velocityDecay)
-                .on("tick", () => {
-                    this._graph
-                        .moveVertices(false)
-                        .moveEdges(false)
-                        ;
-                })
-                .on("end", () => {
-                    this._running = false;
-                    resolve(this);
-                })
-                .restart()
-                ;
-        });
-    }
-}
-*/
+export const tmp = 42;
+/*
+import { forceLink as d3ForceLink, forceManyBody as d3ForceManyBody, forceSimulation as d3ForceSimulation } from "d3-force";
+import { Layout } from "./layout";
+
+export class GeoForceDirectedBase extends Layout {
+
+    protected _links;
+    protected _charge;
+    protected _simulation;
+
+    constructor(graph, readonly _options = defaultOptions) {
+        super(graph);
+    }
+
+    start() {
+        return super.start().then(() => {
+            const data = this._graph.graphData();
+            this._links = d3ForceLink(data.edges())
+                .id(d => d.id)
+                .distance(this._options.linkDistance)
+                .strength(this._options.linkStrength)
+                ;
+            this._charge = d3ForceManyBody()
+                .strength(d => this._options.charge * Math.max(d.width, d.height))
+                ;
+            this._simulation = d3ForceSimulation()
+                .force("link", this._links)
+                .force("charge", this._charge)
+                .nodes(data.vertices().map(v => {
+                    // const { width, height } = v.widget.getBBox();
+                    // v["width"] = width;
+                    // v["height"] = height;
+                    return v;
+                }))
+                .stop()
+                ;
+
+            return this;
+        });
+    }
+
+    stop() {
+        this._simulation.stop();
+        return super.stop();
+    }
+}
+
+export class GeoForceDirected extends GeoForceDirectedBase {
+
+    start() {
+        return super.start().then(() => {
+            const vertices = this._graph.graphData().vertices();
+            vertices.forEach(vp => {
+                if (vp.lat && vp.lng) {
+                    // const [x, y] = this._graph.project(vp.lat, vp.lng);
+                    // vp.fx = x;
+                    // vp.fy = y;
+                }
+            });
+
+            this._simulation
+                // .velocityDecay(0.1)
+                .restart()
+                ;
+            let total = vertices.length;
+            total = Math.min(total * total, 500);
+            for (let i = 0; i < total; ++i) {
+                this._simulation.tick();
+            }
+            this._simulation.stop();
+            vertices.forEach(vp => {
+                if (vp.lat && vp.lng) {
+                    delete vp.fx;
+                    delete vp.fy;
+                }
+            });
+
+            this._graph
+                .moveVertices(true)
+                .moveEdges(true)
+                ;
+            this.stop();
+
+            return this;
+        });
+    }
+}
+
+export class GeoForceDirectedAnimated extends GeoForceDirectedBase {
+
+    start() {
+        super.start();
+        return new Promise<this>(resolve => {
+            this._simulation
+                .velocityDecay(this._options.velocityDecay)
+                .on("tick", () => {
+                    this._graph
+                        .moveVertices(false)
+                        .moveEdges(false)
+                        ;
+                })
+                .on("end", () => {
+                    this._running = false;
+                    resolve(this);
+                })
+                .restart()
+                ;
+        });
+    }
+}
+*/

package/src/common/layouts/graphviz.ts

@@ -1,137 +1,137 @@
-import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
-import { Cluster, graphviz as gvWorker, Node, isLayoutSuccess, LayoutError } from "./graphvizWorker.ts";
-import { Layout, Point } from "./layout.ts";
-import { EdgePlaceholder } from "./placeholders.ts";
-
-type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
-
-const lineBasis = d3Line<Point>()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(d3CurveBasis)
-    ;
-
-export class Graphviz extends Layout {
-
-    _engine: Engine;
-    _wasmFolder: string;
-
-    constructor(graph, engine: Engine, wasmFolder: string) {
-        super(graph);
-        this._engine = engine;
-        this._wasmFolder = wasmFolder;
-    }
-
-    start() {
-        super.start();
-        const size = this._graph.size();
-        const data = this._graph.graphData();
-        const nodeIdx = {};
-        const hierarchy: Array<Cluster | Node> = data.hierarchy((type, item, children) => {
-            switch (type) {
-                case "subgraph":
-                    return {
-                        id: item.id,
-                        text: item.props.text,
-                        children
-                    };
-                case "vertex":
-                    delete item["fx"];
-                    delete item["fy"];
-                    const bbox = this.vertexSize(item);
-                    const retVal = {
-                        id: item.id,
-                        text: item.props.text,
-                        width: bbox.width,
-                        height: bbox.height
-                    };
-                    nodeIdx[retVal.id] = retVal;
-                    return retVal;
-            }
-        }) as Array<Cluster | Node>;
-        return gvWorker({
-            items: hierarchy,
-            links: data.allEdges().map(e => ({
-                id: String(e.props.id),
-                source: nodeIdx[e.source.id],
-                target: nodeIdx[e.target.id],
-                text: e.props.label || ""
-            })),
-            raw: ""
-        }, {
-            engine: this._engine
-        }).response.then(response => {
-            if (this.running()) {
-                if (isLayoutSuccess(response)) {
-                    response.clusters.forEach(n => {
-                        const sg = data.subgraph(n.id);
-                        sg.x = n.x + size.width / 2 - n.width;
-                        sg.y = n.y + size.height / 2 - n.height;
-                        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 start: [number, number] = [e.source.x, e.source.y];
-                        const mid: [number, number][] = l.points !== undefined ? l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]) : [];
-                        const end: [number, number] = [e.target.x, e.target.y];
-                        e.points = [start, ...mid, end];
-                        // e.points = l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]);
-                    });
-                    this._graph
-                        .moveSubgraphs(true)
-                        .moveVertices(true)
-                        .moveEdges(true)
-                        ;
-                    this.stop();
-                } else {
-                    const err = response as LayoutError;
-                    console.error(`Graphviz layout fail:  ${err.error}`, err.errorDot);
-                }
-            }
-            return this;
-        });
-    }
-
-    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
-        let points = [];
-        let hasNaN = false;
-        if (ep.points) {
-            const line = this.edgeLine(ep);
-            points = ep.points.map((p, idx) => {
-                let x = NaN;
-                let y = NaN;
-                if (idx === 0) {
-                    x = this._graph.rproject(line.source.x);
-                    y = this._graph.rproject(line.source.y);
-                } else if (idx === ep.points.length - 1) {
-                    x = this._graph.rproject(line.target.x);
-                    y = this._graph.rproject(line.target.y);
-                } else {
-                    x = p[0];
-                    y = p[1];
-                }
-                x = this._graph.project(x, false);
-                y = this._graph.project(y, 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 { Cluster, graphviz as gvWorker, Node, isLayoutSuccess, LayoutError } from "./graphvizWorker.ts";
+import { Layout, Point } from "./layout.ts";
+import { EdgePlaceholder } from "./placeholders.ts";
+
+type Engine = "circo" | "dot" | "fdp" | "neato" | "osage" | "patchwork" | "twopi";
+
+const lineBasis = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveBasis)
+    ;
+
+export class Graphviz extends Layout {
+
+    _engine: Engine;
+    _wasmFolder: string;
+
+    constructor(graph, engine: Engine, wasmFolder: string) {
+        super(graph);
+        this._engine = engine;
+        this._wasmFolder = wasmFolder;
+    }
+
+    start() {
+        super.start();
+        const size = this._graph.size();
+        const data = this._graph.graphData();
+        const nodeIdx = {};
+        const hierarchy: Array<Cluster | Node> = data.hierarchy((type, item, children) => {
+            switch (type) {
+                case "subgraph":
+                    return {
+                        id: item.id,
+                        text: item.props.text,
+                        children
+                    };
+                case "vertex":
+                    delete item["fx"];
+                    delete item["fy"];
+                    const bbox = this.vertexSize(item);
+                    const retVal = {
+                        id: item.id,
+                        text: item.props.text,
+                        width: bbox.width,
+                        height: bbox.height
+                    };
+                    nodeIdx[retVal.id] = retVal;
+                    return retVal;
+            }
+        }) as Array<Cluster | Node>;
+        return gvWorker({
+            items: hierarchy,
+            links: data.allEdges().map(e => ({
+                id: String(e.props.id),
+                source: nodeIdx[e.source.id],
+                target: nodeIdx[e.target.id],
+                text: e.props.label || ""
+            })),
+            raw: ""
+        }, {
+            engine: this._engine
+        }).response.then(response => {
+            if (this.running()) {
+                if (isLayoutSuccess(response)) {
+                    response.clusters.forEach(n => {
+                        const sg = data.subgraph(n.id);
+                        sg.x = n.x + size.width / 2 - n.width;
+                        sg.y = n.y + size.height / 2 - n.height;
+                        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 start: [number, number] = [e.source.x, e.source.y];
+                        const mid: [number, number][] = l.points !== undefined ? l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]) : [];
+                        const end: [number, number] = [e.target.x, e.target.y];
+                        e.points = [start, ...mid, end];
+                        // e.points = l.points.map(p => [p[0] + size.width / 2, p[1] + size.height / 2]);
+                    });
+                    this._graph
+                        .moveSubgraphs(true)
+                        .moveVertices(true)
+                        .moveEdges(true)
+                        ;
+                    this.stop();
+                } else {
+                    const err = response as LayoutError;
+                    console.error(`Graphviz layout fail:  ${err.error}`, err.errorDot);
+                }
+            }
+            return this;
+        });
+    }
+
+    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
+        let points = [];
+        let hasNaN = false;
+        if (ep.points) {
+            const line = this.edgeLine(ep);
+            points = ep.points.map((p, idx) => {
+                let x: number;
+                let y: number;
+                if (idx === 0) {
+                    x = this._graph.rproject(line.source.x);
+                    y = this._graph.rproject(line.source.y);
+                } else if (idx === ep.points.length - 1) {
+                    x = this._graph.rproject(line.target.x);
+                    y = this._graph.rproject(line.target.y);
+                } else {
+                    x = p[0];
+                    y = p[1];
+                }
+                x = this._graph.project(x, false);
+                y = this._graph.project(y, 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/common/layouts/graphvizWorker.ts

@@ -1,27 +1,27 @@
-import { type Cluster, type Data, type Engine, isLayoutSuccess, type Node, type LayoutError, type Options } from "./workers/graphvizOptions.ts";
-// @ts-ignore
-import GraphvizWorker from "./workers/graphviz.ts?worker&inline";
-
-export {
-    type Cluster,
-    type Engine,
-    isLayoutSuccess,
-    type Node,
-    type LayoutError,
-    type Options
-};
-
-export function graphviz(data: Data, options: Options) {
-    const worker = new GraphvizWorker();
-    const response = new Promise<string>(resolve => {
-        worker.onmessage = event => {
-            resolve(event.data);
-            worker.terminate();
-        };
-        worker.postMessage([data, options]);
-    });
-    return {
-        terminate: () => worker.terminate(),
-        response
-    };
-}
+import { type Cluster, type Data, type Engine, isLayoutSuccess, type Node, type LayoutError, type Options } from "./workers/graphvizOptions.ts";
+// @ts-ignore
+import GraphvizWorker from "./workers/graphviz.ts?worker&inline";
+
+export {
+    type Cluster,
+    type Engine,
+    isLayoutSuccess,
+    type Node,
+    type LayoutError,
+    type Options
+};
+
+export function graphviz(data: Data, options: Options) {
+    const worker = new GraphvizWorker();
+    const response = new Promise<string>(resolve => {
+        worker.onmessage = event => {
+            resolve(event.data);
+            worker.terminate();
+        };
+        worker.postMessage([data, options]);
+    });
+    return {
+        terminate: () => worker.terminate(),
+        response
+    };
+}

package/src/common/layouts/index.ts

@@ -1,7 +1,7 @@
-export * from "./circle.ts";
-export * from "./dagre.ts";
-export * from "./forceDirected.ts";
-export * from "./geoForceDirected.ts";
-export * from "./graphviz.ts";
-export type { ILayout } from "./layout.ts";
-export * from "./null.ts";
+export * from "./circle.ts";
+export * from "./dagre.ts";
+export * from "./forceDirected.ts";
+export * from "./geoForceDirected.ts";
+export * from "./graphviz.ts";
+export type { ILayout } from "./layout.ts";
+export * from "./null.ts";