* improve treemap UI.

dist/lib/treemap/zui.treemap.css

@@ -81,9 +81,11 @@ a.treemap-node-wrapper:hover {
   background-color: #fff;
   border-radius: 5px;
   opacity: 0;
-  -webkit-transition: opacity .2s;
-       -o-transition: opacity .2s;
-          transition: opacity .2s;
+  -webkit-transition: opacity .2s, -webkit-transform .1s;
+       -o-transition: opacity .2s, -o-transform .1s;
+          transition: opacity .2s, -webkit-transform .1s;
+          transition: opacity .2s, transform .1s;
+          transition: opacity .2s, transform .1s, -webkit-transform .1s, -o-transform .1s;
   }
 .treemap-node-fold-icon:before {
   min-width: 10px;
@@ -111,3 +113,7 @@ a.treemap-node-wrapper:hover {
 .treemap-node.collapsed .treemap-node-fold-icon:before {
   content: '\e6f1';
   }
+.treemap-node.tree-node-collapsing > .treemap-line,
+.treemap-node.tree-node-collapsing > .treemap-node-children {
+  visibility: hidden;
+  }

dist/lib/treemap/zui.treemap.js

@@ -123,13 +123,17 @@
         });
         if(options.foldable) {
             $nodes.on('click', options.clickNodeToFold ? '.treemap-node-wrapper' : '.treemap-node-fold-icon', function() {
-                $(this).closest('.treemap-node').toggleClass('collapsed');
+                var $node = $(this).closest('.treemap-node').addClass('tree-node-collapsing');
+                $node.toggleClass('collapsed').find('[data-toggle="tooltip"]').tooltip('hide');
                 that.drawLines();
+                setTimeout(function() {
+                    $node.removeClass('tree-node-collapsing');
+                }, 200);
             });
         }
 
         $nodes.on('click', '.treemap-node-wrapper', function() {
-            var $node = $(this).closet('.treemap-node');
+            var $node = $(this).closest('.treemap-node');
             that.callEvent('onNodeClick', $node.data('node'));
         });
     };

dist/lib/treemap/zui.treemap.min.css

