From f31af6f2318dd8bcf9441b3af10adcf70c2668f4 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Mon, 5 Mar 2018 22:45:01 -0800
Subject: [PATCH 1/7] fix keyboard

---
 src/keyboard/behaviors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keyboard/behaviors.js b/src/keyboard/behaviors.js
index 3542b05..e96cabe 100755
--- a/src/keyboard/behaviors.js
+++ b/src/keyboard/behaviors.js
@@ -46,7 +46,7 @@ Behaviors.destroyKeyboard = function(el) {
 
 Behaviors.openKeyboard = function(el) {
   if (el.o_position) {
-    el.object3D.position.copy(o_position);
+    el.object3D.position.copy(el.o_position);
   }
   el.isOpen = true;
   el._transitioning = true;

From a6720caa4ca0fa12129fed8bad3ee4df3737cd34 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Wed, 7 Mar 2018 05:10:23 -0800
Subject: [PATCH 2/7] remove keyboard shadow elements to save 40 draw calls

---
 src/keyboard/draw.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/keyboard/draw.js b/src/keyboard/draw.js
index 96a269a..03ff215 100755
--- a/src/keyboard/draw.js
+++ b/src/keyboard/draw.js
@@ -234,13 +234,6 @@ Draw.key = (id, type, value)=> {
   // ---------------------------------------------------------------------------
   // SHADOW
 
-  el.shadow_el = document.createElement('a-image');
-  el.shadow_el.setAttribute('width', Config.KEY_WIDTH*1.25);
-  el.shadow_el.setAttribute('height', Config.KEY_WIDTH*1.25);
-  el.shadow_el.setAttribute('position', Config.KEY_WIDTH/2+' '+Config.KEY_WIDTH/2+' -0.002');
-  el.shadow_el.setAttribute('src', Assets.aframeKeyboardShadow);
-  el.appendChild(el.shadow_el);
-
   // ---------------------------------------------------------------------------
   // TEXT KEY
 
@@ -262,9 +255,6 @@ Draw.key = (id, type, value)=> {
     el.setAttribute('width', Config.SPACE_KEY_WIDTH);
     el.setAttribute('height', Config.SPACE_KEY_HEIGHT);
     el.setAttribute('color', '#404b50');
-    el.shadow_el.setAttribute('width', Config.SPACE_KEY_WIDTH*1.12);
-    el.shadow_el.setAttribute('height', Config.SPACE_KEY_HEIGHT*1.2);
-    el.shadow_el.setAttribute('position', Config.SPACE_KEY_WIDTH/2+' '+Config.SPACE_KEY_HEIGHT/2+' -0.02');
     letter_el.setAttribute('color', '#adb1b3');
     letter_el.setAttribute('scale', '0.12 0.12 0.12');
     letter_el.setAttribute('position', Config.SPACE_KEY_WIDTH/2+' '+Config.SPACE_KEY_HEIGHT/2+' 0');
@@ -282,8 +272,6 @@ Draw.key = (id, type, value)=> {
 
   if (type === 'backspace' || type === 'enter' || type === 'dismiss') {
     el.setAttribute('width', Config.ACTION_WIDTH);
-    el.shadow_el.setAttribute('width', Config.ACTION_WIDTH*1.25);
-    el.shadow_el.setAttribute('position', Config.ACTION_WIDTH/2+' '+Config.KEY_WIDTH/2+' -0.02');
   }
 
   // ---------------------------------------------------------------------------
@@ -329,8 +317,6 @@ Draw.key = (id, type, value)=> {
 
   else if (type === 'enter') {
     el.setAttribute('height', Config.ACTION_WIDTH);
-    el.shadow_el.setAttribute('height', Config.ACTION_WIDTH*1.25);
-    el.shadow_el.setAttribute('position', Config.ACTION_WIDTH/2+' '+Config.ACTION_WIDTH/2+' -0.02');
 
     var circle_el = document.createElement('a-circle');
     circle_el.setAttribute('color', '#4285f4');

From 52096e5efdf55a4b366751da67cca45e94885db6 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Wed, 7 Mar 2018 18:07:59 -0800
Subject: [PATCH 3/7] don't use setAttribute for fade animation

---
 src/fade/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fade/index.js b/src/fade/index.js
index 9f010f9..43cf569 100755
--- a/src/fade/index.js
+++ b/src/fade/index.js
@@ -8,7 +8,7 @@ var opacityUpdate = function(opacity) {
     }
   });
   for (let text of this.textEntities) {
-    text.setAttribute('opacity', opacity);
+    text.components.text.material.uniforms.opacity.value = opacity;
   }
 }
 

From 484b5f62573d07f27969bf857b97a865c4038a8a Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Wed, 7 Mar 2018 21:28:33 -0800
Subject: [PATCH 4/7] start implementing slice

---
 assets/images/widget.png | Bin 0 -> 16263 bytes
 index.html               |  30 ++---------
 package.json             |   3 +-
 src/fade/index.js        |   4 +-
 src/index.js             |   1 +
 src/keyboard/assets.js   |   1 +
 src/keyboard/draw.js     | 107 +++++++++++++++++++++++++++------------
 7 files changed, 87 insertions(+), 59 deletions(-)
 create mode 100644 assets/images/widget.png

diff --git a/assets/images/widget.png b/assets/images/widget.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd1963515a498be6959e8c9a8fb4b3f7fa81207b
GIT binary patch
literal 16263
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index a9d054e..59d77a0 100755
--- a/index.html
+++ b/index.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <title>aframe-material😲😆😛</title>
     <meta name="description" content="Aframe-Material">
-    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
-    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
+    <script src="https://rawgit.com/aframevr/aframe/b37f317/dist/aframe-master.min.js"></script>
     <script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
     <script src="dist/aframe-material.js"></script>
     <script type="text/javascript">
@@ -13,38 +12,19 @@
     </script>
   </head>
   <body>
-    <a-scene>
+    <a-scene stats>
       <a-entity laser-controls="hand: right"></a-entity>
 
-      <a-entity> <a-camera look-controls-enabled wasd-controls-enabled mouse-cursor></a-camera></a-entity>
+      <a-entity cursor="rayOrigin: mouse"></a-entity>
 
       <!-- BEGIN INPUTS/KEYBOARD -->
-      <a-keyboard physical-keyboard="true"></a-keyboard>
+      <a-keyboard></a-keyboard>
       <a-input position="-0.7 1 -2.5" placeholder="Username" color="black" width="1"></a-input>
       <a-input position="-0.7 0.8 -2.5" type="password" placeholder="Password" color="black" width="1"></a-input>
       <!-- END INPUTS/KEYBOARD -->
 
-      <!-- BEGIN FORM -->
-      <a-rounded position="0.5 0.5 -2.5" width="4" height="3.1" radius="0.05" rotation="0 -20 0" scale="0.3 0.3 0.3">
-        <a-form>
-          <a-switch position="0.2 2.7 0" enabled="true"></a-switch>
-          <a-radio position="0.2 2.4 0" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>
-          <a-radio position="0.2 2.1 0" width="3" name="food" label="Veggies" checked="true" disabled="true"></a-radio>
-          <a-radio position="0.2 1.8 0" width="3" name="food" label="Ice cream"></a-radio>
-          <a-checkbox position="0.2 1.5 0" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>
-          <a-checkbox position="0.2 1.2 0" width="3" name="stuff" label="And I am another one" checked="true" disabled="true"></a-checkbox>
-          <a-button position="0.2 0.8 0" name="stuff" value="Click me" type="raised"></a-button>
-          <a-button position="0.2 0.35 0" width="3" name="stuff" value="You cannot click me" disabled="true"></a-button>
-        </a-form>
-      </a-rounded>
-      <!-- END FORM -->
-
-      <!-- BEGIN TOAST -->
-      <a-toast message="This is a toast" action="Got it"></a-toast>
-      <!-- END TOAST -->
-
       <!-- BEGIN ENVIRONEMENT -->
-      <a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255;"></a-gradient-sky>
+      <a-gradient-sky material="shader: gradient; topColor: 255 0 0; bottomColor: 0 121 255; side: back"></a-gradient-sky>
       <!-- END ENVIRONEMENT -->
     </a-scene>
     <script type="text/javascript">
diff --git a/package.json b/package.json
index ed36dec..05f4b83 100755
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "vr"
   ],
   "dependencies": {
-    "aframe-rounded": "^1.0.3"
+    "aframe-rounded": "^1.0.3",
+    "aframe-slice9-component": "^1.0.0"
   }
 }
diff --git a/src/fade/index.js b/src/fade/index.js
index 43cf569..16e5809 100755
--- a/src/fade/index.js
+++ b/src/fade/index.js
@@ -8,7 +8,9 @@ var opacityUpdate = function(opacity) {
     }
   });
   for (let text of this.textEntities) {
-    text.components.text.material.uniforms.opacity.value = opacity;
+    if (text.components.text) {
+      text.components.text.material.uniforms.opacity.value = opacity;
+    }
   }
 }
 
