@lightningjs/blits 2.4.0 → 2.5.0

package/src/components/RouterView.js

@@ -46,6 +46,9 @@ export default () =>
             'color',
             'src',
             'texture',
+            'image',
+            'map',
+            'frame',
             'fit',
             'rtt',
             'mount',

package/src/components/index.js

@@ -17,10 +17,8 @@
 
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
-import Sprite from './Sprite.js'
 
 export default () => ({
   Circle: Circle(),
   RouterView: RouterView(),
-  Sprite: Sprite(),
 })

package/src/engines/L3/element.js

@@ -29,9 +29,14 @@ 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 { resolveSpriteTexture } from './spriteTexture.js'
 
 const holderComponentMap = new WeakMap()
 
+/** @param {any} frame */
+const spriteFrameKey = (frame) =>
+  typeof frame === 'object' && frame !== null ? JSON.stringify(frame) : frame
+
 /**
  * Creates a padding object from a value and direction.
  * @param {number|object|string|undefined} padding - The padding value.
@@ -291,6 +296,24 @@ const propsTransformer = {
       this.props['color'] = 0xffffffff
     }
   },
+  set image(v) {
+    this.raw['image'] = v
+    if (this.element[symbols.isSprite] === true && this.element.node) {
+      this.element._scheduleNativeSpriteSync()
+    }
+  },
+  set map(v) {
+    this.raw['map'] = v
+    if (this.element[symbols.isSprite] === true && this.element.node) {
+      this.element._scheduleNativeSpriteSync()
+    }
+  },
+  set frame(v) {
+    this.raw['frame'] = v
+    if (this.element[symbols.isSprite] === true && this.element.node) {
+      this.element._scheduleNativeSpriteSync()
+    }
+  },
   set fit(v) {
     const resizeMode = {}
 
@@ -548,6 +571,7 @@ export const elementAttributes = Object.keys(propsTransformer)
 const Element = {
   /**
    * Populates the element with data
+   * @this {import('../../component.js').BlitsElement}
    * @param {import('../../component.js').BlitsElementProps} props
    */
   populate(props) {
@@ -557,6 +581,21 @@ const Element = {
       this[symbols.isSlot] = true
     }
 
+    if (props[symbols.isSprite] === true) {
+      this[symbols.isSprite] = true
+      this._spriteState = {
+        spriteTexture: null,
+        currentSrc: null,
+        _loadedCb: null,
+        _failedCb: null,
+        _syncScheduled: false,
+        lastTexture: null,
+        lastImage: null,
+        lastMap: null,
+        lastFrameKey: undefined,
+      }
+    }
+
     this.props.element = this
 
     this.props['parent'] = props['parent'] || this.config.parent
@@ -600,16 +639,20 @@ const Element = {
       holderComponentMap.set(this.node, this.component)
     }
 
-    if (props['@loaded'] !== undefined && typeof props['@loaded'] === 'function') {
-      this.node.on('loaded', (el, { type, dimensions }) => {
-        props['@loaded']({ w: dimensions.w, h: dimensions.h, type }, this)
-      })
-    }
+    if (this[symbols.isSprite] === true) {
+      this._syncNativeSprite()
+    } else {
+      if (props['@loaded'] !== undefined && typeof props['@loaded'] === 'function') {
+        this.node.on('loaded', (el, { type, dimensions }) => {
+          props['@loaded']({ w: dimensions.w, h: dimensions.h, type }, this)
+        })
+      }
 
-    if (props['@error'] !== undefined && typeof props['@error'] === 'function') {
-      this.node.on('failed', (el, error) => {
-        props['@error'](error, this)
-      })
+      if (props['@error'] !== undefined && typeof props['@error'] === 'function') {
+        this.node.on('failed', (el, error) => {
+          props['@error'](error, this)
+        })
+      }
     }
 
     if (props.__layout === true) {
@@ -657,6 +700,78 @@ const Element = {
       this.node.data = { ...this.props.props['data'] }
     }
   },
+  /**
+   * @this {import('../../component.js').BlitsElement}
+   */
+  _scheduleNativeSpriteSync() {
+    if (this[symbols.isSprite] !== true || !this.node || this.eol === true) return
+    const st = this._spriteState
+    if (st === undefined) return
+    if (st._syncScheduled === true) return
+    st._syncScheduled = true
+    queueMicrotask(() => {
+      st._syncScheduled = false
+      if (this.eol === true || !this.node) return
+      this._syncNativeSprite()
+    })
+  },
+  /**
+   * @this {import('../../component.js').BlitsElement}
+   */
+  _syncNativeSprite() {
+    if (this[symbols.isSprite] !== true || !this.node) return
+    const st = this._spriteState
+    if (st === undefined) return
+
+    const raw = this.props.raw
+    const image = raw['image']
+    const map = raw['map']
+    const frameKey = spriteFrameKey(raw['frame'])
+
+    if (
+      st.lastTexture != null &&
+      image === st.lastImage &&
+      map === st.lastMap &&
+      frameKey === st.lastFrameKey
+    ) {
+      return
+    }
+
+    const imageChanged = image !== st.lastImage
+    st.lastImage = image
+    st.lastMap = map
+    st.lastFrameKey = frameKey
+
+    const texture = resolveSpriteTexture(this, renderer, st)
+    if (texture === st.lastTexture) return
+
+    st.lastTexture = texture
+    this.set('texture', texture)
+
+    if (imageChanged !== true) return
+
+    const prevL = st._loadedCb
+    const prevF = st._failedCb
+    st._loadedCb =
+      raw['@loaded'] && typeof raw['@loaded'] === 'function'
+        ? (payload) => {
+            const d = payload?.dimensions
+            const w = payload?.w ?? payload?.width ?? d?.width ?? d?.w
+            const h = payload?.h ?? payload?.height ?? d?.height ?? d?.h
+            raw['@loaded']({ w, h }, this)
+          }
+        : null
+    st._failedCb =
+      raw['@error'] && typeof raw['@error'] === 'function'
+        ? (payload) => raw['@error'](payload, this)
+        : null
+    if (st.spriteTexture) {
+      if (prevL) st.spriteTexture.off('loaded', prevL)
+      if (prevF) st.spriteTexture.off('failed', prevF)
+      if (st._loadedCb) st.spriteTexture.on('loaded', st._loadedCb)
+      if (st._failedCb) st.spriteTexture.on('failed', st._failedCb)
+    }
+  },
   /**
    * Set an individual property on the node
    *
@@ -823,6 +938,16 @@ const Element = {
 
     Log.debug('Deleting Node', this.nodeId)
 
+    if (this[symbols.isSprite] === true && this._spriteState) {
+      const st = this._spriteState
+      if (st.spriteTexture) {
+        if (st._loadedCb) st.spriteTexture.off('loaded', st._loadedCb)
+        if (st._failedCb) st.spriteTexture.off('failed', st._failedCb)
+      }
+      if (st.subTextures) st.subTextures.clear()
+      this._spriteState = null
+    }
+
     // Clear all pending debounce timeouts
     const debounceProps = Object.keys(this.debounceTimeouts)
     for (let i = 0; i < debounceProps.length; i++) {

package/src/engines/L3/spriteTexture.js

@@ -0,0 +1,71 @@
+/**
+ * Resolves a sprite sheet frame from map + frame (template Sprite element path on L3).
+ * @param {import('../../component.js').BlitsElement} element
+ * @param {object} r - renderer
+ * @param {any} state - mutated sprite cache (see L3 element _spriteState)
+ * @returns {any|null} texture for the node
+ */
+export function resolveSpriteTexture(element, r, state) {
+  const image = element.props.raw['image']
+  if (image === undefined || image === null) {
+    return null
+  }
+  if (r === null || r === undefined || r.createTexture === undefined) {
+    return null
+  }
+
+  if (
+    state.spriteTexture === undefined ||
+    state.spriteTexture === null ||
+    state.currentSrc !== image
+  ) {
+    state.spriteTexture = r.createTexture('ImageTexture', {
+      src: image,
+    })
+    state.currentSrc = image
+    state.subTextures = null
+    state.currentMap = null
+  }
+
+  const map = element.props.raw['map']
+
+  if (state.currentMap !== map) {
+    state.currentMap = map
+    state.subTextures = null
+  }
+  const frame = element.props.raw['frame']
+
+  let options = null
+  if (map != null && frame != null) {
+    if (map.frames != null && map.frames !== undefined && frame in map.frames) {
+      options = Object.assign({}, map.defaults || {}, map.frames[frame])
+    } else if (frame in map) {
+      options = map[frame]
+    }
+  }
+
+  if ((options === null || options === undefined) && typeof frame === 'object' && frame !== null) {
+    options = frame
+  }
+
+  if (options != null) {
+    const key = typeof frame === 'object' ? JSON.stringify(frame) : String(frame)
+    if (!state.subTextures) {
+      state.subTextures = new Map()
+    }
+    const cached = state.subTextures.get(key)
+    if (cached !== undefined) {
+      return cached
+    }
+    const subTexture = r.createTexture('SubTexture', {
+      texture: state.spriteTexture,
+      x: options.x,
+      y: options.y,
+      w: options.w,
+      h: options.h,
+    })
+    state.subTextures.set(key, subTexture)
+    return subTexture
+  }
+  return state.spriteTexture
+}

package/src/focus/focus.js

@@ -41,6 +41,8 @@ export default {
     return focusedComponent
   },
   set(component, event) {
+    if (component === undefined || component.eol === true) return
+
     clearTimeout(setFocusTimeout)
 
     // early return if already focused
@@ -75,7 +77,7 @@ export default {
 
     // and finally set focus to the leaf component
     setFocusTimeout = setTimeout(
-      () => setFocus(component, event),
+      () => component.eol !== true && setFocus(component, event),
       this.hold === true ? Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS) : 0
     )
   },

package/src/lib/codegenerator/generator.js

@@ -206,6 +206,10 @@ const generateElementCode = function (
     renderCode.push(`elementConfigs[${counter}][Symbol.for('isSlot')] = true`)
   }
 
+  if (templateObject[Symbol.for('componentType')] === 'Sprite') {
+    renderCode.push(`elementConfigs[${counter}][Symbol.for('isSprite')] = true`)
+  }
+
   if (options.holder) {
     renderCode.push(`elementConfigs[${counter}]['holder'] = true`)
   }
@@ -611,11 +615,16 @@ const generateForLoopCode = function (templateObject, parent) {
   if (
     templateObject[Symbol.for('componentType')] === 'Element' ||
     templateObject[Symbol.for('componentType')] === 'Slot' ||
-    templateObject[Symbol.for('componentType')] === 'Text'
+    templateObject[Symbol.for('componentType')] === 'Text' ||
+    templateObject[Symbol.for('componentType')] === 'Sprite' ||
+    templateObject[Symbol.for('componentType')] === 'Layout'
   ) {
     if (templateObject[Symbol.for('componentType')] === 'Text') {
       templateObject.__textnode = 'true'
     }
+    if (templateObject[Symbol.for('componentType')] === 'Layout') {
+      templateObject.__layout = 'true'
+    }
     generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
@@ -788,7 +797,8 @@ const generateCode = function (templateObject, parent = false, options = {}) {
           childTemplateObject[Symbol.for('componentType')] === 'Element' ||
           childTemplateObject[Symbol.for('componentType')] === 'Slot' ||
           childTemplateObject[Symbol.for('componentType')] === 'Text' ||
-          childTemplateObject[Symbol.for('componentType')] === 'Layout'
+          childTemplateObject[Symbol.for('componentType')] === 'Layout' ||
+          childTemplateObject[Symbol.for('componentType')] === 'Sprite'
         ) {
           if (childTemplateObject[Symbol.for('componentType')] === 'Text') {
             childTemplateObject.__textnode = 'true'

package/src/lib/symbols.js

@@ -61,6 +61,7 @@
  * @property {symbol} components
  * @property {symbol} config
  * @property {symbol} isSlot
+ * @property {symbol} isSprite
  * @property {symbol} props
  * @property {symbol} parent
  * @property {symbol} slots
@@ -68,6 +69,7 @@
  * @property {symbol} isComponent
  * @property {symbol} effects
  * @property {symbol} removeGlobalEffects
+ * @property {symbol} tagContent
  */
 
 /**
@@ -126,6 +128,8 @@ export default {
   config: Symbol.for('config'),
   // Symbol 'isSlot' utilized within generated code
   isSlot: Symbol.for('isSlot'),
+  // Symbol 'isSprite' utilized within generated code (native Sprite on L3 element)
+  isSprite: Symbol.for('isSprite'),
   // Symbol 'props' utilized within generated code
   props: Symbol.for('props'),
   // Symbol 'slots' utilized within generated code

package/src/platforms.d.ts

@@ -0,0 +1 @@
+export { WebPlatform, WebPlatformNext, WebPlatformChrome50, WebPlatformLegacy } from '@lightningjs/renderer/platforms'

package/src/platforms.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  WebPlatform,
+  WebPlatformNext,
+  WebPlatformChrome50,
+  WebPlatformLegacy,
+} from '@lightningjs/renderer/platforms'

package/src/router/router.js

@@ -408,33 +408,32 @@ const executeBeforeHook = async function (
     try {
       result = await hooks[hookName].call(parent, route, previousRoute)
       if (isString(result)) {
-        currentRoute = previousRoute
-        to(result)
+        this.currentRoute = previousRoute
+        to(result, {}, {}, this.name)
         return false
       }
     } catch (error) {
       Log.error(`Error or Rejected Promise in "${hookName}" Hook`, error)
+      this.currentRoute = previousRoute
       if (this.history.length > 0) {
         preventHashChangeNavigation = true
-        currentRoute = previousRoute
-        /// hmmmm
         window.history.back()
         navigatingBack = false
         state.navigating = false
-        return false
       }
+      return false
     }
     // If the resolved result is an object, redirect if the path in the object was changed
     if (isObject(result) === true && result.path !== currentPath) {
-      currentRoute = previousRoute
-      to(result.path, result.data, result.options)
+      this.currentRoute = previousRoute
+      to(result.path, result.data, result.options, this.name)
       return false
     }
     // If the resolved result is false, cancel navigation
     if (result === false) {
+      this.currentRoute = previousRoute
       if (this.history.length > 0) {
         preventHashChangeNavigation = true
-        currentRoute = previousRoute
         window.history.back()
         navigatingBack = false
         state.navigating = false
@@ -491,11 +490,11 @@ const executeTransition = async (transition, element, animate) => {
   }
 }
 
-export const to = (path, data = {}, options = {}) => {
+export const to = (path, data = {}, options = {}, routerViewName = '') => {
   navigationData = data
   overrideOptions = options
 
-  setHash(path)
+  setHash(path, routerViewName)
 }
 
 export const toRouterView = (routerView, path, data = {}, options = {}) => {