# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1487855069 -3600
# Node ID 01a7e6b613146538f9f5a7ae119ee6f2cd956927
# Parent  cad4eadb7bd3f89c7a92ea64fe02b963220cea79
Improve image loading, do not use setTimeout.

diff -r cad4eadb7bd3 -r 01a7e6b61314 src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Thu Feb 23 13:00:04 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Thu Feb 23 14:04:29 2017 +0100
@@ -123,6 +123,28 @@
             loaded: function(loaded) {
                 if (!loaded) { return; }
 
+                var bcr = this.paper.node.getBoundingClientRect();
+
+                console.log('Viewport: %s x %s', bcr.width, bcr.height);
+
+                var viewBox = [0 , 0, this.imageWidth, this.imageHeight];
+                var viewport = {
+                    width: bcr.width,
+                    height: bcr.height
+                };
+
+                Object.assign(this, {
+                    viewBox: viewBox,
+                    viewport: viewport,
+                });
+
+                var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
+
+                this.$refs.rect.handlerSize = handlerSize;
+                this.$refs.free.handlerRadius = handlerSize / 2;
+
+                this.paper.attr({"viewBox": this.viewBox});
+
                 if (this.annotation) {
                     this.loadAnnotation();
                 } else {
@@ -178,37 +200,11 @@
 
                 console.log('Image: %s x %s', img.width, img.height);
 
-                // FIXME
-                // Image is actually NOT loaded at this step
-                setTimeout(() => {
-
-                    var bcr = this.paper.node.getBoundingClientRect();
-
-                    console.log('Viewport: %s x %s', bcr.width, bcr.height);
-
-                    var viewBox = [0 , 0, img.width, img.height];
-                    var viewport = {
-                        width: bcr.width,
-                        height: bcr.height
-                    };
-
-                    Object.assign(this, {
-                        imageWidth: img.width,
-                        imageHeight: img.height,
-                        viewBox: viewBox,
-                        viewport: viewport,
-                    });
-
-                    var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
-
-                    this.$refs.rect.handlerSize = handlerSize;
-                    this.$refs.free.handlerRadius = handlerSize / 2;
-
-                    this.paper.attr({"viewBox": this.viewBox});
-
-                    this.loaded = true;
-
-                }, 100);
+                Object.assign(this, {
+                    imageWidth: img.width,
+                    imageHeight: img.height,
+                    loaded: true
+                });
 
             }
             img.src = this.image;