@Plantarium/Nodesystem

@plantarium/nodesystem

Extensible/Serializable visual NodeSystem Library à la Blender.

Demo · Docs

Table of Contents

• About the Project
• Getting Started
  • Installation
• Usage
• License

About The Project

This project came out of another project where i needed a node interface.

Installation

Without a package manager:

<script type="module">
  import { Nodesystem } from 'https://cdn.skypack.dev/@plantarium/nodesystem';
</script>

With a package manager:

npm install @plantarium/nodesystem
yarn add @plantarium/nodesystem
pnpm add @plantarium/nodesystem

Usage

Import it as module:

import { NodeSystem } from '@plantarium/nodesystem';

Then use it like so:

const system = new NodeSystem();

If you want to register your own node types:

system.registerNodeType({
  title: 'Add',
  type: 'add',
  outputs: ['number'],
  parameters: {
    a: {
      type: 'number',
      value: 0,
    },
    b: {
      type: 'number',
      value: 0,
    },
  },
  compute({ a, b }: { a: number, b: number }) {
    return a + b;
  },
});

All Options to register a NodeType:

interface NodeTypeData {
  title: string;

  type: string;

  outputs: string | string[];

  meta?: {
    description?: string;
    tags?: string[];
  };

  parameters: {
    [key: string]: ValueTemplate;
  };

  compute(parameters: { [key: string]: unknown }): unknown;
}

All options for a single parameter

interface ValueTemplate {
  type: string;
  label?: boolean | string;
  value?: boolean | string | number;
  values?: string[];
  points?: Vec2[];
  isAccessible?: boolean;
  external?: boolean;
  internal?: boolean;
  inputType?: string;
  min?: number;
  max?: number;
  step?: number;
  defaultValue?: number | string | boolean;
}

Saving and loading of systems

// save the node system
const save = system.serialize();
// Download/Upload/stringify the save

// Load the node system
system.load(save);