wenay-react2 1.0.29 → 1.0.30

package/lib/common/src/components/Dnd/RNDFunc3.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { ObservableMap } from "../../utils/observableMap";
 type tPosition = {
     x: number;
     y: number;
@@ -46,7 +47,7 @@ type tDivRndBase = {
     children: React.ReactElement | ((update: number) => React.ReactElement);
     className?: string;
 };
-export declare const ExRNDMap3: Map<string, tRND>;
+export declare const ExRNDMap3: ObservableMap<string, tRND>;
 export declare const DivRnd3: typeof DivRndBase3;
 /**
  * Wrapper component around react-rnd.

package/lib/common/src/components/Dnd/RNDFunc3.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
 import { renderBy, updateBy } from "../../../updateBy";
-// Map of all popup window sizes
-export const ExRNDMap3 = new Map();
+import { ObservableMap } from "../../utils/observableMap";
+// Map of all popup window sizes; observable - Cash marks itself dirty on its mutations
+export const ExRNDMap3 = new ObservableMap();
 // limit={{x:{min:0}, y:{min:0}}}
 let k = 0;
 const openWindows = { ar: [] };
@@ -97,6 +98,10 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             document.removeEventListener("mousemove", mouseMoveHandler);
             lastC.current = null;
             setA(false);
+            // drag end commits geometry mutated in place - invisible to the map, so announce
+            // it; a no-move click also lands here, the save-side diff turns that into a no-op
+            if (ks)
+                ExRNDMap3.touch(ks);
         };
         // Touch
         const touchMoveHandler = (e) => {
@@ -141,6 +146,8 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 document.removeEventListener("touchend", touchEndHandler);
                 document.removeEventListener("touchmove", touchMoveHandler);
                 setB(false);
+                if (ks)
+                    ExRNDMap3.touch(ks);
             }
         };
         // If mouse dragging mode is active
@@ -227,6 +234,8 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             setHeight(elementRef.offsetHeight);
             setWidth(elementRef.offsetWidth);
             setUpdate(update + 1);
+            if (ks)
+                ExRNDMap3.touch(ks);
         }, onResize: (e, dir, elementRef, delta, pos) => {
             onUpdate?.({ e, dir, elementRef, delta, position: pos });
         }, position: { x, y }, size: { width, height }, default: {

package/lib/common/src/components/Dnd/Resizable.d.ts

@@ -1,9 +1,10 @@
 import { ResizableProps } from "re-resizable";
+import { ObservableMap } from "../../utils/observableMap";
 type tSaveMap = {
     height?: number | string;
     width?: number | string;
 };
-export declare const mapResiReact: Map<string, tSaveMap>;
+export declare const mapResiReact: ObservableMap<string, tSaveMap>;
 type t3 = Pick<ResizableProps, "style" | "enable" | "onResize" | "children" | "size" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight">;
 export declare function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size, minWidth, minHeight, maxWidth, maxHeight, moveWith, moveHeight }: t3 & {
     keyForSave?: string;

package/lib/common/src/components/Dnd/Resizable.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Resizable } from "re-resizable";
-// Memory for all column sizes
-export const mapResiReact = new Map();
+import { ObservableMap } from "../../utils/observableMap";
+// Memory for all column sizes; observable - Cash marks itself dirty on its mutations
+export const mapResiReact = new ObservableMap();
 export function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size = { height: 50, width: 50 }, minWidth, minHeight, maxWidth = "100%", maxHeight = "100%", moveWith = true, moveHeight = true }) {
     let obj = size;
     if (keyForSave) {
@@ -30,6 +31,9 @@ export function FResizableReact({ style, onResize, enable, children, keyForSave,
                     obj.height = elementRef.style.height;
                 }
             // onResize?.(size)
+            // obj is mutated in place - invisible to the map, so announce it
+            if (keyForSave)
+                mapResiReact.touch(keyForSave);
             onResizeStop?.(obj);
             // this.Refresh()
         }, size: obj, defaultSize: obj, maxWidth: maxWidth, maxHeight: maxHeight, minWidth: minWidth, minHeight: minHeight, children: children });

package/lib/common/src/components/Menu/RightMenu.js

@@ -67,6 +67,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
         setPosition(nextPosition);
         setIsTop(toTop);
         if (keyForSave) {
+            // mapRightMenu is observable: set() itself marks the cache dirty
             mapRightMenu.set(keyForSave, {
                 position: nextPosition,
                 position2: toTop ? 'top' : 'bottom',

package/lib/common/src/components/Menu/RightMenuStore.d.ts

@@ -8,4 +8,5 @@ export type MenuRightSavedState = {
         y: number;
     };
 };
-export declare const mapRightMenu: Map<string, MenuRightSavedState>;
+import { ObservableMap } from "../../utils/observableMap";
+export declare const mapRightMenu: ObservableMap<string, MenuRightSavedState>;

package/lib/common/src/components/Menu/RightMenuStore.js

@@ -1 +1,3 @@
-export const mapRightMenu = new Map();
+import { ObservableMap } from "../../utils/observableMap";
+// observable - Cash marks itself dirty on its mutations (drag end re-set()s the state)
+export const mapRightMenu = new ObservableMap();

package/lib/common/src/components/UiSlot/UiSlot.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
- *  Persistence rides the existing staticProps -> Cash mechanics: the app calls Cash.load()/save()
- *  the same way it does for window state (ExRNDMap3 etc.).
+ *  Persistence rides the existing staticProps -> Cash mechanics: staticProps is observable,
+ *  setPlace announces its in-place mutation (staticMarkDirty), the app decides when to save
+ *  via Cash.onDirty - same as window state (ExRNDMap3 etc.).
  *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
  *  the persisted place with its own and renders children only on a match. */
 export declare function createUiSlot<Places extends string>(opts: {

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

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { renderBy, updateBy } from "../../../updateBy";
-import { staticGetAdd } from "../../utils/mapMemory";
+import { staticGetAdd, staticMarkDirty } from "../../utils/mapMemory";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
- *  Persistence rides the existing staticProps -> Cash mechanics: the app calls Cash.load()/save()
- *  the same way it does for window state (ExRNDMap3 etc.).
+ *  Persistence rides the existing staticProps -> Cash mechanics: staticProps is observable,
+ *  setPlace announces its in-place mutation (staticMarkDirty), the app decides when to save
+ *  via Cash.onDirty - same as window state (ExRNDMap3 etc.).
  *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
  *  the persisted place with its own and renders children only on a match. */
 export function createUiSlot(opts) {
@@ -16,6 +17,7 @@ export function createUiSlot(opts) {
             return;
         st.place = p;
         renderBy(st);
+        staticMarkDirty(opts.key);
     };
     function Slot(p) {
         updateBy(st);

package/lib/common/src/utils/cache.d.ts

@@ -1,3 +1,4 @@
+export type tDirtyListener = (scope?: string, key?: string) => void;
 export interface IServerSaveBasePromise {
     set(key: string, value: object): Promise<boolean>;
     get<T extends (object)>(key: string): Promise<T | null>;
@@ -23,6 +24,12 @@ export declare function CacheFuncMapBase(arr: [k: string, v: Map<string, unknown
     saveDebounced(delay?: number): void;
     flush(): Promise<void>;
     clear(): Promise<void>;
+    /** Manual announcement for state the observable maps cannot see (plain Map entries). */
+    markDirty: (scope?: string, key?: string) => void;
+    /** Subscribe to this instance's dirty events (coalesced, async); returns unsubscribe. */
+    onDirty(cb: tDirtyListener): () => void;
+    /** Cheap hint (e.g. a beforeunload guard); the save diff is the source of truth. */
+    isDirty(): boolean;
     getArr: [k: string, v: Map<string, unknown>][];
 };
 export declare function CacheFuncMap(arr: [k: string, v: Map<string, unknown>][]): {
@@ -31,5 +38,11 @@ export declare function CacheFuncMap(arr: [k: string, v: Map<string, unknown>][]
     saveDebounced(delay?: number): void;
     flush(): Promise<void>;
     clear(): Promise<void>;
+    /** Manual announcement for state the observable maps cannot see (plain Map entries). */
+    markDirty: (scope?: string, key?: string) => void;
+    /** Subscribe to this instance's dirty events (coalesced, async); returns unsubscribe. */
+    onDirty(cb: tDirtyListener): () => void;
+    /** Cheap hint (e.g. a beforeunload guard); the save diff is the source of truth. */
+    isDirty(): boolean;
     getArr: [k: string, v: Map<string, unknown>][];
 };

package/lib/common/src/utils/index.d.ts

@@ -4,4 +4,5 @@ export * from './cache';
 export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './mapMemory';
+export * from './observableMap';
 export * from './pageVisibilityContext';

package/lib/common/src/utils/index.js

@@ -4,4 +4,5 @@ export * from './cache';
 export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './mapMemory';
+export * from './observableMap';
 export * from './pageVisibilityContext';

package/lib/common/src/utils/mapMemory.d.ts

@@ -1,3 +1,4 @@
+import { ObservableMap } from "./observableMap";
 export declare function staticSet(key: any, data: object): void;
 export declare function staticGet(key: any): object | undefined;
 export declare function deepMergeWithMap(target: any, source: any, visited?: Map<any, any>): any;
@@ -6,6 +7,13 @@ export declare function staticGetAdd<T extends object>(key: any, def: T, options
     deepAutoMerge?: boolean;
     reversDeep?: boolean;
 }): T;
+/** Announce a direct in-place mutation of an object taken from staticGetAdd - such
+ *  mutations are invisible to map methods. staticSet/staticGetAdd need no announcement:
+ *  their set() calls are observed by Cash automatically. */
+export declare function staticMarkDirty(key: any): void;
+/** App-facing change of a persisted staticProps entry in one call:
+ *  mutate + rerender subscribers + mark the cache dirty. No-op if the key is absent. */
+export declare function staticUpdate<T extends object>(key: any, mutate: (cur: T) => void): T | undefined;
 export declare function staticGetById<T extends object>(key: any, def: T, id: string | number): T;
 export declare const Cash: {
     load(): Promise<void>;
@@ -13,10 +21,13 @@ export declare const Cash: {
     saveDebounced(delay?: number): void;
     flush(): Promise<void>;
     clear(): Promise<void>;
+    markDirty: (scope?: string, key?: string) => void;
+    onDirty(cb: import("./cache").tDirtyListener): () => void;
+    isDirty(): boolean;
     getArr: [k: string, v: Map<string, unknown>][];
 };
 export declare const MemoryMap: {
-    rnd: Map<string, {
+    rnd: ObservableMap<string, {
         position: {
             x: number;
             y: number;
@@ -26,10 +37,10 @@ export declare const MemoryMap: {
             width: number | string;
         };
     }>;
-    resize: Map<string, {
+    resize: ObservableMap<string, {
         height?: number | string;
         width?: number | string;
     }>;
-    rightMenu: Map<string, import("../components/Menu/RightMenuStore").MenuRightSavedState>;
-    other: Map<string, object>;
+    rightMenu: ObservableMap<string, import("../components/Menu/RightMenuStore").MenuRightSavedState>;
+    other: ObservableMap<string, object>;
 };

package/lib/common/src/utils/mapMemory.js

@@ -1,9 +1,12 @@
 import { deepClone } from "wenay-common2";
+import { renderBy } from "../../updateBy";
 import { ExRNDMap3 } from "../components/Dnd/RNDFunc3";
 import { mapResiReact } from "../components/Dnd/Resizable";
 import { mapRightMenu } from "../components/Menu/RightMenuStore";
 import { CacheFuncMap } from "./cache";
-const staticProps = new Map();
+import { ObservableMap } from "./observableMap";
+// observable - Cash marks itself dirty on its mutations
+const staticProps = new ObservableMap();
 export function staticSet(key, data) {
     if (!staticProps.has(key))
         staticProps.set(key, data);
@@ -52,6 +55,23 @@ export function staticGetAdd(key, def, options = { reversDeep: false }) {
     const t = (staticProps.has(key) ? staticProps.get(key) : staticProps.set(key, def).get(key));
     return t; // Object.assign(def, t) // t //
 }
+/** Announce a direct in-place mutation of an object taken from staticGetAdd - such
+ *  mutations are invisible to map methods. staticSet/staticGetAdd need no announcement:
+ *  their set() calls are observed by Cash automatically. */
+export function staticMarkDirty(key) {
+    staticProps.touch(typeof key == "string" ? key : undefined);
+}
+/** App-facing change of a persisted staticProps entry in one call:
+ *  mutate + rerender subscribers + mark the cache dirty. No-op if the key is absent. */
+export function staticUpdate(key, mutate) {
+    const cur = staticProps.get(key);
+    if (cur === undefined)
+        return undefined;
+    mutate(cur);
+    renderBy(cur);
+    staticMarkDirty(key);
+    return cur;
+}
 export function staticGetById(key, def, id) {
     const stored = staticProps.get(key);
     if (!stored || stored.__id !== id) {

package/lib/common/src/utils/observableMap.d.ts

@@ -0,0 +1,17 @@
+/** Map that announces its own mutations. The persisted-state maps (ExRNDMap3, mapResiReact,
+ *  mapRightMenu, staticProps) are ObservableMap instances, so the dirty signal originates in
+ *  the data layer itself: set/delete/clear emit automatically, touch(key) announces an
+ *  in-place mutation of a stored object (invisible to map methods). CacheFuncMapBase
+ *  subscribes to the maps it owns - mutation sites never talk to the cache directly. */
+export type tMapChangeListener<K> = (key?: K) => void;
+export declare class ObservableMap<K, V> extends Map<K, V> {
+    private listeners?;
+    /** Subscribe to mutations (set/delete/clear/touch); returns unsubscribe. */
+    onChange(cb: tMapChangeListener<K>): () => void;
+    /** Announce an in-place mutation of a stored value. */
+    touch(key?: K): void;
+    private emit;
+    set(key: K, value: V): this;
+    delete(key: K): boolean;
+    clear(): void;
+}

package/lib/common/src/utils/observableMap.js

@@ -0,0 +1,40 @@
+/** Map that announces its own mutations. The persisted-state maps (ExRNDMap3, mapResiReact,
+ *  mapRightMenu, staticProps) are ObservableMap instances, so the dirty signal originates in
+ *  the data layer itself: set/delete/clear emit automatically, touch(key) announces an
+ *  in-place mutation of a stored object (invisible to map methods). CacheFuncMapBase
+ *  subscribes to the maps it owns - mutation sites never talk to the cache directly. */
+export class ObservableMap extends Map {
+    // no initializer: Map's constructor calls this.set() before class fields are assigned
+    listeners;
+    /** Subscribe to mutations (set/delete/clear/touch); returns unsubscribe. */
+    onChange(cb) {
+        (this.listeners ??= new Set()).add(cb);
+        return () => { this.listeners?.delete(cb); };
+    }
+    /** Announce an in-place mutation of a stored value. */
+    touch(key) { this.emit(key); }
+    emit(key) {
+        if (!this.listeners?.size)
+            return;
+        // copy before iterating: an unsubscribe from inside a callback must not skip the rest
+        for (const cb of [...this.listeners])
+            cb(key);
+    }
+    set(key, value) {
+        super.set(key, value);
+        this.emit(key);
+        return this;
+    }
+    delete(key) {
+        const existed = super.delete(key);
+        if (existed)
+            this.emit(key);
+        return existed;
+    }
+    clear() {
+        const hadEntries = this.size > 0;
+        super.clear();
+        if (hadEntries)
+            this.emit();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",