Selection and hover for thumbs mode (m2)

test/demo/m2/README.md

@@ -1,8 +1,7 @@
 # To Do
 
-* Thumbs hover and active state (SVG overlay?)
 * Resize on window resize
+* Play with constraints while zooming out on corners/edges: constrain as you zoom
 * When going to thumbs, scroll to the proper part of the page
 * Support 400+ page collections
 * Show/hide pages?
-* Play with constraints while zooming out on corners/edges?

test/demo/m2/index.html

@@ -4,8 +4,10 @@
         <title>Mirador POC</title>
         <script type="text/javascript" src='../../../build/openseadragon/openseadragon.js'></script>
         <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
+        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
         <script src="js/main.js"></script>
         <script src="js/tilesources.js"></script>
+        <script src="js/openseadragon-svg-overlay.js"></script>
         <style type="text/css">
 
             html,

test/demo/m2/js/main.js

@@ -1,4 +1,4 @@
-/* globals $, App */
+/* globals $, App, d3 */
 
 (function() {
     // ----------
@@ -89,6 +89,18 @@
                 }
             });
 
+            var tracker = new OpenSeadragon.MouseTracker({
+                element: this.viewer.container,
+                moveHandler: function(event) {
+                    if (self.mode === 'thumbs') {
+                        var result = self.hitTest(self.viewer.viewport.pointFromPixel(event.position));
+                        self.updateHover(result ? result.index : -1);
+                    }
+                }
+            });
+
+            tracker.setTracking(true);
+
             $.each(this.modeNames, function(i, v) {
                 $('.' + v).click(function() {
                     self.setMode(v);
@@ -115,6 +127,26 @@
                 }
             });
 
+            var svgNode = this.viewer.svgOverlay();
+
+            this.highlight = d3.select(svgNode).append("rect")
+                .style('fill', 'none')
+                .style('stroke', '#08f')
+                .style('opacity', 0)
+                .style('stroke-width', 0.05)
+                .attr("pointer-events", "none");
+
+            this.hover = d3.select(svgNode).append("rect")
+                .style('fill', 'none')
+                .style('stroke', '#08f')
+                .style('opacity', 0)
+                .style('stroke-width', 0.05)
+                .attr("pointer-events", "none");
+
+            $(window).resize(function() {
+                self.viewer.svgOverlay('resize');
+            });
+
             this.update();
         },
 
@@ -249,6 +281,52 @@
             this.viewer.viewport.minZoomLevel = this.viewer.viewport.getZoom();
 
             this.update();
+            this.updateHighlight();
+            this.updateHover(-1);
+        },
+
+        // ----------
+        updateHighlight: function() {
+            if (this.mode !== 'thumbs') {
+                this.highlight.style('opacity', 0);
+                return;
+            }
+
+            var item = this.viewer.world.getItemAt(this.page);
+            var box = item.getBounds();
+
+            this.highlight
+                .style('opacity', 1)
+                .attr("x", box.x)
+                .attr("width", box.width)
+                .attr("y", box.y)
+                .attr("height", box.height);
+        },
+
+        // ----------
+        updateHover: function(page) {
+            if (page === -1 || this.mode !== 'thumbs') {
+                this.hover.style('opacity', 0);
+                this.$el.css({
+                    'cursor': 'default'
+                });
+
+                return;
+            }
+
+            this.$el.css({
+                'cursor': 'pointer'
+            });
+
+            var item = this.viewer.world.getItemAt(page);
+            var box = item.getBounds();
+
+            this.hover
+                .style('opacity', 0.3)
+                .attr("x", box.x)
+                .attr("width", box.width)
+                .attr("y", box.y)
+                .attr("height", box.height);
         },
 
         // ----------

test/demo/m2/js/openseadragon-svg-overlay.js

@@ -0,0 +1,73 @@
+(function() {
+
+    if (!window.OpenSeadragon) {
+        console.error('[openseadragon-svg-overlay] requires OpenSeadragon');
+        return;
+    }
+
+    var svgNS = 'http://www.w3.org/2000/svg';
+
+    var update = function(viewer) {
+        var info = viewer._svgOverlayInfo;
+
+        if (info.containerWidth !== viewer.container.clientWidth) {
+            info.containerWidth = viewer.container.clientWidth;
+            info.svg.setAttribute('width', info.containerWidth);
+        }
+
+        if (info.containerHeight !== viewer.container.clientHeight) {
+            info.containerHeight = viewer.container.clientHeight;
+            info.svg.setAttribute('height', info.containerHeight);
+        }
+
+        var p = viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(0, 0), true);
+        var zoom = viewer.viewport.getZoom(true);
+        var scale = viewer.container.clientWidth * zoom;
+        info.node.setAttribute('transform',
+            'translate(' + p.x + ',' + p.y + ') scale(' + scale + ')');
+    };
+
+    OpenSeadragon.Viewer.prototype.svgOverlay = function(command) {
+        var self = this;
+
+        if (command === undefined) {
+            if (this._svgOverlayInfo) {
+                console.error('[openseadragon-svg-overlay] already initialized on this viewer');
+                return;
+            }
+
+            var info = this._svgOverlayInfo = {
+                containerWidth: 0,
+                containerHeight: 0
+            };
+
+            info.svg = document.createElementNS(svgNS, 'svg');
+            info.svg.setAttribute('pointer-events', 'none');
+            info.svg.style.position = 'absolute';
+            info.svg.style.left = 0;
+            info.svg.style.top = 0;
+            info.svg.style.width = '100%';
+            info.svg.style.height = '100%';
+            this.container.insertBefore(info.svg, this.canvas.nextSibling);
+
+            info.node = document.createElementNS(svgNS, 'g');
+            info.svg.appendChild(info.node);
+
+            this.addHandler('animation', function() {
+                update(self);
+            });
+
+            this.addHandler('open', function() {
+                update(self);
+            });
+
+            update(this);
+            return info.node;
+        } else if (command === 'resize') {
+            update(this);
+        } else {
+            console.error('[openseadragon-svg-overlay] unknown command: ' + command);
+        }
+    };
+
+})();