Skip to content

Commit

Permalink
Close #76 Add "scale" option to markers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistic100
mistic100 committed Mar 4, 2018
1 parent 6be626d commit c619257
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 48 deletions.
149 changes: 106 additions & 43 deletions example/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
font-size: 22px;
line-height: 20px;
}

.demo-label {
color: white;
font-size: 20px;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 5px;
border: 1px solid white;
background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
Expand Down Expand Up @@ -68,6 +78,8 @@ <h3>Header Level 3</h3>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<img src="pin2.png" style="width:100%"/>

<pre><code>
#header h1 a {
display: block;
Expand Down Expand Up @@ -180,18 +192,6 @@ <h3>Header Level 3</h3>
}
}

a.push({
id: 'the-path',
name: 'The path',
content: '<img src="pin2.png" style="width:100%"/><img src="pin.png" style="width:100%"/>',
x: 3900,
y: 1650,
image: 'pin2.png',
width: 32,
height: 32,
anchor: 'bottom center'
});

a.push({
id: 'lorem',
tooltip: {
Expand All @@ -207,29 +207,6 @@ <h3>Header Level 3</h3>
anchor: 'bottom center'
});

a.push({
id: 'gif',
image: 'http://strangeplanet.fr/files/avatars/sleep-round.gif',
width: 100,
height: 100,
x: 2060,
y: 960
});

a.push({
id: 'text',
html: 'This <b>is</b> text <img src="pin3.png" style="height: 24px; vertical-align: top;"/>',
anchor: 'bottom right',
style: {
color: 'white',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
latitude: -0.2,
longitude: 0.5
});

a.push({
id: 'polygon-sky',
svgStyle: {
Expand Down Expand Up @@ -274,6 +251,47 @@ <h3>Header Level 3</h3>
tooltip: 'This is a track'
});

a.push({
id: 'html-img-demo',
html: 'HTML & Image',
scale: [0.5, 1.5],
className: 'demo-label',
longitude: 0.5,
latitude: -0.48
});

a.push({
id: 'gif',
image: 'http://strangeplanet.fr/files/avatars/sleep-round.gif',
width: 100,
height: 100,
longitude: 0.60,
latitude: -0.35
});

a.push({
id: 'text',
html: 'This <b>is</b> text <img src="pin3.png" style="height: 24px; vertical-align: top;"/>',
anchor: 'bottom right',
style: {
color: 'white',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
longitude: 0.45,
latitude: -0.4
});

a.push({
id: 'svg-demo',
html: 'SVG marker demo',
scale: [0.5, 1.5],
className: 'demo-label',
longitude: -0.5,
latitude: -0.48
});

a.push({
id: 'circle',
tooltip: 'A circle of radius 30',
Expand All @@ -283,8 +301,8 @@ <h3>Header Level 3</h3>
stroke: 'yellow',
'stroke-width': '2px'
},
longitude: 0,
latitude: -0.1,
longitude: -0.5,
latitude: -0.28,
anchor: 'center right'
});

Expand All @@ -297,8 +315,8 @@ <h3>Header Level 3</h3>
stroke: 'yellow',
'stroke-width': '2px'
},
longitude: 0,
latitude: -0.1,
longitude: -0.5,
latitude: -0.28,
anchor: 'center left'
});

Expand All @@ -311,8 +329,8 @@ <h3>Header Level 3</h3>
stroke: 'yellow',
'stroke-width': '2px'
},
longitude: 0,
latitude: -0.2,
longitude: -0.5,
latitude: -0.38,
anchor: 'center right'
});

Expand All @@ -325,11 +343,56 @@ <h3>Header Level 3</h3>
stroke: 'yellow',
'stroke-width': '2px'
},
longitude: 0,
latitude: -0.2,
longitude: -0.5,
latitude: -0.38,
anchor: 'center left'
});

a.push({
id: 'scale-demo',
html: 'Marker scale demo',
scale: [0.5, 1.5],
className: 'demo-label',
longitude: 0,
latitude: -0.48
});

a.push({
id: 'scale-0',
tooltip: 'No scale',
scale: false,
circle: 20,
svgStyle: {
fill: 'rgba(0, 0, 0, 0.5)'
},
longitude: -0.1,
latitude: -0.4
});

a.push({
id: 'scale-1',
tooltip: '<code>zoom x2</code>',
scale: 2,
circle: 20,
svgStyle: {
fill: 'rgba(0, 0, 0, 0.5)'
},
longitude: 0,
latitude: -0.4
});

