@themarioga/grid-editor 7.2.0 → 8.0.0-beta.2

package/src/js/style/accordion.js

@@ -0,0 +1,168 @@
+/**
+ * The style plugin's accordion for one node: a section per group of
+ * properties, each with the merged utilities' per breakpoint fields, the
+ * inline fields and the catalog - as far as each applies to the node.
+ *
+ * Bootstrap's accordion markup, opened and closed here, so it needs none of
+ * Bootstrap's javascript. One section is open at a time, and the one the
+ * user opened last is open again on the next node's panel.
+ */
+import * as dom from '../dom.js';
+import { offeredOn } from './sections.js';
+import { createStyleField, renderStyleField } from './fields.js';
+import { createCatalog, renderCatalog } from './catalog.js';
+import { createCustom } from './custom.js';
+
+/** The kinds of node that take inline style: not a text, nor plain content. */
+export function takesInlineStyle(node, kind) {
+    if (kind === 'row' || kind === 'column' || kind === 'element' || kind === 'section') { return true; }
+    if (dom.is(node, '[data-ge-container]')) { return true; }
+
+    // A pane of a container, whatever its container calls it
+    return !!dom.child(node, '.ge-tools-drawer.ge-pane-drawer');
+}
+
+/** Whether a merged family applies to the node, as the editor decides it. */
+function familyApplies(family, node, kind) {
+    if (kind === 'plain') { kind = 'text'; }
+    if (family.appliesTo.indexOf(kind) !== -1) { return true; }
+
+    return family.appliesTo.indexOf('container') !== -1 && dom.is(node, '[data-ge-container]');
+}
+
+/**
+ * What a merged part shows in its section for a node: the spacing part
+ * its own panel, the others a field per family that applies to it - one,
+ * or flex's eleven, together.
+ */
+function partContent(ge, part, node, kind) {
+    if (part.panel) { return part.panel(node, kind); }
+
+    var fields = part.families.filter(function(family) {
+        return familyApplies(family, node, kind);
+    }).map(function(family) {
+        return ge.utilityField(node, family.name);
+    });
+
+    if (fields.length < 2) { return fields[0] || null; }
+
+    var box = dom.element('div', { 'class': 'ge-style-part-fields' });
+    fields.forEach(function(field) { box.appendChild(field); });
+
+    return box;
+}
+
+/**
+ * `context` is the plugin's: its resolved sections, its parts by name, the
+ * state it keeps for the editor ({ open }) and `opened(key)`, called when
+ * the user opens or closes a section.
+ */
+export function createAccordion(ge, node, kind, context) {
+    var inline = takesInlineStyle(node, kind);
+    var accordion = dom.element('div', { 'class': 'accordion ge-style' });
+    var fields = [];
+    var catalogs = [];
+    var notes = [];
+    var custom = null;
+    var customItem = null;
+    var changed = function() { render(); };
+
+    function item(key, labelKey) {
+        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-style-section': key }));
+        var header = entry.appendChild(dom.element('h2', { 'class': 'accordion-header' }));
+        var button = header.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'accordion-button collapsed',
+            'aria-expanded': 'false',
+        }, ge.t(labelKey)));
+        var collapse = entry.appendChild(dom.element('div', { 'class': 'accordion-collapse collapse' }));
+        var body = collapse.appendChild(dom.element('div', { 'class': 'accordion-body' }));
+
+        button.addEventListener('click', function() {
+            var opening = !dom.hasClass(collapse, 'show');
+            context.state.open = opening ? key : null;
+            // Every panel is built on init, so the others are told as well:
+            // whoever opened Border on one node wants it on the next
+            context.opened(context.state.open);
+        });
+
+        return { entry: entry, body: body };
+    }
+
+    function toggle(entry, shown) {
+        dom.toggleClass(dom.one(entry, '.accordion-collapse'), 'show', shown);
+        var button = dom.one(entry, '.accordion-button');
+        dom.toggleClass(button, 'collapsed', !shown);
+        button.setAttribute('aria-expanded', shown ? 'true' : 'false');
+    }
+
+    Object.keys(context.sections).forEach(function(key) {
+        var resolved = context.sections[key];
+        var section = resolved.section;
+
+        if (section.custom) {
+            if (inline) { customItem = item(key, section.labelKey); }
+            return;
+        }
+
+        var parts = section.parts.map(function(name) {
+            return context.parts[name] ? partContent(ge, context.parts[name], node, kind) : null;
+        }).filter(Boolean);
+        var properties = inline ? resolved.properties.filter(function(property) { return offeredOn(property, kind); }) : [];
+        var catalog = inline && resolved.catalog ? createCatalog(ge, node, kind, section.catalog) : null;
+
+        if (!parts.length && !properties.length && !catalog) { return; }
+
+        var body = item(key, section.labelKey).body;
+        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-style-part')); });
+
+        if (properties.length) {
+            var note = body.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-all-sizes' }, ge.t('style.all_sizes')));
+            notes.push(note);
+
+            var grid = body.appendChild(dom.element('div', { 'class': 'ge-style-fields' }));
+            properties.forEach(function(property) {
+                var field = createStyleField(ge, node, property, changed);
+                fields.push(field);
+                grid.appendChild(field);
+            });
+        }
+
+        if (catalog) {
+            catalogs.push(catalog);
+            body.appendChild(catalog);
+        }
+    });
+
+    // Last, since it shows what the fields made above do not
+    if (customItem) {
+        custom = createCustom(ge, node, fields.map(function(field) {
+            return field.getAttribute('data-ge-style-property');
+        }), changed);
+        customItem.body.appendChild(custom.element);
+        accordion.appendChild(customItem.entry);
+    }
+
+    if (!accordion.children.length) { return null; }
+
+    /** Open this section and no other; null closes them all. */
+    function open(key) {
+        dom.all(accordion, '.accordion-item').forEach(function(entry) {
+            toggle(entry, entry.getAttribute('data-ge-style-section') === key);
+        });
+    }
+
+    open(context.state.open);
+
+    /** Fill everything from the node again: after a write, a change of classes or view. */
+    function render() {
+        fields.forEach(renderStyleField);
+        catalogs.forEach(function(catalog) { renderCatalog(catalog, node); });
+        if (custom) { custom.render(); }
+        notes.forEach(function(note) { dom.toggle(note, ge.view() !== 'all'); });
+    }
+
+    render();
+
+    return { element: accordion, render: render, open: open };
+}

