--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 15:39:28 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Feb 22 15:41:07 2017 +0100
@@ -6,9 +6,13 @@
                 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <image ref="image" v-if="loaded" xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="image" x="0" y="0" />
                 <shape-rect ref="rect" v-show="loaded &amp;&amp; mode == 'rect'"
-                    v-bind:paper="paper" v-bind:original-annotation="annotation"></shape-rect>
+                    v-bind:paper="paper"
+                    v-bind:original-annotation="annotation"
+                    v-bind:readonly="readonly"></shape-rect>
                 <shape-free ref="free" v-show="loaded &amp;&amp; mode == 'free'"
-                    v-bind:paper="paper" v-bind:original-annotation="annotation"></shape-free>
+                    v-bind:paper="paper"
+                    v-bind:original-annotation="annotation"
+                    v-bind:readonly="readonly"></shape-free>
             </svg>
         </div>
         <div class="zoomer">
@@ -31,10 +35,12 @@
         </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'}">
+                <button @click="setMode('rect')" type="button" class="btn"
+                    v-bind:class="{ 'btn-default': true, 'btn-primary': mode === 'rect', 'disabled': readonly }">
                     <svg width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
                 </button>
-                <button @click="mode = 'free'" type="button" v-bind:class="{ btn: true, 'btn-default': true, 'btn-primary': mode === 'free'}">
+                <button @click="setMode('free')" type="button" class="btn"
+                    v-bind:class="{ 'btn-default': true, 'btn-primary': mode === 'free', 'disabled': readonly }">
                     <svg width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403    c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069    c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604    c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069    c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3    S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395    c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
                 </button>
             </path>
@@ -55,15 +61,11 @@
             thumbnail: String,
             annotation: {
                 type: Object,
-                default: function () {
-                    return null;
-                }
+                default: null
             },
             tooltip: {
                 type: Boolean,
-                default: function () {
-                    return false;
-                }
+                default: false
             },
         },
         components: {
@@ -83,6 +85,7 @@
                 imgMinSize: 0,
                 imageWidth: 0,
                 imageHeight: 0,
+                readonly: false
             }
         },
         watch: {
@@ -111,8 +114,10 @@
             },
             annotation: function(annotation) {
                 this.reset();
-                if (!this.annotation) { return; }
-                this.loadAnnotation();
+                this.readonly = !!annotation;
+                if (this.annotation) {
+                    this.loadAnnotation();
+                }
             },
             scale: function(scale) {
                 var factor = 0;
@@ -245,6 +250,12 @@
                 }
             },
 
+            setMode: function(mode) {
+                if (this.readonly) { return; }
+
+                this.mode = mode;
+            },
+
             getCenter: function() {
                 return {
                     x: this.viewBox[0] + (this.viewBox[2] / 2),

--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Feb 22 15:39:28 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Feb 22 15:41:07 2017 +0100
@@ -3,17 +3,15 @@
         <path ref="path" v-bind:d="path" stroke="#000000" fill="#bdc3c7"
             v-bind:stroke-width="handlerRadius / 2"
             v-bind:stroke-dasharray="(handlerRadius / 3) + ',' + (handlerRadius / 3)" style="opacity: 0.6;"></path>
-        <circle
+        <circle ref="handlers"
             v-for="(point, key) in points"
             :key="key"
+            v-show="!readonly"
             v-bind:data-key="key"
-            ref="handlers"
             v-bind:cx="point.x"
             v-bind:cy="point.y"
             v-bind:r="handlerRadius"
-            stroke="#000000"
             v-bind:stroke-width="handlerRadius / 2"
-            style="opacity: 0.9;"
             v-bind:class="{ handler: true, 'handler--first': key === 0 &amp;&amp; !closed }"></circle>
     </g>
 </template>
@@ -29,6 +27,7 @@
         props: [
             'paper',
             'original-annotation',
+            'readonly',
         ],
         data() {
             return {
@@ -190,12 +189,9 @@
 <style scoped>
 .handler {
     fill: #fff;
+    stroke: #000;
+    opacity: 0.9;
 }
-/*.handler:hover {
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
-    cursor: grab;
-}*/
 .handler--first {
     fill: yellow;
 }

--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Feb 22 15:39:28 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Wed Feb 22 15:41:07 2017 +0100
@@ -12,14 +12,14 @@
         class="shape"></rect>
     <rect
         ref="topLeft"
-        v-show="width > 0 &amp;&amp; height > 0"
+        v-show="showResizeHandlers"
         v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1"
         v-bind:width="handlerSize" v-bind:height="handlerSize"
         fill="#ffffff"
         stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-top-left"></rect>
     <rect
         ref="bottomRight"
-        v-show="width > 0 &amp;&amp; height > 0"
+        v-show="showResizeHandlers"
         v-bind:x="width - (handlerSize / 2)" v-bind:y="height - (handlerSize / 2)"
         v-bind:width="handlerSize" v-bind:height="handlerSize"
         fill="#ffffff"
@@ -38,7 +38,8 @@
         props: [
             'paper',
             'original-annotation',
-            'tooltip'
+            'tooltip',
+            'readonly',
         ],
         data() {
             return {
@@ -49,13 +50,18 @@
                 handlerSize: 60
             }
         },
+        computed: {
+            showResizeHandlers: function() {
+                return !this.readonly && (this.width > 0 && this.height > 0);
+            }
+        },
         mounted() {
 
             var self = this;
 
             var groupEvents = {
                 onMove: function(dx, dy) {
-                    if (self.isResizing) { return; }
+                    if (self.isResizing || self.readonly) { return; }
 
                     var snapInvMatrix = this.transform().diffMatrix.invert();
                     snapInvMatrix.e = snapInvMatrix.f = 0;
@@ -66,6 +72,8 @@
                     this.transform(transformValue);
                 },
                 onStart: function() {
+                    if (self.readonly) { return; }
+
                     this.data('origTransform', this.transform().local);
                     self.$emit('drag:start');
                 },