@@ -3,4 +3,4 @@
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2017 cnezsoft.com; Licensed MIT
- */.treemap-data{text-align:left}.treemap-nodes{position:relative;display:table;padding:10px;margin-right:auto;margin-left:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none}.treemap-node{display:table-cell;vertical-align:top}.treemap-node-wrapper{position:relative;z-index:5;display:inline-block;padding:5px 10px;border:1px solid grey;border-radius:1px}a.treemap-node-wrapper{color:#353535;cursor:pointer}a.treemap-node-wrapper:active,a.treemap-node-wrapper:focus,a.treemap-node-wrapper:hover{color:#3280fc;text-decoration:none;background-color:#ebf2f9;border-color:#3280fc}.treemap-node-root>.treemap-node-wrapper{background-color:rgba(0,0,0,.1)}.treemap-node-children{display:table;margin-top:20px auto 0}.treemap-line-bottom,.treemap-line-top{position:absolute;top:100%;left:50%;margin-left:-1px;border-right:none!important;border-bottom:none!important}.treemap-line-top{top:0}.treemap-node>.treemap-line{position:absolute;right:0;left:0;z-index:1;border-right:none!important;border-bottom:none!important}.treemap-node-fold-icon{position:absolute;top:-6px;left:-5px;z-index:10;display:block!important;width:10px;height:10px;line-height:10px;background-color:#fff;border-radius:5px;opacity:0;-webkit-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.treemap-node-fold-icon:before{min-width:10px;content:'\e6f2'}.treemap-node-wrapper:hover .treemap-node-fold-icon{opacity:1}.treemap-node.collapsed .treemap-line-bottom,.treemap-node.collapsed>.treemap-line{border-color:transparent!important}.treemap-node.collapsed>.treemap-node-children{display:none}.treemap-node.collapsed .treemap-node-fold-icon{top:-6px;color:grey;opacity:1;-webkit-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.treemap-node.collapsed .treemap-node-fold-icon:before{content:'\e6f1'}
\ No newline at end of file
+ */.treemap-data{text-align:left}.treemap-nodes{position:relative;display:table;padding:10px;margin-right:auto;margin-left:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none}.treemap-node{display:table-cell;vertical-align:top}.treemap-node-wrapper{position:relative;z-index:5;display:inline-block;padding:5px 10px;border:1px solid grey;border-radius:1px}a.treemap-node-wrapper{color:#353535;cursor:pointer}a.treemap-node-wrapper:active,a.treemap-node-wrapper:focus,a.treemap-node-wrapper:hover{color:#3280fc;text-decoration:none;background-color:#ebf2f9;border-color:#3280fc}.treemap-node-root>.treemap-node-wrapper{background-color:rgba(0,0,0,.1)}.treemap-node-children{display:table;margin-top:20px auto 0}.treemap-line-bottom,.treemap-line-top{position:absolute;top:100%;left:50%;margin-left:-1px;border-right:none!important;border-bottom:none!important}.treemap-line-top{top:0}.treemap-node>.treemap-line{position:absolute;right:0;left:0;z-index:1;border-right:none!important;border-bottom:none!important}.treemap-node-fold-icon{position:absolute;top:-6px;left:-5px;z-index:10;display:block!important;width:10px;height:10px;line-height:10px;background-color:#fff;border-radius:5px;opacity:0;-webkit-transition:opacity .2s,-webkit-transform .1s;-o-transition:opacity .2s,-o-transform .1s;transition:opacity .2s,-webkit-transform .1s;transition:opacity .2s,transform .1s;transition:opacity .2s,transform .1s,-webkit-transform .1s,-o-transform .1s}.treemap-node-fold-icon:before{min-width:10px;content:'\e6f2'}.treemap-node-wrapper:hover .treemap-node-fold-icon{opacity:1}.treemap-node.collapsed .treemap-line-bottom,.treemap-node.collapsed>.treemap-line{border-color:transparent!important}.treemap-node.collapsed>.treemap-node-children{display:none}.treemap-node.collapsed .treemap-node-fold-icon{top:-6px;color:grey;opacity:1;-webkit-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.treemap-node.collapsed .treemap-node-fold-icon:before{content:'\e6f1'}.treemap-node.tree-node-collapsing>.treemap-line,.treemap-node.tree-node-collapsing>.treemap-node-children{visibility:hidden}
\ No newline at end of file

dist/lib/treemap/zui.treemap.min.js

@@ -4,4 +4,4 @@
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2017 cnezsoft.com; Licensed MIT
  */
-!function(e,t,o,a,r){"use strict";var n="zui.treemap",d={data:[],cableWidth:1,cableColor:"#808080",cableStyle:"solid",rowSpace:30,nodeSpace:20,listenNodeResize:!0,nodeTemplate:'<div class="treemap-node"><a class="treemap-node-wrapper"></a></div>',foldable:!0,clickNodeToFold:!0},l=function(t){return t.children("li,.treemap-data-item").map(function(){var t=e(this),o=t.data(),a=t.children(".text"),r=t.children(".content"),n=t.children("ul,.treemap-data-list");if(a.length&&(o.text=a.text()),r.length&&(o.html=r.html()),n.length&&(o.children=l(n)),!o.text&&!o.html){var d=t.children(":not(ul,.treemap-data-list)"),i=t.clone();i.find("ul,.treemap-data-list").remove(),d.length?o.html=i.html():o.text=i.text()}return o.id||(o.id=e.zui.uuid()),o}).get()},i=function(t,o){var a=e(t);o=e.extend({},d,a.data(),o);var r=o.data||[];if(!r.length){var n=a.children(".treemap-data");n.length&&(r=l(n.hide()))}var i=a.children(".treemap-nodes");i.length||(i=e('<div class="treemap-nodes" unselectable="on"/>').appendTo(a));var s=this;s.$=a,s.$nodes=i,s.data=e.isArray(r)?r:[r],s.options=o,s.offsetX=0,s.offsetY=0,s.scale=o.scale||1,s.render(),i.on("resize",".treemap-node-wrapper",function(){s.delayDrawLines()}),o.foldable&&i.on("click",o.clickNodeToFold?".treemap-node-wrapper":".treemap-node-fold-icon",function(){e(this).closest(".treemap-node").toggleClass("collapsed"),s.drawLines()}),i.on("click",".treemap-node-wrapper",function(){var t=e(this).closet(".treemap-node");s.callEvent("onNodeClick",t.data("node"))})};i.prototype.render=function(e){var t=this;t.data=e||t.data,t.data&&(t.createNodes(),t.drawLines()),t.callEvent("afterRender")},i.prototype.createNodes=function(t,o,a){var r=this,d=r.options,l=d.rowSpace,i=r.$nodes;o||(i.find(".treemap-node-wrapper").off("resize."+n),i.empty()),d.sort&&t.sort(e.isFunction(d.sort)?d.sort:function(e,t){return(e.order||0)-t.order});var s=null;t=t||r.data,e.each(t||r.data,function(p,c){"string"==typeof c&&(c={html:c},t[p]=c);var h=e.isFunction(d.nodeTemplate)?d.nodeTemplate(c,r):e(d.nodeTemplate),f=h.find(".treemap-node-wrapper");f.length||(f=e('<div class="treemap-node-wrapper"/>').appendTo(h));var m=c.children,u=m&&m.length;c.isOnlyOneChild=1===u,c.idx=p;var g=o?o.row+1:0;h.toggleClass("treemap-node-has-child",!!u).toggleClass("treemap-node-has-parent",!!o).toggleClass("treemap-node-one-child",1===u).toggleClass("collapsed",!!c.collapsed&&"false"!==c.collapsed).toggleClass("treemap-node-root",!g).attr("data-id",c.id).data("node",c),c.row=g;var v=e.extend({},d.nodeStyle,c.style);c.textColor&&(v.color=c.textColor),c.color&&(v.backgroundColor=c.color),c.border&&(v.border=c.border);var w=e.extend({},c.attrs,{title:c.caption});if(c.tooltip&&(w["data-toggle"]="tooltip",w.title=c.tooltip),f.attr(w).css(v),s&&h.css("padding-left",d.nodeSpace),c.html?f.append(c.html):c.text&&f.text(c.text),h.appendTo(o?o.$children:i),c.bounds={width:f.outerWidth(),height:f.outerHeight()},s&&(s.next=c),c.prev=s,c.parent=o,c.$=h,c.$wrapper=f,u){var b=h.find(".treemap-node-children");b.length||(b=e('<div class="treemap-node-children"/>').appendTo(h)),b.css("margin-top",l),c.$children=b,r.createNodes(m,c)}d.listenNodeResize&&f.on("resize."+n,function(){c.bounds.width=f.outerWidth(),c.bounds.height=f.outerHeight(),r.delayDrawLines()}),s=c,a&&a(h,c)}),o||i.find('[data-toggle="tooltip"]').tooltip(d.tooltip)},i.prototype.delayDrawLines=function(){var e=this;clearTimeout(e.delayDrawLinesTask),e.delayDrawLinesTask=setTimeout(function(){e.drawLines()},10)},i.prototype.drawLines=function(t,o){var r=this,n=r.options,d=n.rowSpace,l={};n.cableWidth&&(l.borderWidth=n.cableWidth),n.cableStyle&&(l.borderStyle=n.cableStyle),n.cableColor&&(l.borderColor=n.cableColor);var i=a.round(d/2),s=r.$nodes.offset().left;e.each(t||r.data,function(t,p){var c=p.$wrapper,h=p.children,f=e.extend({height:i,top:-i-1,left:a.round((c.outerWidth()-l.borderWidth)/2)},l);if(o&&!o.isOnlyOneChild){var m=c.find(".treemap-line-top");m.length||(m=e('<div class="treemap-line-top"/>').appendTo(c)),m.css(f)}if(h&&h.length){f.top=c.outerHeight()-1,p.isOnlyOneChild&&(f.height=d);var u=c.find(".treemap-line-bottom");if(u.length||(u=e('<div class="treemap-line-bottom"/>').appendTo(c),n.foldable&&u.append('<i class="treemap-node-fold-icon icon" style="transform: translate(-'+a.floor(f.borderWidth/2)+"px, "+i+'px)"/>')),u.css(f),r.drawLines(h,p),h.length>1){var g=h[0],v=h[h.length-1],w=p.$.children(".treemap-line");w.length||(w=e('<div class="treemap-line"/>').insertAfter(c));var b=a.round(g.$wrapper.offset().left-s+g.bounds.width/2);w.css(e.extend({marginTop:i,left:b,width:v.$wrapper.offset().left-s-b+v.bounds.width/2},l))}}}),o||r.callEvent("afterDrawLines")},i.prototype.callEvent=function(t,o){var a=this;if(e.isArray(o)||(o=[o]),a.$.trigger(t,o),e.isFunction(a.options[t]))return a.options[t].apply(a,o)},i.DEFAULTS=d,i.NAME=n,e.fn.treemap=function(t,o){return this.each(function(){var a=e(this),r=a.data(n),d="object"==typeof t&&t;r||a.data(n,r=new i(this,d)),"string"==typeof t&&r[t](o)})},e.fn.treemap.Constructor=i}(jQuery,window,document,Math,void 0);
\ No newline at end of file
+!function(e,t,o,a,r){"use strict";var n="zui.treemap",l={data:[],cableWidth:1,cableColor:"#808080",cableStyle:"solid",rowSpace:30,nodeSpace:20,listenNodeResize:!0,nodeTemplate:'<div class="treemap-node"><a class="treemap-node-wrapper"></a></div>',foldable:!0,clickNodeToFold:!0},d=function(t){return t.children("li,.treemap-data-item").map(function(){var t=e(this),o=t.data(),a=t.children(".text"),r=t.children(".content"),n=t.children("ul,.treemap-data-list");if(a.length&&(o.text=a.text()),r.length&&(o.html=r.html()),n.length&&(o.children=d(n)),!o.text&&!o.html){var l=t.children(":not(ul,.treemap-data-list)"),i=t.clone();i.find("ul,.treemap-data-list").remove(),l.length?o.html=i.html():o.text=i.text()}return o.id||(o.id=e.zui.uuid()),o}).get()},i=function(t,o){var a=e(t);o=e.extend({},l,a.data(),o);var r=o.data||[];if(!r.length){var n=a.children(".treemap-data");n.length&&(r=d(n.hide()))}var i=a.children(".treemap-nodes");i.length||(i=e('<div class="treemap-nodes" unselectable="on"/>').appendTo(a));var s=this;s.$=a,s.$nodes=i,s.data=e.isArray(r)?r:[r],s.options=o,s.offsetX=0,s.offsetY=0,s.scale=o.scale||1,s.render(),i.on("resize",".treemap-node-wrapper",function(){s.delayDrawLines()}),o.foldable&&i.on("click",o.clickNodeToFold?".treemap-node-wrapper":".treemap-node-fold-icon",function(){var t=e(this).closest(".treemap-node").addClass("tree-node-collapsing");t.toggleClass("collapsed").find('[data-toggle="tooltip"]').tooltip("hide"),s.drawLines(),setTimeout(function(){t.removeClass("tree-node-collapsing")},200)}),i.on("click",".treemap-node-wrapper",function(){var t=e(this).closest(".treemap-node");s.callEvent("onNodeClick",t.data("node"))})};i.prototype.render=function(e){var t=this;t.data=e||t.data,t.data&&(t.createNodes(),t.drawLines()),t.callEvent("afterRender")},i.prototype.createNodes=function(t,o,a){var r=this,l=r.options,d=l.rowSpace,i=r.$nodes;o||(i.find(".treemap-node-wrapper").off("resize."+n),i.empty()),l.sort&&t.sort(e.isFunction(l.sort)?l.sort:function(e,t){return(e.order||0)-t.order});var s=null;t=t||r.data,e.each(t||r.data,function(p,c){"string"==typeof c&&(c={html:c},t[p]=c);var h=e.isFunction(l.nodeTemplate)?l.nodeTemplate(c,r):e(l.nodeTemplate),f=h.find(".treemap-node-wrapper");f.length||(f=e('<div class="treemap-node-wrapper"/>').appendTo(h));var m=c.children,u=m&&m.length;c.isOnlyOneChild=1===u,c.idx=p;var g=o?o.row+1:0;h.toggleClass("treemap-node-has-child",!!u).toggleClass("treemap-node-has-parent",!!o).toggleClass("treemap-node-one-child",1===u).toggleClass("collapsed",!!c.collapsed&&"false"!==c.collapsed).toggleClass("treemap-node-root",!g).attr("data-id",c.id).data("node",c),c.row=g;var v=e.extend({},l.nodeStyle,c.style);c.textColor&&(v.color=c.textColor),c.color&&(v.backgroundColor=c.color),c.border&&(v.border=c.border);var w=e.extend({},c.attrs,{title:c.caption});if(c.tooltip&&(w["data-toggle"]="tooltip",w.title=c.tooltip),f.attr(w).css(v),s&&h.css("padding-left",l.nodeSpace),c.html?f.append(c.html):c.text&&f.text(c.text),h.appendTo(o?o.$children:i),c.bounds={width:f.outerWidth(),height:f.outerHeight()},s&&(s.next=c),c.prev=s,c.parent=o,c.$=h,c.$wrapper=f,u){var b=h.find(".treemap-node-children");b.length||(b=e('<div class="treemap-node-children"/>').appendTo(h)),b.css("margin-top",d),c.$children=b,r.createNodes(m,c)}l.listenNodeResize&&f.on("resize."+n,function(){c.bounds.width=f.outerWidth(),c.bounds.height=f.outerHeight(),r.delayDrawLines()}),s=c,a&&a(h,c)}),o||i.find('[data-toggle="tooltip"]').tooltip(l.tooltip)},i.prototype.delayDrawLines=function(){var e=this;clearTimeout(e.delayDrawLinesTask),e.delayDrawLinesTask=setTimeout(function(){e.drawLines()},10)},i.prototype.drawLines=function(t,o){var r=this,n=r.options,l=n.rowSpace,d={};n.cableWidth&&(d.borderWidth=n.cableWidth),n.cableStyle&&(d.borderStyle=n.cableStyle),n.cableColor&&(d.borderColor=n.cableColor);var i=a.round(l/2),s=r.$nodes.offset().left;e.each(t||r.data,function(t,p){var c=p.$wrapper,h=p.children,f=e.extend({height:i,top:-i-1,left:a.round((c.outerWidth()-d.borderWidth)/2)},d);if(o&&!o.isOnlyOneChild){var m=c.find(".treemap-line-top");m.length||(m=e('<div class="treemap-line-top"/>').appendTo(c)),m.css(f)}if(h&&h.length){f.top=c.outerHeight()-1,p.isOnlyOneChild&&(f.height=l);var u=c.find(".treemap-line-bottom");if(u.length||(u=e('<div class="treemap-line-bottom"/>').appendTo(c),n.foldable&&u.append('<i class="treemap-node-fold-icon icon" style="transform: translate(-'+a.floor(f.borderWidth/2)+"px, "+i+'px)"/>')),u.css(f),r.drawLines(h,p),h.length>1){var g=h[0],v=h[h.length-1],w=p.$.children(".treemap-line");w.length||(w=e('<div class="treemap-line"/>').insertAfter(c));var b=a.round(g.$wrapper.offset().left-s+g.bounds.width/2);w.css(e.extend({marginTop:i,left:b,width:v.$wrapper.offset().left-s-b+v.bounds.width/2},d))}}}),o||r.callEvent("afterDrawLines")},i.prototype.callEvent=function(t,o){var a=this;if(e.isArray(o)||(o=[o]),a.$.trigger(t,o),e.isFunction(a.options[t]))return a.options[t].apply(a,o)},i.DEFAULTS=l,i.NAME=n,e.fn.treemap=function(t,o){return this.each(function(){var a=e(this),r=a.data(n),l="object"==typeof t&&t;r||a.data(n,r=new i(this,l)),"string"==typeof t&&r[t](o)})},e.fn.treemap.Constructor=i}(jQuery,window,document,Math,void 0);
\ No newline at end of file

src/js/treemap.js

@@ -116,13 +116,17 @@
         });
         if(options.foldable) {
             $nodes.on('click', options.clickNodeToFold ? '.treemap-node-wrapper' : '.treemap-node-fold-icon', function() {
-                $(this).closest('.treemap-node').toggleClass('collapsed');
+                var $node = $(this).closest('.treemap-node').addClass('tree-node-collapsing');
+                $node.toggleClass('collapsed').find('[data-toggle="tooltip"]').tooltip('hide');
                 that.drawLines();
+                setTimeout(function() {
+                    $node.removeClass('tree-node-collapsing');
+                }, 200);
             });
         }
 
         $nodes.on('click', '.treemap-node-wrapper', function() {
-            var $node = $(this).closet('.treemap-node');
+            var $node = $(this).closest('.treemap-node');
             that.callEvent('onNodeClick', $node.data('node'));
         });
     };

