mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #621 from openseadragon/m2

Browse Source 
M2 demo: improved constraints; detail on/off
This commit is contained in:
Ian Gilman 2015-03-11 15:52:00 -07:00
commit eb39e4072e
4 changed files with 135 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/viewport.js
View File

@ -596,8 +596,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
return this.zoomTo(newZoom, null, true);
}
if (Math.abs(newZoom - oldZoom) < 0.00000000001 ||
Math.abs(newBounds.width - oldBounds.width) < 0.00000000001) {
if (Math.abs(newZoom - oldZoom) < 0.00000001 ||
Math.abs(newBounds.width - oldBounds.width) < 0.00000001) {
return this.panTo( center, immediately );
}

3
test/demo/m2/index.html
View File

@ -7,7 +7,7 @@
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/main.js"></script>
<script src="js/page.js"></script>
<!-- <script src="js/harvard-tilesources.js"></script> -->
<script src="js/harvard-tilesources.js"></script>
<script src="js/openseadragon-svg-overlay.js"></script>
<style type="text/css">
@ -66,6 +66,7 @@
<button class="scroll">Scroll</button>
<button class="book">Book</button>
<button class="page">Page</button>
<label><input class="details" type="checkbox">Show Detail Overlays</label>
<div class="nav">
<button class="previous">Previous</button>
<button class="next">Next</button>

108
test/demo/m2/js/main.js
View File

@ -57,7 +57,11 @@
}
});
this.viewer.addHandler('viewport-change', function(event) {
this.viewer.addHandler('zoom', function(event) {
self.applyConstraints();
});
this.viewer.addHandler('pan', function(event) {
self.applyConstraints();
});
@ -77,6 +81,16 @@
self.previous();
});
this.$details = $('.details')
.prop('checked', true)
.change(function() {
if (self.$details.prop('checked')) {
self.showDetails();
} else {
self.hideDetails();
}
});
$(window).keyup(function(event) {
if (self.mode === 'thumbs') {
return;
@ -178,6 +192,20 @@
});
},
// ----------
hideDetails: function() {
$.each(this.pages, function(i, v) {
v.removeDetails();
});
},
// ----------
showDetails: function() {
$.each(this.pages, function(i, v) {
v.addDetails();
});
},
// ----------
hitTest: function(pos) {
var count = this.pages.length;
@ -267,33 +295,69 @@
return;
}
if (this.panBounds) {
var center = this.viewer.viewport.getCenter(true);
var viewBounds = this.viewer.viewport.getBounds(true);
var bounds = this.panBounds.clone();
var left = bounds.x + (viewBounds.width / 2);
var top = bounds.y + (viewBounds.height / 2);
var right = (bounds.x + bounds.width) - (viewBounds.width / 2);
var bottom = (bounds.y + bounds.height) - (viewBounds.height / 2);
if (this.panBounds && !this.inZoomConstraints) {
var changed = false;
var viewBounds = this.viewer.viewport.getBounds();
var panBounds = this.panBounds.clone();
var x;
if (left <= right) {
x = Math.max(left, Math.min(right, center.x));
} else {
x = bounds.x + (bounds.width / 2);
if (viewBounds.x < panBounds.x - 0.00001) {
viewBounds.x = panBounds.x;
changed = true;
}
var y;
if (top <= bottom) {
y = Math.max(top, Math.min(bottom, center.y));
} else {
y = bounds.y + (bounds.height / 2);
if (viewBounds.y < panBounds.y - 0.00001) {
viewBounds.y = panBounds.y;
changed = true;
}
if (x !== center.x || y !== center.y) {
this.viewer.viewport.centerSpringX.current.value = x;
this.viewer.viewport.centerSpringY.current.value = y;
if (viewBounds.width > panBounds.width + 0.00001) {
viewBounds.width = panBounds.width;
changed = true;
}
if (viewBounds.height > panBounds.height + 0.00001) {
viewBounds.height = panBounds.height;
changed = true;
}
if (viewBounds.x + viewBounds.width > panBounds.x + panBounds.width + 0.00001) {
viewBounds.x = (panBounds.x + panBounds.width) - viewBounds.width;
changed = true;
}
if (viewBounds.y + viewBounds.height > panBounds.y + panBounds.height + 0.00001) {
viewBounds.y = (panBounds.y + panBounds.height) - viewBounds.height;
changed = true;
}
if (changed) {
this.inZoomConstraints = true;
this.viewer.viewport.fitBounds(viewBounds);
this.inZoomConstraints = false;
}
}
var zoom = this.viewer.viewport.getZoom();
var maxZoom = 2;
var zoomPoint = this.viewer.viewport.zoomPoint || this.viewer.viewport.getCenter();
var info = this.hitTest(zoomPoint);
if (info) {
var page = this.pages[info.index];
var tiledImage = page.hitTest(zoomPoint);
if (tiledImage) {
maxZoom = this.viewer.maxZoomLevel;
if (!maxZoom) {
var imageWidth = tiledImage.getContentSize().x;
var viewerWidth = this.$el.width();
maxZoom = imageWidth * this.viewer.maxZoomPixelRatio / viewerWidth;
maxZoom /= tiledImage.getBounds().width;
}
}
}
if (zoom > maxZoom) {
this.viewer.viewport.zoomSpring.target.value = maxZoom;
}
},

45
test/demo/m2/js/page.js
View File

@ -75,6 +75,10 @@
}
$.each(this.details, function(i, v) {
if (v.tiledImage) {
return;
}
App.viewer.addTiledImage({
tileSource: v.tileSource,
success: function(event) {
@ -85,6 +89,47 @@
});
},
// ----------
removeDetails: function() {
var self = this;
if (!this.details) {
return;
}
$.each(this.details, function(i, v) {
if (v.tiledImage) {
App.viewer.world.removeItem(v.tiledImage);
delete v.tiledImage;
}
});
},
// ----------
hitTest: function(pos) {
if (!this.details) {
return this.main.tiledImage;
}
var count = this.details.length;
var detail, box;
for (var i = 0; i < count; i++) {
detail = this.details[i];
if (!detail.tiledImage) {
continue;
}
box = detail.tiledImage.getBounds();
if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width &&
pos.y < box.y + box.height) {
return detail.tiledImage;
}
}
return this.main.tiledImage;
},
// ----------
getBounds: function() {
return this.bounds.clone();