@lightningjs/blits 1.1.0 → 1.3.0

package/src/components/FPScounter.js

@@ -60,9 +60,11 @@ export default () =>
         elementConfig3['map'] = component.sprite
         elementConfig3['frame'] = 'fps'
 
+        const skip3 = []
         if (typeof cmp3 !== 'undefined') {
           for (let key in cmp3.config.props) {
             delete elementConfig3[cmp3.config.props[key]]
+            skip3.push(cmp3.config.props[key])
           }
         }
 
@@ -120,9 +122,11 @@ export default () =>
         elementConfig6['map'] = component.sprite
         elementConfig6['frame'] = component.fps[0]
 
+        const skip6 = []
         if (typeof cmp6 !== 'undefined') {
           for (let key in cmp6.config.props) {
             delete elementConfig6[cmp6.config.props[key]]
+            skip6.push(cmp6.config.props[key])
           }
         }
 
@@ -172,9 +176,11 @@ export default () =>
         elementConfig8['map'] = component.sprite
         elementConfig8['frame'] = component.fps[1]
 
+        const skip8 = []
         if (typeof cmp8 !== 'undefined') {
           for (let key in cmp8.config.props) {
             delete elementConfig8[cmp8.config.props[key]]
+            skip8.push(cmp8.config.props[key])
           }
         }
 
@@ -224,9 +230,11 @@ export default () =>
         elementConfig10['map'] = component.sprite
         elementConfig10['frame'] = component.fps[2]
 
+        const skip10 = []
         if (typeof cmp10 !== 'undefined') {
           for (let key in cmp10.config.props) {
             delete elementConfig10[cmp10.config.props[key]]
+            skip10.push(cmp10.config.props[key])
           }
         }
 
@@ -284,9 +292,11 @@ export default () =>
         elementConfig13['map'] = component.sprite
         elementConfig13['frame'] = 'avg'
 
+        const skip13 = []
         if (typeof cmp13 !== 'undefined') {
           for (let key in cmp13.config.props) {
             delete elementConfig13[cmp13.config.props[key]]
+            skip13.push(cmp13.config.props[key])
           }
         }
 
@@ -345,9 +355,11 @@ export default () =>
         elementConfig16['map'] = component.sprite
         elementConfig16['frame'] = component.avgFps[0]
 
+        const skip16 = []
         if (typeof cmp16 !== 'undefined') {
           for (let key in cmp16.config.props) {
             delete elementConfig16[cmp16.config.props[key]]
+            skip16.push(cmp16.config.props[key])
           }
         }
 
@@ -397,9 +409,11 @@ export default () =>
         elementConfig18['map'] = component.sprite
         elementConfig18['frame'] = component.avgFps[1]
 
+        const skip18 = []
         if (typeof cmp18 !== 'undefined') {
           for (let key in cmp18.config.props) {
             delete elementConfig18[cmp18.config.props[key]]
+            skip18.push(cmp18.config.props[key])
           }
         }
 
@@ -449,9 +463,11 @@ export default () =>
         elementConfig20['map'] = component.sprite
         elementConfig20['frame'] = component.avgFps[2]
 
+        const skip20 = []
         if (typeof cmp20 !== 'undefined') {
           for (let key in cmp20.config.props) {
             delete elementConfig20[cmp20.config.props[key]]
+            skip20.push(cmp20.config.props[key])
           }
         }
 
@@ -510,9 +526,11 @@ export default () =>
         elementConfig23['map'] = component.sprite
         elementConfig23['frame'] = 'min'
 
+        const skip23 = []
         if (typeof cmp23 !== 'undefined') {
           for (let key in cmp23.config.props) {
             delete elementConfig23[cmp23.config.props[key]]
+            skip23.push(cmp23.config.props[key])
           }
         }
 
@@ -571,9 +589,11 @@ export default () =>
         elementConfig26['map'] = component.sprite
         elementConfig26['frame'] = component.minFps[0]
 
+        const skip26 = []
         if (typeof cmp26 !== 'undefined') {
           for (let key in cmp26.config.props) {
             delete elementConfig26[cmp26.config.props[key]]
+            skip26.push(cmp26.config.props[key])
           }
         }
 
@@ -623,9 +643,11 @@ export default () =>
         elementConfig28['map'] = component.sprite
         elementConfig28['frame'] = component.minFps[1]
 
