@lightningjs/blits 2.4.1 → 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/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/components/Sprite.js

@@ -1,256 +0,0 @@
-/*
- * 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
- */
-
-import Component from '../component.js'
-
-import symbols from '../lib/symbols.js'
-
-export default () =>
-  Component('Sprite', {
-    /* eslint-disable no-unused-vars */
-    code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
-        const elms = []
-        const validAttributes = [
-          'parent',
-          'rotation',
-          'w',
-          'h',
-          'x',
-          'y',
-          'z',
-          'zIndex',
-          'color',
-          'src',
-          'texture',
-          'fit',
-          'rtt',
-          'mount',
-          'pivot',
-          'scale',
-          'show',
-          'alpha',
-          'rounded',
-          'border',
-          'shadow',
-          'shader',
-          'clipping',
-          'overflow',
-          'font',
-          'size',
-          'maxwidth',
-          'maxheight',
-          'maxlines',
-          'textoverflow',
-          'letterspacing',
-          'lineheight',
-          'contain',
-          'align',
-          'content',
-          'placement',
-          'inspector-data',
-          'holder',
-        ]
-        const elementConfigs = []
-        const forloops = []
-        const props = []
-        const created = []
-        const effects = {}
-        const skips = []
-        let componentType
-        let rootComponent = component
-        let propData
-        let slotComponent
-        let inSlot = false
-        let slotChildCounter = 0
-        let cmps = []
-        elementConfigs[0] = {}
-        elementConfigs[0]['___wrapper'] = true
-
-        elms[0] = this.element(
-          { parent: parent || 'root' },
-          inSlot === true ? slotComponent : component
-        )
-
-        elementConfigs[0]['w'] = parent.node.w * (100 / 100)
-        elementConfigs[0]['h'] = parent.node.h * (100 / 100)
-        elementConfigs[0]['texture'] = component.texture
-        elementConfigs[0]['color'] = component.color
-        elementConfigs[0]['rounded'] = component.rounded
-        elementConfigs[0]['border'] = component.border
-        elementConfigs[0]['shadow'] = component.shadow
-        elms[0].populate(elementConfigs[0])
-
-        if (inSlot === true) {
-          slotChildCounter -= 1
-        }
-
-        return {
-          elms,
-          cleanup: () => {
-            rootComponent = null
-            propData = null
-            slotComponent = null
-            parent = null
-            component = null
-            cmps.length = 0
-            elms.length = 0
-            components.length = 0
-            elementConfigs.length = 0
-            forloops.length = 0
-            props.length = 0
-            skips.length = 0
-          },
-          skips,
-        }
-      },
-      effects: [
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('texture', component.texture)
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('color', component.color)
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('rounded', component.rounded)
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('border', component.border)
-        },
-        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('shadow', component.shadow)
-        },
-      ],
-      context: {},
-    },
-    props: {
-      image: undefined,
-      map: undefined,
-      frame: undefined,
-      color: undefined,
-      rounded: undefined,
-      border: undefined,
-      shadow: undefined,
-      '@loaded': undefined,
-      '@error': undefined,
-    },
-    state() {
-      return {
-        spriteTexture: null,
-        currentSrc: null,
-      }
-    },
-
-    hooks: {
-      ready() {
-        const loaded = this['@loaded']
-        if (loaded && typeof loaded === 'function') {
-          const cb = (payload) => loaded({ w: payload?.w, h: payload?.h }, this[symbols.wrapper])
-          this._loadedCb = cb
-          if (this.spriteTexture !== undefined && this.spriteTexture !== null) {
-            this.spriteTexture.on('loaded', cb)
-          }
-        }
-        const error = this['@error']
-        if (error && typeof error === 'function') {
-          const cb = (payload) => error(payload, this[symbols.wrapper])
-          this._failedCb = cb
-          if (this.spriteTexture !== undefined && this.spriteTexture !== null) {
-            this.spriteTexture.on('failed', cb)
-          }
-        }
-      },
-      destroy() {
-        if (this.spriteTexture !== undefined && this.spriteTexture !== null) {
-          if (this._loadedCb) this.spriteTexture.off('loaded', this._loadedCb)
-          if (this._failedCb) this.spriteTexture.off('failed', this._failedCb)
-        }
-      },
-    },
-
-    computed: {
-      texture() {
-        // If no image - nothing to render
-        if (this.image === undefined || this.image === null) {
-          return null
-        }
-
-        // Get renderer
-        const renderer = this[symbols.renderer]()
-        if (renderer === null || renderer === undefined || renderer.createTexture === undefined) {
-          return null
-        }
-
-        // Recreate texture only when image src changes
-        if (
-          this.spriteTexture === undefined ||
-          this.spriteTexture === null ||
-          this.currentSrc !== this.image
-        ) {
-          const prevTexture = this.spriteTexture
-          if (prevTexture !== undefined && prevTexture !== null) {
-            if (this._loadedCb) prevTexture.off('loaded', this._loadedCb)
-            if (this._failedCb) prevTexture.off('failed', this._failedCb)
-          }
-          this.spriteTexture = renderer.createTexture('ImageTexture', {
-            src: this.image,
-          })
-          this.currentSrc = this.image
-          if (this._loadedCb) this.spriteTexture.on('loaded', this._loadedCb)
-          if (this._failedCb) this.spriteTexture.on('failed', this._failedCb)
-        }
-
-        // Resolve frame data from sprite map
-        let options = null
-        if (
-          this.map !== null &&
-          this.map !== undefined &&
-          this.frame !== null &&
-          this.frame !== undefined
-        ) {
-          if (
-            this.map.frames !== null &&
-            this.map.frames !== undefined &&
-            this.frame in this.map.frames
-          ) {
-            options = Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
-          } else if (this.frame in this.map) {
-            options = this.map[this.frame]
-          }
-        }
-
-        // If no map but frame is object (manual subtexture)
-        if ((options === null || options === undefined) && typeof this.frame === 'object') {
-          options = this.frame
-        }
-
-        // Create SubTexture only if frame data exists
-        if (options !== null && options !== undefined) {
-          return renderer.createTexture('SubTexture', {
-            texture: this.spriteTexture,
-            x: options.x,
-            y: options.y,
-            w: options.w,
-            h: options.h,
-          })
-        }
-
-        // Default fallback (single image)
-        return this.spriteTexture
-      },
-    },
-  })