lecodes-viewer 0.19.0

package/src/ui/transitions.ts

@@ -0,0 +1,250 @@
+import { ANIMATE_LAYER_BASE } from "./layers"
+
+export const createTransitionSystem = (
+  module: any,
+  styleBlock: HTMLStyleElement,
+  getNode: (screenId: number, nodeId: number) => HTMLElement | null | undefined,
+  applyStyle: Function,
+  getOverlay: (yogaId: number) => HTMLElement | null | undefined
+) => {
+
+  const clearTransition = (e: TransitionEvent) => {
+    (e.target as HTMLElement).style.transition = ""
+  }
+
+  const applyStyleTransition = (yogaId: number, value: number, layer: number, forceTransition = false, timeoutTransition = false) => {
+
+    const keys = []
+
+    module._resetNodeLayer(yogaId, layer)
+
+    let duration: number | null = null
+    let delay: number | null = null
+    for (let [ key, _value ] of Object.entries(value)) {
+      if (key === "duration") {
+        duration = _value
+        continue
+      }
+      if (key === "delay"){
+        delay = _value
+        continue
+      }
+      if (META_KEYS.has(key)) continue     // options-bag keys are not style targets
+      keys.push(key)
+      applyStyle(layer, yogaId, key, _value as any)
+    }
+
+    const node = getNode(module._getScreenId(yogaId), yogaId)
+    if ((forceTransition || duration!== null || delay !== null) && node) {
+
+      const buildStr = (props: string[]) => delay !== null?
+        props.map(k => `${cssAliases[k] ?? k} ${delay}ms ${duration ?? 225}ms ease-in-out`).join(","):
+        props.map(k => `${cssAliases[k] ?? k} ${duration ?? 225}ms ease-in-out`).join(",")
+
+      // overlayColor lives on a separate overlay element behind the widget, so its
+      // transition must target that element (animating its background-color), not the
+      // node. Keep it out of the node's transition list.
+      const nodeKeys = keys.filter(k => k !== "overlayColor")
+      const str = buildStr(nodeKeys)
+
+      const overlay = keys.includes("overlayColor") ? getOverlay(yogaId) : null
+      const overlayStr = overlay ? buildStr(["overlayColor"]) : ""
+
+      if (timeoutTransition) {
+        requestAnimationFrame(() => {
+          node.style.transition = str
+          if (overlay) overlay.style.transition = overlayStr
+        })
+      } else {
+        if (forceTransition) {
+          node.style.transition = str
+          if (overlay) overlay.style.transition = overlayStr
+        } else {
+          const className = "action_" + yogaId + "_" + layer
+          styleBlock.sheet?.insertRule(`.${className} { transition: ${str}; }`, styleBlock.sheet.cssRules.length)
+          node.classList.add(className)
+          if (overlay) overlay.style.transition = overlayStr
+        }
+      }
+    }
+
+    if (forceTransition) {
+      node?.addEventListener("transitionend", clearTransition)
+      if (keys.includes("overlayColor")) {
+        getOverlay(yogaId)?.addEventListener("transitionend", clearTransition)
+      }
+    }
+  }
+
+  // ===== looping animateTo (loop: / loopMode:) =====
+  // CSS transitions can't repeat, so a loop is a timer-chained sequence of layer
+  // enables/disables over the same staged values: ping-pong animates there and back each
+  // cycle, restart snaps back and replays forward. Each phase re-checks the node is still
+  // alive and attached (removal frees the yoga node; router history detaches the element)
+  // and stops silently otherwise — matching iOS, where Core Animation drops the repeating
+  // animations when the view leaves the window. A loop never merges the layer: it is an
+  // effect, not a state change, and the node ends back at its base style.
+
+  type Loop = { screenId: number, layer: number, timer: ReturnType<typeof setTimeout> | undefined }
+  const loops = new Map<number, Loop>()
+
+  /// Stop the node's loop, if any, and return it to base. Callers guarantee the node is alive.
+  const cancelLoop = (nodeId: number) => {
+    const loop = loops.get(nodeId)
+    if (!loop) return
+    loops.delete(nodeId)
+    if (loop.timer !== undefined) clearTimeout(loop.timer)
+    const el = getNode(loop.screenId, nodeId)
+    if (el) el.style.transition = ""
+    module._disableNodeLayer(nodeId, loop.layer)
+    module._resetNodeLayer(nodeId, loop.layer)
+  }
+
+  const startLoop = (nodeId: number, style: any, layer: number) => {
+    const screenId = module._getScreenId(nodeId)
+    const first = getNode(screenId, nodeId)
+    if (!first) return
+
+    const duration: number = style.duration ?? 225
+    const delay: number = style.delay ?? 0
+    const pingPong = style.loopMode !== "restart"
+    let remaining: number = style.loop === true ? Infinity : +style.loop
+
+    // Stage the target values once — enables/disables reuse them every cycle.
+    module._resetNodeLayer(nodeId, layer)
+    const keys: string[] = []
+    for (const [key, v] of Object.entries(style)) {
+      if (META_KEYS.has(key)) continue
+      keys.push(key)
+      applyStyle(layer, nodeId, key, v as any)
+    }
+    const str = keys.filter(k => k !== "overlayColor")
+      .map(k => `${cssAliases[k] ?? k} ${duration}ms ease-in-out`).join(",")
+    const hasOverlay = keys.includes("overlayColor")
+
+    const loop: Loop = { screenId, layer, timer: undefined }
+    loops.set(nodeId, loop)
+
+    const setTransition = (el: HTMLElement, on: boolean) => {
+      el.style.transition = on ? str : ""
+      if (hasOverlay) {
+        const o = getOverlay(nodeId)
+        if (o) o.style.transition = on ? `background-color ${duration}ms ease-in-out` : ""
+      }
+    }
+
+    // null = the loop no longer runs. Detached-but-alive (history screen) also restores base,
+    // so the node shows its resting style if the screen is later revived.
+    const alive = (): HTMLElement | null => {
+      if (loops.get(nodeId) !== loop) return null
+      const el = getNode(screenId, nodeId)
+      if (el && el.isConnected) return el
+      loops.delete(nodeId)
+      if (loop.timer !== undefined) clearTimeout(loop.timer)
+      if (el) {
+        el.style.transition = ""
+        module._disableNodeLayer(nodeId, layer)
+        module._resetNodeLayer(nodeId, layer)
+      }
+      return null
+    }
+
+    const finish = (el: HTMLElement) => {
+      loops.delete(nodeId)
+      setTransition(el, false)
+      module._resetNodeLayer(nodeId, layer)   // layer already disabled — node rests at base
+    }
+
+    // ping-pong: forward(d) → back(d) → count a cycle → again | finish
+    const phaseBack = () => {
+      const el = alive()
+      if (!el) return
+      module._disableNodeLayer(nodeId, layer)         // transition still set → animates back
+      loop.timer = setTimeout(phaseCycleEnd, duration)
+    }
+    const phaseCycleEnd = () => {
+      const el = alive()
+      if (!el) return
+      remaining -= 1
+      if (remaining > 0) {
+        module._enableNodeLayer(nodeId, layer)        // forward again
+        loop.timer = setTimeout(phaseBack, duration)
+      } else {
+        finish(el)
+      }
+    }
+
+    // restart: forward(d) → snap to base → again | finish
+    const phaseSnap = () => {
+      const el = alive()
+      if (!el) return
+      remaining -= 1
+      setTransition(el, false)
+      module._disableNodeLayer(nodeId, layer)         // no transition → instant snap
+      if (remaining <= 0) {
+        finish(el)
+        return
+      }
+      requestAnimationFrame(() => {                   // let the snap land before re-arming
+        const el = alive()
+        if (!el) return
+        setTransition(el, true)
+        requestAnimationFrame(() => module._enableNodeLayer(nodeId, layer))
+        loop.timer = setTimeout(phaseSnap, duration)
+      })
+    }
+
+    // first forward pass (the only one that honors `delay`)
+    const phaseStart = () => {
+      const el = alive()
+      if (!el) return
+      setTransition(el, true)
+      requestAnimationFrame(() => module._enableNodeLayer(nodeId, layer))
+      loop.timer = setTimeout(pingPong ? phaseBack : phaseSnap, duration)
+    }
+    if (delay > 0) loop.timer = setTimeout(phaseStart, delay)
+    else phaseStart()
+  }
+
+  const animateTo = (nodeId: number, style: any) => {
+    const layer = (style.layer ?? 44) + ANIMATE_LAYER_BASE
+    cancelLoop(nodeId)
+    if (style.loop) {
+      startLoop(nodeId, style, layer)
+      return
+    }
+    applyStyleTransition(nodeId, style, layer, true)
+    requestAnimationFrame(() => {
+      module._enableNodeLayer(nodeId, layer)
+      // module._mergeNodeLayer(nodeId, 302, 256)
+    })
+  }
+
+  const animateFrom = (nodeId: number, style: any) => {
+    const layer = (style.layer ?? 44) + ANIMATE_LAYER_BASE
+    cancelLoop(nodeId)
+    module._enableNodeLayer(nodeId, layer)
+    applyStyleTransition(nodeId, style, layer, true, true)
+    requestAnimationFrame(() => {
+      module._disableNodeLayer(nodeId, layer)
+    })
+  }
+
+
+  return {
+    applyStyleTransition,
+    clearTransition,
+    animateTo,
+    animateFrom
+  }
+}
+
+// Options-bag meta keys of animateTo/animateFrom — everything that is not a style target.
+const META_KEYS = new Set(["duration", "delay", "layer", "commit", "loop", "loopMode"])
+  
+const cssAliases: Record<string, string> = {
+  bgColor: "background-color",
+  backgroundColor: "background-color",
+  borderColor: "border-color",
+  overlayColor: "background-color"
+}

