Pass strokeWidth as prop.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 15 Mar 2017 17:34:53 +0100
changeset 437 0aa597a588c1
parent 436 60d98f985e3b
child 438 4777da2ee0a0
Pass strokeWidth as prop.
src_js/iconolab-bundle/src/components/editor/Canvas.vue
src_js/iconolab-bundle/src/components/editor/ShapeFree.vue
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Mar 15 17:11:48 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Wed Mar 15 17:34:53 2017 +0100
@@ -33,6 +33,7 @@
                     v-bind:original-annotation="annotation"
                     v-bind:original-path="annotation.path"
                     v-bind:readonly="readonly"
+                    v-bind:stroke-width="strokeWidth"
                     v-on:click="onAnnotationClick(annotation)"></shape-free>
 
                 <!-- These are the new fragments -->
@@ -44,6 +45,7 @@
                 <shape-free ref="free"
                     v-show="loaded &amp;&amp; !readonly &amp;&amp; mode == 'free'"
                     v-bind:paper="paper"
+                    v-bind:stroke-width="strokeWidth"
                     :readonly="false"></shape-free>
 
                 <defs>
@@ -147,7 +149,8 @@
                 imgMinSize: 0,
                 imageWidth: 0,
                 imageHeight: 0,
-                readonly: false
+                readonly: false,
+                strokeWidth: 15,
             }
         },
         computed: {
@@ -201,16 +204,16 @@
                     height: bcr.height
                 };
 
+                var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
+
+                this.$refs.rect.handlerSize = handlerSize;
+
                 Object.assign(this, {
                     viewBox: viewBox,
                     viewport: viewport,
+                    strokeWidth: handlerSize / 4,
                 });
 
-                var handlerSize = 15 * Math.min(viewBox[2], viewBox[3]) / viewport.width;
-
-                this.$refs.rect.handlerSize = handlerSize;
-                this.$refs.free.handlerRadius = handlerSize / 2;
-
                 this.paper.attr({"viewBox": this.viewBox});
 
                 if (_.size(this.annotations) > 0) {
--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Mar 15 17:11:48 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Wed Mar 15 17:34:53 2017 +0100
@@ -1,13 +1,11 @@
 <template>
     <svg>
         <defs>
-            <path v-bind:id="annotationHref" ref="path" v-bind:d="path"
-                class="path"
-                v-bind:stroke-width="handlerRadius / 2"></path>
+            <path v-bind:id="annotationHref" ref="path" v-bind:d="path" class="path"></path>
         </defs>
         <g ref="g" filter="url(#shadow)">
-            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="(handlerRadius / 2) * 2" class="stroke-bg" />
-            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="handlerRadius / 2" class="stroke-fg" />
+            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth * 2" class="stroke-bg" />
+            <use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth" class="stroke-fg" />
             <circle ref="handlers"
                 v-for="(point, key) in points"
                 :key="key"
@@ -15,8 +13,8 @@
                 v-bind:data-key="key"
                 v-bind:cx="point.x"
                 v-bind:cy="point.y"
-                v-bind:r="handlerRadius"
-                v-bind:stroke-width="handlerRadius / 2"
+                v-bind:r="strokeWidth * 2"
+                v-bind:stroke-width="strokeWidth"
                 v-bind:class="{ handler: true, 'handler--first': key === 0 &amp;&amp; !closed }"></circle>
         <g>
     </svg>
@@ -35,13 +33,13 @@
             'original-annotation',
             'original-path',
             'readonly',
+            'stroke-width',
         ],
         data() {
             return {
                 path: '',
                 closed: false,
                 points: [],
-                handlerRadius: 30
             }
         },
         computed: {