描画時にエッジにラベルを付ける

エッジが描画された瞬間にユーザーからエッジのラベルを収集します (カスタムモーダルはありません) 配線 — そしてジェスチャーに合わせて UI を選択します。 before-create フックのコンテキストが提供するもの 2 つのヘルパー: ctx.promptLabel({ mode }) は、単一の自由テキストフィールドをドロップします (インラインでエッジの中点、またはモーダル)、ctx.promptData({ fields }) で開きますノードエディタと同じフィールドシステムから構築されたモーダルフォーム。何を入力しても新しいエッジの data.label になります。キャンセル (null の解決) しても何も作成されません。

Edit Graph (右上) → Add Edge をクリックし、2 人を接続します。

ドラッグ を 1 つのノードから別のノードにドラッグし、ラベルを入力するための簡単なインラインフィールドに移動します。
1 つのノードをクリック をクリックし、次に別のノード → 事前定義済みの ** ドロップダウンを含むモーダル関係ラベル; 1 つ選択し、エッジを作成** します。

ゼロコードの場合、静的オプション UI: { editors: { edgeEditor: { labelPrompt: 'inline' } } } 自由テキストの入力を求めるプロンプトコールバックをまったく使用せずにすべてのエッジにラベルを付けます。

オプションデータ

// The before-create hook picks the UI per gesture. A quick **drag** gets a free-text
// field inline at the edge midpoint (`ctx.promptLabel`); a deliberate **click-click**
// connect gets a modal with a dropdown of predefined labels (`ctx.promptData`). Both
// feed the chosen text into the new edge's `data.label`; a cancel (`null`) creates
// nothing.
const RELATIONSHIP_LABELS = [
    { value: 'mentors', label: 'mentors' },
    { value: 'reports to', label: 'reports to' },
    { value: 'collaborates with', label: 'collaborates with' },
    { value: 'manages', label: 'manages' }
]

const options = {
    // Off: `full` mode brings a minimap and the data dock, and this card is about
    // neither (see the Minimap and Data table cards for those).
    UI: { mode: 'full', minimap: false, table: false },
    callbacks: {
        onBeforeEdgeCreate: async (ctx) => {
            if (ctx.origin === 'drag') {
                // Drag → quick inline free-text field.
                const label = await ctx.promptLabel({ mode: 'inline', placeholder: 'Relationship…' })
                if (label === null) return false
                return { accept: true, data: { label }, directed: true }
            }

            // Click-click → modal with a dropdown of predefined labels.
            const values = await ctx.promptData({
                title: 'Label the connection',
                submitLabel: 'Create edge',
                fields: [
                    {
                        key: 'label',
                        label: 'Relationship',
                        type: 'select',
                        defaultValue: 'mentors',
                        options: RELATIONSHIP_LABELS
                    }
                ]
            })
            if (values === null) return false
            return { accept: true, data: { label: values.label }, directed: true }
        }
    }
}

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice' } },
        { id: 'bob', data: { label: 'Bob' } },
        { id: 'carol', data: { label: 'Carol' } },
        { id: 'dave', data: { label: 'Dave' } },
        { id: 'erin', data: { label: 'Erin' } }
    ],
    edges: [
        { from: 'alice', to: 'bob', data: { label: 'mentors' } }
    ]
}

描画時にエッジにラベルを付ける ​

描画時にエッジにラベルを付ける