GridDisplay.vue 6.69 KB
Newer Older
Anton's avatar
Intial  
Anton committed
1 2
<template lang="pug">

3 4
  div.cell-grid-container(ref="gridContainer", @scroll="onScroll")
    q-window-resize-observable(@resize="updateGridDimensions")
Anton's avatar
Intial  
Anton committed
5
    div.cell-grid(:style="gridStyle")
6 7 8
      template(v-for="(annotation, index) in annotations")
        .cell-item(:style="getAnnotationStyle(annotation)")
            cell(:annotation="annotation", display="display")
Anton's avatar
Intial  
Anton committed
9

Mathias Bär's avatar
Mathias Bär committed
10
      //template(v-if="!isMobile")
11 12 13
        q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")
          q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}/annotate`)")
            q-icon(name="edit")
Mathias Bär's avatar
Mathias Bär committed
14 15 16 17
      //template(v-if="isMobile")
      .fixed-top-right.q-mt-sm.q-mr-md(v-if="$store.state.auth.user", style="z-index: 1000000000; padding-top: 3px;")
        q-btn(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}/annotate`)")
          q-icon(name="edit")
18
    style-tag(v-if="styles || stylesheetUrl", :styles="styles", :url="stylesheetUrl")
Anton's avatar
Intial  
Anton committed
19 20 21 22

</template>

<script>
23
  import { mapGetters } from 'vuex'
Anton's avatar
Intial  
Anton committed
24
  import Cell from './Cell'
Anton's avatar
Anton committed
25
  import StyleTag from '../../shared/elements/StyleTag'
26
  import { DateTime } from 'luxon'
Anton's avatar
Intial  
Anton committed
27 28 29

  export default {
    components: {
30 31
      Cell,
      StyleTag
Anton's avatar
Intial  
Anton committed
32 33 34 35 36 37
    },
    props: ['gridUuid'],
    data () {
      return {
        grid: undefined,
        annotations: [],
Anton's avatar
Anton committed
38
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
39
        gridStyle: {},
40 41
        styles: undefined,
        stylesheetUrl: undefined
Anton's avatar
Intial  
Anton committed
42 43
      }
    },
44
    computed: {
45 46 47
      ...mapGetters({
        isMobile: 'globalSettings/getIsMobile'
      }),
48 49
      queryPositionX () {
        if (this.$route.query.x) return parseInt(this.$route.query.x)
Anton's avatar
Anton committed
50
        else return null
51 52 53
      },
      globalTime () {
        return this.$route.query.datetime
54 55 56
      }
    },
    watch: {
Anton's avatar
Anton committed
57 58 59
      async gridUuid (val) {
        await this.loadGrid(val)
      },
60
      queryPositionX (val) {
61
        if (typeof val === 'number') this.scrollToGridCoordinates(val)
62 63
      },
      globalTime (val) {
64
        if (typeof val === 'string') this.broadcastDateTime(DateTime.fromISO(val, { setZone: true }))
65 66
      }
    },
Anton's avatar
Intial  
Anton committed
67
    async mounted () {
68
      await this.loadGrid(this.$route.params.uuid)
69
      this.$root.$emit('setBackButton', '/mosys/grids')
Anton's avatar
Anton committed
70 71
    },
    methods: {
72
      onScroll () {
73
        if (this.$route.query.x) this.$router.push({ query: {} })
74
      },
Anton's avatar
Anton committed
75 76 77 78 79 80 81 82 83 84
      async loadGrid (uuid) {
        this.grid = await this.$store.dispatch('maps/get', uuid)
        if (this.grid.stylesheet) {
          if (this.grid.stylesheet.id) {
            let stylesheetURL = this.grid.stylesheet.id
            if (stylesheetURL.indexOf(process.env.STORAGE_HOST) === 0) {
              if (localStorage.getItem('access_token')) {
                stylesheetURL += stylesheetURL.indexOf('?') > -1 ? '&' : '?'
                stylesheetURL += `token=${localStorage.getItem('access_token')}`
              }
85
            }
Anton's avatar
Anton committed
86 87 88 89
            this.stylesheetUrl = stylesheetURL
          }
          else if (this.grid.stylesheet.value) {
            this.styles = [this.grid.stylesheet.value]
90 91
          }
        }
Anton's avatar
Anton committed
92
        this.updateGridDimensions()
93

Anton's avatar
Anton committed
94
        const { items } = await this.$store.dispatch('annotations/find', {
95 96 97 98
          'body.type': 'Cell',
          'body.purpose': 'linking',
          'target.id': this.grid.id
        })
Anton's avatar
Anton committed
99
        this.annotations = items
100

Anton's avatar
Anton committed
101
        if (this.$route.query.x) this.scrollToGridCoordinates(parseInt(this.$route.query.x))
Anton's avatar
Anton committed
102
        else this.scrollToGridCoordinates(0)
Anton's avatar
Anton committed
103 104
        if (this.$route.query.datetime) this.broadcastDateTime(this.$route.query.datetime)
      },
105
      scrollToGridCoordinates (x = 0, y = 0) {
106 107 108 109
        this.$refs.gridContainer.scrollTo(
          Math.round(x * this.gridDimensions.full.cell.width),
          Math.round(y * this.gridDimensions.full.cell.height)
        )
110
      },
111 112 113 114
      broadcastDateTime (datetime) {
        if (typeof datetime === 'string') datetime = DateTime.fromISO(datetime)
        this.$root.$emit('grid-datetime', datetime)
      },
115
      updateGridDimensions (size) {
116 117
        if (!this.grid) return

118
        let elWidth = size ? size.width : this.$el.offsetWidth
119
        // let elHeight = size ? size.height : this.$el.offsetHeight
120
        let cellSizeRatio = this.grid.config.ratio
121 122
        // let gridHeight = elHeight
        let gridHeight = this.$el.offsetHeight
123
        let cellHeight = gridHeight / this.grid.config.rows
Anton's avatar
Intial  
Anton committed
124
        let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
125
        let gridWidth = cellWidth * this.grid.config.columns
Anton's avatar
Intial  
Anton committed
126
        let cellsPerWidth = elWidth / cellWidth
127 128
        // let cellWidthMini = elWidth / this.grid.config.columns
        // let gridHeightMini = cellWidthMini / cellSizeRatio
Anton's avatar
Intial  
Anton committed
129 130 131 132 133 134 135 136 137
        this.gridDimensions = {
          full: {
            width: gridWidth,
            height: gridHeight,
            cell: {
              width: cellWidth,
              height: cellHeight
            },
            cells_per_width: cellsPerWidth
138 139
          }
          /*
Anton's avatar
Intial  
Anton committed
140 141
          mini: {
            width: elWidth,
142
            height: gridHeightMini * this.grid.config.rows,
Anton's avatar
Intial  
Anton committed
143 144 145 146 147
            cell: {
              width: cellWidthMini,
              height: gridHeightMini
            }
          }
148 149 150 151 152 153 154
          */
        }
        this.gridStyle = {
          width: gridWidth + 'px',
          height: '100%',
          'grid-auto-columns': cellWidth + 'px',
          'grid-auto-rows': cellHeight + 'px'
Anton's avatar
Intial  
Anton committed
155
        }
156
        /*
Anton's avatar
Intial  
Anton committed
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
        if (elWidth > 800) {
          this.gridStyle = {
            width: this.gridDimensions.full.width + 'px',
            height: '100%',
            'grid-auto-columns': this.gridDimensions.full.cell.width + 'px',
            'grid-auto-rows': this.gridDimensions.full.cell.height + 'px'
          }
        }
        else {
          this.gridStyle = {
            width: '100%',
            height: this.gridDimensions.mini.height + 'px',
            'grid-auto-columns': this.gridDimensions.mini.cell.width + 'px',
            'grid-auto-rows': this.gridDimensions.mini.cell.height + 'px'
          }
        }
173
        */
Anton's avatar
Intial  
Anton committed
174
      },
175 176
      getAnnotationStyle (annotation) {
        const parsed = annotation.target.selector.parse()
177
        return {
178 179 180 181
          'grid-column-start': parsed.xywh[0],
          'grid-column-end': `span ${parsed.xywh[2]}`,
          'grid-row-start': parsed.xywh[1],
          'grid-row-end': `span ${parsed.xywh[3]}`
182
        }
Anton's avatar
Intial  
Anton committed
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205
      }
    }
  }
</script>

<style scoped lang="stylus">

  .cell-grid
    display grid

    .cell-item
      position relative
      overflow: hidden
      grid-column-start: 1
      grid-column-end: span 1
      grid-row-start: 1
      grid-row-end: span 1

      .cell-item-inner
        width 100%
        height 100%

</style>