diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 52c592cc30..ab6984db6e 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -382,6 +382,7 @@ All definitions files include a header with the author and editors, so at some p * [Store.js](https://github.com/marcuswestin/store.js/) (by [Vincent Bortone](https://github.com/vbortone)) * [stylus](https://github.com/LearnBoost/stylus) (by [Maxime LUCE](https://github.com/SomaticIT)) * [Sugar](http://sugarjs.com/) (by [Josh Baldwin](https://github.com/jbaldwin/)) +* [svg-pan-zoom] (https://github.com/ariutta/svg-pan-zoom) (by [Chintan Shah] (https://github.com/Promact)) * [swfobject](https://code.google.com/p/swfobject/) (by [rou](https://github.com/rou)) * [Swiper](http://www.idangero.us/sliders/swiper) (by [Sebastián Galiano](https://github.com/sgaliano)) * [SwipeView](http://cubiq.org/swipeview) (by [Boris Yankov](https://github.com/borisyankov)) diff --git a/svg-pan-zoom/svg-pan-zoom-test.ts b/svg-pan-zoom/svg-pan-zoom-test.ts new file mode 100644 index 0000000000..2cb34b7c5c --- /dev/null +++ b/svg-pan-zoom/svg-pan-zoom-test.ts @@ -0,0 +1,77 @@ +/// + +var svgPanZoomOptions : SvgPanZoom.OptionConfig = { + 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.ISvgPanZoom = svgPanZoom('#demo-tiger'); + +var svgElement = document.querySelector('#demo-tiger'); +panZoomTiger = svgPanZoom(svgElement); + +panZoomTiger = svgPanZoom('#demo-tiger', { + panEnabled: true + , controlIconsEnabled: false + , zoomEnabled: true + , dblClickZoomEnabled: true + , zoomScaleSensitivity: 0.2 + , minZoom: 0.5 + , maxZoom: 10 + , fit: true + , center: true + , refreshRate: 'auto' + , beforeZoom: function(){} + , onZoom: function(){} + , beforePan: function(){} + , onPan: function(){} +}); + +// 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}); + +// 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.resetZoom(); + +panZoomTiger.enablePan(); +panZoomTiger.disablePan(); + +panZoomTiger.enableZoom(); +panZoomTiger.disableZoom(); + +panZoomTiger.fit(); +panZoomTiger.center(); + +panZoomTiger.resize(); // update SVG cached size and controls positions +panZoomTiger.fit(true); // dropCache and fit +panZoomTiger.center(true); // dropCache and center + +delete panZoomTiger; \ No newline at end of file diff --git a/svg-pan-zoom/svg-pan-zoom.d.ts b/svg-pan-zoom/svg-pan-zoom.d.ts new file mode 100644 index 0000000000..75f223d7e2 --- /dev/null +++ b/svg-pan-zoom/svg-pan-zoom.d.ts @@ -0,0 +1,151 @@ +// Type definitions for svg-pan-zoom v2.3.9 +// Project: https://github.com/ariutta/svg-pan-zoom +// Definitions by: Chintan Shah +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module SvgPanZoom { + + interface OptionConfig { + panEnabled?: boolean; // enable or disable panning (default enabled) + controlIconsEnabled?: boolean; // insert icons to give user an option in addition to mouse events to control pan/zoom (default disabled) + zoomEnabled?: boolean; // enable or disable zooming (default enabled) + dblClickZoomEnabled?: boolean; // enable or disable zooming by double clicking (default enabled) + zoomScaleSensitivity?: number; // Zoom sensitivity + minZoom?: number; // Minimum Zoom level + maxZoom?: number; // Maximum Zoom level + fit?: boolean; // enable or disable viewport fit in SVG (default true) + center?: boolean; // enable or disable viewport centering in SVG (default true) + beforeZoom?: (scale:number) => void; + onZoom?: (scale:number) => void; + beforePan?: (point:IPoint) => void; + onPan?: (point:IPoint) => void; + refreshRate?: any; // in hz + } + + interface IPoint { + x: number; + y: number; + } + + interface ISvgPanZoom { + /** + * Creates a new SvgPanZoom instance with given element selector. + * + * @param svg selector of the tag on which it is to be applied. + * @param options provides customization options at the initialization of the object. + */ + (svg:any, options?:OptionConfig): ISvgPanZoom; + + /** + * Enables Panning on svg element + */ + enablePan(): void; + + /** + * Disables panning on svg element + */ + disablePan(): void; + + /** + * Checks if Panning is enabled or not + * @return true or false based on panning settings + */ + isPanEnabled(): boolean; + + + setBeforePan(fn: (point:IPoint)=> void): void; + + setOnPan(fn: (point:IPoint)=> void): void; + + enableZoom(): void; + + disableZoom(): void; + + isZoomEnabled(): boolean; + + enableControlIcons(): void; + + disableControlIcons(): void; + + isControlIconsEnabled(): boolean; + + enableDblClickZoom(): void; + + disableDblClickZoom(): void; + + setZoomScaleSensitivity(scale: number): void; + + setMinZoom(zoom: number): void; + + setMaxZoom(zoom: number): void; + + setBeforeZoom(fn: (scale: number) => void): void; + + setOnZoom(fn: (scale: number) => void): void; + + zoom(scale: number):void; + + zoomIn(): void; + + zoomOut(): void; + + zoomBy(scale: number): void; + + resetZoom(): void; + + /** + * Get zoom scale/level + * + * @return {float} zoom scale + */ + getZoom(): number; + + /** + * Adjust viewport size (only) so it will fit in SVG + * Does not center image + * + * @param {bool} dropCache drop viewBox cache and recalculate SVG's viewport sizes. Default false + */ + fit(dropCache?: boolean): void; + + /** + * Adjust viewport pan (only) so it will be centered in SVG + * Does not zoom/fit image + * + * @param {bool} dropCache drop viewBox cache and recalculate SVG's viewport sizes. Default false + */ + center(dropCache?: boolean): void; + + /** + * Recalculates cached svg dimensions and controls position + */ + resize(): void; + + /** + * Pan to a rendered position + * + * @param {object} point {x: 0, y: 0} + */ + pan(point: IPoint): void; + + /** + * Relatively pan the graph by a specified rendered position vector + * + * @param {object} point {x: 0, y: 0} + */ + panBy(point: IPoint): void; + + /** + * Get pan vector + * + * @return {object} {x: 0, y: 0} + */ + getPan(): IPoint; + + zoomAtPoint(scale:number, point:IPoint): boolean; + + zoomAtPointBy(scale:number, point:IPoint): boolean; + } +} + +declare var svgPanZoom:SvgPanZoom.ISvgPanZoom; \ No newline at end of file