src_js/iconolab-bundle/src/components/editor/ShapeRect.vue
changeset 418 a04c55054afe
parent 408 159042869b47
child 425 7bc5febc9933
--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Thu Mar 09 12:39:36 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Mon Mar 13 18:48:35 2017 +0100
@@ -6,7 +6,8 @@
         v-bind:width="width" v-bind:height="height"
         v-bind:stroke-width="handlerSize / 5"
         class="shape"
-        v-bind:class="{ 'shape--draggable': !readonly }"></rect>
+        v-bind:class="{ 'shape--draggable': !readonly }"
+        v-bind:style="{ 'outline-width': (handlerSize / 5) + 'px' }"></rect>
     <rect
         ref="topLeft"
         v-show="showResizeHandlers"
@@ -37,6 +38,7 @@
             'original-annotation',
             'tooltip',
             'readonly',
+            'original-path',
         ],
         data() {
             return {
@@ -79,6 +81,11 @@
 
             var g = new Snap(this.$refs.g);
             g.drag(groupEvents.onMove, groupEvents.onStart, groupEvents.onEnd);
+
+            if (this.originalPath) {
+                this.fromSVGPath(this.originalPath, false);
+                g.click(() => this.$emit('click'))
+            }
         },
         watch: {
             x: function (val, oldVal) {
@@ -208,8 +215,15 @@
 <style scoped>
 .shape {
     fill: transparent;
-    stroke: #000;
-    opacity: 0.6;
+    stroke: #fff;
+    outline-color: #000;
+    outline-style: solid;
+}
+.shape:hover,
+.shape.active {
+    cursor: pointer;
+    fill: #333;
+    opacity: 0.5;
 }
 .shape--draggable:hover {
     cursor: move;