package/src/js/style/catalog.js

@@ -0,0 +1,76 @@
+/**
+ * The style plugin's catalog: Bootstrap's classes for what a section
+ * styles, as chips that put a class on the node or take it off.
+ *
+ * A chip never touches the node itself. It writes the panel's classes
+ * field and fires its change, as the user typing there would, so the
+ * editor keeps the node's own classes apart from its editing ones, and the
+ * Responsive section and the preview follow. Within an exclusive group,
+ * choosing one class takes the others off.
+ */
+import * as dom from '../dom.js';
+import { offeredOn } from './sections.js';
+
+function classesOf(node) {
+    return (node.getAttribute('class') || '').split(/\s+/).filter(Boolean);
+}
+
+/** Put a class on or off through the node's classes field. */
+function choose(ge, node, group, name) {
+    var details = ge.detailsOf(node);
+    var input = details ? dom.one(details, '.ge-classes') : null;
+    if (!input) { return; }
+
+    var on = classesOf(node).indexOf(name) !== -1;
+    var list = input.value.split(/\s+/).filter(Boolean).filter(function(each) {
+        if (each === name) { return false; }
+        return !(group.exclusive && !on && group.classes.indexOf(each) !== -1);
+    });
+
+    if (!on) { list.push(name); }
+
+    input.value = list.join(' ');
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+/**
+ * A section's catalog for a node, or null when none of its groups is
+ * offered on this kind of node.
+ */
+export function createCatalog(ge, node, kind, groups) {
+    var offered = groups.filter(function(group) { return offeredOn(group, kind); });
+    if (!offered.length) { return null; }
+
+    var box = dom.element('div', { 'class': 'ge-style-catalog' });
+    box.appendChild(dom.element('span', { 'class': 'ge-style-label' }, ge.t('style.catalog')));
+
+    offered.forEach(function(group) {
+        var row = box.appendChild(dom.element('div', { 'class': 'ge-style-chips' }));
+
+        group.classes.forEach(function(name) {
+            var chip = row.appendChild(dom.element('button', {
+                type: 'button',
+                'class': 'btn btn-sm btn-outline-secondary ge-style-chip',
+                'data-ge-class': name,
+                'aria-pressed': 'false',
+            }, name));
+
+            chip.addEventListener('click', function() { choose(ge, node, group, name); });
+        });
+    });
+
+    renderCatalog(box, node);
+
+    return box;
+}
+
+/** A chip is pressed while its class is on the node. */
+export function renderCatalog(box, node) {
+    var classes = classesOf(node);
+
+    dom.all(box, '.ge-style-chip').forEach(function(chip) {
+        var on = classes.indexOf(chip.getAttribute('data-ge-class')) !== -1;
+        dom.toggleClass(chip, 'active', on);
+        chip.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+}

package/src/js/style/custom.js

@@ -0,0 +1,84 @@
+/**
+ * The style plugin's free css: a textarea with every declaration of the
+ * node's own style that no field on show stands for - whatever the host
+ * wrote that the sections have no field for, and what a section the host
+ * turned off or narrowed would have shown.
+ *
+ * Compared longhand by longhand, which is how the browser holds a style: a
+ * margin written as a shorthand is its four sides, and a field for
+ * border-width stands for the four border-*-width. Editing the textarea
+ * writes those declarations again; the browser drops what it cannot
+ * parse, and the textarea shows what was kept.
+ */
+import * as dom from '../dom.js';
+
+/** The longhands a property sets, as the browser expands it. */
+function longhands(property) {
+    var probe = document.createElement('div').style;
+    var list = [];
+
+    probe.setProperty(property, 'initial');
+    for (var i = 0; i < probe.length; i++) { list.push(probe[i]); }
+
+    return list.length ? list : [property];
+}
+
+function declaration(cssText) {
+    var style = document.createElement('div').style;
+    style.cssText = cssText;
+    return style;
+}
+
+/** `properties` are the ones the node's fields on show stand for. */
+export function createCustom(ge, node, properties, changed) {
+    var covered = {};
+    properties.forEach(function(property) {
+        longhands(property).forEach(function(longhand) { covered[longhand] = true; });
+    });
+
+    var box = dom.element('div', { 'class': 'ge-style-custom' });
+    var textarea = box.appendChild(dom.element('textarea', {
+        'class': 'form-control form-control-sm font-monospace ge-style-custom-css',
+        rows: '4',
+        spellcheck: 'false',
+        'aria-label': ge.t('style.section_custom'),
+    }));
+
+    /** The declarations of the host's style no field stands for. */
+    function free() {
+        var style = declaration(ge.hostStyle(node));
+        var rest = document.createElement('div').style;
+
+        for (var i = 0; i < style.length; i++) {
+            var name = style[i];
+            if (!covered[name]) { rest.setProperty(name, style.getPropertyValue(name), style.getPropertyPriority(name)); }
+        }
+
+        return rest;
+    }
+
+    textarea.addEventListener('change', function() {
+        var before = free();
+        var wanted = declaration(textarea.value);
+        var i;
+
+        for (i = 0; i < before.length; i++) {
+            if (wanted.getPropertyValue(before[i]) === '') { ge.setHostStyle(node, before[i], ''); }
+        }
+        for (i = 0; i < wanted.length; i++) {
+            ge.setHostStyle(node, wanted[i], wanted.getPropertyValue(wanted[i]), wanted.getPropertyPriority(wanted[i]));
+        }
+
+        render();
+        changed();
+    });
+
+    function render() {
+        if (document.activeElement === textarea) { return; }
+        textarea.value = free().cssText.replace(/; /g, ';\n');
+    }
+
+    render();
+
+    return { element: box, render: render };
+}

package/src/js/style/display.js

@@ -0,0 +1,229 @@
+/**
+ * Display, a part of the style plugin: how a node is displayed per
+ * breakpoint, hidden included, with Bootstrap's d-{breakpoint}-* classes,
+ * and the eye in the drawers that hides and shows it.
+ *
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle and its options: grideditor.style.js puts them in its sections.
+ */
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+
+Object.assign(GridEditor.locales.en, {
+    'utility.display': 'Display',
+    'utility.visibility_hidden': 'Hidden',
+    'tool.hide_in_view': 'Hide in this view',
+    'tool.show_in_view': 'Show in this view',
+    'badge.hidden_in': 'Hidden at {breakpoints}',
+});
+
+/** Bootstrap's display values, less its table ones. */
+var VALUES = ['none', 'inline', 'inline-block', 'block', 'grid', 'inline-grid', 'flex', 'inline-flex'];
+
+/** A node that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = new RegExp('(?:^|\\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:' + VALUES.join('|') + ')(?:\\s|$)');
+var NONE_PATTERN = /^d-(?:(?:sm|md|lg|xl|xxl)-)?none$/;
+
+var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
+
+/** What the canvas shows a hidden node as, in a view where Bootstrap hides it. */
+var SHOWN_ATTR = 'data-ge-display';
+
+export function displayPart(ge, given) {
+
+    var options = Object.assign({ drawer: true }, given);
+
+    /**
+     * What a kind of node is offered: a row is a flex container or it is no
+     * grid, and a text is a block of text.
+     */
+    function choices(kind) {
+        if (kind === 'row') { return ['none', 'flex']; }
+        if (kind === 'text' || kind === 'plain') { return ['none', 'block']; }
+
+        return VALUES;
+    }
+
+    /** What "shown" is written as on this kind of node, when nothing below says. */
+    function shownByDefault(kind) {
+        return kind === 'row' ? 'flex' : 'block';
+    }
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
+            dom.is(node, '[data-ge-container]');
+    }
+
+    function hiddenAt(node, view) {
+        return ge.getUtility(node, 'display', view) === 'none';
+    }
+
+    /** The breakpoints at which the node is hidden, smallest first. */
+    function hiddenTiers(node) {
+        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
+    }
+
+    /**
+     * Whether the node is hidden in the view being edited. In the all view
+     * that means hidden at every breakpoint, since "hidden at some" is what
+     * the badge is for.
+     */
+    function hiddenHere(node) {
+        return ge.view() === 'all'
+            ? hiddenTiers(node).length === ge.breakpoints.length
+            : hiddenAt(node, ge.view());
+    }
+
+    /** What the breakpoint below the view shows, which an inherit falls back to. */
+    function hiddenBelow(node) {
+        var index = ge.breakpoints.indexOf(ge.view());
+
+        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
+    }
+
+    /**
+     * How the nearest breakpoint below this one that shows the node shows
+     * it, or null when none below does.
+     */
+    function shownBelow(node, view) {
+        for (var i = ge.breakpoints.indexOf(view) - 1; i >= 0; i--) {
+            var value = ge.getUtility(node, 'display', ge.breakpoints[i]);
+
+            if (value === null) { return null; }
+            if (value !== 'none') { return value; }
+        }
+
+        return null;
+    }
+
+    /**
+     * Hide or show the node in the view being edited, with as few classes as
+     * that takes. In a breakpoint view that is often none at all: showing a
+     * node the breakpoint below shows removes this breakpoint's d-*-none
+     * rather than writing another class on top of it. Showing one that the
+     * breakpoint below hides writes the display it had further down, so a
+     * flex column comes back flex. In the all view a node is hidden
+     * everywhere or shown everywhere, and shown is no class.
+     */
+    function toggle(node, kind) {
+        var hide = !hiddenHere(node);
+        var value;
+
+        if (ge.view() === 'all') {
+            value = hide ? 'none' : null;
+        } else if (hide) {
+            value = hiddenBelow(node) ? null : 'none';
+        } else {
+            value = hiddenBelow(node) ? (shownBelow(node, ge.view()) || shownByDefault(kind)) : null;
+        }
+
+        ge.setUtility(node, 'display', value, { source: 'tool' });
+    }
+
+    /**
+     * A node Bootstrap hides in this view stays on the canvas, shown as it
+     * would be if it were not hidden: with its classes' none taken off for
+     * the moment it takes to ask the browser.
+     */
+    function shownAs(node) {
+        var original = node.getAttribute('class');
+
+        node.setAttribute('class', original.split(/\s+/).filter(function(name) {
+            return !NONE_PATTERN.test(name);
+        }).join(' '));
+
+        var display = getComputedStyle(node).display;
+        node.setAttribute('class', original);
+
+        // The canvas has a rule for each of Bootstrap's values, and a block for anything else
+        return display !== 'none' && VALUES.indexOf(display) !== -1 ? display : 'block';
+    }
+
+    /**
+     * The canvas shows each node as the view sees it. A node Bootstrap would
+     * hide is kept on the canvas with the display it would have, and
+     * ge-hidden-in-view fades it; data-ge-hidden-in carries the badge text
+     * for the all view.
+     */
+    function mark(scope) {
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var kind = ge.kindOf(node);
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
+            var tiers = carries ? hiddenTiers(node) : [];
+            var here = carries && hiddenHere(node);
+            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
+
+            node.removeAttribute(SHOWN_ATTR);
+            if (carries && getComputedStyle(node).display === 'none') {
+                node.setAttribute(SHOWN_ATTR, shownAs(node));
+            }
+
+            dom.toggleClass(node, 'ge-hidden-in-view', here);
+
+            if (partly) {
+                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+            } else {
+                node.removeAttribute('data-ge-hidden-in');
+            }
+
+            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
+                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
+                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
+                    dom.all(tool, 'i').forEach(function(icon) {
+                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+                    });
+                });
+            });
+        });
+    }
+
+    function unmark() {
+        dom.all(ge.canvas, '.ge-hidden-in-view, [data-ge-hidden-in], [' + SHOWN_ATTR + ']').forEach(function(node) {
+            dom.removeClass(node, 'ge-hidden-in-view');
+            node.removeAttribute('data-ge-hidden-in');
+            node.removeAttribute(SHOWN_ATTR);
+            dom.dropEmptyClass(node);
+        });
+    }
+
+    return {
+        families: [{
+            name: 'display',
+            prefix: 'd',
+            values: VALUES,
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
+            labelKey: 'utility.display',
+
+            choices: function(node, kind) {
+                return choices(kind);
+            },
+
+            label: function(value) {
+                return value === 'none' ? ge.t('utility.visibility_hidden') : value;
+            },
+
+            /**
+             * What the view being edited displays the node as. Hidden is
+             * shown the way the breakpoints below show it, since the canvas
+             * keeps a hidden node, faded; with no class applying, it is what
+             * the node is without any.
+             */
+            preview: function(value, node) {
+                if (value === 'none') { value = shownBelow(node, ge.view()); }
+
+                return { display: value === null ? ge.bareStyle(node, 'display', 'display') : value };
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || !applies(node, kind)) { return; }
+
+            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
+                toggle(node, kind);
+            });
+        },
+
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+}

