First pass at floor plan touch events

js/beestat/address.js

@@ -14,8 +14,6 @@ beestat.address.get_lines = function(address_id) {
     return null;
   }
 
-  console.log(address);
-
   // US Address
   if (address.normalized.components.country_iso_3 === 'USA') {
     return [

js/component/floor_plan.js

@@ -48,6 +48,7 @@ beestat.component.floor_plan.prototype.render = function(parent) {
 
   this.svg_.style.background = beestat.style.color.bluegray.dark;
   this.svg_.style.userSelect = 'none';
+  this.svg_.style.touchAction = 'none';
 
   this.set_zoomable_();
   this.set_draggable_();
@@ -290,8 +291,8 @@ beestat.component.floor_plan.prototype.set_draggable_ = function() {
     e.stopPropagation();
 
     self.drag_start_mouse_ = {
-      'x': e.clientX,
+      'x': e.clientX || e.touches[0].clientX,
-      'y': e.clientY
+      'y': e.clientY || e.touches[0].clientY
     };
 
     self.drag_start_pan_ = {
@@ -304,8 +305,8 @@ beestat.component.floor_plan.prototype.set_draggable_ = function() {
 
   this.mousemove_handler_ = function(e) {
     if (self.dragging_ === true) {
-      const dx = (e.clientX - self.drag_start_mouse_.x);
+      const dx = ((e.clientX || e.touches[0].clientX) - self.drag_start_mouse_.x);
-      const dy = (e.clientY - self.drag_start_mouse_.y);
+      const dy = ((e.clientY || e.touches[0].clientY) - self.drag_start_mouse_.y);
       self.view_box_.x = self.drag_start_pan_.x - (dx * self.get_scale());
       self.view_box_.y = self.drag_start_pan_.y - (dy * self.get_scale());
       self.update_view_box_();
@@ -327,9 +328,13 @@ beestat.component.floor_plan.prototype.set_draggable_ = function() {
   };
 
   this.svg_.addEventListener('mousedown', mousedown_handler.bind(this));
+  this.svg_.addEventListener('touchstart', mousedown_handler.bind(this));
 
   window.addEventListener('mousemove', this.mousemove_handler_);
+  window.addEventListener('touchmove', this.mousemove_handler_);
+
   window.addEventListener('mouseup', this.mouseup_handler_);
+  window.addEventListener('touchend', this.mouseup_handler_);
 };
 
 /**
@@ -384,7 +389,9 @@ beestat.component.floor_plan.prototype.dispose = function() {
     window.removeEventListener('keydown', this.keydown_handler_);
     window.removeEventListener('wheel', this.wheel_handler_);
     window.removeEventListener('mousemove', this.mousemove_handler_);
+    window.removeEventListener('touchmove', this.mousemove_handler_);
     window.removeEventListener('mouseup', this.mouseup_handler_);
+    window.removeEventListener('touchend', this.mouseup_handler_);
     this.rendered_ = false;
   }
 };

js/component/floor_plan_entity.js

@@ -97,6 +97,7 @@ beestat.component.floor_plan_entity.prototype.bring_to_front_ = function() {
 beestat.component.floor_plan_entity.prototype.set_draggable_ = function(draggable) {
   if (draggable === true) {
     this.g_.addEventListener('mousedown', this.mousedown_handler_.bind(this));
+    this.g_.addEventListener('touchstart', this.mousedown_handler_.bind(this));
   }
 
   this.draggable_ = draggable;
@@ -156,13 +157,15 @@ beestat.component.floor_plan_entity.prototype.mousedown_handler_ = function(e) {
 
   this.mousemove_handler_ = this.mousemove_handler_.bind(this);
   window.addEventListener('mousemove', this.mousemove_handler_);
+  window.addEventListener('touchmove', this.mousemove_handler_);
 
   this.mouseup_handler_ = this.mouseup_handler_.bind(this);
   window.addEventListener('mouseup', this.mouseup_handler_);
+  window.addEventListener('touchend', this.mouseup_handler_);
 
   this.drag_start_mouse_ = {
-    'x': e.clientX,
+    'x': e.clientX || e.touches[0].clientX,
-    'y': e.clientY
+    'y': e.clientY || e.touches[0].clientY
   };
 
   this.dragged_ = false;
@@ -211,7 +214,9 @@ beestat.component.floor_plan_entity.prototype.after_mousemove_handler_ = functio
  */
 beestat.component.floor_plan_entity.prototype.mouseup_handler_ = function(e) {
   window.removeEventListener('mousemove', this.mousemove_handler_);
+  window.removeEventListener('touchmove', this.mousemove_handler_);
   window.removeEventListener('mouseup', this.mouseup_handler_);
+  window.removeEventListener('touchend', this.mouseup_handler_);
 
   delete this.drag_start_entity_;
   delete this.drag_start_mouse_;

js/component/floor_plan_entity/point.js

@@ -53,6 +53,9 @@ beestat.component.floor_plan_entity.point.prototype.decorate_rect_ = function(pa
   this.rect_.addEventListener('mousedown', function() {
     self.dispatchEvent('mousedown');
   });
+  // this.rect_.addEventListener('touchstart', function() {
+  //   self.dispatchEvent('mousedown');
+  // });
 
   this.rect_.addEventListener('mouseover', function() {
     self.hover_ = true;
@@ -199,8 +202,8 @@ beestat.component.floor_plan_entity.point.prototype.after_mousedown_handler_ = f
 beestat.component.floor_plan_entity.point.prototype.after_mousemove_handler_ = function(e) {
   const snap_distance = 6;
 
-  let desired_x = this.drag_start_entity_.x + ((e.clientX - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
+  let desired_x = this.drag_start_entity_.x + (((e.clientX || e.touches[0].clientX) - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
-  let desired_y = this.drag_start_entity_.y + ((e.clientY - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
+  let desired_y = this.drag_start_entity_.y + (((e.clientY || e.touches[0].clientY) - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
 
   if (this.state_.snapping === true) {
     // Vertical

js/component/floor_plan_entity/room.js

@@ -65,21 +65,28 @@ beestat.component.floor_plan_entity.prototype.decorate_polygon_ = function(paren
 
   // Activate room on click if the mouse didn't move.
   if (this.enabled_ === true) {
-    this.polygon_.addEventListener('mousedown', function(e) {
+    const mousedown_handler = function(e) {
+      console.log('mousedown');
       self.mousedown_mouse_ = {
-        'x': e.clientX,
+        'x': e.clientX || e.touches[0].clientX,
-        'y': e.clientY
+        'y': e.clientY || e.touches[0].clientY
       };
-    });
+    };
-    this.polygon_.addEventListener('mouseup', function(e) {
+    this.polygon_.addEventListener('mousedown', mousedown_handler);
+    // this.polygon_.addEventListener('touchstart', mousedown_handler);
+
+    const mouseup_handler = function(e) {
+      console.log('mouseup');
       if (
         self.mousedown_mouse_ !== undefined &&
-        e.clientX === self.mousedown_mouse_.x &&
+        (e.clientX || e.changedTouches[0].clientX) === self.mousedown_mouse_.x &&
-        e.clientY === self.mousedown_mouse_.y
+        (e.clientY || e.changedTouches[0].clientY) === self.mousedown_mouse_.y
       ) {
         self.set_active(true);
       }
-    });
+    };
+    this.polygon_.addEventListener('mouseup', mouseup_handler);
+    // this.polygon_.addEventListener('touchend', mouseup_handler);
   }
 
   this.update_polygon_();
@@ -130,6 +137,9 @@ beestat.component.floor_plan_entity.prototype.decorate_points_ = function(parent
     point_entity.addEventListener('mousedown', function() {
       point_entity.set_active(true);
     });
+    point_entity.addEventListener('touchstart', function() {
+      point_entity.set_active(true);
+    });
 
     // Add toolbar button on activate.
     point_entity.addEventListener('activate', function() {
@@ -197,6 +207,9 @@ beestat.component.floor_plan_entity.prototype.decorate_walls_ = function(parent)
     wall_entity.addEventListener('mousedown', function() {
       wall_entity.set_active(true);
     });
+    wall_entity.addEventListener('mousedown', function() {
+      wall_entity.set_active(true);
+    });
 
     // Add toolbar button on activate.
     wall_entity.addEventListener('activate', function() {
@@ -450,8 +463,8 @@ beestat.component.floor_plan_entity.room.prototype.after_mousedown_handler_ = fu
 beestat.component.floor_plan_entity.room.prototype.after_mousemove_handler_ = function(e) {
   const self = this;
 
-  let desired_x = this.drag_start_entity_.x + ((e.clientX - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
+  let desired_x = this.drag_start_entity_.x + (((e.clientX || e.touches[0].clientX) - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
-  let desired_y = this.drag_start_entity_.y + ((e.clientY - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
+  let desired_y = this.drag_start_entity_.y + (((e.clientY || e.touches[0].clientY) - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
 
   // Snap
   if (this.state_.snapping === true) {

js/component/floor_plan_entity/wall.js

@@ -46,16 +46,14 @@ beestat.component.floor_plan_entity.wall.prototype.decorate_line_ = function(par
   this.path_.addEventListener('mousedown', function() {
     self.dispatchEvent('mousedown');
   });
+  // this.path_.addEventListener('touchstart', function() {
+  //   self.dispatchEvent('mousedown');
+  // });
 
   this.decorate_text_(parent);
 
   this.update_line_();
 
-  // Update the line if the ctrl key is pressed.
-  this.floor_plan_.addEventListener('ctrl_key', function() {
-    self.update_line_();
-  });
-
   this.path_.addEventListener('dblclick', this.add_point.bind(this));
 };
 
@@ -347,7 +345,7 @@ beestat.component.floor_plan_entity.wall.prototype.after_mousemove_handler_ = fu
   const snap_distance = 6;
 
   if (this.is_vertical_() === true) {
-    let desired_x = this.drag_start_entity_.x + ((e.clientX - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
+    let desired_x = this.drag_start_entity_.x + (((e.clientX || e.touches[0].clientX) - this.drag_start_mouse_.x) * this.floor_plan_.get_scale());
 
     if (this.state_.snapping === true) {
       const point_x = this.room_.get_x() + desired_x;
@@ -376,7 +374,7 @@ beestat.component.floor_plan_entity.wall.prototype.after_mousemove_handler_ = fu
       null
     );
   } else if (this.is_horizontal_() === true) {
-    let desired_y = this.drag_start_entity_.y + ((e.clientY - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
+    let desired_y = this.drag_start_entity_.y + (((e.clientY || e.touches[0].clientY) - this.drag_start_mouse_.y) * this.floor_plan_.get_scale());
 
     if (this.state_.snapping === true) {
       const point_y = this.room_.get_y() + desired_y;