التحقق من صحة وإثراء الحواف الجديدة

يتيح خطافان وقت الاتصال للمستهلك إنشاء الحافة الخاصة به. isValidConnection يتم تشغيله مباشرة أثناء الإيماءة - يرسم هدف غير صالح معاينة حمراء ولا يمكن أن يكون كذلك تم إسقاطه، ولا يتم استشارة الخطاف قبل الإنشاء مطلقًا. onBeforeEdgeCreate يتم تشغيله بمجرد اختيار هدف صالح، قبل وجود الحافة مباشرة: ارجع false إلى حق النقض، أو { accept: true, data, style, directed } لقبول الحافة الجديدة وختمها مع التسمية والأسلوب والاتجاه. قد يكون غير متزامن — تظل معاينة حافة الظل قائمة حتى يستقر.

انقر على تعديل الرسم البياني (أعلى اليمين) → إضافة حافة، ثم قم بتوصيل العقد. هنا يمكنك قم فقط بربط شخص بمشروع — معاينة الروابط من نفس النوع باللون الأحمر ويتم رفضها يعيش. يحاكي الإسقاط الصالح عملية الحفظ، ثم ينشئ حافة مُعنونة وموجهة - باستثناء على المؤرشفة المشروع، الذي استخدم حق النقض قبل الإنشاء بعد وقوعه.

خيارات

// Both hooks live under the full UI mode's Edit Graph → Add Edge tool.
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: {
        // Live predicate — runs on every hover while connecting. Only cross-type
        // links (person ↔ project) are valid; anything else previews red and can't
        // be dropped. onBeforeEdgeCreate is never consulted for a rejected target.
        isValidConnection: (source, target) =>
            source.getData().type !== target.getData().type,

        // Before-create hook — fires once a valid target is picked, before the edge
        // exists. Async here: we simulate persisting the link, then either veto or
        // accept with an enriched label / style / direction.
        onBeforeEdgeCreate: async ({ source, target, origin }) => {
            // Veto after the fact: no new links onto an archived project.
            if (source.getData().archived || target.getData().archived) {
                graph.notifier.warning('Archived', 'Project Orion is archived — no new links.')
                return false
            }

            graph.notifier.info('Saving…', `${source.getData().label} → ${target.getData().label}`)
            await wait(600) // stand-in for a backend POST that could fail

            const person = source.getData().type === 'person' ? source : target
            const project = person === source ? target : source
            graph.notifier.success('Linked', `${person.getData().label} assigned to ${project.getData().label}`)

            // Accept and stamp the new edge — the consumer decides what it carries.
            return {
                accept: true,
                data: { label: 'assigned-to', via: origin },
                style: { edge: { strokeColor: '#6366f1' } },
                directed: true
            }
        }
    }
}

البيانات

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', type: 'person' } },
        { id: 'bob', data: { label: 'Bob', type: 'person' } },
        { id: 'carol', data: { label: 'Carol', type: 'person' } },
        { id: 'atlas', data: { label: 'Project Atlas', type: 'project' } },
        { id: 'nova', data: { label: 'Project Nova', type: 'project' } },
        { id: 'orion', data: { label: 'Orion (archived)', type: 'project', archived: true } }
    ],
    edges: [
        { from: 'alice', to: 'atlas', data: { label: 'assigned-to' } }
    ]
}