--- 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;