قائمة السياق

تقوم خيارات قائمة السياق بتكوين قوائم النقر بزر الماوس الأيمن للعقد والحواف واللوحة القماشية.

افتراضيًا:

• تم تمكين قوائم السياق.
• كل قائمة (عقدة، حافة، قماش) لها إجراءات منفصلة.
• تتم إضافة أي إجراءات مخصصة إضافية بعد الإجراءات الافتراضية، فوق الحذف.

تعطيل تلميحات الأدوات

بسيط جدًا عن طريق تعيين الخاصية enabled على false.

const options = {
    UI: {
        contextMenu: {
            enabled: false
        }
    }
}

إجراءات إضافية

يمكنك تخصيص الإجراءات التي تظهر عند النقر بزر الماوس الأيمن فوق عقدة أو حافة أو لوحة الرسم.

تنقسم كل قائمة سياق إلى قسمين:

• topbar للإجراءات السريعة (الأيقونات المدمجة). قبول MenuQuickActionItemOptions.
• menu لإجراءات القائمة الكاملة. يقبل MenuActionItemOptions.

يمكنك تكوين هذه القوائم لهذه النطاقات:

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

الإجراءات الافتراضية

النطاق	الإدخالات الافتراضية
menuNode	تثبيت / إزالة التثبيت / التركيز / إخفاء (الشريط العلوي) · المحور · سحب خارج المجموعة · العودة إلى المجموعة · عرض الصورة · تحديد الجيران · إخفاء الأطفال · الاتصال بـ... · فحص الخصائص · حذف العقدة
menuEdge	تعديل الحافة · حذف الحافة
menuNote	إخفاء الملاحظة (الشريط العلوي) · إزالة الملاحظة
menuSelection	تثبيت / إزالة التثبيت / إخفاء المحدد (الشريط العلوي) · المحور · تجميع العقد المحددة · سحب خارج المجموعة · إعادة المجموعة · فك التجميع · تحديد الجيران · حذف المحدد
menuCanvas	تثبيت الكل / إلغاء تثبيت الكل (الشريط العلوي) · إضافة عقدة هنا · إضافة ملاحظة · تحرير العقد المثبتة (أثناء تثبيت أي عقدة)

تتم قراءة قوائم العقدة والاختيار والمجموعة بنفس الترتيب: Pivot ▸ أولاً، ثم المجموعة الإدخالات التي تنطبق، ثم الإدخالات الأخرى مع لك بعدهم، والحذف الأخير. قائمة المجموعة (محورية · فتح المجموعة · تحديد الأعضاء · عرض الأعضاء في الجدول · إعادة تسمية المجموعة · إلغاء التجميع · تحديد الجيران · حذف الأعضاء) هو المكتبة الخاصة ولا تأخذ أي إدخالات خاصة بك. يتم استبعاد الإدخال الذي لا ينطبق بدونه تحريك الآخرين.

تمر إدخالات مسار الكتابة (الحذف والتحرير والإنشاء) عبر الخطافات المسبقة - انظر خطافات دورة حياة مسار الكتابة — ويختفي كل منها عندما يكون علم editors.<editor>.enabled هو false: احذف بـ deletion، تحرير الحافة باستخدام edgeEditor، إضافة عقدة هنا مع nodeCreator، الاتصال بـ... مع edgeCreator. الأمر نفسه ينطبق على الإدخالات التي تمثل بابًا لميزة قابلة للتحويل: إضافة ملاحظة والكامل menuNoteمتابعة UI.notes, فحص الخصائص يتبع UI.inspector. لا يتم بوابات الإدخالات الخاصة بك أبدًا. كلا الإدخالين "...هنا" يضعان عنصرهما حيث تم فتح قائمة ****، مهما كان التكبير أو عموم.

التمثيل على الاختيار

يؤدي النقر بزر الماوس الأيمن فوق العقدة التي تعد جزءًا من مجموعة مختارة من عدة عقد إلى فتح menuSelection، توجه مع عدد العقد التي تعمل عليها. يعمل كل إدخال على التحديد بأكمله، مثل يتم تنفيذ الإجراءات المجمعة للشريط الجانبي، والإدخالات التي لها معنى لعقدة واحدة فقط (فحص، الاتصال بـ...، عرض الصورة) تم استبعادها. يتم فتح النقر بزر الماوس الأيمن فوق عقدة خارج التحديد القائمة الخاصة بتلك العقدة وتترك التحديد كما هو، وتحتفظ اللوحة القماشية بقائمتها الخاصة. إدخالات menuSelection تتلقى العقد المحددة كـ Node[]، في visible كما في onclick.

يفتح صف من جدول البيانات نفس القائمة مثل العنصر الخاص بها في قماش.

Del يخفي العقد المحددة. إنه يخفي بدلاً من أن يحذف لأن تكلفة الإخفاء لا شيء للتراجع عنه؛ حذف المحدد موجود في القائمة.

إجراءات إضافية

const options = {
    UI: {
        contextMenu: {
            menuNode: {
                topbar: [
                    {
                        text: 'Delete Node',
                        variant: 'danger',
                        onclick: (evt, node) => console.log('Delete', node)
                    }
                ],
                menu: [
                    {
                        text: 'Edit Node',
                        variant: 'success',
                        onclick: (evt, node) => console.log('Edit', node)
                    }
                ]
            },
            menuEdge: {
                menu: [
                    {
                        text: 'Delete Edge',
                        variant: 'danger',
                        onclick: (evt, edge) =>
                            console.log('Delete edge', edge)
                    }
                ]
            },
            menuCanvas: {
                topbar: [
                    {
                        text: 'Add Node',
                        variant: 'primary',
                        onclick: (evt) => console.log('Add Node')
                    }
                ]
            }
        },
        tooltip: {
            enabled: false,
        },
    }
}

الخيارات أو عناصر العمل

يتم تعريف واجهة عناصر العمل هنا.

الخيار	اكتب	الافتراضي	الوصف
iconClass	IconClass	undefined	CSS الطبقة تستخدم كأيقونة. يُستخدم عادةً في مكتبات الأيقونات مثل Fontawesome. مثال: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	يتم استخدام حرف Unicode كرمز. Unicode الخام الذي سيتم استخدامه في مكتبات الأيقونات مثل Fontawesome. مثال: \uf007
imagePath	ImagePath	undefined	المسار إلى الصورة المستخدمة كرمز.
svgIcon	SVGIcon	undefined	كائن SVG مضمّن يُستخدم كرمز. مثال: <svg>...</svg>
text	string	مطلوب	تظهر تسمية الإجراء في القوائم وأشرطة الأدوات.
title	string	undefined	يتم عرض تسمية نصية اختيارية بجوار العنصر.
variant	UIVariant	outline-primary	المتغير المرئي (النمط) لعنصر القائمة.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	التحكم في ما إذا كان العنصر مرئيًا أم لا. يمكن أن تكون ديناميكية.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	مطلوب	يتم تشغيله عندما يقوم المستخدم بتنشيط عنصر القائمة.