قم بتسمية الحافة أثناء رسمها

احصل على ملصق الحافة من المستخدم لحظة رسمها - لا يوجد نموذج مخصص الأسلاك - واختر واجهة المستخدم التي تناسب الإيماءة. عروض سياق الخطاف قبل الإنشاء مساعدان: ctx.promptLabel({ mode }) يسقط حقل نص حر واحد (مضمن في نقطة منتصف الحافة، أو في شكل مشروط)، و**ctx.promptData({ fields })** يفتح نموذج مشروط مبني من نفس النظام الميداني مثل محرر العقدة. مهما تم إدخاله تصبح الحافة الجديدة data.label؛ إلغاء (حل null) لا يخلق شيئًا.

انقر على تعديل الرسم البياني (أعلى اليمين) → إضافة حافة، ثم قم بتوصيل شخصين:

• اسحب من عقدة إلى أخرى → حقل مضمن سريع لكتابة أي تسمية.
• انقر على عقدة تلو الأخرى ← نموذج مع قائمة منسدلة ** محددة مسبقًا تسميات العلاقة**; اختر واحدة وإنشاء حافة.

بالنسبة لحالة الكود الصفري، الخيار الثابت 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' } }
    ]
}