Display help text in SVG path.
--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue Fri Mar 17 15:33:38 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue Fri Mar 17 18:05:37 2017 +0100
@@ -6,6 +6,7 @@
<g ref="g">
<use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth * 2" class="stroke-bg" filter="url(#shadow)" />
<use v-bind:xlink:href="annotationSelector" v-bind:stroke-width="strokeWidth" class="stroke-fg" />
+ <use v-bind:xlink:href="annotationSelector" class="overlay" v-bind:class="{ active: !originalAnnotation }" />
<circle ref="handlers"
v-for="(point, key) in points"
:key="key"
@@ -16,6 +17,14 @@
v-bind:r="strokeWidth * 2"
v-bind:stroke-width="strokeWidth"
v-bind:class="{ handler: true, 'handler--first': key === 0 && !closed }"></circle>
+ <text ref="text"
+ v-if="!originalAnnotation && !closed && points.length > 3"
+ v-bind:x="text.x" v-bind:y="text.y"
+ font-family="Verdana"
+ v-bind:font-size="strokeWidth * 4"
+ class="text">
+ Double-cliquez pour fermer la zone
+ </text>
<g>
</svg>
</template>
@@ -40,6 +49,7 @@
path: '',
closed: false,
points: [],
+ text: { x: 0, y: 0 }
}
},
computed: {
@@ -91,6 +101,15 @@
if (this.closed) { path += ' Z'; }
this.path = path;
+
+ this.$nextTick(() => {
+ var group = new Snap(this.$refs.g);
+ var text = new Snap(this.$refs.text);
+ this.text = {
+ x: group.getBBox().x + (group.getBBox().width / 2) - (text.getBBox().width / 2),
+ y: group.getBBox().y + (group.getBBox().height / 2) - (text.getBBox().height / 2)
+ }
+ });
}
},
methods: {
@@ -174,6 +193,8 @@
// Remove point on double click
circle.dblclick((e) => {
+ e.preventDefault();
+ e.stopPropagation();
var circle = new Snap(e.target);
var key = parseInt(circle.attr('data-key'), 10);
this.points.splice(key, 1);
@@ -224,11 +245,18 @@
fill: inherit;
transform: inherit;
}
+.text {
+
+}
.stroke-fg {
stroke: #000;
fill: transparent;
}
-.stroke-fg:hover {
+.overlay {
+ fill: transparent;
+}
+.overlay.active,
+.overlay:hover {
cursor: pointer;
fill: #c5f2ff;
opacity: 0.25;