Costruire un sistema di flusso di lavoro con HTMX e ASP.NET Core - Parte 3: Costruire l'editor visivo (Italiano (Italian))

Costruire un sistema di flusso di lavoro con HTMX e ASP.NET Core - Parte 3: Costruire l'editor visivo

Wednesday, 15 January 2025

//

13 minute read

Comments Raw Edit
Alpine.js ASP.NET HTMX TailwindCSS Workflow

Introduzione

DentroParte 2Abbiamo costruito un potente motore a flusso di lavoro.

Ma i flussi di lavoro definiti in JSON non sono molto user-friendly.

  • In questo post creeremo uno straordinario editor di workflow visivo - think "Dummy's Node-RED" - utilizzando HTMX, Alpine.js, TailwindCSS e DaisyUI.
  • Entro la fine di questo post, avrete:
  • Una tela di flusso di lavoro di trascinamento
  • Collegamenti al nodo visivo con SVG
  • Configurazione nodo in tempo reale

Bella UI a tema commutabile

Integrazione HTMX completa

  1. La visione
  2. Vogliamo che gli utenti:
  3. Trascinare i nodi da una tavolozza su una tela
  4. Collegare i nodi visivamente

Configura le proprietà del nodo in un pannello laterale

Salva ed esegui flussi di lavoro

Il tutto senza scrivere una sola riga di JSON!

Stack tecnologicoPerche' questo Stack?

  • HTMX 2.0
  • : Interazioni basate su server senza scrivere JavaScript
  • Perfetto per operazioni di salvataggio/carico

Riduce la complessità lato clientIl server mantiene la fonte della verità

  • Alpine.js
  • : Reattività leggera per la tela
  • Solo ~15KB minificatox-dataPerfetto per componenti interattivi dell'interfaccia utente

Semplicedirettive

  • Avvoltoio a codaCSS + DaisyUI
  • : Bella interfaccia utente a tema
  • Utility-first CSS

Modalità buio/luce fuori dalla casellaComponenti precostruiti (carte, bottoni, badge)

  • SVG
  • : Rendering della connessione nativa
  • Linee scalabili e croccanti

CSS-styleable

Nessuna libreria esterna necessaria

┌─────────────────────────────────────────────────────┐
│  Top Toolbar (Name, Save, Run, Cancel)             │
├─────────┬───────────────────────────┬───────────────┤
│  Node   │      Canvas               │    Node       │
│ Palette │    (Drag & Drop)          │  Inspector    │
│         │                            │               │
│ [HTTP]  │   ┌─────┐                 │  Name: ___    │
│ [Xform] │   │Node1│─┐               │  Type: ___    │
│ [Delay] │   └─────┘ │               │  Config: ___  │
│ [Cond]  │           ▼               │  Style: ___   │
│         │      ┌─────┐              │               │
│         │      │Node2│              │               │
│         │      └─────┘              │               │
└─────────┴───────────────────────────┴───────────────┘

Panoramica dell'architettura

Il nostro editore ha tre pannelli principali:

[Route("workflow")]
public class WorkflowController : BaseController
{
    private readonly WorkflowService _workflowService;
    private readonly WorkflowExecutionService _executionService;

    [HttpGet]
    public async Task<IActionResult> Index()
    {
        var workflows = await _workflowService.GetAllAsync();
        return View("Index", workflows);
    }

    [HttpGet("create")]
    public IActionResult Create()
    {
        var workflow = new WorkflowDefinition
        {
            Name = "New Workflow",
            Nodes = new List<WorkflowNode>(),
            Connections = new List<NodeConnection>()
        };
        return View("Editor", workflow);
    }

    [HttpGet("edit/{id}")]
    public async Task<IActionResult> Edit(string id)
    {
        var workflow = await _workflowService.GetByIdAsync(id);
        return workflow == null ? NotFound() : View("Editor", workflow);
    }

