Merge pull request #230 from ariutta/fix-typescript

fix: typescript definition, add getSizes

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-pan-zoom",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "homepage": "https://github.com/ariutta/svg-pan-zoom",
   "authors": [
     "Andrea Leofreddi <a.leofreddi@itcharm.com>",

dist/svg-pan-zoom.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for svg-pan-zoom v3.3.0
+// Type definitions for svg-pan-zoom v3.4.1
 // Project: https://github.com/ariutta/svg-pan-zoom
 // Definitions by: César Vidril <https://github.com/Yimiprod>
 // Definitions: https://github.com/ariutta/svg-pan-zoom
@@ -28,14 +28,14 @@ declare namespace SvgPanZoom {
   }
 
   interface CustomEventHandler {
-    haltEventListeners: string[],
-    init: (options: CustomEventOptions) => void,
-    destroy: Function
+    init: (options: CustomEventOptions) => void;
+    haltEventListeners: string[];
+    destroy: Function;
   }
 
   interface CustomEventOptions {
-    svgElement: SVGSVGElement,
-    instance: Instance
+    svgElement: SVGSVGElement;
+    instance: Instance;
   }
 
   interface Point {
@@ -48,6 +48,16 @@ declare namespace SvgPanZoom {
     y: number|boolean;
   }
 
+  interface Sizes {
+    width: number;
+    height: number;
+    realZoom: number;
+    viewBox: {
+      width: number;
+      height: number;
+    }
+  }
+
   interface Instance {
     /**
      * Creates a new SvgPanZoom instance with given element selector.
@@ -192,6 +202,13 @@ declare namespace SvgPanZoom {
      */
     resize(): Instance;
 
+    /**
+     * Get all calculate svg dimensions
+     *
+     * @return {Object} {width: 0, height: 0, realZoom: 0, viewBox: { width: 0, height: 0 }}
+     */
+    getSizes(): Sizes;
+
     reset(): Instance;
 
     /**

dist/svg-pan-zoom.js

@@ -1,4 +1,4 @@
-// svg-pan-zoom v3.4.0
+// svg-pan-zoom v3.4.1
 // 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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var svgPanZoom = require('./svg-pan-zoom.js');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-pan-zoom",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "main": "dist/svg-pan-zoom.js",
   "types": "dist/svg-pan-zoom.d.ts",
   "browser": "src/browserify.js",

tests/test_typescript.ts

@@ -0,0 +1,117 @@
+var svgPanZoomOptions : SvgPanZoom.Options = {
+  panEnabled: true // enable or disable panning (default enabled)
+  , controlIconsEnabled: false // insert icons to give user an option in addition to mouse events to control pan/zoom (default disabled)
+  , zoomEnabled: true // enable or disable zooming (default enabled)
+  , dblClickZoomEnabled: true // enable or disable zooming by double clicking (default enabled)
+  , zoomScaleSensitivity: 0.2 // Zoom sensitivity
+  , minZoom: 0.5 // Minimum Zoom level
+  , maxZoom: 10 // Maximum Zoom level
+  , fit: true // enable or disable viewport fit in SVG (default true)
+  , center: true // enable or disable viewport centering in SVG (default true)
+  , beforeZoom: null
+  , onZoom: function(){}
+  , beforePan: null
+  , onPan: function(){}
+  , refreshRate: 60 // in hz
+};
+
+var panZoomTiger: SvgPanZoom.Instance = svgPanZoom('#demo-tiger');
+
+var svgElement = <SVGElement>document.querySelector('#demo-tiger');
+panZoomTiger = svgPanZoom(svgElement);
+
+panZoomTiger = svgPanZoom('#demo-tiger', {
+  panEnabled: true
+  , controlIconsEnabled: false
+  , zoomEnabled: true
+  , dblClickZoomEnabled: true
+  , mouseWheelZoomEnabled: true
+  , preventMouseEventsDefault: true
+  , zoomScaleSensitivity: 0.2
+  , minZoom: 0.5
+  , maxZoom: 10
+  , fit: true
+  , contain: false
+  , center: true
+  , refreshRate: 'auto'
+  , beforeZoom: function(oldScale, newScale){ return true; }
+  , onZoom: function(newScale){}
+  , beforePan: function(oldPan, newPan){ return {x: true, y: true}; }
+  , customEventsHandler: null
+  , eventsListenerElement: null
+});
+
+/**
+ * PAN
+ */
+// Pan to rendered point x = 50, y = 50
+panZoomTiger.pan({x: 50, y: 50});
+
+// Pan by x = 50, y = 50 of rendered pixels
+panZoomTiger.panBy({x: 50, y: 50});
+
+panZoomTiger.getPan();
+
+panZoomTiger.resetPan();
+
+panZoomTiger.enablePan();
+panZoomTiger.disablePan();
+
+panZoomTiger.isPanEnabled();
+
+/**
+ * ZOOM
+ */
+// Set zoom level to 2
+panZoomTiger.zoom(2);
+
+// Zoom by 130%
+panZoomTiger.zoomBy(1.3);
+
+// Set zoom level to 2 at point
+panZoomTiger.zoomAtPoint(2, {x: 50, y: 50});
+
+// Zoom by 130% at point
+panZoomTiger.zoomAtPointBy(1.3, {x: 50, y: 50});
+
+panZoomTiger.zoomIn();
+panZoomTiger.zoomOut();
+
+panZoomTiger.getZoom();
+
+panZoomTiger.resetZoom();
+
+panZoomTiger.enableZoom();
+panZoomTiger.disableZoom();
+
+panZoomTiger.isZoomEnabled();
+
+/**
+ * controls
+ */
+panZoomTiger.enableControlIcons();
+panZoomTiger.disableControlIcons();
+panZoomTiger.isControlIconsEnabled();
+
+panZoomTiger.enableDblClickZoom();
+panZoomTiger.disableDblClickZoom();
+panZoomTiger.isDblClickZoomEnabled();
+
+panZoomTiger.enableMouseWheelZoom();
+panZoomTiger.disableMouseWheelZoom();
+panZoomTiger.isMouseWheelZoomEnabled();
+
+panZoomTiger.center();
+panZoomTiger.fit();
+panZoomTiger.contain();
+
+panZoomTiger.resize(); // update SVG cached size and controls positions
+panZoomTiger.getSizes();
+
+panZoomTiger.updateBBox();
+
+panZoomTiger.fit().center(); // can chain method
+
+panZoomTiger.destroy(); // destroy instance
+
+delete panZoomTiger;

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": false,
+    "baseUrl": "./",
+    "typeRoots": [
+      "./"
+    ],
+    "types": [],
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "files": [
+    "dist/svg-pan-zoom.d.ts",
+    "tests/test_typescript.ts"
+  ]
+}