diff --git a/src/index.js b/src/index.js
index fa0cc6c..8956677 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 (()=>{
   if (!AFRAME) { return console.error('AFRAME is required!'); }
   if (!AFRAME.ASSETS_PATH) { AFRAME.ASSETS_PATH = "./assets"; }
+  if (!AFRAME.components.slice9) { require('aframe-slice9-component'); }
   require('aframe-rounded');
   require("./fade");
   //require("./alert"); @TODO ;)
diff --git a/src/keyboard/assets.js b/src/keyboard/assets.js
index bea8bed..8be3ea7 100755
--- a/src/keyboard/assets.js
+++ b/src/keyboard/assets.js
@@ -1,4 +1,5 @@
 module.exports = {
+  slice: `${AFRAME.ASSETS_PATH}/images/widget.png`,
   aframeKeyboardShift: `${AFRAME.ASSETS_PATH}/images/ShiftIcon.png`,
   aframeKeyboardShiftActive: `${AFRAME.ASSETS_PATH}/images/ShiftActiveIcon.png`,
   aframeKeyboardGlobal: `${AFRAME.ASSETS_PATH}/images/GlobalIcon.png`,
diff --git a/src/keyboard/draw.js b/src/keyboard/draw.js
index 03ff215..2786084 100755
--- a/src/keyboard/draw.js
+++ b/src/keyboard/draw.js
@@ -21,11 +21,19 @@ Draw.numericalUI = ()=> {
   wrapper.setAttribute('rotation', '0 25 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.280');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.280,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.14 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -39,11 +47,19 @@ Draw.mainUI = ()=>{
   wrapper.setAttribute('position', '0.312 0 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.840');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.840,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.42 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -58,11 +74,19 @@ Draw.actionsUI = ()=> {
   wrapper.setAttribute('rotation', '0 -25 0');
   wrapper.setAttribute('data-ui', true);
 
-  var el = document.createElement('a-rounded');
-  el.setAttribute('width', '0.180');
-  el.setAttribute('height', '0.360');
-  el.setAttribute('radius', '0.02');
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+  var el = document.createElement('a-entity');
+  el.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 50,
+    top: 50,
+    bottom: 50,
+    padding: 0.04,
+    width: 0.180,
+    height: 0.360
+  });
+  el.setAttribute('position', '0.09 0.18 0');
   wrapper.appendChild(el);
 
   return wrapper;
@@ -81,8 +105,8 @@ Draw.numericalLayout = ()=> {
     let key_id = 'num-'+i;
     let key = Draw.key(key_id, data[i].type, data[i].value);
     let index_x = i%3;
-    let x = Config.KEY_WIDTH*index_x;
-    let y = Config.KEY_WIDTH*index_y;
+    let x = Config.KEY_WIDTH * index_x;
+    let y = Config.KEY_WIDTH * index_y;
     key.setAttribute('position', `${x} -${y} 0`);
     if (index_x === 2) { index_y++; }
     wrapper.appendChild(key);
@@ -214,26 +238,36 @@ Draw.actionsLayout = ()=> {
 // DRAW KEY
 
 Draw.key = (id, type, value)=> {
+  var el;
   var that = this;
+  var slice;
 
-  var el = document.createElement('a-rounded');
+  el = document.createElement('a-entity');
+  el.classList.add('aframeMaterialKey');
   el.setAttribute('key-id', id);
-  el.setAttribute('width', Config.KEY_WIDTH);
-  el.setAttribute('height', Config.KEY_WIDTH);
-  el.setAttribute('radius', '0.008');
-  el.setAttribute('position', '0 0 0');
   el.setAttribute('key-type', type);
   el.setAttribute('key-value', value);
-  el.setAttribute('color', Config.KEYBOARD_COLOR);
+
+  slice = document.createElement('a-entity');
+  slice.setAttribute('slice9', {
+    color: Config.KEYBOARD_COLOR,
+    src: Assets.slice,
+    left: 50,
+    right: 52,
+    top: 50,
+    bottom: 52,
+    padding: 0.04,
+    width: Config.KEY_WIDTH,
+    height: Config.KEY_WIDTH
+  });
+  slice.setAttribute('position', '0.04 0.036 0');
+  el.appendChild(slice);
 
   // ---------------------------------------------------------------------------
   // EVENTS
 
   Behaviors.addKeyEvents(el);
 
-  // ---------------------------------------------------------------------------
-  // SHADOW
-
   // ---------------------------------------------------------------------------
   // TEXT KEY
 
@@ -241,7 +275,11 @@ Draw.key = (id, type, value)=> {
     var letter_el = document.createElement('a-text');
     letter_el.setAttribute('value', value);
     letter_el.setAttribute('color', '#dbddde');
-    letter_el.setAttribute('position', Config.KEY_WIDTH/2+' '+Config.KEY_WIDTH/2+' 0.01');
+    letter_el.setAttribute('position', {
+      x: Config.KEY_WIDTH / 2,
+      y: Config.KEY_WIDTH / 2,
+      z: 0.01
+    });
     letter_el.setAttribute('scale', '0.16 0.16 0.16');
     letter_el.setAttribute('align', 'center');
     letter_el.setAttribute('baseline', 'center');
@@ -252,9 +290,12 @@ Draw.key = (id, type, value)=> {
   // SPACEBAR KEY
 
   if (type === 'spacebar') {
-    el.setAttribute('width', Config.SPACE_KEY_WIDTH);
-    el.setAttribute('height', Config.SPACE_KEY_HEIGHT);
-    el.setAttribute('color', '#404b50');
+    slice.setAttribute('slice9', {
+      color: '#404b50',
+      width: Config.SPACE_KEY_WIDTH,
+      height: Config.SPACE_KEY_HEIGHT
+    });
+    slice.setAttribute('position', '0.19 0.02 0');
     letter_el.setAttribute('color', '#adb1b3');
     letter_el.setAttribute('scale', '0.12 0.12 0.12');
     letter_el.setAttribute('position', Config.SPACE_KEY_WIDTH/2+' '+Config.SPACE_KEY_HEIGHT/2+' 0');
@@ -271,7 +312,8 @@ Draw.key = (id, type, value)=> {
   // ACTION KEY
 
   if (type === 'backspace' || type === 'enter' || type === 'dismiss') {
-    el.setAttribute('width', Config.ACTION_WIDTH);
+    slice.setAttribute('slice9', 'width', Config.ACTION_WIDTH);
+    slice.setAttribute('position', '0.07 0.038 0');
   }
 
   // ---------------------------------------------------------------------------
@@ -316,7 +358,8 @@ Draw.key = (id, type, value)=> {
   // ENTER
 
   else if (type === 'enter') {
-    el.setAttribute('height', Config.ACTION_WIDTH);
+    slice.setAttribute('slice9', {height: Config.ACTION_WIDTH});
+    slice.setAttribute('position', '0.07 0.067 0');
 
     var circle_el = document.createElement('a-circle');
     circle_el.setAttribute('color', '#4285f4');

From 53e02088173f7a29ce18d6e64b2ff98534f12c10 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Wed, 7 Mar 2018 21:49:17 -0800
Subject: [PATCH 5/7] working

---
 src/keyboard/behaviors.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/keyboard/behaviors.js b/src/keyboard/behaviors.js
index e96cabe..44cd47b 100755
--- a/src/keyboard/behaviors.js
+++ b/src/keyboard/behaviors.js
@@ -168,9 +168,9 @@ Behaviors.keyIn = function() {
   }
   SFX.keyIn(Behaviors.el);
   if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.SPACEBAR_COLOR_HIGHLIGHT);
+    this.children[0].setAttribute('slice9', 'color', Config.SPACEBAR_COLOR_HIGHLIGHT);
   } else {
-    this.setAttribute('color', Config.KEY_COLOR_HIGHLIGHT);
+    this.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_HIGHLIGHT);
   }
 };
 
@@ -180,9 +180,9 @@ Behaviors.keyIn = function() {
 Behaviors.keyOut = function() {
   this.object3D.position.z = 0;
   if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.KEY_COLOR_ACTIVE);
+    this.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_ACTIVE);
   } else {
-    this.setAttribute('color', Config.KEYBOARD_COLOR);
+    this.children[0].setAttribute('slice9', 'color', Config.KEYBOARD_COLOR);
   }
 }
 

From be72f51140315f8546d516cbf17193c75bee965b Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 8 Mar 2018 00:14:33 -0800
Subject: [PATCH 6/7] work on removing per-key slice

---
 src/keyboard/behaviors.js | 19 ++++++++++---
 src/keyboard/draw.js      | 60 +++++++++++++++++++++++----------------
 src/keyboard/index.js     |  4 ++-
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/keyboard/behaviors.js b/src/keyboard/behaviors.js
index 44cd47b..f66ed21 100755
--- a/src/keyboard/behaviors.js
+++ b/src/keyboard/behaviors.js
@@ -149,12 +149,16 @@ Behaviors.keyClick = function() {
 // KEYDOWN
 
 Behaviors.keyDown = function() {
+  var keyHighlight;
   if (Behaviors.el._transitioning) { return; }
   this.object3D.position.z = 0.003;
   if (this.getAttribute('key-type') === 'spacebar') {
     this.setAttribute('color', Config.SPACEBAR_COLOR_ACTIVE);
   } else {
-    this.setAttribute('color', Config.KEY_COLOR_ACTIVE);
+    keyHighlight = document.getElementById('aframeKeyboardHighlight');
+    keyHighlight.object3D.position.copy(this.object3D.position);
+    keyHighlight.object3D.position.x += 0.04;
+    keyHighlight.object3D.position.y += 0.036;
   }
 };
 
@@ -162,15 +166,21 @@ Behaviors.keyDown = function() {
 // KEYIN
 
 Behaviors.keyIn = function() {
+  var keyHighlight;
   if (Behaviors.el._transitioning) { return; }
-  if (this.object3D.children[2] && this.object3D.children[2].material && !this.object3D.children[2].material.opacity) {
+  if (this.object3D.children[2] && this.object3D.children[2].material &&
+      !this.object3D.children[2].material.opacity) {
     return
   }
   SFX.keyIn(Behaviors.el);
   if (this.getAttribute('key-type') === 'spacebar') {
     this.children[0].setAttribute('slice9', 'color', Config.SPACEBAR_COLOR_HIGHLIGHT);
   } else {
-    this.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_HIGHLIGHT);
+    keyHighlight = document.getElementById('aframeKeyboardHighlight');
+    keyHighlight.object3D.visible = true;
+    keyHighlight.object3D.position.copy(this.object3D.position);
+    keyHighlight.object3D.position.x += 0.04;
+    keyHighlight.object3D.position.y += 0.036;
   }
 };
 
@@ -178,11 +188,12 @@ Behaviors.keyIn = function() {
 // KEYOUT
 
 Behaviors.keyOut = function() {
+  var keyHighlight;
   this.object3D.position.z = 0;
   if (this.getAttribute('key-type') === 'spacebar') {
     this.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_ACTIVE);
   } else {
-    this.children[0].setAttribute('slice9', 'color', Config.KEYBOARD_COLOR);
+    keyHighlight.object3D.visible = false;
   }
 }
 
diff --git a/src/keyboard/draw.js b/src/keyboard/draw.js
index 2786084..cb9ed68 100755
--- a/src/keyboard/draw.js
+++ b/src/keyboard/draw.js
@@ -12,6 +12,26 @@ Draw.init = (el)=>{
   Behaviors.SFX = el.SFX;
 }
 
+// -----------------------------------------------------------------------------
+// DRAW HOVER HIGHLIGHT
+Draw.hoverHighlight = ()=> {
+  var slice;
+  slice = document.createElement('a-entity');
+  slice.setAttribute('id', 'aframeKeyboardHighlight');
+  slice.setAttribute('slice9', {
+    color: Config.KEY_COLOR_ACTIVE,
+    src: Assets.slice,
+    left: 50,
+    right: 52,
+    top: 50,
+    bottom: 52,
+    padding: 0.04,
+    width: Config.KEY_WIDTH,
+    height: Config.KEY_WIDTH
+  });
+  return slice;
+};
+
 // -----------------------------------------------------------------------------
 // DRAW NUMERICAL UI
 
@@ -248,20 +268,21 @@ Draw.key = (id, type, value)=> {
   el.setAttribute('key-type', type);
   el.setAttribute('key-value', value);
 
-  slice = document.createElement('a-entity');
-  slice.setAttribute('slice9', {
-    color: Config.KEYBOARD_COLOR,
-    src: Assets.slice,
-    left: 50,
-    right: 52,
-    top: 50,
-    bottom: 52,
-    padding: 0.04,
-    width: Config.KEY_WIDTH,
-    height: Config.KEY_WIDTH
-  });
-  slice.setAttribute('position', '0.04 0.036 0');
-  el.appendChild(slice);
+  if (type === 'spacebar') {
+    slice = document.createElement('a-entity');
+    slice.setAttribute('slice9', {
+      color: Config.KEYBOARD_COLOR,
+      src: Assets.slice,
+      left: 50,
+      right: 52,
+      top: 50,
+      bottom: 52,
+      padding: 0.04,
+      width: Config.KEY_WIDTH,
+      height: Config.KEY_WIDTH
+    });
+    el.appendChild(slice);
+  }
 
   // ---------------------------------------------------------------------------
   // EVENTS
@@ -308,14 +329,6 @@ Draw.key = (id, type, value)=> {
     letter_el.setAttribute('scale', '0.12 0.12 0.12');
   }
 
-  // ---------------------------------------------------------------------------
-  // ACTION KEY
-
-  if (type === 'backspace' || type === 'enter' || type === 'dismiss') {
-    slice.setAttribute('slice9', 'width', Config.ACTION_WIDTH);
-    slice.setAttribute('position', '0.07 0.038 0');
-  }
-
   // ---------------------------------------------------------------------------
   // SHIFT KEY
 
@@ -358,9 +371,6 @@ Draw.key = (id, type, value)=> {
   // ENTER
 
   else if (type === 'enter') {
-    slice.setAttribute('slice9', {height: Config.ACTION_WIDTH});
-    slice.setAttribute('position', '0.07 0.067 0');
-
     var circle_el = document.createElement('a-circle');
     circle_el.setAttribute('color', '#4285f4');
     circle_el.setAttribute('radius', 0.044);
diff --git a/src/keyboard/index.js b/src/keyboard/index.js
index 0b9b9f5..8402eaa 100755
--- a/src/keyboard/index.js
+++ b/src/keyboard/index.js
@@ -22,7 +22,8 @@ AFRAME.registerComponent('keyboard', {
     // Init keyboard UI
     let numericalUI = Draw.numericalUI(),
         mainUI      = Draw.mainUI(),
-        actionsUI   = Draw.actionsUI();
+        actionsUI   = Draw.actionsUI(),
+        hoverHighlight = Draw.hoverHighlight();
 
     // Create layout
     this.el.alphabeticalLayout = Draw.alphabeticalLayout();
@@ -36,6 +37,7 @@ AFRAME.registerComponent('keyboard', {
     this.el.appendChild( numericalUI );
     this.el.appendChild( mainUI );
     this.el.appendChild( actionsUI );
+    this.el.appendChild( hoverHighlight  );
 
     // Inject methods in elements..
     this.el.show = function() { Behaviors.showKeyboard(that.el); }

From ba086b0773d9d8b2d4c0bbfc8a96b8fb7fce61f9 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 8 Mar 2018 04:10:51 -0800
Subject: [PATCH 7/7] bit of refactor

---
 src/keyboard/behaviors.js | 168 +++++++++++++++++++++-----------------
 src/keyboard/draw.js      |  69 ++++++++--------
 src/keyboard/index.js     |  80 +++++++++---------
 3 files changed, 166 insertions(+), 151 deletions(-)

diff --git a/src/keyboard/behaviors.js b/src/keyboard/behaviors.js
index f66ed21..a8a3ce2 100755
--- a/src/keyboard/behaviors.js
+++ b/src/keyboard/behaviors.js
@@ -1,18 +1,15 @@
 const Assets = require('./assets');
 const Config = require('./config');
 const Utils = require('../utils');
-const Event = require('../core/event');
 const SFX = require('./sfx');
-const Behaviors = {};
-
-Behaviors.el = null;
 
 // -----------------------------------------------------------------------------
 // KEYBOARD METHODS
 
-Behaviors.showKeyboard = function(el) {
-  if (el.o_position) {
-    el.object3D.position.copy(el.o_position);
+function showKeyboard (component) {
+  var el = component.el;
+  if (component.o_position) {
+    el.object3D.position.copy(component.o_position);
   }
   el.isOpen = true;
   for(let item of el.querySelectorAll('[data-ui]') ) {
@@ -24,29 +21,35 @@ Behaviors.showKeyboard = function(el) {
   if (parent) { return; }
   el.sceneEl.appendChild(el);
 };
+module.exports.showKeyboard = showKeyboard;
 
-Behaviors.hideKeyboard = function(el) {
+function hideKeyboard (component) {
+  var el = component.el;
   let position = el.getAttribute("position");
   if (position.x !== -10000) {
-    if (!el.o_position) {
-      el.o_position = new THREE.Vector3();
+    if (!component.o_position) {
+      component.o_position = new THREE.Vector3();
     }
-    el.o_position.copy(position);
+    component.o_position.copy(position);
   }
   el.isOpen = false;
   el.setAttribute("position", "-10000 -10000 -10000");
   el.setAttribute('fadeout', {duration: 1});
 }
+module.exports.hideKeyboard = hideKeyboard;
 
-Behaviors.destroyKeyboard = function(el) {
+function destroyKeyboard (component) {
+  var el = component.el;
   let parent = el.parentNode;
   if (!parent) { return; }
   parent.removeChild(el);
 };
+module.exports.destroyKeyboard = destroyKeyboard;
 
-Behaviors.openKeyboard = function(el) {
-  if (el.o_position) {
-    el.object3D.position.copy(el.o_position);
+function openKeyboard (component) {
+  var el = component.el;
+  if (component.o_position) {
+    el.object3D.position.copy(component.o_position);
   }
   el.isOpen = true;
   el._transitioning = true;
@@ -60,7 +63,7 @@ Behaviors.openKeyboard = function(el) {
       item.children[0].removeEventListener('animationend', animationend)
       setTimeout(function() {
         item.children[1].setAttribute('fadein', {duration: 160});
-        Event.emit(Behaviors.el, 'didopen');
+        el.emit('didopen');
         el._transitioning = false;
       }, 10)
     }
@@ -68,8 +71,10 @@ Behaviors.openKeyboard = function(el) {
     item.children[0].addEventListener('animationend', animationend)
   }
 };
+module.exports.openKeyboard = openKeyboard;
 
-Behaviors.dismissKeyboard = function(el) {
+function dismissKeyboard (component) {
+  var el = component.el;
   el._transitioning = true;
   for(let item of el.querySelectorAll('[data-ui]') ) {
     for (let child of item.children) {
@@ -81,8 +86,8 @@ Behaviors.dismissKeyboard = function(el) {
       setTimeout(function() {
         function animationend() {
           item.children[0].removeEventListener('animationend', animationend);
-          Behaviors.hideKeyboard(el);
-          Event.emit(Behaviors.el, 'diddismiss');
+          hideKeyboard(component);
+          el.emit('diddismiss');
           el._transitioning = false;
         }
         item.children[0].setAttribute('fadeout', {duration: 160});
@@ -93,28 +98,31 @@ Behaviors.dismissKeyboard = function(el) {
     item.children[1].addEventListener('animationend', animationend)
   }
 };
+module.exports.dismissKeyboard = dismissKeyboard;
 
 // -----------------------------------------------------------------------------
 // KEY EVENTS
 
-Behaviors.addKeyEvents = (el)=>{
-  el.addEventListener('click', Behaviors.keyClick);
-  el.addEventListener('mousedown', Behaviors.keyDown);
-  el.addEventListener('mouseup', Behaviors.keyOut);
-  el.addEventListener('raycaster-intersected', Behaviors.keyIn );
-  el.addEventListener('raycaster-intersected-cleared', Behaviors.keyOut );
+function addKeyEvents (component, el) {
+  el.addEventListener('click', () => { keyClick(component, el) });
+  el.addEventListener('mousedown', () => { keyDown(component, el) });
+  el.addEventListener('mouseup', () => { keyOut(component, el) });
+  el.addEventListener('raycaster-intersected', () => { keyIn (component, el) });
+  el.addEventListener('raycaster-intersected-cleared', () => { keyOut (component, el) });
   //triggerdown
   // https://aframe.io/docs/0.6.0/components/hand-controls.html
 };
+module.exports.addKeyEvents = addKeyEvents;
 
 // -----------------------------------------------------------------------------
 // KEYCLICK
 
-Behaviors.keyClick = function() {
-  SFX.keyDown(Behaviors.el);
+function keyClick (keyEl) {
+  var el = keyEl;
+  SFX.keyDown(el);
 
-  let type = this.getAttribute('key-type');
-  let value = this.getAttribute('key-value');
+  let type = el.getAttribute('key-type');
+  let value = el.getAttribute('key-value');
 
   if (type === 'text' || type === 'spacebar') {
     if (type === 'spacebar') { value = ' '; }
@@ -125,87 +133,95 @@ Behaviors.keyClick = function() {
     else if (Behaviors.isSymbols) {
       Behaviors.symbolsToggle();
     }
-    Event.emit(Behaviors.el, 'input', value);
+    el.emit('input', value);
   }
   else if (type === 'shift') {
-    Behaviors.shiftToggle();
+    shiftToggle();
   }
   else if (type === 'symbol') {
-    Behaviors.symbolsToggle();
+    symbolsToggle();
   }
   else if (type === 'backspace') {
-    Event.emit(Behaviors.el, 'backspace');
+    el.emit('backspace');
   }
   else if (type === 'enter') {
-    Event.emit(Behaviors.el, 'input', '\n');
-    Event.emit(Behaviors.el, 'enter', '\n');
+    el.emit('input', '\n');
+    el.emit('enter', '\n');
   }
   else if (type === 'dismiss') {
-    Event.emit(Behaviors.el, 'dismiss');
+    el.emit('dismiss');
   }
 }
+module.exports.keyClick = keyClick;
 
 // -----------------------------------------------------------------------------
 // KEYDOWN
 
-Behaviors.keyDown = function() {
+function keyDown (component, keyEl) {
+  var el = keyEl;
   var keyHighlight;
-  if (Behaviors.el._transitioning) { return; }
-  this.object3D.position.z = 0.003;
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.setAttribute('color', Config.SPACEBAR_COLOR_ACTIVE);
+  if (el._transitioning) { return; }
+  el.object3D.position.z = 0.003;
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.setAttribute('color', Config.SPACEBAR_COLOR_ACTIVE);
   } else {
-    keyHighlight = document.getElementById('aframeKeyboardHighlight');
-    keyHighlight.object3D.position.copy(this.object3D.position);
+    keyHighlight = component.hoverHighlight;
+    keyHighlight.object3D.position.copy(el.object3D.position);
     keyHighlight.object3D.position.x += 0.04;
     keyHighlight.object3D.position.y += 0.036;
   }
 };
+module.exports.keyDown = keyDown;
 
 // -----------------------------------------------------------------------------
 // KEYIN
 
-Behaviors.keyIn = function() {
+function keyIn (component, keyEl) {
+  var el = keyEl;
   var keyHighlight;
-  if (Behaviors.el._transitioning) { return; }
-  if (this.object3D.children[2] && this.object3D.children[2].material &&
-      !this.object3D.children[2].material.opacity) {
+  if (el._transitioning) { return; }
+  if (el.object3D.children[2] && el.object3D.children[2].material &&
+      !el.object3D.children[2].material.opacity) {
     return
   }
-  SFX.keyIn(Behaviors.el);
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.children[0].setAttribute('slice9', 'color', Config.SPACEBAR_COLOR_HIGHLIGHT);
+  SFX.keyIn(el);
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.children[0].setAttribute('slice9', 'color', Config.SPACEBAR_COLOR_HIGHLIGHT);
   } else {
-    keyHighlight = document.getElementById('aframeKeyboardHighlight');
+    keyHighlight = component.hoverHighlight;
     keyHighlight.object3D.visible = true;
-    keyHighlight.object3D.position.copy(this.object3D.position);
+    keyHighlight.object3D.position.copy(el.object3D.position);
     keyHighlight.object3D.position.x += 0.04;
     keyHighlight.object3D.position.y += 0.036;
   }
 };
+module.exports.keyIn = keyIn;
 
 // -----------------------------------------------------------------------------
 // KEYOUT
 
-Behaviors.keyOut = function() {
+function keyOut (component, keyEl) {
+  var el = keyEl;
   var keyHighlight;
-  this.object3D.position.z = 0;
-  if (this.getAttribute('key-type') === 'spacebar') {
-    this.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_ACTIVE);
+  el.object3D.position.z = 0;
+  if (el.getAttribute('key-type') === 'spacebar') {
+    el.children[0].setAttribute('slice9', 'color', Config.KEY_COLOR_ACTIVE);
   } else {
+    keyHighlight = component.hoverHighlight;
     keyHighlight.object3D.visible = false;
   }
 }
+module.exports.keyOut = keyOut;
 
 // -----------------------------------------------------------------------------
 // SHIFT
 
-Behaviors.isShiftEnabled = false;
-Behaviors.shiftToggle = function() {
-  Behaviors.isShiftEnabled = !Behaviors.isShiftEnabled;
+function shiftToggle (component) {
+  var el = component.el;
+  component.isShiftEnabled = !component.isShiftEnabled;
 
-  var icon_el = Behaviors.el.shiftKey.querySelector('[data-type]');
-  if (Behaviors.isShiftEnabled) {
+  var icon_el = el.shiftKey.querySelector('[data-type]');
+  if (component.isShiftEnabled) {
     icon_el.setAttribute('src', Assets.aframeKeyboardShiftActive);
   } else {
     icon_el.setAttribute('src', Assets.aframeKeyboardShift);
@@ -217,33 +233,31 @@ Behaviors.shiftToggle = function() {
       let textEl = keyEl.querySelector('a-text');
       if (textEl) {
         let value = textEl.getAttribute('value').toLowerCase();
-        if (this.isShiftEnabled) { value = value.toUpperCase(); }
+        if (el.isShiftEnabled) { value = value.toUpperCase(); }
         textEl.setAttribute('value', value);
       }
     }
   }
 }
+module.exports.shiftToggle = shiftToggle;
 
 // -----------------------------------------------------------------------------
 // SYMBOLS
 
-Behaviors.isSymbols = false;
-Behaviors.symbolsToggle = function() {
-  Behaviors.isSymbols = !Behaviors.isSymbols;
-  if (!Behaviors.isSymbols) {
-    let parent = Behaviors.el.symbolsLayout.parentNode;
-    parent.removeChild(Behaviors.el.symbolsLayout);
-    parent.appendChild(Behaviors.el.alphabeticalLayout);
+function symbolsToggle (component) {
+  var el = component.el;
+  component.isSymbols = !component.isSymbols;
+  if (!component.isSymbols) {
+    let parent = el.symbolsLayout.parentNode;
+    parent.removeChild(el.symbolsLayout);
+    parent.appendChild(el.alphabeticalLayout);
     setTimeout(function() {
-      Utils.updateOpacity(Behaviors.el.alphabeticalLayout, 1);
+      Utils.updateOpacity(el.alphabeticalLayout, 1);
     }, 0)
   } else {
-    let parent = Behaviors.el.alphabeticalLayout.parentNode;
-    parent.removeChild(Behaviors.el.alphabeticalLayout);
-    parent.appendChild(Behaviors.el.symbolsLayout);
+    let parent = el.alphabeticalLayout.parentNode;
+    parent.removeChild(el.alphabeticalLayout);
+    parent.appendChild(el.symbolsLayout);
   }
 }
-
-
-
-module.exports = Behaviors;
+module.exports.symbolsToggle = symbolsToggle;
diff --git a/src/keyboard/draw.js b/src/keyboard/draw.js
index cb9ed68..316279f 100755
--- a/src/keyboard/draw.js
+++ b/src/keyboard/draw.js
@@ -2,19 +2,32 @@ const Assets = require('./assets');
 const Layouts = require('./layouts');
 const Config = require('./config');
 const Behaviors = require('./behaviors');
-const Draw = {};
 
-Draw.el = null;
-
-Draw.init = (el)=>{
-  Draw.el = el;
-  Behaviors.el = el;
-  Behaviors.SFX = el.SFX;
-}
+module.exports.drawKeyboard = function (component) {
+  // Init keyboard UI
+  component.actionsUI  = drawActionsUI(component);
+  component.mainUI = drawMainUI(component);
+  component.numericalUI = drawNumericalUI(component);
+  component.hoverHighlight = drawHoverHighlight(component);
+
+  // Create layout
+  component.alphabeticalLayout = drawAlphabeticalLayout(component);
+  component.symbolsLayout = drawSymbolsLayout(component);
+
+  // Append layouts to UI
+  component.numericalUI.appendChild( drawNumericalLayout(component) );
+  component.mainUI.appendChild( component.alphabeticalLayout );
+  component.actionsUI.appendChild( drawActionsLayout(component) );
+
+  component.el.appendChild( component.numericalUI );
+  component.el.appendChild( component.mainUI );
+  component.el.appendChild( component.actionsUI );
+  component.el.appendChild( component.hoverHighlight  );
+};
 
 // -----------------------------------------------------------------------------
 // DRAW HOVER HIGHLIGHT
-Draw.hoverHighlight = ()=> {
+function drawHoverHighlight (component) {
   var slice;
   slice = document.createElement('a-entity');
   slice.setAttribute('id', 'aframeKeyboardHighlight');
@@ -35,7 +48,7 @@ Draw.hoverHighlight = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW NUMERICAL UI
 
-Draw.numericalUI = ()=> {
+function drawNumericalUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.025 0 0.12');
   wrapper.setAttribute('rotation', '0 25 0');
@@ -62,7 +75,7 @@ Draw.numericalUI = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW MAIN UI
 
-Draw.mainUI = ()=>{
+function drawMainUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.312 0 0');
   wrapper.setAttribute('data-ui', true);
@@ -88,7 +101,7 @@ Draw.mainUI = ()=>{
 // -----------------------------------------------------------------------------
 // DRAW ACTION UI
 
-Draw.actionsUI = ()=> {
+function drawActionsUI (component) {
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '1.180 0 0.01');
   wrapper.setAttribute('rotation', '0 -25 0');
@@ -115,7 +128,7 @@ Draw.actionsUI = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW NUMERICAL LAYOUT
 
-Draw.numericalLayout = ()=> {
+function drawNumericalLayout (component) {
   var data = Layouts.numerical;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -123,7 +136,7 @@ Draw.numericalLayout = ()=> {
   let index_y = 0;
   for (var i in data) {
     let key_id = 'num-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
     let index_x = i%3;
     let x = Config.KEY_WIDTH * index_x;
     let y = Config.KEY_WIDTH * index_y;
@@ -137,8 +150,7 @@ Draw.numericalLayout = ()=> {
 
 // -----------------------------------------------------------------------------
 // DRAW ALPHABETICAL LAYOUT
-
-Draw.alphabeticalLayout = ()=> {
+function drawAlphabeticalLayout (component) {
   var data = Layouts.alphabetical;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -147,7 +159,7 @@ Draw.alphabeticalLayout = ()=> {
 
   for (var i in data) {
     let key_id = 'main-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
 
     let x = Config.KEY_WIDTH*index_x;
     let y = Config.KEY_WIDTH*index_y;
@@ -170,7 +182,6 @@ Draw.alphabeticalLayout = ()=> {
     }
 
     key.setAttribute('position', `${x} -${y} 0`);
-
     if (index_y === 1 && index_x === 8) {
       index_x = -1;
       index_y++;
@@ -189,7 +200,7 @@ Draw.alphabeticalLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW SYMBOLS LAYOUT
 
-Draw.symbolsLayout = ()=> {
+function drawSymbolsLayout (component) {
   var data = Layouts.symbols;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -199,7 +210,7 @@ Draw.symbolsLayout = ()=> {
   for (var i in data) {
 
     let key_id = 'symbols-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
     let x = Config.KEY_WIDTH*index_x;
     let y = Config.KEY_WIDTH*index_y;
 
@@ -231,7 +242,7 @@ Draw.symbolsLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW ACTIONS LAYOUT
 
-Draw.actionsLayout = ()=> {
+function drawActionsLayout (component) {
   var data = Layouts.actions;
   var wrapper = document.createElement('a-entity');
   wrapper.setAttribute('position', '0.02 0.26 0.001');
@@ -239,7 +250,7 @@ Draw.actionsLayout = ()=> {
   let val_y = 0;
   for (var i in data) {
     let key_id = 'action-'+i;
-    let key = Draw.key(key_id, data[i].type, data[i].value);
+    let key = drawKey(component, key_id, data[i].type, data[i].value);
 
     key.setAttribute('position', `0 -${val_y} 0`);
     if (i == 0) {
@@ -257,9 +268,8 @@ Draw.actionsLayout = ()=> {
 // -----------------------------------------------------------------------------
 // DRAW KEY
 
-Draw.key = (id, type, value)=> {
+function drawKey(component, id, type, value) {
   var el;
-  var that = this;
   var slice;
 
   el = document.createElement('a-entity');
@@ -284,11 +294,6 @@ Draw.key = (id, type, value)=> {
     el.appendChild(slice);
   }
 
-  // ---------------------------------------------------------------------------
-  // EVENTS
-
-  Behaviors.addKeyEvents(el);
-
   // ---------------------------------------------------------------------------
   // TEXT KEY
 
@@ -340,7 +345,7 @@ Draw.key = (id, type, value)=> {
     icon_el.setAttribute('position', '0.04 0.04 0.01')
     icon_el.setAttribute('src', Assets.aframeKeyboardShift);
     el.appendChild(icon_el);
-    Draw.el.shiftKey = el;
+    component.shiftKey = el;
   }
 
   // ---------------------------------------------------------------------------
@@ -376,7 +381,6 @@ Draw.key = (id, type, value)=> {
     circle_el.setAttribute('radius', 0.044);
     circle_el.setAttribute('position', '0.07 0.07 0.01')
     el.appendChild(circle_el);
-
     var icon_el = document.createElement('a-image');
     icon_el.setAttribute('width', '0.034');
     icon_el.setAttribute('height', '0.034');
@@ -397,7 +401,6 @@ Draw.key = (id, type, value)=> {
     el.appendChild(icon_el);
   }
 
+  component.keys.push(el);
   return el;
 }
-
-module.exports = Draw;
diff --git a/src/keyboard/index.js b/src/keyboard/index.js
index 8402eaa..d561231 100755
--- a/src/keyboard/index.js
+++ b/src/keyboard/index.js
@@ -1,50 +1,49 @@
-const Utils = require('../utils');
 const Draw = require('./draw');
 const Behaviors = require('./behaviors');
 const SFX = require('./sfx');
-const Event = require('../core/event');
 
 AFRAME.registerComponent('keyboard', {
   schema: {
     isOpen: { type: "boolean", default: false },
     physicalKeyboard: { type: "boolean", default: false }
   },
-  currentInput: null,
+
   init: function () {
     let that = this;
 
-    // SFX
-    SFX.init(this.el);
+    this.actionsUI  = null;
+    this.mainUI = null;
+    this.numericalUI = null;
+    this.hoverHighlight = null;
+    this.alphabeticalLayout = null;
+    this.symbolsLayout = null;
 
-    // Draw
-    Draw.init( this.el );
+    this.currentInput = null;
+    this.isShiftEnabled = false;
+    this.isSymbols = false;
+    this.shiftKey = null;
 
-    // Init keyboard UI
-    let numericalUI = Draw.numericalUI(),
-        mainUI      = Draw.mainUI(),
-        actionsUI   = Draw.actionsUI(),
-        hoverHighlight = Draw.hoverHighlight();
+    this.keys = [];
 
-    // Create layout
-    this.el.alphabeticalLayout = Draw.alphabeticalLayout();
-    this.el.symbolsLayout = Draw.symbolsLayout();
+    // SFX
+    SFX.init(this.el);
+
+    // Create keyboard.
+    Draw.drawKeyboard(this);
 
-    // Append layouts to UI
-    numericalUI.appendChild( Draw.numericalLayout() );
-    mainUI.appendChild( this.el.alphabeticalLayout );
-    actionsUI.appendChild( Draw.actionsLayout() );
+    this.mainUI.addEventListener('raycaster-intersected', evt => {
+      console.log(evt);
+    });
 
-    this.el.appendChild( numericalUI );
-    this.el.appendChild( mainUI );
-    this.el.appendChild( actionsUI );
-    this.el.appendChild( hoverHighlight  );
+    // Add event listeners to keys.
+    this.keys.forEach(key => Behaviors.addKeyEvents(that, key) );
 
-    // Inject methods in elements..
-    this.el.show = function() { Behaviors.showKeyboard(that.el); }
-    this.el.hide = function() { Behaviors.hideKeyboard(that.el); }
-    this.el.open = function() { Behaviors.openKeyboard(that.el); }
-    this.el.dismiss = function() { Behaviors.dismissKeyboard(that.el); }
-    this.el.destroy = function() { Behaviors.destroyKeyboard(that.el); }
+    // Inject methods in keyboard element.
+    this.el.show = function() { Behaviors.showKeyboard(that); }
+    this.el.hide = function() { Behaviors.hideKeyboard(that); }
+    this.el.open = function() { Behaviors.openKeyboard(that); }
+    this.el.dismiss = function() { Behaviors.dismissKeyboard(that); }
+    this.el.destroy = function() { Behaviors.destroyKeyboard(that); }
 
     // Set default value
     this.el.setAttribute("scale", "2 2 2");
@@ -61,14 +60,15 @@ AFRAME.registerComponent('keyboard', {
     document.body.addEventListener('didfocusinput', this.didFocusInputEvent.bind(this));
     document.body.addEventListener('didblurinput', this.didBlurInputEvent.bind(this));
   },
+
   update: function () {
     if (this.data.isOpen) {
-      Behaviors.showKeyboard(this.el);
+      Behaviors.showKeyboard(this);
     } else {
-      Behaviors.hideKeyboard(this.el);
+      Behaviors.hideKeyboard(this);
     }
   },
-  tick: function () {},
+
   remove: function () {
     this.el.removeEventListener('input', this.inputEvent.bind(this));
     this.el.removeEventListener('backspace', this.backspaceEvent.bind(this));
@@ -78,8 +78,6 @@ AFRAME.registerComponent('keyboard', {
     document.body.removeEventListener('didfocusinput', this.didFocusInputEvent.bind(this));
     document.body.removeEventListener('didblurinput', this.didBlurInputEvent.bind(this));
   },
-  pause: function () {},
-  play: function () {},
 
   // Fired on keyboard key press
   inputEvent: function(e) {
@@ -108,17 +106,17 @@ AFRAME.registerComponent('keyboard', {
       e.stopPropagation();
 
       if (e.key === 'Enter') {
-        Event.emit(Behaviors.el, 'input', '\n');
-        Event.emit(Behaviors.el, 'enter', '\n');
+        this.el.emit('input', '\n');
+        this.el.emit('enter', '\n');
       }
       else if (e.key === 'Backspace') {
-        Event.emit(Behaviors.el, 'backspace');
+        this.el.emit('backspace');
       }
       else if (e.key === 'Escape') {
-        Event.emit(Behaviors.el, 'dismiss');
+        this.el.emit('dismiss');
       }
       else if (e.key.length < 2) {
-        Event.emit(Behaviors.el, 'input', e.key);
+        this.el.emit('input', e.key);
       }
     }
   },
@@ -130,14 +128,14 @@ AFRAME.registerComponent('keyboard', {
     }
     this.currentInput = e.detail;
     if (!this.el.isOpen) {
-      Behaviors.openKeyboard(this.el);
+      Behaviors.openKeyboard(this);
     }
   },
 
   // Fired when an input has been deselected
   didBlurInputEvent: function(e) {
     this.currentInput = null;
-    Behaviors.dismissKeyboard(this.el);
+    Behaviors.dismissKeyboard(this);
   }
 });