From dddf053595628966bfe72c6244949fb75b3d27c6 Mon Sep 17 00:00:00 2001 From: Clifford Wolf Date: Sun, 23 Jul 2017 17:10:16 +0200 Subject: [PATCH] Add gridinfo.html interactive viewer Signed-off-by: Clifford Wolf Signed-off-by: Tim 'mithro' Ansell --- gridinfo/gridinfo.html | 206 +++++ gridinfo/svg-pan-zoom.js | 1867 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 2073 insertions(+) create mode 100644 gridinfo/gridinfo.html create mode 100644 gridinfo/svg-pan-zoom.js diff --git a/gridinfo/gridinfo.html b/gridinfo/gridinfo.html new file mode 100644 index 00000000..ed8b94a7 --- /dev/null +++ b/gridinfo/gridinfo.html @@ -0,0 +1,206 @@ + +Project X-Ray Grid Viewer + + + + + + + +
Loading device database. Please wait...
+ +
+
+ +		 +
+ + + + + + + + + + + + +
 CLBLM (Tile with two SLICEM sites)
 CLBLL (Tile with two SLICEL sites)
 Block RAM Tile
 DSP Tile
 PCIE Tile
 Regular Interconnect tile
 Interface Interconnect tile
 Feedthru Interconnect tile
 VBRK / VFRAME / TERM
 NULL Tile
 Other
