Fix click positions, fix tooltip position

mistic100 · Apr 24, 2016 · fb721a9 · fb721a9
1 parent 81657fd
commit fb721a9
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 31 deletions.
diff --git a/dist/photo-sphere-viewer.js b/dist/photo-sphere-viewer.js
@@ -160,7 +160,6 @@ function PhotoSphereViewer(options) {
     autorotate_reqid: null, // animationRequest id of the automatic rotation
     animation_promise: null, // promise of the current animation (either go to position or image transition)
     start_timeout: null, // timeout id of the automatic rotation delay
-    boundingRect: null, // DOMRect of the container
     size: { // size of the container
       width: 0,
       height: 0
@@ -771,7 +770,7 @@ PhotoSphereViewer.DEFAULTS = {
   keyboard: true,
   gyroscope: false,
   move_inertia: true,
-  click_event_on_marker: true,
+  click_event_on_marker: false,
   transition: {
     duration: 1500,
     loader: true,
@@ -867,7 +866,6 @@ PhotoSphereViewer.prototype._onResize = function() {
     this.prop.size.width = parseInt(this.container.clientWidth);
     this.prop.size.height = parseInt(this.container.clientHeight);
     this.prop.aspect = this.prop.size.width / this.prop.size.height;
-    this.prop.boundingRect = this.container.getBoundingClientRect();
 
     if (this.renderer) {
       this.renderer.setSize(this.prop.size.width, this.prop.size.height);
@@ -1061,12 +1059,14 @@ PhotoSphereViewer.prototype._stopMoveInertia = function(evt) {
  * @private
  */
 PhotoSphereViewer.prototype._click = function(evt) {
+  var boundingRect = this.container.getBoundingClientRect();
+
   var data = {
     target: evt.target,
     client_x: evt.clientX,
     client_y: evt.clientY,
-    viewer_x: parseInt(evt.clientX - this.prop.boundingRect.left),
-    viewer_y: parseInt(evt.clientY - this.prop.boundingRect.top)
+    viewer_x: parseInt(evt.clientX - boundingRect.left),
+    viewer_y: parseInt(evt.clientY - boundingRect.top)
   };
 
   var intersect = this.viewerCoordsToVector3(data.viewer_x, data.viewer_y);
@@ -2456,12 +2456,14 @@ PSVHUD.prototype._onMouseMove = function(e) {
 
       this.hoveringMarker = marker;
 
+      var boundingRect = this.psv.container.getBoundingClientRect();
+
       // simulate a marker with the size of the tooltip arrow to separate it from the cursor
       this.psv.tooltip.showTooltip({
         content: marker.tooltip.content,
         position: marker.tooltip.position,
-        top: e.clientY - this.psv.prop.boundingRect.top - this.psv.config.tooltip.arrow_size,
-        left: e.clientX - this.psv.prop.boundingRect.left - this.psv.config.tooltip.arrow_size,
+        top: e.clientY - boundingRect.top - this.psv.config.tooltip.arrow_size / 2,
+        left: e.clientX - boundingRect.left - this.psv.config.tooltip.arrow_size,
         marker: {
           width: this.psv.config.tooltip.arrow_size * 2,
           height: this.psv.config.tooltip.arrow_size * 2
@@ -2495,8 +2497,8 @@ PSVHUD.prototype._onClick = function(data, e) {
     }
   }
   else if (this.currentMarker) {
+    this.psv.trigger('unselect-marker', this.currentMarker);
     this.currentMarker = null;
-    this.psv.trigger('unselect-marker');
   }
 
   if (marker && marker.psvMarker && marker.psvMarker.content) {
@@ -3655,8 +3657,8 @@ PSVTooltip.prototype._computeTooltipPosition = function(style, config) {
   switch (style.posClass[1]) {
     case 'right':
       if (topBottom) {
-        style.left = config.left;
-        style.arrow_left = config.marker.width / 2 - this.config.arrow_size;
+        style.left = config.left + config.marker.width / 2 - this.config.offset - this.config.arrow_size;
+        style.arrow_left = this.config.offset;
       }
       else {
         style.left = config.left + config.marker.width + this.config.offset + this.config.arrow_size;
@@ -3671,8 +3673,8 @@ PSVTooltip.prototype._computeTooltipPosition = function(style, config) {
 
     case 'left':
       if (topBottom) {
-        style.left = config.left - style.width + config.marker.width;
-        style.arrow_left = style.width - config.marker.width / 2 - this.config.arrow_size;
+        style.left = config.left - style.width + config.marker.width / 2 + this.config.offset + this.config.arrow_size;
+        style.arrow_left = style.width - this.config.offset - this.config.arrow_size * 2;
       }
       else {
         style.left = config.left - style.width - this.config.offset - this.config.arrow_size;

diff --git a/dist/photo-sphere-viewer.min.js b/dist/photo-sphere-viewer.min.js
diff --git a/example/index.htm b/example/index.htm
@@ -207,7 +207,7 @@ <h3>Header Level 3</h3>
         id: 'polygon',
         content: 'This mountain is so great it has dots on it!',
         polygon_px: [3184,794,3268,841,3367,1194,3327,1307,3065,1221,3097,847],
-        style: {
+        svgStyle: {
           fill: 'url(#points)', //'rgba(255,0,0,0.3)',
           stroke: 'rgba(255, 0, 50, 0.8)',
           'stroke-width': '2px'
@@ -222,7 +222,7 @@ <h3>Header Level 3</h3>
         id: 'circle',
         tooltip: 'A circle of radius 30',
         circle: 30,
-        style: {
+        svgStyle: {
           fill: 'rgba(255,255,0,0.3)',
           stroke: 'yellow',
           'stroke-width': '2px'
@@ -236,7 +236,7 @@ <h3>Header Level 3</h3>
         id: 'ellipse',
         tooltip: 'An ellipse of radius 60/30',
         ellipse: [60, 30],
-        style: {
+        svgStyle: {
           fill: 'rgba(255,255,0,0.3)',
           stroke: 'yellow',
           'stroke-width': '2px'
@@ -250,7 +250,7 @@ <h3>Header Level 3</h3>
         id: 'rect',
         tooltip: 'A square a side 60',
         rect: [60, 60],
-        style: {
+        svgStyle: {
           fill: 'rgba(255,255,0,0.3)',
           stroke: 'yellow',
           'stroke-width': '2px'
@@ -264,7 +264,7 @@ <h3>Header Level 3</h3>
         id: 'path',
         tooltip: 'A custom path',
         path: 'M 0 0 L 60 60 L 60 0 L 0 60 L 0 0',
-        style: {
+        svgStyle: {
           fill: 'rgba(255,255,0,0.3)',
           stroke: 'yellow',
           'stroke-width': '2px'

diff --git a/src/js/PhotoSphereViewer.defaults.js b/src/js/PhotoSphereViewer.defaults.js
@@ -99,7 +99,7 @@ PhotoSphereViewer.DEFAULTS = {
   keyboard: true,
   gyroscope: false,
   move_inertia: true,
-  click_event_on_marker: true,
+  click_event_on_marker: false,
   transition: {
     duration: 1500,
     loader: true,

diff --git a/src/js/PhotoSphereViewer.events.js b/src/js/PhotoSphereViewer.events.js
@@ -61,7 +61,6 @@ PhotoSphereViewer.prototype._onResize = function() {
     this.prop.size.width = parseInt(this.container.clientWidth);
     this.prop.size.height = parseInt(this.container.clientHeight);
     this.prop.aspect = this.prop.size.width / this.prop.size.height;
-    this.prop.boundingRect = this.container.getBoundingClientRect();
 
     if (this.renderer) {
       this.renderer.setSize(this.prop.size.width, this.prop.size.height);
@@ -255,12 +254,14 @@ PhotoSphereViewer.prototype._stopMoveInertia = function(evt) {
  * @private
  */
 PhotoSphereViewer.prototype._click = function(evt) {
+  var boundingRect = this.container.getBoundingClientRect();
+
   var data = {
     target: evt.target,
     client_x: evt.clientX,
     client_y: evt.clientY,
-    viewer_x: parseInt(evt.clientX - this.prop.boundingRect.left),
-    viewer_y: parseInt(evt.clientY - this.prop.boundingRect.top)
+    viewer_x: parseInt(evt.clientX - boundingRect.left),
+    viewer_y: parseInt(evt.clientY - boundingRect.top)
   };
 
   var intersect = this.viewerCoordsToVector3(data.viewer_x, data.viewer_y);

diff --git a/src/js/PhotoSphereViewer.js b/src/js/PhotoSphereViewer.js
@@ -140,7 +140,6 @@ function PhotoSphereViewer(options) {
     autorotate_reqid: null, // animationRequest id of the automatic rotation
     animation_promise: null, // promise of the current animation (either go to position or image transition)
     start_timeout: null, // timeout id of the automatic rotation delay
-    boundingRect: null, // DOMRect of the container
     size: { // size of the container
       width: 0,
       height: 0

diff --git a/src/js/components/PSVHUD.js b/src/js/components/PSVHUD.js
@@ -444,12 +444,14 @@ PSVHUD.prototype._onMouseMove = function(e) {
 
       this.hoveringMarker = marker;
 
+      var boundingRect = this.psv.container.getBoundingClientRect();
+
       // simulate a marker with the size of the tooltip arrow to separate it from the cursor
       this.psv.tooltip.showTooltip({
         content: marker.tooltip.content,
         position: marker.tooltip.position,
-        top: e.clientY - this.psv.prop.boundingRect.top - this.psv.config.tooltip.arrow_size,
-        left: e.clientX - this.psv.prop.boundingRect.left - this.psv.config.tooltip.arrow_size,
+        top: e.clientY - boundingRect.top - this.psv.config.tooltip.arrow_size / 2,
+        left: e.clientX - boundingRect.left - this.psv.config.tooltip.arrow_size,
         marker: {
           width: this.psv.config.tooltip.arrow_size * 2,
           height: this.psv.config.tooltip.arrow_size * 2
@@ -483,8 +485,8 @@ PSVHUD.prototype._onClick = function(data, e) {
     }
   }
   else if (this.currentMarker) {
+    this.psv.trigger('unselect-marker', this.currentMarker);
     this.currentMarker = null;
-    this.psv.trigger('unselect-marker');
   }
 
   if (marker && marker.psvMarker && marker.psvMarker.content) {

diff --git a/src/js/components/PSVTooltip.js b/src/js/components/PSVTooltip.js
@@ -246,8 +246,8 @@ PSVTooltip.prototype._computeTooltipPosition = function(style, config) {
   switch (style.posClass[1]) {
     case 'right':
       if (topBottom) {
-        style.left = config.left;
-        style.arrow_left = config.marker.width / 2 - this.config.arrow_size;
+        style.left = config.left + config.marker.width / 2 - this.config.offset - this.config.arrow_size;
+        style.arrow_left = this.config.offset;
       }
       else {
         style.left = config.left + config.marker.width + this.config.offset + this.config.arrow_size;
@@ -262,8 +262,8 @@ PSVTooltip.prototype._computeTooltipPosition = function(style, config) {
 
     case 'left':
       if (topBottom) {
-        style.left = config.left - style.width + config.marker.width;
-        style.arrow_left = style.width - config.marker.width / 2 - this.config.arrow_size;
+        style.left = config.left - style.width + config.marker.width / 2 + this.config.offset + this.config.arrow_size;
+        style.arrow_left = style.width - this.config.offset - this.config.arrow_size * 2;
       }
       else {
         style.left = config.left - style.width - this.config.offset - this.config.arrow_size;