<commit_before>svg-pan-zoom library
==========================

Simple pan/zoom solution for SVGs in HTML. It adds events listeners for mouse scroll, double-click and pan, plus it optionally offers:
  * JavaScript API for control of pan and zoom behavior
  * onPan and onZoom event handlers
  * On-screen zoom controls

It works cross-browser and supports both inline SVGs and SVGs in HTML 'object' or 'embed' elements.

Demos
-----
 Pan and zoom the SVG tiger on github pages:
 * [Single Inline SVG](http://ariutta.github.io/svg-pan-zoom/demo/inline.html)
 * [Multiple Inline SVGs](http://ariutta.github.io/svg-pan-zoom/demo/multi-instance.html)
 * [SVG Inserted with 'Embed' Element](http://ariutta.github.io/svg-pan-zoom/demo/embed.html)
 * [SVG Inserted with 'Object' Element](http://ariutta.github.io/svg-pan-zoom/demo/object.html)
 * [SVG Inserted with 'Img' Element](http://ariutta.github.io/svg-pan-zoom/demo/img.html) (These cannot be panned/zoomed.)
 * [SVG With custom controls](http://ariutta.github.io/svg-pan-zoom/demo/custom-controls.html)
 * [Resize SVG container on document resize](http://ariutta.github.io/svg-pan-zoom/demo/resize.html)
 * [Two SVGs with sinchronized zooming and panning](http://ariutta.github.io/svg-pan-zoom/demo/sinchronized.html)

How To Use
----------

1) Ensure the target SVG has a top-level 'g' element with the class 'viewport' to enable zooming for the entire SVG:

```xml
<g class="viewport"></g>
```

If the target SVG does not have this element, the library will create it.

2) Reference the [svg-pan-zoom.js file](http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js) from your HTML document. Then call the init method:

```js
var panZoomTiger = svgPanZoom('#demo-tiger');
// or
var svgElement = document.querySelector('#demo-tiger')
var panZoomTiger = svgPanZoom(svgElement)
```

First argument to function should be a CSS selector of SVG element or a DOM Element.

If you want to override the defaults, you can optionally specify one or more arguments:

```js
svgPanZoom.init('#demo-tiger', {
  panEnabled: true
, controlIconsEnabled: false
, zoomEnabled: true
, dblClickZoomEnabled: true
, zoomScaleSensitivity: 0.2
, minZoom: 0.5
, maxZoom: 10
, fit: true
, center: true
, beforeZoom: function(){}
, onZoom: function(){}
, beforePan: function(){}
, onPan: function(){}
});
```

If any arguments are specified, they must have the following value types:
* 'panEnabled' must be true or false. Default is true.
* 'controlIconsEnabled' must be true or false. Default is false.
* 'zoomEnabled' must be true or false. Default is true.
* 'dblClickZoomEnabled' must be true or false. Default is true.
* 'zoomScaleSensitivity' must be a scalar. Default is 0.2.
* 'minZoom' must be a scalar. Default is 0.5.
* 'maxZoom' must be a scalar. Default is 10.
* 'fit' must be true or false. Default is true.
* 'center' must be true or false. Default is true.
* 'beforeZoom' must be a callback function to be called before zoom changes.
* 'onZoom' must be a callback function to be called when zoom changes.
* 'beforePan' must be a callback function to be called before pan changes.
* 'onPan' must be a callback function to be called when pan changes.

`beforeZoom` and `onZoom` callbacks will be called with a float attribute. The attribute will be equal to current zoom scale of the viewport.

`beforePan` and `onPan` callbacks will be called with an object attribute. The object will have two attributes (x and y) each representing current pan (on X and Y axes) of the viewport.

Public API
----------

When you call `svgPanZoom` method it returns an object with following methods:
* enablePan
* disablePan
* isPanEnabled
* pan
* panBy
* getPan
* setBeforePan
* setOnPan
* enableZoom
* disableZoom
* isZoomEnabled
* enableControlIcons
* disableControlIcons
* isControlIconsEnabled
* enableDblClickZoom
* disableDblClickZoom
* setZoomScaleSensitivity
* setMinZoom<commit_msg>Mention isDblClickZoomEnabled and enabled zoom and pan behaviour in readme<commit_after>svg-pan-zoom library
==========================

Simple pan/zoom solution for SVGs in HTML. It adds events listeners for mouse scroll, double-click and pan, plus it optionally offers:
  * JavaScript API for control of pan and zoom behavior
  * onPan and onZoom event handlers
  * On-screen zoom controls

It works cross-browser and supports both inline SVGs and SVGs in HTML 'object' or 'embed' elements.

Demos
-----
 Pan and zoom the SVG tiger on github pages:
 * [Single Inline SVG](http://ariutta.github.io/svg-pan-zoom/demo/inline.html)
 * [Multiple Inline SVGs](http://ariutta.github.io/svg-pan-zoom/demo/multi-instance.html)
 * [SVG Inserted with 'Embed' Element](http://ariutta.github.io/svg-pan-zoom/demo/embed.html)
 * [SVG Inserted with 'Object' Element](http://ariutta.github.io/svg-pan-zoom/demo/object.html)
 * [SVG Inserted with 'Img' Element](http://ariutta.github.io/svg-pan-zoom/demo/img.html) (These cannot be panned/zoomed.)
 * [SVG With custom controls](http://ariutta.github.io/svg-pan-zoom/demo/custom-controls.html)
 * [Resize SVG container on document resize](http://ariutta.github.io/svg-pan-zoom/demo/resize.html)
 * [Two SVGs with sinchronized zooming and panning](http://ariutta.github.io/svg-pan-zoom/demo/sinchronized.html)

How To Use
----------

1) Ensure the target SVG has a top-level 'g' element with the class 'viewport' to enable zooming for the entire SVG:

```xml
<g class="viewport"></g>
```

If the target SVG does not have this element, the library will create it.

2) Reference the [svg-pan-zoom.js file](http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js) from your HTML document. Then call the init method:

```js
var panZoomTiger = svgPanZoom('#demo-tiger');
// or
var svgElement = document.querySelector('#demo-tiger')
var panZoomTiger = svgPanZoom(svgElement)
```

First argument to function should be a CSS selector of SVG element or a DOM Element.

If you want to override the defaults, you can optionally specify one or more arguments:

```js
svgPanZoom.init('#demo-tiger', {
  panEnabled: true
, controlIconsEnabled: false
, zoomEnabled: true
, dblClickZoomEnabled: true
, zoomScaleSensitivity: 0.2
, minZoom: 0.5
, maxZoom: 10
, fit: true
, center: true
, beforeZoom: function(){}
, onZoom: function(){}
, beforePan: function(){}
, onPan: function(){}
});
```

If any arguments are specified, they must have the following value types:
* 'panEnabled' must be true or false. Default is true.
* 'controlIconsEnabled' must be true or false. Default is false.
* 'zoomEnabled' must be true or false. Default is true.
* 'dblClickZoomEnabled' must be true or false. Default is true.
* 'zoomScaleSensitivity' must be a scalar. Default is 0.2.
* 'minZoom' must be a scalar. Default is 0.5.
* 'maxZoom' must be a scalar. Default is 10.
* 'fit' must be true or false. Default is true.
* 'center' must be true or false. Default is true.
* 'beforeZoom' must be a callback function to be called before zoom changes.
* 'onZoom' must be a callback function to be called when zoom changes.
* 'beforePan' must be a callback function to be called before pan changes.
* 'onPan' must be a callback function to be called when pan changes.

`beforeZoom` and `onZoom` callbacks will be called with a float attribute. The attribute will be equal to current zoom scale of the viewport.

`beforePan` and `onPan` callbacks will be called with an object attribute. The object will have two attributes (x and y) each representing current pan (on X and Y axes) of the viewport.

`panEnabled` and `zoomEnabled` are related only to user interaction. If any of this options are disabled - you still can zoom and pan via API.

Public API
----------

When you call `svgPanZoom` method it returns an object with following methods:
* enablePan
* disablePan
* isPanEnabled
* pan
* panBy
* getPan
* setBeforePan
* setOnPan
* enableZoom
* disableZoom
* isZoomEnabled
* enableControlIcons
* disableControlIcons
* isControlIconsEnabled
* enableDblClickZoom
* disableDblClickZoom
* isDblClickZoomEnabled
* setZoomScaleSensitivity
* setMinZoom
{'fraction_non_alphanumeric': 0.11296915644741731, 'fraction_numerical': 0.003468351294438251, 'mean_word_length': 4.357664233576642, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2289055', 'n_tokens_mistral': 2502, 'n_tokens_neox': 2425, 'n_words': 951}