خيارات واجهة المستخدم

يوفر Pivotick طبقة واجهة مستخدم مرنة أعلى الرسم البياني الخاص بك، مما يسمح لك بالتحكم في كيفية تفاعل المستخدمين مع العقد والحواف واللوحة القماشية. باستخدام خيارات UI، يمكنك:

• قم بتكوين الوضع الشامل لواجهة المستخدم (كاملة، عارض، ثابت، وما إلى ذلك).
• قم بتخصيص الشريط الجانبي واللوحات لإظهار الخصائص أو المعلومات الإضافية.
• حدد tooltips للعقد والحواف، مع عارضين مخصصين اختياريين.
• قم بتكوين قوائم السياق للعقد والحواف واللوحة القماشية.
• أعلن عن جوانب لوحة filter، أو اجعلها مشتقة من بياناتك.
• قم بإرساء أسطورة على اللوحة القماشية - مفتاح لألوانك الذي يتضاعف كفلتر، ويظهر من تلقاء نفسه عندما يتم شرح ألوانك بواسطة نوع عقدة معلن.
• املأ أيًا من تلك الأسطح بشكل غير متزامن، من البيانات التي تجلبها عند الطلب.
• إيقاف أي ميزة لا فائدة من تكاملك فيها.
• ضع نص المكتبة الخاص بلغة المستخدمين: راجع ترجمة واجهة المستخدم.

وضع واجهة المستخدم

يتحكم الخيار mode في السلوك العام ومستوى التفاعل لواجهة مستخدم الرسم البياني.

• full افتراضي: واجهة مستخدم كاملة مع تمكين جميع اللوحات والقوائم والتفاعلات.
• light: الحد الأدنى من واجهة المستخدم مع تمكين التفاعلات الأساسية.
• viewer: يسمح فقط بالتنقل في الرسم البياني (التحريك والتكبير/التصغير والسحب) دون عرض أي لوحات واجهة مستخدم.
• static: رسم بياني ثابت، لا توجد لوحات واجهة مستخدم أو تفاعلات؛ الرسم البياني للقراءة فقط.

لاستخدام نمط الصورة Pivotick، استخدم ما يلي:

const container = document.getElementById('graph-container')
const options = {
    UI: {  
        mode: 'viewer'
    },
}
const graph = Pivotick(container, options)

يمكن تكوين مكونات واجهة المستخدم الأخرى من خلال مساحة الاسم الخاصة بها

const options = {
    UI: { 
        sidebar: {},
        mainHeader: {},
        propertiesPanel: {},
        extraPanels: [],
        tooltip: {},
        contextMenu: {},
        filter: {},
    }
}

سطح التحكم في الوضع full

في الوضع full يكون الكروم عبارة عن تخطيط يحركه الوضع: يسار وضع السكة (اختيار / إنشاء / عرض / فيزياء)، لوحة أدوات سياقية للنشط وضع المؤشر، إعدادات منبثقة — عرض (خلفية اللوحة القماشية والمفاتيح) و فيزياء (تخطيط + محاكاة) — الشريط العلوي (بحث، تصفية، ملاحظات، تراجع/إعادة)، التحديد الشريط الجانبي (الخصائص، والواجهات، والجيران، وصف الإجراءات المجمعة)، و الجانب الأيمن منفذ العرض (الملاءمة والوسط، التكبير/التصغير، الإعدادات، ملء الشاشة)، و minimap في الزاوية اليمنى السفلية الحرة، والتي تطوي نفسها بعيدًا عندما تكون اللوحة القماشية صغيرة جدًا بحيث لا تكفي لإسقاط الغرفة (UI.minimap: false لإسقاطها). light الوضع يسقط الشريط الجانبي والخريطة المصغرة؛ viewer يحتفظ بسكة منفذ العرض فقط؛ static هو قماش عارية.

الهجرة من زاوية الكروم

