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).

Step 1: Navigate to the Workspace - Plugins Page

You currently don't have any plugins.

Here you will see your plugins once you create them.

Step 2: Create a New Plugin

Click the "New Plugin" button: In the upper right corner, to start creating a new plugin.

Step 3: Fill Out the Plugin Creation Form

A form will open with the following fields:

• Title: Enter the name of the plugin.
• Name (PluginID): Specify a unique identifier for the plugin.
• Slug: Enter a unique URL identifier for the plugin (must not be repeated).
• Plugin Type: Choose between Library or Node Editor Package.
• Boolean Button: Specify the status of the plugin (Public or Private).
• Upload Image: Upload images for dark and light interfaces.
• Description: Add a description of the plugin.

Once all fields are filled, click the "Create" button to complete the plugin creation.

Step 4: View Your Plugin

After creating the plugin, it will be visible in the designated section on the Plugins page. You can view and manage your newly created plugin from there.

Step 5: Open the Plugin After Creation

After creating the plugin, it will open on a page displaying information about the default version. Here, you can view details about the current version of the plugin.

View Plugin Information: The page will show version details, status, and other plugin-specific information.

Step 6: Choose the Version Type and Add a New Version

When adding a new version, three types of versions are available:

• Major: Major changes that introduce new features or significant changes.
• Minor: Minor changes that add functionality in a backward-compatible manner.
• Patch: Bug fixes that address issues without affecting functionality.

Choose the necessary version type and click the "Add" button to proceed.

Step 7: Upload the Zip File

For the new version of the plugin, you need to upload a zip file that includes the following required files:

• README.md: Description of the plugin.
• package.json: Configuration file for the plugin package.
• icon.png: Icon of the plugin.
• tsconfig.json: TypeScript configuration file.

This folder was created in the "beegraphy-sandbox". You need to compress it into a zip file and upload it.

Step 8: Upload Process

After uploading the zip file, the following steps will occur:

• Unzip: Unzipping the uploaded zip file.
• Install Dependencies (npm i): Installing dependencies using npm.
• Build: Building the plugin.
• Grab: Capturing the necessary data for the plugin.
• Deploy: Deploying the plugin.

Step 8: Publishing the Plugin

After successfully completing the upload process, the Publish button will be activated.

By clicking the Alpha Publish button, the new version of the plugin becomes available for internal testing but is not yet accessible to other users on the BGPM page of the site.

Step 9: Publishing the Plugin

By clicking the Publish button, the new version of the plugin becomes available to other users on the BGPM page of the site.

Note: The plugin can be unpublished within 24 hours after publication if needed.