From: arno Date: Sun, 4 Oct 2009 16:51:26 +0000 (+0200) Subject: konqueror compatibility X-Git-Tag: v0.4~10 X-Git-Url: https://dev.renevier.net/?a=commitdiff_plain;ds=sidebyside;h=67d307303acfea6e719a51e437833c76408ef703;hp=5f6e6555d4b0d69a97454f6d6434c7bb6d1fd3e5;p=syp.git konqueror compatibility --- diff --git a/js/admin.js b/js/admin.js index abce8a5..71daf2c 100644 --- a/js/admin.js +++ b/js/admin.js @@ -1,6 +1,66 @@ /* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD * license. */ +/* + * Fix canvas rendering engine race condition. See js/syp.js for more explanation. + */ +OpenLayers.Renderer.Canvas.prototype = OpenLayers.Util.extend({ + needsRedraw: false, + imagesLoading: 0, +}, OpenLayers.Renderer.Canvas.prototype); +OpenLayers.Renderer.Canvas.prototype.oldRedraw = OpenLayers.Renderer.Canvas.prototype.redraw; +OpenLayers.Renderer.Canvas.prototype.redraw = function() { + if (this.imagesLoading > 0) { + this.needsRedraw = true; + return; + } + OpenLayers.Renderer.Canvas.prototype.oldRedraw.apply(this, arguments); +} +OpenLayers.Renderer.Canvas.prototype.drawExternalGraphic = function(pt, style) { + var img = new Image(); + img.src = style.externalGraphic; + + if(style.graphicTitle) { + img.title=style.graphicTitle; + } + + var width = style.graphicWidth || style.graphicHeight; + var height = style.graphicHeight || style.graphicWidth; + width = width ? width : style.pointRadius*2; + height = height ? height : style.pointRadius*2; + var xOffset = (style.graphicXOffset != undefined) ? + style.graphicXOffset : -(0.5 * width); + var yOffset = (style.graphicYOffset != undefined) ? + style.graphicYOffset : -(0.5 * height); + var opacity = style.graphicOpacity || style.fillOpacity; + + var context = { img: img, + x: (pt[0]+xOffset), + y: (pt[1]+yOffset), + width: width, + height: height, + canvas: this.canvas }; + + var self = this; + this.imagesLoading++; + img.onerror = function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } + } + img.onload = OpenLayers.Function.bind( function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } else { + this.canvas.drawImage(this.img, this.x, + this.y, this.width, this.height); + } + }, context); +} // drag feature with tolerance OpenLayers.Control.SypDragFeature = OpenLayers.Class (OpenLayers.Control.DragFeature, { startPixel: null, diff --git a/js/syp.js b/js/syp.js index e9d3f41..8c2e5bc 100644 --- a/js/syp.js +++ b/js/syp.js @@ -1,6 +1,73 @@ /* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD * license. */ +/* + * With canvas rendering engine, externalgraphics are drawn by loading and + * Image javascript object and drawing it with drawImage once it has been + * loaded. If matching feature is deleted while image is loading, redraw + * function will be called before drawImage and therefore, feature is removed, + * but image is still drawn on the screen. We fix it with locks: when an image is + * loading, we defer redraw method. + */ +OpenLayers.Renderer.Canvas.prototype = OpenLayers.Util.extend({ + needsRedraw: false, + imagesLoading: 0 +}, OpenLayers.Renderer.Canvas.prototype); +OpenLayers.Renderer.Canvas.prototype.oldRedraw = OpenLayers.Renderer.Canvas.prototype.redraw; +OpenLayers.Renderer.Canvas.prototype.redraw = function() { + if (this.imagesLoading > 0) { + this.needsRedraw = true; + return; + } + OpenLayers.Renderer.Canvas.prototype.oldRedraw.apply(this, arguments); +} +OpenLayers.Renderer.Canvas.prototype.drawExternalGraphic = function(pt, style) { + var img = new Image(); + img.src = style.externalGraphic; + + if(style.graphicTitle) { + img.title=style.graphicTitle; + } + + var width = style.graphicWidth || style.graphicHeight; + var height = style.graphicHeight || style.graphicWidth; + width = width ? width : style.pointRadius*2; + height = height ? height : style.pointRadius*2; + var xOffset = (style.graphicXOffset != undefined) ? + style.graphicXOffset : -(0.5 * width); + var yOffset = (style.graphicYOffset != undefined) ? + style.graphicYOffset : -(0.5 * height); + var opacity = style.graphicOpacity || style.fillOpacity; + + var context = { img: img, + x: (pt[0]+xOffset), + y: (pt[1]+yOffset), + width: width, + height: height, + canvas: this.canvas }; + + var self = this; + this.imagesLoading++; + img.onerror = function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } + } + img.onload = OpenLayers.Function.bind( function() { + self.imagesLoading--; + if ((self.imagesLoading == 0) && (self.needsRedraw)) { + self.needsRedraw = false; + self.redraw(); + } else { + this.canvas.drawImage(this.img, this.x, + this.y, this.width, this.height); + } + }, context); +} + + OpenLayers.Control.SypAttribution = OpenLayers.Class (OpenLayers.Control.Attribution, { updateAttribution: function() { var attributions = [SypStrings.poweredByLink]; @@ -265,9 +332,18 @@ var SYP = { } } + var offsetTop = this.offsetTop; + var offsetLeft = this.offsetLeft; + var par = this.offsetParent; + var ismsie = OpenLayers.Util.getBrowserName() == "msie"; + while (par && !ismsie) { + offsetTop += par.offsetTop; + offsetLeft += par.offsetLeft; + par = par.offsetParent; + } var icon = document.getElementById('bigimg_close'); - icon.style.top = this.offsetTop; - icon.style.left = this.offsetLeft + this.clientWidth - icon.clientWidth; + icon.style.top = offsetTop; + icon.style.left = offsetLeft + this.clientWidth - icon.clientWidth; }; document.getElementById('bigimg').src = href;