--- 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;
}