@rifrocket/fdt-plugin-effects-panel

A ready-made effects panel for Fabric Design Tool.

A panel-slot wrapper plugin: @rifrocket/fdt-plugin-effects registers effect data and the canvas render pipeline, but ships no UI of its own. This package is that missing UI — browse effects by category, apply/remove/reorder/duplicate them on the selected object's stack, and edit each effect's own schema-driven properties (slider/color/angle/select controls).

Features

• EffectsPanel — the full effects panel (gallery + stack + property controls), wired directly to engine.registry.effects and useObjectEffects()
• createEffectsPanelPlugin() — installs EffectsPanel into sidebar-right via registry.registerPanel(); declares dependsOn: ["effects"]; uninstall() removes only its own engine's panel registration
• effectsWithPanelPlugin(effects?) — one call installing both @rifrocket/fdt-plugin-effects and this package's own panel, for consumers who don't need to configure the two separately
• Export EffectGallery, EffectStackList, EffectPropertyControls, and the individual controls directly if you want to compose your own layout

Install

npm install @rifrocket/fdt-plugin-effects-panel

Peer dependencies: fabric, react, react-dom. Depends on @rifrocket/fabricjs-design-tool, @rifrocket/fdt-plugin-effects (only for effectsWithPanelPlugin() — createEffectsPanelPlugin()/EffectsPanel themselves still only read engine.registry.effects, generic to whatever effects got registered, independent of which package registered them), and @rifrocket/fdt-react.

Quick start

import { createEffectsPlugin } from "@rifrocket/fdt-plugin-effects";
import { createEffectsPanelPlugin } from "@rifrocket/fdt-plugin-effects-panel";

engine.use(createEffectsPlugin());
engine.use(createEffectsPanelPlugin()); // renders EffectsPanel into "sidebar-right"

Or one call for both:

import { effectsWithPanelPlugin } from "@rifrocket/fdt-plugin-effects-panel";

engine.useAll(effectsWithPanelPlugin()); // pass a curated EffectDefinition[] to skip the rest of the built-ins

<DesignEditor preset="default" plugins={{ add: [createEffectsPanelPlugin()] }} />

Not bundled into <DesignEditor>'s built-in presets — it depends on @rifrocket/fdt-react, which would create a circular dependency if core's own preset list included it (the same reason @rifrocket/fdt-plugin-alignment/-snapping/-devtools aren't bundled either). @rifrocket/fdt-plugin-effects itself (data + rendering) is bundled in default/minimal — this package only adds the panel on top.

Documentation

• Full plugin reference

License

MIT © Fabric Design Tool Contributors