@lightningjs/blits 1.18.1 → 1.19.0

package/src/components/RouterView.js

@@ -22,30 +22,36 @@ let hashchangeHandler = null
 
 export default () =>
   Component('RouterView', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context,components,effect,getRaw
-) {
-const elms = []
-let componentType
-const rootComponent = component
-let propData
-let slotComponent
-let inSlot = false
-let slotChildCounter = 0
-const elementConfig0 = {}
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
+        const elms = []
+        let componentType
+        const rootComponent = component
+        let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
+        const elementConfig0 = {}
 
-    elms[0] = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
-  
-elementConfig0['w'] = parent.node.width * (100 / 100)
-elementConfig0['height'] = parent.node.height * (100 / 100)
-elms[0].populate(elementConfig0)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
-    if(inSlot === true) {
-      slotChildCounter -= 1
-    }
-  
-return elms
-}, effects: [], context: {}},
+        elementConfig0['w'] = parent.node.width * (100 / 100)
+        elementConfig0['height'] = parent.node.height * (100 / 100)
+        elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
+        return elms
+      },
+      effects: [],
+      context: {},
+    },
     state() {
       return {
         activeView: null,
@@ -56,7 +62,6 @@ return elms
         hashchangeHandler = () => Router.navigate.apply(this)
         Router.navigate.apply(this)
         window.addEventListener('hashchange', hashchangeHandler)
-
       },
       destroy() {
         window.removeEventListener('hashchange', hashchangeHandler, false)

package/src/components/Sprite.js

@@ -21,42 +21,45 @@ 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
-) {
-const elms = []
-let componentType
-const rootComponent = component
-let propData
-let slotComponent
-let inSlot = false
-let slotChildCounter = 0
-const elementConfig0 = {}
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context, components, effect, getRaw) {
+        const elms = []
+        let componentType
+        const rootComponent = component
+        let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
+        const elementConfig0 = {}
 
-    elms[0] = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
-  
-elementConfig0['w'] = parent.node.width * (100 / 100)
-elementConfig0['h'] = parent.node.height * (100 / 100)
-elementConfig0['texture'] = component.texture
-elementConfig0['color'] = component.color
-elms[0].populate(elementConfig0)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
-    if(inSlot === true) {
-      slotChildCounter -= 1
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context,components,rootComponent,effect
-) {
+        elementConfig0['w'] = parent.node.width * (100 / 100)
+        elementConfig0['h'] = parent.node.height * (100 / 100)
+        elementConfig0['texture'] = component.texture
+        elementConfig0['color'] = component.color
+        elms[0].populate(elementConfig0)
 
-            elms[0].set('texture', component.texture)
-          
-},function anonymous(component,elms,context,components,rootComponent,effect
-) {
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
 
-            elms[0].set('color', component.color)
-          
-}], context: {}},
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('texture', component.texture)
+        },
+        function anonymous(component, elms, context, components, rootComponent, effect) {
+          elms[0].set('color', component.color)
+        },
+      ],
+      context: {},
+    },
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {

package/src/constants.js

@@ -12,3 +12,10 @@ export const SCREEN_RESOLUTIONS = {
   '2160p': 2,
   2160: 2,
 }
+
+export const RENDER_QUALITIES = {
+  low: 0.66666667,
+  medium: 0.85,
+  high: 1,
+  retina: 2,
+}

package/src/engines/L3/element.js

@@ -299,7 +299,7 @@ const propsTransformer = {
   },
   set show(v) {
     if (v) {
-      this.props['alpha'] = 1
+      this.props['alpha'] = this.raw['alpha'] !== undefined ? this.raw['alpha'] : 1
       this.props['width'] = this.raw['w'] || this.raw['width'] || 0
       this.props['height'] = this.raw['h'] || this.raw['height'] || 0
     } else {
@@ -309,7 +309,9 @@ const propsTransformer = {
     }
   },
   set alpha(v) {
-    this.props['alpha'] = v
+    if(this.raw['show'] === undefined || this.raw['show'] === true) {
+      this.props['alpha'] = v
+    }
   },
   set shader(v) {
     if (v !== null) {
@@ -419,6 +421,11 @@ const propsTransformer = {
       this.props['mountY'] = 1
     }
   },
+  set 'inspector-data'(v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      this.props['data'] = v
+    }
+  },
 }
 
 const Element = {

package/src/engines/L3/launch.js

@@ -21,7 +21,7 @@ import { CanvasCoreRenderer, CanvasTextRenderer } from '@lightningjs/renderer/ca
 import { Inspector } from '@lightningjs/renderer/inspector'
 
 import { Log } from '../../lib/log.js'
-import { SCREEN_RESOLUTIONS } from '../../constants.js'
+import { SCREEN_RESOLUTIONS, RENDER_QUALITIES } from '../../constants.js'
 import colors from '../../lib/colors/colors.js'
 import fontLoader from './fontLoader.js'
 import shaderLoader from './shaderLoader.js'
@@ -43,11 +43,15 @@ const textRenderEngines = (settings) => {
 }
 
 export default (App, target, settings = {}) => {
+  console.log(RENDER_QUALITIES[settings.renderQuality] || settings.renderQuality || 1)
+
   renderer = new RendererMain(
     {
       appWidth: settings.w || 1920,
       appHeight: settings.h || 1080,
       fpsUpdateInterval: settings.fpsInterval || 1000,
+      devicePhysicalPixelRatio:
+        RENDER_QUALITIES[settings.renderQuality] || settings.renderQuality || 1,
       deviceLogicalPixelRatio:
         settings.pixelRatio ||
         SCREEN_RESOLUTIONS[settings.screenResolution] ||
@@ -66,7 +70,7 @@ export default (App, target, settings = {}) => {
       renderEngine: renderEngine(settings),
       fontEngines: textRenderEngines(settings),
       canvas: settings.canvas,
-      textureProcessingTimeLimit: settings.textureProcessingTimeLimit
+      textureProcessingTimeLimit: settings.textureProcessingTimeLimit,
     },
     target
   )

package/src/focus.js

@@ -16,7 +16,7 @@
  */
 
 import symbols from './lib/symbols.js'
-import { navigating } from './router/router.js'
+import { state } from './router/router.js'
 import Settings from './settings.js'
 import { DEFAULT_HOLD_TIMEOUT_MS } from './constants.js'
 
@@ -58,7 +58,7 @@ export default {
     }
   },
   input(key, event) {
-    if (navigating === true) return
+    if (state.navigating === true) return
     focusChain = walkChain([focusedComponent], key)
     const componentWithInputEvent = focusChain.shift()
 

package/src/lib/reactivity/reactive.js

@@ -107,10 +107,14 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
           : oldRawValue === rawValue
 
       if (isEqual === false) {
-        if(typeof value === 'object') {
+        if (typeof value === 'object') {
           if (Array.isArray(value) === true) {
             value = getRaw(value).slice(0)
-          } else if(target[key] !== null && target[key] !== undefined && Object.getPrototypeOf(value) === Object.prototype) {
+          } else if (
+            target[key] !== null &&
+            target[key] !== undefined &&
+            Object.getPrototypeOf(value) === Object.prototype
+          ) {
             value = Object.assign(receiver[key], value)
           }
         }

package/src/router/router.js

@@ -16,6 +16,7 @@
  */
 
 import { default as fadeInFadeOutTransition } from './transitions/fadeInOut.js'
+import { reactive } from '../lib/reactivity/reactive.js'
 
 import symbols from '../lib/symbols.js'
 import { Log } from '../lib/log.js'
@@ -24,7 +25,7 @@ import Focus from '../focus.js'
 import Announcer from '../announcer/announcer.js'
 
 export let currentRoute
-export let navigating = false
+export const state = reactive({ path: null, navigating: false })
 
 const cacheMap = new WeakMap()
 const history = []
@@ -114,7 +115,7 @@ export const matchHash = (path, routes = []) => {
 }
 
 export const navigate = async function () {
-  navigating = true
+  state.navigating = true
   if (this.parent[symbols.routes]) {
     const previousRoute = currentRoute
     const { hash, queryParams } = getHash()
@@ -237,6 +238,8 @@ export const navigate = async function () {
         }
       }
 
+      state.path = route.path
+
       // apply in transition
       if (route.transition.in) {
         if (Array.isArray(route.transition.in)) {
@@ -268,7 +271,7 @@ export const navigate = async function () {
 
   // reset navigating indicators
   navigatingBack = false
-  navigating = false
+  state.navigating = false
 }
 
 const removeView = async (route, view, transition) => {
@@ -320,7 +323,7 @@ export const to = (location, data = {}, options = {}) => {
   window.location.hash = `#${location}`
 }
 
-export const back = function(){
+export const back = function () {
   const route = history.pop()
   if (route && currentRoute !== route) {
     // set indicator that we are navigating back (to prevent adding page to history stack)
@@ -335,11 +338,11 @@ export const back = function(){
     return true
   }
 
-  const backtrack = currentRoute && currentRoute.options.backtrack || false
+  const backtrack = (currentRoute && currentRoute.options.backtrack) || false
 
   // If we deeplink to a page without backtrack
   // we we let the RouterView handle back
-  if(!backtrack){
+  if (backtrack === false) {
     return false
   }
 
@@ -348,19 +351,19 @@ export const back = function(){
   let level = path.split('/').length
 
   // On root return
-  if(level <= 1){
+  if (level <= 1) {
     return false
   }
 
-  while(level--){
-    if(!hashEnd.test(path)){
+  while (level--) {
+    if (!hashEnd.test(path)) {
       return false
     }
     // Construct new path to backtrack to
     path = path.replace(hashEnd, '')
     const route = matchHash(path, this.parent[symbols.routes])
 
-    if(route && backtrack){
+    if (route && backtrack) {
       to(route.path)
       return true
     }