diff -r 1c07ea9abcd5 -r 04ac84f80eb3 src_js/iconolab-bundle/src/components/editor/ShapeRect.vue --- 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' }"> + v-bind:style="{ 'outline-width': (strokeWidth / 2) + 'px' }"> + 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"> + 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"> @@ -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; }