【Vue.js】Vue上でのノードエディタ実装（導入）【備忘録】

VueでNode Editor（visual flow）を実装するために、どんなパッケージ（Vueプラグイン）やフレームワークがあるのか調査中

パッケージ及び参考サイトまとめ

• rete VS baklavajs: reteとbaklavajsとの比較及び代替案

• BaklavaJS, [BaklavaJS] web上でノードを操作する [Vue.js], made with vue.js
  -> BaklavaJSもVue3をサポートしている（[Rete.jsもissueが建てられ議論されている(Vue 3 support #39)]）

import { createApp } from "vue";
import App from "./App.vue";
import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue3";
import "@baklavajs/plugin-renderer-vue3/dist/styles.css";

createApp(App).use(BaklavaVuePlugin).mount("#app");

• SVG.js, SVGとVueでノードエディタGUIをつくる

  • Node Editor UI - A node-based editor of some sort using CSS, SVG and jQuery.(CSS、SVG、jQueryを使用したある種のノードベースエディタ)

• D3 Node Editor -> 0.7.4以降、d3-node-editorパッケージはreteに名称変更 -> Rete.js, Rete.js Example, Rete.jsのカスタムExample ->デフォのUIデザインは、ポップでVuetifyアイコンなどと相性が良さそうだが、完成形のイメージとは遠い、また少しシンプルすぎる、カスタムのイメージは少し完成形に近い、Vueに合わせて実装したexampleもある, RETE.JS を使用して VUE アプリケーションにビジュアル ワークフローを実装する, Vueで使うために、 VueのRete.jsプラグインが用意されている

Vue Render for Vue 3 (experimental)
Rete.js plugin

import VueRenderPlugin from 'rete-vue-render-plugin';
editor.use(VueRenderPlugin, {
    component: CustomNodeComponent, // optional
    options: {
        // router, plugin, etc.
    }
});

• babylon.js, babylon.jsのNode editor, babylon.jsのNode editor Example　-> exampleは少しアニメーションがカクツク気がする