تمت إزالة التراكبات العائمة GraphControls وGraphToolbar. تخطيط و انتقلت الفيزياء إلى قائمة الفيزياء المنبثقة (UIManager.physicsFlyout) - وتم شحنها في عرض القائمة المنبثقة (UIManager.viewFlyout) في الإصدار 1.5.0، والذي يحمل الآن خلفية القماش ومفاتيح الشبكة. تحديد/إنشاء أدوات مباشرة في لوحة الأدوات (UIManager.toolPanel) و وضع السكك الحديدية (UIManager.modeRail). ال اختفى خيار UI.selectionMenu - استخدم contextMenu لإجراءات كل عقدة و صف الإجراءات المجمعة على الشريط الجانبي لإجراءات التحديد المتعدد. UIManager.graphNaviation كان تمت إعادة تسميته إلى graphNavigation. خيار UI.modeRail وتعطيله Explore / Enrich تمت إزالة الفتحات — قم بتسجيل الوضع الحقيقي باستخدام addRailMode بدلاً من ذلك. انظر CHANGELOG.

تم تضمين الأوضاع الأربعة للسكك الحديدية، ولكنها ليست الأوضاع الوحيدة التي يمكنها الاحتفاظ بها: يضيف البرنامج الإضافي الخاص بها امتلك addRailMode، وهي طريقة الاستكشاف أو الإثراء يعرف ماذا تعني بياناتك التي يتم إنشاؤها.

إيقاف تشغيل الميزات

يحدد وضع واجهة المستخدم مقدار الكروم الذي يحصل عليه الرسم البياني. كل ميزة داخل هذا الكروم يمكن أيضًا إيقاف تشغيله واحدًا تلو الآخر، وهذه هي الطريقة التي يسقط بها التكامل ما هو عليه الخلفية أو مستخدميها ليس لديهم أي فائدة ل.

ميزة إيقاف التشغيل تأخذ كل شيء يصل إليها: الزر، اللوحة، يتم دمج إدخال قائمة السياق واختصار لوحة المفاتيح معًا، لذلك لا يتبقى أي شيء خلف للنقر أو الضغط والرفض بهدوء.

const options = {
    UI: {
        mode: 'full',
        notes: { enabled: false },        
        history: { enabled: false },
        inspector: { enabled: false },
        editors: { deletion: { enabled: false } },
    },
}

المفاتيح

الخيار	ما يذهب معها
UI.topBar.enabled	الشريط العلوي، الارتفاع الذي حجزه، الاختصارات الخاصة به (Shift+J، Shift+K، Shift+N، Mod+Z) وأي إجراءات المضيف. استخدم المفاتيح أدناه لإسقاط حبة واحدة والاحتفاظ بالباقي.
UI.search.enabled	قرص البحث ومنتقي العقد الخاص به وShift+J.
UI.filter.enabled	قرص Filter Graph ولوحته وShift+K. graph.queryEngine لا يزال يقوم بالتصفية من الكود.
UI.notes.enabled	لوحة ولوحة الملاحظات، Shift+N، أداة إضافة ملاحظة، إضافة ملاحظة في قائمة القماش، N، قائمة سياق الملاحظة، وnoteManager.addNote، التي ترفض.
UI.history.enabled	أزرار التراجع / الإعادة والقائمة المنسدلة للسجل وMod+Z / Mod+Shift+Z. graph.history يستمر في التسجيل.
UI.inspector.enabled	إدخال فحص الخصائص في قائمة العقدة وI.
UI.notifications.enabled	الخبز المحمص. graph.notifier.* يصبح عدم الرجوع undefined.
UI.sidebar.enabled	العمود الجانبي بالكامل، والعرض الذي يستغرقه.
UI.propertiesPanel.enabled	لوحة خصائص الشريط الجانبي والفاصل الخاص بها.
UI.neighborsPanel.enabled	لوحة جيران الشريط الجانبي وفاصلها.
UI.viewFlyout.enabled	زر عرض السكة الحديدية ولوحته.
UI.physicsFlyout.enabled	زر سكة الفيزياء واللوحة الخاصة به.
UI.tooltip.enabled	قم بالتحويم على تلميحات الأدوات، بما في ذلك تلك المثبتة. يستغرق أيضًا { nodes, edges, groups } أو (element, kind) => boolean، راجع تلميحات الأدوات.
UI.contextMenu.enabled	كل قائمة السياق.
UI.navigation.enabled	سكة منفذ العرض: الملاءمة والتكبير/التصغير وملء الشاشة.
UI.legend: false	أسطورة القماش، بما في ذلك تلك التي ستشتقها بنفسها.
UI.minimap: false	الخريطة المصغرة.
UI.emptyState: false	تظهر البطاقة قماش فارغ.
UI.table: false	قاعدة البيانات وShift+T.
UI.pivotMode: false	وضع السكك الحديدية المحورية، كل ما يتم تسجيله.

