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