@lightningjs/blits 1.45.0 → 2.0.0-beta.1

package/src/components/Sprite.js

@@ -25,6 +25,47 @@ export default () =>
     code: {
       render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
+        const validAttributes = [
+          'parent',
+          'rotation',
+          'w',
+          'width',
+          'h',
+          'height',
+          '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',
+        ]
         const elementConfigs = []
         const forloops = []
         const props = []
@@ -45,8 +86,8 @@ export default () =>
           inSlot === true ? slotComponent : component
         )
 
-        elementConfigs[0]['w'] = parent.node.width * (100 / 100)
-        elementConfigs[0]['h'] = parent.node.height * (100 / 100)
+        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]['effects'] = component.effects
@@ -72,20 +113,25 @@ export default () =>
             props.length = 0
             skips.length = 0
           },
+          skips,
         }
       },
       effects: [
-        function anonymous(component, elms, context, components, rootComponent, effect) {
+        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
           elms[0].set('texture', component.texture)
         },
-        function anonymous(component, elms, context, components, rootComponent, effect) {
+        function anonymous(component, elms, context, components, rootComponent, skips, effect) {
           elms[0].set('color', component.color)
         },
       ],
       context: {},
     },
-    props: ['image', 'map', 'frame', 'color', 'effects'],
-
+    props: {
+      image: undefined,
+      map: undefined,
+      frame: undefined,
+      color: undefined,
+    },
     state() {
       return {
         spriteTexture: null,
@@ -121,20 +167,15 @@ export default () =>
         // Resolve frame data from sprite map
         let options = null
         if (
-          this.map !== null &&
           this.map !== undefined &&
-          this.frame !== null &&
-          this.frame !== undefined
+          this.map !== null &&
+          this.frame !== undefined &&
+          this.frame !== null
         ) {
-          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]
-          }
+          options =
+            'frames' in this.map
+              ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
+              : this.map[this.frame]
         }
 
         // If no map but frame is object (manual subtexture)
@@ -148,8 +189,8 @@ export default () =>
             texture: this.spriteTexture,
             x: options.x,
             y: options.y,
-            width: options.w,
-            height: options.h,
+            w: options.w,
+            h: options.h,
           })
         }
 

package/src/engines/L3/element.js

@@ -16,11 +16,13 @@
  */
 
 import { renderer } from './launch.js'
+import { parseToObject, isObjectString, isArrayString, isTransition } from '../../lib/utils.js'
 import colors from '../../lib/colors/colors.js'
 
 import { Log } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