    [HttpPost("save")]
    public async Task<IActionResult> Save([FromBody] WorkflowDefinition workflow)
    {
        var saved = await _workflowService.CreateOrUpdateAsync(workflow);
        return Json(new { success = true, workflowId = saved.Id });
    }

    [HttpPost("execute/{id}")]
    public async Task<IActionResult> Execute(string id,
        [FromBody] Dictionary<string, object>? inputData = null)
    {
        var execution = await _executionService.ExecuteWorkflowAsync(
            id, inputData, User.Identity?.Name ?? "Anonymous");

        return Json(new
        {
            success = true,
            executionId = execution.Id,
            status = execution.Status.ToString()
        });
    }
}

Il Controllore

In primo luogo, organizziamo i nostri endpoint del controller:

@model Mostlylucid.Workflow.Shared.Models.WorkflowDefinition

<div class="container-fluid"
     x-data="workflowEditor(@Html.Raw(JsonSerializer.Serialize(Model)))"
     x-init="init()">

    <!-- Top Toolbar -->
    <div class="navbar bg-base-200 rounded-box shadow-lg mb-6">
        <div class="flex-1">
            <input type="text"
                   x-model="workflow.name"
                   placeholder="Workflow Name"
                   class="input input-ghost text-2xl font-bold w-96" />
        </div>
        <div class="flex-none gap-2">
            <button @click="saveWorkflow()" class="btn btn-success">
                Save
            </button>
            <button @click="runWorkflow()" class="btn btn-primary">
                Run
            </button>
        </div>
    </div>

    <!-- Three-panel layout -->
    <div class="flex gap-4 h-[calc(100vh-200px)]">
        <!-- Left: Node Palette -->
        <!-- Center: Canvas -->
        <!-- Right: Node Inspector -->
    </div>
</div>

La vista dell'editor

La nostra vista editor utilizza Alpine.js per la gestione dello stato:workflowEditorGestione dello Stato di Alpine.js

function workflowEditor(initialWorkflow) {
    return {
        workflow: initialWorkflow || {
            id: crypto.randomUUID(),
            name: 'New Workflow',
            nodes: [],
            connections: [],
            isEnabled: true
        },
        selectedNode: null,
        draggedNodeType: null,
        connecting: false,

        init() {
            // Initialize node inputs as JSON for editing
            this.workflow.nodes.forEach(node => {
                node.inputsJson = JSON.stringify(node.inputs || {}, null, 2);
            });
        },

        // ... methods below
    };
}

La

La componente alpina gestisce tutto lo stato dell'editor:

<div class="w-64 bg-base-200 rounded-box p-4 overflow-y-auto">
    <h3 class="text-lg font-bold mb-4">📦 Available Nodes</h3>

    <div class="space-y-3">
        <div class="card bg-base-100 shadow cursor-pointer"
             draggable="true"
             @dragstart="dragStart($event, 'HttpRequest', '🌐', '#10B981')">
            <div class="card-body p-4">
                <h4 class="font-semibold">🌐 HTTP Request</h4>
                <p class="text-xs">Make API calls</p>
            </div>
        </div>

        <div class="card bg-base-100 shadow cursor-pointer"
             draggable="true"
             @dragstart="dragStart($event, 'Transform', '🔄', '#3B82F6')">
            <div class="card-body p-4">
                <h4 class="font-semibold">🔄 Transform</h4>
                <p class="text-xs">Process data</p>
            </div>
        </div>

        <!-- More node types... -->
    </div>
</div>

Trascina e rilascia: la tavolozza dei nodi

dragStart(event, nodeType, icon, color) {
    this.draggedNodeType = { type: nodeType, icon, color };
}

La barra laterale sinistra contiene i tipi di nodo trascinabile:

Gestore avvio trascinamento

