@hpcc-js/wasm-graphviz 1.24.1 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hpcc-js/wasm-graphviz",
-  "version": "1.24.1",
+  "version": "1.26.0",
   "description": "hpcc-js - WASM Graphviz",
   "type": "module",
   "exports": {
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "clean": "rimraf coverage dist dist-test types .nyc_output",
-    "gen-types": "tsgo --project tsconfig.json --emitDeclarationOnly",
+    "gen-types": "tsc --project tsconfig.json --emitDeclarationOnly",
     "gen-types-watch": "npm run gen-types -- --watch",
     "bundle": "node esbuild.js",
     "bundle-dev": "npm run bundle -- --development",
@@ -56,5 +56,5 @@
   },
   "homepage": "https://hpcc-systems.github.io/hpcc-js-wasm/",
   "license": "Apache-2.0",
-  "gitHead": "66515f510e2045ad74b336a52f3ab55974ebed9e"
+  "gitHead": "b173ceec45fa54ec60a1642655d4f785ade8165c"
 }

package/src/graphviz.ts

@@ -5,13 +5,25 @@ import type {
     NodeDotAttr, NodeAttrs,
     EdgeDotAttr, EdgeAttrs,
     ClusterDotAttr, ClusterAttrs,
-    GraphDotAttr, GraphAttrs as GraphAttrs
+    GraphDotAttr, GraphAttrs,
+    Format, Engine
 } from "./types.ts";
 
-/**
- * Various graphic and data formats for end user, web, documents and other applications.  See [Output Formats](https://graphviz.org/docs/outputs/) for more information.
- */
-export type Format = "svg" | "svg_inline" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext" | "canon";
+type AttrValues<T> = Partial<{ [K in keyof T]: NonNullable<T[K]> }>;
+
+function applyAttrs<T extends object>(
+    attrs: AttrValues<T> | undefined,
+    apply: (attr: string, value: string | number | boolean) => void
+): void {
+    if (!attrs) {
+        return;
+    }
+    for (const [attr, value] of Object.entries(attrs)) {
+        if (value !== undefined) {
+            apply(attr, value as string | number | boolean);
+        }
+    }
+}
 
 /**
  * An edge returned by graph-traversal methods.
@@ -42,11 +54,6 @@ function parseEdges(json: string): EdgeInfo[] {
     return result;
 }
 
-/**
- * Various algorithms for projecting abstract graphs into a space for visualization.  See [Layout Engines](https://graphviz.org/docs/layouts/) for more details.
- */
-export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";
-
 /**
  * Example:  Passing a web hosted Image to GraphViz:
  * ```ts
@@ -117,10 +124,39 @@ let g_graphviz: Promise<Graphviz> | undefined;
  */
 export type GraphType = "directed" | "undirected" | "strict directed" | "strict undirected";
 
+export interface GraphInit {
+    name?: string;
+    type?: GraphType;
+    attrs?: AttrValues<GraphAttrs>;
+    htmlAttrs?: AttrValues<GraphAttrs>;
+}
+
+export interface NodeInit {
+    name: string;
+    attrs?: AttrValues<NodeAttrs>;
+    htmlAttrs?: AttrValues<NodeAttrs>;
+}
+
+export interface EdgeInit {
+    tail: string;
+    head: string;
+    key?: string;
+    attrs?: AttrValues<EdgeAttrs>;
+    htmlAttrs?: AttrValues<EdgeAttrs>;
+}
+
+export interface SubgraphInit {
+    name: string;
+    attrs?: AttrValues<ClusterAttrs>;
+    htmlAttrs?: AttrValues<ClusterAttrs>;
+}
+
+export type ClusterInit = SubgraphInit;
+
 /**
  * A subgraph (or cluster) inside a {@link Graph}.
  *
- * Obtain via {@link Graph.addSubgraph}.  All mutation methods return `this`
+ * Obtain via {@link Graph.addSubgraph} or {@link Subgraph.addSubgraph}.  All mutation methods return `this`
  * for chaining.  **Call {@link Subgraph.delete} (or use the `using` keyword)
  * when finished** to free the underlying WASM wrapper — the actual subgraph
  * data is owned by the parent {@link Graph} and is freed with it.
@@ -148,8 +184,15 @@ export class Subgraph {
     /**
      * Create (or find) a node and add it to this subgraph.
      */
