split option panzoom into pan and zoom

README.md

@@ -480,7 +480,10 @@ $('#chartContainerId').orgchart(options);
       <td>data</td><td>json or string</td><td>yes</td><td></td><td>datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.</td>
     </tr>
     <tr>
-      <td>panzoom</td><td>boolean</td><td>no</td><td>false</td><td>Users could pan the orgchart by mouse drag&drop, zoomin/zoomout the orgchart by mouse wheel if they enable this option.</td>
+      <td>pan</td><td>boolean</td><td>no</td><td>false</td><td>Users could pan the orgchart by mouse drag&drop if they enable this option.</td>
+    </tr>
+    <tr>
+      <td>zoom</td><td>boolean</td><td>no</td><td>false</td><td>Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option.</td>
     </tr>
     <tr>
       <td>direction</td><td>string</td><td>no</td><td>"t2b"</td><td>The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").</td>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.0.9.6",
+  "version": "1.0.9.8",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <[email protected]>"

dist/js/jquery.orgchart.js

@@ -38,7 +38,8 @@
       'parentNodeSymbol': 'fa-users',
       'draggable': false,
       'direction': 't2b',
-      'panzoom': false
+      'pan': false,
+      'zoom': false
     };
 
     switch (options) {
@@ -124,7 +125,7 @@
       $chartContainer.append($exportBtn).append(downloadBtn);
     }
 
-    if (opts.panzoom) {
+    if (opts.pan) {
       $chartContainer.css('overflow', 'hidden');
       $chart.on('mousedown',function(e){
         var $this = $(this);
@@ -179,6 +180,9 @@
           $(this).off('mousemove');
         }
       });
+    }
+
+    if (opts.zoom) {
       $chartContainer.on('wheel', function(event) {
         event.preventDefault();
         var lastTf = $chart.css('transform');

examples/js/jquery.orgchart.js

@@ -38,7 +38,8 @@
       'parentNodeSymbol': 'fa-users',
       'draggable': false,
       'direction': 't2b',
-      'panzoom': false
+      'pan': false,
+      'zoom': false
     };
 
     switch (options) {
@@ -124,7 +125,7 @@
       $chartContainer.append($exportBtn).append(downloadBtn);
     }
 
-    if (opts.panzoom) {
+    if (opts.pan) {
       $chartContainer.css('overflow', 'hidden');
       $chart.on('mousedown',function(e){
         var $this = $(this);
@@ -179,6 +180,9 @@
           $(this).off('mousemove');
         }
       });
+    }
+
+    if (opts.zoom) {
       $chartContainer.on('wheel', function(event) {
         event.preventDefault();
         var lastTf = $chart.css('transform');

examples/pan-zoom/scripts.js

@@ -33,7 +33,8 @@
       'data' : datascource,
       'depth': 2,
       'nodeContent': 'title',
-      'panzoom': true
+      'pan': true,
+      'zoom': true
     });
 
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.0.9.6",
+  "version": "1.0.9.8",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [