Unverified Commit dccf0465 authored by Mishkin Berteig's avatar Mishkin Berteig Committed by GitHub
Browse files

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!
parent 7f72992d
...@@ -797,7 +797,6 @@ var SpacedeckSections = { ...@@ -797,7 +797,6 @@ var SpacedeckSections = {
}, },
handle_user_cursor_update: function(msg) { handle_user_cursor_update: function(msg) {
// console.log("handle cursor", msg);
var now = new Date().getTime(); var now = new Date().getTime();
msg.t = now; msg.t = now;
var existing = false; var existing = false;
...@@ -809,7 +808,6 @@ var SpacedeckSections = { ...@@ -809,7 +808,6 @@ var SpacedeckSections = {
u.y = msg.y; u.y = msg.y;
u.t = now; u.t = now;
u.name = msg.name; u.name = msg.name;
// console.log("updated cursor "+i);
existing = true; existing = true;
} else { } else {
// hide if no updates since 2sec // hide if no updates since 2sec
......
...@@ -374,12 +374,10 @@ function setup_whiteboard_directives() { ...@@ -374,12 +374,10 @@ function setup_whiteboard_directives() {
var lasso_scaled = { var lasso_scaled = {
x:this.lasso.x, x:this.lasso.x,
y:this.lasso.y, y:this.lasso.y,
w:this.lasso.w*$scope.viewport_zoom, w:this.lasso.w,
h:this.lasso.h*$scope.viewport_zoom h:this.lasso.h
} }
lasso_scaled = this.abs_rect(lasso_scaled); 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;"; var s = "left:" +lasso_scaled.x+"px;";
s += "top:" +lasso_scaled.y+"px;"; s += "top:" +lasso_scaled.y+"px;";
...@@ -399,15 +397,15 @@ function setup_whiteboard_directives() { ...@@ -399,15 +397,15 @@ function setup_whiteboard_directives() {
$("#lasso").show(); $("#lasso").show();
}, },
// Translate the mouse cursor location from device window coordinates to virtual space coordinates
cursor_point_to_space: function(evt) { cursor_point_to_space: function(evt) {
var $scope = this.vm.$root; var $scope = this.vm.$root;
var offset = {left: 0, top: 0};
evt = fixup_touches(evt); evt = fixup_touches(evt);
return { return {
x: (parseInt(evt.pageX) - parseInt(offset.left) - $scope.bounds_margin_horiz) / this.space_zoom, x: $scope.scroll_left + (parseInt(evt.pageX) - $scope.bounds_margin_horiz) / $scope.viewport_zoom,
y: (parseInt(evt.pageY) - parseInt(offset.top) - $scope.bounds_margin_vert) / this.space_zoom y: $scope.scroll_top + (parseInt(evt.pageY) - $scope.bounds_margin_vert) / $scope.viewport_zoom
}; };
}, },
...@@ -524,26 +522,12 @@ function setup_whiteboard_directives() { ...@@ -524,26 +522,12 @@ function setup_whiteboard_directives() {
return results; 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) { start_drawing_note: function(evt) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
var $scope = this.vm.$root; var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt); var point = this.cursor_point_to_space(evt);
this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1; var z = $scope.highest_z()+1;
var a = { var a = {
...@@ -577,7 +561,7 @@ function setup_whiteboard_directives() { ...@@ -577,7 +561,7 @@ function setup_whiteboard_directives() {
evt.stopPropagation(); evt.stopPropagation();
var $scope = this.vm.$root; 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; var z = $scope.highest_z()+1;
$scope.deselect(); $scope.deselect();
...@@ -617,7 +601,6 @@ function setup_whiteboard_directives() { ...@@ -617,7 +601,6 @@ function setup_whiteboard_directives() {
var $scope = this.vm.$root; var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt); var point = this.cursor_point_to_space(evt);
this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1; var z = $scope.highest_z()+1;
var a = { var a = {
...@@ -654,7 +637,6 @@ function setup_whiteboard_directives() { ...@@ -654,7 +637,6 @@ function setup_whiteboard_directives() {
var $scope = this.vm.$root; var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt); var point = this.cursor_point_to_space(evt);
this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1; var z = $scope.highest_z()+1;
var a = { var a = {
...@@ -697,8 +679,7 @@ function setup_whiteboard_directives() { ...@@ -697,8 +679,7 @@ function setup_whiteboard_directives() {
evt.preventDefault(); evt.preventDefault();
if (this.mouse_state == "lasso") { if (this.mouse_state == "lasso") {
var lasso_rect = this.abs_rect(this.offset_point_in_wrapper(this.lasso)); var lasso_rect = this.abs_rect(this.lasso);
// convert to space coordinates
if (lasso_rect.w>0 && lasso_rect.h>0) { if (lasso_rect.w>0 && lasso_rect.h>0) {
var arts = this.artifacts_in_rect(lasso_rect); var arts = this.artifacts_in_rect(lasso_rect);
...@@ -777,18 +758,12 @@ function setup_whiteboard_directives() { ...@@ -777,18 +758,12 @@ function setup_whiteboard_directives() {
$scope.handle_scroll(); $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 dx = cursor.x - $scope.mouse_ox;
var dy = cursor.y - $scope.mouse_oy; var dy = cursor.y - $scope.mouse_oy;
var dt = (new Date()).getTime() - this.last_mouse_move_time; var dt = (new Date()).getTime() - this.last_mouse_move_time;
this.last_mouse_move_time = (new Date()).getTime(); this.last_mouse_move_time = (new Date()).getTime();
var zoom = $scope.viewport_zoom||1;
if (zoom) {
dx/=zoom;
dy/=zoom;
}
// send cursor // send cursor
if (dx>10 || dy>10 || dt>100) { if (dx>10 || dy>10 || dt>100) {
var name = "anonymous"; var name = "anonymous";
...@@ -800,8 +775,8 @@ function setup_whiteboard_directives() { ...@@ -800,8 +775,8 @@ function setup_whiteboard_directives() {
var cursor_msg = { var cursor_msg = {
action: "cursor", action: "cursor",
x: cursor.x/zoom, x: cursor.x,
y: cursor.y/zoom, y: cursor.y,
name: name, name: name,
id: $scope.user._id||name id: $scope.user._id||name
}; };
...@@ -971,7 +946,7 @@ function setup_whiteboard_directives() { ...@@ -971,7 +946,7 @@ function setup_whiteboard_directives() {
var old_a = a; var old_a = a;
var control_points = _.cloneDeep(old_a.control_points); 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({ control_points.push({
dx: offset.x-old_a.x, dx: offset.x-old_a.x,
...@@ -991,8 +966,8 @@ function setup_whiteboard_directives() { ...@@ -991,8 +966,8 @@ function setup_whiteboard_directives() {
if (!$("#space").length) return; if (!$("#space").length) return;
el = $("#space")[0]; el = $("#space")[0];
el.scrollLeft = this.old_panx - dx*$scope.viewport_zoom; el.scrollLeft -= dx*$scope.viewport_zoom;
el.scrollTop = this.old_pany - dy*$scope.viewport_zoom; el.scrollTop -= dy*$scope.viewport_zoom;
$scope.handle_scroll(); $scope.handle_scroll();
} }
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
{% include "./tool/toolbar-object.html" %} {% include "./tool/toolbar-object.html" %}
<div v-if="active_space && active_space_loaded"> <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-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="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"> <div class="space-empty" v-cloak v-if="active_view == 'space' && !present_mode && active_space_artifacts.length == 0">
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
'background-color': ''+active_space.background_color, 'background-color': ''+active_space.background_color,
'margin-left': bounds_margin_horiz + 'px', 'margin-left': bounds_margin_horiz + 'px',
'margin-top': bounds_margin_vert + 'px'}" > 'margin-top': bounds_margin_vert + 'px'}" >
<div id="lasso"></div>
<div v-for="a in active_space_artifacts" <div v-for="a in active_space_artifacts"
v-bind:style="a.view.style" v-bind:class="a.view.classes" 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'))}" v-bind:class="{text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))}"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment