reused retained atom code; tag 0.2.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webgpu-art/lagopus",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "module": "./lib/index.mjs",
   "scripts": {

src/main.mts

@@ -12,6 +12,7 @@ import { V3 } from "./primes.mjs";
 import { atomClearColor } from "./global.mjs";
 import { isMobile, parsedQuery } from "./config.mjs";
 import { setupRemoteControl } from "./remote-control.mjs";
+import { connectRetainedAtomToStorage } from "./retained-atom.mjs";
 
 let store = new Atom({
   position: [180, 80, 80] as V3,
@@ -47,6 +48,7 @@ let loadTextures = async (device: GPUDevice) => {
 };
 
 window.onload = async () => {
+  connectRetainedAtomToStorage("lagopus.ts", { read: true });
   if (!isMobile) {
     // enableBloom();
   }

src/perspective.mts

@@ -2,14 +2,17 @@ import { vCross, vDot, vScale, vAdd, vSub } from "@triadica/touch-control";
 import { coneBackScale } from "./config.mjs";
 import { Atom } from "@triadica/touch-control";
 import { V3 } from "./primes.mjs";
+import { RetainedAtom } from "./retained-atom.mjs";
 
-export let atomViewerForward = new Atom<V3>([0, 0, -1]);
+let perspectiveKey = "lagopus.perspective.";
 
-export let atomViewerPosition = new Atom<V3>([0, 0, 600]);
+export let atomViewerForward = new RetainedAtom<V3>(`${perspectiveKey}forward`, [0, 0, -1]);
 
-export let atomViewerUpward = new Atom<V3>([0, 1, 0]);
+export let atomViewerPosition = new RetainedAtom<V3>(`${perspectiveKey}position`, [0, 0, 600]);
 
-export let atomViewerScale = new Atom<number>(1);
+export let atomViewerUpward = new RetainedAtom<V3>(`${perspectiveKey}upward`, [0, 1, 0]);
+
+export let atomViewerScale = new RetainedAtom<number>(`${perspectiveKey}scale`, 1);
 
 export let moveViewerBy = (x0: number, y0: number, z0: number) => {
   let moveRatio = 1 / atomViewerScale.deref();

src/retained-atom.mts

@@ -0,0 +1,79 @@
+/// delcaring a global variable to store all retained atoms
+declare global {
+  interface Window {
+    __retainedAtoms__: Record<string, RetainedAtom<any>>;
+  }
+}
+
+if (window.__retainedAtoms__ == null) {
+  window.__retainedAtoms__ = {};
+}
+
+/* trying to simultate a Clojure Atom */
+export class RetainedAtom<T> {
+  name: string;
+  listeners: { [name: string]: Array<(prev: T, next: T) => void> } = {};
+  constructor(name: string, value: T) {
+    this.name = name;
+    window.__retainedAtoms__[name] = value as any;
+  }
+  deref(): T {
+    return window.__retainedAtoms__[this.name] as T;
+  }
+  reset(value: T) {
+    let prev = this.deref();
+    window.__retainedAtoms__[this.name] = value as any;
+    this.triggerListeners(prev, value);
+  }
+  swap(f: (value: T) => T) {
+    let prev = this.deref();
+    let curr = f(prev);
+    // this.value = f(this.value);
+    window.__retainedAtoms__[this.name] = curr as any;
+    this.triggerListeners(prev, curr);
+  }
+  addWatch(name: string, f: (prev: T, next: T) => void) {
+    if (this.listeners[name] == null) {
+      this.listeners[name] = [];
+    }
+    this.listeners[name].push(f);
+  }
+  removeWatch(name: string) {
+    if (this.listeners[name] != null) {
+      delete this.listeners[name];
+    }
+  }
+  private triggerListeners(prev: T, next: T) {
+    for (let name in this.listeners) {
+      this.listeners[name].forEach((f) => {
+        try {
+          f(prev, next);
+        } catch (e) {
+          console.error(`failed to trigger listener ${name}`, e);
+        }
+      });
+    }
+  }
+}
+
+export let connectRetainedAtomToStorage = (name: string, options: { read?: boolean; write?: boolean }) => {
+  if (options.read !== false) {
+    let value = localStorage.getItem(name);
+    if (value != null) {
+      try {
+        window.__retainedAtoms__ = JSON.parse(value);
+        console.warn("loaded retained atoms", window.__retainedAtoms__);
+      } catch (e) {
+        console.error("failed to parse retained atoms", e);
+      }
+    }
+  }
+  if (options.write !== false) {
+    window.addEventListener("beforeunload", (e) => {
+      if (window.__retainedAtoms__ != null) {
+        localStorage.setItem(name, JSON.stringify(window.__retainedAtoms__));
+        console.warn("saved retained atoms", window.__retainedAtoms__);
+      }
+    });
+  }
+};