<div class="flex-1 bg-base-300 rounded-box relative overflow-hidden"
     @drop="dropNode($event)"
     @dragover.prevent
     id="workflow-canvas">

    <div class="absolute inset-0 overflow-auto p-8">
        <!-- Grid background -->
        <div class="absolute inset-0 opacity-20"
             style="background-image: repeating-linear-gradient(...);
                    background-size: 20px 20px;">
        </div>

        <!-- Render nodes -->
        <template x-for="node in workflow.nodes" :key="node.id">
            <div :id="'node-' + node.id"
                 class="absolute card shadow-2xl cursor-move"
                 :style="`left: ${node.position.x}px;
                          top: ${node.position.y}px;
                          width: ${node.style.width}px;
                          background-color: ${node.style.backgroundColor};`"
                 @mousedown="selectNode(node)"
                 draggable="true"
                 @dragstart="dragNode($event, node)">

                <div class="card-body p-4">
                    <div class="flex items-center gap-2">
                        <span x-text="node.style.icon || '📦'"></span>
                        <h3 x-text="node.name"></h3>
                    </div>

                    <!-- Connection points -->
                    <div class="flex justify-between mt-2">
                        <div class="badge badge-primary"
                             @click.stop="startConnection(node, 'input')">
                            ◀
                        </div>
                        <div class="badge badge-success"
                             @click.stop="startConnection(node, 'output')">
                            ▶
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- SVG connections layer -->
        <svg class="absolute inset-0 pointer-events-none"
             style="width: 100%; height: 100%;">
            <template x-for="conn in workflow.connections" :key="conn.id">
                <path :d="getConnectionPath(conn)"
                      stroke="#94A3B8"
                      stroke-width="3"
                      fill="none"
                      marker-end="url(#arrowhead)"/>
            </template>
            <defs>
                <marker id="arrowhead" markerWidth="10" markerHeight="10">
                    <polygon points="0 0, 10 3, 0 6" fill="#94A3B8" />
                </marker>
            </defs>
        </svg>
    </div>
</div>

Le Tela

La tela è dove avviene la magia:

dropNode(event) {
    if (!this.draggedNodeType) return;

    const canvas = document.getElementById('canvas-container');
    const rect = canvas.getBoundingClientRect();

    // Calculate drop position
    const x = event.clientX - rect.left + canvas.scrollLeft - 100;
    const y = event.clientY - rect.top + canvas.scrollTop - 50;

    // Create new node
    const newNode = {
        id: crypto.randomUUID(),
        type: this.draggedNodeType.type,
        name: this.draggedNodeType.type,
        inputs: {},
        outputs: {},
        position: { x, y },
        style: {
            backgroundColor: this.draggedNodeType.color,
            textColor: '#FFFFFF',
            borderColor: this.draggedNodeType.color,
            icon: this.draggedNodeType.icon,
            width: 200
        },
        inputsJson: '{}'
    };

    this.workflow.nodes.push(newNode);

    // Set as start node if first node
    if (this.workflow.nodes.length === 1) {
        this.workflow.startNodeId = newNode.id;
    }

    this.draggedNodeType = null;
}

Gestore di lancio

Quando un nodo è caduto sulla tela:

getConnectionPath(conn) {
    const source = this.workflow.nodes.find(n => n.id === conn.sourceNodeId);
    const target = this.workflow.nodes.find(n => n.id === conn.targetNodeId);

    if (!source || !target) return '';

    // Calculate connection points
    const x1 = source.position.x + (source.style?.width || 200);
    const y1 = source.position.y + 50;
    const x2 = target.position.x;
    const y2 = target.position.y + 50;

    // Create curved Bezier path
    const midX = (x1 + x2) / 2;
    return `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
}

Rendering della connessione SVG

Le connessioni tra nodi sono disegnate con percorsi SVG:

Questo crea connessioni fluide e curve tra i nodi!

