--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 18:31:01 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 18:31:58 2017 +0100
@@ -2,7 +2,8 @@
     <div class="zoom">
         <div>
             <svg ref="svg"
-                v-bind:class="{ 'cut-canvas': true, 'canvas--rect': mode === 'rect', 'canvas--free': mode === 'free' }"
+                class="cut-canvas"
+                v-bind:class="canvasClass"
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <image xmlns:xlink="http://www.w3.org/1999/xlink"
                     ref="image"
@@ -94,6 +95,14 @@
                 readonly: false
             }
         },
+        computed: {
+            canvasClass: function() {
+                return {
+                    'canvas--rect': !this.readonly && this.mode === 'rect',
+                    'canvas--free': !this.readonly && this.mode === 'free'
+                }
+            }
+        },
         watch: {
             mode: function(mode) {
                 this.reset();

--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Feb 22 18:31:01 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Feb 22 18:31:58 2017 +0100
@@ -4,12 +4,10 @@
         ref="shape"
         x="0" y="0"
         v-bind:width="width" v-bind:height="height"
-        fill="#bdc3c7"
-        stroke="#000"
         v-bind:stroke-width="handlerSize / 5"
         v-bind:stroke-dasharray="(handlerSize / 5) + ',' + (handlerSize / 5)"
-        style="opacity: 0.6;"
-        class="shape"></rect>
+        class="shape"
+        v-bind:class="{ 'shape--draggable': !readonly }"></rect>
     <rect
         ref="topLeft"
         v-show="showResizeHandlers"
@@ -209,7 +207,12 @@
 </script>
 
 <style scoped>
-.shape:hover {
+.shape {
+    fill: #bdc3c7;
+    stroke: #000;
+    opacity: 0.6;
+}
+.shape--draggable:hover {
     cursor: move;
 }
 .handler-top-left:hover {