Create Plugins

A step by step guide to create plugins using BeeGraphy sandbox

Creating a Plugin for BeeGraphy Editor

Prerequisites

Setting up the BeeGraphy Sandbox

Getting Started with Your BeeGraphy Plugin

Prerequisites

Creating Your First Node for BeeGraphy Node Editor

In BeeGraphy Node Editor, nodes are essential building blocks for creating visual workflows. To create your first node, you will need to define a NodePackage that includes your node and its associated properties. Let's go through the process step by step:

1. Define a NodePackage

First, create a NodePackage with the desired name, in this case, 'Example', and include the node types within it. Additionally, you can use the init function to preload any necessary resources like a wasm file.

import { NodeTypePackage, NodeType } from 'beegraphy';
      
export const NodeEditorExamplePackage = (): NodeTypePackage => ({
  async init() {
    // Perform any preloading here if needed
  },
  name: 'Example',
  nodeTypes: [...ExampleGroupNodes], // Include your node types here
});

2. Organize Nodes into Groups

For better organization, you can group your nodes. In the above code, we include an array of ExampleGroupNodes. You can create and customize your node groups as needed.

import { NodeType } from 'beegraphy';
            
export const ExampleGroupNodes: NodeType[] = [ExampleNode]; // Include your nodes here

3. Define Your Example Node

Now, let's explore the structure of an example node. Below is an example node named 'Example Node' with input (inPorts) and output (outPorts) ports:

import { NodeType, Type, PortParams } from 'beegraphy';
      
export const ExampleNode: NodeType = {
        name: 'Example Node',
        description: 'This is an example node, feel free to customize or remove it.',
        groupName: 'Example Group', // Assign it to the desired group
        keywords: ['example', 'ex'], // Keywords for searching
        icon: exampleNodeIcon, // Define the icon for your node
        inPorts: [
          {
            name: 'a',
            label: 'A',
            type: Type.Number, // Port type
            description: 'A In Port Description',
          },
          {
            name: 'b',
            label: 'B',
            type: Type.Number,
            description: 'B In Port Description',
            defaultValue: 2, // Default value for the port
          },
        ],
        outPorts: [
          {
            name: 'c',
            label: 'C',
            type: Type.Number,
            description: 'C Out Port Description',
          },
        ],
        exec({ a, b }: PortParams): PortParams {
          // Your node's execution logic goes here
          // You can access input values a and b, perform operations, and return the result
          const c: PortParams = {
            type: Type.Number,
            value: a.value * b.value, // Your computation logic here
          };
          return { c };
        },
      };

4. Port Types

Nodes in BeeGraphy can have various port types. In the example above, we used Type.Number. You can choose from a range of predefined types such as strings, vectors, curves, colors, and more to suit your specific use case.

That's it! You've created your first node for BeeGraphy Node Editor. You can now include this node package in your BeeGraphy project and start using it within the editor's visual workflows. Remember to customize the node properties and logic to fit your specific needs.

Publishing your first plugin package

To use your plugin, you need to publish it to the BeeGraphy Package Manager (BGPM).
All commands must be executed in a terminal.

1. Install BeeGraphy CLI

This step is done once, and you may only need to update the BeeGraphy CLI in the future. Without the CLI, you cannot publish plugin packages.
To install the BeeGraphy CLI, open a terminal and enter the following command:

npm i -g @beegraphy/bgpm-cli --registry https://npm.beegraphy.com

2. Login

Login using your BeeGraphy login and password by running the following command:

$ bgpm login

? Enter your username: username 
? Enter your password: ****** 
? Enter your email (optional):

3. Go to package location

Navigate to the directory containing your plugin package.
The default location is …/beegraphy-sandbox/packages/<your-node-editor-package>, where <your-node-editor-package> is the unique name of your plugin package.

4. Publish the package

Publish your package by running the following command:

bgpm publish

This may take some time, as your package is being uploaded to the BeeGraphy server.

5. Updating the package

bgpm publish