From 0b2e220011376f03151bccaf0d4ad3513c443f61 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 18 Jan 2018 11:04:13 +0100 Subject: [PATCH 01/14] chore(package): update mocha to version 5.0.0 (#167) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index db78d0936..0e79499bb 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "grunt-sass-lint": "^0.2.2", "grunt-wrap": "^0.3.0", "jit-grunt": "^0.10.0", - "mocha": "^4.0.0", + "mocha": "^5.0.0", "simple-cli": "^4.0.0", "time-grunt": "^1.3.0" }, From 5aa0775a12a4320d2d5026f833a83d8f8c457bcd Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 25 Jan 2018 18:50:38 +0000 Subject: [PATCH 02/14] chore(package): update simple-cli to version 5.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0e79499bb..fbfd76c88 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "grunt-wrap": "^0.3.0", "jit-grunt": "^0.10.0", "mocha": "^5.0.0", - "simple-cli": "^4.0.0", + "simple-cli": "^5.0.0", "time-grunt": "^1.3.0" }, "keywords": [ From 93107b5999f6862682f9ecdbce7ffffcc4831c22 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 10:22:06 +0100 Subject: [PATCH 03/14] Use Node 8 on Travis --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 4fff14554..68c3948c2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - "5" + - "8" before_install: - npm install -g grunt-cli - npm install -g bower From ec1f30a6a38d9c004625309b51a88e4193e7e365 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 10:54:57 +0100 Subject: [PATCH 04/14] Fix #165 MultiMaterial has been removed --- Gruntfile.js | 2 +- bower.json | 2 +- package.json | 2 +- src/js/PhotoSphereViewer.core.js | 18 ++++++------------ 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 547995b50..f27dc4671 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -99,7 +99,7 @@ module.exports = function(grunt) { sass: { options: { sourceMap: false, - outputStyle: 'expanded' + style: 'expanded' }, lib: { src: 'src/scss/photo-sphere-viewer.scss', diff --git a/bower.json b/bower.json index 6e5ebbe3e..6214f58d2 100644 --- a/bower.json +++ b/bower.json @@ -19,7 +19,7 @@ "dist/photo-sphere-viewer.css" ], "dependencies": { - "three.js": ">= 0.70.0", + "three.js": ">= 0.85.0", "D.js": "~0.7.3", "uevent": "~1.0.0", "doT": ">=1.0.3" diff --git a/package.json b/package.json index fbfd76c88..0abbb1783 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "description": "A JavaScript library to display Photo Sphere panoramas", "homepage": "http://mistic100.github.io/Photo-Sphere-Viewer", "dependencies": { - "three": ">= 0.70.0", + "three": ">= 0.85.0", "d.js": "~0.7.3", "uevent": "~1.0.0", "dot": ">=1.0.3" diff --git a/src/js/PhotoSphereViewer.core.js b/src/js/PhotoSphereViewer.core.js index 5d8d69c1b..6ca531f23 100644 --- a/src/js/PhotoSphereViewer.core.js +++ b/src/js/PhotoSphereViewer.core.js @@ -389,11 +389,11 @@ PhotoSphereViewer.prototype._setTexture = function(texture) { if (this.prop.isCubemap) { for (var i = 0; i < 6; i++) { - if (this.mesh.material.materials[i].map) { - this.mesh.material.materials[i].map.dispose(); + if (this.mesh.material[i].map) { + this.mesh.material[i].map.dispose(); } - this.mesh.material.materials[i].map = texture[i]; + this.mesh.material[i].map = texture[i]; } } else { @@ -472,7 +472,7 @@ PhotoSphereViewer.prototype._createSphere = function() { ); var material = new THREE.MeshBasicMaterial({ - side: THREE.DoubleSide, + side: THREE.BackSide, overdraw: PhotoSphereViewer.SYSTEM.isWebGLSupported && this.config.webgl ? 0 : 1 }); @@ -496,24 +496,18 @@ PhotoSphereViewer.prototype._createCubemap = function() { var materials = []; for (var i = 0; i < 6; i++) { materials.push(new THREE.MeshBasicMaterial({ + side: THREE.BackSide, overdraw: PhotoSphereViewer.SYSTEM.isWebGLSupported && this.config.webgl ? 0 : 1 })); } - this.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); + this.mesh = new THREE.Mesh(geometry, materials); this.mesh.position.x -= PhotoSphereViewer.SPHERE_RADIUS; this.mesh.position.y -= PhotoSphereViewer.SPHERE_RADIUS; this.mesh.position.z -= PhotoSphereViewer.SPHERE_RADIUS; this.mesh.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1)); this.scene.add(this.mesh); - - // because Raycaster does not support MultiMaterial, add another cube with no texture - // {@link https://github.com/mrdoob/three.js/issues/10734} - var hiddenMaterial = new THREE.MeshBasicMaterial({ side: THREE.BackSide, visible: false }); - var hiddenMesh = new THREE.Mesh(geometry, hiddenMaterial); - - this.scene.add(hiddenMesh); }; /** From 3a21f647fffca5fdd9bdc387c9d657ed971133e9 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 11:10:51 +0100 Subject: [PATCH 05/14] Fix #141 Zoom error when spamming button --- src/js/buttons/PSVNavBarZoomButton.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/js/buttons/PSVNavBarZoomButton.js b/src/js/buttons/PSVNavBarZoomButton.js index 2afafa95a..092b7b7c4 100644 --- a/src/js/buttons/PSVNavBarZoomButton.js +++ b/src/js/buttons/PSVNavBarZoomButton.js @@ -29,7 +29,8 @@ function PSVNavBarZoomButton(navbar) { this.prop = { mousedown: false, buttondown: false, - longPressInterval: null + longPressInterval: null, + longPressTimeout: null }; this.create(); @@ -91,6 +92,8 @@ PSVNavBarZoomButton.prototype.create = function() { * @override */ PSVNavBarZoomButton.prototype.destroy = function() { + this._stopZoomChange(); + this.psv.container.removeEventListener('mousemove', this); this.psv.container.removeEventListener('touchmove', this); this.psv.container.removeEventListener('mouseup', this); @@ -172,7 +175,7 @@ PSVNavBarZoomButton.prototype._zoomIn = function() { this.prop.buttondown = true; this.psv.zoomIn(); - window.setTimeout(this._startLongPressInterval.bind(this, 1), 200); + this.prop.longPressTimeout = window.setTimeout(this._startLongPressInterval.bind(this, 1), 200); }; /** @@ -187,7 +190,7 @@ PSVNavBarZoomButton.prototype._zoomOut = function() { this.prop.buttondown = true; this.psv.zoomOut(); - window.setTimeout(this._startLongPressInterval.bind(this, -1), 200); + this.prop.longPressTimeout = window.setTimeout(this._startLongPressInterval.bind(this, -1), 200); }; /** @@ -213,6 +216,7 @@ PSVNavBarZoomButton.prototype._stopZoomChange = function() { } window.clearInterval(this.prop.longPressInterval); + window.clearTimeout(this.prop.longPressTimeout); this.prop.longPressInterval = null; this.prop.mousedown = false; this.prop.buttondown = false; From 595dd211fad54ec1fda0a1c7df05a7cb812ce326 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 11:16:47 +0100 Subject: [PATCH 06/14] Close #129 #152 Disable cache by default --- example/index.htm | 7 +++++++ src/js/PhotoSphereViewer.defaults.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/example/index.htm b/example/index.htm index 4b0743c10..2ef6ef7d1 100644 --- a/example/index.htm +++ b/example/index.htm @@ -131,14 +131,21 @@

Header Level 3

content: '↻', onClick: (function() { var i = 0; + var loading = false; return function() { + if (loading) { + return; + } + i = 1 - i; + loading = true; PSV.clearMarkers(); PSV.setPanorama(panos[i].url, panos[i].target, true) .then(function() { PSV.setCaption(panos[i].desc); + loading = false; }); } }()) diff --git a/src/js/PhotoSphereViewer.defaults.js b/src/js/PhotoSphereViewer.defaults.js index 10aac51db..0a985b157 100644 --- a/src/js/PhotoSphereViewer.defaults.js +++ b/src/js/PhotoSphereViewer.defaults.js @@ -167,7 +167,7 @@ PhotoSphereViewer.DEFAULTS = { loading_img: null, loading_txt: 'Loading...', size: null, - cache_texture: 5, + cache_texture: 0, templates: {}, markers: [] }; From 9cea7743d374b1a498cfa3f294f1467ad0efd258 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 11:39:56 +0100 Subject: [PATCH 07/14] Close #136 Normalize mousewheel and and mousewheel_factor --- src/js/PSVUtils.js | 57 ++++++++++++++++++++++++++++ src/js/PhotoSphereViewer.defaults.js | 1 + src/js/PhotoSphereViewer.events.js | 5 +-- 3 files changed, 60 insertions(+), 3 deletions(-) diff --git a/src/js/PSVUtils.js b/src/js/PSVUtils.js index 77e02252f..1e2d33c01 100644 --- a/src/js/PSVUtils.js +++ b/src/js/PSVUtils.js @@ -775,3 +775,60 @@ PSVUtils.deepmerge = function(target, src) { PSVUtils.clone = function(src) { return PSVUtils.deepmerge(null, src); }; + +/** + * @summary Normalize mousewheel values accross browsers + * @description From Facebook's Fixed Data Table + * {@link https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js} + * @copyright Facebook + * @param {MouseWheelEvent} event + * @returns {{spinX: number, spinY: number, pixelX: number, pixelY: number}} + */ +PSVUtils.normalizeWheel = function(event) { + var PIXEL_STEP = 10; + var LINE_HEIGHT = 40; + var PAGE_HEIGHT = 800; + + var sX = 0, sY = 0; // spinX, spinY + var pX = 0, pY = 0; // pixelX, pixelY + + // Legacy + if ('detail' in event) { sY = event.detail; } + if ('wheelDelta' in event) { sY = -event.wheelDelta / 120; } + if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; } + if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; } + + // side scrolling on FF with DOMMouseScroll + if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) { + sX = sY; + sY = 0; + } + + pX = sX * PIXEL_STEP; + pY = sY * PIXEL_STEP; + + if ('deltaY' in event) { pY = event.deltaY; } + if ('deltaX' in event) { pX = event.deltaX; } + + if ((pX || pY) && event.deltaMode) { + if (event.deltaMode == 1) { // delta in LINE units + pX *= LINE_HEIGHT; + pY *= LINE_HEIGHT; + } + else { // delta in PAGE units + pX *= PAGE_HEIGHT; + pY *= PAGE_HEIGHT; + } + } + + // Fall-back if spin cannot be determined + if (pX && !sX) { sX = (pX < 1) ? -1 : 1; } + if (pY && !sY) { sY = (pY < 1) ? -1 : 1; } + + return { + spinX: sX, + spinY: sY, + pixelX: pX, + pixelY: pY + }; +}; diff --git a/src/js/PhotoSphereViewer.defaults.js b/src/js/PhotoSphereViewer.defaults.js index 0a985b157..4ff41b119 100644 --- a/src/js/PhotoSphereViewer.defaults.js +++ b/src/js/PhotoSphereViewer.defaults.js @@ -155,6 +155,7 @@ PhotoSphereViewer.DEFAULTS = { gyroscope: 'Gyroscope' }, mousewheel: true, + mousewheel_factor: 1, mousemove: true, keyboard: true, gyroscope: false, diff --git a/src/js/PhotoSphereViewer.events.js b/src/js/PhotoSphereViewer.events.js index e2a5f4d06..13a2ccb77 100644 --- a/src/js/PhotoSphereViewer.events.js +++ b/src/js/PhotoSphereViewer.events.js @@ -408,11 +408,10 @@ PhotoSphereViewer.prototype._onMouseWheel = function(evt) { evt.preventDefault(); evt.stopPropagation(); - var delta = evt.deltaY !== undefined ? -evt.deltaY : (evt.wheelDelta !== undefined ? evt.wheelDelta : -evt.detail); + var delta = PSVUtils.normalizeWheel(evt).spinY * 5; if (delta !== 0) { - var direction = parseInt(delta / Math.abs(delta)); - this.zoom(this.prop.zoom_lvl + direction); + this.zoom(this.prop.zoom_lvl - delta * this.config.mousewheel_factor); } }; From d1d4b169370d6784e1dc53dfca7fdd2ebe4d61f9 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sat, 3 Feb 2018 11:51:47 +0100 Subject: [PATCH 08/14] Close #135 replace panorama_roll by sphere_correction --- src/js/PhotoSphereViewer.core.js | 4 +++- src/js/PhotoSphereViewer.defaults.js | 6 +++++- src/js/PhotoSphereViewer.js | 13 ++++++++++--- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/js/PhotoSphereViewer.core.js b/src/js/PhotoSphereViewer.core.js index 6ca531f23..cc8a4e2a2 100644 --- a/src/js/PhotoSphereViewer.core.js +++ b/src/js/PhotoSphereViewer.core.js @@ -478,7 +478,9 @@ PhotoSphereViewer.prototype._createSphere = function() { this.mesh = new THREE.Mesh(geometry, material); this.mesh.scale.x = -1; - this.mesh.rotation.z = this.config.panorama_roll; + this.mesh.rotation.x = this.config.sphere_correction.tilt; + this.mesh.rotation.y = this.config.sphere_correction.pan; + this.mesh.rotation.z = this.config.sphere_correction.roll; this.scene.add(this.mesh); }; diff --git a/src/js/PhotoSphereViewer.defaults.js b/src/js/PhotoSphereViewer.defaults.js index 4ff41b119..29f71603c 100644 --- a/src/js/PhotoSphereViewer.defaults.js +++ b/src/js/PhotoSphereViewer.defaults.js @@ -122,7 +122,11 @@ PhotoSphereViewer.DEFAULTS = { default_fov: null, default_long: 0, default_lat: 0, - panorama_roll: 0, + sphere_correction: { + pan: 0, + tilt: 0, + roll: 0 + }, longitude_range: null, latitude_range: null, move_speed: 1, diff --git a/src/js/PhotoSphereViewer.js b/src/js/PhotoSphereViewer.js index 08001965b..56438e4df 100644 --- a/src/js/PhotoSphereViewer.js +++ b/src/js/PhotoSphereViewer.js @@ -147,7 +147,12 @@ function PhotoSphereViewer(options) { if (this.config.cache_texture && (!PSVUtils.isInteger(this.config.cache_texture) || this.config.cache_texture < 0)) { this.config.cache_texture = PhotoSphereViewer.DEFAULTS.cache_texture; - console.warn('PhotoSphreViewer: invalid valud for cache_texture'); + console.warn('PhotoSphereViewer: invalid value for cache_texture'); + } + + if ('panorama_roll' in this.config) { + this.config.sphere_correction.roll = this.config.panorama_roll; + console.warn('PhotoSphereViewer: panorama_roll is deprecated, use sphere_correction.roll instead'); } // min_fov/max_fov between 1 and 179 @@ -169,8 +174,10 @@ function PhotoSphereViewer(options) { // parse default_lat, is between -PI/2 and PI/2 this.config.default_lat = PSVUtils.parseAngle(this.config.default_lat, true); - // parse panorama_roll, is between -PI/2 and PI/2 - this.config.panorama_roll = PSVUtils.parseAngle(this.config.panorama_roll, true); + // parse camera_correction, is between -PI/2 and PI/2 + this.config.sphere_correction.pan = PSVUtils.parseAngle(this.config.sphere_correction.pan, true); + this.config.sphere_correction.tilt = PSVUtils.parseAngle(this.config.sphere_correction.tilt, true); + this.config.sphere_correction.roll = PSVUtils.parseAngle(this.config.sphere_correction.roll, true); // default anim_lat is default_lat if (this.config.anim_lat === null) { From 28e92bcaf6f7cace49e64d5921efd3f3990bed04 Mon Sep 17 00:00:00 2001 From: Stephan Muller Date: Wed, 14 Feb 2018 14:27:50 +0100 Subject: [PATCH 09/14] Add main property in package.json (#176) --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 0abbb1783..66db7481c 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "threejs" ], "license": "MIT", + "main": "dist/photo-sphere-viewer.js", "repository": { "type": "git", "url": "git://github.com/mistic100/Photo-Sphere-Viewer.git" From fdcfa4bd60eb1224ce6735a8e558612a270a3925 Mon Sep 17 00:00:00 2001 From: Damien Sorel Date: Wed, 28 Feb 2018 14:17:49 +0100 Subject: [PATCH 10/14] Fix #179 : Incorrect fullscreen event on IE --- src/js/PSVUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/PSVUtils.js b/src/js/PSVUtils.js index 1e2d33c01..576c982ed 100644 --- a/src/js/PSVUtils.js +++ b/src/js/PSVUtils.js @@ -220,7 +220,7 @@ PSVUtils.fullscreenEvent = function() { 'exitFullscreen': 'fullscreenchange', 'webkitExitFullscreen': 'webkitfullscreenchange', 'mozCancelFullScreen': 'mozfullscreenchange', - 'msExitFullscreen': 'msFullscreenEnabled' + 'msExitFullscreen': 'MSFullscreenChange' }; for (var exit in map) { From 4c44ab0c09c076478631d0628fcdd1031a6a8f06 Mon Sep 17 00:00:00 2001 From: Damien SOREL Date: Thu, 1 Mar 2018 13:35:07 +0100 Subject: [PATCH 11/14] Add polyline markers --- .travis.yml | 2 -- example/cubemap.htm | 2 +- example/index.htm | 12 +++++++++ package.json | 4 ++- src/js/PSVMarker.js | 54 +++++++++++++++++++++++++++++-------- src/js/components/PSVHUD.js | 26 +++++++++--------- 6 files changed, 72 insertions(+), 28 deletions(-) diff --git a/.travis.yml b/.travis.yml index 68c3948c2..aeaba4edc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,5 +4,3 @@ node_js: before_install: - npm install -g grunt-cli - npm install -g bower -before_script: - - bower install diff --git a/example/cubemap.htm b/example/cubemap.htm index 0d66cd527..fd423fb83 100644 --- a/example/cubemap.htm +++ b/example/cubemap.htm @@ -131,7 +131,7 @@ }); PSV.on('click', function(e) { - if (e.marker && !e.marker.isPolygon()) { + if (e.marker && !e.marker.isPoly()) { return; } PSV.addMarker({ diff --git a/example/index.htm b/example/index.htm index 2ef6ef7d1..bed141485 100644 --- a/example/index.htm +++ b/example/index.htm @@ -262,6 +262,18 @@

Header Level 3

} }); + a.push({ + id: 'polyline', + polyline_rad: [5.924, 0.064, 5.859, -0.061, 5.710, -0.132, 5.410, -0.287, 4.329, -0.490, 3.838, -0.370, 3.725, -0.241], + svgStyle: { + stroke: 'rgba(80, 100, 50, 0.8)', + 'stroke-linecap': 'round', + 'stroke-linejoin': 'round', + 'stroke-width': '10px' + }, + tooltip: 'This is a track' + }); + a.push({ id: 'circle', tooltip: 'A circle of radius 30', diff --git a/package.json b/package.json index 66db7481c..fbb659c7c 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,8 @@ "url": "git://github.com/mistic100/Photo-Sphere-Viewer.git" }, "scripts": { - "test": "grunt test" + "postinstall": "bower install", + "test": "grunt test", + "start": "grunt serve" } } diff --git a/src/js/PSVMarker.js b/src/js/PSVMarker.js index f968b61c5..be557d9ba 100644 --- a/src/js/PSVMarker.js +++ b/src/js/PSVMarker.js @@ -114,6 +114,9 @@ function PSVMarker(properties, psv) { else if (this.isPolygon()) { $el = document.createElementNS(PSVUtils.svgNS, 'polygon'); } + else if (this.isPolyline()) { + $el = document.createElementNS(PSVUtils.svgNS, 'polyline'); + } else { $el = document.createElementNS(PSVUtils.svgNS, this.type); } @@ -129,7 +132,7 @@ function PSVMarker(properties, psv) { * @type {string[]} * @readonly */ -PSVMarker.types = ['image', 'html', 'polygon_px', 'polygon_rad', 'rect', 'circle', 'ellipse', 'path']; +PSVMarker.types = ['image', 'html', 'polygon_px', 'polygon_rad', 'polyline_px', 'polyline_rad', 'rect', 'circle', 'ellipse', 'path']; /** * @summary Determines the type of a marker by the available properties @@ -172,6 +175,14 @@ PSVMarker.prototype.isNormal = function() { return this.type == 'image' || this.type == 'html'; }; +/** + * @summary Checks if it is a polygon/polyline marker + * @returns {boolean} + */ +PSVMarker.prototype.isPoly = function() { + return this.isPolygon() || this.isPolyline(); +}; + /** * @summary Checks if it is a polygon marker * @returns {boolean} @@ -180,6 +191,14 @@ PSVMarker.prototype.isPolygon = function() { return this.type == 'polygon_px' || this.type == 'polygon_rad'; }; +/** + * @summary Checks if it is a polyline marker + * @returns {boolean} + */ +PSVMarker.prototype.isPolyline = function() { + return this.type == 'polyline_px' || this.type == 'polyline_rad'; +}; + /** * @summary Checks if it is an SVG marker * @returns {boolean} @@ -236,7 +255,10 @@ PSVMarker.prototype.update = function(properties) { this._updateNormal(); } else if (this.isPolygon()) { - this._updatePolygon(); + this._updatePoly('polygon_rad', 'polygon_px'); + } + else if (this.isPolyline()) { + this._updatePoly('polyline_rad', 'polyline_px'); } else { this._updateSvg(); @@ -377,9 +399,11 @@ PSVMarker.prototype._updateSvg = function() { /** * @summary Updates a polygon marker + * @param {'polygon_rad'|'polyline_rad'} key_rad + * @param {'polygon_px'|'polyline_px'} key_px * @private */ -PSVMarker.prototype._updatePolygon = function() { +PSVMarker.prototype._updatePoly = function(key_rad, key_px) { this._dynamicSize = true; // set style @@ -387,13 +411,21 @@ PSVMarker.prototype._updatePolygon = function() { Object.getOwnPropertyNames(this.svgStyle).forEach(function(prop) { this.$el.setAttributeNS(null, prop, this.svgStyle[prop]); }, this); + + if (this.isPolyline() && !this.svgStyle.fill) { + this.$el.setAttributeNS(null, 'fill', 'none'); + } } - else { + else if (this.isPolygon()) { this.$el.setAttributeNS(null, 'fill', 'rgba(0,0,0,0.5)'); } + else if (this.isPolyline()) { + this.$el.setAttributeNS(null, 'fill', 'none'); + this.$el.setAttributeNS(null, 'stroke', 'rgb(0,0,0)'); + } // fold arrays: [1,2,3,4] => [[1,2],[3,4]] - [this.polygon_rad, this.polygon_px].forEach(function(polygon) { + [this[key_rad], this[key_px]].forEach(function(polygon) { if (polygon && typeof polygon[0] != 'object') { for (var i = 0; i < polygon.length; i++) { polygon.splice(i, 2, [polygon[i], polygon[i + 1]]); @@ -402,15 +434,15 @@ PSVMarker.prototype._updatePolygon = function() { }); // convert texture coordinates to spherical coordinates - if (this.polygon_px) { - this.polygon_rad = this.polygon_px.map(function(coord) { + if (this[key_px]) { + this[key_rad] = this[key_px].map(function(coord) { var sphericalCoords = this.psv.textureCoordsToSphericalCoords({ x: coord[0], y: coord[1] }); return [sphericalCoords.longitude, sphericalCoords.latitude]; }, this); } // clean angles else { - this.polygon_rad = this.polygon_rad.map(function(coord) { + this[key_rad] = this[key_rad].map(function(coord) { return [ PSVUtils.parseAngle(coord[0]), PSVUtils.parseAngle(coord[1], true) @@ -419,11 +451,11 @@ PSVMarker.prototype._updatePolygon = function() { } // TODO : compute the center of the polygon - this.longitude = this.polygon_rad[0][0]; - this.latitude = this.polygon_rad[0][1]; + this.longitude = this[key_rad][0][0]; + this.latitude = this[key_rad][0][1]; // compute x/y/z positions - this.positions3D = this.polygon_rad.map(function(coord) { + this.positions3D = this[key_rad].map(function(coord) { return this.psv.sphericalCoordsToVector3({ longitude: coord[0], latitude: coord[1] }); }, this); }; diff --git a/src/js/components/PSVHUD.js b/src/js/components/PSVHUD.js index f7775412b..e6d222078 100644 --- a/src/js/components/PSVHUD.js +++ b/src/js/components/PSVHUD.js @@ -346,12 +346,12 @@ PSVHUD.prototype.renderMarkers = function() { var marker = this.markers[id]; var isVisible = marker.visible; - if (isVisible && marker.isPolygon()) { - var positions = this._getPolygonPositions(marker); + if (isVisible && marker.isPoly()) { + var positions = this._getPolyPositions(marker); isVisible = positions.length > 2; if (isVisible) { - marker.position2D = this._getPolygonDimensions(marker, positions); + marker.position2D = this._getPolyDimensions(marker, positions); var points = ''; positions.forEach(function(pos) { @@ -426,13 +426,13 @@ PSVHUD.prototype._getMarkerPosition = function(marker) { }; /** - * @summary Computes HUD coordinates of each point of a polygon
+ * @summary Computes HUD coordinates of each point of a polygon/polyline
* It handles points behind the camera by creating intermediary points suitable for the projector * @param {PSVMarker} marker * @returns {PhotoSphereViewer.Point[]} * @private */ -PSVHUD.prototype._getPolygonPositions = function(marker) { +PSVHUD.prototype._getPolyPositions = function(marker) { var nbVectors = marker.positions3D.length; // compute if each vector is visible @@ -467,7 +467,7 @@ PSVHUD.prototype._getPolygonPositions = function(marker) { // compute intermediary vector for each pair (the loop is reversed for splice to insert at the right place) toBeComputed.reverse().forEach(function(pair) { positions3D.splice(pair.index, 0, { - vector: this._getPolygonIntermediaryPoint(pair.visible.vector, pair.invisible.vector), + vector: this._getPolyIntermediaryPoint(pair.visible.vector, pair.invisible.vector), visible: true }); }, this); @@ -492,7 +492,7 @@ PSVHUD.prototype._getPolygonPositions = function(marker) { * @returns {THREE.Vector3} * @private */ -PSVHUD.prototype._getPolygonIntermediaryPoint = function(P1, P2) { +PSVHUD.prototype._getPolyIntermediaryPoint = function(P1, P2) { var C = this.psv.prop.direction.clone().normalize(); var N = new THREE.Vector3().crossVectors(P1, P2).normalize(); var V = new THREE.Vector3().crossVectors(N, P1).normalize(); @@ -502,13 +502,13 @@ PSVHUD.prototype._getPolygonIntermediaryPoint = function(P1, P2) { }; /** - * @summary Computes the boundaries positions of a polygon marker + * @summary Computes the boundaries positions of a polygon/polyline marker * @param {PSVMarker} marker - alters width and height * @param {PhotoSphereViewer.Point[]} positions * @returns {PhotoSphereViewer.Point} * @private */ -PSVHUD.prototype._getPolygonDimensions = function(marker, positions) { +PSVHUD.prototype._getPolyDimensions = function(marker, positions) { var minX = +Infinity; var minY = +Infinity; var maxX = -Infinity; @@ -538,7 +538,7 @@ PSVHUD.prototype._getPolygonDimensions = function(marker, positions) { */ PSVHUD.prototype._onMouseEnter = function(e) { var marker; - if (e.target && (marker = e.target.psvMarker) && !marker.isPolygon()) { + if (e.target && (marker = e.target.psvMarker) && !marker.isPoly()) { this.hoveringMarker = marker; /** @@ -574,7 +574,7 @@ PSVHUD.prototype._onMouseLeave = function(e) { var marker; if (e.target && (marker = e.target.psvMarker)) { // do not hide if we enter the tooltip itself while hovering a polygon - if (marker.isPolygon() && e.relatedTarget && PSVUtils.hasParent(e.relatedTarget, this.psv.tooltip.container)) { + if (marker.isPoly() && e.relatedTarget && PSVUtils.hasParent(e.relatedTarget, this.psv.tooltip.container)) { return; } @@ -604,7 +604,7 @@ PSVHUD.prototype._onMouseMove = function(e) { var marker; // do not hide if we enter the tooltip itself while hovering a polygon - if (e.target && (marker = e.target.psvMarker) && marker.isPolygon() || + if (e.target && (marker = e.target.psvMarker) && marker.isPoly() || e.target && PSVUtils.hasParent(e.target, this.psv.tooltip.container) && (marker = this.hoveringMarker)) { if (!this.hoveringMarker) { @@ -628,7 +628,7 @@ PSVHUD.prototype._onMouseMove = function(e) { }); } } - else if (this.hoveringMarker && this.hoveringMarker.isPolygon()) { + else if (this.hoveringMarker && this.hoveringMarker.isPoly()) { this.psv.trigger('leave-marker', marker); this.hoveringMarker = null; From 0f23c9ec452431b406fb69bc77a59e75724705ee Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sun, 4 Mar 2018 10:59:34 +0100 Subject: [PATCH 12/14] Close #162 Add "select-marker-list" and "goto-maker-done" events --- example/index.htm | 8 ++++++++ src/js/PhotoSphereViewer.defaults.js | 8 ++++++++ src/js/PhotoSphereViewer.public.js | 5 +++-- src/js/components/PSVHUD.js | 24 ++++++++++++++++++++++-- 4 files changed, 41 insertions(+), 4 deletions(-) diff --git a/example/index.htm b/example/index.htm index bed141485..1f9c21142 100644 --- a/example/index.htm +++ b/example/index.htm @@ -371,6 +371,14 @@

Header Level 3

PSV.on('leave-marker', function(marker) { console.log('leave', marker.id); }); + + PSV.on('select-marker-list', function(marker) { + console.log('select-list', marker.id); + }); + + PSV.on('goto-marker-done', function(marker) { + console.log('goto-done', marker.id); + });