Hugging Face's logo

Spaces:
2nzi
/
PointTrackApp
Running

App Files Community
PointTrackApp
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>