src_js/iconolab-bundle/src/components/editor/ShapeRect.vue
changeset 342 ebec1d59dc74
parent 335 86dbf2cdeeeb
child 350 7c0b98b10e00
--- 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');
                 },