From dccf0465b388b34c63a9fb20f3b9d11ceeece356 Mon Sep 17 00:00:00 2001
From: Mishkin Berteig <mishkin.berteig@berteig.com>
Date: Wed, 9 Sep 2020 10:11:43 -0400
Subject: [PATCH] Fix to issue #71 Cursor positions on shared whiteboards are
inconsistent (#86)
* Fixed "Cursor Positions on Shared Whiteboards are Inconsistent".
The main fix is in the method cursor_point_to_space in
public/javascripts/spacedeck_whiteboard.js.
The calculation of the coordinates of the mouse pointer from absolute
window to the whiteboard space coordinates was incorrect.
There were a number of dependencies on this method which were updated
as a result.
One side-effect was that the div for the lasso tool needed to be
moved inside the div for the whiteboard.
* Fixed minor panning calculation problem. Works now!
---
public/javascripts/spacedeck_sections.js | 2 -
public/javascripts/spacedeck_whiteboard.js | 51 ++++++----------------
views/partials/space.html | 4 +-
3 files changed, 15 insertions(+), 42 deletions(-)
diff --git a/public/javascripts/spacedeck_sections.js b/public/javascripts/spacedeck_sections.js
index df5daa8..540d0ae 100644
--- a/public/javascripts/spacedeck_sections.js
+++ b/public/javascripts/spacedeck_sections.js
@@ -797,7 +797,6 @@ var SpacedeckSections = {
},
handle_user_cursor_update: function(msg) {
- // console.log("handle cursor", msg);
var now = new Date().getTime();
msg.t = now;
var existing = false;
@@ -809,7 +808,6 @@ var SpacedeckSections = {
u.y = msg.y;
u.t = now;
u.name = msg.name;
- // console.log("updated cursor "+i);
existing = true;
} else {
// hide if no updates since 2sec
diff --git a/public/javascripts/spacedeck_whiteboard.js b/public/javascripts/spacedeck_whiteboard.js
index 54be6aa..7c53f14 100644
--- a/public/javascripts/spacedeck_whiteboard.js
+++ b/public/javascripts/spacedeck_whiteboard.js
@@ -374,12 +374,10 @@ function setup_whiteboard_directives() {
var lasso_scaled = {
x:this.lasso.x,
y:this.lasso.y,
- w:this.lasso.w*$scope.viewport_zoom,
- h:this.lasso.h*$scope.viewport_zoom
+ w:this.lasso.w,
+ h:this.lasso.h
}
lasso_scaled = this.abs_rect(lasso_scaled);
- lasso_scaled.x += $scope.bounds_margin_horiz;
- lasso_scaled.y += $scope.bounds_margin_vert;
var s = "left:" +lasso_scaled.x+"px;";
s += "top:" +lasso_scaled.y+"px;";
@@ -399,15 +397,15 @@ function setup_whiteboard_directives() {
$("#lasso").show();
},
+ // Translate the mouse cursor location from device window coordinates to virtual space coordinates
cursor_point_to_space: function(evt) {
var $scope = this.vm.$root;
- var offset = {left: 0, top: 0};
evt = fixup_touches(evt);
return {
- x: (parseInt(evt.pageX) - parseInt(offset.left) - $scope.bounds_margin_horiz) / this.space_zoom,
- y: (parseInt(evt.pageY) - parseInt(offset.top) - $scope.bounds_margin_vert) / this.space_zoom
+ x: $scope.scroll_left + (parseInt(evt.pageX) - $scope.bounds_margin_horiz) / $scope.viewport_zoom,
+ y: $scope.scroll_top + (parseInt(evt.pageY) - $scope.bounds_margin_vert) / $scope.viewport_zoom
};
},
@@ -524,26 +522,12 @@ function setup_whiteboard_directives() {
return results;
},
- offset_point_in_wrapper: function(point) {
- var $scope = this.vm.$root;
- var section_el = $(this.el)[0];
- var z = $scope.viewport_zoom;
-
- var pt = parseInt($("#space").css("padding-top"));
-
- point.y=(point.y+section_el.scrollTop-pt)/z;
- point.x=(point.x+section_el.scrollLeft)/z;
-
- return point;
- },
-
start_drawing_note: function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt);
- this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1;
var a = {
@@ -577,7 +561,7 @@ function setup_whiteboard_directives() {
evt.stopPropagation();
var $scope = this.vm.$root;
- var point = this.offset_point_in_wrapper(this.cursor_point_to_space(evt));
+ var point = this.cursor_point_to_space(evt);
var z = $scope.highest_z()+1;
$scope.deselect();
@@ -617,7 +601,6 @@ function setup_whiteboard_directives() {
var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt);
- this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1;
var a = {
@@ -654,7 +637,6 @@ function setup_whiteboard_directives() {
var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt);
- this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1;
var a = {
@@ -697,8 +679,7 @@ function setup_whiteboard_directives() {
evt.preventDefault();
if (this.mouse_state == "lasso") {
- var lasso_rect = this.abs_rect(this.offset_point_in_wrapper(this.lasso));
- // convert to space coordinates
+ var lasso_rect = this.abs_rect(this.lasso);
if (lasso_rect.w>0 && lasso_rect.h>0) {
var arts = this.artifacts_in_rect(lasso_rect);
@@ -777,18 +758,12 @@ function setup_whiteboard_directives() {
$scope.handle_scroll();
- var cursor = this.cursor_point_to_space(evt);
+ var cursor = this.cursor_point_to_space(evt); // takes the raw event data and finds the mouse location in virtual space
var dx = cursor.x - $scope.mouse_ox;
var dy = cursor.y - $scope.mouse_oy;
var dt = (new Date()).getTime() - this.last_mouse_move_time;
this.last_mouse_move_time = (new Date()).getTime();
- var zoom = $scope.viewport_zoom||1;
- if (zoom) {
- dx/=zoom;
- dy/=zoom;
- }
-
// send cursor
if (dx>10 || dy>10 || dt>100) {
var name = "anonymous";
@@ -800,8 +775,8 @@ function setup_whiteboard_directives() {
var cursor_msg = {
action: "cursor",
- x: cursor.x/zoom,
- y: cursor.y/zoom,
+ x: cursor.x,
+ y: cursor.y,
name: name,
id: $scope.user._id||name
};
@@ -971,7 +946,7 @@ function setup_whiteboard_directives() {
var old_a = a;
var control_points = _.cloneDeep(old_a.control_points);
- var offset = this.offset_point_in_wrapper({x:cursor.x,y:cursor.y});
+ var offset = {x:cursor.x,y:cursor.y};
control_points.push({
dx: offset.x-old_a.x,
@@ -991,8 +966,8 @@ function setup_whiteboard_directives() {
if (!$("#space").length) return;
el = $("#space")[0];
- el.scrollLeft = this.old_panx - dx*$scope.viewport_zoom;
- el.scrollTop = this.old_pany - dy*$scope.viewport_zoom;
+ el.scrollLeft -= dx*$scope.viewport_zoom;
+ el.scrollTop -= dy*$scope.viewport_zoom;
$scope.handle_scroll();
}
diff --git a/views/partials/space.html b/views/partials/space.html
index b25db49..5880e1a 100644
--- a/views/partials/space.html
+++ b/views/partials/space.html
@@ -37,7 +37,7 @@
{% include "./tool/toolbar-object.html" %}
<div v-if="active_space && active_space_loaded">
- <div id="lasso"></div>
+ <!-- <div id="lasso"></div> -->
<div class="snap-ruler-h" v-bind:style="{top:snap_ruler_y+'px'}"></div>
<div class="snap-ruler-v" v-bind:style="{left:snap_ruler_x+'px'}"></div>
<div class="space-empty" v-cloak v-if="active_view == 'space' && !present_mode && active_space_artifacts.length == 0">
@@ -79,7 +79,7 @@
'background-color': ''+active_space.background_color,
'margin-left': bounds_margin_horiz + 'px',
'margin-top': bounds_margin_vert + 'px'}" >
-
+ <div id="lasso"></div>
<div v-for="a in active_space_artifacts"
v-bind:style="a.view.style" v-bind:class="a.view.classes"
v-bind:class="{text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))}"
--
GitLab