Plugins

A plugin adds a feature to a wand, but it does not draw on the canvas. Like an effect, a plugin is a configuration section with its own schema.

Built-in plugins

Plugin	Entry	Description
cursorPlugin()	magic-cursor-wand/cursor	Adds a glow at the pointer, or replaces the native cursor with an arrow.
panelPlugin()	magic-cursor-wand/panel	Shows a settings panel with Tweakpane.

The cursor plugin

In glow mode, the native cursor stays and the plugin adds a glow. In replace mode, the plugin hides the native cursor and shows an arrow. Over links, buttons and form controls, the native cursor shows again.

import { createWand } from 'magic-cursor-wand';
import { cursorPlugin } from 'magic-cursor-wand/cursor';

createWand({
  plugins: [cursorPlugin({ mode: 'replace' })],
});

The plugin hides the cursor for touch input and when the pointer leaves the window. The option render(element) replaces the arrow with your own content.

The settings panel

The panel plugin loads Tweakpane only when the panel opens. The panel has the buttons Reset, Import and Export. It has no Save button, because autosave is always on.

For a procedure, read Open the settings panel.

Your own plugin

A plugin has a name, a schema and a setup function. The setup function gets a context with the wand, the event bus, the surface, a pointer listener and the function reportError. Give each error that the plugin catches to reportError. The wand then emits an effect error with the name of the plugin.

const schema = {};

export function burstCounterPlugin(output: HTMLElement): Plugin<'burstCounter', typeof schema> {
  const stops: Array<() => void> = [];
  let bursts = 0;

  return {
    name: 'burstCounter',
    schema,
    setup({ bus }) {
      stops.push(
        bus.on('burst', () => {
          bursts += 1;
          output.textContent = String(bursts);
          if (bursts % 100 === 0) bus.emit('milestone', { bursts });
        }),
      );
    },
    destroy() {
      for (const stop of stops) stop();
    },
  };
}

const output = document.querySelector<HTMLElement>('#bursts');

if (output) {
  createWand({ plugins: [burstCounterPlugin(output)] });
}

The functions configure and destroy are optional. The wand calls configure with the resolved section values after each change.