Crosshair.vue 1.61 KB
Newer Older
Sascha Herzinger's avatar
Sascha Herzinger committed
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
<template>
    <g v-show="show">
        <line class="fjs-crosshair" :x2="width" :y1="posY" :y2="posY"></line>
        <line class="fjs-crosshair" :x1="posX" :x2="posX" :y2="height"></line>
    </g>
</template>

<script>
  export default {
    name: 'crosshair',
    data () {
      return {
        posX: 0,
        posY: 0,
        mouseWithin: false
      }
    },
    props: {
      width: {
        type: Number,
        required: true
      },
      height: {
        type: Number,
        required: true
      }
    },
    mounted () {
      this.$el.parentNode.addEventListener('mousemove', this.setMousePos)
30
31
      this.$el.parentNode.addEventListener('mouseover', () => { this.mouseWithin = true })
      this.$el.parentNode.addEventListener('mouseout', () => { this.mouseWithin = false })
Sascha Herzinger's avatar
Sascha Herzinger committed
32
    },
Sascha Herzinger's avatar
Sascha Herzinger committed
33
    beforeDestroy () {
Sascha Herzinger's avatar
Sascha Herzinger committed
34
      this.$el.parentNode.removeEventListener('mousemove', this.setMousePos)
35
36
      this.$el.parentNode.removeEventListener('mouseover', () => { this.mouseWithin = true })
      this.$el.parentNode.removeEventListener('mouseout', () => { this.mouseWithin = false })
Sascha Herzinger's avatar
Sascha Herzinger committed
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    },
    methods: {
      setMousePos (event) {
        this.posX = event.clientX - this.$el.getBoundingClientRect().x
        this.posY = event.clientY - this.$el.getBoundingClientRect().y
      }
    },
    computed: {
      show () {
        return this.posX >= 0 && this.posX <= this.width &&
          this.posY >= 0 && this.posY <= this.height &&
          this.mouseWithin
      }
    }
  }
</script>

<style lang="sass" scoped>
    .fjs-crosshair
        stroke: black
        stroke-width: 1px
        shape-rendering: crispEdges
</style>