https://www.churchillarchive.com/bloomsbury_assets/bloomsbury/js/openseadragon-svg-overlay.js

1// OpenSeadragon SVG Overlay plugin 0.0.5
2
3(function() {
4
5    var $ = window.OpenSeadragon;
6    
7    if (!$) {
8        $ = require('openseadragon');
9        if (!$) {
10            throw new Error('OpenSeadragon is missing.');
11        }
12    }
13
14    var svgNS = 'http://www.w3.org/2000/svg';
15
16    // ----------
17    $.Viewer.prototype.svgOverlay = function() {
18        if (this._svgOverlayInfo) {
19            return this._svgOverlayInfo;
20        }
21
22        this._svgOverlayInfo = new Overlay(this);
23        return this._svgOverlayInfo;
24    };
25
26    // ----------
27    var Overlay = function(viewer) {
28        var self = this;
29
30        this._viewer = viewer;
31        this._containerWidth = 0;
32        this._containerHeight = 0;
33
34        this._svg = document.createElementNS(svgNS, 'svg');
35        this._svg.style.position = 'absolute';
36        this._svg.style.left = 0;
37        this._svg.style.top = 0;
38        this._svg.style.width = '100%';
39        this._svg.style.height = '100%';
40        this._viewer.canvas.appendChild(this._svg);
41
42        this._node = document.createElementNS(svgNS, 'g');
43        this._svg.appendChild(this._node);
44
45        this._viewer.addHandler('animation', function() {
46            self.resize();
47        });
48
49        this._viewer.addHandler('open', function() {
50            self.resize();
51        });
52
53        this._viewer.addHandler('rotate', function(evt) {
54            self.resize();
55        });
56
57        this._viewer.addHandler('flip', function() {
58          self.resize();
59        });
60
61        this._viewer.addHandler('resize', function() {
62            self.resize();
63        });
64
65        this.resize();
66    };
67
68    // ----------
69    Overlay.prototype = {
70        // ----------
71        node: function() {
72            return this._node;
73        },
74
75        // ----------
76        resize: function() {
77            if (this._containerWidth !== this._viewer.container.clientWidth) {
78                this._containerWidth = this._viewer.container.clientWidth;
79                this._svg.setAttribute('width', this._containerWidth);
80            }
81
82            if (this._containerHeight !== this._viewer.container.clientHeight) {
83                this._containerHeight = this._viewer.container.clientHeight;
84                this._svg.setAttribute('height', this._containerHeight);
85            }
86
87            var p = this._viewer.viewport.pixelFromPoint(new $.Point(0, 0), true);
88            var zoom = this._viewer.viewport.getZoom(true);
89            var rotation = this._viewer.viewport.getRotation();
90            //var flipped = this._viewer.viewport.getFlip();
91            var flipped = false;
92            // TODO: Expose an accessor for _containerInnerSize in the OSD API so we don't have to use the private variable.
93            var containerSizeX = this._viewer.viewport._containerInnerSize.x
94            //var scaleX = containerSizeX * zoom;
95            var scaleX = zoom;
96            var scaleY = scaleX;
97            
98            if(flipped){
99                // Makes the x component of the scale negative to flip the svg
100                scaleX = -scaleX;
101                // Translates svg back into the correct coordinates when the x scale is made negative.
102                p.x = -p.x + containerSizeX;
103            }
104
105            this._node.setAttribute('transform',
106                'translate(' + p.x + ',' + p.y + ') scale(' + scaleX + ',' + scaleY + ') rotate(' + rotation + ')');
107        },
108        // ----------
109        onClick: function(node, handler) {
110            // TODO: Fast click for mobile browsers
111
112            new $.MouseTracker({
113                element: node,
114                clickHandler: handler
115            }).setTracking(true);
116        }
117    };
118
119})();