Cutlery/beestat
1
0
Fork 0
mirror of https://github.com/beestat/app.git synced 2025-07-08 10:44:35 -04:00
Code Actions Packages Releases Activity

First pass at floor plan touch events

Browse Source
This commit is contained in:
Jon Ziebell 2022-08-09 22:20:33 -04:00
parent c286a9f24b
commit 3de7b0f1fe
6 changed files with 51 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/beestat/address.js
View File

@ -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 [

15
js/component/floor_plan.js
View File

@ -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;
}
};

9
js/component/floor_plan_entity.js
View File

@ -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_;

7
js/component/floor_plan_entity/point.js
View File

@ -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

33
js/component/floor_plan_entity/room.js
View File

@ -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) {

12
js/component/floor_plan_entity/wall.js
View File

@ -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;