[413] | 1 | // svg-pan-zoom v3.5.2 |
---|
| 2 | // https://github.com/ariutta/svg-pan-zoom |
---|
| 3 | // wget http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js |
---|
| 4 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ |
---|
| 5 | var svgPanZoom = require('./svg-pan-zoom.js'); |
---|
| 6 | |
---|
| 7 | // UMD module definition |
---|
| 8 | (function(window, document){ |
---|
| 9 | // AMD |
---|
| 10 | if (typeof define === 'function' && define.amd) { |
---|
| 11 | define('svg-pan-zoom', function () { |
---|
| 12 | return svgPanZoom; |
---|
| 13 | }); |
---|
| 14 | // CMD |
---|
| 15 | } else if (typeof module !== 'undefined' && module.exports) { |
---|
| 16 | module.exports = svgPanZoom; |
---|
| 17 | |
---|
| 18 | // Browser |
---|
| 19 | // Keep exporting globally as module.exports is available because of browserify |
---|
| 20 | window.svgPanZoom = svgPanZoom; |
---|
| 21 | } |
---|
| 22 | })(window, document) |
---|
| 23 | |
---|
| 24 | },{"./svg-pan-zoom.js":4}],2:[function(require,module,exports){ |
---|
| 25 | var SvgUtils = require('./svg-utilities'); |
---|
| 26 | |
---|
| 27 | module.exports = { |
---|
| 28 | enable: function(instance) { |
---|
| 29 | // Select (and create if necessary) defs |
---|
| 30 | var defs = instance.svg.querySelector('defs') |
---|
| 31 | if (!defs) { |
---|
| 32 | defs = document.createElementNS(SvgUtils.svgNS, 'defs') |
---|
| 33 | instance.svg.appendChild(defs) |
---|
| 34 | } |
---|
| 35 | |
---|
| 36 | // Check for style element, and create it if it doesn't exist |
---|
| 37 | var styleEl = defs.querySelector('style#svg-pan-zoom-controls-styles'); |
---|
| 38 | if (!styleEl) { |
---|
| 39 | var style = document.createElementNS(SvgUtils.svgNS, 'style') |
---|
| 40 | style.setAttribute('id', 'svg-pan-zoom-controls-styles') |
---|
| 41 | style.setAttribute('type', 'text/css') |
---|
| 42 | style.textContent = '.svg-pan-zoom-control { cursor: pointer; fill: black; fill-opacity: 0.333; } .svg-pan-zoom-control:hover { fill-opacity: 0.8; } .svg-pan-zoom-control-background { fill: white; fill-opacity: 0.5; } .svg-pan-zoom-control-background { fill-opacity: 0.8; }' |
---|
| 43 | defs.appendChild(style) |
---|
| 44 | } |
---|
| 45 | |
---|
| 46 | // Zoom Group |
---|
| 47 | var zoomGroup = document.createElementNS(SvgUtils.svgNS, 'g'); |
---|
| 48 | zoomGroup.setAttribute('id', 'svg-pan-zoom-controls'); |
---|
| 49 | zoomGroup.setAttribute('transform', 'translate(' + ( instance.width - 70 ) + ' ' + ( instance.height - 76 ) + ') scale(0.75)'); |
---|
| 50 | zoomGroup.setAttribute('class', 'svg-pan-zoom-control'); |
---|
| 51 | |
---|
| 52 | // Control elements |
---|
| 53 | zoomGroup.appendChild(this._createZoomIn(instance)) |
---|
| 54 | zoomGroup.appendChild(this._createZoomReset(instance)) |
---|
| 55 | zoomGroup.appendChild(this._createZoomOut(instance)) |
---|
| 56 | |
---|
| 57 | // Finally append created element |
---|
| 58 | instance.svg.appendChild(zoomGroup) |
---|
| 59 | |
---|
| 60 | // Cache control instance |
---|
| 61 | instance.controlIcons = zoomGroup |
---|
| 62 | } |
---|
| 63 | |
---|
| 64 | , _createZoomIn: function(instance) { |
---|
| 65 | var zoomIn = document.createElementNS(SvgUtils.svgNS, 'g'); |
---|
| 66 | zoomIn.setAttribute('id', 'svg-pan-zoom-zoom-in'); |
---|
| 67 | zoomIn.setAttribute('transform', 'translate(30.5 5) scale(0.015)'); |
---|
| 68 | zoomIn.setAttribute('class', 'svg-pan-zoom-control'); |
---|
| 69 | zoomIn.addEventListener('click', function() {instance.getPublicInstance().zoomIn()}, false) |
---|
| 70 | zoomIn.addEventListener('touchstart', function() {instance.getPublicInstance().zoomIn()}, false) |
---|
| 71 | |
---|
| 72 | var zoomInBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier |
---|
| 73 | zoomInBackground.setAttribute('x', '0'); |
---|
| 74 | zoomInBackground.setAttribute('y', '0'); |
---|
| 75 | zoomInBackground.setAttribute('width', '1500'); // larger than expected because the whole group is transformed to scale down |
---|
| 76 | zoomInBackground.setAttribute('height', '1400'); |
---|
| 77 | zoomInBackground.setAttribute('class', 'svg-pan-zoom-control-background'); |
---|
| 78 | zoomIn.appendChild(zoomInBackground); |
---|
| 79 | |
---|
| 80 | var zoomInShape = document.createElementNS(SvgUtils.svgNS, 'path'); |
---|
| 81 | zoomInShape.setAttribute('d', 'M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h320v-320q0 -26 19 -45t45 -19h128q26 0 45 19t19 45v320h320q26 0 45 19t19 45zM1536 1120v-960 q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5t84.5 -203.5z'); |
---|
| 82 | zoomInShape.setAttribute('class', 'svg-pan-zoom-control-element'); |
---|
| 83 | zoomIn.appendChild(zoomInShape); |
---|
| 84 | |
---|
| 85 | return zoomIn |
---|
| 86 | } |
---|
| 87 | |
---|
| 88 | , _createZoomReset: function(instance){ |
---|
| 89 | // reset |
---|
| 90 | var resetPanZoomControl = document.createElementNS(SvgUtils.svgNS, 'g'); |
---|
| 91 | resetPanZoomControl.setAttribute('id', 'svg-pan-zoom-reset-pan-zoom'); |
---|
| 92 | resetPanZoomControl.setAttribute('transform', 'translate(5 35) scale(0.4)'); |
---|
| 93 | resetPanZoomControl.setAttribute('class', 'svg-pan-zoom-control'); |
---|
| 94 | resetPanZoomControl.addEventListener('click', function() {instance.getPublicInstance().reset()}, false); |
---|
| 95 | resetPanZoomControl.addEventListener('touchstart', function() {instance.getPublicInstance().reset()}, false); |
---|
| 96 | |
---|
| 97 | var resetPanZoomControlBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier |
---|
| 98 | resetPanZoomControlBackground.setAttribute('x', '2'); |
---|
| 99 | resetPanZoomControlBackground.setAttribute('y', '2'); |
---|
| 100 | resetPanZoomControlBackground.setAttribute('width', '182'); // larger than expected because the whole group is transformed to scale down |
---|
| 101 | resetPanZoomControlBackground.setAttribute('height', '58'); |
---|
| 102 | resetPanZoomControlBackground.setAttribute('class', 'svg-pan-zoom-control-background'); |
---|
| 103 | resetPanZoomControl.appendChild(resetPanZoomControlBackground); |
---|
| 104 | |
---|
| 105 | var resetPanZoomControlShape1 = document.createElementNS(SvgUtils.svgNS, 'path'); |
---|
| 106 | resetPanZoomControlShape1.setAttribute('d', 'M33.051,20.632c-0.742-0.406-1.854-0.609-3.338-0.609h-7.969v9.281h7.769c1.543,0,2.701-0.188,3.473-0.562c1.365-0.656,2.048-1.953,2.048-3.891C35.032,22.757,34.372,21.351,33.051,20.632z'); |
---|
| 107 | resetPanZoomControlShape1.setAttribute('class', 'svg-pan-zoom-control-element'); |
---|
| 108 | resetPanZoomControl.appendChild(resetPanZoomControlShape1); |
---|
| 109 | |
---|
| 110 | var resetPanZoomControlShape2 = document.createElementNS(SvgUtils.svgNS, 'path'); |
---|
| 111 | resetPanZoomControlShape2.setAttribute('d', 'M170.231,0.5H15.847C7.102,0.5,0.5,5.708,0.5,11.84v38.861C0.5,56.833,7.102,61.5,15.847,61.5h154.384c8.745,0,15.269-4.667,15.269-10.798V11.84C185.5,5.708,178.976,0.5,170.231,0.5z M42.837,48.569h-7.969c-0.219-0.766-0.375-1.383-0.469-1.852c-0.188-0.969-0.289-1.961-0.305-2.977l-0.047-3.211c-0.03-2.203-0.41-3.672-1.142-4.406c-0.732-0.734-2.103-1.102-4.113-1.102h-7.05v13.547h-7.055V14.022h16.524c2.361,0.047,4.178,0.344,5.45,0.891c1.272,0.547,2.351,1.352,3.234,2.414c0.731,0.875,1.31,1.844,1.737,2.906s0.64,2.273,0.64,3.633c0,1.641-0.414,3.254-1.242,4.84s-2.195,2.707-4.102,3.363c1.594,0.641,2.723,1.551,3.387,2.73s0.996,2.98,0.996,5.402v2.32c0,1.578,0.063,2.648,0.19,3.211c0.19,0.891,0.635,1.547,1.333,1.969V48.569z M75.579,48.569h-26.18V14.022h25.336v6.117H56.454v7.336h16.781v6H56.454v8.883h19.125V48.569z M104.497,46.331c-2.44,2.086-5.887,3.129-10.34,3.129c-4.548,0-8.125-1.027-10.731-3.082s-3.909-4.879-3.909-8.473h6.891c0.224,1.578,0.662,2.758,1.316,3.539c1.196,1.422,3.246,2.133,6.15,2.133c1.739,0,3.151-0.188,4.236-0.562c2.058-0.719,3.087-2.055,3.087-4.008c0-1.141-0.504-2.023-1.512-2.648c-1.008-0.609-2.607-1.148-4.796-1.617l-3.74-0.82c-3.676-0.812-6.201-1.695-7.576-2.648c-2.328-1.594-3.492-4.086-3.492-7.477c0-3.094,1.139-5.664,3.417-7.711s5.623-3.07,10.036-3.07c3.685,0,6.829,0.965,9.431,2.895c2.602,1.93,3.966,4.73,4.093,8.402h-6.938c-0.128-2.078-1.057-3.555-2.787-4.43c-1.154-0.578-2.587-0.867-4.301-0.867c-1.907,0-3.428,0.375-4.565,1.125c-1.138,0.75-1.706,1.797-1.706,3.141c0,1.234,0.561,2.156,1.682,2.766c0.721,0.406,2.25,0.883,4.589,1.43l6.063,1.43c2.657,0.625,4.648,1.461,5.975,2.508c2.059,1.625,3.089,3.977,3.089,7.055C108.157,41.624,106.937,44.245,104.497,46.331z M139.61,48.569h-26.18V14.022h25.336v6.117h-18.281v7.336h16.781v6h-16.781v8.883h19.125V48.569z M170.337,20.14h-10.336v28.43h-7.266V20.14h-10.383v-6.117h27.984V20.14z'); |
---|
| 112 | resetPanZoomControlShape2.setAttribute('class', 'svg-pan-zoom-control-element'); |
---|
| 113 | resetPanZoomControl.appendChild(resetPanZoomControlShape2); |
---|
| 114 | |
---|
| 115 | return resetPanZoomControl |
---|
| 116 | } |
---|
| 117 | |
---|
| 118 | , _createZoomOut: function(instance){ |
---|
| 119 | // zoom out |
---|
| 120 | var zoomOut = document.createElementNS(SvgUtils.svgNS, 'g'); |
---|
| 121 | zoomOut.setAttribute('id', 'svg-pan-zoom-zoom-out'); |
---|
| 122 | zoomOut.setAttribute('transform', 'translate(30.5 70) scale(0.015)'); |
---|
| 123 | zoomOut.setAttribute('class', 'svg-pan-zoom-control'); |
---|
| 124 | zoomOut.addEventListener('click', function() {instance.getPublicInstance().zoomOut()}, false); |
---|
| 125 | zoomOut.addEventListener('touchstart', function() {instance.getPublicInstance().zoomOut()}, false); |
---|
| 126 | |
---|
| 127 | var zoomOutBackground = document.createElementNS(SvgUtils.svgNS, 'rect'); // TODO change these background space fillers to rounded rectangles so they look prettier |
---|
| 128 | zoomOutBackground.setAttribute('x', '0'); |
---|
| 129 | zoomOutBackground.setAttribute('y', '0'); |
---|
| 130 | zoomOutBackground.setAttribute('width', '1500'); // larger than expected because the whole group is transformed to scale down |
---|
| 131 | zoomOutBackground.setAttribute('height', '1400'); |
---|
| 132 | zoomOutBackground.setAttribute('class', 'svg-pan-zoom-control-background'); |
---|
| 133 | zoomOut.appendChild(zoomOutBackground); |
---|
| 134 | |
---|
| 135 | var zoomOutShape = document.createElementNS(SvgUtils.svgNS, 'path'); |
---|
| 136 | zoomOutShape.setAttribute('d', 'M1280 576v128q0 26 -19 45t-45 19h-896q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h896q26 0 45 19t19 45zM1536 1120v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5 t84.5 -203.5z'); |
---|
| 137 | zoomOutShape.setAttribute('class', 'svg-pan-zoom-control-element'); |
---|
| 138 | zoomOut.appendChild(zoomOutShape); |
---|
| 139 | |
---|
| 140 | return zoomOut |
---|
| 141 | } |
---|
| 142 | |
---|
| 143 | , disable: function(instance) { |
---|
| 144 | if (instance.controlIcons) { |
---|
| 145 | instance.controlIcons.parentNode.removeChild(instance.controlIcons) |
---|
| 146 | instance.controlIcons = null |
---|
| 147 | } |
---|
| 148 | } |
---|
| 149 | } |
---|
| 150 | |
---|
| 151 | },{"./svg-utilities":5}],3:[function(require,module,exports){ |
---|
| 152 | var SvgUtils = require('./svg-utilities') |
---|
| 153 | , Utils = require('./utilities') |
---|
| 154 | ; |
---|
| 155 | |
---|
| 156 | var ShadowViewport = function(viewport, options){ |
---|
| 157 | this.init(viewport, options) |
---|
| 158 | } |
---|
| 159 | |
---|
| 160 | /** |
---|
| 161 | * Initialization |
---|
| 162 | * |
---|
| 163 | * @param {SVGElement} viewport |
---|
| 164 | * @param {Object} options |
---|
| 165 | */ |
---|
| 166 | ShadowViewport.prototype.init = function(viewport, options) { |
---|
| 167 | // DOM Elements |
---|
| 168 | this.viewport = viewport |
---|
| 169 | this.options = options |
---|
| 170 | |
---|
| 171 | // State cache |
---|
| 172 | this.originalState = {zoom: 1, x: 0, y: 0} |
---|
| 173 | this.activeState = {zoom: 1, x: 0, y: 0} |
---|
| 174 | |
---|
| 175 | this.updateCTMCached = Utils.proxy(this.updateCTM, this) |
---|
| 176 | |
---|
| 177 | // Create a custom requestAnimationFrame taking in account refreshRate |
---|
| 178 | this.requestAnimationFrame = Utils.createRequestAnimationFrame(this.options.refreshRate) |
---|
| 179 | |
---|
| 180 | // ViewBox |
---|
| 181 | this.viewBox = {x: 0, y: 0, width: 0, height: 0} |
---|
| 182 | this.cacheViewBox() |
---|
| 183 | |
---|
| 184 | // Process CTM |
---|
| 185 | var newCTM = this.processCTM() |
---|
| 186 | |
---|
| 187 | // Update viewport CTM and cache zoom and pan |
---|
| 188 | this.setCTM(newCTM) |
---|
| 189 | |
---|
| 190 | // Update CTM in this frame |
---|
| 191 | this.updateCTM() |
---|
| 192 | } |
---|
| 193 | |
---|
| 194 | /** |
---|
| 195 | * Cache initial viewBox value |
---|
| 196 | * If no viewBox is defined, then use viewport size/position instead for viewBox values |
---|
| 197 | */ |
---|
| 198 | ShadowViewport.prototype.cacheViewBox = function() { |
---|
| 199 | var svgViewBox = this.options.svg.getAttribute('viewBox') |
---|
| 200 | |
---|
| 201 | if (svgViewBox) { |
---|
| 202 | var viewBoxValues = svgViewBox.split(/[\s\,]/).filter(function(v){return v}).map(parseFloat) |
---|
| 203 | |
---|
| 204 | // Cache viewbox x and y offset |
---|
| 205 | this.viewBox.x = viewBoxValues[0] |
---|
| 206 | this.viewBox.y = viewBoxValues[1] |
---|
| 207 | this.viewBox.width = viewBoxValues[2] |
---|
| 208 | this.viewBox.height = viewBoxValues[3] |
---|
| 209 | |
---|
| 210 | var zoom = Math.min(this.options.width / this.viewBox.width, this.options.height / this.viewBox.height) |
---|
| 211 | |
---|
| 212 | // Update active state |
---|
| 213 | this.activeState.zoom = zoom |
---|
| 214 | this.activeState.x = (this.options.width - this.viewBox.width * zoom) / 2 |
---|
| 215 | this.activeState.y = (this.options.height - this.viewBox.height * zoom) / 2 |
---|
| 216 | |
---|
| 217 | // Force updating CTM |
---|
| 218 | this.updateCTMOnNextFrame() |
---|
| 219 | |
---|
| 220 | this.options.svg.removeAttribute('viewBox') |
---|
| 221 | } else { |
---|
| 222 | this.simpleViewBoxCache() |
---|
| 223 | } |
---|
| 224 | } |
---|
| 225 | |
---|
| 226 | /** |
---|
| 227 | * Recalculate viewport sizes and update viewBox cache |
---|
| 228 | */ |
---|
| 229 | ShadowViewport.prototype.simpleViewBoxCache = function() { |
---|
| 230 | var bBox = this.viewport.getBBox() |
---|
| 231 | |
---|
| 232 | this.viewBox.x = bBox.x |
---|
| 233 | this.viewBox.y = bBox.y |
---|
| 234 | this.viewBox.width = bBox.width |
---|
| 235 | this.viewBox.height = bBox.height |
---|
| 236 | } |
---|
| 237 | |
---|
| 238 | /** |
---|
| 239 | * Returns a viewbox object. Safe to alter |
---|
| 240 | * |
---|
| 241 | * @return {Object} viewbox object |
---|
| 242 | */ |
---|
| 243 | ShadowViewport.prototype.getViewBox = function() { |
---|
| 244 | return Utils.extend({}, this.viewBox) |
---|
| 245 | } |
---|
| 246 | |
---|
| 247 | /** |
---|
| 248 | * Get initial zoom and pan values. Save them into originalState |
---|
| 249 | * Parses viewBox attribute to alter initial sizes |
---|
| 250 | * |
---|
| 251 | * @return {CTM} CTM object based on options |
---|
| 252 | */ |
---|
| 253 | ShadowViewport.prototype.processCTM = function() { |
---|
| 254 | var newCTM = this.getCTM() |
---|
| 255 | |
---|
| 256 | if (this.options.fit || this.options.contain) { |
---|
| 257 | var newScale; |
---|
| 258 | if (this.options.fit) { |
---|
| 259 | newScale = Math.min(this.options.width/this.viewBox.width, this.options.height/this.viewBox.height); |
---|
| 260 | } else { |
---|
| 261 | newScale = Math.max(this.options.width/this.viewBox.width, this.options.height/this.viewBox.height); |
---|
| 262 | } |
---|
| 263 | |
---|
| 264 | newCTM.a = newScale; //x-scale |
---|
| 265 | newCTM.d = newScale; //y-scale |
---|
| 266 | newCTM.e = -this.viewBox.x * newScale; //x-transform |
---|
| 267 | newCTM.f = -this.viewBox.y * newScale; //y-transform |
---|
| 268 | } |
---|
| 269 | |
---|
| 270 | if (this.options.center) { |
---|
| 271 | var offsetX = (this.options.width - (this.viewBox.width + this.viewBox.x * 2) * newCTM.a) * 0.5 |
---|
| 272 | , offsetY = (this.options.height - (this.viewBox.height + this.viewBox.y * 2) * newCTM.a) * 0.5 |
---|
| 273 | |
---|
| 274 | newCTM.e = offsetX |
---|
| 275 | newCTM.f = offsetY |
---|
| 276 | } |
---|
| 277 | |
---|
| 278 | // Cache initial values. Based on activeState and fix+center opitons |
---|
| 279 | this.originalState.zoom = newCTM.a |
---|
| 280 | this.originalState.x = newCTM.e |
---|
| 281 | this.originalState.y = newCTM.f |
---|
| 282 | |
---|
| 283 | return newCTM |
---|
| 284 | } |
---|
| 285 | |
---|
| 286 | /** |
---|
| 287 | * Return originalState object. Safe to alter |
---|
| 288 | * |
---|
| 289 | * @return {Object} |
---|
| 290 | */ |
---|
| 291 | ShadowViewport.prototype.getOriginalState = function() { |
---|
| 292 | return Utils.extend({}, this.originalState) |
---|
| 293 | } |
---|
| 294 | |
---|
| 295 | /** |
---|
| 296 | * Return actualState object. Safe to alter |
---|
| 297 | * |
---|
| 298 | * @return {Object} |
---|
| 299 | */ |
---|
| 300 | ShadowViewport.prototype.getState = function() { |
---|
| 301 | return Utils.extend({}, this.activeState) |
---|
| 302 | } |
---|
| 303 | |
---|
| 304 | /** |
---|
| 305 | * Get zoom scale |
---|
| 306 | * |
---|
| 307 | * @return {Float} zoom scale |
---|
| 308 | */ |
---|
| 309 | ShadowViewport.prototype.getZoom = function() { |
---|
| 310 | return this.activeState.zoom |
---|
| 311 | } |
---|
| 312 | |
---|
| 313 | /** |
---|
| 314 | * Get zoom scale for pubilc usage |
---|
| 315 | * |
---|
| 316 | * @return {Float} zoom scale |
---|
| 317 | */ |
---|
| 318 | ShadowViewport.prototype.getRelativeZoom = function() { |
---|
| 319 | return this.activeState.zoom / this.originalState.zoom |
---|
| 320 | } |
---|
| 321 | |
---|
| 322 | /** |
---|
| 323 | * Compute zoom scale for pubilc usage |
---|
| 324 | * |
---|
| 325 | * @return {Float} zoom scale |
---|
| 326 | */ |
---|
| 327 | ShadowViewport.prototype.computeRelativeZoom = function(scale) { |
---|
| 328 | return scale / this.originalState.zoom |
---|
| 329 | } |
---|
| 330 | |
---|
| 331 | /** |
---|
| 332 | * Get pan |
---|
| 333 | * |
---|
| 334 | * @return {Object} |
---|
| 335 | */ |
---|
| 336 | ShadowViewport.prototype.getPan = function() { |
---|
| 337 | return {x: this.activeState.x, y: this.activeState.y} |
---|
| 338 | } |
---|
| 339 | |
---|
| 340 | /** |
---|
| 341 | * Return cached viewport CTM value that can be safely modified |
---|
| 342 | * |
---|
| 343 | * @return {SVGMatrix} |
---|
| 344 | */ |
---|
| 345 | ShadowViewport.prototype.getCTM = function() { |
---|
| 346 | var safeCTM = this.options.svg.createSVGMatrix() |
---|
| 347 | |
---|
| 348 | // Copy values manually as in FF they are not itterable |
---|
| 349 | safeCTM.a = this.activeState.zoom |
---|
| 350 | safeCTM.b = 0 |
---|
| 351 | safeCTM.c = 0 |
---|
| 352 | safeCTM.d = this.activeState.zoom |
---|
| 353 | safeCTM.e = this.activeState.x |
---|
| 354 | safeCTM.f = this.activeState.y |
---|
| 355 | |
---|
| 356 | return safeCTM |
---|
| 357 | } |
---|
| 358 | |
---|
| 359 | /** |
---|
| 360 | * Set a new CTM |
---|
| 361 | * |
---|
| 362 | * @param {SVGMatrix} newCTM |
---|
| 363 | */ |
---|
| 364 | ShadowViewport.prototype.setCTM = function(newCTM) { |
---|
| 365 | var willZoom = this.isZoomDifferent(newCTM) |
---|
| 366 | , willPan = this.isPanDifferent(newCTM) |
---|
| 367 | |
---|
| 368 | if (willZoom || willPan) { |
---|
| 369 | // Before zoom |
---|
| 370 | if (willZoom) { |
---|
| 371 | // If returns false then cancel zooming |
---|
| 372 | if (this.options.beforeZoom(this.getRelativeZoom(), this.computeRelativeZoom(newCTM.a)) === false) { |
---|
| 373 | newCTM.a = newCTM.d = this.activeState.zoom |
---|
| 374 | willZoom = false |
---|
| 375 | } else { |
---|
| 376 | this.updateCache(newCTM); |
---|
| 377 | this.options.onZoom(this.getRelativeZoom()) |
---|
| 378 | } |
---|
| 379 | } |
---|
| 380 | |
---|
| 381 | // Before pan |
---|
| 382 | if (willPan) { |
---|
| 383 | var preventPan = this.options.beforePan(this.getPan(), {x: newCTM.e, y: newCTM.f}) |
---|
| 384 | // If prevent pan is an object |
---|
| 385 | , preventPanX = false |
---|
| 386 | , preventPanY = false |
---|
| 387 | |
---|
| 388 | // If prevent pan is Boolean false |
---|
| 389 | if (preventPan === false) { |
---|
| 390 | // Set x and y same as before |
---|
| 391 | newCTM.e = this.getPan().x |
---|
| 392 | newCTM.f = this.getPan().y |
---|
| 393 | |
---|
| 394 | preventPanX = preventPanY = true |
---|
| 395 | } else if (Utils.isObject(preventPan)) { |
---|
| 396 | // Check for X axes attribute |
---|
| 397 | if (preventPan.x === false) { |
---|
| 398 | // Prevent panning on x axes |
---|
| 399 | newCTM.e = this.getPan().x |
---|
| 400 | preventPanX = true |
---|
| 401 | } else if (Utils.isNumber(preventPan.x)) { |
---|
| 402 | // Set a custom pan value |
---|
| 403 | newCTM.e = preventPan.x |
---|
| 404 | } |
---|
| 405 | |
---|
| 406 | // Check for Y axes attribute |
---|
| 407 | if (preventPan.y === false) { |
---|
| 408 | // Prevent panning on x axes |
---|
| 409 | newCTM.f = this.getPan().y |
---|
| 410 | preventPanY = true |
---|
| 411 | } else if (Utils.isNumber(preventPan.y)) { |
---|
| 412 | // Set a custom pan value |
---|
| 413 | newCTM.f = preventPan.y |
---|
| 414 | } |
---|
| 415 | } |
---|
| 416 | |
---|
| 417 | // Update willPan flag |
---|
| 418 | // Check if newCTM is still different |
---|
| 419 | if ((preventPanX && preventPanY) || !this.isPanDifferent(newCTM)) { |
---|
| 420 | willPan = false |
---|
| 421 | } else { |
---|
| 422 | this.updateCache(newCTM); |
---|
| 423 | this.options.onPan(this.getPan()); |
---|
| 424 | } |
---|
| 425 | } |
---|
| 426 | |
---|
| 427 | // Check again if should zoom or pan |
---|
| 428 | if (willZoom || willPan) { |
---|
| 429 | this.updateCTMOnNextFrame() |
---|
| 430 | } |
---|
| 431 | } |
---|
| 432 | } |
---|
| 433 | |
---|
| 434 | ShadowViewport.prototype.isZoomDifferent = function(newCTM) { |
---|
| 435 | return this.activeState.zoom !== newCTM.a |
---|
| 436 | } |
---|
| 437 | |
---|
| 438 | ShadowViewport.prototype.isPanDifferent = function(newCTM) { |
---|
| 439 | return this.activeState.x !== newCTM.e || this.activeState.y !== newCTM.f |
---|
| 440 | } |
---|
| 441 | |
---|
| 442 | |
---|
| 443 | /** |
---|
| 444 | * Update cached CTM and active state |
---|
| 445 | * |
---|
| 446 | * @param {SVGMatrix} newCTM |
---|
| 447 | */ |
---|
| 448 | ShadowViewport.prototype.updateCache = function(newCTM) { |
---|
| 449 | this.activeState.zoom = newCTM.a |
---|
| 450 | this.activeState.x = newCTM.e |
---|
| 451 | this.activeState.y = newCTM.f |
---|
| 452 | } |
---|
| 453 | |
---|
| 454 | ShadowViewport.prototype.pendingUpdate = false |
---|
| 455 | |
---|
| 456 | /** |
---|
| 457 | * Place a request to update CTM on next Frame |
---|
| 458 | */ |
---|
| 459 | ShadowViewport.prototype.updateCTMOnNextFrame = function() { |
---|
| 460 | if (!this.pendingUpdate) { |
---|
| 461 | // Lock |
---|
| 462 | this.pendingUpdate = true |
---|
| 463 | |
---|
| 464 | // Throttle next update |
---|
| 465 | this.requestAnimationFrame.call(window, this.updateCTMCached) |
---|
| 466 | } |
---|
| 467 | } |
---|
| 468 | |
---|
| 469 | /** |
---|
| 470 | * Update viewport CTM with cached CTM |
---|
| 471 | */ |
---|
| 472 | ShadowViewport.prototype.updateCTM = function() { |
---|
| 473 | var ctm = this.getCTM() |
---|
| 474 | |
---|
| 475 | // Updates SVG element |
---|
| 476 | SvgUtils.setCTM(this.viewport, ctm, this.defs) |
---|
| 477 | |
---|
| 478 | // Free the lock |
---|
| 479 | this.pendingUpdate = false |
---|
| 480 | |
---|
| 481 | // Notify about the update |
---|
| 482 | if(this.options.onUpdatedCTM) { |
---|
| 483 | this.options.onUpdatedCTM(ctm) |
---|
| 484 | } |
---|
| 485 | } |
---|
| 486 | |
---|
| 487 | module.exports = function(viewport, options){ |
---|
| 488 | return new ShadowViewport(viewport, options) |
---|
| 489 | } |
---|
| 490 | |
---|
| 491 | },{"./svg-utilities":5,"./utilities":7}],4:[function(require,module,exports){ |
---|
| 492 | var Wheel = require('./uniwheel') |
---|
| 493 | , ControlIcons = require('./control-icons') |
---|
| 494 | , Utils = require('./utilities') |
---|
| 495 | , SvgUtils = require('./svg-utilities') |
---|
| 496 | , ShadowViewport = require('./shadow-viewport') |
---|
| 497 | |
---|
| 498 | var SvgPanZoom = function(svg, options) { |
---|
| 499 | this.init(svg, options) |
---|
| 500 | } |
---|
| 501 | |
---|
| 502 | var optionsDefaults = { |
---|
| 503 | viewportSelector: '.svg-pan-zoom_viewport' // Viewport selector. Can be querySelector string or SVGElement |
---|
| 504 | , panEnabled: true // enable or disable panning (default enabled) |
---|
| 505 | , controlIconsEnabled: false // insert icons to give user an option in addition to mouse events to control pan/zoom (default disabled) |
---|
| 506 | , zoomEnabled: true // enable or disable zooming (default enabled) |
---|
| 507 | , dblClickZoomEnabled: true // enable or disable zooming by double clicking (default enabled) |
---|
| 508 | , mouseWheelZoomEnabled: true // enable or disable zooming by mouse wheel (default enabled) |
---|
| 509 | , preventMouseEventsDefault: true // enable or disable preventDefault for mouse events |
---|
| 510 | , zoomScaleSensitivity: 0.1 // Zoom sensitivity |
---|
| 511 | , minZoom: 0.5 // Minimum Zoom level |
---|
| 512 | , maxZoom: 10 // Maximum Zoom level |
---|
| 513 | , fit: true // enable or disable viewport fit in SVG (default true) |
---|
| 514 | , contain: false // enable or disable viewport contain the svg (default false) |
---|
| 515 | , center: true // enable or disable viewport centering in SVG (default true) |
---|
| 516 | , refreshRate: 'auto' // Maximum number of frames per second (altering SVG's viewport) |
---|
| 517 | , beforeZoom: null |
---|
| 518 | , onZoom: null |
---|
| 519 | , beforePan: null |
---|
| 520 | , onPan: null |
---|
| 521 | , customEventsHandler: null |
---|
| 522 | , eventsListenerElement: null |
---|
| 523 | , onUpdatedCTM: null |
---|
| 524 | } |
---|
| 525 | |
---|
| 526 | SvgPanZoom.prototype.init = function(svg, options) { |
---|
| 527 | var that = this |
---|
| 528 | |
---|
| 529 | this.svg = svg |
---|
| 530 | this.defs = svg.querySelector('defs') |
---|
| 531 | |
---|
| 532 | // Add default attributes to SVG |
---|
| 533 | SvgUtils.setupSvgAttributes(this.svg) |
---|
| 534 | |
---|
| 535 | // Set options |
---|
| 536 | this.options = Utils.extend(Utils.extend({}, optionsDefaults), options) |
---|
| 537 | |
---|
| 538 | // Set default state |
---|
| 539 | this.state = 'none' |
---|
| 540 | |
---|
| 541 | // Get dimensions |
---|
| 542 | var boundingClientRectNormalized = SvgUtils.getBoundingClientRectNormalized(svg) |
---|
| 543 | this.width = boundingClientRectNormalized.width |
---|
| 544 | this.height = boundingClientRectNormalized.height |
---|
| 545 | |
---|
| 546 | // Init shadow viewport |
---|
| 547 | this.viewport = ShadowViewport(SvgUtils.getOrCreateViewport(this.svg, this.options.viewportSelector), { |
---|
| 548 | svg: this.svg |
---|
| 549 | , width: this.width |
---|
| 550 | , height: this.height |
---|
| 551 | , fit: this.options.fit |
---|
| 552 | , contain: this.options.contain |
---|
| 553 | , center: this.options.center |
---|
| 554 | , refreshRate: this.options.refreshRate |
---|
| 555 | // Put callbacks into functions as they can change through time |
---|
| 556 | , beforeZoom: function(oldScale, newScale) { |
---|
| 557 | if (that.viewport && that.options.beforeZoom) {return that.options.beforeZoom(oldScale, newScale)} |
---|
| 558 | } |
---|
| 559 | , onZoom: function(scale) { |
---|
| 560 | if (that.viewport && that.options.onZoom) {return that.options.onZoom(scale)} |
---|
| 561 | } |
---|
| 562 | , beforePan: function(oldPoint, newPoint) { |
---|
| 563 | if (that.viewport && that.options.beforePan) {return that.options.beforePan(oldPoint, newPoint)} |
---|
| 564 | } |
---|
| 565 | , onPan: function(point) { |
---|
| 566 | if (that.viewport && that.options.onPan) {return that.options.onPan(point)} |
---|
| 567 | } |
---|
| 568 | , onUpdatedCTM: function(ctm) { |
---|
| 569 | if (that.viewport && that.options.onUpdatedCTM) {return that.options.onUpdatedCTM(ctm)} |
---|
| 570 | } |
---|
| 571 | }) |
---|
| 572 | |
---|
| 573 | // Wrap callbacks into public API context |
---|
| 574 | var publicInstance = this.getPublicInstance() |
---|
| 575 | publicInstance.setBeforeZoom(this.options.beforeZoom) |
---|
| 576 | publicInstance.setOnZoom(this.options.onZoom) |
---|
| 577 | publicInstance.setBeforePan(this.options.beforePan) |
---|
| 578 | publicInstance.setOnPan(this.options.onPan) |
---|
| 579 | publicInstance.setOnUpdatedCTM(this.options.onUpdatedCTM) |
---|
| 580 | |
---|
| 581 | if (this.options.controlIconsEnabled) { |
---|
| 582 | ControlIcons.enable(this) |
---|
| 583 | } |
---|
| 584 | |
---|
| 585 | // Init events handlers |
---|
| 586 | this.lastMouseWheelEventTime = Date.now() |
---|
| 587 | this.setupHandlers() |
---|
| 588 | } |
---|
| 589 | |
---|
| 590 | /** |
---|
| 591 | * Register event handlers |
---|
| 592 | */ |
---|
| 593 | SvgPanZoom.prototype.setupHandlers = function() { |
---|
| 594 | var that = this |
---|
| 595 | , prevEvt = null // use for touchstart event to detect double tap |
---|
| 596 | ; |
---|
| 597 | |
---|
| 598 | this.eventListeners = { |
---|
| 599 | // Mouse down group |
---|
| 600 | mousedown: function(evt) { |
---|
| 601 | var result = that.handleMouseDown(evt, prevEvt); |
---|
| 602 | prevEvt = evt |
---|
| 603 | return result; |
---|
| 604 | } |
---|
| 605 | , touchstart: function(evt) { |
---|
| 606 | var result = that.handleMouseDown(evt, prevEvt); |
---|
| 607 | prevEvt = evt |
---|
| 608 | return result; |
---|
| 609 | } |
---|
| 610 | |
---|
| 611 | // Mouse up group |
---|
| 612 | , mouseup: function(evt) { |
---|
| 613 | return that.handleMouseUp(evt); |
---|
| 614 | } |
---|
| 615 | , touchend: function(evt) { |
---|
| 616 | return that.handleMouseUp(evt); |
---|
| 617 | } |
---|
| 618 | |
---|
| 619 | // Mouse move group |
---|
| 620 | , mousemove: function(evt) { |
---|
| 621 | return that.handleMouseMove(evt); |
---|
| 622 | } |
---|
| 623 | , touchmove: function(evt) { |
---|
| 624 | return that.handleMouseMove(evt); |
---|
| 625 | } |
---|
| 626 | |
---|
| 627 | // Mouse leave group |
---|
| 628 | , mouseleave: function(evt) { |
---|
| 629 | return that.handleMouseUp(evt); |
---|
| 630 | } |
---|
| 631 | , touchleave: function(evt) { |
---|
| 632 | return that.handleMouseUp(evt); |
---|
| 633 | } |
---|
| 634 | , touchcancel: function(evt) { |
---|
| 635 | return that.handleMouseUp(evt); |
---|
| 636 | } |
---|
| 637 | } |
---|
| 638 | |
---|
| 639 | // Init custom events handler if available |
---|
| 640 | if (this.options.customEventsHandler != null) { // jshint ignore:line |
---|
| 641 | this.options.customEventsHandler.init({ |
---|
| 642 | svgElement: this.svg |
---|
| 643 | , eventsListenerElement: this.options.eventsListenerElement |
---|
| 644 | , instance: this.getPublicInstance() |
---|
| 645 | }) |
---|
| 646 | |
---|
| 647 | // Custom event handler may halt builtin listeners |
---|
| 648 | var haltEventListeners = this.options.customEventsHandler.haltEventListeners |
---|
| 649 | if (haltEventListeners && haltEventListeners.length) { |
---|
| 650 | for (var i = haltEventListeners.length - 1; i >= 0; i--) { |
---|
| 651 | if (this.eventListeners.hasOwnProperty(haltEventListeners[i])) { |
---|
| 652 | delete this.eventListeners[haltEventListeners[i]] |
---|
| 653 | } |
---|
| 654 | } |
---|
| 655 | } |
---|
| 656 | } |
---|
| 657 | |
---|
| 658 | // Bind eventListeners |
---|
| 659 | for (var event in this.eventListeners) { |
---|
| 660 | // Attach event to eventsListenerElement or SVG if not available |
---|
| 661 | (this.options.eventsListenerElement || this.svg) |
---|
| 662 | .addEventListener(event, this.eventListeners[event], false) |
---|
| 663 | } |
---|
| 664 | |
---|
| 665 | // Zoom using mouse wheel |
---|
| 666 | if (this.options.mouseWheelZoomEnabled) { |
---|
| 667 | this.options.mouseWheelZoomEnabled = false // set to false as enable will set it back to true |
---|
| 668 | this.enableMouseWheelZoom() |
---|
| 669 | } |
---|
| 670 | } |
---|
| 671 | |
---|
| 672 | /** |
---|
| 673 | * Enable ability to zoom using mouse wheel |
---|
| 674 | */ |
---|
| 675 | SvgPanZoom.prototype.enableMouseWheelZoom = function() { |
---|
| 676 | if (!this.options.mouseWheelZoomEnabled) { |
---|
| 677 | var that = this |
---|
| 678 | |
---|
| 679 | // Mouse wheel listener |
---|
| 680 | this.wheelListener = function(evt) { |
---|
| 681 | return that.handleMouseWheel(evt); |
---|
| 682 | } |
---|
| 683 | |
---|
| 684 | // Bind wheelListener |
---|
| 685 | Wheel.on(this.options.eventsListenerElement || this.svg, this.wheelListener, false) |
---|
| 686 | |
---|
| 687 | this.options.mouseWheelZoomEnabled = true |
---|
| 688 | } |
---|
| 689 | } |
---|
| 690 | |
---|
| 691 | /** |
---|
| 692 | * Disable ability to zoom using mouse wheel |
---|
| 693 | */ |
---|
| 694 | SvgPanZoom.prototype.disableMouseWheelZoom = function() { |
---|
| 695 | if (this.options.mouseWheelZoomEnabled) { |
---|
| 696 | Wheel.off(this.options.eventsListenerElement || this.svg, this.wheelListener, false) |
---|
| 697 | this.options.mouseWheelZoomEnabled = false |
---|
| 698 | } |
---|
| 699 | } |
---|
| 700 | |
---|
| 701 | /** |
---|
| 702 | * Handle mouse wheel event |
---|
| 703 | * |
---|
| 704 | * @param {Event} evt |
---|
| 705 | */ |
---|
| 706 | SvgPanZoom.prototype.handleMouseWheel = function(evt) { |
---|
| 707 | if (!this.options.zoomEnabled || this.state !== 'none') { |
---|
| 708 | return; |
---|
| 709 | } |
---|
| 710 | |
---|
| 711 | if (this.options.preventMouseEventsDefault){ |
---|
| 712 | if (evt.preventDefault) { |
---|
| 713 | evt.preventDefault(); |
---|
| 714 | } else { |
---|
| 715 | evt.returnValue = false; |
---|
| 716 | } |
---|
| 717 | } |
---|
| 718 | |
---|
| 719 | // Default delta in case that deltaY is not available |
---|
| 720 | var delta = evt.deltaY || 1 |
---|
| 721 | , timeDelta = Date.now() - this.lastMouseWheelEventTime |
---|
| 722 | , divider = 3 + Math.max(0, 30 - timeDelta) |
---|
| 723 | |
---|
| 724 | // Update cache |
---|
| 725 | this.lastMouseWheelEventTime = Date.now() |
---|
| 726 | |
---|
| 727 | // Make empirical adjustments for browsers that give deltaY in pixels (deltaMode=0) |
---|
| 728 | if ('deltaMode' in evt && evt.deltaMode === 0 && evt.wheelDelta) { |
---|
| 729 | delta = evt.deltaY === 0 ? 0 : Math.abs(evt.wheelDelta) / evt.deltaY |
---|
| 730 | } |
---|
| 731 | |
---|
| 732 | delta = -0.3 < delta && delta < 0.3 ? delta : (delta > 0 ? 1 : -1) * Math.log(Math.abs(delta) + 10) / divider |
---|
| 733 | |
---|
| 734 | var inversedScreenCTM = this.svg.getScreenCTM().inverse() |
---|
| 735 | , relativeMousePoint = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(inversedScreenCTM) |
---|
| 736 | , zoom = Math.pow(1 + this.options.zoomScaleSensitivity, (-1) * delta); // multiplying by neg. 1 so as to make zoom in/out behavior match Google maps behavior |
---|
| 737 | |
---|
| 738 | this.zoomAtPoint(zoom, relativeMousePoint) |
---|
| 739 | } |
---|
| 740 | |
---|
| 741 | /** |
---|
| 742 | * Zoom in at a SVG point |
---|
| 743 | * |
---|
| 744 | * @param {SVGPoint} point |
---|
| 745 | * @param {Float} zoomScale Number representing how much to zoom |
---|
| 746 | * @param {Boolean} zoomAbsolute Default false. If true, zoomScale is treated as an absolute value. |
---|
| 747 | * Otherwise, zoomScale is treated as a multiplied (e.g. 1.10 would zoom in 10%) |
---|
| 748 | */ |
---|
| 749 | SvgPanZoom.prototype.zoomAtPoint = function(zoomScale, point, zoomAbsolute) { |
---|
| 750 | var originalState = this.viewport.getOriginalState() |
---|
| 751 | |
---|
| 752 | if (!zoomAbsolute) { |
---|
| 753 | // Fit zoomScale in set bounds |
---|
| 754 | if (this.getZoom() * zoomScale < this.options.minZoom * originalState.zoom) { |
---|
| 755 | zoomScale = (this.options.minZoom * originalState.zoom) / this.getZoom() |
---|
| 756 | } else if (this.getZoom() * zoomScale > this.options.maxZoom * originalState.zoom) { |
---|
| 757 | zoomScale = (this.options.maxZoom * originalState.zoom) / this.getZoom() |
---|
| 758 | } |
---|
| 759 | } else { |
---|
| 760 | // Fit zoomScale in set bounds |
---|
| 761 | zoomScale = Math.max(this.options.minZoom * originalState.zoom, Math.min(this.options.maxZoom * originalState.zoom, zoomScale)) |
---|
| 762 | // Find relative scale to achieve desired scale |
---|
| 763 | zoomScale = zoomScale/this.getZoom() |
---|
| 764 | } |
---|
| 765 | |
---|
| 766 | var oldCTM = this.viewport.getCTM() |
---|
| 767 | , relativePoint = point.matrixTransform(oldCTM.inverse()) |
---|
| 768 | , modifier = this.svg.createSVGMatrix().translate(relativePoint.x, relativePoint.y).scale(zoomScale).translate(-relativePoint.x, -relativePoint.y) |
---|
| 769 | , newCTM = oldCTM.multiply(modifier) |
---|
| 770 | |
---|
| 771 | if (newCTM.a !== oldCTM.a) { |
---|
| 772 | this.viewport.setCTM(newCTM) |
---|
| 773 | } |
---|
| 774 | } |
---|
| 775 | |
---|
| 776 | /** |
---|
| 777 | * Zoom at center point |
---|
| 778 | * |
---|
| 779 | * @param {Float} scale |
---|
| 780 | * @param {Boolean} absolute Marks zoom scale as relative or absolute |
---|
| 781 | */ |
---|
| 782 | SvgPanZoom.prototype.zoom = function(scale, absolute) { |
---|
| 783 | this.zoomAtPoint(scale, SvgUtils.getSvgCenterPoint(this.svg, this.width, this.height), absolute) |
---|
| 784 | } |
---|
| 785 | |
---|
| 786 | /** |
---|
| 787 | * Zoom used by public instance |
---|
| 788 | * |
---|
| 789 | * @param {Float} scale |
---|
| 790 | * @param {Boolean} absolute Marks zoom scale as relative or absolute |
---|
| 791 | */ |
---|
| 792 | SvgPanZoom.prototype.publicZoom = function(scale, absolute) { |
---|
| 793 | if (absolute) { |
---|
| 794 | scale = this.computeFromRelativeZoom(scale) |
---|
| 795 | } |
---|
| 796 | |
---|
| 797 | this.zoom(scale, absolute) |
---|
| 798 | } |
---|
| 799 | |
---|
| 800 | /** |
---|
| 801 | * Zoom at point used by public instance |
---|
| 802 | * |
---|
| 803 | * @param {Float} scale |
---|
| 804 | * @param {SVGPoint|Object} point An object that has x and y attributes |
---|
| 805 | * @param {Boolean} absolute Marks zoom scale as relative or absolute |
---|
| 806 | */ |
---|
| 807 | SvgPanZoom.prototype.publicZoomAtPoint = function(scale, point, absolute) { |
---|
| 808 | if (absolute) { |
---|
| 809 | // Transform zoom into a relative value |
---|
| 810 | scale = this.computeFromRelativeZoom(scale) |
---|
| 811 | } |
---|
| 812 | |
---|
| 813 | // If not a SVGPoint but has x and y then create a SVGPoint |
---|
| 814 | if (Utils.getType(point) !== 'SVGPoint') { |
---|
| 815 | if('x' in point && 'y' in point) { |
---|
| 816 | point = SvgUtils.createSVGPoint(this.svg, point.x, point.y) |
---|
| 817 | } else { |
---|
| 818 | throw new Error('Given point is invalid') |
---|
| 819 | } |
---|
| 820 | } |
---|
| 821 | |
---|
| 822 | this.zoomAtPoint(scale, point, absolute) |
---|
| 823 | } |
---|
| 824 | |
---|
| 825 | /** |
---|
| 826 | * Get zoom scale |
---|
| 827 | * |
---|
| 828 | * @return {Float} zoom scale |
---|
| 829 | */ |
---|
| 830 | SvgPanZoom.prototype.getZoom = function() { |
---|
| 831 | return this.viewport.getZoom() |
---|
| 832 | } |
---|
| 833 | |
---|
| 834 | /** |
---|
| 835 | * Get zoom scale for public usage |
---|
| 836 | * |
---|
| 837 | * @return {Float} zoom scale |
---|
| 838 | */ |
---|
| 839 | SvgPanZoom.prototype.getRelativeZoom = function() { |
---|
| 840 | return this.viewport.getRelativeZoom() |
---|
| 841 | } |
---|
| 842 | |
---|
| 843 | /** |
---|
| 844 | * Compute actual zoom from public zoom |
---|
| 845 | * |
---|
| 846 | * @param {Float} zoom |
---|
| 847 | * @return {Float} zoom scale |
---|
| 848 | */ |
---|
| 849 | SvgPanZoom.prototype.computeFromRelativeZoom = function(zoom) { |
---|
| 850 | return zoom * this.viewport.getOriginalState().zoom |
---|
| 851 | } |
---|
| 852 | |
---|
| 853 | /** |
---|
| 854 | * Set zoom to initial state |
---|
| 855 | */ |
---|
| 856 | SvgPanZoom.prototype.resetZoom = function() { |
---|
| 857 | var originalState = this.viewport.getOriginalState() |
---|
| 858 | |
---|
| 859 | this.zoom(originalState.zoom, true); |
---|
| 860 | } |
---|
| 861 | |
---|
| 862 | /** |
---|
| 863 | * Set pan to initial state |
---|
| 864 | */ |
---|
| 865 | SvgPanZoom.prototype.resetPan = function() { |
---|
| 866 | this.pan(this.viewport.getOriginalState()); |
---|
| 867 | } |
---|
| 868 | |
---|
| 869 | /** |
---|
| 870 | * Set pan and zoom to initial state |
---|
| 871 | */ |
---|
| 872 | SvgPanZoom.prototype.reset = function() { |
---|
| 873 | this.resetZoom() |
---|
| 874 | this.resetPan() |
---|
| 875 | } |
---|
| 876 | |
---|
| 877 | /** |
---|
| 878 | * Handle double click event |
---|
| 879 | * See handleMouseDown() for alternate detection method |
---|
| 880 | * |
---|
| 881 | * @param {Event} evt |
---|
| 882 | */ |
---|
| 883 | SvgPanZoom.prototype.handleDblClick = function(evt) { |
---|
| 884 | if (this.options.preventMouseEventsDefault) { |
---|
| 885 | if (evt.preventDefault) { |
---|
| 886 | evt.preventDefault() |
---|
| 887 | } else { |
---|
| 888 | evt.returnValue = false |
---|
| 889 | } |
---|
| 890 | } |
---|
| 891 | |
---|
| 892 | // Check if target was a control button |
---|
| 893 | if (this.options.controlIconsEnabled) { |
---|
| 894 | var targetClass = evt.target.getAttribute('class') || '' |
---|
| 895 | if (targetClass.indexOf('svg-pan-zoom-control') > -1) { |
---|
| 896 | return false |
---|
| 897 | } |
---|
| 898 | } |
---|
| 899 | |
---|
| 900 | var zoomFactor |
---|
| 901 | |
---|
| 902 | if (evt.shiftKey) { |
---|
| 903 | zoomFactor = 1/((1 + this.options.zoomScaleSensitivity) * 2) // zoom out when shift key pressed |
---|
| 904 | } else { |
---|
| 905 | zoomFactor = (1 + this.options.zoomScaleSensitivity) * 2 |
---|
| 906 | } |
---|
| 907 | |
---|
| 908 | var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.svg.getScreenCTM().inverse()) |
---|
| 909 | this.zoomAtPoint(zoomFactor, point) |
---|
| 910 | } |
---|
| 911 | |
---|
| 912 | /** |
---|
| 913 | * Handle click event |
---|
| 914 | * |
---|
| 915 | * @param {Event} evt |
---|
| 916 | */ |
---|
| 917 | SvgPanZoom.prototype.handleMouseDown = function(evt, prevEvt) { |
---|
| 918 | if (this.options.preventMouseEventsDefault) { |
---|
| 919 | if (evt.preventDefault) { |
---|
| 920 | evt.preventDefault() |
---|
| 921 | } else { |
---|
| 922 | evt.returnValue = false |
---|
| 923 | } |
---|
| 924 | } |
---|
| 925 | |
---|
| 926 | Utils.mouseAndTouchNormalize(evt, this.svg) |
---|
| 927 | |
---|
| 928 | // Double click detection; more consistent than ondblclick |
---|
| 929 | if (this.options.dblClickZoomEnabled && Utils.isDblClick(evt, prevEvt)){ |
---|
| 930 | this.handleDblClick(evt) |
---|
| 931 | } else { |
---|
| 932 | // Pan mode |
---|
| 933 | this.state = 'pan' |
---|
| 934 | this.firstEventCTM = this.viewport.getCTM() |
---|
| 935 | this.stateOrigin = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) |
---|
| 936 | } |
---|
| 937 | } |
---|
| 938 | |
---|
| 939 | /** |
---|
| 940 | * Handle mouse move event |
---|
| 941 | * |
---|
| 942 | * @param {Event} evt |
---|
| 943 | */ |
---|
| 944 | SvgPanZoom.prototype.handleMouseMove = function(evt) { |
---|
| 945 | if (this.options.preventMouseEventsDefault) { |
---|
| 946 | if (evt.preventDefault) { |
---|
| 947 | evt.preventDefault() |
---|
| 948 | } else { |
---|
| 949 | evt.returnValue = false |
---|
| 950 | } |
---|
| 951 | } |
---|
| 952 | |
---|
| 953 | if (this.state === 'pan' && this.options.panEnabled) { |
---|
| 954 | // Pan mode |
---|
| 955 | var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) |
---|
| 956 | , viewportCTM = this.firstEventCTM.translate(point.x - this.stateOrigin.x, point.y - this.stateOrigin.y) |
---|
| 957 | |
---|
| 958 | this.viewport.setCTM(viewportCTM) |
---|
| 959 | } |
---|
| 960 | } |
---|
| 961 | |
---|
| 962 | /** |
---|
| 963 | * Handle mouse button release event |
---|
| 964 | * |
---|
| 965 | * @param {Event} evt |
---|
| 966 | */ |
---|
| 967 | SvgPanZoom.prototype.handleMouseUp = function(evt) { |
---|
| 968 | if (this.options.preventMouseEventsDefault) { |
---|
| 969 | if (evt.preventDefault) { |
---|
| 970 | evt.preventDefault() |
---|
| 971 | } else { |
---|
| 972 | evt.returnValue = false |
---|
| 973 | } |
---|
| 974 | } |
---|
| 975 | |
---|
| 976 | if (this.state === 'pan') { |
---|
| 977 | // Quit pan mode |
---|
| 978 | this.state = 'none' |
---|
| 979 | } |
---|
| 980 | } |
---|
| 981 | |
---|
| 982 | /** |
---|
| 983 | * Adjust viewport size (only) so it will fit in SVG |
---|
| 984 | * Does not center image |
---|
| 985 | */ |
---|
| 986 | SvgPanZoom.prototype.fit = function() { |
---|
| 987 | var viewBox = this.viewport.getViewBox() |
---|
| 988 | , newScale = Math.min(this.width/viewBox.width, this.height/viewBox.height) |
---|
| 989 | |
---|
| 990 | this.zoom(newScale, true) |
---|
| 991 | } |
---|
| 992 | |
---|
| 993 | /** |
---|
| 994 | * Adjust viewport size (only) so it will contain the SVG |
---|
| 995 | * Does not center image |
---|
| 996 | */ |
---|
| 997 | SvgPanZoom.prototype.contain = function() { |
---|
| 998 | var viewBox = this.viewport.getViewBox() |
---|
| 999 | , newScale = Math.max(this.width/viewBox.width, this.height/viewBox.height) |
---|
| 1000 | |
---|
| 1001 | this.zoom(newScale, true) |
---|
| 1002 | } |
---|
| 1003 | |
---|
| 1004 | /** |
---|
| 1005 | * Adjust viewport pan (only) so it will be centered in SVG |
---|
| 1006 | * Does not zoom/fit/contain image |
---|
| 1007 | */ |
---|
| 1008 | SvgPanZoom.prototype.center = function() { |
---|
| 1009 | var viewBox = this.viewport.getViewBox() |
---|
| 1010 | , offsetX = (this.width - (viewBox.width + viewBox.x * 2) * this.getZoom()) * 0.5 |
---|
| 1011 | , offsetY = (this.height - (viewBox.height + viewBox.y * 2) * this.getZoom()) * 0.5 |
---|
| 1012 | |
---|
| 1013 | this.getPublicInstance().pan({x: offsetX, y: offsetY}) |
---|
| 1014 | } |
---|
| 1015 | |
---|
| 1016 | /** |
---|
| 1017 | * Update content cached BorderBox |
---|
| 1018 | * Use when viewport contents change |
---|
| 1019 | */ |
---|
| 1020 | SvgPanZoom.prototype.updateBBox = function() { |
---|
| 1021 | this.viewport.simpleViewBoxCache() |
---|
| 1022 | } |
---|
| 1023 | |
---|
| 1024 | /** |
---|
| 1025 | * Pan to a rendered position |
---|
| 1026 | * |
---|
| 1027 | * @param {Object} point {x: 0, y: 0} |
---|
| 1028 | */ |
---|
| 1029 | SvgPanZoom.prototype.pan = function(point) { |
---|
| 1030 | var viewportCTM = this.viewport.getCTM() |
---|
| 1031 | viewportCTM.e = point.x |
---|
| 1032 | viewportCTM.f = point.y |
---|
| 1033 | this.viewport.setCTM(viewportCTM) |
---|
| 1034 | } |
---|
| 1035 | |
---|
| 1036 | /** |
---|
| 1037 | * Relatively pan the graph by a specified rendered position vector |
---|
| 1038 | * |
---|
| 1039 | * @param {Object} point {x: 0, y: 0} |
---|
| 1040 | */ |
---|
| 1041 | SvgPanZoom.prototype.panBy = function(point) { |
---|
| 1042 | var viewportCTM = this.viewport.getCTM() |
---|
| 1043 | viewportCTM.e += point.x |
---|
| 1044 | viewportCTM.f += point.y |
---|
| 1045 | this.viewport.setCTM(viewportCTM) |
---|
| 1046 | } |
---|
| 1047 | |
---|
| 1048 | /** |
---|
| 1049 | * Get pan vector |
---|
| 1050 | * |
---|
| 1051 | * @return {Object} {x: 0, y: 0} |
---|
| 1052 | */ |
---|
| 1053 | SvgPanZoom.prototype.getPan = function() { |
---|
| 1054 | var state = this.viewport.getState() |
---|
| 1055 | |
---|
| 1056 | return {x: state.x, y: state.y} |
---|
| 1057 | } |
---|
| 1058 | |
---|
| 1059 | /** |
---|
| 1060 | * Recalculates cached svg dimensions and controls position |
---|
| 1061 | */ |
---|
| 1062 | SvgPanZoom.prototype.resize = function() { |
---|
| 1063 | // Get dimensions |
---|
| 1064 | var boundingClientRectNormalized = SvgUtils.getBoundingClientRectNormalized(this.svg) |
---|
| 1065 | this.width = boundingClientRectNormalized.width |
---|
| 1066 | this.height = boundingClientRectNormalized.height |
---|
| 1067 | |
---|
| 1068 | // Recalculate original state |
---|
| 1069 | var viewport = this.viewport |
---|
| 1070 | viewport.options.width = this.width |
---|
| 1071 | viewport.options.height = this.height |
---|
| 1072 | viewport.processCTM() |
---|
| 1073 | |
---|
| 1074 | // Reposition control icons by re-enabling them |
---|
| 1075 | if (this.options.controlIconsEnabled) { |
---|
| 1076 | this.getPublicInstance().disableControlIcons() |
---|
| 1077 | this.getPublicInstance().enableControlIcons() |
---|
| 1078 | } |
---|
| 1079 | } |
---|
| 1080 | |
---|
| 1081 | /** |
---|
| 1082 | * Unbind mouse events, free callbacks and destroy public instance |
---|
| 1083 | */ |
---|
| 1084 | SvgPanZoom.prototype.destroy = function() { |
---|
| 1085 | var that = this |
---|
| 1086 | |
---|
| 1087 | // Free callbacks |
---|
| 1088 | this.beforeZoom = null |
---|
| 1089 | this.onZoom = null |
---|
| 1090 | this.beforePan = null |
---|
| 1091 | this.onPan = null |
---|
| 1092 | this.onUpdatedCTM = null |
---|
| 1093 | |
---|
| 1094 | // Destroy custom event handlers |
---|
| 1095 | if (this.options.customEventsHandler != null) { // jshint ignore:line |
---|
| 1096 | this.options.customEventsHandler.destroy({ |
---|
| 1097 | svgElement: this.svg |
---|
| 1098 | , eventsListenerElement: this.options.eventsListenerElement |
---|
| 1099 | , instance: this.getPublicInstance() |
---|
| 1100 | }) |
---|
| 1101 | } |
---|
| 1102 | |
---|
| 1103 | // Unbind eventListeners |
---|
| 1104 | for (var event in this.eventListeners) { |
---|
| 1105 | (this.options.eventsListenerElement || this.svg) |
---|
| 1106 | .removeEventListener(event, this.eventListeners[event], false) |
---|
| 1107 | } |
---|
| 1108 | |
---|
| 1109 | // Unbind wheelListener |
---|
| 1110 | this.disableMouseWheelZoom() |
---|
| 1111 | |
---|
| 1112 | // Remove control icons |
---|
| 1113 | this.getPublicInstance().disableControlIcons() |
---|
| 1114 | |
---|
| 1115 | // Reset zoom and pan |
---|
| 1116 | this.reset() |
---|
| 1117 | |
---|
| 1118 | // Remove instance from instancesStore |
---|
| 1119 | instancesStore = instancesStore.filter(function(instance){ |
---|
| 1120 | return instance.svg !== that.svg |
---|
| 1121 | }) |
---|
| 1122 | |
---|
| 1123 | // Delete options and its contents |
---|
| 1124 | delete this.options |
---|
| 1125 | |
---|
| 1126 | // Delete viewport to make public shadow viewport functions uncallable |
---|
| 1127 | delete this.viewport |
---|
| 1128 | |
---|
| 1129 | // Destroy public instance and rewrite getPublicInstance |
---|
| 1130 | delete this.publicInstance |
---|
| 1131 | delete this.pi |
---|
| 1132 | this.getPublicInstance = function(){ |
---|
| 1133 | return null |
---|
| 1134 | } |
---|
| 1135 | } |
---|
| 1136 | |
---|
| 1137 | /** |
---|
| 1138 | * Returns a public instance object |
---|
| 1139 | * |
---|
| 1140 | * @return {Object} Public instance object |
---|
| 1141 | */ |
---|
| 1142 | SvgPanZoom.prototype.getPublicInstance = function() { |
---|
| 1143 | var that = this |
---|
| 1144 | |
---|
| 1145 | // Create cache |
---|
| 1146 | if (!this.publicInstance) { |
---|
| 1147 | this.publicInstance = this.pi = { |
---|
| 1148 | // Pan |
---|
| 1149 | enablePan: function() {that.options.panEnabled = true; return that.pi} |
---|
| 1150 | , disablePan: function() {that.options.panEnabled = false; return that.pi} |
---|
| 1151 | , isPanEnabled: function() {return !!that.options.panEnabled} |
---|
| 1152 | , pan: function(point) {that.pan(point); return that.pi} |
---|
| 1153 | , panBy: function(point) {that.panBy(point); return that.pi} |
---|
| 1154 | , getPan: function() {return that.getPan()} |
---|
| 1155 | // Pan event |
---|
| 1156 | , setBeforePan: function(fn) {that.options.beforePan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} |
---|
| 1157 | , setOnPan: function(fn) {that.options.onPan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} |
---|
| 1158 | // Zoom and Control Icons |
---|
| 1159 | , enableZoom: function() {that.options.zoomEnabled = true; return that.pi} |
---|
| 1160 | , disableZoom: function() {that.options.zoomEnabled = false; return that.pi} |
---|
| 1161 | , isZoomEnabled: function() {return !!that.options.zoomEnabled} |
---|
| 1162 | , enableControlIcons: function() { |
---|
| 1163 | if (!that.options.controlIconsEnabled) { |
---|
| 1164 | that.options.controlIconsEnabled = true |
---|
| 1165 | ControlIcons.enable(that) |
---|
| 1166 | } |
---|
| 1167 | return that.pi |
---|
| 1168 | } |
---|
| 1169 | , disableControlIcons: function() { |
---|
| 1170 | if (that.options.controlIconsEnabled) { |
---|
| 1171 | that.options.controlIconsEnabled = false; |
---|
| 1172 | ControlIcons.disable(that) |
---|
| 1173 | } |
---|
| 1174 | return that.pi |
---|
| 1175 | } |
---|
| 1176 | , isControlIconsEnabled: function() {return !!that.options.controlIconsEnabled} |
---|
| 1177 | // Double click zoom |
---|
| 1178 | , enableDblClickZoom: function() {that.options.dblClickZoomEnabled = true; return that.pi} |
---|
| 1179 | , disableDblClickZoom: function() {that.options.dblClickZoomEnabled = false; return that.pi} |
---|
| 1180 | , isDblClickZoomEnabled: function() {return !!that.options.dblClickZoomEnabled} |
---|
| 1181 | // Mouse wheel zoom |
---|
| 1182 | , enableMouseWheelZoom: function() {that.enableMouseWheelZoom(); return that.pi} |
---|
| 1183 | , disableMouseWheelZoom: function() {that.disableMouseWheelZoom(); return that.pi} |
---|
| 1184 | , isMouseWheelZoomEnabled: function() {return !!that.options.mouseWheelZoomEnabled} |
---|
| 1185 | // Zoom scale and bounds |
---|
| 1186 | , setZoomScaleSensitivity: function(scale) {that.options.zoomScaleSensitivity = scale; return that.pi} |
---|
| 1187 | , setMinZoom: function(zoom) {that.options.minZoom = zoom; return that.pi} |
---|
| 1188 | , setMaxZoom: function(zoom) {that.options.maxZoom = zoom; return that.pi} |
---|
| 1189 | // Zoom event |
---|
| 1190 | , setBeforeZoom: function(fn) {that.options.beforeZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} |
---|
| 1191 | , setOnZoom: function(fn) {that.options.onZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} |
---|
| 1192 | // Zooming |
---|
| 1193 | , zoom: function(scale) {that.publicZoom(scale, true); return that.pi} |
---|
| 1194 | , zoomBy: function(scale) {that.publicZoom(scale, false); return that.pi} |
---|
| 1195 | , zoomAtPoint: function(scale, point) {that.publicZoomAtPoint(scale, point, true); return that.pi} |
---|
| 1196 | , zoomAtPointBy: function(scale, point) {that.publicZoomAtPoint(scale, point, false); return that.pi} |
---|
| 1197 | , zoomIn: function() {this.zoomBy(1 + that.options.zoomScaleSensitivity); return that.pi} |
---|
| 1198 | , zoomOut: function() {this.zoomBy(1 / (1 + that.options.zoomScaleSensitivity)); return that.pi} |
---|
| 1199 | , getZoom: function() {return that.getRelativeZoom()} |
---|
| 1200 | // CTM update |
---|
| 1201 | , setOnUpdatedCTM: function(fn) {that.options.onUpdatedCTM = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} |
---|
| 1202 | // Reset |
---|
| 1203 | , resetZoom: function() {that.resetZoom(); return that.pi} |
---|
| 1204 | , resetPan: function() {that.resetPan(); return that.pi} |
---|
| 1205 | , reset: function() {that.reset(); return that.pi} |
---|
| 1206 | // Fit, Contain and Center |
---|
| 1207 | , fit: function() {that.fit(); return that.pi} |
---|
| 1208 | , contain: function() {that.contain(); return that.pi} |
---|
| 1209 | , center: function() {that.center(); return that.pi} |
---|
| 1210 | // Size and Resize |
---|
| 1211 | , updateBBox: function() {that.updateBBox(); return that.pi} |
---|
| 1212 | , resize: function() {that.resize(); return that.pi} |
---|
| 1213 | , getSizes: function() { |
---|
| 1214 | return { |
---|
| 1215 | width: that.width |
---|
| 1216 | , height: that.height |
---|
| 1217 | , realZoom: that.getZoom() |
---|
| 1218 | , viewBox: that.viewport.getViewBox() |
---|
| 1219 | } |
---|
| 1220 | } |
---|
| 1221 | // Destroy |
---|
| 1222 | , destroy: function() {that.destroy(); return that.pi} |
---|
| 1223 | } |
---|
| 1224 | } |
---|
| 1225 | |
---|
| 1226 | return this.publicInstance |
---|
| 1227 | } |
---|
| 1228 | |
---|
| 1229 | /** |
---|
| 1230 | * Stores pairs of instances of SvgPanZoom and SVG |
---|
| 1231 | * Each pair is represented by an object {svg: SVGSVGElement, instance: SvgPanZoom} |
---|
| 1232 | * |
---|
| 1233 | * @type {Array} |
---|
| 1234 | */ |
---|
| 1235 | var instancesStore = [] |
---|
| 1236 | |
---|
| 1237 | var svgPanZoom = function(elementOrSelector, options){ |
---|
| 1238 | var svg = Utils.getSvg(elementOrSelector) |
---|
| 1239 | |
---|
| 1240 | if (svg === null) { |
---|
| 1241 | return null |
---|
| 1242 | } else { |
---|
| 1243 | // Look for existent instance |
---|
| 1244 | for(var i = instancesStore.length - 1; i >= 0; i--) { |
---|
| 1245 | if (instancesStore[i].svg === svg) { |
---|
| 1246 | return instancesStore[i].instance.getPublicInstance() |
---|
| 1247 | } |
---|
| 1248 | } |
---|
| 1249 | |
---|
| 1250 | // If instance not found - create one |
---|
| 1251 | instancesStore.push({ |
---|
| 1252 | svg: svg |
---|
| 1253 | , instance: new SvgPanZoom(svg, options) |
---|
| 1254 | }) |
---|
| 1255 | |
---|
| 1256 | // Return just pushed instance |
---|
| 1257 | return instancesStore[instancesStore.length - 1].instance.getPublicInstance() |
---|
| 1258 | } |
---|
| 1259 | } |
---|
| 1260 | |
---|
| 1261 | module.exports = svgPanZoom; |
---|
| 1262 | |
---|
| 1263 | },{"./control-icons":2,"./shadow-viewport":3,"./svg-utilities":5,"./uniwheel":6,"./utilities":7}],5:[function(require,module,exports){ |
---|
| 1264 | var Utils = require('./utilities') |
---|
| 1265 | , _browser = 'unknown' |
---|
| 1266 | ; |
---|
| 1267 | |
---|
| 1268 | // http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser |
---|
| 1269 | if (/*@cc_on!@*/false || !!document.documentMode) { // internet explorer |
---|
| 1270 | _browser = 'ie'; |
---|
| 1271 | } |
---|
| 1272 | |
---|
| 1273 | module.exports = { |
---|
| 1274 | svgNS: 'http://www.w3.org/2000/svg' |
---|
| 1275 | , xmlNS: 'http://www.w3.org/XML/1998/namespace' |
---|
| 1276 | , xmlnsNS: 'http://www.w3.org/2000/xmlns/' |
---|
| 1277 | , xlinkNS: 'http://www.w3.org/1999/xlink' |
---|
| 1278 | , evNS: 'http://www.w3.org/2001/xml-events' |
---|
| 1279 | |
---|
| 1280 | /** |
---|
| 1281 | * Get svg dimensions: width and height |
---|
| 1282 | * |
---|
| 1283 | * @param {SVGSVGElement} svg |
---|
| 1284 | * @return {Object} {width: 0, height: 0} |
---|
| 1285 | */ |
---|
| 1286 | , getBoundingClientRectNormalized: function(svg) { |
---|
| 1287 | if (svg.clientWidth && svg.clientHeight) { |
---|
| 1288 | return {width: svg.clientWidth, height: svg.clientHeight} |
---|
| 1289 | } else if (!!svg.getBoundingClientRect()) { |
---|
| 1290 | return svg.getBoundingClientRect(); |
---|
| 1291 | } else { |
---|
| 1292 | throw new Error('Cannot get BoundingClientRect for SVG.'); |
---|
| 1293 | } |
---|
| 1294 | } |
---|
| 1295 | |
---|
| 1296 | /** |
---|
| 1297 | * Gets g element with class of "viewport" or creates it if it doesn't exist |
---|
| 1298 | * |
---|
| 1299 | * @param {SVGSVGElement} svg |
---|
| 1300 | * @return {SVGElement} g (group) element |
---|
| 1301 | */ |
---|
| 1302 | , getOrCreateViewport: function(svg, selector) { |
---|
| 1303 | var viewport = null |
---|
| 1304 | |
---|
| 1305 | if (Utils.isElement(selector)) { |
---|
| 1306 | viewport = selector |
---|
| 1307 | } else { |
---|
| 1308 | viewport = svg.querySelector(selector) |
---|
| 1309 | } |
---|
| 1310 | |
---|
| 1311 | // Check if there is just one main group in SVG |
---|
| 1312 | if (!viewport) { |
---|
| 1313 | var childNodes = Array.prototype.slice.call(svg.childNodes || svg.children).filter(function(el){ |
---|
| 1314 | return el.nodeName !== 'defs' && el.nodeName !== '#text' |
---|
| 1315 | }) |
---|
| 1316 | |
---|
| 1317 | // Node name should be SVGGElement and should have no transform attribute |
---|
| 1318 | // Groups with transform are not used as viewport because it involves parsing of all transform possibilities |
---|
| 1319 | if (childNodes.length === 1 && childNodes[0].nodeName === 'g' && childNodes[0].getAttribute('transform') === null) { |
---|
| 1320 | viewport = childNodes[0] |
---|
| 1321 | } |
---|
| 1322 | } |
---|
| 1323 | |
---|
| 1324 | // If no favorable group element exists then create one |
---|
| 1325 | if (!viewport) { |
---|
| 1326 | var viewportId = 'viewport-' + new Date().toISOString().replace(/\D/g, ''); |
---|
| 1327 | viewport = document.createElementNS(this.svgNS, 'g'); |
---|
| 1328 | viewport.setAttribute('id', viewportId); |
---|
| 1329 | |
---|
| 1330 | // Internet Explorer (all versions?) can't use childNodes, but other browsers prefer (require?) using childNodes |
---|
| 1331 | var svgChildren = svg.childNodes || svg.children; |
---|
| 1332 | if (!!svgChildren && svgChildren.length > 0) { |
---|
| 1333 | for (var i = svgChildren.length; i > 0; i--) { |
---|
| 1334 | // Move everything into viewport except defs |
---|
| 1335 | if (svgChildren[svgChildren.length - i].nodeName !== 'defs') { |
---|
| 1336 | viewport.appendChild(svgChildren[svgChildren.length - i]); |
---|
| 1337 | } |
---|
| 1338 | } |
---|
| 1339 | } |
---|
| 1340 | svg.appendChild(viewport); |
---|
| 1341 | } |
---|
| 1342 | |
---|
| 1343 | // Parse class names |
---|
| 1344 | var classNames = []; |
---|
| 1345 | if (viewport.getAttribute('class')) { |
---|
| 1346 | classNames = viewport.getAttribute('class').split(' ') |
---|
| 1347 | } |
---|
| 1348 | |
---|
| 1349 | // Set class (if not set already) |
---|
| 1350 | if (!~classNames.indexOf('svg-pan-zoom_viewport')) { |
---|
| 1351 | classNames.push('svg-pan-zoom_viewport') |
---|
| 1352 | viewport.setAttribute('class', classNames.join(' ')) |
---|
| 1353 | } |
---|
| 1354 | |
---|
| 1355 | return viewport |
---|
| 1356 | } |
---|
| 1357 | |
---|
| 1358 | /** |
---|
| 1359 | * Set SVG attributes |
---|
| 1360 | * |
---|
| 1361 | * @param {SVGSVGElement} svg |
---|
| 1362 | */ |
---|
| 1363 | , setupSvgAttributes: function(svg) { |
---|
| 1364 | // Setting default attributes |
---|
| 1365 | svg.setAttribute('xmlns', this.svgNS); |
---|
| 1366 | svg.setAttributeNS(this.xmlnsNS, 'xmlns:xlink', this.xlinkNS); |
---|
| 1367 | svg.setAttributeNS(this.xmlnsNS, 'xmlns:ev', this.evNS); |
---|
| 1368 | |
---|
| 1369 | // Needed for Internet Explorer, otherwise the viewport overflows |
---|
| 1370 | if (svg.parentNode !== null) { |
---|
| 1371 | var style = svg.getAttribute('style') || ''; |
---|
| 1372 | if (style.toLowerCase().indexOf('overflow') === -1) { |
---|
| 1373 | svg.setAttribute('style', 'overflow: hidden; ' + style); |
---|
| 1374 | } |
---|
| 1375 | } |
---|
| 1376 | } |
---|
| 1377 | |
---|
| 1378 | /** |
---|
| 1379 | * How long Internet Explorer takes to finish updating its display (ms). |
---|
| 1380 | */ |
---|
| 1381 | , internetExplorerRedisplayInterval: 300 |
---|
| 1382 | |
---|
| 1383 | /** |
---|
| 1384 | * Forces the browser to redisplay all SVG elements that rely on an |
---|
| 1385 | * element defined in a 'defs' section. It works globally, for every |
---|
| 1386 | * available defs element on the page. |
---|
| 1387 | * The throttling is intentionally global. |
---|
| 1388 | * |
---|
| 1389 | * This is only needed for IE. It is as a hack to make markers (and 'use' elements?) |
---|
| 1390 | * visible after pan/zoom when there are multiple SVGs on the page. |
---|
| 1391 | * See bug report: https://connect.microsoft.com/IE/feedback/details/781964/ |
---|
| 1392 | * also see svg-pan-zoom issue: https://github.com/ariutta/svg-pan-zoom/issues/62 |
---|
| 1393 | */ |
---|
| 1394 | , refreshDefsGlobal: Utils.throttle(function() { |
---|
| 1395 | var allDefs = document.querySelectorAll('defs'); |
---|
| 1396 | var allDefsCount = allDefs.length; |
---|
| 1397 | for (var i = 0; i < allDefsCount; i++) { |
---|
| 1398 | var thisDefs = allDefs[i]; |
---|
| 1399 | thisDefs.parentNode.insertBefore(thisDefs, thisDefs); |
---|
| 1400 | } |
---|
| 1401 | }, this.internetExplorerRedisplayInterval) |
---|
| 1402 | |
---|
| 1403 | /** |
---|
| 1404 | * Sets the current transform matrix of an element |
---|
| 1405 | * |
---|
| 1406 | * @param {SVGElement} element |
---|
| 1407 | * @param {SVGMatrix} matrix CTM |
---|
| 1408 | * @param {SVGElement} defs |
---|
| 1409 | */ |
---|
| 1410 | , setCTM: function(element, matrix, defs) { |
---|
| 1411 | var that = this |
---|
| 1412 | , s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')'; |
---|
| 1413 | |
---|
| 1414 | element.setAttributeNS(null, 'transform', s); |
---|
| 1415 | if ('transform' in element.style) { |
---|
| 1416 | element.style.transform = s; |
---|
| 1417 | } else if ('-ms-transform' in element.style) { |
---|
| 1418 | element.style['-ms-transform'] = s; |
---|
| 1419 | } else if ('-webkit-transform' in element.style) { |
---|
| 1420 | element.style['-webkit-transform'] = s; |
---|
| 1421 | } |
---|
| 1422 | |
---|
| 1423 | // IE has a bug that makes markers disappear on zoom (when the matrix "a" and/or "d" elements change) |
---|
| 1424 | // see http://stackoverflow.com/questions/17654578/svg-marker-does-not-work-in-ie9-10 |
---|
| 1425 | // and http://srndolha.wordpress.com/2013/11/25/svg-line-markers-may-disappear-in-internet-explorer-11/ |
---|
| 1426 | if (_browser === 'ie' && !!defs) { |
---|
| 1427 | // this refresh is intended for redisplaying the SVG during zooming |
---|
| 1428 | defs.parentNode.insertBefore(defs, defs); |
---|
| 1429 | // this refresh is intended for redisplaying the other SVGs on a page when panning a given SVG |
---|
| 1430 | // it is also needed for the given SVG itself, on zoomEnd, if the SVG contains any markers that |
---|
| 1431 | // are located under any other element(s). |
---|
| 1432 | window.setTimeout(function() { |
---|
| 1433 | that.refreshDefsGlobal(); |
---|
| 1434 | }, that.internetExplorerRedisplayInterval); |
---|
| 1435 | } |
---|
| 1436 | } |
---|
| 1437 | |
---|
| 1438 | /** |
---|
| 1439 | * Instantiate an SVGPoint object with given event coordinates |
---|
| 1440 | * |
---|
| 1441 | * @param {Event} evt |
---|
| 1442 | * @param {SVGSVGElement} svg |
---|
| 1443 | * @return {SVGPoint} point |
---|
| 1444 | */ |
---|
| 1445 | , getEventPoint: function(evt, svg) { |
---|
| 1446 | var point = svg.createSVGPoint() |
---|
| 1447 | |
---|
| 1448 | Utils.mouseAndTouchNormalize(evt, svg) |
---|
| 1449 | |
---|
| 1450 | point.x = evt.clientX |
---|
| 1451 | point.y = evt.clientY |
---|
| 1452 | |
---|
| 1453 | return point |
---|
| 1454 | } |
---|
| 1455 | |
---|
| 1456 | /** |
---|
| 1457 | * Get SVG center point |
---|
| 1458 | * |
---|
| 1459 | * @param {SVGSVGElement} svg |
---|
| 1460 | * @return {SVGPoint} |
---|
| 1461 | */ |
---|
| 1462 | , getSvgCenterPoint: function(svg, width, height) { |
---|
| 1463 | return this.createSVGPoint(svg, width / 2, height / 2) |
---|
| 1464 | } |
---|
| 1465 | |
---|
| 1466 | /** |
---|
| 1467 | * Create a SVGPoint with given x and y |
---|
| 1468 | * |
---|
| 1469 | * @param {SVGSVGElement} svg |
---|
| 1470 | * @param {Number} x |
---|
| 1471 | * @param {Number} y |
---|
| 1472 | * @return {SVGPoint} |
---|
| 1473 | */ |
---|
| 1474 | , createSVGPoint: function(svg, x, y) { |
---|
| 1475 | var point = svg.createSVGPoint() |
---|
| 1476 | point.x = x |
---|
| 1477 | point.y = y |
---|
| 1478 | |
---|
| 1479 | return point |
---|
| 1480 | } |
---|
| 1481 | } |
---|
| 1482 | |
---|
| 1483 | },{"./utilities":7}],6:[function(require,module,exports){ |
---|
| 1484 | // uniwheel 0.1.2 (customized) |
---|
| 1485 | // A unified cross browser mouse wheel event handler |
---|
| 1486 | // https://github.com/teemualap/uniwheel |
---|
| 1487 | |
---|
| 1488 | module.exports = (function(){ |
---|
| 1489 | |
---|
| 1490 | //Full details: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel |
---|
| 1491 | |
---|
| 1492 | var prefix = "", _addEventListener, _removeEventListener, onwheel, support, fns = []; |
---|
| 1493 | |
---|
| 1494 | // detect event model |
---|
| 1495 | if ( window.addEventListener ) { |
---|
| 1496 | _addEventListener = "addEventListener"; |
---|
| 1497 | _removeEventListener = "removeEventListener"; |
---|
| 1498 | } else { |
---|
| 1499 | _addEventListener = "attachEvent"; |
---|
| 1500 | _removeEventListener = "detachEvent"; |
---|
| 1501 | prefix = "on"; |
---|
| 1502 | } |
---|
| 1503 | |
---|
| 1504 | // detect available wheel event |
---|
| 1505 | support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" |
---|
| 1506 | document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" |
---|
| 1507 | "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox |
---|
| 1508 | |
---|
| 1509 | |
---|
| 1510 | function createCallback(element,callback,capture) { |
---|
| 1511 | |
---|
| 1512 | var fn = function(originalEvent) { |
---|
| 1513 | |
---|
| 1514 | !originalEvent && ( originalEvent = window.event ); |
---|
| 1515 | |
---|
| 1516 | // create a normalized event object |
---|
| 1517 | var event = { |
---|
| 1518 | // keep a ref to the original event object |
---|
| 1519 | originalEvent: originalEvent, |
---|
| 1520 | target: originalEvent.target || originalEvent.srcElement, |
---|
| 1521 | type: "wheel", |
---|
| 1522 | deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, |
---|
| 1523 | deltaX: 0, |
---|
| 1524 | delatZ: 0, |
---|
| 1525 | preventDefault: function() { |
---|
| 1526 | originalEvent.preventDefault ? |
---|
| 1527 | originalEvent.preventDefault() : |
---|
| 1528 | originalEvent.returnValue = false; |
---|
| 1529 | } |
---|
| 1530 | }; |
---|
| 1531 | |
---|
| 1532 | // calculate deltaY (and deltaX) according to the event |
---|
| 1533 | if ( support == "mousewheel" ) { |
---|
| 1534 | event.deltaY = - 1/40 * originalEvent.wheelDelta; |
---|
| 1535 | // Webkit also support wheelDeltaX |
---|
| 1536 | originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); |
---|
| 1537 | } else { |
---|
| 1538 | event.deltaY = originalEvent.detail; |
---|
| 1539 | } |
---|
| 1540 | |
---|
| 1541 | // it's time to fire the callback |
---|
| 1542 | return callback( event ); |
---|
| 1543 | |
---|
| 1544 | }; |
---|
| 1545 | |
---|
| 1546 | fns.push({ |
---|
| 1547 | element: element, |
---|
| 1548 | fn: fn, |
---|
| 1549 | capture: capture |
---|
| 1550 | }); |
---|
| 1551 | |
---|
| 1552 | return fn; |
---|
| 1553 | } |
---|
| 1554 | |
---|
| 1555 | function getCallback(element,capture) { |
---|
| 1556 | for (var i = 0; i < fns.length; i++) { |
---|
| 1557 | if (fns[i].element === element && fns[i].capture === capture) { |
---|
| 1558 | return fns[i].fn; |
---|
| 1559 | } |
---|
| 1560 | } |
---|
| 1561 | return function(){}; |
---|
| 1562 | } |
---|
| 1563 | |
---|
| 1564 | function removeCallback(element,capture) { |
---|
| 1565 | for (var i = 0; i < fns.length; i++) { |
---|
| 1566 | if (fns[i].element === element && fns[i].capture === capture) { |
---|
| 1567 | return fns.splice(i,1); |
---|
| 1568 | } |
---|
| 1569 | } |
---|
| 1570 | } |
---|
| 1571 | |
---|
| 1572 | function _addWheelListener( elem, eventName, callback, useCapture ) { |
---|
| 1573 | |
---|
| 1574 | var cb; |
---|
| 1575 | |
---|
| 1576 | if (support === "wheel") { |
---|
| 1577 | cb = callback; |
---|
| 1578 | } else { |
---|
| 1579 | cb = createCallback(elem,callback,useCapture); |
---|
| 1580 | } |
---|
| 1581 | |
---|
| 1582 | elem[ _addEventListener ]( prefix + eventName, cb, useCapture || false ); |
---|
| 1583 | |
---|
| 1584 | } |
---|
| 1585 | |
---|
| 1586 | function _removeWheelListener( elem, eventName, callback, useCapture ) { |
---|
| 1587 | |
---|
| 1588 | var cb; |
---|
| 1589 | |
---|
| 1590 | if (support === "wheel") { |
---|
| 1591 | cb = callback; |
---|
| 1592 | } else { |
---|
| 1593 | cb = getCallback(elem,useCapture); |
---|
| 1594 | } |
---|
| 1595 | |
---|
| 1596 | elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || false ); |
---|
| 1597 | |
---|
| 1598 | removeCallback(elem,useCapture); |
---|
| 1599 | |
---|
| 1600 | } |
---|
| 1601 | |
---|
| 1602 | function addWheelListener( elem, callback, useCapture ) { |
---|
| 1603 | _addWheelListener( elem, support, callback, useCapture ); |
---|
| 1604 | |
---|
| 1605 | // handle MozMousePixelScroll in older Firefox |
---|
| 1606 | if( support == "DOMMouseScroll" ) { |
---|
| 1607 | _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture); |
---|
| 1608 | } |
---|
| 1609 | } |
---|
| 1610 | |
---|
| 1611 | function removeWheelListener(elem,callback,useCapture){ |
---|
| 1612 | _removeWheelListener(elem,support,callback,useCapture); |
---|
| 1613 | |
---|
| 1614 | // handle MozMousePixelScroll in older Firefox |
---|
| 1615 | if( support == "DOMMouseScroll" ) { |
---|
| 1616 | _removeWheelListener(elem, "MozMousePixelScroll", callback, useCapture); |
---|
| 1617 | } |
---|
| 1618 | } |
---|
| 1619 | |
---|
| 1620 | return { |
---|
| 1621 | on: addWheelListener, |
---|
| 1622 | off: removeWheelListener |
---|
| 1623 | }; |
---|
| 1624 | |
---|
| 1625 | })(); |
---|
| 1626 | |
---|
| 1627 | },{}],7:[function(require,module,exports){ |
---|
| 1628 | module.exports = { |
---|
| 1629 | /** |
---|
| 1630 | * Extends an object |
---|
| 1631 | * |
---|
| 1632 | * @param {Object} target object to extend |
---|
| 1633 | * @param {Object} source object to take properties from |
---|
| 1634 | * @return {Object} extended object |
---|
| 1635 | */ |
---|
| 1636 | extend: function(target, source) { |
---|
| 1637 | target = target || {}; |
---|
| 1638 | for (var prop in source) { |
---|
| 1639 | // Go recursively |
---|
| 1640 | if (this.isObject(source[prop])) { |
---|
| 1641 | target[prop] = this.extend(target[prop], source[prop]) |
---|
| 1642 | } else { |
---|
| 1643 | target[prop] = source[prop] |
---|
| 1644 | } |
---|
| 1645 | } |
---|
| 1646 | return target; |
---|
| 1647 | } |
---|
| 1648 | |
---|
| 1649 | /** |
---|
| 1650 | * Checks if an object is a DOM element |
---|
| 1651 | * |
---|
| 1652 | * @param {Object} o HTML element or String |
---|
| 1653 | * @return {Boolean} returns true if object is a DOM element |
---|
| 1654 | */ |
---|
| 1655 | , isElement: function(o){ |
---|
| 1656 | return ( |
---|
| 1657 | o instanceof HTMLElement || o instanceof SVGElement || o instanceof SVGSVGElement || //DOM2 |
---|
| 1658 | (o && typeof o === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string') |
---|
| 1659 | ); |
---|
| 1660 | } |
---|
| 1661 | |
---|
| 1662 | /** |
---|
| 1663 | * Checks if an object is an Object |
---|
| 1664 | * |
---|
| 1665 | * @param {Object} o Object |
---|
| 1666 | * @return {Boolean} returns true if object is an Object |
---|
| 1667 | */ |
---|
| 1668 | , isObject: function(o){ |
---|
| 1669 | return Object.prototype.toString.call(o) === '[object Object]'; |
---|
| 1670 | } |
---|
| 1671 | |
---|
| 1672 | /** |
---|
| 1673 | * Checks if variable is Number |
---|
| 1674 | * |
---|
| 1675 | * @param {Integer|Float} n |
---|
| 1676 | * @return {Boolean} returns true if variable is Number |
---|
| 1677 | */ |
---|
| 1678 | , isNumber: function(n) { |
---|
| 1679 | return !isNaN(parseFloat(n)) && isFinite(n); |
---|
| 1680 | } |
---|
| 1681 | |
---|
| 1682 | /** |
---|
| 1683 | * Search for an SVG element |
---|
| 1684 | * |
---|
| 1685 | * @param {Object|String} elementOrSelector DOM Element or selector String |
---|
| 1686 | * @return {Object|Null} SVG or null |
---|
| 1687 | */ |
---|
| 1688 | , getSvg: function(elementOrSelector) { |
---|
| 1689 | var element |
---|
| 1690 | , svg; |
---|
| 1691 | |
---|
| 1692 | if (!this.isElement(elementOrSelector)) { |
---|
| 1693 | // If selector provided |
---|
| 1694 | if (typeof elementOrSelector === 'string' || elementOrSelector instanceof String) { |
---|
| 1695 | // Try to find the element |
---|
| 1696 | element = document.querySelector(elementOrSelector) |
---|
| 1697 | |
---|
| 1698 | if (!element) { |
---|
| 1699 | throw new Error('Provided selector did not find any elements. Selector: ' + elementOrSelector) |
---|
| 1700 | return null |
---|
| 1701 | } |
---|
| 1702 | } else { |
---|
| 1703 | throw new Error('Provided selector is not an HTML object nor String') |
---|
| 1704 | return null |
---|
| 1705 | } |
---|
| 1706 | } else { |
---|
| 1707 | element = elementOrSelector |
---|
| 1708 | } |
---|
| 1709 | |
---|
| 1710 | if (element.tagName.toLowerCase() === 'svg') { |
---|
| 1711 | svg = element; |
---|
| 1712 | } else { |
---|
| 1713 | if (element.tagName.toLowerCase() === 'object') { |
---|
| 1714 | svg = element.contentDocument.documentElement; |
---|
| 1715 | } else { |
---|
| 1716 | if (element.tagName.toLowerCase() === 'embed') { |
---|
| 1717 | svg = element.getSVGDocument().documentElement; |
---|
| 1718 | } else { |
---|
| 1719 | if (element.tagName.toLowerCase() === 'img') { |
---|
| 1720 | throw new Error('Cannot script an SVG in an "img" element. Please use an "object" element or an in-line SVG.'); |
---|
| 1721 | } else { |
---|
| 1722 | throw new Error('Cannot get SVG.'); |
---|
| 1723 | } |
---|
| 1724 | return null |
---|
| 1725 | } |
---|
| 1726 | } |
---|
| 1727 | } |
---|
| 1728 | |
---|
| 1729 | return svg |
---|
| 1730 | } |
---|
| 1731 | |
---|
| 1732 | /** |
---|
| 1733 | * Attach a given context to a function |
---|
| 1734 | * @param {Function} fn Function |
---|
| 1735 | * @param {Object} context Context |
---|
| 1736 | * @return {Function} Function with certain context |
---|
| 1737 | */ |
---|
| 1738 | , proxy: function(fn, context) { |
---|
| 1739 | return function() { |
---|
| 1740 | return fn.apply(context, arguments) |
---|
| 1741 | } |
---|
| 1742 | } |
---|
| 1743 | |
---|
| 1744 | /** |
---|
| 1745 | * Returns object type |
---|
| 1746 | * Uses toString that returns [object SVGPoint] |
---|
| 1747 | * And than parses object type from string |
---|
| 1748 | * |
---|
| 1749 | * @param {Object} o Any object |
---|
| 1750 | * @return {String} Object type |
---|
| 1751 | */ |
---|
| 1752 | , getType: function(o) { |
---|
| 1753 | return Object.prototype.toString.apply(o).replace(/^\[object\s/, '').replace(/\]$/, '') |
---|
| 1754 | } |
---|
| 1755 | |
---|
| 1756 | /** |
---|
| 1757 | * If it is a touch event than add clientX and clientY to event object |
---|
| 1758 | * |
---|
| 1759 | * @param {Event} evt |
---|
| 1760 | * @param {SVGSVGElement} svg |
---|
| 1761 | */ |
---|
| 1762 | , mouseAndTouchNormalize: function(evt, svg) { |
---|
| 1763 | // If no clientX then fallback |
---|
| 1764 | if (evt.clientX === void 0 || evt.clientX === null) { |
---|
| 1765 | // Fallback |
---|
| 1766 | evt.clientX = 0 |
---|
| 1767 | evt.clientY = 0 |
---|
| 1768 | |
---|
| 1769 | // If it is a touch event |
---|
| 1770 | if (evt.touches !== void 0 && evt.touches.length) { |
---|
| 1771 | if (evt.touches[0].clientX !== void 0) { |
---|
| 1772 | evt.clientX = evt.touches[0].clientX |
---|
| 1773 | evt.clientY = evt.touches[0].clientY |
---|
| 1774 | } else if (evt.touches[0].pageX !== void 0) { |
---|
| 1775 | var rect = svg.getBoundingClientRect(); |
---|
| 1776 | |
---|
| 1777 | evt.clientX = evt.touches[0].pageX - rect.left |
---|
| 1778 | evt.clientY = evt.touches[0].pageY - rect.top |
---|
| 1779 | } |
---|
| 1780 | // If it is a custom event |
---|
| 1781 | } else if (evt.originalEvent !== void 0) { |
---|
| 1782 | if (evt.originalEvent.clientX !== void 0) { |
---|
| 1783 | evt.clientX = evt.originalEvent.clientX |
---|
| 1784 | evt.clientY = evt.originalEvent.clientY |
---|
| 1785 | } |
---|
| 1786 | } |
---|
| 1787 | } |
---|
| 1788 | } |
---|
| 1789 | |
---|
| 1790 | /** |
---|
| 1791 | * Check if an event is a double click/tap |
---|
| 1792 | * TODO: For touch gestures use a library (hammer.js) that takes in account other events |
---|
| 1793 | * (touchmove and touchend). It should take in account tap duration and traveled distance |
---|
| 1794 | * |
---|
| 1795 | * @param {Event} evt |
---|
| 1796 | * @param {Event} prevEvt Previous Event |
---|
| 1797 | * @return {Boolean} |
---|
| 1798 | */ |
---|
| 1799 | , isDblClick: function(evt, prevEvt) { |
---|
| 1800 | // Double click detected by browser |
---|
| 1801 | if (evt.detail === 2) { |
---|
| 1802 | return true; |
---|
| 1803 | } |
---|
| 1804 | // Try to compare events |
---|
| 1805 | else if (prevEvt !== void 0 && prevEvt !== null) { |
---|
| 1806 | var timeStampDiff = evt.timeStamp - prevEvt.timeStamp // should be lower than 250 ms |
---|
| 1807 | , touchesDistance = Math.sqrt(Math.pow(evt.clientX - prevEvt.clientX, 2) + Math.pow(evt.clientY - prevEvt.clientY, 2)) |
---|
| 1808 | |
---|
| 1809 | return timeStampDiff < 250 && touchesDistance < 10 |
---|
| 1810 | } |
---|
| 1811 | |
---|
| 1812 | // Nothing found |
---|
| 1813 | return false; |
---|
| 1814 | } |
---|
| 1815 | |
---|
| 1816 | /** |
---|
| 1817 | * Returns current timestamp as an integer |
---|
| 1818 | * |
---|
| 1819 | * @return {Number} |
---|
| 1820 | */ |
---|
| 1821 | , now: Date.now || function() { |
---|
| 1822 | return new Date().getTime(); |
---|
| 1823 | } |
---|
| 1824 | |
---|
| 1825 | // From underscore. |
---|
| 1826 | // Returns a function, that, when invoked, will only be triggered at most once |
---|
| 1827 | // during a given window of time. Normally, the throttled function will run |
---|
| 1828 | // as much as it can, without ever going more than once per `wait` duration; |
---|
| 1829 | // but if you'd like to disable the execution on the leading edge, pass |
---|
| 1830 | // `{leading: false}`. To disable execution on the trailing edge, ditto. |
---|
| 1831 | // jscs:disable |
---|
| 1832 | // jshint ignore:start |
---|
| 1833 | , throttle: function(func, wait, options) { |
---|
| 1834 | var that = this; |
---|
| 1835 | var context, args, result; |
---|
| 1836 | var timeout = null; |
---|
| 1837 | var previous = 0; |
---|
| 1838 | if (!options) options = {}; |
---|
| 1839 | var later = function() { |
---|
| 1840 | previous = options.leading === false ? 0 : that.now(); |
---|
| 1841 | timeout = null; |
---|
| 1842 | result = func.apply(context, args); |
---|
| 1843 | if (!timeout) context = args = null; |
---|
| 1844 | }; |
---|
| 1845 | return function() { |
---|
| 1846 | var now = that.now(); |
---|
| 1847 | if (!previous && options.leading === false) previous = now; |
---|
| 1848 | var remaining = wait - (now - previous); |
---|
| 1849 | context = this; |
---|
| 1850 | args = arguments; |
---|
| 1851 | if (remaining <= 0 || remaining > wait) { |
---|
| 1852 | clearTimeout(timeout); |
---|
| 1853 | timeout = null; |
---|
| 1854 | previous = now; |
---|
| 1855 | result = func.apply(context, args); |
---|
| 1856 | if (!timeout) context = args = null; |
---|
| 1857 | } else if (!timeout && options.trailing !== false) { |
---|
| 1858 | timeout = setTimeout(later, remaining); |
---|
| 1859 | } |
---|
| 1860 | return result; |
---|
| 1861 | }; |
---|
| 1862 | } |
---|
| 1863 | // jshint ignore:end |
---|
| 1864 | // jscs:enable |
---|
| 1865 | |
---|
| 1866 | /** |
---|
| 1867 | * Create a requestAnimationFrame simulation |
---|
| 1868 | * |
---|
| 1869 | * @param {Number|String} refreshRate |
---|
| 1870 | * @return {Function} |
---|
| 1871 | */ |
---|
| 1872 | , createRequestAnimationFrame: function(refreshRate) { |
---|
| 1873 | var timeout = null |
---|
| 1874 | |
---|
| 1875 | // Convert refreshRate to timeout |
---|
| 1876 | if (refreshRate !== 'auto' && refreshRate < 60 && refreshRate > 1) { |
---|
| 1877 | timeout = Math.floor(1000 / refreshRate) |
---|
| 1878 | } |
---|
| 1879 | |
---|
| 1880 | if (timeout === null) { |
---|
| 1881 | return window.requestAnimationFrame || requestTimeout(33) |
---|
| 1882 | } else { |
---|
| 1883 | return requestTimeout(timeout) |
---|
| 1884 | } |
---|
| 1885 | } |
---|
| 1886 | } |
---|
| 1887 | |
---|
| 1888 | /** |
---|
| 1889 | * Create a callback that will execute after a given timeout |
---|
| 1890 | * |
---|
| 1891 | * @param {Function} timeout |
---|
| 1892 | * @return {Function} |
---|
| 1893 | */ |
---|
| 1894 | function requestTimeout(timeout) { |
---|
| 1895 | return function(callback) { |
---|
| 1896 | window.setTimeout(callback, timeout) |
---|
| 1897 | } |
---|
| 1898 | } |
---|
| 1899 | |
---|
| 1900 | },{}]},{},[1]); |
---|