عمليات الاسترجاعات

Pivotick يتيح لك الارتباط بتفاعلات المستخدم وأحداث المحاكاة من خلال الخيار callbacks. يمكنك توفير وظائف لأحداث مختلفة على اللوحة القماشية والعقد والحواف.

عمليات الاسترجاعات القماشية

رد الاتصال	المعلمات	الوصف
`onCanvasClick`	`(event: PointerEvent)`	يتم إطلاقه عند النقر على اللوحة القماشية.
`onCanvasContextmenu`	`(event: PointerEvent)`	أطلقت على قماش انقر بزر الماوس الأيمن.
`onCanvasMousemove`	`(event: MouseEvent)`	يتم إطلاقه عندما يتحرك الماوس فوق اللوحة القماشية.
`onCanvasZoom`	`(event: unknown)`	يتم إطلاقه عندما يتغير مستوى تكبير/تصغير اللوحة القماشية.

عمليات الاسترجاعات العقدة

رد الاتصال	المعلمات	الوصف
`onNodeClick`	`(event: PointerEvent, node: Node, element: TElement)`	يتم تشغيله عند النقر فوق العقدة.
`onNodeDbclick`	`(event: PointerEvent, node: Node, element: TElement)`	يتم تشغيله عند النقر المزدوج على العقدة.
`onNodeContextmenu`	`(event: PointerEvent, node: Node, element: TElement)`	أطلقت على العقدة انقر بزر الماوس الأيمن.
`onNodeHoverIn`	`(event: PointerEvent, node: Node, element: TElement)`	يتم إطلاقه عندما يدخل الماوس إلى العقدة.
`onNodeHoverOut`	`(event: PointerEvent, node: Node, element: TElement)`	يتم تشغيله عندما يترك الماوس العقدة.
`onNodeSelect`	`(node: Node, element: TElement)`	يتم إطلاقه عندما يتم تحديد العقدة.
`onNodeBlur`	`(node: Node, element: TElement)`	يتم إطلاقه عندما تفقد العقدة التركيز/التحديد.
`onNodeDragging`	`(event: MouseEvent, node: Node)`	يتم التشغيل بشكل مستمر أثناء سحب العقدة.
`onNodeExpansion`	`(event: PointerEvent, edge: Edge, element: TElement)`	يتم تشغيله عند توسيع العقدة أو طيها.

عمليات الاسترجاعات الحافة

رد الاتصال	المعلمات	الوصف
`onEdgeClick`	`(event: PointerEvent, edge: Edge, element: TElement)`	يتم إطلاقه عند النقر على إحدى الحواف.
`onEdgeDbclick`	`(event: PointerEvent, edge: Edge, element: TElement)`	يتم إطلاقه عند النقر المزدوج على إحدى الحواف.
`onEdgeContextmenu`	`(event: PointerEvent, edge: Edge, element: TElement)`	أطلقت على حافة انقر بزر الماوس الأيمن.
`onEdgeHoverIn`	`(event: PointerEvent, edge: Edge, element: TElement)`	يتم إطلاقه عندما يدخل الماوس إلى الحافة.
`onEdgeHoverOut`	`(event: PointerEvent, edge: Edge, element: TElement)`	يتم إطلاقه عندما يترك الماوس حافة ما.
`onEdgeSelect`	`(edge: Edge, element: TElement)`	يتم إطلاقه عندما يتم تحديد إحدى الحواف.
`onEdgeBlur`	`(edge: Edge, element: TElement)`	يتم إطلاقه عندما تفقد إحدى الحواف التركيز/التحديد.

خطافات دورة حياة مسار الكتابة

كل طفرة يمكن للمستخدم إجراؤها تمر عبر قبل الخطاف: تقترح المكتبة، يقرر الكود الخاص بك - بشكل غير متزامن، وقد يفشل القرار. غياب هوك السلوك لم يتغير، وبرمجية طفرة (graph.addNode()، graph.removeNode()، graph.removeEdge()) لا تستدعيها أبدًا، لذا فإن التعليمات البرمجية الخاصة بك هي التي تقود لا يتم بوابات النموذج بواسطة الخطاف الخاص بك.

رد الاتصال	أطلقت عندما	العودة
`onBeforeDelete`	يطلب المستخدم حذف العقد / الحواف / الملاحظات، قبل إزالة أي شيء	`false` للنقض، `true` لحذف الطلب، `{ accept, nodes, edges, notes }` لتضييق نطاقه
`onBeforeNodeCreate`	يقوم المستخدم بإنشاء عقدة (إنشاء ▸ إضافة عقدة، قماش ▸ إضافة عقدة هنا)	`false` للنقض، أو `{ accept, id, data, style }`
`onBeforeEdgeCreate`	قامت إيماءة الاتصال بحل الهدف قبل وجود الحافة	`false` للنقض، أو `{ accept, data, style, id, directed }`
`isValidConnection`	مباشر، عند كل تمريرة أثناء الاتصال (يجب أن تكون متزامنة + رخيصة)	`false` يشير إلى أن الهدف غير صالح - لا تتم استشارة الخطاف قبل الإنشاء
`onBeforeNodeEditCommit`	تم تنفيذ تعديل العقدة	`false` يرفض الالتزام، ويترك بيانات العقدة دون تغيير
`onBeforeEdgeEditCommit`	تم الالتزام بتحرير الحافة	`false` يرفض الالتزام ويترك بيانات الحافة دون تغيير

يعلن التزام التحرير المقبول عن نفسه على ناقل البيانات — nodeChange / edgeChange، مع previousData و nextData - ويعيد الطلاء على الفور؛ يتغير واحد مرفوض لا شيء على الإطلاق.

