@hpcc-js/graph 2.84.1 → 2.84.3

package/src/__tests__/test4.ts

@@ -0,0 +1,66 @@
+import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
+import { Test2 } from "./test2";
+
+export class Test4 extends Test2 {
+    constructor() {
+        super();
+        this
+            .vertexRenderer(Vertex4)
+            .centroidRenderer(CentroidVertex4)
+            ;
+    }
+}
+
+// 8
+let seed = 8;
+function random() {
+    const x = Math.sin(seed++) * 10000;
+    return x - Math.floor(x);
+}
+function rand() {
+    return Math.round(random() * 32767);
+}
+
+function make_pair<T>(a: T, b: T): [T, T] {
+    return [a, b];
+}
+
+// @ts-ignore
+function genData(MAX_VERTICES = 200, MAX_EDGES = 200) {
+    const edges: [number, number][] = [];
+    function edges_has(p: [number, number]): boolean {
+        return edges.some(row => row[0] === p[0] && row[1] === p[1]);
+    }
+
+    const NUM = 1 + rand() % MAX_VERTICES;
+    let NUMEDGE = 1 + rand() % MAX_EDGES;
+
+    while (NUMEDGE > NUM * (NUM - 1) / 2) {
+        NUMEDGE = 1 + rand() % MAX_EDGES;
+    }
+
+    for (let j = 1; j <= NUMEDGE; j++) {
+        let a = 1 + rand() % NUM;
+        let b = 1 + rand() % NUM;
+        let p = make_pair(a, b);
+
+        while (edges_has(p) || a == b) {
+            a = 1 + rand() % NUM;
+            b = 1 + rand() % NUM;
+            p = make_pair(a, b);
+        }
+        edges.push(p);
+    }
+
+    const vertices: { [id: number]: boolean } = {};
+    for (const it of edges) {
+        vertices[it[0]] = true;
+        vertices[it[1]] = true;
+    }
+
+    const icons = ["fa-at", "fa-user-o", "fa-address-card-o", "fa-globe", "fa-phone"];
+    return {
+        vertices: Object.keys(vertices).map(v => [v, `Node-${v}`, icons[Math.floor(Math.random() * icons.length)]]),
+        edges: edges.map(e => [e[0], e[1], "", 1])
+    };
+}

package/src/__tests__/test5.ts

@@ -0,0 +1,86 @@
+import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
+import { Graph2 } from "../graph2/graph";
+
+const VERTEX_ARR = [{
+    id: 0,
+    centroid: true,
+    text: "Vertex One",
+    iconFontFamily: "'Font Awesome 5 Free'",
+}, {
+    id: 1,
+    centroid: false,
+    text: "Vertex Two",
+
+}, {
+    id: 2,
+    centroid: false,
+    text: "Vertex Three",
+}];
+
+const EDGE_ARR = [{
+    id: 0,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[1]
+}, {
+    id: 1,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[2]
+}];
+
+const VERTEX_ARR_UPDATED = [{
+    id: 0,
+    text: "Vertex One",
+    iconFontFamily: "'Font Awesome 5 Free'",
+}, {
+    centroid: true,
+    id: 1,
+    text: "Vertex Two",
+
+}, {
+    id: 2,
+    centroid: false,
+    text: "Vertex Three",
+}];
+
+export const EDGE_ARR_UPDATE = [{
+    id: 0,
+    source: VERTEX_ARR_UPDATED[1],
+    target: VERTEX_ARR_UPDATED[2]
+}];
+
+export class Test5 extends Graph2 {
+
+    constructor() {
+        super();
+        this
+            .minScale(0.1)
+            .layout("ForceDirected")
+            .centroidRenderer(CentroidVertex4)
+            .vertexRenderer(Vertex4)
+            .data({
+                vertices: VERTEX_ARR,
+                edges: EDGE_ARR
+            })
+            .transitionDuration(200)
+            .forceDirectedIterations(800)
+            .forceDirectedLinkDistance(100)
+            .forceDirectedAlphaDecay(0.014)
+            .applyScaleOnLayout(true)
+            .centroidColor("#ffffff")
+            .edgeStrokeWidth(2)
+            .edgeColor("#227AC2")
+            .minScale(0.1)
+            .edgeArcDepth(0)
+            .layout("ForceDirected")
+            .on("vertex_click", (vertex, col, sel, anno) => {
+                console.info("vertex_click", vertex);
+            })
+            .on("vertex_dblclick", (vertex, col, sel, anno) => {
+                console.info("vertex_dblclick", vertex);
+            })
+            .on("vertex_contextmenu", (vertex, col, sel, anno) => {
+                console.info("vertex_contextmenu", vertex);
+            })
+            ;
+    }
+}