+        const skip28 = []
         if (typeof cmp28 !== 'undefined') {
           for (let key in cmp28.config.props) {
             delete elementConfig28[cmp28.config.props[key]]
+            skip28.push(cmp28.config.props[key])
           }
         }
 
@@ -675,9 +697,11 @@ export default () =>
         elementConfig30['map'] = component.sprite
         elementConfig30['frame'] = component.minFps[2]
 
+        const skip30 = []
         if (typeof cmp30 !== 'undefined') {
           for (let key in cmp30.config.props) {
             delete elementConfig30[cmp30.config.props[key]]
+            skip30.push(cmp30.config.props[key])
           }
         }
 
@@ -735,9 +759,11 @@ export default () =>
         elementConfig33['map'] = component.sprite
         elementConfig33['frame'] = 'max'
 
+        const skip33 = []
         if (typeof cmp33 !== 'undefined') {
           for (let key in cmp33.config.props) {
             delete elementConfig33[cmp33.config.props[key]]
+            skip33.push(cmp33.config.props[key])
           }
         }
 
@@ -795,9 +821,11 @@ export default () =>
         elementConfig36['map'] = component.sprite
         elementConfig36['frame'] = component.maxFps[0]
 
+        const skip36 = []
         if (typeof cmp36 !== 'undefined') {
           for (let key in cmp36.config.props) {
             delete elementConfig36[cmp36.config.props[key]]
+            skip36.push(cmp36.config.props[key])
           }
         }
 
@@ -847,9 +875,11 @@ export default () =>
         elementConfig38['map'] = component.sprite
         elementConfig38['frame'] = component.maxFps[1]
 
+        const skip38 = []
         if (typeof cmp38 !== 'undefined') {
           for (let key in cmp38.config.props) {
             delete elementConfig38[cmp38.config.props[key]]
+            skip38.push(cmp38.config.props[key])
           }
         }
 
@@ -899,9 +929,11 @@ export default () =>
         elementConfig40['map'] = component.sprite
         elementConfig40['frame'] = component.maxFps[2]
 
+        const skip40 = []
         if (typeof cmp40 !== 'undefined') {
           for (let key in cmp40.config.props) {
             delete elementConfig40[cmp40.config.props[key]]
+            skip40.push(cmp40.config.props[key])
           }
         }
 
