--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Thu May 11 15:45:08 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Mon May 15 12:38:40 2017 +0200
@@ -91,19 +91,22 @@
                     <i class="fa fa-sign-in"></i> <small>Connexion</small>
                 </a>
             </div>
-            <zoom-thumbnail
-                data-intro="Déplacez vous dans l'image zoomée"
-                data-position="top"
-                class="controls-center"
-                ref="thumbnail"
-                @change="changeViewBox($event)"
-                @dragstart="hideTooltip"
-                @dragend="showTooltip"
-                v-bind:image="thumbnail"
-                v-bind:viewport="viewport"
-                v-bind:viewBox="viewBox"
-                v-bind:imageWidth="imageWidth"
-                v-bind:imageHeight="imageHeight"></zoom-thumbnail>
+            <div class="controls-center">
+                <zoom-thumbnail
+                    data-intro="Déplacez vous dans l'image zoomée"
+                    data-position="top"
+                    ref="thumbnail"
+                    @move="changeViewBox($event)"
+                    @moveend="syncViewBox()"
+                    @dragstart="hideTooltip"
+                    @dragend="showTooltip"
+                    v-if="loaded"
+                    v-bind:image="thumbnail"
+                    v-bind:viewport="viewport"
+                    v-bind:parentViewBox="viewBox"
+                    v-bind:imageWidth="imageWidth"
+                    v-bind:imageHeight="imageHeight"></zoom-thumbnail>
+            </div>
             <div class="controls-right" data-intro="Zoomez dans l'image" data-position="top">
                 <button @click="zoomOut" type="button" class="btn"
                     v-bind:class="{ disabled: scale === 1 }">
@@ -362,10 +365,15 @@
             },
 
             getCenter: function() {
-                return {
-                    x: this.viewBox[0] + (this.viewBox[2] / 2),
-                    y: this.viewBox[1] + (this.viewBox[3] / 2)
+
+                if (!this.$refs.thumbnail) {
+                    return {
+                        x: this.viewBox[0] + (this.viewBox[2] / 2),
+                        y: this.viewBox[1] + (this.viewBox[3] / 2)
+                    }
                 }
+
+                return this.$refs.thumbnail.getCenter()
             },
 
             changeViewBox: function(e) {
@@ -377,9 +385,19 @@
                 this.paper.attr({ "viewBox": viewBox });
             },
 
+            syncViewBox: function() {
+                const viewBox = this.paper.attr('viewBox');
+                this.viewBox = [
+                    viewBox.x, viewBox.y,
+                    viewBox.width, viewBox.height
+                ]
+            },
+
             resetZoom: function() {
                 this.scale = 1;
-                this.$refs.thumbnail.reset();
+                if (this.$refs.thumbnail) {
+                    this.$refs.thumbnail.reset();
+                }
             },
 
             animateViewBox: function(viewBox, cb) {
@@ -677,7 +695,7 @@
     }
     .controls .controls-center {
         border-radius: 4px;
-        padding: 8px 8px 4px 8px;
+        padding: 8px;
     }
     .controls .controls-right {
         border-top-right-radius: 4px;