Release Healer Man 0.1.37

src/ui/EditableHudElement.tsx

@@ -1,12 +1,13 @@
 import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { HUD_ELEMENTS, type HudElementId } from "../game/uiLayout";
+import { HUD_ELEMENTS, type HudElementId, type HudElementLayout } from "../game/uiLayout";
 import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
 import { useGameStore } from "../game/store";
+import "./uiLayout.css";
 
 const FALLBACKS: Partial<Record<HudElementId, [number, number, number]>> = {
   party: [.1, .3, 210], summons: [.27, .25, 150], minimap: [.9, .12, 160], player: [.9, .34, 160],
-  timeline: [.9, .52, 160], target: [.5, .15, 230], friendly: [.3, .15, 230], threat: [.78, .25, 160],
+  timeline: [.9, .52, 160], target: [.5, .15, 230], friendly: [.3, .15, 230], threat: [.78, .25, 160], dps: [.13, .8, 230],
   cast: [.5, .68, 330], actions: [.5, .86, 420], hints: [.5, .65, 420], experience: [.5, .99, 900],
   reticle: [.5, .5, 20], loot: [.5, .3, 320], interaction: [.5, .6, 320], manastorm: [.5, .05, 400],
   completion: [.5, .39, 360], assets: [.78, .6, 200], feedback: [.5, .71, 400],
@@ -14,14 +15,17 @@ const FALLBACKS: Partial<Record<HudElementId, [number, number, number]>> = {
 };
 
 /** Defaults remain in their original CSS flow until the player moves the widget. */
-export function EditableHudElement({ id, children, intrinsicWidth, bottomAnchor }: {
+export function EditableHudElement({ id, children, intrinsicWidth, bottomAnchor, elementLayout,
+  editing: editingOverride, hostSelector = ".game-shell", onChange }: {
   id: HudElementId; children?: ReactNode; intrinsicWidth?: number; bottomAnchor?: number;
+  elementLayout?: HudElementLayout; editing?: boolean; hostSelector?: string;
+  onChange?: (update: Partial<HudElementLayout>) => void;
 }) {
   const overlay = useGameStore((state) => state.overlay);
-  const editing = overlay === "ui-layout";
+  const editing = editingOverride ?? overlay === "ui-layout";
   const state = useUiLayoutStore();
   const layout = state.draft ?? state.preferences.current[currentUiDevice()];
-  const element = layout.elements[id];
+  const element = elementLayout ?? layout.elements[id];
   const [origin, setOrigin] = useState<{ x: number; y: number; width: number } | null>(null);
   const ref = useRef<HTMLDivElement>(null);
   const [host, setHost] = useState<Element | null>(null);
@@ -34,14 +38,14 @@ export function EditableHudElement({ id, children, intrinsicWidth, bottomAnchor
     : origin ?? { x: fallback[0], y: fallback[1] });
   const width = intrinsicWidth ?? element.width ?? origin?.width ?? fallback[2];
 
-  useLayoutEffect(() => { if (ref.current) setHost(ref.current.closest(".game-shell")); }, []);
+  useLayoutEffect(() => { if (ref.current) setHost(ref.current.closest(hostSelector)); }, [hostSelector]);
 
   useLayoutEffect(() => {
     if (positioned || !ref.current) return;
     const node = ref.current;
     const measure = () => {
       const child = node.firstElementChild?.getBoundingClientRect();
-      const host = node.closest(".game-shell")?.getBoundingClientRect();
+      const host = node.closest(hostSelector)?.getBoundingClientRect();
       if (child && host && child.width > 0 && child.height > 0) {
         setOrigin({ x: (child.left - host.left + child.width / 2) / host.width,
           y: (child.top - host.top + child.height / 2) / host.height, width: child.width });
@@ -52,21 +56,23 @@ export function EditableHudElement({ id, children, intrinsicWidth, bottomAnchor
     if (node.firstElementChild) observer.observe(node.firstElementChild);
     window.addEventListener("resize", measure);
     return () => { observer.disconnect(); window.removeEventListener("resize", measure); };
-  }, [positioned, children]);
+  }, [positioned, children, hostSelector]);
 
   useLayoutEffect(() => {
     const node = ref.current;
-    const host = node?.closest(".game-shell");
+    const host = node?.closest(hostSelector);
     if (!positioned || !node || !host) return;
     const measure = () => setBounds({ width: host.clientWidth, height: host.clientHeight, panelWidth: node.offsetWidth, panelHeight: node.offsetHeight });
     const observer = new ResizeObserver(measure);
     observer.observe(node); observer.observe(host); measure();
     return () => observer.disconnect();
-  }, [positioned, host]);
+  }, [positioned, host, hostSelector]);
 
-  const updatePosition = (x: number, y: number) => state.updateDraft((draft) => ({ ...draft, elements: {
-    ...draft.elements, [id]: { ...draft.elements[id], position: { x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) }, width },
-  } }));
+  const updatePosition = (x: number, y: number) => {
+    const update = { position: { x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) }, width };
+    if (onChange) onChange(update);
+    else state.updateDraft((draft) => ({ ...draft, elements: { ...draft.elements, [id]: { ...draft.elements[id], ...update } } }));
+  };
   const left = Math.max(6, Math.min(Math.max(6, bounds.width - bounds.panelWidth - 6), position.x * bounds.width - bounds.panelWidth / 2));
   const top = Math.max(6, Math.min(Math.max(6, bounds.height - bounds.panelHeight - 6), position.y * bounds.height - bounds.panelHeight / 2));
   const style = positioned ? { left, top, width: `min(${width}px, calc(100% - 12px))` } as CSSProperties : undefined;
@@ -85,7 +91,7 @@ export function EditableHudElement({ id, children, intrinsicWidth, bottomAnchor
       }}
       onPointerMove={(event) => {
         if (drag.current?.pointerId !== event.pointerId) return;
-        const host = ref.current!.closest(".game-shell")!.getBoundingClientRect();
+        const host = ref.current!.closest(hostSelector)!.getBoundingClientRect();
         updatePosition((event.clientX - host.left - drag.current.dx) / host.width, (event.clientY - host.top - drag.current.dy) / host.height);
       }}
       onPointerUp={() => { drag.current = null; }} onPointerCancel={() => { drag.current = null; }} onLostPointerCapture={() => { drag.current = null; }}