التراجع والتاريخ

الزران الموجودان في الشريط العلوي عبارة عن أزرار مقسمة: يتحرك الرمز مرة واحدة، وتفتح علامة الإقحام التاريخ كله. إنه خط زمني واحد يتخلله خط now — تم وضع الصفوف أعلاه تم التراجع عنه، فإن الصفوف الموجودة أدناه هي ما لا يزال من الممكن التراجع عنه - والنقر على أحد الصفوف ينتقل إلى هناك.

اصنع بعض التاريخ، ثم افتحه:

• إخفاء العقدة أو حذف العقدة من قائمة النقر بزر الماوس الأيمن للعقدة
• إنشاء ▸ إضافة عقدة على السكة اليسرى، ثم انقر فوق اللوحة القماشية
• قم بتشغيل المحور، إذا كان لديك واحدًا - فالالاستيعاب هو إدخال مثل أي إدخال آخر

قم بتحريك صف ما لتحديد المدى الذي ستعكسه النقرة، ويذكر التأثير الصافي في التذييل، ويتنبأ به على القماش: ما سيذهب يستنزف حيث يقف، وما سيأتي تم تحديد الظهر حيث سيهبط. Ctrl + Z خطوات للخلف بدون القائمة.

التراجع متجاور: استهداف ثلاثة صفوف للأسفل يعكس تلك الثلاثة، كدفعة واحدة.

خيارات

// Nothing here switches the history on: `graph.history` records the four kinds of
// composition change on its own, and the two split buttons in the header are wired to
// it. `mode: 'full'` is what brings the header the buttons live in, and the left rail's
// Create tool.
const options = {
    UI: {
        mode: 'full',
        // Off: this card is about the top bar, and `full` mode's minimap and data dock
        // are neither (see the Minimap and Data table cards for those).
        minimap: false,
        table: false
    },
    render: { nodeTypeAccessor: (node) => node.getData().kind }
}

الكتابة من خلال

// A consumer that writes a change through to its own backend says so. Undo makes no
// compensating write, so it follows the direction of yours: a creation still reverses
// and the row is chipped `saved`, while a deletion is sealed — undoing it would put
// back a node your backend no longer has.
const writeThrough = {
    callbacks: {
        onBeforeNodeCreate: async (ctx) => {
            const values = await ctx.promptData({
                fields: [{ key: 'label', label: 'Name', type: 'text' }]
            })
            if (!values) return false
            const saved = await myBackend.create(values)
            return { accept: true, id: saved.uuid, data: values, persisted: true }
        },
        onBeforeDelete: async (ctx) => {
            await myBackend.remove(ctx.nodes.map((node) => node.id))
            return { accept: true, persisted: true }
        }
    }
}

البيانات

const data = {
    nodes: [
        { id: 'gw', data: { label: 'gateway-01', kind: 'Host' } },
        { id: 'db', data: { label: 'orders-db', kind: 'Database' } },
        { id: 'api', data: { label: 'orders-api', kind: 'Service' } },
        { id: 'cache', data: { label: 'session-cache', kind: 'Service' } },
        { id: 'job', data: { label: 'nightly-export', kind: 'Job' } },
        { id: 'sftp', data: { label: 'partner-sftp', kind: 'Host' } }
    ],
    edges: [
        { from: 'gw', to: 'api', data: { label: 'routes' } },
        { from: 'api', to: 'db', data: { label: 'reads' } },
        { from: 'api', to: 'cache', data: { label: 'reads' } },
        { from: 'job', to: 'db', data: { label: 'reads' } },
        { from: 'job', to: 'sftp', data: { label: 'writes' } }
    ]
}

لا يقوم التراجع أبدًا بالكتابة على الواجهة الخلفية لديك، لذا فإن التغيير الذي كتبته يتبع الاتجاه الذي اتبعته ذهب. لا يزال creation معكوسًا - تفقد اللوحة القماشية ما تحتفظ به الواجهة الخلفية والتذييل يحسبها (Undoes 2 steps · 1 item saved upstream). أ الحذف هو مختوم: مدرج، لا ينعكس أبدًا، ويمر فوقه شبر فيه واحد (Undoes 2 of 3 · 1 saved item kept).

راجع التراجع والتاريخ للتعرف على الأنواع الأربعة من الإدخالات، ما لا يتم عمدا المسجلة، وكيف يؤدي التراجع عن الاستيعاب إلى إعادة المرشحين إلى جزء الفرز.