Commit 0778b2ee authored by Jörg Richter's avatar Jörg Richter
Browse files

Add arrow head handle

See dmx-projects/zukunftswerk#29
parent 40d065ac
Pipeline #15454 passed with stage
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100" class="zw-arrow">
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="6" refX="0" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#909399" />
</marker>
</defs>
<line x1="0" y1="50" x2="250" y2="50" stroke="#909399" stroke-width="8" marker-end="url(#arrowhead)" />
</svg>
<div class="zw-arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 100">
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="6" refX="0" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#909399" />
</marker>
</defs>
<line x1="0" y1="50" x2="250" y2="50" stroke="#909399" stroke-width="8" marker-end="url(#arrowhead)" />
</svg>
<vue-drag-resize :isActive="true" :isResizable="false" :x="topic.pos.x" :y="topic.pos.y" w="auto" h="auto">
<div class="vdr-stick" :style="stickStyle">
</div>
</vue-drag-resize>
</div>
</template>
<script>
......@@ -19,6 +25,24 @@ export default {
type: dmx.ViewTopic,
required: true
}
},
computed: {
zoom () {
return this.$store.state.zoom
},
stickStyle () {
return {
width: `${8 / this.zoom}px`,
height: `${8 / this.zoom}px`
}
}
},
components: {
'vue-drag-resize': require('vue-drag-resize').default
}
}
</script>
......@@ -27,4 +51,7 @@ export default {
.zw-arrow {
max-width: 200px;
}
.zw-arrow .vdr-stick {
}
</style>
<template>
<vue-drag-resize :isActive="isActive" :x="topic.pos.x" :y="topic.pos.y" :w="w" h="auto" :sticks="['mr']"
<vue-drag-resize :isActive="isActive" :isResizable="isResizable" :x="topic.pos.x" :y="topic.pos.y" :w="w" h="auto" :sticks="['mr']"
:parentScaleX="zoom" :parentScaleY="zoom" @clicked="select" @dragstop="setPos" @resizestop="setSize">
<component :is="topic.typeUri" :topic="topic" :mode="mode" ref="detail" @mousedown.native="mousedown"></component>
</vue-drag-resize>
......@@ -58,6 +58,10 @@ export default {
return this.selectedTopic && this.selectedTopic.id === this.topic.id
},
isResizable () {
return this.topic.typeUri != 'zukunftswerk.arrow'
},
zoom () {
return this.$store.state.zoom
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment