chuijs 4.0.2 → 4.0.3

package/framework/components/chui_tree_view/tree_view.js

@@ -1,6 +1,6 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Идентификаторы панелей дерева для aria-controls */
 let tree_panel_counter = 0;
@@ -11,7 +11,7 @@ const DRAGGING_CLASS = "tree_view_button_dragging";
 const DROP_CLASSES = {
     before: "tree_view_button_drop_before",
     after: "tree_view_button_drop_after",
-    inside: "tree_view_button_drop_inside"
+    inside: "tree_view_button_drop_inside",
 };
 
 /**
@@ -58,12 +58,12 @@ class TreeView {
     static SELECTION = {
         NONE: "none",
         SINGLE: "single",
-        MULTIPLE: "multiple"
+        MULTIPLE: "multiple",
     };
     static DROP = {
         BEFORE: "before",
         AFTER: "after",
-        INSIDE: "inside"
+        INSIDE: "inside",
     };
     // Узел → описание из фабрики: коллбэки и getSelected() отдают то же, что вернул TreeView.Button
     static #registry = new WeakMap();
@@ -112,36 +112,42 @@ class TreeView {
     #raf = null;
     #destroyed = false;
 
-    constructor(options = {
-        width: String(),
-        components: [],
-        selection: String(),
-        draggable: Boolean(),
-        moveOnDrop: Boolean(),
-        label: String(),
-        onSelect: undefined,
-        onDrop: undefined,
-        deferRender: Boolean(),
-        virtual: undefined,
-        variableHeight: Boolean(),
-        estimatedRowHeight: undefined,
-        height: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TreeView');
+    constructor(
+        options = {
+            width: String(),
+            components: [],
+            selection: String(),
+            draggable: Boolean(),
+            moveOnDrop: Boolean(),
+            label: String(),
+            onSelect: undefined,
+            onDrop: undefined,
+            deferRender: Boolean(),
+            virtual: undefined,
+            variableHeight: Boolean(),
+            estimatedRowHeight: undefined,
+            height: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TreeView");
         let main_test = document.createElement(`chui_tree_view_main_test`);
         main_test.setAttribute("role", "tree");
         this.#main_test = main_test;
         // Виртуализация включается явно: `virtual: true` или `{rowHeight, buffer}`
-        this.#virtual = options.virtual === undefined || options.virtual === false
-            ? undefined
-            : (options.virtual === true ? {} : {...options.virtual});
+        this.#virtual =
+            options.virtual === undefined || options.virtual === false
+                ? undefined
+                : options.virtual === true
+                  ? {}
+                  : { ...options.virtual };
         // Переменная высота: функция `rowHeight(record, index)` — высоты из данных,
         // `variableHeight: true` — высоты измеряются по отрисованным строкам
         if (this.#virtual !== undefined) {
             if (options.variableHeight === true) this.#virtual.variableHeight = true;
             this.#variable_height = typeof this.#virtual.rowHeight === "function";
             this.#measure_dom = this.#virtual.variableHeight === true;
-            if (this.#measure_dom && this.#virtual.estimatedRowHeight === undefined) this.#virtual.estimatedRowHeight = 32;
+            if (this.#measure_dom && this.#virtual.estimatedRowHeight === undefined)
+                this.#virtual.estimatedRowHeight = 32;
         }
         this.#selection_mode = options.selection === undefined ? TreeView.SELECTION.NONE : options.selection;
         this.#draggable = options.draggable === true;
@@ -152,7 +158,10 @@ class TreeView {
         // Отложенная отрисовка строк: узлы в DOM, но далёкие от окна не раскладываются
         if (options.deferRender === true) main_test.classList.add("tree_view_defer");
         if (this.#selection_mode !== TreeView.SELECTION.NONE) {
-            main_test.setAttribute("aria-multiselectable", this.#selection_mode === TreeView.SELECTION.MULTIPLE ? "true" : "false");
+            main_test.setAttribute(
+                "aria-multiselectable",
+                this.#selection_mode === TreeView.SELECTION.MULTIPLE ? "true" : "false"
+            );
             main_test.addEventListener("click", this.#onClick);
             // Space приходит и от makeKeyboardButton (кликом), поэтому перехватываем его
             // с модификатором раньше — в фазе перехвата
@@ -170,23 +179,24 @@ class TreeView {
         if (options.width !== undefined) {
             this.#chui_tree_view.style.width = options.width;
         } else {
-            this.#chui_tree_view.style.width = 'max-content'
+            this.#chui_tree_view.style.width = "max-content";
         }
         // Панели действий приходят опцией: частичный объект опций без них — дерево без панелей
         const toolbar_buttons = Array.isArray(options.components) ? options.components : [];
-        toolbar_buttons.forEach(buttons => {
-            main_test.appendChild(buttons.button)
+        toolbar_buttons.forEach((buttons) => {
+            main_test.appendChild(buttons.button);
             if (buttons.panel !== undefined) {
-                main_test.appendChild(buttons.panel)
+                main_test.appendChild(buttons.panel);
             }
-        })
+        });
         // Структурная модель строится один раз по полному DOM: дальше окно собирается из неё,
         // поэтому отрисовка перестаёт зависеть от того, что сейчас лежит в документе
         this.#buildStructure();
         if (this.#virtual !== undefined) {
             this.#chui_tree_view.style.height = options.height === undefined ? "400px" : options.height;
             // Высота строки одна для вёрстки и для арифметики распорок (в переменном режиме её нет)
-            if (!this.#isVariable()) this.#chui_tree_view.style.setProperty("--tree_view_row_height", `${this.#rowHeight()}px`);
+            if (!this.#isVariable())
+                this.#chui_tree_view.style.setProperty("--tree_view_row_height", `${this.#rowHeight()}px`);
             this.#chui_tree_view.dataset.virtual = "true";
             main_test.classList.add("tree_view_virtual");
             this.#bindScroll();
@@ -195,7 +205,7 @@ class TreeView {
         }
         this.#applySelection(false);
         this.#syncDraggable();
-        this.#chui_tree_view.appendChild(main_test)
+        this.#chui_tree_view.appendChild(main_test);
         if (this.#virtual !== undefined) this.#renderVirtual();
     }
 
@@ -285,7 +295,9 @@ class TreeView {
     // строки могут быть вне документа, но остаются видимыми по смыслу
     #items() {
         if (this.#virtual === undefined) {
-            return [...this.#main_test.querySelectorAll('tree_view_button')].filter(button => this.#isVisibleRow(button));
+            return [...this.#main_test.querySelectorAll("tree_view_button")].filter((button) =>
+                this.#isVisibleRow(button)
+            );
         }
         return this.#project().map((row) => this.#nodes[row.index].button);
     }
@@ -308,7 +320,7 @@ class TreeView {
 
     /** Все кнопки, к которым применим выбор: в виртуальном режиме — по модели, а не по документу */
     #selectionTargets() {