<div class="w-80 bg-base-200 rounded-box p-4 overflow-y-auto"
     x-show="selectedNode">
    <h3 class="text-lg font-bold mb-4">⚙️ Node Settings</h3>

    <template x-if="selectedNode">
        <div class="space-y-4">
            <div class="form-control">
                <label class="label">Node Name</label>
                <input type="text"
                       x-model="selectedNode.name"
                       class="input input-bordered" />
            </div>

            <div class="form-control">
                <label class="label">Background Color</label>
                <input type="color"
                       x-model="selectedNode.style.backgroundColor"
                       class="input w-full h-12" />
            </div>

            <div class="form-control">
                <label class="label">Icon (emoji)</label>
                <input type="text"
                       x-model="selectedNode.style.icon"
                       class="input input-bordered"
                       maxlength="2" />
            </div>

            <div class="form-control">
                <label class="label">Inputs (JSON)</label>
                <textarea x-model="selectedNode.inputsJson"
                          @input="updateNodeInputs()"
                          class="textarea textarea-bordered font-mono"
                          rows="6"></textarea>
            </div>

            <button @click="setStartNode(selectedNode)"
                    class="btn btn-sm"
                    :class="workflow.startNodeId === selectedNode.id ?
                            'btn-success' : 'btn-outline'">
                Set as Start Node
            </button>
        </div>
    </template>
</div>

L'ispettore dei nodi

Il pannello destro consente agli utenti di configurare i nodi selezionati:

updateNodeInputs() {
    if (!this.selectedNode) return;

    try {
        this.selectedNode.inputs = JSON.parse(this.selectedNode.inputsJson);
    } catch (e) {
        console.error('Invalid JSON:', e);
        // Could show error badge
    }
}

Live JSON Parsing

Mentre gli utenti modificano gli input JSON, li analizziamo in tempo reale:

startConnection(node, type) {
    if (this.connecting) {
        // Complete connection
        if (this.connectionStart.node.id !== node.id) {
            this.workflow.connections.push({
                id: crypto.randomUUID(),
                sourceNodeId: this.connectionStart.node.id,
                targetNodeId: node.id,
                sourceOutput: 'default',
                targetInput: 'default'
            });
        }
        this.connecting = false;
        this.connectionStart = null;
    } else {
        // Start connection
        this.connecting = true;
        this.connectionStart = { node, type };
    }
}

Nodi di connessione

Gli utenti connettono i nodi cliccando sui punti di connessione:

async saveWorkflow() {
    try {
        const response = await fetch('/workflow/save', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(this.workflow)
        });

        const result = await response.json();
        if (result.success) {
            alert('Workflow saved!');
            window.location.href = '/workflow';
        } else {
            alert('Error: ' + result.message);
        }
    } catch (error) {
        alert('Error saving: ' + error.message);
    }
}

Salvataggio dei flussi di lavoro con HTMX

Quando l'utente fa clic su "Salva," usiamo una semplice chiamata di recupero (potrebbe essere anche HTMX):

