Pass strokeWidth as prop.
--- 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 && !readonly && 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 && !closed }"></circle>
<g>
</svg>
@@ -35,13 +33,13 @@
'original-annotation',
'original-path',
'readonly',
+ 'stroke-width',
],
data() {
return {
path: '',
closed: false,
points: [],
- handlerRadius: 30
}
},
computed: {