@hpcc-js/graph 3.7.2 → 3.7.4

package/src/__tests__/index.ts

@@ -1 +1 @@
-export { Test2 as Test } from "./test2";
+export { Test2 as Test } from "./test2";

package/src/__tests__/test1.ts

@@ -1,18 +1,18 @@
-import { Graph } from "../Graph";
-import { createData } from "./data";
-
-export class Test extends Graph {
-
-    constructor() {
-        super();
-        this
-            .data(createData())
-            .layout("ForceDirected")
-            .applyScaleOnLayout(true)
-            .centroidColor("darkgreen")
-            .dragSingleNeighbors(true)
-            .highlightSelectedPathToCentroid(true)
-            ;
-    }
-}
-
+import { Graph } from "../Graph";
+import { createData } from "./data";
+
+export class Test extends Graph {
+
+    constructor() {
+        super();
+        this
+            .data(createData())
+            .layout("ForceDirected")
+            .applyScaleOnLayout(true)
+            .centroidColor("darkgreen")
+            .dragSingleNeighbors(true)
+            .highlightSelectedPathToCentroid(true)
+            ;
+    }
+}
+

package/src/__tests__/test2.ts

@@ -1,80 +1,80 @@
-import { DataGraph } from "../graph2/dataGraph";
-import { genData2 } from "./data";
-
-export class Test2 extends DataGraph {
-
-    constructor() {
-        super();
-        const g = genData2();
-        this
-            .layout("ForceDirected")
-            .forceDirectedRepulsionStrength(-3500)
-            .forceDirectedLinkDistance(150)
-            .forceDirectedLinkStrength(1.5)
-            .forceDirectedPinCentroid(true)
-            .hierarchyDigraph(false)
-
-            .centroidColor("#777777")
-
-            .selectionGlowColor("#555555")
-            .highlightOnMouseOverEdge(true)
-            .highlightOnMouseOverVertex(true)
-            .showVertexLabels(true)
-
-            .applyScaleOnLayout(true)
-            .zoomToFitLimit(1)
-
-            .edgeArcDepth(8)
-            .edgeStrokeWidth(2)
-            .edgeColor("#287EC4")
-
-            .allowDragging(true)
-
-            .annotations([{
-                id: "0",
-                imageChar: "fa-plus",
-                fill: "white",
-                stroke: "whitesmoke",
-                imageCharFill: "red"
-            }, {
-                id: "1",
-                imageChar: "fa-star",
-                fill: "navy",
-                imageCharFill: "white"
-            }])
-
-            .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar", "imageUrl"])
-            .vertexCentroidColumn("centroid")
-            .vertexImageUrlColumn("imageUrl")
-            .vertexFACharColumn("fachar")
-            .vertexIDColumn("id")
-            .vertexLabelColumn("label")
-            .vertexAnnotationColumns([
-                { columnID: "ann1", annotationID: "0" } as any,
-                { columnID: "ann2", annotationID: "1" } as any
-            ])
-            .vertexExpansionFACharColumn("expandedFAChar")
-            .vertices(g.vertices)
-
-            .edgeColumns(["source", "target", "label", "weightXXX"])
-            // .edgeIDColumn("id")
-            .edgeSourceColumn("source")
-            .edgeTargetColumn("target")
-            .edgeLabelColumn("label")
-            // .edgeWeightColumn("weight")
-            .edges(g.edges)
-
-            //  Events  ---
-            .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
-            .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
-            .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
-            .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
-            .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
-            ;
-
-        setTimeout(() => {
-            // this.downloadPNG();
-        }, 3000);
-    }
-}
-
+import { DataGraph } from "../graph2/dataGraph";
+import { genData2 } from "./data";
+
+export class Test2 extends DataGraph {
+
+    constructor() {
+        super();
+        const g = genData2();
+        this
+            .layout("ForceDirected")
+            .forceDirectedRepulsionStrength(-3500)
+            .forceDirectedLinkDistance(150)
+            .forceDirectedLinkStrength(1.5)
+            .forceDirectedPinCentroid(true)
+            .hierarchyDigraph(false)
+
+            .centroidColor("#777777")
+
+            .selectionGlowColor("#555555")
+            .highlightOnMouseOverEdge(true)
+            .highlightOnMouseOverVertex(true)
+            .showVertexLabels(true)
+
+            .applyScaleOnLayout(true)
+            .zoomToFitLimit(1)
+
+            .edgeArcDepth(8)
+            .edgeStrokeWidth(2)
+            .edgeColor("#287EC4")
+
+            .allowDragging(true)
+
+            .annotations([{
+                id: "0",
+                imageChar: "fa-plus",
+                fill: "white",
+                stroke: "whitesmoke",
+                imageCharFill: "red"
+            }, {
+                id: "1",
+                imageChar: "fa-star",
+                fill: "navy",
+                imageCharFill: "white"
+            }])
+
+            .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar", "imageUrl"])
+            .vertexCentroidColumn("centroid")
+            .vertexImageUrlColumn("imageUrl")
+            .vertexFACharColumn("fachar")
+            .vertexIDColumn("id")
+            .vertexLabelColumn("label")
+            .vertexAnnotationColumns([
+                { columnID: "ann1", annotationID: "0" } as any,
+                { columnID: "ann2", annotationID: "1" } as any
+            ])
+            .vertexExpansionFACharColumn("expandedFAChar")
+            .vertices(g.vertices)
+
+            .edgeColumns(["source", "target", "label", "weightXXX"])
+            // .edgeIDColumn("id")
+            .edgeSourceColumn("source")
+            .edgeTargetColumn("target")
+            .edgeLabelColumn("label")
+            // .edgeWeightColumn("weight")
+            .edges(g.edges)
+
+            //  Events  ---
+            .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
+            .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
+            .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
+            .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
+            .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
+            ;
+
+        setTimeout(() => {
+            // this.downloadPNG();
+        }, 3000);
+    }
+}
+

package/src/__tests__/test3.ts

@@ -1,46 +1,46 @@
-import { SankeyGraph } from "../graph2/sankeyGraph";
-
-export class Test3 extends SankeyGraph {
-
-    constructor() {
-        super();
-        this
-            .vertexColumns(["category", "id", "label"])
-            .vertices([
-                [0, 0, "A"],
-                [0, 1, "B"],
-                [0, 2, "C"],
-                [0, 3, "D"],
-                [0, 4, "F"],
-                [1, 5, "Math"],
-                [2, 6, "English"],
-                [3, 7, "Geometry"],
-                [4, 8, "Science"],
-            ])
-            .edgeColumns(["source", "target", "weight"])
-            .edges([
-                [0, 5, 48],
-                [0, 6, 28],
-                [0, 7, 26],
-                [0, 8, 38],
-                [1, 5, 63],
-                [1, 6, 39],
-                [1, 7, 36],
-                [1, 8, 58],
-                [2, 5, 42],
-                [2, 6, 36],
-                [2, 7, 27],
-                [2, 8, 68],
-                [3, 5, 90],
-                [3, 6, 59],
-                [3, 7, 15],
-                [3, 8, 35],
-                [4, 5, 10],
-                [4, 6, 3],
-                [4, 7, 6],
-                [4, 8, 4],
-            ])
-            ;
-    }
-}
-
+import { SankeyGraph } from "../graph2/sankeyGraph";
+
+export class Test3 extends SankeyGraph {
+
+    constructor() {
+        super();
+        this
+            .vertexColumns(["category", "id", "label"])
+            .vertices([
+                [0, 0, "A"],
+                [0, 1, "B"],
+                [0, 2, "C"],
+                [0, 3, "D"],
+                [0, 4, "F"],
+                [1, 5, "Math"],
+                [2, 6, "English"],
+                [3, 7, "Geometry"],
+                [4, 8, "Science"],
+            ])
+            .edgeColumns(["source", "target", "weight"])
+            .edges([
+                [0, 5, 48],
+                [0, 6, 28],
+                [0, 7, 26],
+                [0, 8, 38],
+                [1, 5, 63],
+                [1, 6, 39],
+                [1, 7, 36],
+                [1, 8, 58],
+                [2, 5, 42],
+                [2, 6, 36],
+                [2, 7, 27],
+                [2, 8, 68],
+                [3, 5, 90],
+                [3, 6, 59],
+                [3, 7, 15],
+                [3, 8, 35],
+                [4, 5, 10],
+                [4, 6, 3],
+                [4, 7, 6],
+                [4, 8, 4],
+            ])
+            ;
+    }
+}
+

package/src/__tests__/test4.ts

@@ -1,66 +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])
-    };
-}
+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

@@ -1,86 +1,86 @@
-import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
-import { GraphReact } from "../react/graphReact.ts";
-
-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);
-            })
-            ;
-    }
+import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
+import { GraphReact } from "../react/graphReact.ts";
+
+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/common/graphT.css

@@ -1,39 +1,39 @@
-.graph_GraphT .graphVertex {
-    cursor: pointer;
-}
-
-.graph_GraphT .allowDragging .graphVertex {
-    cursor: pointer;
-}
-
-.graph_GraphT .allowDragging .graphVertex.grabbed {
-    cursor: grabbing;
-}
-
-.graph_GraphT .graphEdge {
-    stroke: darkgray;
-    fill: none;
-}
-
-.graph_GraphT .graphEdge>text {
-    stroke: none;
-    fill: black;
-}
-
-.graph_GraphT .graphEdge.hide-text>text {
-    display: none;
-}
-
-.graph_GraphT g.selected rect {
-    stroke: navy !important;
-}
-
-.graph_GraphT g.selected circle {
-    stroke: navy !important;
-}
-
-.graph_GraphT .graphVertex:focus,
-.graph_GraphT .graphVertex:focus-visible {
-    outline: 2px solid #0078d4;
-    outline-offset: 2px;
+.graph_GraphT .graphVertex {
+    cursor: pointer;
+}
+
+.graph_GraphT .allowDragging .graphVertex {
+    cursor: pointer;
+}
+
+.graph_GraphT .allowDragging .graphVertex.grabbed {
+    cursor: grabbing;
+}
+
+.graph_GraphT .graphEdge {
+    stroke: darkgray;
+    fill: none;
+}
+
+.graph_GraphT .graphEdge>text {
+    stroke: none;
+    fill: black;
+}
+
+.graph_GraphT .graphEdge.hide-text>text {
+    display: none;
+}
+
+.graph_GraphT g.selected rect {
+    stroke: navy !important;
+}
+
+.graph_GraphT g.selected circle {
+    stroke: navy !important;
+}
+
+.graph_GraphT .graphVertex:focus,
+.graph_GraphT .graphVertex:focus-visible {
+    outline: 2px solid #0078d4;
+    outline-offset: 2px;
 }