Create Plugins
A step by step guide to create plugins using BeeGraphy sandbox
Creating a Plugin for BeeGraphy Editor
Prerequisites
Before you can create a plugin for BeeGraphy Editor, you need to ensure that you have the latest version of Node.js installed on your system. You can download Node.js from the official website:
Node.jsSetting up the BeeGraphy Sandbox
To create a plugin for BeeGraphy Editor, you'll need to set up the BeeGraphy Sandbox. Follow these steps to configure the sandbox:
- Open your terminal or command prompt.
- Navigate to the folder where you want to have a BeeGraphy Sandbox folder.
- Run the following command to set the BeeGraphy registry as the npm registry for your project:
- This command will start the BeeGraphy Sandbox and configure your npm registry to use the BeeGraphy registry.
- You will be prompted to install the @beegraphy/sandbox package, type “y” and enter.
- The BeeGraphy Sandbox will prompt you to provide a name for your sandbox project. By default, it is named "beegraphy-sandbox" You can choose to use the default name or enter a custom name for your project.
- The installer will automatically download and install any dependencies required for your project.
- Additionally, the installer will create an example plugin named "node-editor-package-example" in your sandbox project.
Once the BeeGraphy Sandbox setup is complete, you can start developing your custom plugin for BeeGraphy Editor within the sandbox environment.
Getting Started with Your BeeGraphy Plugin
Prerequisites
Once you have set up the BeeGraphy Sandbox and explored the project structure, it's time to dive into developing your custom BeeGraphy plugin. Here's how to get started:
- Navigate to Your Sandbox Project Directory: If you provided a custom name for your sandbox project, navigate to the directory where it was created. If you used the default name ("beegraphy-sandbox"), you can find it in the current directory.
- cd your-sandbox-project-directory
- Replace your-sandbox-project-directory with your actual project's directory path.
- Explore the Project Structure: Take some time to understand the project structure, including the "node-editor-package-example" plugin. This will give you insights into how BeeGraphy plugins are organized and how you can structure your own.
- Run Your BeeGraphy Editor Locally: To start developing and testing your plugin, run the following command within your project directory:
- npm start
- This command will launch a local BeeGraphy Node Editor instance on localhost:2023. You can access the BeeGraphy Node Editor in your web browser by navigating to http://localhost:2023.
- Login using your BeeGraphy account
- Configure Your Plugin: In your project directory, you'll find a package.json file for your plugin. Inside this file, you can customize various settings:
- Name and Version: The name and version fields are used for versioning your plugin. The name should be unique.
- BGPM Section: There will be an additional "bgpm" section in your package.json. You can configure this section to define your plugin's properties, such as its type and icons. Here's an example:
- type: Specifies the type of your plugin. For a Node Editor plugin, it should be set to "node-editor-package".
- icons: You can provide icons for your plugin in different sizes and color schemes.
- Customize these settings to match your plugin's requirements.
- Develop Your Plugin:Now that you have the development environment set up and your plugin configured, you can start developing your custom BeeGraphy plugin. Refer to the BeeGraphy documentation for guidance on plugin development.
- Testing Your Plugin:As you make changes to your plugin, you can test them within the locally running BeeGraphy Node Editor. Simply access http://localhost:2023 in your web browser to see how your plugin integrates with BeeGraphy Editor.
Integration and Sharing:Once your plugin is complete and thoroughly tested, you can consider integrating it into your BeeGraphy Editor workflow or sharing it with the BeeGraphy community.
That's it! You're now ready to embark on your BeeGraphy plugin development journey. Enjoy building amazing extensions for BeeGraphy Editor!
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.
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.
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:
This example node includes several important properties:
- name: The name of your node.
- description: A description of your node (optional).
- groupName: The name of the group to which your node belongs.
- keywords: Keywords that can be used to search for your node.
- icon: An icon for your node.
- inPorts: Input ports with names, labels, types, and descriptions.
- outPorts: Output ports with names, labels, types, and descriptions.
- exec: The execution function for your node, where you define the logic based on input ports and return output ports.
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:
2. Login
Login using your BeeGraphy login and password by running the following command:
? 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:
This may take some time, as your package is being uploaded to the BeeGraphy server.
5. Updating the package
Later to update your plugin package, you need to do the following:
- Increase the version value in your plugin package's package.json file to a higher number than the current version.
- Run the following command to publish your updated plugin: