From 3de7b0f1fe6cac6daa0fed025bf246a405b04efa Mon Sep 17 00:00:00 2001 From: Jon Ziebell Date: Tue, 9 Aug 2022 22:20:33 -0400 Subject: [PATCH] First pass at floor plan touch events --- js/beestat/address.js | 2 -- js/component/floor_plan.js | 15 ++++++++--- js/component/floor_plan_entity.js | 9 +++++-- js/component/floor_plan_entity/point.js | 7 ++++-- js/component/floor_plan_entity/room.js | 33 +++++++++++++++++-------- js/component/floor_plan_entity/wall.js | 12 ++++----- 6 files changed, 51 insertions(+), 27 deletions(-) diff --git a/js/beestat/address.js b/js/beestat/address.js index 6f95640..b2387d7 100644 --- a/js/beestat/address.js +++ b/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 [ diff --git a/js/component/floor_plan.js b/js/component/floor_plan.js index b51a331..39d65ea 100644 --- a/js/component/floor_plan.js +++ b/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, - 'y': e.clientY + 'x': e.clientX || e.touches[0].clientX, + '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 dy = (e.clientY - self.drag_start_mouse_.y); + const dx = ((e.clientX || e.touches[0].clientX) - self.drag_start_mouse_.x); + 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; } }; diff --git a/js/component/floor_plan_entity.js b/js/component/floor_plan_entity.js index 646d57e..8c2d04a 100644 --- a/js/component/floor_plan_entity.js +++ b/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, - 'y': e.clientY + 'x': e.clientX || e.touches[0].clientX, + '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_; diff --git a/js/component/floor_plan_entity/point.js b/js/component/floor_plan_entity/point.js index 839d18a..d50c76d 100644 --- a/js/component/floor_plan_entity/point.js +++ b/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_y = this.drag_start_entity_.y + ((e.clientY - this.drag_start_mouse_.y) * 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 || e.touches[0].clientY) - this.drag_start_mouse_.y) * this.floor_plan_.get_scale()); if (this.state_.snapping === true) { // Vertical diff --git a/js/component/floor_plan_entity/room.js b/js/component/floor_plan_entity/room.js index ef5db18..2500e66 100644 --- a/js/component/floor_plan_entity/room.js +++ b/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, - 'y': e.clientY + 'x': e.clientX || e.touches[0].clientX, + '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.clientY === self.mousedown_mouse_.y + (e.clientX || e.changedTouches[0].clientX) === self.mousedown_mouse_.x && + (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_y = this.drag_start_entity_.y + ((e.clientY - this.drag_start_mouse_.y) * 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 || e.touches[0].clientY) - this.drag_start_mouse_.y) * this.floor_plan_.get_scale()); // Snap if (this.state_.snapping === true) { diff --git a/js/component/floor_plan_entity/wall.js b/js/component/floor_plan_entity/wall.js index 7e61980..96c12a4 100644 --- a/js/component/floor_plan_entity/wall.js +++ b/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;