Package Exports

@hpcc-js/wasm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hpcc-js/wasm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@hpcc-js/wasm

This repository contains a collection of useful c++ libraries compiled to WASM for (re)use in Web Browsers and JavaScript Libraries.

Installation

The simplest way to include this project is via NPM:

npm install --save @hpcc-js/wasm

@hpcc-js/wasm includes the following files in its dist folder:

index.js / index.min.js files: Exposes all the available APIs for all WASM files.
WASM Files:
- graphvizlib.wasm
- ...more to follow...

Important: WASM files are dynamically loaded at runtime (this is a browser / emscripten requirement), which has a few implications for the consumer:

Pros:

While this package has potentially many large WASM files, only the ones being used will ever be downloaded from your CDN / Web Server.

Cons:

Most browsers don't support fetch and loading pages via file:// URN, so for testing / development work you will need to run a test web server.
Bundlers (RollupJS / WebPack) will ignore the WASM files, so you will need to manually ensure they are present in your final distribution (typically they are placed in the same folder as the bundled JS)

Common

Utility functions relating to @hpcc-js/wasm as a package

# wasmFolder([url]) · Source

If url is specified, sets the default location for all WASM files. If url is not specified it returns the current url (defaults to undefined).

# __hpcc_wasmFolder · Source

Global variable for setting default WASM location, this is an alternative to wasmFolder

GraphViz (namespace `graphviz`)

GraphViz WASM library, see graphviz.org for c++ details.

Note: While this package is similar to Viz.js, it employs a completely different build methodology taken from GraphControl.

Note 2: All API functions are namespaced in graphviz.

# layout(dotSource[, outputFormat][, layoutEngine]) · Source

Performs layout for the supplied dotSource, see The DOT Language for specification.

outputFormat supports the following options:

dot
dot_json
json
svg (default)
xdot_json

See Output Formats for more information.

layoutEngine supports the following options:

circo
dot (default)
fdp
neato
osage
patchwork
twopi

See Layout manual pages for more information.

# circo(dotSource[, outputFormat]) · Source

Convenience function that performs circo layout, is equivalent to layout(dotSource, outputFormat, "circo");

# dot(dotSource[, outputFormat]) · Source

Convenience function that performs dot layout, is equivalent to layout(dotSource, outputFormat, "dot");

# fdp(dotSource[, outputFormat]) · Source

Convenience function that performs circo layout, is equivalent to layout(dotSource, outputFormat, "fdp");

# neato(dotSource[, outputFormat]) · Source

Convenience function that performs neato layout, is equivalent to layout(dotSource, outputFormat, "neato");

# osage(dotSource[, outputFormat]) · Source

Convenience function that performs osage layout, is equivalent to layout(dotSource, outputFormat, "osage");

# patchwork(dotSource[, outputFormat]) · Source

Convenience function that performs patchwork layout, is equivalent to layout(dotSource, outputFormat, "patchwork");

# twopi(dotSource[, outputFormat]) · Source

Convenience function that performs twopi layout, is equivalent to layout(dotSource, outputFormat, "twopi");

Quick Example (CDN hosting courtesy of unpkg.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GraphViz WASM</title>
    <script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js"></script>
    <script>
        var hpccWasm = window["@hpcc-js/wasm"];
    </script>
</head>

<body>
    <div id="placeholder"></div>
    <script>
        const dot = `
            digraph G {
                node [shape=rect];

                subgraph cluster_0 {
                    style=filled;
                    color=lightgrey;
                    node [style=filled,color=white];
                    a0 -> a1 -> a2 -> a3;
                    label = "process #1";
                }

                subgraph cluster_1 {
                    node [style=filled];
                    b0 -> b1 -> b2 -> b3;
                    label = "process #2";
                    color=blue
                }

                start -> a0;
                start -> b0;
                a1 -> b3;
                b2 -> a3;
                a3 -> a0;
                a3 -> end;
                b3 -> end;

                start [shape=Mdiamond];
                end [shape=Msquare];
            }
        `;

        hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
            const div = document.getElementById("placeholder");
            div.innerHTML = svg;
        });
    </script>

</body>

</html>

@hpcc-js/wasm

Package Exports

Readme

@hpcc-js/wasm

Installation

Contents

API Reference

Common

GraphViz (namespace graphviz)

Quick Example (CDN hosting courtesy of unpkg.com)

GraphViz (namespace `graphviz`)