Spaces:
Running
Running
File size: 2,338 Bytes
b4f9490 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<template>
<div class="video-tools">
<tool-button
:is-active="currentTool === 'arrow'"
@click="selectTool('arrow')"
title="Selection Tool"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 3l7 19 2.051-7.179L19 13 3 3z"/>
</svg>
</tool-button>
<tool-button
:is-active="currentTool === 'rectangle'"
@click="selectTool('rectangle')"
title="Rectangle Tool"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
</svg>
</tool-button>
<tool-button
:is-active="currentTool === 'positive'"
@click="selectTool('positive')"
title="Positive Point"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="currentColor">
<circle cx="12" cy="12" r="10" fill="#4CAF50"/>
<line x1="7" y1="12" x2="17" y2="12" stroke="white" stroke-width="2"/>
<line x1="12" y1="7" x2="12" y2="17" stroke="white" stroke-width="2"/>
</svg>
</tool-button>
<tool-button
:is-active="currentTool === 'negative'"
@click="selectTool('negative')"
title="Negative Point"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="currentColor">
<circle cx="12" cy="12" r="10" fill="#f44336"/>
<line x1="7" y1="12" x2="17" y2="12" stroke="white" stroke-width="2"/>
</svg>
</tool-button>
</div>
</template>
<script>
import ToolButton from './ToolButton.vue'
export default {
name: 'ToolBar',
components: {
ToolButton
},
props: {
currentTool: {
type: String,
required: true
}
},
emits: ['tool-selected'],
methods: {
selectTool(tool) {
this.$emit('tool-selected', tool)
}
}
}
</script>
<style scoped>
.video-tools {
width: 50px;
height: 100%;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
align-items: center;
}
</style> |