--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue Feb 21 16:04:20 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 11:04:16 2017 +0100
@@ -17,6 +17,18 @@
                 <button @click="zoomOut" type="button" class="btn btn-default"><i class="fa fa-minus" aria-hidden="true"></i></button>
             </div>
         </div>
+        <div class="zoom-thumbnail">
+            <zoom-thumbnail
+                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>
         <div class="mode-controls">
             <div class="btn-group" role="group" aria-label="...">
                 <button @click="mode = 'rect'" type="button" v-bind:class="{ btn: true, 'btn-default': true, 'btn-primary': mode === 'rect'}">
@@ -35,10 +47,12 @@
     import Snap from 'snapsvg'
     import ShapeRect from './ShapeRect.vue'
     import ShapeFree from './ShapeFree.vue'
+    import ZoomThumbnail from './ZoomThumbnail.vue'
 
     export default {
         props: {
             image: String,
+            thumbnail: String,
             annotation: {
                 type: Object,
                 default: function () {
@@ -54,7 +68,8 @@
         },
         components: {
             shapeRect: ShapeRect,
-            shapeFree: ShapeFree
+            shapeFree: ShapeFree,
+            zoomThumbnail: ZoomThumbnail,
         },
         data() {
             return {
@@ -105,32 +120,24 @@
                     factor = scale - 1;
                 }
 
-                var center = this.getCenter();
-
-                var viewBoxW = this.imgMinSize - (this.imgMinSize * factor);
-                var viewBoxH = viewBoxW;
+                if (scale === 1) {
+                    this.resetViewBox();
+                } else {
+                    var center = this.getCenter();
 
-                const viewBoxPrev = this.viewBox.slice();
-                const viewBoxNew = [
-                    center.x - viewBoxW / 2,
-                    center.y - viewBoxH / 2,
-                    viewBoxW,
-                    viewBoxH
-                ];
+                    var viewBoxW = this.imgMinSize - (this.imgMinSize * factor);
+                    var viewBoxH = viewBoxW;
 
-                this.$refs.rect.hideTooltip();
-                Snap.animate(
-                    viewBoxPrev, viewBoxNew,
-                    (viewBox) => this.paper.attr({ "viewBox": viewBox }),
-                    350, mina.easeinout,
-                    () => {
-                        this.viewBox = viewBoxNew;
-                        this.$refs.rect.showTooltip();
-                        if (scale === 1) {
-                            this.resetZoom();
-                        }
-                    }
-                );
+                    var viewBox = [
+                        center.x - viewBoxW / 2,
+                        center.y - viewBoxH / 2,
+                        viewBoxW,
+                        viewBoxH
+                    ];
+
+                    this.hideTooltip();
+                    this.animateViewBox(viewBox, () => this.showTooltip());
+                }
             }
         },
         mounted() {
@@ -178,13 +185,30 @@
 
         },
         methods: {
-
+            hideTooltip: function() {
+                if (this.mode === 'free') {
+                    this.$refs.free.hideTooltip();
+                }
+                if (this.mode === 'rect') {
+                    this.$refs.rect.hideTooltip();
+                }
+            },
+            showTooltip: function() {
+                if (this.mode === 'free') {
+                    this.$refs.free.showTooltip();
+                }
+                if (this.mode === 'rect') {
+                    this.$refs.rect.showTooltip();
+                }
+            },
             reset: function() {
                 // Clear shapes
                 this.$refs.rect.clear();
                 this.$refs.free.clear();
 
                 this.removeEventHandlers();
+                this.resetZoom();
+                this.resetViewBox();
 
                 if (this.mode === 'free') {
                     this.handleDrawFree();
@@ -228,10 +252,36 @@
                 }
             },
 
+            changeViewBox: function(e) {
+                const viewBox = this.viewBox.slice();
+
+                viewBox[0] = e.x;
+                viewBox[1] = e.y;
+
+                this.paper.attr({ "viewBox": viewBox });
+            },
+
             resetZoom: function() {
                 this.scale = 1;
-                this.viewBox = [0, 0, this.imageWidth, this.imageHeight];
-                this.paper.attr({ "viewBox": this.viewBox });
+                this.$refs.thumbnail.reset();
+            },
+
+            animateViewBox: function(viewBox, cb) {
+                const viewBoxPrev = this.viewBox.slice();
+
+                Snap.animate(
+                    viewBoxPrev, viewBox,
+                    (viewBox) => this.paper.attr({ "viewBox": viewBox }),
+                    350, mina.easeinout,
+                    () => {
+                        this.viewBox = viewBox;
+                        if (cb) { cb(); }
+                    }
+                );
+            },
+
+            resetViewBox: function() {
+                this.animateViewBox([0, 0, this.imageWidth, this.imageHeight]);
             },
 
             zoomIn: function() {
@@ -430,8 +480,8 @@
 }
 .zoomer {
     position: absolute;
-    bottom: 30px;
-    right: 30px;
+    bottom: 15px;
+    right: 15px;
 }
 .cut-canvas {
     width: 100%;
@@ -448,6 +498,11 @@
     top: 15px;
     left: 15px;
 }
+.zoom-thumbnail {
+    position: absolute;
+    left: 15px;
+    bottom: 15px;
+}
 .mode-controls .btn > svg {
     margin-top: 4px;
 }