-    addNode(name: string): this {
+    addNode(name: string): this;
+    addNode(init: NodeInit): this;
+    addNode(nameOrInit: string | NodeInit): this {
+        const init = typeof nameOrInit === "string" ? { name: nameOrInit } : nameOrInit;
+        const { name, attrs, htmlAttrs } = init;
+
         this._sg.addNode(name);
+        applyAttrs<NodeAttrs>(attrs, (attr, value) => this.setNodeAttr(name, attr, value));
+        applyAttrs<NodeAttrs>(htmlAttrs, (attr, value) => this.setNodeHtmlAttr(name, attr, value));
         return this;
     }
 
@@ -157,8 +200,35 @@ export class Subgraph {
      * Create an edge inside this subgraph.  Both endpoints are created
      * automatically if they do not already exist.
      */
-    addEdge(tail: string, head: string, key: string = ""): this {
-        this._sg.addEdge(tail, head, key);
+    addEdge(tail: string, head: string, key?: string): this;
+    addEdge(init: EdgeInit): this;
+    addEdge(tailOrInit: string | EdgeInit, head?: string, key: string = ""): this {
+        const init = typeof tailOrInit === "string"
+            ? { tail: tailOrInit, head: head!, key }
+            : tailOrInit;
+        const { tail, head: resolvedHead, key: resolvedKey = "", attrs, htmlAttrs } = init;
+
+        this._sg.addEdge(tail, resolvedHead, resolvedKey);
+        applyAttrs<EdgeAttrs>(attrs, (attr, value) => this.setEdgeAttr(tail, resolvedHead, resolvedKey, attr, value));
+        applyAttrs<EdgeAttrs>(htmlAttrs, (attr, value) => this.setEdgeHtmlAttr(tail, resolvedHead, resolvedKey, attr, value));
+        return this;
+    }
+
+    /**
+     * Create (or return an existing) named subgraph under this subgraph.
+     */
+    addSubgraph(name: string): Subgraph;
+    addSubgraph(init: SubgraphInit): Subgraph;
+    addSubgraph(nameOrInit: string | SubgraphInit): Subgraph {
+        const init = typeof nameOrInit === "string" ? { name: nameOrInit } : nameOrInit;
+        // addSubgraph only returns null when the internal subgraph pointer is null,
+        // which cannot happen while this Subgraph instance is alive.
+        return new Subgraph(this._sg.addSubgraph(init.name)!).applyInit(init);
+    }
+
+    applyInit(init: SubgraphInit): this {
+        applyAttrs<ClusterAttrs>(init.attrs, (attr, value) => this.setAttr(attr, value));
+        applyAttrs<ClusterAttrs>(init.htmlAttrs, (attr, value) => this.setHtmlAttr(attr, value));
         return this;
     }
 
@@ -493,12 +563,30 @@ export class Graph {
         this._module = module;
     }
 
+    private ensureDefaultFonts(includeNodeAndEdgeDefaults: boolean): void {
+        if (this.getGraphAttr("fontname") === "") {
+            this.setGraphAttr("fontname", "Arial");
+        }
+        this.setDefaultGraphAttr("fontname", "Arial");
+        if (includeNodeAndEdgeDefaults) {
+            this.setDefaultNodeAttr("fontname", "Arial");
+            this.setDefaultEdgeAttr("fontname", "Arial");
+        }
+    }
+
     /**
      * Create a node.  If a node with this name already exists it is returned
      * unchanged.
      */
-    addNode(name: string): this {
+    addNode(name: string): this;
+    addNode(init: NodeInit): this;
+    addNode(nameOrInit: string | NodeInit): this {
+        const init = typeof nameOrInit === "string" ? { name: nameOrInit } : nameOrInit;
+        const { name, attrs, htmlAttrs } = init;
+
         this._graph.addNode(name);
+        applyAttrs<NodeAttrs>(attrs, (attr, value) => this.setNodeAttr(name, attr, value));
+        applyAttrs<NodeAttrs>(htmlAttrs, (attr, value) => this.setNodeHtmlAttr(name, attr, value));
         return this;
     }
 
@@ -508,8 +596,24 @@ export class Graph {
      * parallel edges between the same pair of nodes; omit (or pass `""`) for
      * an anonymous edge.
      */
-    addEdge(tail: string, head: string, key: string = ""): this {
-        this._graph.addEdge(tail, head, key);
+    addEdge(tail: string, head: string, key?: string): this;
+    addEdge(init: EdgeInit): this;
+    addEdge(tailOrInit: string | EdgeInit, head?: string, key: string = ""): this {
+        const init = typeof tailOrInit === "string"
+            ? { tail: tailOrInit, head: head!, key }
+            : tailOrInit;
+        const { tail, head: resolvedHead, key: resolvedKey = "", attrs, htmlAttrs } = init;
+
+        this._graph.addEdge(tail, resolvedHead, resolvedKey);
+        applyAttrs<EdgeAttrs>(attrs, (attr, value) => this.setEdgeAttr(tail, resolvedHead, resolvedKey, attr, value));
+        applyAttrs<EdgeAttrs>(htmlAttrs, (attr, value) => this.setEdgeHtmlAttr(tail, resolvedHead, resolvedKey, attr, value));
+        return this;
+    }
+
+    applyInit(init: GraphInit): this {
+        this.ensureDefaultFonts(true);
+        applyAttrs<GraphAttrs>(init.attrs, (attr, value) => this.setGraphAttr(attr, value));
+        applyAttrs<GraphAttrs>(init.htmlAttrs, (attr, value) => this.setGraphHtmlAttr(attr, value));
         return this;
     }
 
@@ -521,6 +625,7 @@ export class Graph {
         if (!this._graph.read(dotSource)) {
             throw new Error("Invalid DOT source");
         }
+        this.ensureDefaultFonts(false);
         return this;
     }
 
@@ -790,18 +895,18 @@ export class Graph {
     // ---- Graph traversal ------------------------------------------------
 
     /**
-     * Returns the names of all nodes in the graph (in internal iteration
-     * order).
+     * Returns the names of all direct subgraphs.
      */
-    nodeNames(): string[] {
-        return parseNames(this._graph.nodeNames());
+    subgraphNames(): string[] {
+        return parseNames(this._graph.subgraphNames());
     }
 
     /**
-     * Returns the names of all direct subgraphs.
+     * Returns the names of all nodes in the graph (in internal iteration
+     * order).
      */
-    subgraphNames(): string[] {
-        return parseNames(this._graph.subgraphNames());
+    nodeNames(): string[] {
+        return parseNames(this._graph.nodeNames());
     }
 
     /**
@@ -849,10 +954,13 @@ export class Graph {
      * cluster.setAttr("label", "My Cluster").addEdge("a", "b");
      * ```
      */
-    addSubgraph(name: string): Subgraph {
+    addSubgraph(name: string): Subgraph;
+    addSubgraph(init: SubgraphInit): Subgraph;
+    addSubgraph(nameOrInit: string | SubgraphInit): Subgraph {
+        const init = typeof nameOrInit === "string" ? { name: nameOrInit } : nameOrInit;
         // addSubgraph only returns null when the internal graph pointer is null,
         // which cannot happen while this Graph instance is alive.
-        return new Subgraph(this._graph.addSubgraph(name)!);
+        return new Subgraph(this._graph.addSubgraph(init.name)!).applyInit(init);
     }
 
     /**
@@ -1287,10 +1395,17 @@ export class Graphviz {
      * const svg = graphviz.dot(graph.toDot());
      * ```
      */
-    createGraph(name: string = "G", type: GraphType = "directed"): Graph {
-        const directed = !type.includes("undirected") ? 1 : 0;
-        const strict = type.startsWith("strict") ? 1 : 0;
-        return new Graph(new this._module.CGraph(name, directed, strict), this._module);
+    createGraph(name?: string, type?: GraphType): Graph;
+    createGraph(init: GraphInit): Graph;
+    createGraph(nameOrInit: string | GraphInit = "G", type: GraphType = "directed"): Graph {
+        const init = typeof nameOrInit === "string"
+            ? { name: nameOrInit, type }
+            : nameOrInit;
+        const resolvedName = init.name ?? "G";
+        const resolvedType = init.type ?? "directed";
+        const directed = !resolvedType.includes("undirected") ? 1 : 0;
+        const strict = resolvedType.startsWith("strict") ? 1 : 0;
+        return new Graph(new this._module.CGraph(resolvedName, directed, strict), this._module).applyInit(init);
     }
 
     /**

package/src/index.ts

@@ -1 +1,2 @@
+export * from "./types.ts";
 export * from "./graphviz.ts";

package/src/types.ts

@@ -611,3 +611,13 @@ export const GRAPH_DOT_ATTRS: readonly GraphDotAttr[] = attrsOf<GraphDotAttr>({
     voro_margin: true,
     xdotversion: true,
 });
+
+/**
+ * Various graphic and data formats for end user, web, documents and other applications.  See [Output Formats](https://graphviz.org/docs/outputs/) for more information.
+ */
+export type Format = "svg" | "svg_inline" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext" | "canon";
+
+/**
+ * Various algorithms for projecting abstract graphs into a space for visualization.  See [Layout Engines](https://graphviz.org/docs/layouts/) for more details.
+ */
+export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";

package/types/graphviz.d.ts

@@ -1,9 +1,8 @@
 import type { MainModule, CGraph as CGraphWasm, CSubgraph as CSubgraphWasm } from "../types/graphvizlib.js";
-import type { NodeDotAttr, NodeAttrs, EdgeDotAttr, EdgeAttrs, ClusterDotAttr, ClusterAttrs, GraphDotAttr, GraphAttrs as GraphAttrs } from "./types.ts";
-/**
- * Various graphic and data formats for end user, web, documents and other applications.  See [Output Formats](https://graphviz.org/docs/outputs/) for more information.
- */
-export type Format = "svg" | "svg_inline" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext" | "canon";
+import type { NodeDotAttr, NodeAttrs, EdgeDotAttr, EdgeAttrs, ClusterDotAttr, ClusterAttrs, GraphDotAttr, GraphAttrs, Format, Engine } from "./types.ts";
+type AttrValues<T> = Partial<{
+    [K in keyof T]: NonNullable<T[K]>;
+}>;
 /**
  * An edge returned by graph-traversal methods.
  */
@@ -18,10 +17,6 @@ export interface EdgeInfo {
      */
     key: string;
 }
-/**
- * Various algorithms for projecting abstract graphs into a space for visualization.  See [Layout Engines](https://graphviz.org/docs/layouts/) for more details.
- */
-export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";
 /**
  * Example:  Passing a web hosted Image to GraphViz:
  * ```ts
@@ -64,10 +59,34 @@ export interface Options {
  * - `"strict undirected"` – undirected graph that disallows parallel edges and self-loops
  */
 export type GraphType = "directed" | "undirected" | "strict directed" | "strict undirected";
+export interface GraphInit {
+    name?: string;
+    type?: GraphType;
+    attrs?: AttrValues<GraphAttrs>;
+    htmlAttrs?: AttrValues<GraphAttrs>;
+}
+export interface NodeInit {
+    name: string;
+    attrs?: AttrValues<NodeAttrs>;
+    htmlAttrs?: AttrValues<NodeAttrs>;
+}
+export interface EdgeInit {
+    tail: string;
+    head: string;
+    key?: string;
+    attrs?: AttrValues<EdgeAttrs>;
+    htmlAttrs?: AttrValues<EdgeAttrs>;
+}
+export interface SubgraphInit {
+    name: string;
+    attrs?: AttrValues<ClusterAttrs>;
+    htmlAttrs?: AttrValues<ClusterAttrs>;
+}
+export type ClusterInit = SubgraphInit;
 /**
  * A subgraph (or cluster) inside a {@link Graph}.
  *
- * Obtain via {@link Graph.addSubgraph}.  All mutation methods return `this`
+ * Obtain via {@link Graph.addSubgraph} or {@link Subgraph.addSubgraph}.  All mutation methods return `this`
  * for chaining.  **Call {@link Subgraph.delete} (or use the `using` keyword)
  * when finished** to free the underlying WASM wrapper — the actual subgraph
  * data is owned by the parent {@link Graph} and is freed with it.
@@ -92,11 +111,19 @@ export declare class Subgraph {
      * Create (or find) a node and add it to this subgraph.
      */
     addNode(name: string): this;
+    addNode(init: NodeInit): this;
     /**
      * Create an edge inside this subgraph.  Both endpoints are created
      * automatically if they do not already exist.
      */
     addEdge(tail: string, head: string, key?: string): this;
+    addEdge(init: EdgeInit): this;
+    /**
+     * Create (or return an existing) named subgraph under this subgraph.
+     */
+    addSubgraph(name: string): Subgraph;
+    addSubgraph(init: SubgraphInit): Subgraph;
+    applyInit(init: SubgraphInit): this;
     /**
      * Remove a node from this subgraph only.  The node (and any edges
      * connecting it) remains in the root graph and all other subgraphs.
@@ -273,11 +300,13 @@ export declare class Graph {
     private _module;
     /** @internal */
     constructor(g: CGraphWasm, module: MainModule);
+    private ensureDefaultFonts;
     /**
      * Create a node.  If a node with this name already exists it is returned
      * unchanged.
      */
     addNode(name: string): this;
+    addNode(init: NodeInit): this;
     /**
      * Create an edge from `tail` to `head`.  Both nodes are created
      * automatically if they do not already exist.  `key` distinguishes
@@ -285,6 +314,8 @@ export declare class Graph {
      * an anonymous edge.
      */
     addEdge(tail: string, head: string, key?: string): this;
+    addEdge(init: EdgeInit): this;
+    applyInit(init: GraphInit): this;
     /**
      * Replace this graph with one parsed from DOT source using Graphviz cgraph
      * reading support.
@@ -418,15 +449,15 @@ export declare class Graph {
      * Pass `key = ""` for the first (or only) edge between `tail` and `head`.
      */
     getEdgeAttr(tail: string, head: string, key: string, attr: string): string;
+    /**
+     * Returns the names of all direct subgraphs.
+     */
+    subgraphNames(): string[];
     /**
      * Returns the names of all nodes in the graph (in internal iteration
      * order).
      */
     nodeNames(): string[];
-    /**
-     * Returns the names of all direct subgraphs.
-     */
-    subgraphNames(): string[];
     /**
      * Returns all edges in the graph.  Each unique edge is listed exactly
      * once.
@@ -461,6 +492,7 @@ export declare class Graph {
      * ```
      */
     addSubgraph(name: string): Subgraph;
+    addSubgraph(init: SubgraphInit): Subgraph;
     /**
      * Look up an existing subgraph by name without creating a new one.
      * Returns a {@link Subgraph} wrapper if a subgraph with that name exists,
@@ -722,6 +754,7 @@ export declare class Graphviz {
      * ```
      */
     createGraph(name?: string, type?: GraphType): Graph;
+    createGraph(init: GraphInit): Graph;
     /**
      * Parse DOT source into a mutable {@link Graph}.  The returned graph can
      * be queried, modified, rendered directly, or serialised back to DOT with
@@ -729,3 +762,4 @@ export declare class Graphviz {
      */
     read(dotSource: string): Graph;
 }
+export {};

package/types/graphvizlib.d.ts

@@ -122,6 +122,7 @@ export interface CSubgraph extends ClassHandle {
   addNode(_0: EmbindString): void;
   addEdge(_0: EmbindString, _1: EmbindString): void;
   addEdge(_0: EmbindString, _1: EmbindString, _2: EmbindString): void;
+  addSubgraph(_0: EmbindString): CSubgraph | null;
   setAttr(_0: EmbindString, _1: EmbindString): void;
   setAttr(_0: EmbindString, _1: EmbindString, _2: EmbindString): void;
   setHtmlAttr(_0: EmbindString, _1: EmbindString): void;

package/types/index.d.ts

@@ -1 +1,2 @@
+export * from "./types.ts";
 export * from "./graphviz.ts";

package/types/types.d.ts

@@ -299,4 +299,12 @@ export declare const EDGE_DOT_ATTRS: readonly EdgeDotAttr[];
 export declare const CLUSTER_DOT_ATTRS: readonly ClusterDotAttr[];
 /** Graph DOT attributes (excludes write-only: bb, lheight, lp, lwidth; and non-DOT: type) */
 export declare const GRAPH_DOT_ATTRS: readonly GraphDotAttr[];
+/**
+ * Various graphic and data formats for end user, web, documents and other applications.  See [Output Formats](https://graphviz.org/docs/outputs/) for more information.
+ */
+export type Format = "svg" | "svg_inline" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext" | "canon";
+/**
+ * Various algorithms for projecting abstract graphs into a space for visualization.  See [Layout Engines](https://graphviz.org/docs/layouts/) for more details.
+ */
+export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";
 export {};