@lightningjs/blits 1.48.0 → 2.0.0-beta.2

package/src/components/RouterView.js

@@ -32,6 +32,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 = []
@@ -53,8 +94,8 @@ export default () =>
             inSlot === true ? slotComponent : component
           )
 
-          elementConfigs[0]['w'] = parent.node.width * (100 / 100)
-          elementConfigs[0]['height'] = parent.node.height * (100 / 100)
+          elementConfigs[0]['w'] = parent.node.w * (100 / 100)
+          elementConfigs[0]['height'] = parent.node.h * (100 / 100)
           elms[0].populate(elementConfigs[0])
 
           if (inSlot === true) {
@@ -77,6 +118,7 @@ export default () =>
               props.length = 0
               skips.length = 0
             },
+            skips,
           }
         },
         effects: [],
@@ -89,9 +131,11 @@ export default () =>
       },
       hooks: {
         async ready() {
-          if (this.parent[symbols.routerHooks] && this.parent[symbols.routerHooks].init) {
-            await this.parent[symbols.routerHooks].init.apply(this.parent)
+          const parent = this[symbols.parent]
+          if (parent && parent[symbols.routerHooks] && parent[symbols.routerHooks].init) {
+            await parent[symbols.routerHooks].init.apply(parent)
           }
+
           hashchangeHandler = () => Router.navigate.apply(this)
           Router.navigate.apply(this)
           window.addEventListener('hashchange', hashchangeHandler)
@@ -107,13 +151,20 @@ export default () =>
       },
       input: {
         back(e) {
+          const parent = this[symbols.parent]
+
           if (routerState.backNavigation === false) {
-            this.parent.$input(e)
+            if (parent && parent.$input) {
+              parent.$input(e)
+            }
             return
           }
+
           const navigating = Router.back.call(this)
           if (navigating === false) {
-            this.parent.$focus(e)
+            if (parent && parent.$focus) {
+              parent.$focus(e)
+            }
           }
         },
       },

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 = []
@@ -46,8 +87,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
@@ -73,20 +114,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,
@@ -149,8 +195,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,36 +210,38 @@ const propsTransformer = {
     this.props['rotation'] = v * (Math.PI / 180)
   },
   set w(v) {
-    this.props['width'] = parsePercentage.call(this, v, 'width')
+    const parsed = parsePercentage.call(this, v, 'w')
+    this.props['w'] = parsed
     if (
       this.___wrapper === true &&
       this.element.component.eol !== true &&
       this.element.component[symbols.holder] !== undefined
     ) {
-      this.element.component[symbols.holder].set('w', this.props['width'])
+      this.element.component[symbols.holder].set('w', parsed)
     }
   },
   set width(v) {
     this.w = v
   },
   set h(v) {
-    this.props['height'] = parsePercentage.call(this, v, 'height')
+    const parsed = parsePercentage.call(this, v, 'h')
+    this.props['h'] = parsed
     if (
       this.___wrapper === true &&
       this.element.component.eol !== true &&
       this.element.component[symbols.holder] !== undefined
     ) {
-      this.element.component[symbols.holder].set('h', this.props['height'])
+      this.element.component[symbols.holder].set('h', parsed)
     }
   },
   set height(v) {
     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
@@ -301,7 +271,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
     }
   },
@@ -393,37 +363,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
@@ -437,21 +438,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
@@ -465,6 +472,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
   },
@@ -514,13 +525,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) {
@@ -533,11 +545,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]
@@ -557,7 +580,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)
+  }
 }