# Plugin

modV implements a plugin system, similar to that of Vue.js.

Example Plugins can be found here (opens new window).

@todo: allow Plugins to be different types? Custom controls could be registered through Plugins

# Lifecycle

Plugin added using modV.use('plugin', Plugin)
- Plugin's store is registered with Vuex
- galleryTabComponent is registered with Vue
- controlPanelComponent is registered with Vue
- Plugin.install() is called
Plugin is disabled from Plugin Gallery
- Plugin.off() is called
- Plugin state updated (mutation: plugins/setEnabled)
Plugin is enabled from Plugin Gallery
- Plugin.on() is called
- Plugin state updated (mutation: plugins/setEnabled)
Plugin data saved from Plugin Gallery
- Plugin.pluginData.save() is called
- Plugin data sent to Media Manager (request: save-plugin)
Plugin data loaded from switching Project
- Plugin.pluginData.load() is called

# name

Type: string
Default: undefined

Sets the Plugin name.

# galleryTabComponent

(optional)

Type: Vue Component
Default: undefined

A Gallery component.

# controlPanelComponent

(optional)

Type: Vue Component
Default: undefined

Component to display in the Plugin Gallery.

# store

(optional)

Type: Vuex Store Module
Default: undefined

A Vuex store for your plugin.

# storeName

(optional)

Type: string
Default: undefined

The Vuex Store Module name. If not set, the Plugin name will be used instead, converted to camelCase.

# on

(optional)

Type: function
Default: undefined

Called when the Plugin is enabled.

# off

(optional)

Type: function
Default: undefined

Called when the Plugin is disabled.

# presetData

(optional)

Type: object
Default: undefined

Object to define load and save methods onto.

# presetData.save

(optional, required if presetData exists on the Plugin)

Type: function
Default: undefined

Method which returns data to save into a Preset when a Preset is saved.

# presetData.load

(optional, required if presetData exists on the Plugin)

Type: function
Default: undefined

Method called when relevant Plugin data is loaded from a Preset.

/**
 * @param{any} data - the previously saved data
 */
load(data) {

},

# pluginData

(optional)

Type: object
Default: undefined

Object to define load and save methods onto.

# pluginData.save

(optional, required if pluginData exists on the Plugin)

Type: function
Default: undefined

Method which returns data to save into a Plugin settings file in a Project when a Plugin's settings are saved.

# pluginData.load

(optional, required if pluginData exists on the Plugin)

Type: function
Default: undefined

Method called when relevant Plugin data is loaded from a Project.

/**
 * @param{any} data - the previously saved data
 */
load(data) {

},

# resize

(optional)

Type: function
Default: undefined

Method called when the largest Output Window is resized.

/**
 * @param{Object} canvas - The modV output canvas
 */
resize(canvas) {

},

# install

(optional)

Type: function
Default: undefined

Method called when the Plugin is called to modV. The install method can be used to subscribe to Vuex store events or interact with the Vue instance. e.g.:

install(Vue, store) {
  store.subscribe((mutation) => {
    if (mutation.type === 'windows/setSize') {
      console.log('mutated windows/setSize', mutation.payload);
    }
  });
},

# process

(optional)

Type: function
Default: undefined

Method called once every frame. The process method can be used to process data which has less or no concern with interacting with modV.

(@todo: is this method really neccessary, can't we just use processFrame with an async function?)

/**
 * @param{DOMHighResTimeStamp} delta - rAF time returned from performance.now()
 */
process({ delta }) {

},

# processValue

(optional)

Type: function
Default: undefined

Method called every time a Control value is updated in modV. Plugins can use this method to modify Control values by returning a value.

/**
 * @param{DOMHighResTimeStamp} delta  - rAF time returned from performance.now()
 * @param{any} currentValue           - the Control's current value
 * @param{string} moduleName          - the name of the Module this Control value
 *                                      update belongs to
 * @param{string} controlVariable     - the name of the variable on the Module's
 *                                      scope which is being written to
 */
processValue({ delta, currentValue, moduleName, controlVariable }) {

},

# processFrame

(optional)

Type: function
Default: undefined

Method called once every frame. Allows access of each frame drawn to the screen.

/**
 * @param{HTMLCanvas} canvas - The modV output canvas
 */
processValue({ canvas }) {

},

# Store Reference

This reference documents the Plugin store module used within modV.

The Plugin store's structure:

{
  plugins: {
    // pluginName1: {
    //   plugin: { ... },
    //   enabled: true/false,
    // },
    // pluginName2: { ... },
  },
}

# Getters

# plugins/allPlugins

Returns: array

All Plugins registered with modV.

# plugins/enabledPlugins

Returns: array

All Plugins currently enabled.

# plugins/pluginsWithGalleryTab

Returns: object

All Plugins with a Gallery Component.

# Actions

# plugins.presetData()

Returns: object

Generates data for Preset saving.

# plugins.save()

Returns: undefined

argument (object)	type	default	info
args.pluginName	`string`	`undefined`	The Plugin name
args.enabled	`boolean`	`undefined`	Whether the Plugin should be enabled or not

# plugins.load()

Returns: undefined

argument (object)	type	default	info
args.pluginName	`string`	`undefined`	The Plugin name
args.data	`any`	`undefined`	The data to pass to the Plugin's `pluginData.load` function
args.enabled	`boolean`	`true`	Whether the Plugin should be enabled or not

# plugins.setEnabled()

Returns: undefined

argument (object)	type	default	info
args.pluginName	`string`	`undefined`	The Plugin name
args.enabled	`boolean`	`undefined`	Whether the Plugin should be enabled or not

# Mutations

WARNING

Using Mutations directly should be avoided for performance reasons. They are documented for reference only.

# plugins.addPlugin()

Returns: undefined

argument (object)	type	default	info
args.plugin	`object`	`undefined`	A Plugin

# plugins.setEnabled()

Returns: undefined

argument (object)	type	default	info
args.pluginName	`string`	`undefined`	The Plugin name
args.enabled	`boolean`	`undefined`	Whether the Plugin should be enabled or not

← Renderer Control →