package/src/graph2/graphT.ts

@@ -8,7 +8,7 @@ import { interpolatePath as d3InterpolatePath } from "d3-interpolate-path";
 import { Circle, Dagre, ForceDirected, ForceDirectedAnimated, Graphviz, ILayout, Null } from "./layouts/index";
 import { Options as FDOptions } from "./layouts/forceDirectedWorker";
 import type { VertexProps, EdgeProps, IGraphData2, HierarchyBase, SubgraphProps } from "./layouts/placeholders";
-import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./layouts/placeholders";
+import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder, isEdgePlaceholder } from "./layouts/placeholders";
 import { Engine, graphviz as gvWorker } from "./layouts/graphvizWorker";
 import { Tree, RadialTree, Dendrogram, RadialDendrogram } from "./layouts/tree";
 
@@ -67,8 +67,12 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         .idFunc(d => d.id)
         .sourceFunc(e => e.source.id)
         .targetFunc(e => e.target.id)
-        .updateFunc((b: any, a: any) => {
+        .updateFunc((b: VertexPlaceholder<V> | EdgePlaceholder<E, V> | SubgraphPlaceholder<SG>, a: VertexPlaceholder<V> | EdgePlaceholder<E, V> | SubgraphPlaceholder<SG>) => {
             b.props = a.props;
+            if (isEdgePlaceholder(a) && isEdgePlaceholder(b)) {
+                b.source = a.source;
+                b.target = a.target;
+            }
             return b;
         })
         ;
@@ -188,14 +192,19 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
                     d3Select(this).classed("grabbed", false);
                 }
                 if (doClick) {
+                    const event = d3Event();
                     context._selection.click({
                         _id: String(d.id),
                         element: () => d.element
-                    }, d3Event().sourceEvent);
+                    }, event.sourceEvent);
                     context.selectionChanged();
                     const selected = d.element.classed("selected");
                     const eventOrigin = context.resolveEventOrigin();
-                    context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
+                    if (event?.sourceEvent?.button === 2) {
+                        context.vertex_contextmenu(d.props.origData || d.props, "", selected, eventOrigin);
+                    } else {
+                        context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
+                    }
                     const doClickTime = Date.now();
                     if (doClickTime - context._prevDoClickTime < context.doubleClickMaxDelay()) {
                         context.vertex_dblclick(d.props.origData || d.props, "", selected, eventOrigin);
@@ -759,6 +768,9 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
                     .on("dblclick", function (this: SVGElement, d) {
                         d3Event().stopPropagation();
                     })
+                    .on("contextmenu", function (this: SVGElement, d) {
+                        d3Event().preventDefault();
+                    })
                     .on("mousein", function (d) {
                         Utility.safeRaise(this);
                         context.highlightVertex(d3Select(this), d);
@@ -1029,6 +1041,7 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
         this.updateSubgraphs();
         this.updateVertices();
         this.updateEdges();
+        this.moveEdges(false);
 
         this.updateLayout();
 
@@ -1127,6 +1140,9 @@ export class GraphT<SG extends SubgraphProps, V extends VertexProps, E extends E
     vertex_dblclick(row, _col, sel, data) {
     }
 
+    vertex_contextmenu(row, _col, sel, data) {
+    }
+
     vertex_mousein(row, _col, sel, data) {
     }
 
@@ -1309,7 +1325,6 @@ export function graphviz(dot: string, engine: Engine = "dot", _scriptDir: string
         links: [],
         raw: dot
     }, {
-        engine: engine,
-        wasmFolder: new URL(scriptDir, document.baseURI).href
+        engine: engine
     });
 }

package/src/graph2/layouts/graphviz.ts

@@ -59,8 +59,7 @@ export class Graphviz extends Layout {
             })),
             raw: ""
         }, {
-            engine: this._engine,
-            wasmFolder: this._wasmFolder
+            engine: this._engine
         }).response.then((response: any) => {
             if (this.running()) {
                 response.clusters.forEach(n => {