تحتوي ميزات مسار الكتابة على نفس المفتاح الموجود أسفل UI.editors، لذا فهي للقراءة فقط يؤدي التكامل إلى إزالة القدرة على تحمل التكاليف بدلاً من الاعتراض على كل نقرة: nodeCreator، edgeCreator، nodeEditor، edgeEditor و deletion.

يتم إيقاف سلوك العارض ضمن render: zoomEnabled (والذي يأخذ أيضًا أزرار تكبير السكة، مع الحفاظ على الملاءمة والوسط)، dragEnabled، selectionBox.enabled (شريط التحديد ** و** أداة التحديد ▸ لاسو)، enableNodeExpansion (الشيفرون، Enter والمتقطع انهار الخطوط العريضة)، enableFocusMode، و interactionEnabled لذلك كله مرة واحدة. simulation.enabled يوقف التخطيط من الجري.

يتبع وضع الإنشاء أدواته

يحتوي وضع إنشاء السكك الحديدية على أربع أدوات بالضبط: إضافة عقدة وإضافة حافة وإضافة ملاحظة وتحرير عقدة. قم بإيقاف تشغيل الأربعة جميعها وسيترك الوضع السكة مع الاختصار C الخاص به، بدلاً من الانفتاح على لوحة فارغة. اختر يبقى دائما.

أفعالك الخاصة في الشريط العلوي

ينتمي الإجراء الذي يتم تنفيذه على اللوحة القماشية بأكملها، مثل حفظها، إلى الشريط العلوي بجوار مجموعة التراجع والإعادة. UI.topBar.actions تعلن عن حبوب مرسومة بنفس نمط البحث، عامل التصفية والملاحظات، لذا فإن السمة التي تعيد تصميم هذه التغييرات أيضًا.

const options = {
    UI: {
        topBar: {
            actions: [{ 
                id: 'save-graph',
                text: () => storedId ? 'Update graph' : 'Save as graph',
                async onclick(_event, ctx) {
                    if (storedId) return updateGraph(storedId, ctx.graph)
                    const values = await ctx.promptData({
                        fields: [{ key: 'name', label: 'Name', type: 'text' }],
                    })
                    if (values) storedId = await createGraph(values.name, ctx.graph)
                },
                menu: () => storedId
                    ? [{ text: 'Save as new graph…', onclick: saveAsNew }]
                    : [],
            }],
        },
    },
}

