Skip to content

playcanvas/pcui-graph

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

PCUI Graph

PCUI Graph

Create node based visual graphs in the browser. Supports undirected / directed graphs as well as visual scripting graphs containing nodes with input / output ports. Your graphs can be saved to a JSON file and loaded back into a new graph view at any time.

Getting Started

To build the graph library, run the following in the root directory.

npm install
npm run build

You can then use the library in your own project by including the dist/index.mjs file. The graph can then be instantiated as follows:

import { Graph } from 'dist/index.mjs';

const schema = {
    nodes: {
        0: {
            name: 'Hello',
            fill: 'red'
        },
        1: {
            name: 'World',
            fill: 'green'
        }
    },
    edges: {
        0: {
            from: [0], // this edge can connect nodes of type 0
            to: [1], // to nodes of type 1,
            stroke: 'blue'
        }
    }
}

const graph = new Graph(schema);
document.body.appendChild(graph.dom);

The library is also available on npm and can be installed in your project with

npm install --save @playcanvas/pcui-graph @playcanvas/pcui @playcanvas/observer

The npm package includes two builds of the library:

@playcanvas/pcui-graph/dist/pcui-graph.js // UMD build (requires that the pcui and observer libraries are present in the global namespace)
@playcanvas/pcui-graph/dist/pcui-graph.mjs // module build (requires a build tool like rollup / webpack)

Storybook

Examples of graphs created using PCUI Graph are available in this library's storybook. Alternatively you can run the storybook locally and use it as a development environment for your own graphs. To do so, run the following commands in this projects root directory:

npm install
npm run storybook

This will automatically open the storybook locally at http://localhost:9009.

Documentation