@lightningjs/blits 1.3.0 → 1.4.0

package/src/component/base/methods.js

@@ -23,6 +23,15 @@ import { Log } from '../../lib/log.js'
 
 export default {
   focus: {
+    value: function (e) {
+      Log.warn('this.focus is deprecated, use this.$focus instead')
+      return this.$focus(e)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $focus: {
     value: function (e) {
       this[symbols.state].hasFocus = true
       Focus.set(this, e)
@@ -54,6 +63,15 @@ export default {
     configurable: false,
   },
   select: {
+    value: function (ref) {
+      Log.warn('this.select is deprecated, use this.$select instead')
+      return this.$select(ref)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $select: {
     value: function (ref) {
       let selected = null
       this[symbols.children].forEach((child) => {
@@ -77,8 +95,8 @@ export default {
   },
   trigger: {
     value: function (key) {
-      // trigger with force set to true
-      trigger(this[symbols.originalState], key, true)
+      Log.warn('this.trigger is deprecated, use this.$trigger instead')
+      return this.$trigger(key)
     },
     writable: false,
     enumerable: true,
@@ -86,8 +104,17 @@ export default {
   },
   $trigger: {
     value: function (key) {
-      Log.warn('this.$trigger is deprecated, use this.trigger instead')
-      return this.trigger(key)
+      let target = this[symbols.originalState]
+      // when dot notation used, find the nested target
+      if (key.indexOf('.') > -1) {
+        const keys = key.split('.')
+        key = keys.pop(keys)
+        for (let i = 0; i < keys.length; i++) {
+          target = target[keys[i]]
+        }
+      }
+      // trigger with force set to true
+      trigger(target, key, true)
     },
     writable: false,
     enumerable: true,

package/src/component.d.ts

@@ -265,7 +265,9 @@ declare namespace Component {
     /**
     * Listen to events emitted by other components
     */
-    $listen: (event: string, callback: (args: any) => void) => void
+    $listen: {
+      (event: string, callback: (args: any) => void, priority?: number): void;
+    }
 
     /**
     * Emit events that other components can listen to
@@ -300,6 +302,11 @@ declare namespace Component {
     /**
     * Set focus to the Component, optionally pass a KeyboardEvent for instant event bubbling
     */
+    $focus: (event?: KeyboardEvent) => void
+    /**
+     * @deprecated
+     * Deprecated:  use `this.$focus()` instead
+     */
     focus: (event?: KeyboardEvent) => void
 
     /**
@@ -317,6 +324,12 @@ declare namespace Component {
     * }
     * ```
     */
+    $select: (ref: string) => ComponentInstance | ElementInstance
+
+    /**
+     * @deprecated
+     * Deprecated: use `this.$select()` instead
+     */
     select: (ref: string) => ComponentInstance | ElementInstance
 
     /**
@@ -345,6 +358,7 @@ declare namespace Component {
 
   export interface ElementInstance {
     focus?: () => void
+    $focus?: () => void
   }
 
   export interface ComponentConfig<Props extends string, S, M> {

package/src/component.js

@@ -171,11 +171,24 @@ const Component = (name = required('name'), config = required('config')) => {
     // setup watchers if the components has watchers specified
     if (this[symbols.watchers]) {
       Object.keys(this[symbols.watchers]).forEach((watchKey) => {
-        let old = this[watchKey]
+        let target = this
+        let key = watchKey
+        // when dot notation used, find the nested target
+        if (watchKey.indexOf('.') > -1) {
+          const keys = watchKey.split('.')
+          key = keys.pop()
+          for (let i = 0; i < keys.length; i++) {
+            target = target[keys[i]]
+          }
+        }
+
+        let old = this[key]
+
         effect((force = false) => {
-          if (old !== this[watchKey] || force === true) {
-            this[symbols.watchers][watchKey].apply(this, [this[watchKey], old])
-            old = this[watchKey]
+          const newValue = target[key]
+          if (old !== newValue || force === true) {
+            this[symbols.watchers][watchKey].apply(this, [newValue, old])
+            old = newValue
           }
         })
       })
@@ -199,8 +212,8 @@ const Component = (name = required('name'), config = required('config')) => {
   }
 
   const factory = (options = {}, parentEl, parentComponent, rootComponent) => {
-    // Register user defined plugins once on the Base object
-    if (Base[symbols['pluginsRegistered']] === false) {
+    if (Base[symbols['launched']] === false) {
+      // Register user defined plugins once on the Base object (after launch)
       Object.keys(plugins).forEach((pluginName) => {
         const prefixedPluginName = `$${pluginName}`
         if (prefixedPluginName in Base) {
@@ -219,7 +232,12 @@ const Component = (name = required('name'), config = required('config')) => {
           configurable: false,
         })
       })
-      Base[symbols['pluginsRegistered']] = true
+
+      // register global components once
+      globalComponents = components()
+
+      // mark launched true
+      Base[symbols['launched']] = true
     }
 
     // setup the component once per component type, using Base as the prototype
@@ -234,11 +252,6 @@ const Component = (name = required('name'), config = required('config')) => {
       config.code = codegenerator.call(config, parser(config.template, name))
     }
 
-    // register global components once
-    if (!globalComponents) {
-      globalComponents = components()
-    }
-
     // create an instance of the component, using base as the prototype (which contains Base)
     return component.call(Object.create(base), options, parentEl, parentComponent, rootComponent)
   }

package/src/components/Layout.js

@@ -37,7 +37,7 @@ export default () => {
       ___layout() {
         let offset = 0
 
-        this.select('slot').children.forEach((el) => {
+        this.$select('slot').children.forEach((el) => {
           el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
           // todo: grab width from interface, not directly from node
           offset +=

package/src/components/Layout.orig.js

@@ -22,7 +22,7 @@ export default () => {
       ___layout() {
         let offset = 0
 
-        this.select('slot').children.forEach((el) => {
+        this.$select('slot').children.forEach((el) => {
           el.set(this.direction === 'vertical' ? 'y' : 'x', offset)
           // todo: grab width from interface, not directly from node
           offset +=

package/src/components/RouterView.js

@@ -55,7 +55,7 @@ export default () =>
         window.removeEventListener('hashchange', handler, false)
       },
       focus() {
-        this.activeView && this.activeView.focus()
+        this.activeView && this.activeView.$focus()
       },
     },
     input: {

package/src/components/RouterView.orig.js

@@ -40,7 +40,7 @@ export default () =>
         window.removeEventListener('hashchange', handler, false)
       },
       focus() {
-        this.activeView && this.activeView.focus()
+        this.activeView && this.activeView.$focus()
       },
     },
     input: {

package/src/engines/L3/element.js

@@ -125,6 +125,28 @@ const propsTransformer = {
       this.props['color'] = 0xffffffff
     }
   },
+  set fit(v) {
+    const resizeMode = {}
+
+    if (v === 'cover' || v === 'contain') {
+      this.props['textureOptions'] = { resizeMode: { type: v } }
+      return
+    }
+
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      resizeMode['type'] = v.type || 'cover'
+
+      if (typeof v.position === 'number') {
+        resizeMode['clipY'] = resizeMode['clipX'] = v.position
+      }
+
+      if (typeof v.position === 'object') {
+        resizeMode['clipX'] = 'x' in v.position === true ? v.position.x : null
+        resizeMode['clipY'] = 'y' in v.position === true ? v.position.y : null
+      }
+      this.props['textureOptions'] = { resizeMode }
+    }
+  },
   set rtt(v) {
     this.props['rtt'] = v
     if (v === true && this.raw['color'] === undefined) {
@@ -183,6 +205,11 @@ const propsTransformer = {
     }
   },
   set effects(v) {
+    for (let i = 0; i < v.length; i++) {
+      if (v[i].props && v[i].props.color) {
+        v[i].props.color = colors.normalize(v[i].props.color)
+      }
+    }
     this.props['shader'] = renderer.createShader('DynamicShader', {
       effects: v,
     })

package/src/engines/L3/element.test.js

@@ -159,6 +159,118 @@ test('Element - Set `texture` property', (assert) => {
   assert.end()
 })
 
+test('Element - Set `fit` property with a string type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = 'contain'
+  el.set('fit', fitVal)
+
+  assert.ok(el.node['textureOptions'] instanceof Object, 'textureOptions should be an object')
+  assert.ok(
+    el.node['textureOptions']['resizeMode'] instanceof Object,
+    'resizeMode should be an object'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    fitVal,
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    fitVal,
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property with an object type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', position: {x: 0, y:1}}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipX'],
+    0,
+    'Node resizeMode "clipX" parameter should be set to correct value'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipY'],
+    1,
+    'Node resizeMode "clipY" parameter should be set to correct value'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property with position key as a string type value', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', position: 1}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Props textureOptions parameter should be set'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipX'],
+    1,
+    'Node resizeMode "clipX" parameter should be set to correct value'
+  )
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['clipY'],
+    1,
+    'Node resizeMode "clipY" parameter should be set to correct value'
+  )
+  assert.equal(el.props.raw.get('fit'), fitVal, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `fit` property should not set not required keys', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  const fitVal = "{type: 'cover', dummy1: 0, dummy2: 0}"
+  el.set('fit', fitVal)
+
+  assert.equal(
+    el.node['textureOptions']['resizeMode']['type'],
+    'cover',
+    'Node resizeMode "type" parameter should be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['dummy1'],
+    undefined,
+    'Props resizeMode "dummy1" parameter should not be set'
+  )
+  assert.equal(
+    el.props.props['textureOptions']['resizeMode']['dummy2'],
+    undefined,
+    'Props resizeMode "dummy2" parameter should not be set'
+  )
+  assert.end()
+})
 function createElement() {
   const el = element({}, {})
   el.populate({

package/src/engines/L3/launch.js

@@ -16,6 +16,9 @@
  */
 
 import { RendererMain } from '@lightningjs/renderer'
+import { WebGlCoreRenderer, SdfTextRenderer } from '@lightningjs/renderer/webgl'
+import { CanvasCoreRenderer, CanvasTextRenderer } from '@lightningjs/renderer/canvas'
+
 import { Log } from '../../lib/log.js'
 import { SCREEN_RESOLUTIONS } from '../../constants.js'
 import colors from '../../lib/colors/colors.js'
@@ -24,17 +27,14 @@ import shaderLoader from './shaderLoader.js'
 
 export let renderer = {}
 
-export default (App, target, settings = {}) => {
-  if ('fontLoader' in settings) {
-    Log.warn(
-      `
+const renderEngine = (settings) => {
+  const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
 
-Starting version 0.9.0 of Blits, the Launch setting \`fontLoader\` is not supported / required anymore.
-You can remove the option from your \`src/index.js\`-file. And you can safely remove the file \`src/fontLoader.js\` from your project.
-      `
-    )
-  }
+  if (renderMode === 'webgl') return WebGlCoreRenderer
+  if (renderMode === 'canvas') return CanvasCoreRenderer
+}
 
+export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {
       appWidth: settings.w || 1920,
@@ -55,7 +55,8 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
       // gpu memory limit, converted from mb to bytes - defaults to 200mb
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
-      renderMode: 'renderMode' in settings ? settings.renderMode : 'webgl',
+      renderEngine: renderEngine(settings),
+      fontEngines: [SdfTextRenderer, CanvasTextRenderer],
     },
     target
   )

package/src/lib/codegenerator/generator.js

@@ -300,6 +300,14 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
 
+  const indexRegex = new RegExp(`\\$${index}(?!['\\w])`)
+  const indexResult = indexRegex.exec(key)
+  if (Array.isArray(indexResult)) {
+    ctx.renderCode.push(
+      `console.warn(" Using '${index}' in the key, like key=${key},  is not recommended")`
+    )
+  }
+
   const forStartCounter = counter
 
   ctx.renderCode.push(`
@@ -310,6 +318,7 @@ const generateForLoopCode = function (templateObject, parent) {
       let l = rawCollection.length
       while(l--) {
         const ${item} = rawCollection[l]
+        const ${index} = l
         keys.add('' +  ${interpolate(key, '') || 'l'})
       }
   `)

package/src/lib/eventListeners.js

@@ -16,40 +16,66 @@
  */
 
 const eventsMap = new Map()
+const callbackCache = new Map()
 
 export default {
-  registerListener(component, event, cb) {
+  registerListener(component, event, cb, priority = 0) {
     let componentsMap = eventsMap.get(event)
-    if (!componentsMap) {
+    if (componentsMap === undefined) {
       componentsMap = new Map()
       eventsMap.set(event, componentsMap)
     }
 
     let components = componentsMap.get(component)
-    if (!components) {
+    if (components === undefined) {
       components = new Set()
       componentsMap.set(component, components)
     }
 
-    components.add(cb)
+    components.add({ cb, priority })
+    callbackCache.delete(event) // Invalidate the callbackCache when a new callback is added
   },
+
   executeListeners(event, params) {
     const componentsMap = eventsMap.get(event)
-    if (componentsMap) {
-      componentsMap.forEach((component) => {
-        component.forEach((cb) => {
-          cb(params)
-        })
-      })
+    if (componentsMap === undefined || componentsMap.size === 0) {
+      return true // No listeners, so execution can be considered successful
+    }
+
+    if (callbackCache.has(event) === false) {
+      const allCallbacks = []
+      for (const [component, components] of componentsMap) {
+        for (const callbackObj of components) {
+          allCallbacks.push({ ...callbackObj, component })
+        }
+      }
+      allCallbacks.sort((a, b) => b.priority - a.priority)
+      callbackCache.set(event, allCallbacks) // callbackCache the sorted callbacks with component context
     }
+
+    const callbacks = callbackCache.get(event)
+    for (let i = 0; i < callbacks.length; i++) {
+      const { cb, component } = callbacks[i]
+      const result = cb.call(component, params)
+      if (result === false) {
+        return false // Stop propagation if any listener returns false
+      }
+    }
+
+    return true // All listeners executed without stopping propagation
   },
+
   removeListeners(component) {
-    eventsMap.forEach((componentMap) => {
-      const cmp = componentMap.get(component)
-      if (cmp) {
-        cmp.clear()
-        componentMap.delete(cmp)
+    for (const [event, componentsMap] of eventsMap) {
+      if (componentsMap.has(component)) {
+        componentsMap.delete(component)
+        callbackCache.delete(event) // Invalidate the callbackCache for this event
+
+        // If no more components for this event, remove the event entirely
+        if (componentsMap.size === 0) {
+          eventsMap.delete(event)
+        }
       }
-    })
+    }
   },
 }