[Laszlo-checkins] r13309 - in openlaszlo/trunk: WEB-INF/lps/lfc/kernel/dhtml lps/components/extensions

bargull@openlaszlo.org bargull at openlaszlo.org
Mon Mar 16 13:54:03 PDT 2009


Author: bargull
Date: 2009-03-16 13:53:58 -0700 (Mon, 16 Mar 2009)
New Revision: 13309

Modified:
   openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
   openlaszlo/trunk/lps/components/extensions/drawview.lzx
Log:
Change 20090308-bargull-Yej by bargull at dell--p4--2-53 on 2009-03-08 12:08:30
    in /home/Admin/src/svn/openlaszlo/trunk
    for http://svn.openlaszlo.org/openlaszlo/trunk

Summary: defer drawImage() for incomplete images

New Features:

Bugs Fixed: LPP-7874 (DHTML: exception in test/drawing/drawing.lzx)

Technical Reviewer: max
QA Reviewer: (pending)
Doc Reviewer: (pending)

Documentation:

Release Notes:

Details:
drawview:
- if image isn't loaded yet (complete-flag isn't set), drawImage() needs to defered, cf. "http://www.whatwg.org/specs/web-apps/current-work/#dom-context-2d-drawimage"
- also added a check to protect against invalid an image-argument
- and changed getImage() to save an image under the resource-name and the load url in order to prevent resource-images to be loaded over and over again

LzSprite:
- getResourceUrls(): 
 o moved all code which changes sprite-properties out of the function
 o added a note that the function is used in drawview
    

Tests:
test/drawing/drawing.lzx?lzr=dhtml, tested with FF3, Saf3, Opera9, IE6



Modified: openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js
===================================================================
--- openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js	2009-03-16 18:02:22 UTC (rev 13308)
+++ openlaszlo/trunk/WEB-INF/lps/lfc/kernel/dhtml/LzSprite.js	2009-03-16 20:53:58 UTC (rev 13309)
@@ -692,8 +692,20 @@
         return;
     }
 
+    var res = LzResourceLibrary[r];
+    if (res) {
+        this.resourceWidth = res.width;
+        this.resourceHeight = res.height;
+        if (this.quirks.use_css_sprites && res.sprite) {
+            var baseurl = this.getBaseUrl(res);
+            this.__csssprite = baseurl + res.sprite;
+        } else {
+            this.__csssprite = null;
+            if (this.__bgimage) this.__setBGImage(null);
+        }
+    }
+
     var urls = this.getResourceUrls(r);
-
     this.owner.resourceevent('totalframes', urls.length);
     this.frames = urls;
 
@@ -707,6 +719,7 @@
     //if (urls.length > 1) this.play();
 }
 
+// @devnote also used in lz.drawview.getImage()
 LzSprite.prototype.getResourceUrls = function (resourcename) {
     var urls = [];
     // look up resource name in LzResourceLibrary
@@ -720,29 +733,21 @@
         return urls;
     }
 
-    this.resourceWidth = res.width;
-    this.resourceHeight = res.height;
-
-    var baseurl;
-    if (res.ptype && res.ptype == 'sr') {
-        baseurl = lz.embed.options.serverroot;
-    } else {
-        baseurl = lz.embed.options.approot;
-    }
-
-    if (this.quirks.use_css_sprites && res.sprite) {
-        this.__csssprite = baseurl + res.sprite;
-    } else {
-        this.__csssprite = null;
-        if (this.__bgimage) this.__setBGImage(null);
-    }
-
+    var baseurl = this.getBaseUrl(res);
     for (var i = 0; i < res.frames.length; i++) {
         urls[i] = baseurl + res.frames[i];
     }
     return urls;
 }
 
+LzSprite.prototype.getBaseUrl = function (resource) {
+    if (resource.ptype == 'sr') {
+        return lz.embed.options.serverroot;
+    } else {
+        return lz.embed.options.approot;
+    }
+}
+
 LzSprite.prototype.CSSDimension = function (value, units) {
     // Coerce +/- infinity, NaN
     var result = value; 
@@ -756,8 +761,8 @@
     if ($debug) { 
         if (value !== result) { 
             Debug.warn("%w: coerced %w to %w", arguments.callee, value, result); 
-        } 
-    } 
+    }
+}
 
     return Math.round(result) + (units ? units : 'px');
 }

Modified: openlaszlo/trunk/lps/components/extensions/drawview.lzx
===================================================================
--- openlaszlo/trunk/lps/components/extensions/drawview.lzx	2009-03-16 18:02:22 UTC (rev 13308)
+++ openlaszlo/trunk/lps/components/extensions/drawview.lzx	2009-03-16 20:53:58 UTC (rev 13309)
@@ -629,19 +629,23 @@
             }
 
             static var images = {};
+            var __drawImageCnt = 0;
 
             function getImage(url) {
-                var i = lz.drawview.images[url];
-                if (! i) {
-                    if ( url.indexOf('http:') != 0 && url.indexOf('https:') != 0 ) {
-                        url = this.sprite.getResourceUrls(url);
-                        url = url[0];
+                var img = lz.drawview.images[url];
+                if (! img) {
+                    var loadurl = url;
+                    if (url.indexOf('http:') != 0 && url.indexOf('https:') != 0) {
+                        loadurl = this.sprite.getResourceUrls(url)[0];
                     }
-                    i = new Image();
-                    i.src = url;
-                    lz.drawview.images[url] = i;
+                    img = new Image();
+                    img.src = loadurl;
+                    lz.drawview.images[url] = img;
+                    if (loadurl != url) {
+                        lz.drawview.images[loadurl] = img;
+                    }
                 }
-                return i;
+                return img;
             }
 
             function drawImage(image, x, y, w, h, r) {
@@ -649,15 +653,34 @@
                 if (typeof image == 'string') {
                     image = this.getImage(image);
                 }
-                var tr = r ? r : 0;
-                this.context.save();
-                this.clear();
-                var tx = x ? x : 0;
-                var ty = y ? y : 0;
-                this.context.translate(tx, ty);
-                this.context.rotate(tr);
-                this.context.drawImage(image, 0, 0, w, h);
-                this.context.restore();
+                if (! (image && image.nodeType == 1 && image.nodeName == 'IMG')) {
+                    if ($debug) {
+                        Debug.warn("Invalid image for lz.drawview.drawImage(): %w", image);
+                    }
+                } else if (! image.complete) {
+                    // TODO [20090308 anba] drawImage needs to be defered,
+                    // maybe emit a debug-message to inform user
+                    var fname = '__drawImage' + (this.__drawImageCnt++);
+                    // create a closure to save arguments
+                    this[fname] = function () {
+                        // remove handler and delete closure
+                        lz.embed.removeEventHandler(image, 'load', this, fname);
+                        delete this[fname];
+                        this.drawImage(image, x, y, w, h, r);
+                    }
+                    // defer until image is completely loaded
+                    lz.embed.attachEventHandler(image, 'load', this, fname);
+                } else {
+                    var tr = r ? r : 0;
+                    this.context.save();
+                    this.clear();
+                    var tx = x ? x : 0;
+                    var ty = y ? y : 0;
+                    this.context.translate(tx, ty);
+                    this.context.rotate(tr);
+                    this.context.drawImage(image, 0, 0, w, h);
+                    this.context.restore();
+                }
             }
 
             function __initie() {



More information about the Laszlo-checkins mailing list