package/src/ui/ui.d.ts

@@ -0,0 +1,78 @@
+declare module "ui" {
+type ContainerStyle = {
+    flexDirection?: "row" | "column";
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-evenly";
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+    gap?: number;
+    backgroundColor?: number;
+};
+
+type ElementStyle = {
+    width?: number | string;
+    height?: number | string;
+    margin?: number[];
+    padding?: number[];
+};
+
+type Listener = () => void;
+
+export function UIButton(children: UINode[]): UIButton;
+
+export function UIButton(style: UIButton["style"], children: UINode[]): UIButton;
+
+export type UIButton = {
+    readonly type: "button";
+    readonly listeners: Listener[];
+    style: ElementStyle & ContainerStyle;
+    onClick(callback: Listener): UIButton;
+    readonly children: UINode[];
+};
+
+type UINode = {
+    readonly type: string;
+    style: any;
+};
+
+export function UIScreen(children: UINode[]): UIScreen;
+
+export function UIScreen(style: UIScreen["style"], children: UINode[]): UIScreen;
+
+export type UIScreen = {
+    readonly type: "screen";
+    style: ContainerStyle & {
+        padding?: number[];
+    };
+    open: () => void;
+    readonly children: UINode[];
+};
+
+export function UISpacer(): UISpacer;
+
+export function UISpacer(style: UISpacer["style"]): UISpacer;
+
+export type UISpacer = {
+    readonly type: "spacer";
+    style: {
+        flexGrow?: number;
+    };
+};
+
+export function UIText(text: string): UIText;
+
+export function UIText(style: UIText["style"], text: string): UIText;
+
+export type UIText = {
+    readonly type: "text";
+    text: string;
+    style: ElementStyle & {
+        textAlign?: "start" | "center" | "end";
+        fontSize?: number;
+        fontWeight?: number;
+        font?: string;
+        textColor?: string;
+    };
+};
+
+
+
+}

