From 783768c77ef80b6aab64c8d68d9764ac57484047 Mon Sep 17 00:00:00 2001
From: Kevin Lee <kevin@infinite-lee.com>
Date: Tue, 14 Aug 2018 16:55:47 -0700
Subject: [PATCH] networked pen color

---
 src/components/grabbable-toggle.js |  4 ++--
 src/components/tools/pen.js        | 33 ++++++++++++++++++++++++------
 src/hub.html                       |  9 ++++----
 src/network-schemas.js             |  6 +++++-
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/grabbable-toggle.js b/src/components/grabbable-toggle.js
index 8b9bf5079..f3d4bc7e7 100644
--- a/src/components/grabbable-toggle.js
+++ b/src/components/grabbable-toggle.js
@@ -143,10 +143,10 @@ AFRAME.registerComponent(
         evt.preventDefault();
       }
     },
-    resetGrabber: (function() {
+    resetGrabber: (() => {
       const objPos = new THREE.Vector3();
       const grabPos = new THREE.Vector3();
-      const function() {
+      return function() {
         if (!this.grabber) {
           return false;
         }
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index 56bccc460..9d7218fcc 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -15,7 +15,6 @@ AFRAME.registerComponent("pen", {
     camera: { type: "selector" },
     drawing: { type: "string" },
     drawingManager: { type: "string" },
-    color: { type: "color", default: "#FF0000" },
     availableColors: {
       default: ["#FF0033", "#FFFF00", "#00FF33", "#0099FF", "#9900FF", "#FFFFFF", "#000000"]
     }
@@ -24,6 +23,8 @@ AFRAME.registerComponent("pen", {
   init() {
     this.stateAdded = this.stateAdded.bind(this);
     this.stateRemoved = this.stateRemoved.bind(this);
+    this.onMouseWheel = this.onMouseWheel.bind(this);
+    this.onComponentChanged = this.onComponentChanged.bind(this);
 
     this.timeSinceLastDraw = 0;
 
@@ -39,9 +40,9 @@ AFRAME.registerComponent("pen", {
 
     this.worldPosition = new THREE.Vector3();
 
-    this.el.setAttribute("material", { color: this.data.color });
-
     this.colorIndex = 0;
+
+    this.grabbed = false;
   },
 
   play() {
@@ -49,11 +50,16 @@ AFRAME.registerComponent("pen", {
 
     this.el.parentNode.addEventListener("stateadded", this.stateAdded);
     this.el.parentNode.addEventListener("stateremoved", this.stateRemoved);
+    this.el.addEventListener("onComponentChanged", this.onComponentChanged);
+    document.addEventListener("wheel", this.onMouseWheel);
   },
 
   pause() {
     this.el.parentNode.removeEventListener("stateadded", this.stateAdded);
     this.el.parentNode.removeEventListener("stateremoved", this.stateRemoved);
+    this.el.removeEventListener("onComponentChanged", this.onComponentChanged);
+
+    document.removeEventListener("wheel", this.onMouseWheel);
   },
 
   tick(t, dt) {
@@ -93,7 +99,7 @@ AFRAME.registerComponent("pen", {
       this.el.object3D.getWorldPosition(this.worldPosition);
       this.getNormal(this.normal, this.worldPosition, this.direction);
 
-      this.currentDrawing.startDraw(this.worldPosition, this.direction, this.normal, this.data.color);
+      this.currentDrawing.startDraw(this.worldPosition, this.direction, this.normal, this.el.getAttribute("color"));
     }
   },
 
@@ -110,8 +116,8 @@ AFRAME.registerComponent("pen", {
 
   changeColor(mod) {
     this.colorIndex = (this.colorIndex + mod + this.data.availableColors.length) % this.data.availableColors.length;
-    this.data.color = this.data.availableColors[this.colorIndex];
-    this.el.setAttribute("material", { color: this.data.color });
+    const color = this.data.availableColors[this.colorIndex];
+    this.el.setAttribute("color", color);
   },
 
   stateAdded(evt) {
@@ -125,6 +131,8 @@ AFRAME.registerComponent("pen", {
       case "colorPrev":
         this.changeColor(-1);
         break;
+      case "grabbed":
+        this.grabbed = true;
       default:
         break;
     }
@@ -133,11 +141,24 @@ AFRAME.registerComponent("pen", {
   stateRemoved(evt) {
     switch (evt.detail) {
       case "activated":
+        this.endDraw();
+        break;
       case "grabbed":
+        this.grabbed = false;
         this.endDraw();
         break;
       default:
         break;
     }
+  },
+
+  onComponentChanged(evt) {
+    if (evt.detail.name === "color") {
+      changeColor(0);
+    }
+  },
+
+  onMouseWheel(e) {
+    if (this.grabbed) this.changeColor(e.deltaY > 0 ? 1 : -1);
   }
 });
diff --git a/src/hub.html b/src/hub.html
index 65fa1527c..64f19bd42 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -199,10 +199,11 @@
                     scale="0.5 0.5 0.5"
                 >
                     <a-sphere 
+                        id="pen"
                         scale="1.5, 1.5, 1.5" 
                         position="0 -0.18 0" 
-                        radius="0.02" 
-                        color="red" 
+                        radius="0.02"  
+                        color="#FF0033"
                         pen="camera: #player-camera; drawingManager: #drawing-manager"
                     ></a-sphere>
                 </a-entity>
@@ -258,7 +259,7 @@
 
         <a-entity id="pen-counter" networked-counter="max: 3;"></a-entity>
 
-        <a-entity id="drawing-manager" drawing-manager="drawing: #my-first-drawing;"></a-entity>
+        <a-entity id="drawing-manager" drawing-manager="drawing: #default-drawing;"></a-entity>
 
         <a-entity
             id="cursor-controller"
@@ -432,7 +433,7 @@
         ></a-entity>
 
         <a-entity
-            id="my-first-drawing"
+            id="default-drawing"
             networked="template: #interactable-drawing;"
         ></a-entity>
 
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 60e619581..cd3c162df 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -143,7 +143,11 @@ function registerNetworkSchemas() {
         requiresNetworkUpdate: vectorRequiresUpdate(0.5)
       },
       "scale",
-      "media-loader"
+      "media-loader",
+      {
+        selector: "#pen",
+        component: "color"
+      }
     ]
   });
 }
-- 
GitLab