src/less/views/treemap.less

@@ -81,7 +81,7 @@
 }
 
 .treemap-node-fold-icon {
-  transition: opacity .2s;
+  transition: opacity .2s, transform .1s;
   opacity: 0;
   background-color: @color-back;
   border-radius: 5px;
@@ -102,19 +102,28 @@
 .treemap-node-wrapper:hover .treemap-node-fold-icon {
   opacity: 1;
 }
-.treemap-node.collapsed {
-  > .treemap-line,
-  .treemap-line-bottom {border-color: transparent!important;}
-  > .treemap-node-children {display: none}
-
-  .treemap-node-fold-icon {
-    opacity: 1;
-    color: @color-gray;
-    transform: none!important;
-    top: -6px;
-
-    &:before {
-      content: @icon-expand-alt;
+.treemap-node {
+  &.collapsed {
+    > .treemap-line,
+    .treemap-line-bottom {border-color: transparent!important;}
+    > .treemap-node-children {display: none}
+
+    .treemap-node-fold-icon {
+      opacity: 1;
+      color: @color-gray;
+      transform: none!important;
+      top: -6px;
+
+      &:before {
+        content: @icon-expand-alt;
+      }
+    }
+  }
+
+  &.tree-node-collapsing {
+    > .treemap-line,
+    > .treemap-node-children {
+      visibility: hidden;
     }
   }
 }