• أين. placement: 'end' (الافتراضي) يضع الحبة قبل التراجع عن الإعادة مباشرةً مجموعة؛ 'start' يضعه بعد الحبوب المدمجة على اليسار. حبوب منع الحمل تحافظ على النظام تم الإعلان عنهم في.
• ماذا تقول. text، title، visible و enabled تأخذ قيمة أو دالة لـ الرسم البياني. تتم قراءة الوظائف مرة أخرى بعد كل تغيير في البيانات graph.UIManager.refreshTopBar()، وبمجرد أن يعود الوعد بـ onclick يستقر. أثناء انتهاء هذا الوعد، يتم تعطيل حبوب منع الحمل، لذلك لا يمكن بدء عملية الحفظ البطيئة مرتين.
• ما يحصل عليه. onclick(event, ctx) يتلقى الرسم البياني واثنين من المساعدين الذين يفتحون شكل المكتبة: ctx.promptData({ fields }) يتحول إلى القيم أو null على إلغاء، وctx.confirm({ body }) يحل true فقط على زر التأكيد. ctx.refresh() إعادة قراءة كل عمل.
• علامة إقحام. مع menu، تصبح الحبة زرًا منقسمًا: يتم تشغيل الملصق onclick، و تفتح علامة الإقحام الصفوف، بنفس تنسيق الصف مثل قوائم السياق (بدون قوائم فرعية). يتم تسليم نموذج الوظيفة نفسه ctx ويتم استدعاؤه في كل تحديث وكل مفتوح؛ بينما تقوم بإرجاع أية صفوف، لا تحتوي حبوب منع الحمل على علامة إقحام. الهروب أو أ انقر في مكان آخر لإغلاق الصفوف.
• اختصار. shortcut يرسم شارة على الحبة. إنها تسمية فقط: سجل ربط نفسك.

يضيف البرنامج الإضافي قرصًا يحتوي على ctx.addTopBarAction(action)، والذي يُرجع المتخلص (انظر الإضافات). الحبوب تتبع الشريط: لا يوجد في viewer أو static الوضع، ولا شيء مع UI.topBar.enabled: false.

قماش فارغ

يُظهر الرسم البياني الذي لا يحتوي على عقدة ولا ملاحظة بطاقة في منتصف اللوحة، أي مصدر مع عدم وجود شيء لرسمه لا يُقرأ كرسم بياني فشل تحميله. تقول "لا شيء على القماش بعد" إلا إذا أعطيته شيئًا آخر ليقوله:

const options = {
    UI: {
        emptyState: { 
            render: ({ initial, graph }) => {
                const box = document.createElement('div')
                box.textContent = initial ? 'Nothing is related to this record.' : 'The canvas is empty.'
                const button = document.createElement('button')
                button.textContent = 'Find related'
                button.onclick = () => graph.UIManager.openPivotMode()
                box.append(button)
                return box
            },
        },
    },
}

البطاقة تتبع البيانات. تؤدي إضافة عقدة أو ملاحظة إلى إزالتها وإزالة الأخيرة منهم، باليد أو عن طريق التراجع عن تناولهم، يعيده. العقد تخفي المرشحات العدد الثابت: الرسم البياني ضيق وليس فارغًا.

render يعمل في كل مرة تظهر فيها البطاقة، وليس عند كل تغيير أثناء صعودها. initial هو true حتى يحتفظ الرسم البياني بعقدة، لذلك يمكن للمحلل الذي أفرغ لوحة قماشية كاملة أن يقال له شيء آخر غير ما يقال لمصدر فارغ. يتم عرض السلسلة التي تم إرجاعها كـ نص عادي، وrender قد يكون async مثل الخطافات أدناه.

تستخدم البطاقة سطح الكروم وحدوده، لذا فهي تتبع الموضوع. يتيح لك إيماءات اللوحة القماشية من خلالها، بحيث يعمل التحريك والتكبير/التصغير وقائمة اللوحة القماشية عبرها، باستثناء المحتوى التفاعلي: زر أو رابط أو عنصر تحكم نموذج أو أي شيء به علامة tabindex تحصل على نقراتها الخاصة. UI.emptyState: false لا يظهر أي شيء على الإطلاق.

محتوى غير متزامن

قد يُرجع كل رابط محتوى يقدمه المستهلك Promise بدلاً من المحتوى نفسه. يغطي الشريط الجانبي mainHeader.render, propertiesPanel.render / nodePropertiesMap / edgePropertiesMap, neighborsPanel.render، لوحة إضافية title و render، تلميحات الأداة render، renderNodeExtra، renderEdgeExtra وخرائط الممتلكات، و قماش فارغ render.

