src_js/iconolab-bundle/src/components/editor/ShapeFree.vue
changeset 323 55c024fc7c60
parent 320 81945eedc63f
child 342 ebec1d59dc74
--- a/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Mon Feb 20 17:14:08 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeFree.vue	Mon Feb 20 17:29:55 2017 +0100
@@ -1,6 +1,8 @@
 <template>
     <g>
-        <path ref="path" v-bind:d="path" stroke="#000000" fill="#bdc3c7" style="stroke-width: 10; stroke-dasharray: 20, 20; opacity: 0.6;"></path>
+        <path ref="path" v-bind:d="path" stroke="#000000" fill="#bdc3c7"
+            v-bind:stroke-width="handlerRadius / 2"
+            v-bind:stroke-dasharray="(handlerRadius / 3) + ',' + (handlerRadius / 3)" style="opacity: 0.6;"></path>
         <circle
             v-for="(point, key) in points"
             :key="key"
@@ -9,7 +11,8 @@
             v-bind:cx="point.x"
             v-bind:cy="point.y"
             v-bind:r="handlerRadius"
-            stroke="#000000" stroke-width="10"
+            stroke="#000000"
+            v-bind:stroke-width="handlerRadius / 2"
             style="opacity: 0.9;"
             v-bind:class="{ handler: true, 'handler--first': key === 0 &amp;&amp; !closed }"></circle>
     </g>
@@ -42,7 +45,6 @@
             closed: function(closed) {
                 if (closed) {
                     this.path += ' Z';
-                    setTimeout(() => this.addTooltip(), 50);
                 }
             },
             // Redraw the path when the points have changed
@@ -96,7 +98,7 @@
                 return this.$refs.path;
             },
 
-            fromSVGPath: function(pathString) {
+            fromSVGPath: function(pathString, tooltip) {
 
                 var segments = Snap.parsePathString(pathString);
                 var points = [];
@@ -114,6 +116,10 @@
 
                 this.$nextTick(() => {
                     this.addResizeHandlers();
+                    if (tooltip) {
+                        // FIXME Race condition with destroy
+                        setTimeout(() => this.addTooltip(), 250);
+                    }
                 });
             },
 
@@ -123,14 +129,20 @@
 
             addResizeHandler: function(handler) {
 
+                var self = this;
+
                 var circle = new Snap(handler);
 
                 var isDragged = false;
 
-                circle.click(function(e) {
-                    var key = parseInt(this.attr('data-key'), 10);
-                    if (key === 0 && self.points.length > 2) {
-                        self.closed = true;
+                circle.click((e) => {
+                    var key = parseInt(circle.attr('data-key'), 10);
+                    if (key === 0 && this.points.length > 2) {
+                        this.closed = true;
+                        this.$nextTick(() => {
+                            // FIXME Race condition with destroy
+                            setTimeout(() => this.addTooltip(), 250);
+                        });
                     }
                 });
 
@@ -141,8 +153,6 @@
                     this.points.splice(key, 1);
                 });
 
-                var self = this;
-
                 var dragEvents = {
                     onMove: function(dx, dy, x, y, e) {