Skip to content

Commit d8b4398

Browse files
niklasvhniklasvh
committed
rewrote z-index ordering logic
1 parent 328ecd8 commit d8b4398

8 files changed

Lines changed: 212 additions & 40 deletions

File tree

‎build/html2canvas.js‎

Lines changed: 93 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ function html2canvas(el, userOptions) {
8383
this.needReorder = false;
8484
this.blockElements = new RegExp("(BR|PARAM)");
8585
this.pageOrigin = window.location.protocol + window.location.host;
86+
this.queue = [];
8687

8788
this.ignoreRe = new RegExp("("+this.ignoreElements+")");
8889

@@ -687,7 +688,9 @@ html2canvas.prototype.newElement = function(el,parentStack){
687688
var cssPosition = this.getCSS(el,"position");
688689
parentStack = parentStack || {};
689690

690-
var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
691+
//var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
692+
693+
var zindex = this.setZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
691694

692695
//console.log(el.nodeName+":"+zindex+":"+this.getCSS(el,"position")+":"+this.numDraws+":"+this.getCSS(el,"z-index"))
693696

@@ -700,6 +703,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
700703
opacity: opacity*parentStack.opacity,
701704
cssPosition: cssPosition
702705
};
706+
707+
703708

704709
// TODO correct overflow for absolute content residing under a static position
705710
if (parentStack.clip){
@@ -719,11 +724,16 @@ html2canvas.prototype.newElement = function(el,parentStack){
719724

720725

721726
}
722-
727+
/*
723728
var stackLength = this.contextStacks.push(stack);
724729
725730
var ctx = this.contextStacks[stackLength-1].ctx;
731+
*/
726732

733+
var stackLength = zindex.children.push(stack);
734+
735+
var ctx = zindex.children[stackLength-1].ctx;
736+
727737
this.setContextVariable(ctx,"globalAlpha",stack.opacity);
728738

729739
// draw element borders
@@ -837,8 +847,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
837847

838848

839849

840-
return this.contextStacks[stackLength-1];
841-
850+
// return this.contextStacks[stackLength-1];
851+
return zindex.children[stackLength-1];
842852

843853

844854
}
@@ -1315,10 +1325,15 @@ html2canvas.prototype.canvasRenderStorage = function(queue,parentctx){
13151325
}
13161326
}
13171327

1328+
1329+
13181330
html2canvas.prototype.canvasRenderer = function(queue){
13191331
var _ = this;
1332+
this.sortZ(this.zStack);
1333+
queue = this.queue;
1334+
//console.log(queue);
13201335

1321-
queue = this.sortQueue(queue);
1336+
//queue = this.sortQueue(queue);
13221337

13231338

13241339

@@ -1835,13 +1850,80 @@ html2canvas.prototype.extendObj = function(options,defaults){
18351850
return defaults;
18361851
}
18371852

1838-
1853+
/*
1854+
*todo remove this function
18391855
html2canvas.prototype.leadingZero = function(num,size){
18401856
18411857
var s = "000000000" + num;
18421858
return s.substr(s.length-size);
18431859
}
1860+
*/
1861+
1862+
html2canvas.prototype.zContext = function(zindex){
1863+
return {
1864+
zindex: zindex,
1865+
children: []
1866+
}
1867+
1868+
}
1869+
1870+
html2canvas.prototype.setZ = function(zindex,position,parentZ,parentNode){
1871+
// TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
1872+
if (!parentZ){
1873+
this.zStack = new this.zContext(0);
1874+
return this.zStack;
1875+
}
1876+
1877+
if (zindex!="auto"){
1878+
this.needReorder = true;
1879+
var newContext = new this.zContext(zindex);
1880+
parentZ.children.push(newContext);
1881+
1882+
return newContext;
1883+
1884+
}else {
1885+
return parentZ;
1886+
}
18441887

1888+
}
1889+
1890+
html2canvas.prototype.sortZ = function(zStack){
1891+
var subStacks = [];
1892+
var stackValues = [];
1893+
var _ = this;
1894+
1895+
this.each(zStack.children, function(i,stackChild){
1896+
if (stackChild.children && stackChild.children.length > 0){
1897+
subStacks.push(stackChild);
1898+
stackValues.push(stackChild.zindex);
1899+
}else{
1900+
_.queue.push(stackChild);
1901+
}
1902+
1903+
});
1904+
1905+
1906+
1907+
stackValues.sort(function(a,b){return a - b});
1908+
1909+
this.each(stackValues, function(i,zValue){
1910+
for (var s = 0;s<=subStacks.length;s++){
1911+
if (subStacks[s].zindex == zValue){
1912+
var stackChild = subStacks.splice(s,1);
1913+
_.sortZ(stackChild[0]);
1914+
break;
1915+
1916+
}
1917+
}
1918+
1919+
});
1920+
1921+
1922+
}
1923+
1924+
/*
1925+
*todo remove this function
1926+
18451927
html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
18461928
18471929
if (!parentZ){
@@ -1859,9 +1941,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
18591941
if (parentPosition!="static" && typeof parentPosition != "undefined"){
18601942
zindex = 0;
18611943
}
1862-
/*else{
1944+
else{
18631945
return parentZ;
1864-
}*/
1946+
}
18651947
}
18661948
18671949
var b = this.leadingZero(this.numDraws,9);
@@ -1875,6 +1957,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
18751957
18761958
18771959
}
1960+
*/
1961+
1962+
18781963

18791964
/*
18801965
* Get element childNodes

0 commit comments

Comments
 (0)