+import shaders from '../../lib/shaders/shaders.js'
 
 /**
  * Creates a padding object from a value and direction.
@@ -79,8 +81,8 @@ const layoutFn = function (config) {
   const position = config.direction === 'vertical' ? 'y' : 'x'
   const oppositePosition = config.direction === 'vertical' ? 'x' : 'y'
   const oppositeMount = config.direction === 'vertical' ? 'mountX' : 'mountY'
-  const dimension = config.direction === 'vertical' ? 'height' : 'width'
-  const oppositeDimension = config.direction === 'vertical' ? 'width' : 'height'
+  const dimension = config.direction === 'vertical' ? 'h' : 'w'
+  const oppositeDimension = config.direction === 'vertical' ? 'w' : 'h'
   const padding = createPaddingObject(config.padding, config.direction)
 
   let offset = padding.start
@@ -98,17 +100,10 @@ const layoutFn = function (config) {
     node[position] = offset
     node[oppositePosition] = padding.oppositeStart
     // todo: temporary text check, due to 1px width of empty text node
-    if (dimension === 'width') {
-      offset += node.width + (node.width !== ('text' in node ? 1 : 0) ? gap : 0)
+    if (dimension === 'w') {
+      offset += node.w + (node.w !== ('text' in node ? 1 : 0) ? gap : 0)
     } else {
-      offset +=
-        'text' in node
-          ? node.width > 1
-            ? node.height + gap
-            : 0
-          : node.height !== 0
-            ? node.height + gap
-            : 0
+      offset += 'text' in node ? (node.w > 1 ? node.h + gap : 0) : node.h !== 0 ? node.h + gap : 0
     }
     otherDimension = Math.max(
       otherDimension,
@@ -135,7 +130,7 @@ const layoutFn = function (config) {
 
   // emit an updated event
   if (config['@updated'] !== undefined) {
-    config['@updated']({ w: this.node.width, h: this.node.height }, this)
+    config['@updated']({ w: this.node.w, h: this.node.h }, this)
   }
 
   // trigger layout on parent if parent is a layout
@@ -144,33 +139,6 @@ const layoutFn = function (config) {
   }
 }
 
-/**
- * Checks if a value is a transition object.
- * @param {any} value - The value to check.
- * @returns {boolean} True if the value is a transition object, false otherwise.
- */
-const isTransition = (value) => {
-  return value !== null && typeof value === 'object' && 'transition' in value === true
-}
-
-/**
- * Checks if a string is an object string (starts and ends with curly braces).
- * @param {string} str - The string to check.
- * @returns {boolean} True if the string is an object string, false otherwise.
- */
-const isObjectString = (str) => {
-  return typeof str === 'string' && str.startsWith('{') && str.endsWith('}')
-}
-
-/**
- * Parses a string into an object, converting single quotes to double and adding quotes to keys.
- * @param {string} str - The string to parse.
- * @returns {object} The parsed object.
- */
-const parseToObject = (str) => {
-  return JSON.parse(str.replace(/'/g, '"').replace(/([{,]\s*)([\w-_]+)(\s*:)/g, '$1"$2"$3'))
-}
-
 /**
  * Parses a percentage string or returns the value as-is.
  * @param {string|number} v - The value to parse (may be a percentage string).
@@ -242,22 +210,24 @@ const propsTransformer = {
     this.props['rotation'] = v * (Math.PI / 180)
   },
   set w(v) {
-    this.props['width'] = parsePercentage.call(this, v, 'width')
+    if (v < 0) v = 0
+    this.props['w'] = parsePercentage.call(this, v, 'w')
   },
   set width(v) {
-    this.props['width'] = parsePercentage.call(this, v, 'width')
+    this.w = v
   },
   set h(v) {
-    this.props['height'] = parsePercentage.call(this, v, 'height')
+    if (v < 0) v = 0
+    this.props['h'] = parsePercentage.call(this, v, 'h')
   },
   set height(v) {
-    this.props['height'] = parsePercentage.call(this, v, 'height')
+    this.h = v
   },
   set x(v) {
-    this.props['x'] = parsePercentage.call(this, v, 'width')
+    this.props['x'] = parsePercentage.call(this, v, 'w')
   },
   set y(v) {
-    this.props['y'] = parsePercentage.call(this, v, 'height')
+    this.props['y'] = parsePercentage.call(this, v, 'h')
   },
   set z(v) {
     this.props['zIndex'] = v
@@ -287,7 +257,7 @@ const propsTransformer = {
       this.props['color'] = this.props['src'] ? 0xffffffff : 0x00000000
     }
     // apply auto sizing when no width or height specified
-    if (!('w' in this.raw) && !('w' in this.raw) && !('h' in this.raw) && !('height' in this.raw)) {
+    if (!('w' in this.raw) && !('h' in this.raw)) {
       this.props['autosize'] = true
     }
   },
@@ -379,37 +349,68 @@ const propsTransformer = {
       this.props['alpha'] = v
     }
   },
+  set rounded(v) {
+    this.props['rounded'] = v
+    if (this.element.node !== undefined && this.elementShader === true) {
+      if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+        this.element.node.props['shader'].props = v
+      } else {
+        if (isArrayString(v) === true) {
+          v = JSON.parse(v)
+        }
+        this.element.node.props['shader'].props.radius = v
+      }
+    }
+  },
+  set border(v) {
+    this.props['border'] = v
+    if (
+      this.element.node !== undefined &&
+      this.elementShader === true &&
+      (typeof v === 'object' || isObjectString(v) === true)
+    ) {
+      v = shaders.parseProps(v)
+      for (const key in v) {
+        this.element.node.props['shader'].props[`border-${key}`] = v[key]
+      }
+    }
+  },
+  set shadow(v) {
+    this.props['shadow'] = v
+    if (
+      this.element.node !== undefined &&
+      this.elementShader === true &&
+      (typeof v === 'object' || isObjectString(v) === true)
+    ) {
+      v = shaders.parseProps(v)
+      for (const key in v) {
+        this.element.node.props['shader'].props[`shadow-${key}`] = v[key]
+      }
+    }
+  },
   set shader(v) {
+    let type = v
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      type = v.type
+      v = shaders.parseProps(v)
+    }
     const target = this.element.node !== undefined ? this.element.node : this.props
-
-    if (v === null) {
-      target['shader'] = null
+    //if v remains a string we can change shader types
+    if (typeof v === 'string') {
+      target['shader'] = renderer.createShader(type)
       return
     }
 
-    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
-      if (target.shader !== undefined && target.shader.type === v.type) {
-        for (const prop in v.props) {
-          target.shader.props[prop] = v.props[prop]
-        }
+    //check again if v is an object since it could have been an object string
+    if (typeof v === 'object') {
+      if (target.shader !== undefined && type === target.shader.shaderKey) {
+        target['shader'].props = v
         return
       }
-      target['shader'] = renderer.createShader(v.type, v.props)
-    }
-  },
-  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)
-      }
-    }
-    if (this.element.node === undefined) {
-      this.props['shader'] = renderer.createShader('DynamicShader', {
-        effects: v.map((effect) => {
-          return renderer.createEffect(effect.type, effect.props)
-        }),
-      })
+      target['shader'] = renderer.createShader(type, v)
+      return
     }
+    target['shader'] = renderer.createShader('DefaultShader')
   },
   set clipping(v) {
     this.props['clipping'] = v
@@ -423,21 +424,27 @@ const propsTransformer = {
   set size(v) {
     this.props['fontSize'] = v
   },
-  set wordwrap(v) {
-    Log.warn('The wordwrap attribute is deprecated, use maxwidth instead')
-    this.props['width'] = v
-    this.props['contain'] = 'width'
-  },
   set maxwidth(v) {
-    this.props['width'] = v
+    this.props['maxWidth'] = v
+    if (this.manualTextContain === true) {
+      return
+    }
+    if (this.props['contain'] === 'height') {
+      this.props['contain'] = 'both'
+      return
+    }
     this.props['contain'] = 'width'
   },
   set maxheight(v) {
-    this.props['height'] = v
-    this.props['contain'] = 'both'
-  },
-  set contain(v) {
-    this.props['contain'] = v
+    this.props['maxHeight'] = v
+    if (this.manualTextContain === true) {
+      return
+    }
+    if (this.props['contain'] === 'width') {
+      this.props['contain'] = 'both'
+      return
+    }
+    this.props['contain'] = 'height'
   },
   set maxlines(v) {
     this.props['maxLines'] = v
@@ -451,6 +458,10 @@ const propsTransformer = {
   set lineheight(v) {
     this.props['lineHeight'] = v
   },
+  set contain(v) {
+    this.props['contain'] = v
+    this.manualTextContain = true
+  },
   set align(v) {
     this.props['textAlign'] = v
   },
@@ -500,13 +511,14 @@ const propsTransformer = {
   },
 }
 
+export const elementAttributes = Object.keys(propsTransformer)
+
 const Element = {
   /**
    * Populates the element with data
-   * @param {import('../../component.js').BlitsElementProps} data
+   * @param {import('../../component.js').BlitsElementProps} props
    */
-  populate(data) {
-    const props = data
+  populate(props) {
     props['node'] = this.config.node
 
     if (props[symbols.isSlot] === true) {
@@ -519,11 +531,22 @@ const Element = {
     //@ts-ignore This might be a left over from the old code?
     delete props.parent
 
-    this.props.raw = data
+    this.props.raw = props
+    this.props.elementShader = false
 
     const propKeys = Object.keys(props)
     const length = propKeys.length
 
+    if (
+      props['shader'] === undefined &&
+      (props['rounded'] !== undefined ||
+        props['border'] !== undefined ||
+        props['shadow'] !== undefined)
+    ) {
+      this.props.elementShader = true
+      this.props.props['shader'] = shaders.createElementShader(props)
+    }
+
     for (let i = 0; i < length; i++) {
       const key = propKeys[i]
       const value = props[key]
@@ -543,7 +566,7 @@ const Element = {
 
     if (props['@loaded'] !== undefined && typeof props['@loaded'] === 'function') {
       this.node.on('loaded', (el, { type, dimensions }) => {
-        props['@loaded']({ w: dimensions.width, h: dimensions.height, type }, this)
+        props['@loaded']({ w: dimensions.w, h: dimensions.h, type }, this)
       })
     }
 

package/src/engines/L3/fontLoader.js

@@ -1,38 +1,33 @@
-import { SdfTrFontFace, WebTrFontFace } from '@lightningjs/renderer'
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
 
+const fontTypeMapping = {
+  sdf: 'sdf',
+  msdf: 'sdf',
+  canvas: 'canvas',
+  web: 'canvas',
+}
+
 export default () => {
   const stage = renderer.stage
-  Settings.get('fonts', []).forEach((font) => {
-    if (font.type === 'sdf' || font.type === 'msdf') {
-      // automatically map png key to file name
-      if (!font.png && font.file) {
-        font.png = font.file.replace(/\.[^.]+$/, `.${font.type}.png`)
-      }
-      // automatically map json to file name
-      if (!font.json && font.file) {
-        font.json = font.file.replace(/\.[^.]+$/, `.${font.type}.json`)
-      }
-      stage.fontManager.addFontFace(
-        new SdfTrFontFace(font.type, {
-          fontFamily: font.family,
-          descriptors: {},
-          atlasUrl: font.png,
-          atlasDataUrl: font.json,
-          stage,
-          metrics: font.metrics,
-        })
-      )
-    } else if (font.type === 'web') {
-      stage.fontManager.addFontFace(
-        new WebTrFontFace({
-          fontFamily: font.family,
-          fontUrl: font.file,
-          descriptors: {},
-          metrics: font.metrics,
-        })
-      )
+
+  const fonts = Settings.get('fonts', [])
+  for (let i = 0; i < fonts.length; i++) {
+    const font = fonts[i]
+    const type = fontTypeMapping[font.type] || 'sdf'
+
+    if (type === 'sdf') {
+      stage.loadFont('sdf', {
+        fontFamily: font.family,
+        atlasUrl: font.json || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.png`)),
+        atlasDataUrl:
+          font.json || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.json`)),
+      })
+    } else {
+      stage.loadFont('canvas', {
+        fontFamily: font.family,
+        fontUrl: font.file,
+      })
     }
-  })
+  }
 }

package/src/engines/L3/shaderLoader.js

@@ -1,12 +1,62 @@
 import Settings from '../../settings.js'
 import { renderer } from './launch.js'
+import * as webglShaders from '@lightningjs/renderer/webgl/shaders'
+import * as canvasShaders from '@lightningjs/renderer/canvas/shaders'
+
+function registerBlitsDefaultShaders(
+  shManager,
+  Rounded,
+  Border,
+  Shadow,
+  RoundedWithBorder,
+  RoundedWithShadow,
+  RoundedWithBorderAndShadow,
+  HolePunch,
+  RadialGradient,
+  LinearGradient
+) {
+  shManager.registerShaderType('rounded', Rounded)
+  shManager.registerShaderType('border', Border)
+  shManager.registerShaderType('shadow', Shadow)
+  shManager.registerShaderType('roundedWithBorder', RoundedWithBorder)
+  shManager.registerShaderType('roundedWithShadow', RoundedWithShadow)
+  shManager.registerShaderType('roundedWithBorderAndShadow', RoundedWithBorderAndShadow)
+  shManager.registerShaderType('holePunch', HolePunch)
+  shManager.registerShaderType('radialGradient', RadialGradient)
+  shManager.registerShaderType('linearGradient', LinearGradient)
+}
 
 export default () => {
   const stage = renderer.stage
-  Settings.get('shaders', []).forEach((shader) => {
-    stage.shManager.registerShaderType(shader.name, shader.type)
-  })
-  Settings.get('effects', []).forEach((effect) => {
-    stage.shManager.registerShaderType(effect.name, effect.type)
-  })
+
+  const {
+    Rounded,
+    Border,
+    Shadow,
+    RoundedWithBorder,
+    RoundedWithShadow,
+    RoundedWithBorderAndShadow,
+    HolePunch,
+    RadialGradient,
+    LinearGradient,
+  } = Settings.get('renderMode', 'webgl') === 'webgl' ? webglShaders : canvasShaders
+
+  registerBlitsDefaultShaders(
+    stage.shManager,
+    Rounded,
+    Border,
+    Shadow,
+    RoundedWithBorder,
+    RoundedWithShadow,
+    RoundedWithBorderAndShadow,
+    HolePunch,
+    RadialGradient,
+    LinearGradient
+  )
+
+  const shaders = Settings.get('shaders', [])
+  const len = shaders.length
+  for (let i = 0; i < len; i++) {
+    stage.shManager.registerShaderType(shaders[i].name, shaders[i].type)
+  }
 }

package/src/focus.js

@@ -50,7 +50,7 @@ export default {
 
     // unfocus currently focused components
     if (focusedComponent !== null) {
-      if (focusChain[focusChain.length - 1] === component.parent) {
+      if (focusChain[focusChain.length - 1] === component[symbols.parent]) {
         focusChain.push(component)
       } else {
         const newFocusChain = getAncestors([component])
@@ -58,7 +58,7 @@ export default {
         while (i--) {
           // don't unfocus when part of the new focus chain
           if (newFocusChain.indexOf(focusChain[i]) > -1) break
-          focusChain[i].lifecycle.state = 'unfocus'
+          focusChain[i][symbols.lifecycle].state = 'unfocus'
         }
         focusChain = newFocusChain
       }
@@ -67,7 +67,7 @@ export default {
     // ensure that all components in the focus path have focus state
     let i = 0
     while (i < focusChain.length - 1) {
-      focusChain[i].lifecycle.state = 'focus'
+      focusChain[i][symbols.lifecycle].state = 'focus'
       i++
     }
 
@@ -105,8 +105,8 @@ export default {
  * @returns array components
  */
 const getAncestors = (components) => {
-  if (components[0].parent !== undefined) {
-    components.unshift(components[0].parent)
+  if (components[0][symbols.parent] !== undefined) {
+    components.unshift(components[0][symbols.parent])
     return getAncestors(components)
   }
   return components
@@ -125,8 +125,8 @@ export const getComponentWithInputEvent = (component, key) => {
       typeof component[symbols.inputEvents].any === 'function')
   ) {
     return component
-  } else if (component.parent !== undefined) {
-    return getComponentWithInputEvent(component.parent, key)
+  } else if (component[symbols.parent] !== undefined) {
+    return getComponentWithInputEvent(component[symbols.parent], key)
   } else return null
 }
 
@@ -138,11 +138,11 @@ export const getComponentWithInputEvent = (component, key) => {
 const setFocus = (component, event) => {
   Log.info(
     '\nFocus chain:\n',
-    focusChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.componentId).join('\n')
+    focusChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.$componentId).join('\n')
   )
 
   focusedComponent = component
-  component.lifecycle.state = 'focus'
+  component[symbols.lifecycle].state = 'focus'
 
   if (event instanceof KeyboardEvent) {
     const internalEvent = new KeyboardEvent('keydown', event)

package/src/launch.js

@@ -41,9 +41,8 @@ import blitsPackageInfo from '../package.json' with { type: 'json' }
 
 /**
  * @typedef {import('@lightningjs/renderer').RendererMain} RendererMain
- * @type {RendererMain}
+ * @type {RendererMain | {}}
  */
-// @ts-ignore - We ignore this because it will be replaced by the renderer once the app is launched
 export let renderer = {}
 export const stage = {}