diff --git a/index.d.ts b/index.d.ts index ef8a22f3..e9ddc41e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -687,6 +687,7 @@ declare module '@lightningjs/blits' { * Watchers for changes to state variables, props or computed properties */ watch?: W & ComponentContext
+ } export interface RouterHooks { @@ -1353,7 +1354,7 @@ declare module '@lightningjs/blits' { M extends Methods, C extends Computed, W extends Watch>(name: string, config: ComponentConfig
) : ComponentFactory - /** + /** * Blits Launch */ Launch(App: ComponentFactory, target: HTMLElement | String, settings?: Settings) : void diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js index 1f2ef3e3..be3f2fbf 100644 --- a/src/engines/L3/element.js +++ b/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) }, } diff --git a/src/engines/L3/element.test.js b/src/engines/L3/element.test.js index 09e8e59b..3f917341 100644 --- a/src/engines/L3/element.test.js +++ b/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() +}) diff --git a/src/lib/hooks.js b/src/lib/hooks.js index f0a18c80..5bb45cf0 100644 --- a/src/lib/hooks.js +++ b/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] +}