wenay-react2 1.0.38 → 1.0.40

package/lib/common/src/components/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { listen as createListen } from 'wenay-common2';
-import { renderBy, updateBy } from '../../../updateBy';
+import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
 import { OutsideClickArea } from '../../hooks/useOutside';
 import { useReorder } from '../../hooks/useReorder';
@@ -12,6 +12,7 @@ const densities = { list: [
         { key: 'icon', name: 'Icons', renderItem: itemIconOnly },
         { key: 'label', name: 'Icons + labels' },
     ] };
+const densitiesApi = createUpdateApi(densities);
 /** Icon with a text fallback: no glyph = the first letters of short/title
  *  (an "PR"-style pseudo-icon), so icon densities work for icon-less items. */
 export function toolbarItemIcon(item) {
@@ -30,12 +31,12 @@ export function registerToolbarDensity(d) {
         densities.list.push(d);
     else
         densities.list.splice(i, 1, d);
-    renderBy(densities);
+    densitiesApi.render();
     return function offToolbarDensity() {
         const j = densities.list.indexOf(d);
         if (j != -1) {
             densities.list.splice(j, 1);
-            renderBy(densities);
+            densitiesApi.render();
         }
     };
 }
@@ -55,6 +56,49 @@ function itemContent(item, densityKey) {
  *  order (the gear always sits at the bar edge), but toggleable like an item. */
 const SETTINGS_KEY = '__settings';
 const RESET_KEY = '__reset';
+function useToolbarFlip(layoutKey) {
+    const itemRefs = useRef(new Map());
+    const prevRects = useRef(new Map());
+    const rafs = useRef([]);
+    useLayoutEffect(() => {
+        const prev = prevRects.current;
+        const next = new Map();
+        rafs.current.forEach(cancelAnimationFrame);
+        rafs.current = [];
+        itemRefs.current.forEach((node, key) => {
+            const rect = node.getBoundingClientRect();
+            next.set(key, { left: rect.left, top: rect.top });
+            const old = prev.get(key);
+            if (old == null)
+                return;
+            const dx = old.left - rect.left;
+            const dy = old.top - rect.top;
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                return;
+            node.style.transition = 'none';
+            node.style.transform = `translate(${dx}px, ${dy}px)`;
+            node.getBoundingClientRect();
+            const raf = requestAnimationFrame(() => {
+                node.style.transition = 'transform 180ms ease';
+                node.style.transform = '';
+            });
+            rafs.current.push(raf);
+        });
+        prevRects.current = next;
+        return () => {
+            rafs.current.forEach(cancelAnimationFrame);
+            rafs.current = [];
+        };
+    }, [layoutKey]);
+    return function bind(key) {
+        return (node) => {
+            if (node)
+                itemRefs.current.set(key, node);
+            else
+                itemRefs.current.delete(key);
+        };
+    };
+}
 export function createToolbar(opts) {
     const resetDefaultVisible = () => opts.resetItem !== false && opts.resetItem?.defaultVisible === true;
     const defConfig = () => ({
@@ -63,6 +107,7 @@ export function createToolbar(opts) {
         density: opts.def?.density ?? densities.list[0].key,
     });
     const st = memoryGetOrCreate(opts.key, defConfig());
+    const stApi = createUpdateApi(st);
     const [emitChange, onChange] = createListen();
     // ext is fixed for the controller's lifetime, so hook call order inside
     // useConfig/Bar/Settings never changes for a given toolbar instance
@@ -137,7 +182,7 @@ export function createToolbar(opts) {
                 [RESET_KEY]: metaVisible(next, RESET_KEY, resetDefaultVisible()),
             };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             ext.setConfig({ order: next.order.slice(), visible });
             // the source's own onChange already re-emitted; emit only when it can't
@@ -153,7 +198,7 @@ export function createToolbar(opts) {
             st.order = next.order.slice();
             st.visible = { ...next.visible };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             const orderChanged = !sameOrder(curSourceOrder, nextSourceOrder);
             if (orderChanged)
@@ -168,7 +213,7 @@ export function createToolbar(opts) {
             st.order = next.order.slice();
             st.visible = { ...next.visible };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             emitChange(normalize());
         }
@@ -176,7 +221,7 @@ export function createToolbar(opts) {
     const getConfig = () => normalize();
     /** subscription to everything the toolbar renders from (hook) */
     function useSubscribe() {
-        updateBy(st);
+        stApi.use();
         ext?.useConfig(); // ext is per-instance constant - hook order is stable
     }
     function useConfig() {
@@ -191,7 +236,7 @@ export function createToolbar(opts) {
      *  someone else's nodes.) */
     function useItems() {
         useSubscribe();
-        updateBy(densities);
+        densitiesApi.use();
         const cfg = normalize();
         const byKey = new Map(opts.items.map(i => [i.key, i]));
         return cfg.order
@@ -238,18 +283,18 @@ export function createToolbar(opts) {
      *  the popover sticks to - 'right' (default, for bars in a top-right corner)
      *  or 'left'. */
     function Bar(p = {}) {
-        useSubscribe();
-        updateBy(densities);
+        const items = useItems();
         const cfg = normalize();
         const [open, setOpen] = useState(false);
-        const byKey = new Map(opts.items.map(i => [i.key, i]));
         const resetOn = opts.resetItem !== false && (p.reset ?? p.settings ?? false) && cfg.visible[RESET_KEY] != false;
-        return _jsxs("div", { className: p.className ?? 'wenayTb', children: [cfg.order.map(k => {
-                    const it = byKey.get(k);
-                    if (!it || cfg.visible[k] == false)
-                        return null;
-                    return _jsx("div", { className: 'wenayTbItem', title: cfg.density == 'icon' ? it.title : undefined, onClick: it.onClick, children: itemContent(it, cfg.density) }, k);
-                }), resetOn && _jsx("div", { className: 'wenayTbItem', title: resetTitle(), onClick: () => reset(), children: resetIcon() }), p.settings && cfg.visible[SETTINGS_KEY] != false && _jsxs(OutsideClickArea, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
+        const settingsOn = !!p.settings && cfg.visible[SETTINGS_KEY] != false;
+        const layoutKey = [
+            ...items.map(x => `${x.item.key}:${x.density}`),
+            resetOn ? `${RESET_KEY}:on` : '',
+            settingsOn ? `${SETTINGS_KEY}:on` : '',
+        ].join('|');
+        const bindFlip = useToolbarFlip(layoutKey);
+        return _jsxs("div", { className: p.className ?? 'wenayTb', children: [items.map(x => _jsx("div", { ref: bindFlip(x.item.key), className: 'wenayTbItem', title: x.density == 'icon' ? x.item.title : undefined, onClick: x.item.onClick, children: x.content }, x.item.key)), resetOn && _jsx("div", { ref: bindFlip(RESET_KEY), className: 'wenayTbItem', title: resetTitle(), onClick: () => reset(), children: resetIcon() }), settingsOn && _jsxs(OutsideClickArea, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { ref: bindFlip(SETTINGS_KEY), className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
     }
     /** The pure editor over config: density segments + one row per item
      *  (visibility checkbox, icon preview, title, drag handle). Reorder rides the
@@ -260,7 +305,7 @@ export function createToolbar(opts) {
      *  Plus arrow keys on the focused handle; fixed rows have neither. */
     function Settings(p = {}) {
         useSubscribe();
-        updateBy(densities);
+        densitiesApi.use();
         const cfg = normalize();
         const base = p.className ?? 'wenaySegBtn';
         const activeCls = p.activeClassName ?? 'wenaySegBtnActive';

package/lib/common/src/components/UiSlot/UiSlot.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
  *  Persistence rides the existing memoryProps -> memoryCache mechanics: memoryProps is observable,
@@ -9,6 +9,7 @@ import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
  *  the persisted place with its own and renders children only on a match. */
 export function createUiSlot(opts) {
     const st = memoryGetOrCreate(opts.key, { place: opts.def });
+    const stApi = createUpdateApi(st);
     // a stored place may no longer exist after an app update - fall back to def
     const isPlace = (p) => typeof p == "string" && p in opts.places;
     const getPlace = () => isPlace(st.place) ? st.place : opts.def;
@@ -16,16 +17,16 @@ export function createUiSlot(opts) {
         if (st.place == p)
             return;
         st.place = p;
-        renderBy(st);
+        stApi.render();
         memoryMarkDirty(opts.key);
     };
     function Slot(p) {
-        updateBy(st);
+        stApi.use();
         return getPlace() == p.place ? _jsx(_Fragment, { children: p.children }) : null;
     }
     /** Segmented row over opts.places; apps pass their own .chip / .chipActive classes */
     function PlacementSetting(p = {}) {
-        updateBy(st);
+        stApi.use();
         const cur = getPlace();
         const base = p.className ?? "wenaySegBtn";
         const activeCls = p.activeClassName ?? "wenaySegBtnActive";

package/lib/common/src/grid/columnState/ColumnDots.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ColumnStateController } from './columnState';
 export declare function ColumnDots(p: {
     state: ColumnStateController;
-    /** max simultaneous dots (default 4) */
+    /** max simultaneous dots (default 8) */
     max?: number;
     className?: string;
     style?: React.CSSProperties;

package/lib/common/src/grid/columnState/ColumnDots.js

@@ -25,7 +25,7 @@ export function ColumnDots(p) {
     const cfg = p.state.api.useConfig();
     const cols = p.state.columns;
     const byKey = new Map(cols.map(c => [c.key, c]));
-    const max = p.max ?? 4;
+    const max = p.max ?? 8;
     const order = cfg.order;
     const n = order.length;
     const visibleKeys = order.filter(k => cfg.visible[k] != false);

package/lib/common/src/grid/columnState/ColumnsMenu.js

@@ -22,22 +22,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // comes back to life when the column returns. No ag-grid, no storage here.
 import { useRef } from 'react';
 import { useReorder } from '../../hooks/useReorder';
+function colsMenuClass(parts) {
+    return parts.filter(Boolean).join(' ');
+}
 function MenuButton(p) {
     const it = p.item;
     const disabled = it.state == 'disabled';
     const on = it.state == 'on';
+    const stateClass = disabled ? 'wenayColsMenuBtn_disabled' : on ? 'wenayColsMenuBtn_on' : 'wenayColsMenuBtn_off';
     const abbr = p.compact && it.icon == null
-        ? _jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }, children: (it.short ?? it.title).slice(0, 3) }) : null;
-    return _jsxs("div", { title: it.title, onClick: disabled ? undefined : e => p.onItem?.(it.key, e), onMouseDown: p.drag?.onMouseDown, onTouchStart: p.drag?.onTouchStart, style: {
-            position: 'relative', display: 'flex', alignItems: 'center', gap: 4,
-            padding: '3px 9px', borderRadius: 6, fontSize: 12, lineHeight: '16px',
-            whiteSpace: 'nowrap', cursor: disabled ? 'default' : 'pointer',
-            ...(disabled ? { border: '1px dashed #d0d7de', background: '#f6f8fa', color: '#c4ccd4' }
-                : on ? { border: '1px solid #24292f', background: '#24292f', color: '#fff' }
-                    : { border: '1px solid #d0d7de', background: '#fff', color: '#8c959f', textDecoration: 'line-through' }),
-            ...(it.fixed ? { boxShadow: '0 0 0 2px #eaeef2' } : null),
-            ...p.style,
-        }, children: [it.icon != null && _jsx("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: it.icon }), abbr, !p.compact && _jsx("span", { children: it.short ?? it.title }), it.marks != null && _jsx("span", { style: { fontSize: 9, opacity: 0.9 }, children: it.marks })] });
+        ? _jsx("span", { className: 'wenayColsMenuAbbr', children: (it.short ?? it.title).slice(0, 3) }) : null;
+    return _jsxs("div", { title: it.title, onClick: disabled ? undefined : e => p.onItem?.(it.key, e), onMouseDown: p.drag?.onMouseDown, onTouchStart: p.drag?.onTouchStart, className: colsMenuClass(['wenayColsMenuBtn', stateClass, it.fixed && 'wenayColsMenuBtn_fixed', p.className]), style: p.style, children: [it.icon != null && _jsx("span", { className: 'wenayColsMenuIcon', children: it.icon }), abbr, !p.compact && _jsx("span", { className: 'wenayColsMenuLabel', children: it.short ?? it.title }), it.marks != null && _jsx("span", { className: 'wenayColsMenuMarks', children: it.marks })] });
 }
 /** The presentation layer: renders the buttons in the given order, reports
  *  clicks (onItem) and drag-reorders (onMove) - never interprets either.
@@ -61,7 +56,7 @@ export function MenuStrip(p) {
             return;
         p.onItem?.(key, e);
     }
-    return _jsxs("div", { className: p.className, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', userSelect: 'none', ...p.style }, children: [_jsx("div", { ref: reorder.listRef, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }, children: p.items.map(it => {
+    return _jsxs("div", { className: colsMenuClass(['wenayColsMenu', p.className]), style: p.style, children: [_jsx("div", { ref: reorder.listRef, className: 'wenayColsMenuList', children: p.items.map(it => {
                     const r = reorder.item(it.key);
                     const drag = {
                         onMouseDown: (e) => {
@@ -70,12 +65,9 @@ export function MenuStrip(p) {
                         },
                         onTouchStart: r.props.onTouchStart,
                     };
-                    return _jsx(MenuButton, { item: it, onItem: onItem, drag: drag, compact: p.compact, style: {
-                            ...r.style,
-                            ...(r.dragging ? { zIndex: 3, boxShadow: '0 3px 10px rgba(0,0,0,0.35)' }
-                                : r.active ? { transition: 'transform 0.15s ease' } : null),
-                        } }, it.key);
-                }) }), !!p.tail?.length && _jsxs(_Fragment, { children: [_jsx("div", { style: { width: 1, alignSelf: 'stretch', margin: '1px 2px', background: '#d0d7de' } }), p.tail.map(it => _jsx(MenuButton, { item: it, onItem: p.onItem, compact: p.compact }, it.key))] })] });
+                    const dragClass = r.dragging ? 'wenayColsMenuBtn_dragging' : r.active ? 'wenayColsMenuBtn_shift' : undefined;
+                    return _jsx(MenuButton, { item: it, onItem: onItem, drag: drag, compact: p.compact, className: dragClass, style: r.style }, it.key);
+                }) }), !!p.tail?.length && _jsxs(_Fragment, { children: [_jsx("div", { className: 'wenayColsMenuDivider' }), p.tail.map(it => _jsx(MenuButton, { item: it, onItem: p.onItem, compact: p.compact }, it.key))] })] });
 }
 /** The binding layer: MenuStrip fed by a ColumnStateController. Buttons follow
  *  config.order (the grid mirror is free: both sides subscribe to the same

package/lib/common/src/grid/columnState/columnState.js

@@ -1,5 +1,5 @@
 import { listen as createListen } from 'wenay-common2';
-import { renderBy, updateBy } from '../../../updateBy';
+import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
 const SCHEMA_V = 1;
 /** Grid events that mean "the user changed the column layout / sort / filter". */
@@ -17,6 +17,7 @@ export function createColumnState(opts) {
         groups: opts.def?.groups ? { ...opts.def.groups } : Object.fromEntries(groupKeys.map(g => [g, groupMembers(g)])),
     });
     const st = memoryGetOrCreate(opts.key, defConfig());
+    const stApi = createUpdateApi(st);
     const [emitChange, onChange] = createListen();
     /** Runtime-only, never persisted: actual = which keys the attached grid has;
      *  gate = optional app-level availability over a stable grid schema (standards,
@@ -25,6 +26,7 @@ export function createColumnState(opts) {
         present: null,
         presentGate: null,
     };
+    const rtApi = createUpdateApi(rt);
     const keyMap = (keys) => keys ? Object.fromEntries(keys.map(k => [k, true])) : null;
     const sameMap = (a, b) => JSON.stringify(a) == JSON.stringify(b);
     function combinedPresent() {
@@ -42,14 +44,14 @@ export function createColumnState(opts) {
         if (sameMap(next, rt.present))
             return;
         rt.present = next;
-        renderBy(rt);
+        rtApi.render();
     }
     function setPresentGate(keys) {
         const next = keyMap(keys);
         if (sameMap(next, rt.presentGate))
             return;
         rt.presentGate = next;
-        renderBy(rt);
+        rtApi.render();
         applyToGrid();
     }
     const getPresent = combinedPresent;
@@ -60,7 +62,7 @@ export function createColumnState(opts) {
     };
     const passesPresentGate = (key) => !rt.presentGate || rt.presentGate[key] == true;
     function usePresent() {
-        updateBy(rt);
+        rtApi.use();
         return combinedPresent();
     }
     /** The persisted state may be stale or partial (older app version, columns
@@ -116,7 +118,7 @@ export function createColumnState(opts) {
         st.sort = next.sort ? { ...next.sort } : null;
         st.filter = { ...next.filter };
         st.groups = Object.fromEntries(Object.entries(next.groups).map(([g, keys]) => [g, keys.slice()]));
-        renderBy(st);
+        stApi.render();
         memoryMarkDirty(opts.key);
         if (!fromGrid)
             applyToGrid();
@@ -126,7 +128,7 @@ export function createColumnState(opts) {
     const setConfig = (next) => commit(next, false);
     const reset = () => commit(defConfig(), false);
     function useConfig() {
-        updateBy(st);
+        stApi.use();
         return normalize();
     }
     function show(key, on) {

package/lib/common/src/hooks/useKeyboard.js

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from "react";
-import { renderBy } from "../../updateBy";
+import { createUpdateApi } from "../../updateBy";
 import { listen as createListen } from "wenay-common2";
 export const keyboardState = {
     key: ""
 };
+const keyboardStateApi = createUpdateApi(keyboardState);
 const [emitKeyDown, keyboardListen] = createListen();
 export const keyboard = {
     get key() { return keyboardState.key; },
@@ -11,7 +12,7 @@ export const keyboard = {
     get() { return keyboardState.key; },
     clear() {
         keyboardState.key = "";
-        renderBy(keyboardState);
+        keyboardStateApi.render();
         emitKeyDown("", undefined);
     },
     reset() {
@@ -38,7 +39,7 @@ export function useKeyboard(options = {}) {
             if (!(event instanceof KeyboardEvent))
                 return;
             keyboardState.key = event.key;
-            renderBy(keyboardState);
+            keyboardStateApi.render();
             emitKeyDown(event.key, event);
             onKeyDownRef.current?.(event.key, event);
         };

package/lib/common/src/logs/logs.d.ts

@@ -1,92 +1,12 @@
-import { Params } from "wenay-common2";
-type LogInput<T extends object> = T & {
-    id: string;
-    var?: number;
-    time: Date;
-    txt: string;
-};
-declare const getSettingLogs: () => {
-    minVarLogs: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    minVarMessage: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    timeShow: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    show: {
-        name: string;
-        value: boolean;
-    };
-};
-export declare function getLogsApi<T extends object = {}>(setting: {
-    limit?: number;
-    limitPer: number;
-    varMin?: number;
-}): {
-    addLogs(a: LogInput<T>): void;
+import { getSettingLogs, type LogEntry, type LogsApiOptions } from "./logsController";
+export { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
+export type { CreateLogsControllerOptions, LogsApiOptions, LogsController, LogsControllerState, LogsFullState, LogsMiniState, } from "./logsController";
+export declare function getLogsApi<T extends object = {}>(setting: LogsApiOptions): {
+    addLogs: (input: import("./logsController").LogInput<T>) => LogEntry<T>;
     params: {
-        def: () => {
-            minVarLogs: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            minVarMessage: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            timeShow: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            show: {
-                name: string;
-                value: boolean;
-            };
-        };
-        get(): {
-            minVarLogs: number;
-            minVarMessage: number;
-            timeShow: number;
-            show: boolean;
-        } & {
-            readonly [key: number]: void;
-        };
-        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+        def: typeof getSettingLogs;
+        get(): import("./logsController").LogsSettings;
+        set(settings: import("./logsController").LogsSettings): void;
     };
     React: {
         Setting: typeof InputSettingLogs;
@@ -95,55 +15,16 @@ export declare function getLogsApi<T extends object = {}>(setting: {
     };
 };
 export declare const logsApi: {
-    addLogs(a: {
+    addLogs: (input: {
         id: string;
         var?: number;
         time: Date;
         txt: string;
-    }): void;
+    }) => LogEntry<{}>;
     params: {
-        def: () => {
-            minVarLogs: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            minVarMessage: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            timeShow: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            show: {
-                name: string;
-                value: boolean;
-            };
-        };
-        get(): {
-            minVarLogs: number;
-            minVarMessage: number;
-            timeShow: number;
-            show: boolean;
-        } & {
-            readonly [key: number]: void;
-        };
-        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+        def: typeof getSettingLogs;
+        get(): import("./logsController").LogsSettings;
+        set(settings: import("./logsController").LogsSettings): void;
     };
     React: {
         Setting: typeof InputSettingLogs;
@@ -163,4 +44,3 @@ export declare function MessageEventLogs({ zIndex }: {
 export declare function LogsPage({ update }: {
     update?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/common/src/logs/logs.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AgGridReact } from "ag-grid-react";
 import { useCallback, useEffect, useRef } from "react";
 import { copyToClipboard, Params, timeLocalToStr_hhmmss } from "wenay-common2";
 import { renderBy, updateBy } from "../../updateBy";
@@ -7,6 +6,9 @@ import { contextMenu } from "../menu/menuMouse";
 import { memoryGetOrCreate } from "../utils/memoryStore";
 import { ParamsEditor } from "../components/ParamsEditor";
 import { logDividerGradient, logSeverityBackground, logStyleTokens } from "./logStyles";
+import { AgGridTable, colDefCentered } from "../grid/agGrid4";
+import { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
+export { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
 const cashLogs = new Map();
 const datumConst = {
     map: cashLogs,
@@ -14,39 +16,25 @@ const datumConst = {
 const datumMiniConst = {
     last: []
 };
-const getSettingLogs = () => ({
-    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
-    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
-    timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
-    show: { name: "show", value: true }
-});
 const settingLogs = { params: Params.GetSimpleParams(getSettingLogs()) };
+const logGridDefaultColDef = { ...colDefCentered, wrapText: true };
 // varMin - minimum importance
 export function getLogsApi(setting) {
     const datum = memoryGetOrCreate("settingLogs", settingLogs);
-    function addToArr(arr, data, limit) {
-        arr.unshift(data);
-        if (arr.length > limit)
-            arr.length = limit;
-    }
-    let num = 0;
+    const controller = createLogsController({
+        options: setting,
+        state: createLogsControllerState({
+            full: datumConst,
+            mini: datumMiniConst,
+            settings: datum,
+        }),
+        onFullChange: () => renderBy(datumConst),
+        onMiniChange: () => renderBy(datumMiniConst),
+        onSettingsChange: () => renderBy(datum),
+    });
     return {
-        addLogs(a) {
-            const item = { ...a, num: num++ };
-            addToArr(datumMiniConst.last, item, setting.limit ?? 50);
-            addToArr(datumConst.map.get(a.id) ?? datumConst.map.set(a.id, []).get(a.id), item, setting.limitPer);
-            renderBy(datumConst);
-            renderBy(datumMiniConst);
-        },
-        params: {
-            def: getSettingLogs,
-            get() { return datum.params; },
-            set(a) {
-                datum.params = a;
-                renderBy(datumMiniConst);
-                renderBy(datumConst);
-            },
-        },
+        addLogs: controller.addLogs,
+        params: controller.params,
         React: {
             Setting: InputSettingLogs,
             Message: MessageEventLogs,
@@ -136,7 +124,7 @@ export function PageLogs({ update }) {
                 width: 150,
             },
         ];
-        return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact
+        return _jsx("div", { className: "maxSize", children: _jsx(AgGridTable
             // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
             , { 
                 // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
@@ -153,18 +141,11 @@ export function PageLogs({ update }) {
                         });
                     }
                 }, onSortChanged: (e) => {
-                }, defaultColDef: {
-                    headerClass: () => ("gridTable-header"),
-                    resizable: true,
-                    cellStyle: { textAlign: "center" },
-                    sortable: true,
-                    filter: true,
-                    wrapText: true,
-                }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
+                }, defaultColDef: logGridDefaultColDef, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
                     if (e.event instanceof MouseEvent && e.event.button == 2) {
                         contextMenu.openAt(e.event, [
                             {
-                                name: "copy", onClick: () => { copyToClipboard(e.value); }
+                                name: "copy", actionKey: "logs.copyCell", onClick: () => { copyToClipboard(e.value); }
                             }
                         ]);
                     }