diff --git a/README.md b/README.md index b0e0f19f..2743170a 100644 --- a/README.md +++ b/README.md @@ -42,12 +42,16 @@ If _url_ is specified, sets the default location for all WASM files. If _url_ i Global variable for setting default WASM location, this is an alternative to [wasmFolder](#wasmFolder) -### GraphViz (namespace `graphviz`) +### GraphViz (`graphvizlib.wasm`) GraphViz WASM library, see [graphviz.org](https://www.graphviz.org/) for c++ details. -**Note**: While this package is similar to [Viz.js](https://github.com/mdaines/viz.js), it employs a completely different build methodology taken from [GraphControl](https://github.com/hpcc-systems/GraphControl). +**Note 1**: While this package is similar to [Viz.js](https://github.com/mdaines/viz.js), it employs a completely different build methodology taken from [GraphControl](https://github.com/hpcc-systems/GraphControl). -**Note 2**: All API functions are namespaced in `graphviz`. +**Note 2**: The _GraphViz_ library comes in two flavours +* An exported `graphviz` namespace, where each API function is **asynchrounous**. +* A `graphvizSync` **asynchrounous** function which returns an instance of `graphviz`, where each API function is **synchrounous**. + +#### API # layout(dotSource[, outputFormat][, layoutEngine]) ยท [Source](https://github.com/hpcc-systems/hpcc-js-wasm/blob/master/src/graphviz.ts) @@ -101,7 +105,6 @@ Convenience function that performs **patchwork** layout, is equivalent to `layou Convenience function that performs **twopi** layout, is equivalent to `layout(dotSource, outputFormat, "twopi");` - ## Quick Example (CDN hosting courtesy of [unpkg.com](https://unpkg.com)) ```html @@ -118,6 +121,7 @@ Convenience function that performs **twopi** layout, is equivalent to `layout(do
+
diff --git a/index.html b/index.html index d24dd0ef..20577889 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,15 @@ +

One

+
+

Two

+
+
+

Three

+
+

End

diff --git a/src/graphviz.ts b/src/graphviz.ts index 58a55ece..9d58744a 100644 --- a/src/graphviz.ts +++ b/src/graphviz.ts @@ -33,3 +33,45 @@ export const graphviz = { return this.layout(dotSource, outputFormat, "twopi"); } }; + +class GraphvizSync { + + constructor(private _wasm: any) { + } + + layout(dotSource: string, outputFormat: Format = "svg", layoutEngine: Engine = "dot"): string { + return this._wasm.Main.prototype.layout(dotSource, outputFormat, layoutEngine); + } + + circo(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "circo"); + } + + dot(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "dot"); + } + + fdp(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "fdp"); + } + + neato(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "neato"); + } + + osage(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "osage"); + } + + patchwork(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "patchwork"); + } + + twopi(dotSource: string, outputFormat: Format = "svg"): string { + return this.layout(dotSource, outputFormat, "twopi"); + } +} + +export function graphvizSync(): Promise { + return loadWasm(graphvizlib).then(wasm => new GraphvizSync(wasm)); +} diff --git a/test/graphviz.spec.js b/test/graphviz.spec.js index b378e0b7..d3618714 100644 --- a/test/graphviz.spec.js +++ b/test/graphviz.spec.js @@ -34,47 +34,91 @@ digraph G { `; describe("graphviz", function () { - const placeholder = document.getElementById("placeholder"); it("circo", function () { - hpccWasm.graphviz.circo(dot, "svg").then(svg => { - expect(svg).to.exist; + return hpccWasm.graphviz.circo(dot, "svg").then(svg => { + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("dot", function () { return hpccWasm.graphviz.dot(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("fdp", function () { return hpccWasm.graphviz.fdp(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("neato", function () { return hpccWasm.graphviz.neato(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("osage", function () { return hpccWasm.graphviz.osage(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("patchwork", function () { return hpccWasm.graphviz.patchwork(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); it("twopi", function () { return hpccWasm.graphviz.twopi(dot, "svg").then(svg => { - expect(svg).to.exist; + expect(svg).to.be.a("string"); expect(svg).to.not.be.empty; }); }); }); + +describe("graphvizSync", function () { + let graphviz; + it("create", function () { + return hpccWasm.graphvizSync().then(gv => { + graphviz = gv; + expect(graphviz).to.exist; + }); + }) + it("circo", function () { + const svg = graphviz.circo(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("dot", function () { + const svg = graphviz.dot(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("fdp", function () { + const svg = graphviz.fdp(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("neato", function () { + const svg = graphviz.neato(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("osage", function () { + const svg = graphviz.osage(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("patchwork", function () { + const svg = graphviz.patchwork(dot, "svg"); + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); + it("twopi", function () { + const svg = graphviz.twopi(dot, "svg") + expect(svg).to.be.a("string"); + expect(svg).to.not.be.empty; + }); +});