@@ -941,73 +973,85 @@ export default () =>
       },
       effects: [
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[6].set('frame', component.fps[0])
+          if (typeof skip6 === 'undefined' || skip6.indexOf('frame') === -1)
+            elms[6].set('frame', component.fps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[7][Symbol.for('props')]['frame'] = component.fps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[8].set('frame', component.fps[1])
+          if (typeof skip8 === 'undefined' || skip8.indexOf('frame') === -1)
+            elms[8].set('frame', component.fps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[9][Symbol.for('props')]['frame'] = component.fps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[10].set('frame', component.fps[2])
+          if (typeof skip10 === 'undefined' || skip10.indexOf('frame') === -1)
+            elms[10].set('frame', component.fps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[11][Symbol.for('props')]['frame'] = component.fps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[16].set('frame', component.avgFps[0])
+          if (typeof skip16 === 'undefined' || skip16.indexOf('frame') === -1)
+            elms[16].set('frame', component.avgFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[17][Symbol.for('props')]['frame'] = component.avgFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[18].set('frame', component.avgFps[1])
+          if (typeof skip18 === 'undefined' || skip18.indexOf('frame') === -1)
+            elms[18].set('frame', component.avgFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[19][Symbol.for('props')]['frame'] = component.avgFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[20].set('frame', component.avgFps[2])
+          if (typeof skip20 === 'undefined' || skip20.indexOf('frame') === -1)
+            elms[20].set('frame', component.avgFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[21][Symbol.for('props')]['frame'] = component.avgFps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[26].set('frame', component.minFps[0])
+          if (typeof skip26 === 'undefined' || skip26.indexOf('frame') === -1)
+            elms[26].set('frame', component.minFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[28].set('frame', component.minFps[1])
+          if (typeof skip28 === 'undefined' || skip28.indexOf('frame') === -1)
+            elms[28].set('frame', component.minFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[30].set('frame', component.minFps[2])
+          if (typeof skip30 === 'undefined' || skip30.indexOf('frame') === -1)
+            elms[30].set('frame', component.minFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[36].set('frame', component.maxFps[0])
+          if (typeof skip36 === 'undefined' || skip36.indexOf('frame') === -1)
+            elms[36].set('frame', component.maxFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[38].set('frame', component.maxFps[1])
+          if (typeof skip38 === 'undefined' || skip38.indexOf('frame') === -1)
+            elms[38].set('frame', component.maxFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[40].set('frame', component.maxFps[2])
+          if (typeof skip40 === 'undefined' || skip40.indexOf('frame') === -1)
+            elms[40].set('frame', component.maxFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]

package/src/components/index.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
@@ -23,7 +22,6 @@ import FPScounter from './FPScounter.js'
 import Layout from './Layout.js'
 
 export default () => ({
-  Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),

package/src/components/index.orig.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Image from './Image.js'
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
@@ -23,7 +22,6 @@ import FPScounter from './FPScounter.js'
 import Layout from './Layout.js'
 
 export default () => ({
-  Image: Image(),
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),

package/src/engines/L3/element.js

@@ -23,7 +23,7 @@ import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 
 const isTransition = (value) => {
-  return value !== null && typeof value === 'object' && 'transition' in value
+  return value !== null && typeof value === 'object' && 'transition' in value === true
 }
 
 const isObjectString = (str) => {
@@ -48,13 +48,12 @@ const parsePercentage = function (v, base) {
 }
 
 const unpackTransition = (v) => {
-  if (v === null) return v
-  if (typeof v === 'string') return v
-  else if (typeof v === 'number') return v
-  else if (typeof v === 'object' && v.constructor === Object) {
-    if ('value' in v) {
+  if (typeof v !== 'object' || v === null) return v
+  if (v.constructor === Object) {
+    if ('value' in v === true) {
       return v.value
-    } else if ('transition' in v) {
+    }
+    if ('transition' in v === true) {
       return unpackTransition(v.transition)
     }
   }
@@ -68,7 +67,7 @@ const colorMap = {
   right: 'colorRight',
 }
 
-let textDefaults
+let textDefaults = null
 
 const propsTransformer = {
   set parent(v) {
@@ -102,9 +101,9 @@ const propsTransformer = {
     this.props['zIndex'] = v
   },
   set color(v) {
-    if (typeof v === 'string' && v.indexOf('{') === -1) {
+    if (typeof v === 'string' && v.startsWith('{') === false) {
       this.props['color'] = colors.normalize(v)
-    } else if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
+    } else if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
       this.props['color'] = 0
       Object.entries(v).forEach((color) => {
         this.props[colorMap[color[0]]] = colors.normalize(color[1])
@@ -113,31 +112,31 @@ const propsTransformer = {
   },
   set src(v) {
     this.props['src'] = v
-    if (this.raw.get('color') === undefined) {
+    if (this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set texture(v) {
     this.props['texture'] = v
 
-    if (this.raw.get('color') === undefined && (v === null || v === undefined)) {
+    if (this.raw['color'] === undefined && (v === null || v === undefined)) {
       this.props['color'] = 0x00000000
-    } else if (this.raw.get('color') === undefined) {
+    } else if (this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set rtt(v) {
     this.props['rtt'] = v
-    if (v === true && this.raw.get('color') === undefined) {
+    if (v === true && this.raw['color'] === undefined) {
       this.props['color'] = 0xffffffff
     }
   },
   set mount(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['mountX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['mountY'] = v.y
       }
     } else {
@@ -146,11 +145,11 @@ const propsTransformer = {
     }
   },
   set pivot(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['pivotX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['pivotY'] = v.y
       }
     } else {
@@ -159,11 +158,11 @@ const propsTransformer = {
     }
   },
   set scale(v) {
-    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if ('x' in v) {
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
         this.props['scaleX'] = v.x
       }
-      if ('y' in v) {
+      if ('y' in v === true) {
         this.props['scaleY'] = v.y
       }
     } else {
@@ -185,12 +184,7 @@ const propsTransformer = {
   },
   set effects(v) {
     this.props['shader'] = renderer.createShader('DynamicShader', {
-      effects: v.map((eff) => {
-        if (eff.props && eff.props.color) {
-          eff.props.color = colors.normalize(eff.props.color)
-        }
-        return eff
-      }),
+      effects: v,
     })
   },
   set clipping(v) {
@@ -238,24 +232,22 @@ const propsTransformer = {
 
 const Element = {
   populate(data) {
-    const props = {
-      ...this.config,
-      ...data,
-    }
+    const props = data
+    props['node'] = this.config.node
 
-    if (props[symbols.isSlot]) {
+    if (props[symbols.isSlot] === true) {
       this[symbols.isSlot] = true
     }
 
     this.props.element = this
 
-    const propKeys = Object.keys(props)
-    const length = propKeys.length
-
-    this.props['parent'] = props.parent
+    this.props['parent'] = this.config.parent
     delete props.parent
 
-    this.props.raw = new Map(Object.entries(props))
+    this.props.raw = data
+
+    const propKeys = Object.keys(props)
+    const length = propKeys.length
 
     for (let i = 0; i < length; i++) {
       const key = propKeys[i]
@@ -266,65 +258,63 @@ const Element = {
     }
 
     // correct for default white nodes (but not for text nodes)
-    if (this.props.props['color'] === undefined && !('__textnode' in props)) {
+    if (this.props.props['color'] === undefined && '__textnode' in props === false) {
       this.props.props['color'] = 0
     }
 
     this.node = props.__textnode
       ? renderer.createTextNode({ ...textDefaults, ...this.props.props })
-      : (this.node = renderer.createNode(this.props.props))
+      : renderer.createNode(this.props.props)
 
-    if (props['@loaded']) {
+    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)
       })
     }
 
-    if (props['@error']) {
+    if (props['@error'] !== undefined && typeof props['@error'] === 'function') {
       this.node.on('failed', (el, error) => {
         props['@error'](error, this)
       })
     }
 
-    if (this.component && this.component.___layout) {
-      this.node.on('loaded', () => {
-        this.component.___layout()
-      })
-    }
+    // if (this.component && this.component.___layout) {
+    //   this.node.on('loaded', () => {
+    //     this.component.___layout()
+    //   })
+    // }
   },
   set(prop, value) {
     if (value === undefined) return
-    if (this.props.raw.get(prop) === value) return
-
-    this.props.raw.set(prop, value)
+    if (this.props.raw[prop] === value) return
+    this.props.raw[prop] = value
 
     this.props.props = {}
     this.props[prop] = unpackTransition(value)
-    const props = Object.entries(this.props.props)
 
-    if (props.length === 1) {
-      const [p, v] = props[0]
-      if (isTransition(value)) {
-        return this.animate(p, v, value.transition)
+    const propsKeys = Object.keys(this.props.props)
+
+    if (propsKeys.length === 1) {
+      if (isTransition(value) === true) {
+        return this.animate(propsKeys[0], this.props.props[propsKeys[0]], value.transition)
       }
       // set the prop to the value on the node
-      this.node[p] = v
+      this.node[propsKeys[0]] = this.props.props[propsKeys[0]]
     } else {
-      for (let i = 0; i < props.length; i++) {
+      for (let i = 0; i < propsKeys.length; i++) {
         // todo: fix code duplication
-        const [p, v] = props[i]
-        if (isTransition(value)) {
-          return this.animate(p, v, value.transition)
+        if (isTransition(value) === true) {
+          return this.animate(propsKeys[i], this.props.props[propsKeys[i]], value.transition)
         }
         // set the prop to the value on the node
-        this.node[p] = v
+        this.node[propsKeys[i]] = this.props.props[propsKeys[i]]
       }
     }
 
     // todo: review naming
-    if (this.component && this.component.___layout) {
-      this.component.___layout()
-    }
+    // if (this.component && this.component.___layout) {
+    //   this.component.___layout()
+    // }
   },
   animate(prop, value, transition) {
     // if current value is the same as the value to animate to, instantly resolve
@@ -409,7 +399,7 @@ const Element = {
 }
 
 export default (config, component) => {
-  if (!textDefaults) {
+  if (textDefaults === null) {
     textDefaults = {
       fontSize: 32,
       fontFamily: Settings.get('defaultFont', 'sans-serif'),

package/src/helpers/fetchJson.js

@@ -0,0 +1,34 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2020 Metrological
+ *
+ * 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.
+ */
+
+export default (file) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // file protocol returns 0
+        // http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) resolve(JSON.parse(xhr.responseText))
+        else reject(xhr.statusText)
+      }
+    }
+    xhr.open('GET', file)
+    xhr.send(null)
+  })
+}