نظرائهم في واجهة المستخدم — onNodeEdit / onEdgeEdit (إرجاع الجسم المشروط) و onNodeEditCancel / onEdgeEditCancel — يتيح لك استبدال المحرر بدلاً من بوابته. واختصر ذلك editors.nodeEditor.fields / editors.edgeEditor.fields أعلن ال قم بتكوين البنيات المشروطة الافتراضية (قائمة منسدلة للعلاقة بدلاً من حقل النص الحر، قل)؛ وبدونها، يتم استنتاج حقل نصي واحد لكل مفتاح بيانات. هيئة مخصصة تمتلك المسودة - قم بتغيير session.draft أثناء كتابة المستخدم، نظرًا لعدم وجود نموذج للقراءة إرسال.

حذف

onBeforeDelete يتلقى النتيجة الكاملة للإيماءة، التي يتم حلها بواسطة المكتبة: العناصر التي ذكرها المستخدم، بالإضافة إلى cascadingEdges — الحواف التي تتم إزالتها ستدمر تلك العقد (graph.removeNode شلالات). الاثنان لا يتداخلان أبدًا، لذلك كل منهما يمكن أن تستمر مرة واحدة بالضبط.

التضييق يكون حسب النوع: المصفوفة المتوفرة تحل محل المجموعة المطلوبة لهذا النوع، وهي محذوفة يتركه المفتاح كما هو مطلوب (لذلك { accept: true } يطابق true، و { accept: true, nodes: [] } لا يحذف أي عقد). الفيتو لا يزيل شيئا، ولا يطلق النار nodeRemove / edgeRemove / noteRemove، ويترك التحديد كما هو.

callbacks: {
    onBeforeDelete: async ({ nodes, edges, cascadingEdges, origin, confirm }) => {
        if (!await confirm({
            title: 'Delete from event?',
            body: `${nodes.length} element(s) and ${edges.length + cascadingEdges.length} link(s).`,
        })) return false

        const saved = await deleteServerSide(nodes, [...edges, ...cascadingEdges])
        // Keep exactly what the server actually deleted.
        return { accept: true, nodes: nodes.filter((n) => saved.has(n.id)) }
    },
}

ctx.confirm(options) يفتح نموذج تأكيد المكتبة، ويحل false على كل إلغاء المسار. ctx.origin يقول أي النفقة طلبت ('bulk-action' أو 'context-menu').

بينما يقرر الخطاف

الخطاف الذي يقوم بالجلب أو الحفظ قبل أن يجيب يترك المستخدم في الانتظار. بعد 200 مللي ثانية بدون إجابة، يظهر الرسم البياني أنه في انتظار: مؤشر التقدم، وصغير الدوار الموجود في نهاية حافة المعاينة (onBeforeEdgeCreate)، عند نقطة الإسقاط (onBeforeNodeCreate)، أو كحبة "انتظار..." في أسفل اللوحة (يتم الحذف، تعديل الالتزامات، onBeforeIngest). الخطاف الذي يجيب عاجلاً لا يظهر شيئًا.

موجه يفتح الخطاف من خلال سياقه (promptLabel، promptData، confirm) يأخذ الإشارة للأسفل أثناء ظهورها على الشاشة، والانتظار بعد إغلاقها يحصل على نفس الشيء العلاج، لذا فإن الخطاف الذي يسأل ثم يحفظ يقرأ على أنه مشغول فقط عندما يكون مشغولاً. الهروب أثناء انتظار إيماءة الاتصال يترك وضع الاتصال ويأخذ الإشارة لأسفل؛ خطاف الذي يقبل بعد ذلك لا يزال يتمتع بميزته، لأنه ربما يكون قد حفظه بالفعل.

UI: {
    busyIndicator: { delay: 300, label: 'Saving…' }, // or false, to draw your own
}

أثناء ظهور الإشارة، يحمل العنصر الجذر للرسم البياني data-pvt-busy.

إزالة القدرة بدلا من ذلك

الفيتو هو إجابة خاطئة عندما تكون العملية مطلقًا مسموح بها — للتكامل الذي يكون فحص قائمة التحكم بالوصول (ACL) الخاص به معروفًا قبل إنشاء الرسم البياني، قم بإسقاط القدرة على تحمل التكاليف. كل العلم editors.<editor>.enabled (تشغيل ما لم يتم صراحة false) يزيل أزراره و إدخالات القائمة:

العلم	يزيل
`editors.deletion.enabled`	الجزء الأكبر من الشريط الجانبي حذف، وإدخالات حذف العقدة/الحافة/الملاحظة
`editors.nodeCreator.enabled`	إنشاء ▸ إضافة عقدة وقائمة القماش إضافة عقدة هنا
`editors.nodeEditor.enabled`	إنشاء ▸ تعديل العقدة
`editors.edgeEditor.enabled`	قائمة الحافة تحرير الحافة

شاهد الاستمرار في الحذف والتعديل والإنشاء بطاقة معرض لجميع الخطافات الثلاثة مقابل واجهة خلفية قائمة.

عمليات الاسترجاعات المحاكاة

رد الاتصال	المعلمات	الوصف
`onSimulationTick`	`()`	أطلقت كل علامة المحاكاة.
`onSimulationSlowTick`	`()`	يتم إطلاقه أحيانًا أثناء المحاكاة (كل عُشر simulationTick).

معلومات

النوع element هو svg فقط إذا كان الخيار render.type == "svg".

مثال

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

عمليات الاسترجاعات ​

عمليات الاسترجاعات القماشية ​

عمليات الاسترجاعات العقدة ​

عمليات الاسترجاعات الحافة ​

خطافات دورة حياة مسار الكتابة ​

حذف ​

بينما يقرر الخطاف ​

إزالة القدرة بدلا من ذلك ​

عمليات الاسترجاعات المحاكاة ​

مثال ​