-        if (this.#virtual === undefined) return [...this.#main_test.querySelectorAll('tree_view_button')];
+        if (this.#virtual === undefined) return [...this.#main_test.querySelectorAll("tree_view_button")];
         return this.#project().map((row) => this.#nodes[row.index].button);
     }
 
@@ -337,7 +349,8 @@ class TreeView {
         for (const node of this.#selectionTargets()) {
             const selected = this.#selected.has(node);
             node.classList.toggle(SELECTED_CLASS, selected);
-            if (this.#selection_mode !== TreeView.SELECTION.NONE) node.setAttribute("aria-selected", selected ? "true" : "false");
+            if (this.#selection_mode !== TreeView.SELECTION.NONE)
+                node.setAttribute("aria-selected", selected ? "true" : "false");
         }
         if (!announce || this.#on_select === undefined) return;
         const items = this.getSelected();
@@ -345,7 +358,9 @@ class TreeView {
     }
 
     #toggleNode(node) {
-        const nodes = this.#selected.has(node) ? [...this.#selected].filter((entry) => entry !== node) : [...this.#selected, node];
+        const nodes = this.#selected.has(node)
+            ? [...this.#selected].filter((entry) => entry !== node)
+            : [...this.#selected, node];
         this.#anchor = node;
         this.#commitSelection(nodes);
     }
@@ -416,7 +431,7 @@ class TreeView {
         }
         if (target !== undefined && position !== undefined) {
             target.classList.add(DROP_CLASSES[position]);
-            this.#drop_target = {node: target, position: position};
+            this.#drop_target = { node: target, position: position };
         }
     }
 
@@ -428,7 +443,10 @@ class TreeView {
         let reference;
         if (position === TreeView.DROP.INSIDE) {
             const panel = target.nextElementSibling;
-            const html = panel !== null && panel.tagName.toLowerCase() === "tree_view_panel" ? panel.querySelector("tree_view_html") : null;
+            const html =
+                panel !== null && panel.tagName.toLowerCase() === "tree_view_panel"
+                    ? panel.querySelector("tree_view_html")
+                    : null;
             if (html === null) return false;
             container = html;
             reference = null;
@@ -451,7 +469,7 @@ class TreeView {
     #descriptor(node) {
         const item = TreeView.#registry.get(node);
         if (item !== undefined) return item;
-        return {title: this.#title(node), button: node};
+        return { title: this.#title(node), button: node };
     }
 
     #title(node) {
@@ -495,7 +513,7 @@ class TreeView {
             parent: parent,
             children: [],
             title: this.#title(button),
-            hidden: false
+            hidden: false,
         };
         this.#nodes.push(record);
         this.#node_index.set(button, index);
@@ -529,7 +547,7 @@ class TreeView {
             const record = this.#nodes[index];
             if (record === undefined || record.hidden) return 0;
             positions.set(index, rows.length);
-            rows.push({index: index, depth: depth});
+            rows.push({ index: index, depth: depth });
             const own = variable ? this.#heightOf(index) : this.#rowHeight();
             heights.push(own);
             let size = 1;
@@ -632,7 +650,7 @@ class TreeView {
     #bindScroll() {
         if (this.#scroll_bound) return;
         this.#scroll_bound = true;
-        this.#chui_tree_view.addEventListener("scroll", this.#onScroll, {passive: true});
+        this.#chui_tree_view.addEventListener("scroll", this.#onScroll, { passive: true });
     }
 
     #onScroll = () => {
@@ -699,9 +717,10 @@ class TreeView {
         let scrollTop = Math.min(Math.max(0, this.#chui_tree_view.scrollTop), Math.max(modelBottom, realBottom));
         // Низ окна для переменной высоты — позиция строки под нижней кромкой плюс одна строка,
         // иначе последняя видимая строка выпадала бы из окна
-        const windowTo = (top) => variable
-            ? Math.min(rows.length, positionFor(top + viewport) + 1 + buffer)
-            : Math.min(rows.length, Math.ceil((top + viewport) / height) + buffer);
+        const windowTo = (top) =>
+            variable
+                ? Math.min(rows.length, positionFor(top + viewport) + 1 + buffer)
+                : Math.min(rows.length, Math.ceil((top + viewport) / height) + buffer);
         let from = Math.max(0, positionFor(scrollTop) - buffer);
         let to = windowTo(scrollTop);
         // Список сжался (поиск, сворачивание) — позиция ещё старая и указывает за конец: прижимаем
@@ -714,8 +733,15 @@ class TreeView {
         if (scrollTop !== this.#chui_tree_view.scrollTop) this.#chui_tree_view.scrollTop = scrollTop;
         // Ни окно, ни структура не изменились (прокрутка в пределах строки) — пересобирать
         // нечего: пересборка на каждом кадре только дёргала бы DOM и фокус
-        if (!force && this.#win !== undefined && from === this.#win.from && to === this.#win.to
-            && this.#win_rows === rows.length && this.#win_stamp === this.#stamp) return;
+        if (
+            !force &&
+            this.#win !== undefined &&
+            from === this.#win.from &&
+            to === this.#win.to &&
+            this.#win_rows === rows.length &&
+            this.#win_stamp === this.#stamp
+        )
+            return;
         // Кто держит фокус: снимок до мутации — после неё `document.activeElement` уже `body`
         const active = document.activeElement;
         const activeIndex = active instanceof Element ? this.#node_index.get(active) : undefined;
@@ -745,10 +771,10 @@ class TreeView {
             return node;
         };
         // Сколько занимает пропущенная ветка: в переменном режиме — суммарная высота её поддерева
-        const subtreePx = (index) => variable ? (this.#subtree_heights.get(index) || 0) : sizeOf(index) * height;
+        const subtreePx = (index) => (variable ? this.#subtree_heights.get(index) || 0 : sizeOf(index) * height);
         const fill = (container, parentIndex) => {
             // Дети берутся из проекции: скрытое поиском и свёрнутое в неё уже не попадает
-            const children = parentIndex === -1 ? this.#root_rows : (this.#child_rows.get(parentIndex) || []);
+            const children = parentIndex === -1 ? this.#root_rows : this.#child_rows.get(parentIndex) || [];
             const parts = [];
             let gap = 0;
             for (const index of children) {
@@ -788,7 +814,7 @@ class TreeView {
         this.#restoreFocus(keepIndex);
         this.#applySelection(false);
         this.#syncDraggable();
-        this.#win = {from: from, to: to};
+        this.#win = { from: from, to: to };
         this.#win_stamp = this.#stamp;
         this.#win_rows = rows.length;
     }
@@ -818,14 +844,18 @@ class TreeView {
         if (index === undefined) return;
         const record = this.#nodes[index];
         if (record === undefined || document.activeElement === record.button) return;
-        record.button.focus({preventScroll: true});
+        record.button.focus({ preventScroll: true });
     }
 
     /** Что сейчас в окне: {from, to} по плоскому списку (для стендов и приложений) */
-    getVirtualWindow() { return this.#win; }
+    getVirtualWindow() {
+        return this.#win;
+    }
 
     /** Переменная высота строк включена (`rowHeight`-функция или `variableHeight`) */
-    isVariableHeight() { return this.#isVariable(); }
+    isVariableHeight() {
+        return this.#isVariable();
+    }
 
     /** Высота строки с индексом модели: из данных, из замеров или заданная */
     getRowHeightAt(index = Number()) {
@@ -856,7 +886,7 @@ class TreeView {
         if (place === undefined) return;
         // В переменном режиме верх и высота строки берутся из смещений проекции
         const variable = this.#isVariable();
-        const height = variable ? (this.#row_heights[place] || this.#rowHeight()) : this.#rowHeight();
+        const height = variable ? this.#row_heights[place] || this.#rowHeight() : this.#rowHeight();
         const viewport = Math.max(1, this.#chui_tree_view.clientHeight);
         const top = variable ? this.#offsets[place] : place * height;
         const scrollTop = this.#chui_tree_view.scrollTop;
@@ -921,17 +951,23 @@ class TreeView {
     }
 
     // === ПОИСК ===
-    getSearchQuery() { return this.#query; }
-    isSearching() { return this.#query !== ""; }
+    getSearchQuery() {
+        return this.#query;
+    }
+    isSearching() {
+        return this.#query !== "";
+    }
     /** Совпадения поиска (описания из фабрик), в порядке показа */
-    getMatches() { return [...this.#matches].map((node) => this.#descriptor(node)); }
+    getMatches() {
+        return [...this.#matches].map((node) => this.#descriptor(node));
+    }
 
     /**
      * Показать только подходящие узлы и цепочку их предков; остальное убирается (`display: none`),
      * поэтому навигация и выбор дальше работают по видимому. `autoExpand` раскрывает предков
      * (без него совпадения внутри свёрнутых веток остаются скрытыми), `highlight` подсвечивает совпадения.
      */
-    search(query = String(), options = {autoExpand: true, highlight: true}) {
+    search(query = String(), options = { autoExpand: true, highlight: true }) {
         this.clearSearch();
         const text = String(query).trim().toLocaleLowerCase();
         if (text === "") return this;
@@ -939,7 +975,7 @@ class TreeView {
         // В виртуальном режиме в документе только окно — ищем и скрываем по модели
         if (this.#virtual !== undefined) {
             this.#searchModel(text, options);
-            this.#announce(I18n.t("treeView.found", {count: this.#matches.size}));
+            this.#announce(I18n.t("treeView.found", { count: this.#matches.size }));
             return this;
         }
         const buttons = [...this.#main_test.querySelectorAll("tree_view_button")];
@@ -972,7 +1008,7 @@ class TreeView {
         if (options.highlight !== false) for (const node of this.#matches) node.classList.add("tree_view_button_match");
         this.#touch();
         if (this.#virtual !== undefined) this.#renderVirtual();
-        this.#announce(I18n.t("treeView.found", {count: this.#matches.size}));
+        this.#announce(I18n.t("treeView.found", { count: this.#matches.size }));
         return this;
     }
 
@@ -1000,7 +1036,9 @@ class TreeView {
         return this;
     }
 
-    collapse(target) { return this.expand(target, false); }
+    collapse(target) {
+        return this.expand(target, false);
+    }
 
     /** Раскрыть всё: в виртуальном режиме — единственный способ, строки вне окна не кликнуть */
     expandAll() {
@@ -1014,7 +1052,8 @@ class TreeView {
     }
 
     getExpanded() {
-        return this.#nodes.filter((record) => record.button.getAttribute("aria-expanded") === "true")
+        return this.#nodes
+            .filter((record) => record.button.getAttribute("aria-expanded") === "true")
             .map((record) => this.#descriptor(record.button));
     }
 
@@ -1045,14 +1084,16 @@ class TreeView {
             }
         }
         for (const record of this.#nodes) record.hidden = !visible.has(record.index);
-        if (options.highlight !== false) for (const button of this.#matches) button.classList.add("tree_view_button_match");
+        if (options.highlight !== false)
+            for (const button of this.#matches) button.classList.add("tree_view_button_match");
         this.#touch();
         this.#renderVirtual();
     }
 
     /** Снять фильтр поиска: возвращает все узлы и снимает подсветку */
     clearSearch() {
-        for (const node of this.#main_test.querySelectorAll("." + TreeView.#HIDDEN_CLASS)) node.classList.remove(TreeView.#HIDDEN_CLASS);
+        for (const node of this.#main_test.querySelectorAll("." + TreeView.#HIDDEN_CLASS))
+            node.classList.remove(TreeView.#HIDDEN_CLASS);
         for (const node of this.#matches) node.classList.remove("tree_view_button_match");
         for (const record of this.#nodes) record.hidden = false;
         const wasSearching = this.#query !== "";
@@ -1067,7 +1108,9 @@ class TreeView {
     // Статус поиска читает скринридер (узла нет, пока поиск не использовался)
     #announce(text = String()) {
         if (this.#status === undefined) {
-            this.#status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+            this.#status = Object.assign(document.createElement("chui_visually_hidden"), {
+                className: "chui_visually_hidden",
+            });
             this.#status.setAttribute("role", "status");
             this.#status.setAttribute("aria-live", "polite");
             this.#main_test.appendChild(this.#status);
@@ -1106,7 +1149,7 @@ class TreeView {
 
     #onNavigationKeyDown = (event) => {
         const items = this.#items();
-        const current = items.findIndex(item => item === document.activeElement);
+        const current = items.findIndex((item) => item === document.activeElement);
         if (current === -1) return;
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             if (event.altKey && this.#draggable) {
@@ -1126,7 +1169,7 @@ class TreeView {
                 document.activeElement.click();
             }
         } else if (event.key === "ArrowLeft") {
-            const parent = document.activeElement.parentElement.closest('tree_view_button[aria-expanded]');
+            const parent = document.activeElement.parentElement.closest("tree_view_button[aria-expanded]");
             if (document.activeElement.getAttribute("aria-expanded") === "true") {
                 event.preventDefault();
                 document.activeElement.click();
@@ -1200,20 +1243,20 @@ class TreeView {
     };
 
     static Button(options = { title: String(), listener: () => {} }) {
-        let button = document.createElement('tree_view_button');
+        let button = document.createElement("tree_view_button");
         if (options.listener !== undefined) button.addEventListener("click", options.listener);
         makeKeyboardButton(button, "treeitem");
-        let button_text = document.createElement('tree_view_button_text');
+        let button_text = document.createElement("tree_view_button_text");
         button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        const item = {title: options.title, button: button};
+        button.appendChild(button_text);
+        const item = { title: options.title, button: button };
         TreeView.#registry.set(button, item);
         return item;
     }
 
     static ExpandButton(options = { title: String(), subButtons: [], components: [], lazySubButtons: undefined }) {
-        let button = document.createElement('tree_view_button');
-        let panel = document.createElement('tree_view_panel')
+        let button = document.createElement("tree_view_button");
+        let panel = document.createElement("tree_view_panel");
         // Раскрытая панель переходит с фиксированной высоты на max-content: иначе высота
         // остаётся «замороженной» после первого раскрытия
         const transitionEndEvent = (event) => {
@@ -1224,29 +1267,29 @@ class TreeView {
         button.setAttribute("aria-controls", panel.id);
         button.setAttribute("aria-expanded", "false");
         makeKeyboardButton(button, "treeitem");
-        button.addEventListener('click', () => {
+        button.addEventListener("click", () => {
             buildSubs();
-            const open = !button.classList.contains('tree_view_button_active');
-            button.classList.toggle('tree_view_button_active', open);
+            const open = !button.classList.contains("tree_view_button_active");
+            button.classList.toggle("tree_view_button_active", open);
             // Стрелка поворачивается по aria-expanded (styles.css) — состояние одно
             button.setAttribute("aria-expanded", open ? "true" : "false");
             if (open) {
                 panel.style.maxHeight = panel.scrollHeight + "px";
-                panel.addEventListener('transitionend', transitionEndEvent);
+                panel.addEventListener("transitionend", transitionEndEvent);
             } else {
                 // Сначала фиксируем текущую высоту, иначе сжатие не анимируется
                 panel.style.maxHeight = panel.scrollHeight + "px";
                 void panel.offsetHeight;
                 panel.style.maxHeight = "0px";
             }
-        })
-        let button_text = document.createElement('tree_view_button_text');
+        });
+        let button_text = document.createElement("tree_view_button_text");
         button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        let barrow = document.createElement('tree_view_button_arrow')
+        button.appendChild(button_text);
+        let barrow = document.createElement("tree_view_button_arrow");
         barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        button.appendChild(barrow)
-        let html = document.createElement('tree_view_html')
+        button.appendChild(barrow);
+        let html = document.createElement("tree_view_html");
         // Ленивое поддерево: содержимое строится один раз — при первом раскрытии,
         // поэтому большое дерево не занимает DOM заранее (lazySubButtons: () => [...])
         let subs_built = false;
@@ -1254,34 +1297,34 @@ class TreeView {
             if (subs_built) return;
             subs_built = true;
             if (options.subButtons !== undefined) {
-                options.subButtons.forEach(sub => {
-                    html.appendChild(sub.button)
+                options.subButtons.forEach((sub) => {
+                    html.appendChild(sub.button);
                     if (sub.panel !== undefined) {
-                        html.appendChild(sub.panel)
+                        html.appendChild(sub.panel);
                     }
-                })
+                });
             }
             if (options.components !== undefined) {
-                options.components.forEach(sub => {
-                    html.appendChild(sub.set())
-                })
+                options.components.forEach((sub) => {
+                    html.appendChild(sub.set());
+                });
             }
             if (options.lazySubButtons !== undefined) {
-                options.lazySubButtons().forEach(sub => {
-                    html.appendChild(sub.button)
+                options.lazySubButtons().forEach((sub) => {
+                    html.appendChild(sub.button);
                     if (sub.panel !== undefined) {
-                        html.appendChild(sub.panel)
+                        html.appendChild(sub.panel);
                     }
-                })
+                });
             }
         };
         // Без ленивой фабрики поведение прежнее — строим сразу
         if (options.lazySubButtons === undefined) buildSubs();
-        panel.appendChild(html)
-        const item = {title: options.title, button: button, panel: panel};
+        panel.appendChild(html);
+        const item = { title: options.title, button: button, panel: panel };
         TreeView.#registry.set(button, item);
         return item;
     }
 }
 
-exports.TreeView = TreeView
+exports.TreeView = TreeView;

package/framework/components/chui_watermark/watermark.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /** Схемы источника картинки: остальное считается локальным путём и читается как data URL */
 const URL_SCHEMES = ["data:", "http:", "https:", "file:", "blob:"];
@@ -32,7 +32,7 @@ const URL_SCHEMES = ["data:", "http:", "https:", "file:", "blob:"];
  */
 class Watermark {
     static #counter = 0;
-    static #DEFAULT_GAP = {x: 100, y: 100};
+    static #DEFAULT_GAP = { x: 100, y: 100 };
     static #DEFAULT_ROTATE = -22;
     static #DEFAULT_OPACITY = 0.15;
     static #DEFAULT_FONT_SIZE = 16;
@@ -45,19 +45,27 @@ class Watermark {
     #text = undefined;
     #image = undefined;
     #image_node = undefined;
-    #font = {size: Watermark.#DEFAULT_FONT_SIZE, weight: 400, family: undefined, color: undefined};
+    #font = { size: Watermark.#DEFAULT_FONT_SIZE, weight: 400, family: undefined, color: undefined };
     #rotate = Watermark.#DEFAULT_ROTATE;
-    #gap = {...Watermark.#DEFAULT_GAP};
+    #gap = { ...Watermark.#DEFAULT_GAP };
     #opacity = Watermark.#DEFAULT_OPACITY;
     #z_index = Watermark.#DEFAULT_Z_INDEX;
     #scheme = undefined;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(), text: String(), image: String(),
-        font: Object(), rotate: Number(), gap: Object(), opacity: Number(),
-        zIndex: Number(), components: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            image: String(),
+            font: Object(),
+            rotate: Number(),
+            gap: Object(),
+            opacity: Number(),
+            zIndex: Number(),
+            components: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Watermark");
         Watermark.#counter += 1;
         this.#id = optionOr(options.id, `chui_watermark_${Watermark.#counter}`);
@@ -98,7 +106,7 @@ class Watermark {
 
     /** Настройки метки: `{size, weight, family, color}` */
     getFont() {
-        return {...this.#font};
+        return { ...this.#font };
     }
 
     getRotate() {
@@ -107,7 +115,7 @@ class Watermark {
 
     /** Шаг между метками */
     getGap() {
-        return {...this.#gap};
+        return { ...this.#gap };
     }
 
     getOpacity() {
@@ -245,12 +253,12 @@ class Watermark {
     }
 
     static #normalizeGap(gap = Object()) {
-        const source = Array.isArray(gap) ? {x: gap[0], y: gap[1]} : gap;
+        const source = Array.isArray(gap) ? { x: gap[0], y: gap[1] } : gap;
         const x = Number(source === undefined ? undefined : source.x);
         const y = Number(source === undefined ? undefined : source.y);
         return {
             x: Number.isFinite(x) && x > 0 ? x : Watermark.#DEFAULT_GAP.x,
-            y: Number.isFinite(y) && y > 0 ? y : Watermark.#DEFAULT_GAP.y
+            y: Number.isFinite(y) && y > 0 ? y : Watermark.#DEFAULT_GAP.y,
         };
     }
 
@@ -265,7 +273,7 @@ class Watermark {
             weight: this.#font.weight,
             // Шрифт и цвет палитры берём из вычисленного стиля: канва наследование не умеет
             family: optionOr(this.#font.family, style.fontFamily),
-            color: optionOr(this.#font.color, style.color)
+            color: optionOr(this.#font.color, style.color),
         };
     }
 
@@ -283,7 +291,7 @@ class Watermark {
             return this;
         }
         const pixel_ratio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
-        const tile = {x: this.#gap.x, y: this.#gap.y};
+        const tile = { x: this.#gap.x, y: this.#gap.y };
         // Плитка = две метки по каждой оси: на стыках соседних плиток рисунок сходится
         const canvas = document.createElement("canvas");
         canvas.width = Math.round(tile.x * 2 * pixel_ratio);
@@ -330,4 +338,4 @@ class Watermark {
     }
 }
 
-exports.Watermark = Watermark
+exports.Watermark = Watermark;