src_js/iconolab-bundle/src/components/editor/ShapeRect.vue
changeset 449 04ac84f80eb3
parent 425 7bc5febc9933
--- a/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Fri Mar 17 18:05:37 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue	Fri Mar 17 18:17:07 2017 +0100
@@ -4,24 +4,22 @@
         ref="shape"
         x="0" y="0"
         v-bind:width="width" v-bind:height="height"
-        v-bind:stroke-width="handlerSize / 5"
+        v-bind:stroke-width="strokeWidth"
         class="shape"
         v-bind:class="{ 'shape--draggable': !readonly }"
-        v-bind:style="{ 'outline-width': (handlerSize / 5) + 'px' }"></rect>
+        v-bind:style="{ 'outline-width': (strokeWidth / 2) + 'px' }"></rect>
     <rect
         ref="topLeft"
         v-show="showResizeHandlers"
-        v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1"
-        v-bind:width="handlerSize" v-bind:height="handlerSize"
-        fill="#ffffff"
-        stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-top-left"></rect>
+        v-bind:x="((strokeWidth * 4) / 2) * -1" v-bind:y="((strokeWidth * 4) / 2) * -1"
+        v-bind:width="strokeWidth * 4" v-bind:height="strokeWidth * 4"
+        v-bind:stroke-width="strokeWidth" class="handler handler-top-left"></rect>
     <rect
         ref="bottomRight"
         v-show="showResizeHandlers"
-        v-bind:x="width - (handlerSize / 2)" v-bind:y="height - (handlerSize / 2)"
-        v-bind:width="handlerSize" v-bind:height="handlerSize"
-        fill="#ffffff"
-        stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-bottom-right"></rect>
+        v-bind:x="width - ((strokeWidth * 4) / 2)" v-bind:y="height - ((strokeWidth * 4) / 2)"
+        v-bind:width="strokeWidth * 4" v-bind:height="strokeWidth * 4"
+        v-bind:stroke-width="strokeWidth" class="handler handler-bottom-right"></rect>
 </g>
 </template>
 
@@ -39,6 +37,7 @@
             'tooltip',
             'readonly',
             'original-path',
+            'stroke-width'
         ],
         data() {
             return {
@@ -46,7 +45,6 @@
                 isResizing: false,
                 x: 0, y: 0,
                 width: 0, height: 0,
-                handlerSize: 60
             }
         },
         computed: {
@@ -228,6 +226,10 @@
 .shape--draggable:hover {
     cursor: move;
 }
+.handler {
+    fill: #fff;
+    stroke: #000;
+}
 .handler-top-left:hover {
     cursor: nw-resize;
 }