fix-bug: export doesn't work well when chart-container has overflow:h…

…idden
dabeng · Jun 26, 2016 · af2b7ab · af2b7ab
1 parent 1dad907
commit af2b7ab
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.0.9.7",
+  "version": "1.1.0",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <[email protected]>"

diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
@@ -112,11 +112,24 @@
           } else {
             $mask.removeClass('hidden');
           }
-          html2canvas($chartContainer.find('.orgchart:visible').get(0), {
+          var sourceChart = $chartContainer.addClass('canvasContainer').find('.orgchart:visible').get(0);
+          var flag = opts.direction === 'l2r' || opts.direction === 'r2l';
+          html2canvas(sourceChart, {
+            'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
+            'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
+            'onclone': function(cloneDoc) {
+              $(cloneDoc).find('.canvasContainer').css('overflow', 'visible')
+                .find('.orgchart').css('transform', '');
+            },
             'onrendered': function(canvas) {
               $chartContainer.find('.mask').addClass('hidden')
                 .end().find('.oc-download-btn').attr('href', canvas.toDataURL())[0].click();
             }
+          })
+          .then(function() {
+            $chartContainer.removeClass('canvasContainer');
+          }, function() {
+            $chartContainer.removeClass('canvasContainer');
           });
         }
       });

diff --git a/examples/js/jquery.orgchart.js b/examples/js/jquery.orgchart.js
@@ -112,11 +112,24 @@
           } else {
             $mask.removeClass('hidden');
           }
-          html2canvas($chartContainer.find('.orgchart:visible').get(0), {
+          var sourceChart = $chartContainer.addClass('canvasContainer').find('.orgchart:visible').get(0);
+          var flag = opts.direction === 'l2r' || opts.direction === 'r2l';
+          html2canvas(sourceChart, {
+            'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
+            'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
+            'onclone': function(cloneDoc) {
+              $(cloneDoc).find('.canvasContainer').css('overflow', 'visible')
+                .find('.orgchart').css('transform', '');
+            },
             'onrendered': function(canvas) {
               $chartContainer.find('.mask').addClass('hidden')
                 .end().find('.oc-download-btn').attr('href', canvas.toDataURL())[0].click();
             }
+          })
+          .then(function() {
+            $chartContainer.removeClass('canvasContainer');
+          }, function() {
+            $chartContainer.removeClass('canvasContainer');
           });
         }
       });

diff --git a/examples/pan-zoom/scripts.js b/examples/pan-zoom/scripts.js
@@ -31,7 +31,6 @@
 
     $('#chart-container').orgchart({
       'data' : datascource,
-      'depth': 2,
       'nodeContent': 'title',
       'pan': true,
       'zoom': true

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.0.9.7",
+  "version": "1.1.0",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [