feat(cientos): mirror DecalDebugUI layer hover to 3D edges

Author: damienmontastier

packages/cientos/src/core/abstractions/Decal/DebugUI/LayerList.vue

@@ -74,6 +74,13 @@ function editById(id: string) {
   session.value?.beginEditById(id)
 }
 
+// Mirror pointer-hover on a list row to the 3D edges helper, so the user
+// can scrub the list and see which decal is which. Composes with 3D
+// pointer hover through the session's `enteredEntries` set.
+function hoverById(id: string, on: boolean) {
+  session.value?.setHoveredById(id, on)
+}
+
 function toggleVisibility(event: Event, entry: DecalJsonEntry) {
   event.stopPropagation()
   if (!session.value) { return }
@@ -189,6 +196,8 @@ function reset() {
           ]"
           :draggable="true"
           @click="editById(entry.id)"
+          @mouseenter="hoverById(entry.id, true)"
+          @mouseleave="hoverById(entry.id, false)"
           @dragstart="(e) => onDragStart(e, entry, group.meshName)"
           @dragover="(e) => onDragOver(e, entry, group.meshName)"
           @dragleave="onDragLeave(entry)"

packages/cientos/src/core/abstractions/Decal/Decal.vue

@@ -440,6 +440,12 @@ watch(stampedEntries, (entries) => {
       setZIndex: newZ => setZIndexForId(id, newZ),
       setVisibility: visible => setVisibilityForId(id, visible),
       remove: () => removeForId(id),
+      setHovered: (on) => {
+        const fresh = stampedEntries.value.find(e => e.id === id)
+        if (!fresh) { return }
+        if (on) { session.setHoveredEntry(fresh) }
+        else { session.clearHoveredEntry(fresh) }
+      },
     })
     registeredIds.add(id)
   }

packages/cientos/src/core/abstractions/Decal/useDecalEditor.ts

@@ -85,6 +85,7 @@ export interface DecalEntryActions {
   setZIndex: (newZ: number) => void
   setVisibility: (visible: boolean) => void
   remove: () => void
+  setHovered: (on: boolean) => void
 }
 
 interface HistoryEntry {
@@ -175,6 +176,12 @@ export interface DecalEditorSession {
   setVisibilityById: (id: string, visible: boolean) => boolean
   /** Remove a decal by id without entering edit mode. Returns `true` if a decal was removed. */
   removeById: (id: string) => boolean
+  /**
+   * Drive the 3D-side hover state from a non-3D surface (layer panel,
+   * thumbnail strip, …). Composes with pointer-driven hover via the same
+   * `enteredEntries` set, so external + 3D hover don't fight each other.
+   */
+  setHoveredById: (id: string, on: boolean) => boolean
 
   /**
    * Register a JSON-array setter for one Decal's mesh. Required for
@@ -624,6 +631,13 @@ function createSession(): DecalEditorSession {
     return true
   }
 
+  function setHoveredById(id: string, on: boolean): boolean {
+    const actions = getEntryActions(id, 'setHoveredById')
+    if (!actions) { return false }
+    actions.setHovered(on)
+    return true
+  }
+
   const meshNameByUuid = new Map<string, string>()
   function registerDecalData(meshUuid: string, meshName: string | null, setter: DecalDataSetter) {
     dataSetterRegistry.set(meshUuid, setter)
@@ -779,6 +793,7 @@ function createSession(): DecalEditorSession {
     setZIndexById,
     setVisibilityById,
     removeById,
+    setHoveredById,
 
     registerDecalData,
     unregisterDecalData,