Orqestria Letöltés
← Vissza a katalógushoz

Skill · 1.0.0 verzió

Gráfszerkesztő-könyvtárak integrálása

Tiszta munkafolyamat-adatokhoz kapcsolja a vizuális gráfeszközöket, megtartva a szerkesztést és életciklust.

graph-editor-library-integration

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha egyedi csomópontot vagy automatikus elrendezést adsz meglévő szerkesztőhöz.

Miben segít neked?

  • Elválasztja a mentett adatot a húzási és mérési állapottól.
  • Megőrzi a csomópontmezők használhatóságát véletlen vászonmozgatás nélkül.
  • Visszavonható, megismételhető műveletté teszi az elrendezést.

Például ezt kérheted

Adj automatikus elrendezést a folyamatszerkesztőhöz változatlan mentett JSON-nal és egyetlen visszavonási lépéssel. Mentett gráfon rendezz automatikusan, majd egy műveletként vond vissza a rendezést. A szövegszerkesztést külön ellenőrizd; az azonosítók és kapcsolatok maradjanak meg.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Graph Editor Library Integration

Use this skill when integrating or extending a visual node-graph library (such as @xyflow/react / React Flow, @vue-flow/core, @xyflow/svelte, or Rete.js) and graph auto-layout engines (dagre, elkjs).

Adapt to the Existing Graph Engine & Framework

  1. Keep Domain Workflow State Clean of Library-Internal Runtime Fields:
    • Node-graph libraries attach ephemeral measurement and dragging properties (measured, dragging, selected, internal handle bounds) to node objects.
    • Maintain a clean adapter boundary between your persisted WorkflowDefinition + WorkflowLayout model and the library's view-state nodes/edges so internal library fields are never leaked into saved workflow JSON or version hashes.
  2. Memoize Custom Nodes and Edge Components:
    • In React Flow / Vue Flow, wrap custom node and edge renderers (memo / markRaw) and define nodeTypes and edgeTypes outside the render function so panning or dragging one node never unmounts and remounts every node on the canvas.
    • Inside custom node views, mark interactive form inputs (nodrag, nopan, nowheel classes) so typing, selecting text, or scrolling a dropdown inside a node does not accidentally drag or zoom the canvas.

Auto-Layout Engines (Dagre / ELK.js) & Viewport Polish

  • Deterministic Hierarchical Layout:
    • When auto-arranging a workflow (TB top-to-bottom or LR left-to-right) or inserting a new step via keyboard/button between two connected nodes, compute positions using measured node dimensions via dagre or elkjs inside a single undoable layout transaction.
  • Accessible Focus & Viewport Navigation:
    • Enable keyboard focusability (nodesFocusable, edgesFocusable, autoPanOnNodeFocus), provide a minimap / fit-view control, and allow clicking a step in the run timeline or validation error list to smoothly center (setCenter / fitView) that node on the canvas.

Checklist

  • Are nodeTypes and edgeTypes defined stably and memoized so panning/dragging does not remount custom nodes?
  • Are interactive inputs inside custom nodes marked with nodrag / nowheel so editing node fields never drags the canvas?
  • Are library-internal runtime properties stripped before serializing WorkflowDefinition and computing version hashes?
  • Does auto-layout (dagre / elkjs) arrange nodes cleanly as a single undoable layout update without altering execution semantics?

Csomagban lévő fájlok 1

  • SKILL.md

A skillcsomag bemutatása

graph-editor-library-integration

graph-editor-library-integration: Elágazásokat, jóváhagyásokat, várakozásokat, újrapróbálkozásokat és verziózott változásokat összehangoló munkafolyamat-szerkesztőket és futtatási modelleket épít.

Részletek…Összecsukás

graph-editor-library-integration

graph-editor-library-integration: Elágazásokat, jóváhagyásokat, várakozásokat, újrapróbálkozásokat és verziózott változásokat összehangoló munkafolyamat-szerkesztőket és futtatási modelleket épít.

A teljes skillt és a hozzá tartozó fájlokat tartalmazza (1 fájl). Az alábbi eredeti leírás rögzíti a pontos alkalmazási területét.

A skill eredeti leírása (a forrás nyelvén)

Use when evaluating, integrating, and extending node-graph editor libraries (XYFlow / React Flow, Vue Flow, Svelte Flow, Rete.js) with auto-layout engines (ELK, Dagre) and custom nodes.

Telepítsd a skillt, nézd át a forrását és a megbízhatósági beállításait, majd engedélyezd a megfelelő projektben vagy ügynöknél.

Előfeltételek

  • A számítógépedre telepített Orqestria.