npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dag-builder-js

v1.0.0

Published

dag-builder-js is a simple-to-use Javascript DAG library with support to N:N vertices/edges. It supports validating that no cycle can be created in real-time, import/export states and it's built on SVG so you can render graphs pretty much anywhere.

Downloads

37

Readme

Directed-Acyclic-Graph-Builder-js (dag-builder-js)

https://www.npmjs.com/package/dag-builder-js https://www.npmjs.com/package/dag-builder-js

What is this?

dag-builder-js is a simple-to-use Javascript DAG library with support to N:N vertices/edges. It supports validating that no cycle can be created in real-time, import/export states and it's built on SVG so you can render graphs pretty much anywhere.

Demo

Demo

Live demo: https://paulomigalmeida.github.io/directed-acyclic-graph-builder-js/demo/public/index.html

Running the demo in your computer can be achieved by running:

# build dag-builder-js
cd <root-dir>
npm install
npm run build

# build & start demo
cd ./demo
npm install
npm run start

Installation

Adding dag-builder-js is pretty simple:

Minified version

<script src='https://cdn.jsdelivr.net/npm/dag-builder-js' type="module" charset="utf-8"></script>

Debug version

<script src='https://cdn.jsdelivr.net/npm/dag-builder-js/dist/dag.debug.js' type="module" charset="utf-8"></script>

Or

npm i dag-builder-js --save

Usage

Define a container in which the DAG will be rendered

<div id="graph"></div>

Initialise DAG builder

import {
    Graph,
    Vertex,
    MouseCoordinate,
    ShapeSize,
    InputVertexConnector,
    CustomInputVertexConnector,
    OutputVertexConnector,
    GraphSerializable,
} from "dag-builder-js"; // (~70kb)

/* Dag-Builder-JS initialisation */
const graph = new Graph('#graph');

/* Optional Event Listeners */
const onVertexAdded = (type, graph, vertex) => {};
graph.addVertexAddedListener(onVertexAdded);

const onVertexRemoved = (type, graph, vertex) => {};
graph.addVertexRemovedListener(onVertexRemoved);

const onEdgeAdded = (type, graph, edge) => {};
graph.addEdgeAddedListener(onEdgeAdded);

const onEdgeRemoved = (type, graph, edge) => {};
graph.addEdgeRemovedListener(onEdgeRemoved);

const onCustomInputEdgeConnectorClicked = (type, graph, vertex, edge, event) => {};
graph.addCustomInputEdgeConnectorClickedListener(onCustomInputEdgeConnectorClicked);

/* Common operations */
graph.appendVertex(new Vertex(
    // location
    new MouseCoordinate(100, 100),
    // size
    new ShapeSize(200, 100),
    // title
    'Vertex Title',
    // inputs
    [
        new InputVertexConnector(0, 'data_in', "type1"),
        new InputVertexConnector(1, 'other_in', 'type2'),

        /* this is an InputVertexConnector that can hold a custom value */
        new CustomInputVertexConnector(2, 'other_in', 'type2', 42),
    ],
    // outputs
    [new OutputVertexConnector(0, 'data_out', 'type3')],
));

/* render changes */
graph.update();

Callbacks

onVertexAdded


function onVertexAdded(type, graph, vertex){
	// When vertex is added to graph
}

Gets triggered when vertex is appended to graph.

Parameter | Type | Description --- | --- | --- type | number | event code (see more at: ACTION_TYPE) graph | Graph | Graph instance vertex | Vertex | Vertex added

onVertexRemoved


function onVertexRemoved(type, graph, vertex){
	// When vertex is removed from graph
}

Gets triggered when vertex is removed from graph.

Parameter | Type | Description --- | --- | --- type | number | event code (see more at: ACTION_TYPE) graph | Graph | Graph instance vertex | Vertex | Vertex removed

onEdgeAdded


function onEdgeAdded(type, graph, edge){
	// When edge is added to graph
}

Gets triggered when edge is appended to graph.

Parameter | Type | Description --- | --- | --- type | number | event code (see more at: ACTION_TYPE) graph | Graph | Graph instance edge | Edge | Edge added

onEdgeRemoved


function onEdgeRemoved(type, graph, edge){
	// When edge is removed from graph
}

Gets triggered when edge is removed from graph.

Parameter | Type | Description --- | --- | --- type | number | event code (see more at: ACTION_TYPE) graph | Graph | Graph instance edge | Edge | Edge removed

onCustomInputEdgeConnectorClicked


function onCustomInputEdgeConnectorClicked(type, graph, vertex, edge, event){
	// When CustomInputEdgeConnector is clicked
}

Gets triggered CustomInputEdgeConnector is clicked

Parameter | Type | Description --- | --- | --- type | number | event code (see more at: ACTION_TYPE) graph | Graph | Graph instance vertex | Vertex | Vertex removed edge | Edge | Edge removed event | object | DOM event

Features

  • [x] Zooming/Pan Gestures
  • [x] Select Vertices/Edges
  • [x] Delete Vertices/Edges
  • [x] Move Vertices
  • [x] Import/Export Graph State
  • [x] Real-time acyclic validation (prevent users from creating cycles)
  • [x] N:N Edges Connections
  • [x] Public-facing callbacks for common operations (add/rem)
  • [x] Npm package

Credits/Inspiration/Pieces of code I got from other projects

Flowy

Repository: alyssaxuu/flowy

I got the demo page HTML/CSS and some ideas for documentation and callback listeners. It's a very interesting project and the fact that Alyssa did it all in vanilla javascript is commendable. Kudos to her.

Directed-Graph-Creator

Repository: cjrd/directed-graph-creator

I got a lot of inspiration from the implemenation that @cjrd has written so he also deserves to be listed here. I got the import/export idea from his implementation and learned that I could use d3 for SVG manipulation (which I didn't know at the time).