Marking Component As Non-Interactive If Hover/Unhover Hooks Are Not Exists

index.d.ts

@@ -687,6 +687,7 @@ declare module '@lightningjs/blits' {
      * Watchers for changes to state variables, props or computed properties
      */
     watch?: W & ComponentContext<P, S, M, C>
+
   }
 
   export interface RouterHooks {
@@ -1353,7 +1354,7 @@ declare module '@lightningjs/blits' {
       M extends Methods,
       C extends Computed,
       W extends Watch>(name: string, config: ComponentConfig<P, S, M, C, W>) : ComponentFactory
-    /**
+   /**
      * Blits Launch
      */
     Launch(App: ComponentFactory, target: HTMLElement | String, settings?: Settings) : void

src/engines/L3/element.js

@@ -23,6 +23,7 @@ import { Log } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 import shaders from '../../lib/shaders/shaders.js'
+import { hasHook } from '../../lib/hooks.js'
 
 const holderComponentMap = new WeakMap()
 
@@ -528,7 +529,8 @@ const propsTransformer = {
     }
   },
   set holder(v) {
-    this.props['interactive'] = v
+    const identifier = this.element.component[symbols.identifier]
+    this.props['interactive'] = hasHook('hover', identifier) || hasHook('unhover', identifier)
   },
 }
 

src/engines/L3/element.test.js

@@ -23,6 +23,7 @@ import { initLog } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import sinon from 'sinon'
 import shaders from '../../lib/shaders/shaders.js' // Changed from './shaderLoader.js'
+import { registerHooks } from '../../lib/hooks.js'
 
 initLog()
 
@@ -1255,3 +1256,45 @@ test('Element - Set maxheight property', (assert) => {
   assert.equal(el.props.props['contain'], 'height', 'maxheight should set contain to height')
   assert.end()
 })
+
+test('Element - holder true sets interactive to true when component has hover hook', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const component = { [symbols.identifier]: 'test-hover-1' }
+  registerHooks({ hover: () => {} }, component[symbols.identifier])
+  const el = element({ parent: { node: { w: 1920, h: 1080 } } }, component)
+  el.populate({ parent: { node: new EventEmitter() }, holder: true })
+  assert.equal(
+    el.props.props['interactive'],
+    true,
+    'interactive should be true when component has hover hook'
+  )
+  assert.end()
+})
+
+test('Element - holder true sets interactive to true when component has unhover hook', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const component = { [symbols.identifier]: 'test-unhover-1' }
+  registerHooks({ unhover: () => {} }, component[symbols.identifier])
+  const el = element({ parent: { node: { w: 1920, h: 1080 } } }, component)
+  el.populate({ parent: { node: new EventEmitter() }, holder: true })
+  assert.equal(
+    el.props.props['interactive'],
+    true,
+    'interactive should be true when component has unhover hook'
+  )
+  assert.end()
+})
+
+test('Element - holder true sets interactive to false when component has no hover/unhover hooks', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const component = { [symbols.identifier]: 'test-no-hooks-1' }
+  registerHooks({}, component[symbols.identifier])
+  const el = element({ parent: { node: { w: 1920, h: 1080 } } }, component)
+  el.populate({ parent: { node: new EventEmitter() }, holder: true })
+  assert.equal(
+    el.props.props['interactive'],
+    false,
+    'interactive should be false when component has no hover/unhover hooks'
+  )
+  assert.end()
+})

src/lib/hooks.js

@@ -57,3 +57,7 @@ export const registerHooks = (hooks = {}, identifier) => {
     if (typeof hooks[hook] === 'function') cbs[identifier][hook] = hooks[hook]
   })
 }
+
+export const hasHook = (hook, identifier) => {
+  return cbs[identifier] !== undefined && hook in cbs[identifier]
+}