src_js/iconolab-bundle/src/components/editor/Canvas.vue
changeset 449 04ac84f80eb3
parent 444 d57f95ee9115
child 485 47080491b330
--- 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;