async runWorkflow() {
    try {
        // Save first
        await this.saveWorkflow();

        // Then execute
        const response = await fetch(`/workflow/execute/${this.workflow.id}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({})
        });

        const result = await response.json();
        if (result.success) {
            alert(`Workflow started! Execution ID: ${result.executionId}`);
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
}

Flusso di lavoro in esecuzione

Eseguire i flussi di lavoro direttamente dall'editor:

<!-- In your layout -->
<select data-choose-theme class="select select-bordered">
    <option value="light">Light</option>
    <option value="dark">Dark</option>
    <option value="cupcake">Cupcake</option>
    <option value="synthwave">Synthwave</option>
</select>

Switching tema con DaisyUIbg-base-200, text-base-contentDaisyUI fornisce la commutazione automatica del tema.

Gli utenti possono scegliere tra modalità chiare e scure, e tutti i nostri nodi di flusso di lavoro si adattano automaticamente!

Tutti i nostri colori utilizzano le classi semantiche di DaisyUI (

<div class="flex flex-col lg:flex-row gap-4">
    <!-- On mobile: stack vertically -->
    <!-- On desktop: side-by-side -->
</div>

), quindi si adattano automaticamente al tema scelto!

Design responsive

Il nostro layout a tre pannelli si adatta alle diverse dimensioni dello schermo:

Ottimizzazioni delle prestazioni

Scorrimento virtuale

let dragTimeout;
dragNode(event, node) {
    clearTimeout(dragTimeout);
    dragTimeout = setTimeout(() => {
        // Update position
    }, 16); // ~60fps
}

Per i flussi di lavoro con centinaia di nodi, potremmo implementare lo scorrimento virtuale (solo rendering dei nodi visibili).

Ma per la maggior parte dei casi di utilizzo, rendering 50-100 nodi è perfettamente bene con i browser moderni.

<button @click="deleteNode(node)"
        class="btn"
        aria-label="Delete node"
        @keydown.delete="deleteNode(node)">
    🗑️
</button>

Aggiornamenti debounced

Quando si trascinano i nodi, potremmo debounce gli aggiornamenti di posizione:

✅ AccessibilitàAbbiamo aggiunto etichette ARIA e navigazione tastiera: ✅ Quello che abbiamo costruitoIn questo post, abbiamo creato: ✅ Tavolozza nodi trascinamento-e-drop- Tipi di nodi trascinabili ✅ Tele visive- Sfondo griglia con nodi posizionati ✅ Collegamenti SVG- Percorsi curvi tra nodi ✅ Ispettore dei nodi- Pannello di configurazione in tempo reale ✅ Supporto tematico- Funziona con tutti i temi DaisyUI ✅ Layout responsive- Si adatta alla dimensione dello schermo

Integrazione HTMX

  • Salvataggio/carico guidato dal server
{
  "name": "GitHub Stars Monitor",
  "nodes": [
    {
      "id": "1",
      "type": "HttpRequest",
      "name": "Fetch Repo Data",
      "inputs": {
        "url": "https://api.github.com/repos/{{owner}}/{{repo}}",
        "method": "GET"
      },
      "position": { "x": 100, "y": 100 },
      "style": { "backgroundColor": "#10B981", "icon": "🌐" }
    },
    {
      "id": "2",
      "type": "Condition",
      "name": "Check Stars",
      "inputs": {
        "condition": "{{stargazers_count}} > 100"
      },
      "position": { "x": 100, "y": 250 },
      "style": { "backgroundColor": "#8B5CF6", "icon": "🔀" }
    },
    {
      "id": "3",
      "type": "Log",
      "name": "Log Success",
      "inputs": {
        "message": "Repo has {{stargazers_count}} stars!",
        "level": "info"
      },
      "position": { "x": 100, "y": 400 },
      "style": { "backgroundColor": "#3B82F6", "icon": "📝" }
    }
  ],
  "connections": [
    { "sourceNodeId": "1", "targetNodeId": "2" },
    { "sourceNodeId": "2", "targetNodeId": "3" }
  ],
  "startNodeId": "1"
}

Reattività di Alpine.js

  • UI liscia, reattivaEsempio di flusso di lavoroEcco un flusso di lavoro completo che puoi costruire nell'editor:

  • Cosa c'e' dopo?

  • Dentro

  • Parte 4

  • , integreremo Hangfire per:

  • Esecuzione programmata del flusso di lavoro

Attivazione dei sondaggi API

Gestione dello stato di attivazione

Elaborazione dei lavori di base

Monitoraggio dashboard

  • **Renderemo i nostri flussi di lavoro veramente autonomi!**Conclusione
  • **Abbiamo costruito un editor di workflow visivo pronto alla produzione con un minimo di JavaScript!**Combinando HTMX per la comunicazione dei server, Alpine.js per l'interattività e TailwindCSS/DaisyUI per lo styling, abbiamo creato qualcosa che si sente moderno ed è manutenibile.
  • **Le principali intuizioni:**SVG
  • è perfetto per il rendering della connessioneAlpine.js

fornisce appena abbastanza reattività

Finding related posts...
logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.