+
+ + + +
+ + diff --git a/gridinfo/svg-pan-zoom.js b/gridinfo/svg-pan-zoom.js new file mode 100644 index 00000000..a26b0fd7 --- /dev/null +++ b/gridinfo/svg-pan-zoom.js @@ -0,0 +1,1867 @@ +// svg-pan-zoom v3.2.5 +// https://github.com/ariutta/svg-pan-zoom +(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= 0; i--) { + if (this.eventListeners.hasOwnProperty(haltEventListeners[i])) { + delete this.eventListeners[haltEventListeners[i]] + } + } + } + } + + // Bind eventListeners + for (var event in this.eventListeners) { + // Attach event to eventsListenerElement or SVG if not available + (this.options.eventsListenerElement || this.svg) + .addEventListener(event, this.eventListeners[event], false) + } + + // Zoom using mouse wheel + if (this.options.mouseWheelZoomEnabled) { + this.options.mouseWheelZoomEnabled = false // set to false as enable will set it back to true + this.enableMouseWheelZoom() + } +} + +/** + * Enable ability to zoom using mouse wheel + */ +SvgPanZoom.prototype.enableMouseWheelZoom = function() { + if (!this.options.mouseWheelZoomEnabled) { + var that = this + + // Mouse wheel listener + this.wheelListener = function(evt) { + return that.handleMouseWheel(evt); + } + + // Bind wheelListener + Wheel.on(this.options.eventsListenerElement || this.svg, this.wheelListener, false) + + this.options.mouseWheelZoomEnabled = true + } +} + +/** + * Disable ability to zoom using mouse wheel + */ +SvgPanZoom.prototype.disableMouseWheelZoom = function() { + if (this.options.mouseWheelZoomEnabled) { + Wheel.off(this.options.eventsListenerElement || this.svg, this.wheelListener, false) + this.options.mouseWheelZoomEnabled = false + } +} + +/** + * Handle mouse wheel event + * + * @param {Event} evt + */ +SvgPanZoom.prototype.handleMouseWheel = function(evt) { + if (!this.options.zoomEnabled || this.state !== 'none') { + return; + } + + if (this.options.preventMouseEventsDefault){ + if (evt.preventDefault) { + evt.preventDefault(); + } else { + evt.returnValue = false; + } + } + + // Default delta in case that deltaY is not available + var delta = evt.deltaY || 1 + , timeDelta = Date.now() - this.lastMouseWheelEventTime + , divider = 3 + Math.max(0, 30 - timeDelta) + + // Update cache + this.lastMouseWheelEventTime = Date.now() + + // Make empirical adjustments for browsers that give deltaY in pixels (deltaMode=0) + if ('deltaMode' in evt && evt.deltaMode === 0 && evt.wheelDelta) { + delta = evt.deltaY === 0 ? 0 : Math.abs(evt.wheelDelta) / evt.deltaY + } + + delta = -0.3 < delta && delta < 0.3 ? delta : (delta > 0 ? 1 : -1) * Math.log(Math.abs(delta) + 10) / divider + + var inversedScreenCTM = this.svg.getScreenCTM().inverse() + , relativeMousePoint = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(inversedScreenCTM) + , 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 + + this.zoomAtPoint(zoom, relativeMousePoint) +} + +/** + * Zoom in at a SVG point + * + * @param {SVGPoint} point + * @param {Float} zoomScale Number representing how much to zoom + * @param {Boolean} zoomAbsolute Default false. If true, zoomScale is treated as an absolute value. + * Otherwise, zoomScale is treated as a multiplied (e.g. 1.10 would zoom in 10%) + */ +SvgPanZoom.prototype.zoomAtPoint = function(zoomScale, point, zoomAbsolute) { + var originalState = this.viewport.getOriginalState() + + if (!zoomAbsolute) { + // Fit zoomScale in set bounds + if (this.getZoom() * zoomScale < this.options.minZoom * originalState.zoom) { + zoomScale = (this.options.minZoom * originalState.zoom) / this.getZoom() + } else if (this.getZoom() * zoomScale > this.options.maxZoom * originalState.zoom) { + zoomScale = (this.options.maxZoom * originalState.zoom) / this.getZoom() + } + } else { + // Fit zoomScale in set bounds + zoomScale = Math.max(this.options.minZoom * originalState.zoom, Math.min(this.options.maxZoom * originalState.zoom, zoomScale)) + // Find relative scale to achieve desired scale + zoomScale = zoomScale/this.getZoom() + } + + var oldCTM = this.viewport.getCTM() + , relativePoint = point.matrixTransform(oldCTM.inverse()) + , modifier = this.svg.createSVGMatrix().translate(relativePoint.x, relativePoint.y).scale(zoomScale).translate(-relativePoint.x, -relativePoint.y) + , newCTM = oldCTM.multiply(modifier) + + if (newCTM.a !== oldCTM.a) { + this.viewport.setCTM(newCTM) + } +} + +/** + * Zoom at center point + * + * @param {Float} scale + * @param {Boolean} absolute Marks zoom scale as relative or absolute + */ +SvgPanZoom.prototype.zoom = function(scale, absolute) { + this.zoomAtPoint(scale, SvgUtils.getSvgCenterPoint(this.svg, this.width, this.height), absolute) +} + +/** + * Zoom used by public instance + * + * @param {Float} scale + * @param {Boolean} absolute Marks zoom scale as relative or absolute + */ +SvgPanZoom.prototype.publicZoom = function(scale, absolute) { + if (absolute) { + scale = this.computeFromRelativeZoom(scale) + } + + this.zoom(scale, absolute) +} + +/** + * Zoom at point used by public instance + * + * @param {Float} scale + * @param {SVGPoint|Object} point An object that has x and y attributes + * @param {Boolean} absolute Marks zoom scale as relative or absolute + */ +SvgPanZoom.prototype.publicZoomAtPoint = function(scale, point, absolute) { + if (absolute) { + // Transform zoom into a relative value + scale = this.computeFromRelativeZoom(scale) + } + + // If not a SVGPoint but has x and y than create a SVGPoint + if (Utils.getType(point) !== 'SVGPoint' && 'x' in point && 'y' in point) { + point = SvgUtils.createSVGPoint(this.svg, point.x, point.y) + } else { + throw new Error('Given point is invalid') + return + } + + this.zoomAtPoint(scale, point, absolute) +} + +/** + * Get zoom scale + * + * @return {Float} zoom scale + */ +SvgPanZoom.prototype.getZoom = function() { + return this.viewport.getZoom() +} + +/** + * Get zoom scale for public usage + * + * @return {Float} zoom scale + */ +SvgPanZoom.prototype.getRelativeZoom = function() { + return this.viewport.getRelativeZoom() +} + +/** + * Compute actual zoom from public zoom + * + * @param {Float} zoom + * @return {Float} zoom scale + */ +SvgPanZoom.prototype.computeFromRelativeZoom = function(zoom) { + return zoom * this.viewport.getOriginalState().zoom +} + +/** + * Set zoom to initial state + */ +SvgPanZoom.prototype.resetZoom = function() { + var originalState = this.viewport.getOriginalState() + + this.zoom(originalState.zoom, true); +} + +/** + * Set pan to initial state + */ +SvgPanZoom.prototype.resetPan = function() { + this.pan(this.viewport.getOriginalState()); +} + +/** + * Set pan and zoom to initial state + */ +SvgPanZoom.prototype.reset = function() { + this.resetZoom() + this.resetPan() +} + +/** + * Handle double click event + * See handleMouseDown() for alternate detection method + * + * @param {Event} evt + */ +SvgPanZoom.prototype.handleDblClick = function(evt) { + if (this.options.preventMouseEventsDefault) { + if (evt.preventDefault) { + evt.preventDefault() + } else { + evt.returnValue = false + } + } + + // Check if target was a control button + if (this.options.controlIconsEnabled) { + var targetClass = evt.target.getAttribute('class') || '' + if (targetClass.indexOf('svg-pan-zoom-control') > -1) { + return false + } + } + + var zoomFactor + + if (evt.shiftKey) { + zoomFactor = 1/((1 + this.options.zoomScaleSensitivity) * 2) // zoom out when shift key pressed + } else { + zoomFactor = (1 + this.options.zoomScaleSensitivity) * 2 + } + + var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.svg.getScreenCTM().inverse()) + this.zoomAtPoint(zoomFactor, point) +} + +/** + * Handle click event + * + * @param {Event} evt + */ +SvgPanZoom.prototype.handleMouseDown = function(evt, prevEvt) { + if (this.options.preventMouseEventsDefault) { + if (evt.preventDefault) { + evt.preventDefault() + } else { + evt.returnValue = false + } + } + + Utils.mouseAndTouchNormalize(evt, this.svg) + + // Double click detection; more consistent than ondblclick + if (this.options.dblClickZoomEnabled && Utils.isDblClick(evt, prevEvt)){ + this.handleDblClick(evt) + } else { + // Pan mode + this.state = 'pan' + this.firstEventCTM = this.viewport.getCTM() + this.stateOrigin = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) + } +} + +/** + * Handle mouse move event + * + * @param {Event} evt + */ +SvgPanZoom.prototype.handleMouseMove = function(evt) { + if (this.options.preventMouseEventsDefault) { + if (evt.preventDefault) { + evt.preventDefault() + } else { + evt.returnValue = false + } + } + + if (this.state === 'pan' && this.options.panEnabled) { + // Pan mode + var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) + , viewportCTM = this.firstEventCTM.translate(point.x - this.stateOrigin.x, point.y - this.stateOrigin.y) + + this.viewport.setCTM(viewportCTM) + } +} + +/** + * Handle mouse button release event + * + * @param {Event} evt + */ +SvgPanZoom.prototype.handleMouseUp = function(evt) { + if (this.options.preventMouseEventsDefault) { + if (evt.preventDefault) { + evt.preventDefault() + } else { + evt.returnValue = false + } + } + + if (this.state === 'pan') { + // Quit pan mode + this.state = 'none' + } +} + +/** + * Adjust viewport size (only) so it will fit in SVG + * Does not center image + */ +SvgPanZoom.prototype.fit = function() { + var viewBox = this.viewport.getViewBox() + , newScale = Math.min(this.width/viewBox.width, this.height/viewBox.height) + + this.zoom(newScale, true) +} + +/** + * Adjust viewport size (only) so it will contain the SVG + * Does not center image + */ +SvgPanZoom.prototype.contain = function() { + var viewBox = this.viewport.getViewBox() + , newScale = Math.max(this.width/viewBox.width, this.height/viewBox.height) + + this.zoom(newScale, true) +} + +/** + * Adjust viewport pan (only) so it will be centered in SVG + * Does not zoom/fit/contain image + */ +SvgPanZoom.prototype.center = function() { + var viewBox = this.viewport.getViewBox() + , offsetX = (this.width - (viewBox.width + viewBox.x * 2) * this.getZoom()) * 0.5 + , offsetY = (this.height - (viewBox.height + viewBox.y * 2) * this.getZoom()) * 0.5 + + this.getPublicInstance().pan({x: offsetX, y: offsetY}) +} + +/** + * Update content cached BorderBox + * Use when viewport contents change + */ +SvgPanZoom.prototype.updateBBox = function() { + this.viewport.recacheViewBox() +} + +/** + * Pan to a rendered position + * + * @param {Object} point {x: 0, y: 0} + */ +SvgPanZoom.prototype.pan = function(point) { + var viewportCTM = this.viewport.getCTM() + viewportCTM.e = point.x + viewportCTM.f = point.y + this.viewport.setCTM(viewportCTM) +} + +/** + * Relatively pan the graph by a specified rendered position vector + * + * @param {Object} point {x: 0, y: 0} + */ +SvgPanZoom.prototype.panBy = function(point) { + var viewportCTM = this.viewport.getCTM() + viewportCTM.e += point.x + viewportCTM.f += point.y + this.viewport.setCTM(viewportCTM) +} + +/** + * Get pan vector + * + * @return {Object} {x: 0, y: 0} + */ +SvgPanZoom.prototype.getPan = function() { + var state = this.viewport.getState() + + return {x: state.x, y: state.y} +} + +/** + * Recalculates cached svg dimensions and controls position + */ +SvgPanZoom.prototype.resize = function() { + // Get dimensions + var boundingClientRectNormalized = SvgUtils.getBoundingClientRectNormalized(this.svg) + this.width = boundingClientRectNormalized.width + this.height = boundingClientRectNormalized.height + + // Reposition control icons by re-enabling them + if (this.options.controlIconsEnabled) { + this.getPublicInstance().disableControlIcons() + this.getPublicInstance().enableControlIcons() + } +} + +/** + * Unbind mouse events, free callbacks and destroy public instance + */ +SvgPanZoom.prototype.destroy = function() { + var that = this + + // Free callbacks + this.beforeZoom = null + this.onZoom = null + this.beforePan = null + this.onPan = null + + // Destroy custom event handlers + if (this.options.customEventsHandler != null) { // jshint ignore:line + this.options.customEventsHandler.destroy({ + svgElement: this.svg + , eventsListenerElement: this.options.eventsListenerElement + , instance: this.getPublicInstance() + }) + } + + // Unbind eventListeners + for (var event in this.eventListeners) { + (this.options.eventsListenerElement || this.svg) + .removeEventListener(event, this.eventListeners[event], false) + } + + // Unbind wheelListener + this.disableMouseWheelZoom() + + // Remove control icons + this.getPublicInstance().disableControlIcons() + + // Reset zoom and pan + this.reset() + + // Remove instance from instancesStore + instancesStore = instancesStore.filter(function(instance){ + return instance.svg !== that.svg + }) + + // Delete options and its contents + delete this.options + + // Destroy public instance and rewrite getPublicInstance + delete this.publicInstance + delete this.pi + this.getPublicInstance = function(){ + return null + } +} + +/** + * Returns a public instance object + * + * @return {Object} Public instance object + */ +SvgPanZoom.prototype.getPublicInstance = function() { + var that = this + + // Create cache + if (!this.publicInstance) { + this.publicInstance = this.pi = { + // Pan + enablePan: function() {that.options.panEnabled = true; return that.pi} + , disablePan: function() {that.options.panEnabled = false; return that.pi} + , isPanEnabled: function() {return !!that.options.panEnabled} + , pan: function(point) {that.pan(point); return that.pi} + , panBy: function(point) {that.panBy(point); return that.pi} + , getPan: function() {return that.getPan()} + // Pan event + , setBeforePan: function(fn) {that.options.beforePan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} + , setOnPan: function(fn) {that.options.onPan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} + // Zoom and Control Icons + , enableZoom: function() {that.options.zoomEnabled = true; return that.pi} + , disableZoom: function() {that.options.zoomEnabled = false; return that.pi} + , isZoomEnabled: function() {return !!that.options.zoomEnabled} + , enableControlIcons: function() { + if (!that.options.controlIconsEnabled) { + that.options.controlIconsEnabled = true + ControlIcons.enable(that) + } + return that.pi + } + , disableControlIcons: function() { + if (that.options.controlIconsEnabled) { + that.options.controlIconsEnabled = false; + ControlIcons.disable(that) + } + return that.pi + } + , isControlIconsEnabled: function() {return !!that.options.controlIconsEnabled} + // Double click zoom + , enableDblClickZoom: function() {that.options.dblClickZoomEnabled = true; return that.pi} + , disableDblClickZoom: function() {that.options.dblClickZoomEnabled = false; return that.pi} + , isDblClickZoomEnabled: function() {return !!that.options.dblClickZoomEnabled} + // Mouse wheel zoom + , enableMouseWheelZoom: function() {that.enableMouseWheelZoom(); return that.pi} + , disableMouseWheelZoom: function() {that.disableMouseWheelZoom(); return that.pi} + , isMouseWheelZoomEnabled: function() {return !!that.options.mouseWheelZoomEnabled} + // Zoom scale and bounds + , setZoomScaleSensitivity: function(scale) {that.options.zoomScaleSensitivity = scale; return that.pi} + , setMinZoom: function(zoom) {that.options.minZoom = zoom; return that.pi} + , setMaxZoom: function(zoom) {that.options.maxZoom = zoom; return that.pi} + // Zoom event + , setBeforeZoom: function(fn) {that.options.beforeZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} + , setOnZoom: function(fn) {that.options.onZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} + // Zooming + , zoom: function(scale) {that.publicZoom(scale, true); return that.pi} + , zoomBy: function(scale) {that.publicZoom(scale, false); return that.pi} + , zoomAtPoint: function(scale, point) {that.publicZoomAtPoint(scale, point, true); return that.pi} + , zoomAtPointBy: function(scale, point) {that.publicZoomAtPoint(scale, point, false); return that.pi} + , zoomIn: function() {this.zoomBy(1 + that.options.zoomScaleSensitivity); return that.pi} + , zoomOut: function() {this.zoomBy(1 / (1 + that.options.zoomScaleSensitivity)); return that.pi} + , getZoom: function() {return that.getRelativeZoom()} + // Reset + , resetZoom: function() {that.resetZoom(); return that.pi} + , resetPan: function() {that.resetPan(); return that.pi} + , reset: function() {that.reset(); return that.pi} + // Fit, Contain and Center + , fit: function() {that.fit(); return that.pi} + , contain: function() {that.contain(); return that.pi} + , center: function() {that.center(); return that.pi} + // Size and Resize + , updateBBox: function() {that.updateBBox(); return that.pi} + , resize: function() {that.resize(); return that.pi} + , getSizes: function() { + return { + width: that.width + , height: that.height + , realZoom: that.getZoom() + , viewBox: that.viewport.getViewBox() + } + } + // Destroy + , destroy: function() {that.destroy(); return that.pi} + } + } + + return this.publicInstance +} + +/** + * Stores pairs of instances of SvgPanZoom and SVG + * Each pair is represented by an object {svg: SVGSVGElement, instance: SvgPanZoom} + * + * @type {Array} + */ +var instancesStore = [] + +var svgPanZoom = function(elementOrSelector, options){ + var svg = Utils.getSvg(elementOrSelector) + + if (svg === null) { + return null + } else { + // Look for existent instance + for(var i = instancesStore.length - 1; i >= 0; i--) { + if (instancesStore[i].svg === svg) { + return instancesStore[i].instance.getPublicInstance() + } + } + + // If instance not found - create one + instancesStore.push({ + svg: svg + , instance: new SvgPanZoom(svg, options) + }) + + // Return just pushed instance + return instancesStore[instancesStore.length - 1].instance.getPublicInstance() + } +} + +module.exports = svgPanZoom; + +},{"./control-icons":2,"./shadow-viewport":3,"./svg-utilities":5,"./uniwheel":6,"./utilities":7}],5:[function(require,module,exports){ +var Utils = require('./utilities') + , _browser = 'unknown' + ; + +// http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser +if (/*@cc_on!@*/false || !!document.documentMode) { // internet explorer + _browser = 'ie'; +} + +module.exports = { + svgNS: 'http://www.w3.org/2000/svg' +, xmlNS: 'http://www.w3.org/XML/1998/namespace' +, xmlnsNS: 'http://www.w3.org/2000/xmlns/' +, xlinkNS: 'http://www.w3.org/1999/xlink' +, evNS: 'http://www.w3.org/2001/xml-events' + + /** + * Get svg dimensions: width and height + * + * @param {SVGSVGElement} svg + * @return {Object} {width: 0, height: 0} + */ +, getBoundingClientRectNormalized: function(svg) { + if (svg.clientWidth && svg.clientHeight) { + return {width: svg.clientWidth, height: svg.clientHeight} + } else if (!!svg.getBoundingClientRect()) { + return svg.getBoundingClientRect(); + } else { + throw new Error('Cannot get BoundingClientRect for SVG.'); + } + } + + /** + * Gets g element with class of "viewport" or creates it if it doesn't exist + * + * @param {SVGSVGElement} svg + * @return {SVGElement} g (group) element + */ +, getOrCreateViewport: function(svg, selector) { + var viewport = null + + if (Utils.isElement(selector)) { + viewport = selector + } else { + viewport = svg.querySelector(selector) + } + + // Check if there is just one main group in SVG + if (!viewport) { + var childNodes = Array.prototype.slice.call(svg.childNodes || svg.children).filter(function(el){ + return el.nodeName !== 'defs' && el.nodeName !== '#text' + }) + + // Node name should be SVGGElement and should have no transform attribute + // Groups with transform are not used as viewport because it involves parsing of all transform possibilities + if (childNodes.length === 1 && childNodes[0].nodeName === 'g' && childNodes[0].getAttribute('transform') === null) { + viewport = childNodes[0] + } + } + + // If no favorable group element exists then create one + if (!viewport) { + var viewportId = 'viewport-' + new Date().toISOString().replace(/\D/g, ''); + viewport = document.createElementNS(this.svgNS, 'g'); + viewport.setAttribute('id', viewportId); + + // Internet Explorer (all versions?) can't use childNodes, but other browsers prefer (require?) using childNodes + var svgChildren = svg.childNodes || svg.children; + if (!!svgChildren && svgChildren.length > 0) { + for (var i = svgChildren.length; i > 0; i--) { + // Move everything into viewport except defs + if (svgChildren[svgChildren.length - i].nodeName !== 'defs') { + viewport.appendChild(svgChildren[svgChildren.length - i]); + } + } + } + svg.appendChild(viewport); + } + + // Parse class names + var classNames = []; + if (viewport.getAttribute('class')) { + classNames = viewport.getAttribute('class').split(' ') + } + + // Set class (if not set already) + if (!~classNames.indexOf('svg-pan-zoom_viewport')) { + classNames.push('svg-pan-zoom_viewport') + viewport.setAttribute('class', classNames.join(' ')) + } + + return viewport + } + + /** + * Set SVG attributes + * + * @param {SVGSVGElement} svg + */ + , setupSvgAttributes: function(svg) { + // Setting default attributes + svg.setAttribute('xmlns', this.svgNS); + svg.setAttributeNS(this.xmlnsNS, 'xmlns:xlink', this.xlinkNS); + svg.setAttributeNS(this.xmlnsNS, 'xmlns:ev', this.evNS); + + // Needed for Internet Explorer, otherwise the viewport overflows + if (svg.parentNode !== null) { + var style = svg.getAttribute('style') || ''; + if (style.toLowerCase().indexOf('overflow') === -1) { + svg.setAttribute('style', 'overflow: hidden; ' + style); + } + } + } + +/** + * How long Internet Explorer takes to finish updating its display (ms). + */ +, internetExplorerRedisplayInterval: 300 + +/** + * Forces the browser to redisplay all SVG elements that rely on an + * element defined in a 'defs' section. It works globally, for every + * available defs element on the page. + * The throttling is intentionally global. + * + * This is only needed for IE. It is as a hack to make markers (and 'use' elements?) + * visible after pan/zoom when there are multiple SVGs on the page. + * See bug report: https://connect.microsoft.com/IE/feedback/details/781964/ + * also see svg-pan-zoom issue: https://github.com/ariutta/svg-pan-zoom/issues/62 + */ +, refreshDefsGlobal: Utils.throttle(function() { + var allDefs = document.querySelectorAll('defs'); + var allDefsCount = allDefs.length; + for (var i = 0; i < allDefsCount; i++) { + var thisDefs = allDefs[i]; + thisDefs.parentNode.insertBefore(thisDefs, thisDefs); + } + }, this.internetExplorerRedisplayInterval) + + /** + * Sets the current transform matrix of an element + * + * @param {SVGElement} element + * @param {SVGMatrix} matrix CTM + * @param {SVGElement} defs + */ +, setCTM: function(element, matrix, defs) { + var that = this + , s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')'; + + element.setAttributeNS(null, 'transform', s); + + // IE has a bug that makes markers disappear on zoom (when the matrix "a" and/or "d" elements change) + // see http://stackoverflow.com/questions/17654578/svg-marker-does-not-work-in-ie9-10 + // and http://srndolha.wordpress.com/2013/11/25/svg-line-markers-may-disappear-in-internet-explorer-11/ + if (_browser === 'ie' && !!defs) { + // this refresh is intended for redisplaying the SVG during zooming + defs.parentNode.insertBefore(defs, defs); + // this refresh is intended for redisplaying the other SVGs on a page when panning a given SVG + // it is also needed for the given SVG itself, on zoomEnd, if the SVG contains any markers that + // are located under any other element(s). + window.setTimeout(function() { + that.refreshDefsGlobal(); + }, that.internetExplorerRedisplayInterval); + } + } + + /** + * Instantiate an SVGPoint object with given event coordinates + * + * @param {Event} evt + * @param {SVGSVGElement} svg + * @return {SVGPoint} point + */ +, getEventPoint: function(evt, svg) { + var point = svg.createSVGPoint() + + Utils.mouseAndTouchNormalize(evt, svg) + + point.x = evt.clientX + point.y = evt.clientY + + return point + } + + /** + * Get SVG center point + * + * @param {SVGSVGElement} svg + * @return {SVGPoint} + */ +, getSvgCenterPoint: function(svg, width, height) { + return this.createSVGPoint(svg, width / 2, height / 2) + } + + /** + * Create a SVGPoint with given x and y + * + * @param {SVGSVGElement} svg + * @param {Number} x + * @param {Number} y + * @return {SVGPoint} + */ +, createSVGPoint: function(svg, x, y) { + var point = svg.createSVGPoint() + point.x = x + point.y = y + + return point + } +} + +},{"./utilities":7}],6:[function(require,module,exports){ +// uniwheel 0.1.2 (customized) +// A unified cross browser mouse wheel event handler +// https://github.com/teemualap/uniwheel + +module.exports = (function(){ + + //Full details: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel + + var prefix = "", _addEventListener, _removeEventListener, onwheel, support, fns = []; + + // detect event model + if ( window.addEventListener ) { + _addEventListener = "addEventListener"; + _removeEventListener = "removeEventListener"; + } else { + _addEventListener = "attachEvent"; + _removeEventListener = "detachEvent"; + prefix = "on"; + } + + // detect available wheel event + support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" + document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" + "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox + + + function createCallback(element,callback,capture) { + + var fn = function(originalEvent) { + + !originalEvent && ( originalEvent = window.event ); + + // create a normalized event object + var event = { + // keep a ref to the original event object + originalEvent: originalEvent, + target: originalEvent.target || originalEvent.srcElement, + type: "wheel", + deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, + deltaX: 0, + delatZ: 0, + preventDefault: function() { + originalEvent.preventDefault ? + originalEvent.preventDefault() : + originalEvent.returnValue = false; + } + }; + + // calculate deltaY (and deltaX) according to the event + if ( support == "mousewheel" ) { + event.deltaY = - 1/40 * originalEvent.wheelDelta; + // Webkit also support wheelDeltaX + originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); + } else { + event.deltaY = originalEvent.detail; + } + + // it's time to fire the callback + return callback( event ); + + }; + + fns.push({ + element: element, + fn: fn, + capture: capture + }); + + return fn; + } + + function getCallback(element,capture) { + for (var i = 0; i < fns.length; i++) { + if (fns[i].element === element && fns[i].capture === capture) { + return fns[i].fn; + } + } + return function(){}; + } + + function removeCallback(element,capture) { + for (var i = 0; i < fns.length; i++) { + if (fns[i].element === element && fns[i].capture === capture) { + return fns.splice(i,1); + } + } + } + + function _addWheelListener( elem, eventName, callback, useCapture ) { + + var cb; + + if (support === "wheel") { + cb = callback; + } else { + cb = createCallback(elem,callback,useCapture); + } + + elem[ _addEventListener ]( prefix + eventName, cb, useCapture || false ); + + } + + function _removeWheelListener( elem, eventName, callback, useCapture ) { + + if (support === "wheel") { + cb = callback; + } else { + cb = getCallback(elem,useCapture); + } + + elem[ _removeEventListener ]( prefix + eventName, cb, useCapture || false ); + + removeCallback(elem,useCapture); + + } + + function addWheelListener( elem, callback, useCapture ) { + _addWheelListener( elem, support, callback, useCapture ); + + // handle MozMousePixelScroll in older Firefox + if( support == "DOMMouseScroll" ) { + _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture); + } + } + + function removeWheelListener(elem,callback,useCapture){ + _removeWheelListener(elem,support,callback,useCapture); + + // handle MozMousePixelScroll in older Firefox + if( support == "DOMMouseScroll" ) { + _removeWheelListener(elem, "MozMousePixelScroll", callback, useCapture); + } + } + + return { + on: addWheelListener, + off: removeWheelListener + }; + +})(); + +},{}],7:[function(require,module,exports){ +module.exports = { + /** + * Extends an object + * + * @param {Object} target object to extend + * @param {Object} source object to take properties from + * @return {Object} extended object + */ + extend: function(target, source) { + target = target || {}; + for (var prop in source) { + // Go recursively + if (this.isObject(source[prop])) { + target[prop] = this.extend(target[prop], source[prop]) + } else { + target[prop] = source[prop] + } + } + return target; + } + + /** + * Checks if an object is a DOM element + * + * @param {Object} o HTML element or String + * @return {Boolean} returns true if object is a DOM element + */ +, isElement: function(o){ + return ( + o instanceof HTMLElement || o instanceof SVGElement || o instanceof SVGSVGElement || //DOM2 + (o && typeof o === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string') + ); + } + + /** + * Checks if an object is an Object + * + * @param {Object} o Object + * @return {Boolean} returns true if object is an Object + */ +, isObject: function(o){ + return Object.prototype.toString.call(o) === '[object Object]'; + } + + /** + * Checks if variable is Number + * + * @param {Integer|Float} n + * @return {Boolean} returns true if variable is Number + */ +, isNumber: function(n) { + return !isNaN(parseFloat(n)) && isFinite(n); + } + + /** + * Search for an SVG element + * + * @param {Object|String} elementOrSelector DOM Element or selector String + * @return {Object|Null} SVG or null + */ +, getSvg: function(elementOrSelector) { + var element + , svg; + + if (!this.isElement(elementOrSelector)) { + // If selector provided + if (typeof elementOrSelector === 'string' || elementOrSelector instanceof String) { + // Try to find the element + element = document.querySelector(elementOrSelector) + + if (!element) { + throw new Error('Provided selector did not find any elements. Selector: ' + elementOrSelector) + return null + } + } else { + throw new Error('Provided selector is not an HTML object nor String') + return null + } + } else { + element = elementOrSelector + } + + if (element.tagName.toLowerCase() === 'svg') { + svg = element; + } else { + if (element.tagName.toLowerCase() === 'object') { + svg = element.contentDocument.documentElement; + } else { + if (element.tagName.toLowerCase() === 'embed') { + svg = element.getSVGDocument().documentElement; + } else { + if (element.tagName.toLowerCase() === 'img') { + throw new Error('Cannot script an SVG in an "img" element. Please use an "object" element or an in-line SVG.'); + } else { + throw new Error('Cannot get SVG.'); + } + return null + } + } + } + + return svg + } + + /** + * Attach a given context to a function + * @param {Function} fn Function + * @param {Object} context Context + * @return {Function} Function with certain context + */ +, proxy: function(fn, context) { + return function() { + return fn.apply(context, arguments) + } + } + + /** + * Returns object type + * Uses toString that returns [object SVGPoint] + * And than parses object type from string + * + * @param {Object} o Any object + * @return {String} Object type + */ +, getType: function(o) { + return Object.prototype.toString.apply(o).replace(/^\[object\s/, '').replace(/\]$/, '') + } + + /** + * If it is a touch event than add clientX and clientY to event object + * + * @param {Event} evt + * @param {SVGSVGElement} svg + */ +, mouseAndTouchNormalize: function(evt, svg) { + // If no cilentX and but touch objects are available + if (evt.clientX === void 0 || evt.clientX === null) { + // Fallback + evt.clientX = 0 + evt.clientY = 0 + + // If it is a touch event + if (evt.changedTouches !== void 0 && evt.changedTouches.length) { + // If touch event has changedTouches + if (evt.changedTouches[0].clientX !== void 0) { + evt.clientX = evt.changedTouches[0].clientX + evt.clientY = evt.changedTouches[0].clientY + } + // If changedTouches has pageX attribute + else if (evt.changedTouches[0].pageX !== void 0) { + var rect = svg.getBoundingClientRect(); + + evt.clientX = evt.changedTouches[0].pageX - rect.left + evt.clientY = evt.changedTouches[0].pageY - rect.top + } + // If it is a custom event + } else if (evt.originalEvent !== void 0) { + if (evt.originalEvent.clientX !== void 0) { + evt.clientX = evt.originalEvent.clientX + evt.clientY = evt.originalEvent.clientY + } + } + } + } + + /** + * Check if an event is a double click/tap + * TODO: For touch gestures use a library (hammer.js) that takes in account other events + * (touchmove and touchend). It should take in account tap duration and traveled distance + * + * @param {Event} evt + * @param {Event} prevEvt Previous Event + * @return {Boolean} + */ +, isDblClick: function(evt, prevEvt) { + // Double click detected by browser + if (evt.detail === 2) { + return true; + } + // Try to compare events + else if (prevEvt !== void 0 && prevEvt !== null) { + var timeStampDiff = evt.timeStamp - prevEvt.timeStamp // should be lower than 250 ms + , touchesDistance = Math.sqrt(Math.pow(evt.clientX - prevEvt.clientX, 2) + Math.pow(evt.clientY - prevEvt.clientY, 2)) + + return timeStampDiff < 250 && touchesDistance < 10 + } + + // Nothing found + return false; + } + + /** + * Returns current timestamp as an integer + * + * @return {Number} + */ +, now: Date.now || function() { + return new Date().getTime(); + } + + // From underscore. + // Returns a function, that, when invoked, will only be triggered at most once + // during a given window of time. Normally, the throttled function will run + // as much as it can, without ever going more than once per `wait` duration; + // but if you'd like to disable the execution on the leading edge, pass + // `{leading: false}`. To disable execution on the trailing edge, ditto. +// jscs:disable +// jshint ignore:start +, throttle: function(func, wait, options) { + var that = this; + var context, args, result; + var timeout = null; + var previous = 0; + if (!options) options = {}; + var later = function() { + previous = options.leading === false ? 0 : that.now(); + timeout = null; + result = func.apply(context, args); + if (!timeout) context = args = null; + }; + return function() { + var now = that.now(); + if (!previous && options.leading === false) previous = now; + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0 || remaining > wait) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + if (!timeout) context = args = null; + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + } +// jshint ignore:end +// jscs:enable + + /** + * Create a requestAnimationFrame simulation + * + * @param {Number|String} refreshRate + * @return {Function} + */ +, createRequestAnimationFrame: function(refreshRate) { + var timeout = null + + // Convert refreshRate to timeout + if (refreshRate !== 'auto' && refreshRate < 60 && refreshRate > 1) { + timeout = Math.floor(1000 / refreshRate) + } + + if (timeout === null) { + return window.requestAnimationFrame || requestTimeout(33) + } else { + return requestTimeout(timeout) + } + } +} + +/** + * Create a callback that will execute after a given timeout + * + * @param {Function} timeout + * @return {Function} + */ +function requestTimeout(timeout) { + return function(callback) { + window.setTimeout(callback, timeout) + } +} + +},{}]},{},[1]);