# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1489770337 -3600
# Node ID 1c07ea9abcd519772c9becd299e1b088a50e06ff
# Parent  3ad8513b751a18871472a13af3e29fceeaec62cc
Display help text in SVG path.

diff -r 3ad8513b751a -r 1c07ea9abcd5 src_js/iconolab-bundle/src/components/editor/ShapeFree.vue
--- 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 &amp;&amp; !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;