Étiquetez un bord pendant que vous le dessinez

Collectez l'étiquette d'un bord auprès de l'utilisateur au moment où il est dessiné (pas de câblage modal personnalisé) et choisissez l'interface utilisateur adaptée au geste. Le contexte du hook avant-création offre deux assistants : ctx.promptLabel({ mode }) supprime un seul champ de texte libre (en ligne au milieu du bord ou dans un modal) et ctx.promptData({ fields }) ouvre un formulaire modal construit à partir du même système de champs que l'éditeur de nœuds. Tout ce qui est saisi devient le data.label du nouveau bord ; l'annulation (résolution de null) ne crée rien.

Cliquez sur Modifier le graphique (en haut à droite) → Ajouter un bord, puis connectez deux personnes :

• Drag d'un nœud à un autre → un champ en ligne rapide pour saisir n'importe quelle étiquette.
• Cliquez sur un nœud puis sur un autre → un modal avec une ** liste déroulante d'étiquettes de relation prédéfinies ** ; choisissez-en un et Créer un bord.

Pour le cas du code zéro, l'option statique UI: { editors: { edgeEditor: { labelPrompt: 'inline' } } } demande une étiquette en texte libre sur chaque bord sans aucun rappel.

Options

// 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 }
        }
    }
}

Données

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' } }
    ]
}