package/src/js/style/drawerflow.js

@@ -0,0 +1,118 @@
+/**
+ * The drawer of a flex or grid node, a part of the style plugin.
+ *
+ * A drawer is its node's first child, in the flow: in a row, which wraps,
+ * it is a line of its own above the columns, but in anything else that
+ * lays its children out - a column made flex, a row that does not wrap, a
+ * grid - it would be one of the items, beside the content or in a cell of
+ * its own. So on such a node the drawer leaves the flow: it sits on top, as
+ * wide as the node, over a transparent top border as tall as it is, and
+ * the content is laid out below as the page would lay it out.
+ *
+ * The node's own style is the host's, so what is written on it is an
+ * attribute, and the border comes from a rule per height, here.
+ */
+import * as dom from '../dom.js';
+
+var NODES = '.row, .column, .ge-element, [data-ge-container]';
+var OUT_CLASS = 'ge-drawer-out';
+var OUT_ATTR = 'data-ge-drawer-out';
+
+/** The space left between the drawer and the content, as the editor's frame leaves it. */
+var GAP = 5;
+
+var LAYS_OUT = /^(?:inline-)?(?:flex|grid)$/;
+
+export function drawerflowPart(ge) {
+
+    var sheet = null;
+    var heights = {};
+    var observer = null;
+
+    /** The rule for a node whose drawer takes this much room. */
+    function rule(room) {
+        if (heights[room]) { return; }
+        heights[room] = true;
+
+        if (!sheet) {
+            sheet = document.head.appendChild(dom.element('style', { 'data-ge-drawer-flow': '' }));
+        }
+
+        var node = '.ge-canvas.ge-editing [' + OUT_ATTR + '="' + room + '"]';
+        sheet.appendChild(document.createTextNode(
+            node + ' { border-top-width: ' + room + 'px !important; }\n' +
+            node + ' > .ge-tools-drawer { top: -' + room + 'px; }\n'
+        ));
+    }
+
+    /** Whether the node lays its drawer out as an item of its own. */
+    function laysOut(node) {
+        var style = getComputedStyle(node);
+
+        if (!LAYS_OUT.test(style.display)) { return false; }
+
+        // A row as the grid has it: its drawer is a line of its own already
+        return !(dom.hasClass(node, 'row') && style.flexDirection === 'row' && style.flexWrap === 'wrap');
+    }
+
+    function measure(node, drawer) {
+        var room = Math.ceil(drawer.offsetHeight) + GAP;
+
+        rule(room);
+        node.setAttribute(OUT_ATTR, String(room));
+    }
+
+    /** A drawer that grows - its tools wrap, its settings unfold - takes more room. */
+    function watch(drawer) {
+        if (typeof ResizeObserver === 'undefined') { return; }
+
+        if (!observer) {
+            observer = new ResizeObserver(function(entries) {
+                entries.forEach(function(entry) {
+                    var node = entry.target.parentNode;
+                    if (node && dom.hasClass(node, OUT_CLASS)) { measure(node, entry.target); }
+                });
+            });
+        }
+        observer.observe(drawer);
+    }
+
+    function mark(scope) {
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var drawer = dom.child(node, '.ge-tools-drawer');
+            if (!drawer) { return; }
+
+            if (laysOut(node)) {
+                dom.addClass(node, OUT_CLASS);
+                measure(node, drawer);
+                watch(drawer);
+            } else if (dom.hasClass(node, OUT_CLASS)) {
+                dom.removeClass(node, OUT_CLASS);
+                node.removeAttribute(OUT_ATTR);
+                dom.dropEmptyClass(node);
+                if (observer) { observer.unobserve(drawer); }
+            }
+        });
+    }
+
+    function unmark() {
+        if (observer) { observer.disconnect(); }
+        observer = null;
+
+        dom.all(ge.canvas, '.' + OUT_CLASS).forEach(function(node) {
+            dom.removeClass(node, OUT_CLASS);
+            node.removeAttribute(OUT_ATTR);
+            dom.dropEmptyClass(node);
+        });
+
+        if (sheet) { sheet.remove(); }
+        sheet = null;
+        heights = {};
+    }
+
+    return {
+        families: [],
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+}