flowdrop_ui

A Drupal module providing the user interface for FlowDrop - a visual workflow editor built with Svelte.

NOTE:

- This project is released in sync with upstream flowdrop library.
- For detailed changelog please refer to https://github.com/flowdrop-io/flowdrop/blob/1.x/CHANGELOG.md

Overview

FlowDrop UI is a supporting module of the FlowDrop ecosystem that delivers a modern, interactive workflow editor interface. It wraps the @d34dman/flowdrop library as an IIFE (Immediately Invoked Function Expression) bundle for seamless Drupal integration.

Usage

Attaching the Library

In your Drupal render arrays or templates, attach the FlowDrop editor library:

$build['#attached']['library'][] = 'flowdrop_ui/editor';

Mounting the Editor

The library exposes mounting functions on the global window.FlowDrop object:

// Mount the full FlowDrop App
window.FlowDrop.mountFlowDropApp(container, options);

// Mount just the WorkflowEditor component
window.FlowDrop.mountWorkflowEditor(container, options);

Drupal Behavior Example

Drupal.behaviors.flowdropWorkflowEditor = {
  attach: function (context, settings) {
    const container = context.querySelector(".flowdrop-workflow-editor");
    if (container && window.FlowDrop) {
      window.FlowDrop.mountWorkflowEditor(container, {
        endpointConfig: settings.flowdrop.endpointConfig,
        workflow: settings.flowdrop.workflow,
        nodes: settings.flowdrop.nodes
      });
    }
  }
};

Services

FlowDropEndpointConfigService

Generates API endpoint configuration for the FlowDrop frontend:

/** @var \Drupal\flowdrop_ui\Service\FlowDropEndpointConfigService $service */
$service = \Drupal::service('flowdrop_ui.endpoint_config');
$config = $service->generateEndpointConfig('/api/flowdrop');

Configuration Options

The editor accepts various configuration options:

window.FlowDrop.mountWorkflowEditor(container, {
  workflow: myWorkflow,           // Workflow data object
  nodes: availableNodes,          // Available node definitions
  endpointConfig: {
    baseUrl: "/api/flowdrop",
    endpoints: { /* endpoint definitions */ },
    timeout: 30000,
    retry: {
      enabled: true,
      maxAttempts: 3,
      delay: 1000,
      backoff: "exponential"
    }
  }
});