package/src/ui/vListSystem.ts

@@ -0,0 +1,212 @@
+import type { UIScreen } from './UIScreen'
+
+type MountedItem = {
+    rootPtr: number       // detached yoga root айтема
+    el: HTMLElement       // DOM-корень поддерева
+    jsSubtree: any        // JS-объект поддерева (для null _id при unmount)
+}
+
+export type VListInstance = {
+    nodeId: number
+    el: HTMLElement
+    jsNode: any           // VListElement
+    screen: UIScreen
+    pendingScroll: number | null
+    items: Map<string, MountedItem>
+}
+
+export const createVListSystem = (module: any) => {
+
+    const instances = new Map<number, VListInstance>()   // yogaId vlist-ноды → instance
+
+    // ---------- marshaling ----------
+
+    const withKey = <R>(key: string, fn: (ptr: number) => R): R => {
+        const len = module.lengthBytesUTF8(key) + 1
+        const p = module._malloc(len)
+        module.stringToUTF8(key, p, len)
+        try { return fn(p) } finally { module._free(p) }
+    }
+
+    const withStringArray = <R>(arr: string[], fn: (arrPtr: number) => R): R => {
+        const ptrs = arr.map(s => {
+            const len = module.lengthBytesUTF8(s) + 1
+            const p = module._malloc(len)
+            module.stringToUTF8(s, p, len)
+            return p
+        })
+        const arrPtr = module._malloc(Math.max(4 * ptrs.length, 4))
+        ptrs.forEach((p, i) => { module.HEAPU32[(arrPtr >> 2) + i] = p })
+        try { return fn(arrPtr) } finally {
+            ptrs.forEach(p => module._free(p))
+            module._free(arrPtr)
+        }
+    }
+
+    const withFloatArray = <R>(arr: number[], fn: (ptr: number) => R): R => {
+        const p = module._malloc(Math.max(4 * arr.length, 4))
+        arr.forEach((v, i) => { module.HEAPF32[(p >> 2) + i] = v })
+        try { return fn(p) } finally { module._free(p) }
+    }
+
+    const readStringArray = (arrPtr: number, count: number): string[] => {
+        const out: string[] = []
+        for (let i = 0; i < count; i++) {
+            out.push(module.UTF8ToString(module.HEAPU32[(arrPtr >> 2) + i]))
+        }
+        return out
+    }
+
+    // ---------- layout-проход по айтемам ----------
+        
+    const refresh = (inst: VListInstance) => {
+        for (const [key, item] of inst.items) {
+            inst.screen.updateSizesFor(item.el)
+            item.el.style.top = withKey(key, p => module._vlistOffsetOf(inst.nodeId, p)) + "px"
+            item.el.style.left = "0px"
+        }
+        const h = module._getContentHeight(inst.nodeId)
+        inst.el.style.setProperty("--scroll-height", h + "px")
+        inst.el.style.setProperty("--scroll-width", "0px")
+
+        if (inst.pendingScroll !== null) {
+            if (Math.abs(inst.el.scrollTop - inst.pendingScroll) >= 1) {
+                inst.el.scrollTop = inst.pendingScroll   // высота уже выставлена — кламп не сработает
+            }
+            inst.pendingScroll = null
+        }
+    }
+
+    // ---------- колбэки из C++ (регистрируются один раз) ----------
+
+    // g_vlSync
+    const syncFunc = module.addFunction(
+        (_screenId: number, nodePtr: number, unmountArr: number, unmountCount: number, mountArr: number, mountCount: number) => {
+            const inst = instances.get(nodePtr)
+            if (!inst) return
+            const unmountKeys = readStringArray(unmountArr, unmountCount)
+            const mountKeys = readStringArray(mountArr, mountCount)
+
+            // Контракт: интеграционный слой сносит поддеревья ДО вызова JS _syncWindow
+            for (const key of unmountKeys) {
+                const item = inst.items.get(key)
+                if (!item) continue
+                inst.items.delete(key)
+                item.el.remove()
+                inst.screen.releaseSubtree(item.jsSubtree)            // nodeMap-чистка + _id = 0
+                withKey(key, p => module._vlistItemUnmounted(nodePtr, p))  // free yoga root
+            }
+
+            inst.jsNode._syncWindow(unmountKeys, mountKeys)           // mount: render() → vlistMount()
+            refresh(inst)
+        }, "viiiiii")
+
+    // g_vlAdjust — якорение / кламп
+    const adjustFunc = module.addFunction((_screenId: number, nodePtr: number, scrollY: number) => {
+        const inst = instances.get(nodePtr)
+        if (!inst) return
+        inst.pendingScroll = scrollY      // применим в refresh, после высоты
+    }, "viif")
+
+    // g_vlEdge
+    const edgeFunc = module.addFunction((_screenId: number, nodePtr: number, endEdge: number) => {
+        const inst = instances.get(nodePtr)
+        if (!inst) return
+        const listeners = endEdge ? (inst.jsNode.erl ?? []) : (inst.jsNode.strl ?? [])
+        for (const cb of listeners) cb()
+    }, "viii")
+
+    module._setVListHandlers(syncFunc, adjustFunc, edgeFunc)
+
+    // ---------- создание (из UIScreen.addNodeRecursive для type === "vlist") ----------
+
+    const register = (screen: UIScreen, jsNode: any, el: HTMLElement, yogaId: number) => {
+        const inst: VListInstance = { nodeId: yogaId, el, jsNode, screen, items: new Map(), pendingScroll: null }
+        instances.set(yogaId, inst)
+
+        module._vlistInit(yogaId, jsNode._overscan, jsNode._inverted ? 1 : 0,
+                          jsNode._startThreshold, jsNode._endThreshold)
+
+        if (jsNode._keys.length > 0) {
+            setKeysInternal(yogaId, jsNode._keys, jsNode._estimates)
+        }
+
+        el.addEventListener("scroll", () => {
+            module._vlistOnScroll(yogaId, el.scrollTop)
+            refresh(inst)
+            for (const cb of jsNode.sl ?? []) cb(el.scrollTop)
+        })
+    }
+
+    // Вызывается из UIScreen.updateSizes для vlist-элемента (после выставления его размеров)
+    const updateLayout = (yogaId: number) => {
+        const inst = instances.get(yogaId)
+        if (!inst) return
+        module._vlistUpdateLayout(yogaId)    // внутри может дернуть sync → mount
+        refresh(inst)
+    }
+
+    const unregister = (yogaId: number) => {
+        const inst = instances.get(yogaId)
+        if (!inst) return
+        module._vlistFree(yogaId)            // освобождает detached-корни
+        instances.delete(yogaId)
+    }
+
+    const setKeysInternal = (yogaId: number, keys: string[], estimates: number[]) => {
+        withStringArray(keys, kp =>
+            withFloatArray(estimates, ep =>
+                module._vlistSetKeys(yogaId, kp, ep, keys.length)))
+    }
+
+    // ---------- API для _creatorUI (зовётся из VListElement) ----------
+
+    const api = {
+        vlistSetKeys: (jsNode: any, keys: string[], estimates: number[]) => {
+            setKeysInternal(jsNode._id, keys, estimates)
+        },
+        vlistInsertKeys: (jsNode: any, index: number, keys: string[], estimates: number[]) => {
+            withStringArray(keys, kp =>
+                withFloatArray(estimates, ep =>
+                    module._vlistInsertKeys(jsNode._id, index, kp, ep, keys.length)))
+        },
+        vlistRemoveKeys: (jsNode: any, keys: string[]) => {
+            withStringArray(keys, kp => module._vlistRemoveKeys(jsNode._id, kp, keys.length))
+        },
+        vlistInvalidate: (jsNode: any, key: string) => {
+            withKey(key, p => module._vlistInvalidate(jsNode._id, p))
+        },
+        // Вызывается из _syncWindow на каждый mount-ключ
+        vlistMount: (jsNode: any, key: string, subtree: any) => {
+            const inst = instances.get(jsNode._id)
+            if (!inst) return
+            const rootPtr = withKey(key, p => module._vlistCreateItemRoot(jsNode._id, p))
+            const el = inst.screen.buildSubtree(subtree, rootPtr)     // addNodeRecursive в detached root
+            inst.el.appendChild(el)
+            inst.items.set(key, { rootPtr, el, jsSubtree: subtree })
+            withKey(key, p => module._vlistItemMounted(jsNode._id, p)) // измерение + кэш + якорение
+        },
+        command: (jsNode: any, name: string, ...args: any[]) => {
+            const inst = instances.get(jsNode._id)
+            if (!inst) return
+            const behavior = (animated: boolean) => animated ? "smooth" as const : "auto" as const
+            switch (name) {
+                case "scrollTo":
+                    inst.el.scrollTo({ top: args[0], behavior: behavior(args[1] ?? true) })
+                    break
+                case "scrollToKey": {
+                    const off = withKey(args[0], p => module._vlistOffsetOf(inst.nodeId, p))
+                    if (!isNaN(off)) inst.el.scrollTo({ top: off, behavior: behavior(args[1] ?? true) })
+                    break
+                }
+                case "scrollToEnd": {
+                    const h = module._getContentHeight(inst.nodeId)
+                    inst.el.scrollTo({ top: h - inst.el.clientHeight, behavior: behavior(args[0] ?? true) })
+                    break
+                }
+            }
+        },
+    }
+
+    return { register, updateLayout, unregister, refresh, api, instances }
+}

package/src/ui/viewScale.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim (one definition, shared by viewer + viewer-lite).
+export * from "lecodes-viewer-lite/src/ui/viewScale"

package/src/utils/animate.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/animate"

package/src/utils/createUtils.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/createUtils"

package/src/utils/fetch.ts

@@ -0,0 +1,3 @@
+// Moved to the viewer-lite package (the minimal web host); re-exported so viewer-internal
+// imports keep working and both packages share ONE buffer registry instance.
+export * from "lecodes-viewer-lite/src/utils/fetch"

package/src/utils/fonts.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/fonts"

package/src/utils/globals.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/globals"