@lightningjs/blits 2.0.0-beta.1 → 2.0.0-beta.11

package/src/component.js

@@ -43,6 +43,9 @@ const required = (name) => {
   throw new Error(`Parameter ${name} is required`)
 }
 
+// map that holds component to their holder node
+export const componentMap = new WeakMap()
+
 /**
  * @typedef {function} BlitsComponentFactory
  * @param {object} opts - The options for the component instance
@@ -217,6 +220,10 @@ const Component = (name = required('name'), config = required('config')) => {
     // such as rotation and scale to components)
     this[symbols.holder] = parentEl
 
+    if (parentEl !== undefined && parentEl.node !== undefined) {
+      componentMap.set(parentEl.node, this)
+    }
+
     // generate an internal id (simple counter)
     this[symbols.id] = createInternalId()
 
@@ -229,6 +236,9 @@ const Component = (name = required('name'), config = required('config')) => {
     // create an empty array for storing intervals created by this component (via this.$setInterval)
     this[symbols.intervals] = []
 
+    // create a Map for storing debounced functions (via this.$debounce)
+    this[symbols.debounces] = new Map()
+
     // apply the state function (passing in the this reference to utilize configured props)
     // and store a reference to this original state
     this[symbols.originalState] =
@@ -236,6 +246,9 @@ const Component = (name = required('name'), config = required('config')) => {
     // add $hasFocus key in
     this[symbols.originalState]['$hasFocus'] = false
 
+    // add $isHovered key in
+    this[symbols.originalState]['$isHovered'] = false
+
     // generate a reactive state (using the result of previously execute state function)
     // and store it
     this[symbols.state] = reactive(this[symbols.originalState], Settings.get('reactivityMode'))
@@ -265,35 +278,59 @@ const Component = (name = required('name'), config = required('config')) => {
     this[symbols.slots] = this[symbols.children].filter((child) => child[symbols.isSlot])
 
     this[symbols.rendererEventListeners] = []
+
+    if (this[symbols.holder] !== undefined && Settings.get('inspector', false)) {
+      this[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': false })
+    }
+
+    // setup inspector data for render state
+    if (name === 'App' && Settings.get('inspector', false)) {
+      this.$setTimeout(() => {
+        const wrapperEl = this[symbols.wrapper]
+        const idleCb = () => {
+          wrapperEl.setInspectorMetadata({ 'blits-renderState': 'idle' })
+        }
+        const activeCb = () => {
+          wrapperEl.setInspectorMetadata({ 'blits-renderState': 'active' })
+        }
+        renderer.on('idle', idleCb)
+        renderer.on('active', activeCb)
+        this[symbols.rendererEventListeners].push({ event: 'idle', cb: idleCb })
+        this[symbols.rendererEventListeners].push({ event: 'active', cb: activeCb })
+      })
+    }
+
     // register hooks if component has hooks specified
     if (config.hooks) {
-      // push to next tick to ensure
-      setTimeout(() => {
-        // frame tick event
-        if (config.hooks.frameTick) {
-          const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
-          this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
-          renderer.on('frameTick', cb)
-        }
+      // frame tick event
+      if (config.hooks.frameTick) {
+        const cb = (_r, data) => emit('frameTick', this[symbols.identifier], this, [data])
+        renderer.on('frameTick', cb)
+        this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
+      }
 
-        // idle event
-        if (config.hooks.idle) {
-          const cb = () => {
-            emit('idle', this[symbols.identifier], this)
-          }
-          this[symbols.rendererEventListeners].push({ event: 'idle', cb })
-          renderer.on('idle', cb)
+      // idle event
+      if (config.hooks.idle) {
+        const idleCb = () => {
+          emit('idle', this[symbols.identifier], this, [true])
+        }
+        const activeCb = () => {
+          emit('idle', this[symbols.identifier], this, [false])
         }
+        renderer.on('idle', idleCb)
+        renderer.on('active', activeCb)
+        this[symbols.rendererEventListeners].push({ event: 'idle', cb: idleCb })
+        this[symbols.rendererEventListeners].push({ event: 'active', cb: activeCb })
+      }
 
-        // fpsUpdate event
-        if (config.hooks.fpsUpdate) {
-          const cb = (r, data) => {
-            emit('fpsUpdate', this[symbols.identifier], this, [data.fps])
-          }
-          this[symbols.rendererEventListeners].push({ event: 'fpsUpdate', cb })
-          renderer.on('fpsUpdate', cb)
+      // fpsUpdate event
+      if (config.hooks.fpsUpdate) {
+        const cb = (_r, data) => {
+          emit('fpsUpdate', this[symbols.identifier], this, [data.fps])
         }
-      })
+        renderer.on('fpsUpdate', cb)
+        this[symbols.rendererEventListeners].push({ event: 'fpsUpdate', cb })
+      }
 
       // inBounds event emiting a lifecycle attach event
       if (config.hooks.attach) {
@@ -361,7 +398,7 @@ const Component = (name = required('name'), config = required('config')) => {
           }
         }
 
-        let old = this[key]
+        let old = target[key]
 
         const eff = (force = false) => {
           const newValue = target[key]
@@ -456,6 +493,9 @@ const Component = (name = required('name'), config = required('config')) => {
   // during the code generation step
   factory[Symbol.for('config')] = config
 
+  // Display name for inspector
+  factory[Symbol.for('componentType')] = name
+
   // To determine whether dynamic component is actual Blits component or not
   factory[symbols.isComponent] = true
 

package/src/components/Circle.js

@@ -63,6 +63,7 @@ export default () =>
           'content',
           'placement',
           'inspector-data',
+          'holder',
         ]
         const elementConfigs = []
         const forloops = []
@@ -78,13 +79,14 @@ export default () =>
         let slotChildCounter = 0
         let cmps = []
         elementConfigs[0] = {}
+        elementConfigs[0]['___wrapper'] = true
 
         elms[0] = this.element(
           { parent: parent || 'root' },
           inSlot === true ? slotComponent : component
         )
 
-        elementConfigs[0]['color'] = component.color
+        elementConfigs[0]['color'] = component.bgColor
         elementConfigs[0]['w'] = component.size
         elementConfigs[0]['h'] = component.size
         elementConfigs[0]['rounded'] = component.radius
@@ -115,7 +117,7 @@ export default () =>
       },
       effects: [
         function anonymous(component, elms, context, components, rootComponent, skips, effect) {
-          elms[0].set('color', component.color)
+          elms[0].set('color', component.bgColor)
         },
         function anonymous(component, elms, context, components, rootComponent, skips, effect) {
           elms[0].set('w', component.size)
@@ -129,7 +131,7 @@ export default () =>
       ],
       context: {},
     },
-    props: { size: 40, color: 'white' },
+    props: { size: 40, bgColor: 'white' },
     computed: {
       radius() {
         return this.size / 2