chuijs 4.0.2 → 4.0.4

package/framework/modules/chui_logger/chui_logger.js

@@ -1,54 +1,73 @@
-const path = require('path');
-const {app} = require("electron")
-const fs= require('fs');
+const path = require("path");
+const { app } = require("electron");
+const fs = require("fs");
 
 class Logger {
-    constructor() { }
+    constructor() {}
     #generatedMessage(message, type = String()) {
-        let date = new Date().toLocaleString()
-        if (process && process.type === 'renderer') {
-            return `[${date}] [${type}] [render] > ${message}`
+        const date = new Date().toLocaleString();
+        if (process && process.type === "renderer") {
+            return `[${date}] [${type}] [render] > ${message}`;
         } else {
-            return `[${date}] [${type}] [main] > ${message}`
+            return `[${date}] [${type}] [main] > ${message}`;
         }
     }
     info(message) {
-        const type = "info"
-        console.info(this.#generatedMessage(message, type))
-        if (process && process.type === 'renderer') {
-            require("electron").ipcRenderer.send("SEND_LOG_TEXT", this.#generatedMessage(message, type), type)
+        const type = "info";
+        console.info(this.#generatedMessage(message, type));
+        if (process && process.type === "renderer") {
+            require("electron").ipcRenderer.send("SEND_LOG_TEXT", this.#generatedMessage(message, type), type);
         } else {
-            this.#writeLog(this.#generatedMessage(message, type))
+            this.#writeLog(this.#generatedMessage(message, type));
         }
     }
     error(message) {
-        const type = "error"
-        console.error(this.#generatedMessage(message, type))
-        if (process && process.type === 'renderer') {
-            require("electron").ipcRenderer.send("SEND_LOG_TEXT", this.#generatedMessage(message, type), type)
+        const type = "error";
+        console.error(this.#generatedMessage(message, type));
+        if (process && process.type === "renderer") {
+            require("electron").ipcRenderer.send("SEND_LOG_TEXT", this.#generatedMessage(message, type), type);
         } else {
-            this.#writeLog(this.#generatedMessage(message, type))
+            this.#writeLog(this.#generatedMessage(message, type));
         }
     }
     #writeLog(text) {
-        let today = new Date().toLocaleDateString().replace("/", ".")
-        let log_dir_path = path.join(app.getPath("userData"), "logs")
-        let log_file_path = path.join(log_dir_path, `app_${today}.log`)
+        const today = new Date().toLocaleDateString().replace("/", ".");
+        const logDirPath = path.join(app.getPath("userData"), "logs");
+        const logFilePath = path.join(logDirPath, `app_${today}.log`);
 
-        if (!fs.existsSync(log_dir_path)) {
-            fs.mkdirSync(log_dir_path, { recursive: true });
-            fs.writeFileSync(log_file_path, "", "utf-8");
+        if (!fs.existsSync(logDirPath)) {
+            fs.mkdirSync(logDirPath, { recursive: true });
+            fs.writeFileSync(logFilePath, "", "utf-8");
         }
 
-        fs.writeFile(log_file_path, `${text}\n`, { flag: 'a+' }, err => {
+        fs.writeFile(logFilePath, `${text}\n`, { flag: "a+" }, (err) => {
             if (err) console.error(err);
         });
     }
 }
 
 class Log {
-    static info(message) { return new Logger().info(message) }
-    static error(message) { return new Logger().error(message) }
+    static info(message) {
+        return new Logger().info(message);
+    }
+    static error(message) {
+        return new Logger().error(message);
+    }
+}
+
+/**
+ * Ошибка сервиса не должна исчезать в `catch {}`: её отдают колбэку `onError` компонента, а без
+ * колбэка пишут в лог. Молчание обходилось дорого: панель истории буфера при сбое оставалась
+ * пустой без единого слова о причине, а переключатель темы показывал режим, который не
+ * применился.
+ */
+function reportError(error, onError = undefined) {
+    if (typeof onError === "function") {
+        onError(error);
+        return;
+    }
+    Log.error(error);
 }
 
-exports.Log = Log
+exports.Log = Log;
+exports.reportError = reportError;

package/framework/modules/chui_page/page.js

@@ -1,55 +1,56 @@
-let {Animation} = require('../chui_animations/animations');
-const {Route} = require("../../appLayout/default/chui_app_layout");
-const {Button} = require("../../components/chui_button/button");
-const {Icon} = require("../../components/chui_icons/icons");
-
+const { Animation } = require("../chui_animations/animations");
+const { Route } = require("../../appLayout/default/chui_app_layout");
+const { Button } = require("../../components/chui_button/button");
+const { Icon } = require("../../components/chui_icons/icons");
 
 class Page {
-    #page = document.createElement('page');
+    #page = document.createElement("page");
     #title = undefined;
     #icon = undefined;
     #main = false;
-    #menu_bar = undefined;
+    #menuBar = undefined;
     constructor() {
-        require('../chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Page")
+        require("../chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Page");
     }
     setBackButton(options = { title: "", icon: undefined, reverse: false, page: undefined }) {
-        let back = new Button({
-            title: options.title, icon: options.icon, reverse: options.reverse,
-            clickEvent: () => new Route().go(options.page)
-        })
+        const back = new Button({
+            title: options.title,
+            icon: options.icon,
+            reverse: options.reverse,
+            clickEvent: () => new Route().go(options.page),
+        });
         this.#page.appendChild(back.set());
     }
     setMenuBar(menubar) {
-        this.#menu_bar = menubar.set();
+        this.#menuBar = menubar.set();
     }
     getMenuBar() {
-        return this.#menu_bar;
+        return this.#menuBar;
     }
     addRouteEvent(self, event = () => {}) {
-        let event_name = "route_event_"+self.constructor.name
-        document.addEventListener(event_name, event)
-        setTimeout(() => document.removeEventListener(event_name, event), 100)
+        const eventName = "route_event_" + self.constructor.name;
+        document.addEventListener(eventName, event);
+        setTimeout(() => document.removeEventListener(eventName, event), 100);
     }
     add(...components) {
-        for (let component of components) {
-            new Animation(component.set()).fadeIn()
+        for (const component of components) {
+            new Animation(component.set()).fadeIn();
             this.#page.appendChild(component.set());
         }
     }
     remove(...components) {
-        for (let component of components) {
-            new Animation(component.set()).fadeOutAndRemove()
+        for (const component of components) {
+            new Animation(component.set()).fadeOutAndRemove();
         }
     }
     setFullHeight() {
-        this.#page.style.height = '-webkit-fill-available';
+        this.#page.style.height = "-webkit-fill-available";
     }
     setFullWidth() {
-        this.#page.style.width = '-webkit-fill-available';
+        this.#page.style.width = "-webkit-fill-available";
     }
     disablePadding() {
-        this.#page.style.padding = '0px';
+        this.#page.style.padding = "0px";
     }
     setIcon(icon) {
         this.#icon = new Icon(icon, "13pt").getHTML();
@@ -69,19 +70,24 @@ class Page {
     getMain() {
         return this.#main;
     }
-    getMediaStream(options = {
-        video: false, // or { width: 1280, height: 720 }
-        audio: false
-    }) {
+    getMediaStream(
+        options = {
+            video: false, // or { width: 1280, height: 720 }
+            audio: false,
+        }
+    ) {
         return new Promise((resolve, reject) => {
-            navigator.mediaDevices.getUserMedia(options).then(stream => {
-                resolve(stream);
-            }).catch(reject);
-        })
+            navigator.mediaDevices
+                .getUserMedia(options)
+                .then((stream) => {
+                    resolve(stream);
+                })
+                .catch(reject);
+        });
     }
     render() {
         return this.#page;
     }
 }
 
-exports.Page = Page
+exports.Page = Page;

package/framework/modules/chui_palette/palette.js

@@ -0,0 +1,61 @@
+/**
+ * Палитра приложения для кода: канва и готовые наборы цветов не могут взять CSS-переменную,
+ * поэтому им нужны сами значения. Цвет заводится один раз — в теме
+ * (`main_theme_style.css`, ключи `--<имя>_prime_background`), а здесь та же таблица
+ * повторена для JS: сверка палитры (`npm run palette:check`) и сторож ключей
+ * (`test/chui_tokens.test.js`) требуют, чтобы таблица совпадала с темой, — иначе цвет
+ * разошёлся бы между холстом и вёрсткой.
+ *
+ * Схему модуль выбирает сам (`prefers-color-scheme`): цвет графика обязан совпадать с тем,
+ * что нарисовано вокруг, поэтому в светлой схеме берётся светлая колонка таблицы.
+ *
+ * ```javascript
+ * paletteColor("blue");                    // «#007aff» в светлой схеме, «#0a84ff» в тёмной
+ * paletteColor("gray", { alpha: 0.25 });   // сетка графика: тот же серый акцент, но тише
+ * paletteColor("green", { scheme: "light" });
+ * ```
+ */
+const ACCENTS = {
+    red: { light: "#ff3b30", dark: "#ff453a" },
+    orange: { light: "#ff9500", dark: "#ff9f0a" },
+    yellow: { light: "#ffcc00", dark: "#ffd60a" },
+    green: { light: "#34c759", dark: "#30d158" },
+    mint: { light: "#00c7be", dark: "#63e6e2" },
+    teal: { light: "#30b0c7", dark: "#40c8e0" },
+    cyan: { light: "#32ade6", dark: "#64d2ff" },
+    blue: { light: "#007aff", dark: "#0a84ff" },
+    indigo: { light: "#5856d6", dark: "#5e5ce6" },
+    purple: { light: "#af52de", dark: "#bf5af2" },
+    pink: { light: "#ff2d55", dark: "#ff375f" },
+    brown: { light: "#a2845e", dark: "#ac8e68" },
+    gray: { light: "#8e8e93", dark: "#98989d" },
+};
+
+/** Имена таблицы акцентов — в том же порядке, что в теме */
+function paletteNames() {
+    return Object.keys(ACCENTS);
+}
+
+/** Схема окна: у канвы нет своей, она обязана совпадать с вёрсткой вокруг */
+function paletteScheme() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+/**
+ * Цвет акцента палитры: `alpha` (0…1) даёт полупрозрачную запись того же цвета —
+ * так рисуется сетка графика и дорожка шкалы.
+ */
+function paletteColor(name = "blue", options = {}) {
+    const { alpha = 1, scheme = paletteScheme() } = options;
+    const accent = ACCENTS[name];
+    if (accent === undefined) throw new Error("нет такого цвета в палитре: " + name);
+    const hex = accent[scheme] ?? accent.light;
+    if (alpha >= 1) return hex;
+    const [r, g, b] = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+exports.paletteNames = paletteNames;
+exports.paletteScheme = paletteScheme;
+exports.paletteColor = paletteColor;