# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1489771027 -3600
# Node ID 04ac84f80eb396d24301eee48e6b80544ef42a6a
# Parent  1c07ea9abcd519772c9becd299e1b088a50e06ff
Improve calculation of stroke width depending on image ratio.

diff -r 1c07ea9abcd5 -r 04ac84f80eb3 src_js/iconolab-bundle/src/components/editor/Canvas.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Fri Mar 17 18:05:37 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Fri Mar 17 18:17:07 2017 +0100
@@ -24,7 +24,8 @@
                     v-bind:original-annotation="annotation"
                     v-bind:original-path="annotation.path"
                     v-bind:readonly="readonly"
-                    v-on:click="onAnnotationClick(annotation)"></shape-rect>
+                    v-on:click="onAnnotationClick(annotation)"
+                    v-bind:stroke-width="strokeWidth"></shape-rect>
                 <shape-free
                     v-for="annotation in normalizedAnnotations"
                     :key="annotation.annotation_guid"
@@ -41,6 +42,7 @@
                 <shape-rect ref="rect"
                     v-show="loaded &amp;&amp; !readonly &amp;&amp; mode == 'rect'"
                     v-bind:paper="paper"
+                    v-bind:stroke-width="strokeWidth"
                     :readonly="false"></shape-rect>
                 <shape-free ref="free"
                     v-show="loaded &amp;&amp; !readonly &amp;&amp; mode == 'free'"
@@ -158,6 +160,7 @@
                 imageHeight: 0,
                 readonly: false,
                 strokeWidth: 15,
+                imageRatio: 1
             }
         },
         computed: {
@@ -211,14 +214,21 @@
                     height: bcr.height
                 };
 
-                var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
+                var imageRatio = 1;
+                if (this.imageWidth > this.imageHeight) {
+                    imageRatio = viewport.width / this.imageWidth;
+                }
+                if (this.imageHeight > this.imageWidth) {
+                    imageRatio = viewport.height / this.imageHeight;
+                }
 
-                this.$refs.rect.handlerSize = handlerSize;
+                var strokeWidth = imageRatio > 1 ? (2 * imageRatio) : (2 / imageRatio);
 
                 Object.assign(this, {
                     viewBox: viewBox,
                     viewport: viewport,
-                    strokeWidth: handlerSize / 4,
+                    imageRatio: imageRatio,
+                    strokeWidth: strokeWidth
                 });
 
                 this.paper.attr({"viewBox": this.viewBox});
@@ -276,13 +286,12 @@
 
                 this.paper = new Snap(this.$refs.svg);
 
-                this.imgMinSize = Math.min(img.width, img.height);
-
                 console.log('Image: %s x %s', img.width, img.height);
 
                 Object.assign(this, {
                     imageWidth: img.width,
                     imageHeight: img.height,
+                    imgMinSize: Math.min(img.width, img.height),
                     loaded: true
                 });
 
@@ -398,10 +407,6 @@
                 return { x: offsetX, y: offsetY };
             },
 
-            computeHandlerSize: function(e) {
-                return 60 * Math.min(this.viewBox[2], this.viewBox[3]) / this.imageWidth;
-            },
-
             normalizePath: function(path) {
 
                 var xRatio = 100 / this.imageWidth;
diff -r 1c07ea9abcd5 -r 04ac84f80eb3 src_js/iconolab-bundle/src/components/editor/ShapeRect.vue
--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Fri Mar 17 18:05:37 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Fri Mar 17 18:17:07 2017 +0100
@@ -4,24 +4,22 @@
         ref="shape"
         x="0" y="0"
         v-bind:width="width" v-bind:height="height"
-        v-bind:stroke-width="handlerSize / 5"
+        v-bind:stroke-width="strokeWidth"
         class="shape"
         v-bind:class="{ 'shape--draggable': !readonly }"
-        v-bind:style="{ 'outline-width': (handlerSize / 5) + 'px' }"></rect>
+        v-bind:style="{ 'outline-width': (strokeWidth / 2) + 'px' }"></rect>
     <rect
         ref="topLeft"
         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>
+        v-bind:x="((strokeWidth * 4) / 2) * -1" v-bind:y="((strokeWidth * 4) / 2) * -1"
+        v-bind:width="strokeWidth * 4" v-bind:height="strokeWidth * 4"
+        v-bind:stroke-width="strokeWidth" class="handler handler-top-left"></rect>
     <rect
         ref="bottomRight"
         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"
-        stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-bottom-right"></rect>
+        v-bind:x="width - ((strokeWidth * 4) / 2)" v-bind:y="height - ((strokeWidth * 4) / 2)"
+        v-bind:width="strokeWidth * 4" v-bind:height="strokeWidth * 4"
+        v-bind:stroke-width="strokeWidth" class="handler handler-bottom-right"></rect>
 </g>
 </template>
 
@@ -39,6 +37,7 @@
             'tooltip',
             'readonly',
             'original-path',
+            'stroke-width'
         ],
         data() {
             return {
@@ -46,7 +45,6 @@
                 isResizing: false,
                 x: 0, y: 0,
                 width: 0, height: 0,
-                handlerSize: 60
             }
         },
         computed: {
@@ -228,6 +226,10 @@
 .shape--draggable:hover {
     cursor: move;
 }
+.handler {
+    fill: #fff;
+    stroke: #000;
+}
 .handler-top-left:hover {
     cursor: nw-resize;
 }