يوجد هذا في الحالة التي تكون فيها بيانات العقدة مرجع لسجل بدلاً من ذلك من السجل نفسه، والمحتوى المثير للاهتمام يكمن وراء استدعاء HTTP:

const options = {
    UI: {
        tooltip: {
            renderNodeExtra: async (node, { signal }) => { 
                const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
                return renderChips(await res.json())       // an HTMLElement
            },
        },
    },
}

أضف async، وأعد توجيه signal، وستتكفل المكتبة بالباقي:

عنصر نائب	أثناء انتظار الوعد، يحتل الهيكل العظمي ذو الطابع الخاص الفتحة.
مبادلة	عند الحل، يحل المحتوى محل العنصر النائب في مكانه.
الجفاء	النتيجة التي تصل بعد انتهاء الفتحة الخاصة بها - قمت بتحريك مؤشر الماوس على عقدة أخرى، أو تغيير التحديد، أو تحديث اللوحة - هي إسقاط. لا يمكن الالتزام إلا بأحدث عرض للسطح، مهما كان الترتيب الذي يتم حله به.
الإلغاء	يتم إحباط ctx.signal عندما يتم استبدال العرض أو تمزيق الرسم البياني، لذلك يتم إلغاء fetch المُعاد توجيهه بدلاً من تسريبه.
الفشل	يؤدي الوعد المرفوض إلى ظهور خط خطأ مضغوط بدلاً من ترك القرص الدوار إلى الأبد. العرض المجهض ليس فاشلاً ولا يظهر شيئًا.

سياق التجسيد

يتلقى كل رابط محتوى RenderContext كوسيطة الأخيرة. الخطافات المتزامنة الموجودة تتجاهلها ببساطة.

render: async (element, { signal, isStale }) => {
    const rows = await fetchRows(element, signal)
    if (isStale()) return ''            // cheap guard for non-abortable work
    return renderRows(rows)
}

تخصيص العنصر النائب

UI.asyncContent يتجاوز ما يظهر أثناء الانتظار وعند الفشل. كلاهما قبول سلسلة أو HTMLElement أو دالة على السطح:

const options = {
    UI: {
        asyncContent: { 
            placeholder: (surface) => surface === 'tooltip' ? 'Loading…' : mySkeleton(),
            error: 'Could not load',
        },
    },
}

surface هو واحد من 'tooltip'، 'properties'، 'neighbors'، 'mainHeader'، 'extraPanel' أو 'emptyState'.

الخطافات المتزامنة لم تمس

يتصرف عرض المحتوى بشكل مباشر تمامًا كما كان دائمًا — نفس المكالمة، نفس الشيء إطار، لا يوجد عنصر نائب ولا عنصر غلاف. لا شيء عن موجود تغييرات التكامل.

ما لا يمكن أن يكون غير متزامن

تبقى مجموعتان متزامنتين عن قصد:

• HeaderMapEntry.title / subtitle قم بتغذية فتحة عنوان الملاءمة التلقائية و بحث العقدة (resolveNodeByName)، وكلاهما يحتاج إلى النص الآن. استخدم غير متزامن mainHeader.render إذا كنت بحاجة إلى تفاصيل تم جلبها في الرأس.
• PropertyEntry.name / value — جلب الصفوف بدلاً من ذلك: غير متزامن nodePropertiesMap يحل مرة واحدة ثم يعيد الإدخالات البسيطة بدلاً من ذلك من وضع الدوار في كل خلية.

خطافات العارض لكل إطار (render.renderNode، renderLabel، renderCluster و NodeStyle.html) متزامنة أيضًا فقط: فهي تعمل داخل مسار السحب لكل العقدة، لكل علامة. إذا كنت بحاجة إلى عقدة غير متزامنة decoration، فادخل إلى بيانات العقدة والسماح للعارض المتزامن بقراءته.