a.push({
id: 'scale-2',
tooltip: '<code>zoom x0.5 ; zoom x1.5</code>',
scale: [0.5, 1.5],
circle: 20,
svgStyle: {
fill: 'rgba(0, 0, 0, 0.5)'
},
longitude: 0.1,
latitude: -0.4
});

return a;
}())
});
Expand Down
23 changes: 23 additions & 0 deletions src/js/PSVMarker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,26 @@ PSVMarker.prototype.isSvg = function() {
return this.type == 'rect' || this.type == 'circle' || this.type == 'ellipse' || this.type == 'path';
};

/**
* @summary Computes marker scale from zoom level
* @param {float} zoomLevel
* @returns {float}
*/
PSVMarker.prototype.getScale = function(zoomLevel) {
if (Array.isArray(this.scale)) {
return this.scale[0] + (this.scale[1] - this.scale[0]) * PSVUtils.animation.easings.inQuad(zoomLevel / 100);
}
else if (typeof this.scale == 'function') {
return this.scale(zoomLevel);
}
else if (typeof this.scale == 'number') {
return this.scale * PSVUtils.animation.easings.inQuad(zoomLevel / 100);
}
else {
return 1;
}
};

/**
* @summary Updates the marker with new properties
* @param {object} [properties]
Expand Down Expand Up @@ -286,6 +306,9 @@ PSVMarker.prototype._updateNormal = function() {
this.$el.innerHTML = this.html;
}

// set anchor
this.$el.style.transformOrigin = this.anchor.left * 100 + '% ' + this.anchor.top * 100 + '%';

// convert texture coordinates to spherical coordinates
this.psv.cleanPosition(this);

Expand Down
22 changes: 17 additions & 5 deletions src/js/components/PSVHUD.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@ PSVHUD.prototype.clearMarkers = function(render) {
* @summary Rotate the view to face the marker
* @param {*} marker
* @param {string|int} [duration] - rotates smoothy, see {@link PhotoSphereViewer#animate}
* @fires module:components.PSVHUD.goto-marker-done
* @return {Promise} A promise that will be resolved when the animation finishes
*/
PSVHUD.prototype.gotoMarker = function(marker, duration) {
Expand Down Expand Up @@ -378,14 +379,19 @@ PSVHUD.prototype.renderMarkers = function() {
if (isVisible) {
marker.position2D = position;

if (marker.$el instanceof SVGElement) {
marker.$el.setAttribute('transform', 'translate(' + position.x + ' ' + position.y + ')' +
(!marker.lockRotation && rotation ? ' rotate(' + rotation + ' ' + (marker.anchor.left * marker.width) + ' ' + (marker.anchor.top * marker.height) + ')' : ''));
var scale = marker.getScale(this.psv.getZoomLevel());

if (marker.isSvg()) {
marker.$el.setAttributeNS(null, 'transform',
'translate(' + position.x + ', ' + position.y + ')' +
(scale !== 1 ? ' scale(' + scale + ', ' + scale + ')' : '') +
(!marker.lockRotation && rotation ? ' rotate(' + rotation + ')' : '')
);
}
else {
marker.$el.style.transform = 'translate3D(' + position.x + 'px, ' + position.y + 'px, ' + '0px)' +
marker.$el.style.transform = 'translate3D(' + position.x + 'px, ' + position.y + 'px, 0px)' +
(scale !== 1 ? ' scale(' + scale + ', ' + scale + ')' : '') +
(!marker.lockRotation && rotation ? ' rotateZ(' + rotation + 'deg)' : '');
marker.$el.style.transformOrigin = marker.anchor.left * 100 + '% ' + marker.anchor.top * 100 + '%';
}
}
}
Expand Down Expand Up @@ -420,7 +426,12 @@ PSVHUD.prototype._getMarkerPosition = function(marker) {
if (marker._dynamicSize) {
// make the marker visible to get it's size
PSVUtils.toggleClass(marker.$el, 'psv-marker--transparent', true);
var transform = marker.$el.style.transform;
marker.$el.style.transform = null;

var rect = marker.$el.getBoundingClientRect();

marker.$el.style.transform = transform;
PSVUtils.toggleClass(marker.$el, 'psv-marker--transparent', false);

marker.width = rect.right - rect.left;
Expand Down Expand Up @@ -704,6 +715,7 @@ PSVHUD.prototype._onClick = function(data, e, dblclick) {
/**
* @summary Clicks on an item
* @param {MouseEvent} e
* @fires module:components.PSVHUD.select-marker-list
* @private
*/
PSVHUD.prototype._onClickItem = function(e) {
Expand Down

0 comments on commit c619257

Please sign in to comment.