rewrote z-index ordering logic

xer0x · Aug 2, 2011 · d8b4398 · d8b4398
1 parent 328ecd8
commit d8b4398
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 40 deletions.
diff --git a/build/html2canvas.js b/build/html2canvas.js
@@ -83,6 +83,7 @@ function html2canvas(el, userOptions) {
     this.needReorder = false;
     this.blockElements = new RegExp("(BR|PARAM)");
     this.pageOrigin = window.location.protocol + window.location.host;
+    this.queue = [];
 
     this.ignoreRe = new RegExp("("+this.ignoreElements+")");
 
@@ -687,7 +688,9 @@ html2canvas.prototype.newElement = function(el,parentStack){
     var cssPosition = this.getCSS(el,"position");
     parentStack = parentStack || {};
 
-    var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
+    //var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
+
+    var zindex = this.setZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
 
     //console.log(el.nodeName+":"+zindex+":"+this.getCSS(el,"position")+":"+this.numDraws+":"+this.getCSS(el,"z-index"))
 
@@ -700,6 +703,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
         opacity: opacity*parentStack.opacity,
         cssPosition: cssPosition
     };
+
+
 
     // TODO correct overflow for absolute content residing under a static position
     if (parentStack.clip){
@@ -719,11 +724,16 @@ html2canvas.prototype.newElement = function(el,parentStack){
 
 
     }   
-
+     /*  
     var stackLength =  this.contextStacks.push(stack);
         
     var ctx = this.contextStacks[stackLength-1].ctx; 
+*/
 
+    var stackLength =  zindex.children.push(stack);
+
+    var ctx = zindex.children[stackLength-1].ctx; 
+
     this.setContextVariable(ctx,"globalAlpha",stack.opacity);  
 
     // draw element borders
@@ -837,8 +847,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
 
 
 
-    return this.contextStacks[stackLength-1];
-
+   // return this.contextStacks[stackLength-1];
+   return zindex.children[stackLength-1];
 
 
 }
@@ -1315,10 +1325,15 @@ html2canvas.prototype.canvasRenderStorage = function(queue,parentctx){
     }
 }
 
+
+
 html2canvas.prototype.canvasRenderer = function(queue){
     var _ = this;
+    this.sortZ(this.zStack);
+    queue = this.queue;
+    //console.log(queue);
 
-    queue = this.sortQueue(queue);
+    //queue = this.sortQueue(queue);
 
 
 
@@ -1835,13 +1850,80 @@ html2canvas.prototype.extendObj = function(options,defaults){
     return defaults;           
 }
 
-
+/*
+ *todo remove this function
 html2canvas.prototype.leadingZero = function(num,size){
     
     var s = "000000000" + num;
     return s.substr(s.length-size);    
 }    
+*/
+
+html2canvas.prototype.zContext = function(zindex){
+    return {
+        zindex: zindex,
+        children: []
+    }
+
+}
+
+html2canvas.prototype.setZ = function(zindex,position,parentZ,parentNode){
+    // TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
+    if (!parentZ){
+        this.zStack = new this.zContext(0);
+        return this.zStack;
+    }
+
+    if (zindex!="auto"){
+        this.needReorder = true;
+        var newContext = new this.zContext(zindex);
+        parentZ.children.push(newContext);
+
+        return newContext;
+
+    }else {
+        return parentZ;
+    }
 
+}
+
+html2canvas.prototype.sortZ = function(zStack){
+    var subStacks = [];
+    var stackValues = [];
+    var _ = this;
+
+    this.each(zStack.children, function(i,stackChild){
+        if (stackChild.children && stackChild.children.length > 0){
+            subStacks.push(stackChild);
+            stackValues.push(stackChild.zindex);
+        }else{         
+            _.queue.push(stackChild);
+        }
+
+    });
+
+
+
+    stackValues.sort(function(a,b){return a - b});
+
+    this.each(stackValues, function(i,zValue){
+          for (var s = 0;s<=subStacks.length;s++){
+              if (subStacks[s].zindex == zValue){
+                  var stackChild = subStacks.splice(s,1);
+                  _.sortZ(stackChild[0]);
+                  break;
+
+              }
+          }
+
+    });
+
+
+}
+
+/*
+ *todo remove this function
+
 html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
     
     if (!parentZ){
@@ -1859,9 +1941,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
         if (parentPosition!="static" && typeof parentPosition != "undefined"){
             zindex = 0;
         }
-    /*else{
+    else{
             return parentZ;
-        }*/
+        }
     }
     
     var b = this.leadingZero(this.numDraws,9);  
@@ -1875,6 +1957,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
     
     
 }
+    */
+
+
 
 /*
  * Get element childNodes