Creating a Component

Components are similar to plugins, except that they operate on a single object instead of the entire Space. To create a component, you extend BaseComponent and then register it in the onLoad() method of your plugin.

Creating A Component

Let's take the example of the plugin above and add a component to it.

export default class MyPlugin extends BasePlugin {
    /** Plugin info */
    static id = "my-plugin"
    static name = "My Plugin"
    static description = "A sample plugin."
    /** Called when the plugin is loaded */
    onLoad() {
        // Register my component
        this.objects.registerComponent(MyComponent, {
            id: 'my-component',
            name: 'My Sample Component',
            description: 'Shows a popup when someone clicks this object'
        })
    }
}
class MyComponent extends BaseComponent {
    /** Called when an object with this component is loaded */
    onLoad() {
        console.log('Loaded component!')
    }
    /** Called when the user clicks on this object */
    onClick() {
        this.plugin.menus.alert('Object clicked!')
    }
}

The above component is added to the plugin by using the registerComponent method in the onLoad() method of the plugin.

Component Lifecycle

A component will generally go through a couple lifecycle events, which you can use to provide functionality. These are from the BaseComponent class and include:

• onLoad() - First event called when the component is loaded.
• onUnload() - Called when your component is about to be removed
• onObjectUpdated(newFields) - Called when an editable field inside the component has changed.
• onClick(event) - Called when the user clicks on the object that has this component attached.
• onAction(id) - Called when a button has been clicked in the component settings.

Attaching The Component

Next, you need to attach this component to an object. You can do this by right-clicking an object, selecting "Properties", then "Components", and clicking the "Add Component" button. You should see a list of components, and you can find your own one in the list.

Once the component is added, close the Editor panel. Now you can click on the object and you should see your alert.