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

3 4
  div.cell-grid-container(
  :class="{'overflow-hidden': mobileTempCell.show && cachedNewCell && !mobileTempCell.button}")
5
    q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .75rem;")
6
      grid-editor-editing-cells-mobile
7 8 9
      //
        q-btn.absolute-top-right.q-ma-sm.bg-dark(@click="handleModal()", round, size="sm", flat)
          q-icon(name="clear")
10

11 12 13 14 15 16
    // this needs to stay for adding cells on mobile for whatever reason (strangest bug ever...)
    // FIXME: find the problem and fix it
    .mobile-only.fixed-top-left.q-caption.z-max.hidden
      .bg-red {{ cachedNewCell }}
      .bg-green {{ mobileTempCell }}

17
    q-window-resize-observable(@resize="updateGridDimensions")
Anton's avatar
Intial  
Anton committed
18

christianrhansen's avatar
christianrhansen committed
19 20
    // ------------------------------------------------------------------------------------------ cached new cell helper
    // q-page-sticky.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell", position="top-right")
christianrhansen's avatar
christianrhansen committed
21 22 23
    //
      .fixed-top-right.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell",
      // :style="{top: touch.position.top - 16 - 16 + 'px'}")
24
    // .fixed-top.z-top(v-touch-pan="moveCachedCell", v-if="cachedNewCell")
christianrhansen's avatar
christianrhansen committed
25 26
    #cell-helper.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
      q-item.q-px-md.q-py-none.full-height
27
        q-item-main
28
          | Place new cell
29
        q-item-side
30 31 32
          q-btn.bg-transparent.text-white.on-right(@click.native="clearTempCell()", round, flat,
          :disabled="!mobileTempCell.onGrid")
            q-icon(name="undo")
33
          q-btn.bg-transparent.text-white.on-right(@click.native="clearCachedCell()", round, flat)
34
            q-icon(name="delete")
35 36

    // ------------------------------------------------------------------------------------------------------------ grid
37
      @click="event => {addMobileCell(event)}",
Anton's avatar
Intial  
Anton committed
38
    div.cell-grid(
39
    v-touch-pan="panGrid",
40 41 42 43 44 45
    @dragenter="handleGridDragOver",
    @dragover="handleGridDragOver",
    @dragleave="handleGridDragEnd",
    @drop="handleGridDrop",
    @contextmenu="handleGridContextMenu",
    :style="gridStyle")
Anton's avatar
Intial  
Anton committed
46

47 48
      // context menu grid (desktop only)
      q-context-menu.desktop-only(ref="gridmenu")
Anton's avatar
Intial  
Anton committed
49 50
        q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
          q-item(
51 52 53 54 55
          v-for="action in gridContextMenuActions",
          :key="action.label",
          v-close-overlay,
          @click.native="event => {action.handler(event)}")
            q-item-main(:label="action.label")
Anton's avatar
Intial  
Anton committed
56 57 58

      template(v-if="!resizingGrid")

59
        template(v-for="(annotation, index) in annotations")
christianrhansen's avatar
christianrhansen committed
60 61

          //----- cell
62
          // v-touch-hold="event => {cellHold(event, annotation)}",
Anton's avatar
Intial  
Anton committed
63
          .cell-item(
64
          v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
65
          v-touch-hold="event => {handleCellInfoTouch(event, annotation)}",
66 67 68 69 70 71 72 73 74 75 76 77
          draggable="true",
          @click.prevent="event => {handleCellTouch(event, annotation)}",
          @dragstart="event => {handleCellDragStart(event, annotation)}",
          @dragend="event => {handleCellDragEnd(event, annotation)}",
          @contextmenu="handleCellContextMenu",
          :style="getAnnotationStyle(annotation)",
          :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
          :key="`cell-${index}`")

            //----- edit-/close-button
            // TODO: find a more elegant solution
            .desktop-only
Mathias Bär's avatar
Mathias Bär committed
78
              q-btn.edit-button.absolute-top-right(
79 80 81 82 83 84 85 86
              @click.prevent="event => {handleCellEditClick(event, annotation)}",
              :class="getAnnotationClasses(annotation._uuid, 'editing')",
              style="top: 8px; right: 8px;",
              :icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
              )
            .mobile-only
              q-btn.edit-button.absolute.fit.bg-transparent(
              @click.prevent="event => {touchMobileCell(event, annotation)}", flat)
christianrhansen's avatar
christianrhansen committed
87

88 89 90 91 92
              //----- invisible edit-modal handler
              //
                q-btn.absolute-top-left.bg-blue(
                @click.prevent="event => {handleCellInfoTouch(event, annotation)}", flat, style="opacity: 0") bla
                // @click.prevent="handleModal()", flat, style="opacity: 0") bla
93

94
            //----- selecting cells disabled because it has no use currently
95 96 97 98 99 100 101 102
            // switch with cell component below to re-enable it
            //cell(
              @click.native.prevent="event => {handleCellClick(event, annotation)}", :annotation="annotation", :preview="true")
            cell(
            :annotation="annotation",
            :preview="true"
            )

christianrhansen's avatar
christianrhansen committed
103
            //----- resize-handler (desktop only)
104
            .desktop-only.cell-item-resize-handle(
105 106 107 108
            draggable="true",
            @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
            @dragend="event => {handleCellResizerDragEnd(event, annotation)}",
            @dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
109
              q-icon.q-ma-xs(name="network cell")
110

111 112 113
            //----- context menu for cells (desktop only)
            // TODO: needs revision
            q-context-menu.desktop-only
114 115 116 117 118 119 120
              q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
                q-item(
                v-for="action in cellContextMenuActions",
                :key="action.label",
                v-close-overlay,
                @click.native="event => {action.handler(event, annotation)}")
                  q-item-main(:label="action.label")
Anton's avatar
Intial  
Anton committed
121

122
        //----- temporary cell when pulling a new cell into grid (desktop)
123
        template(v-for="(tmpCell, index) in tmpObjects")
124
          .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
Anton's avatar
Intial  
Anton committed
125 126
            cell(:cell="tmpCell")

127 128
        //------------------------- temporary cell (mobile)
        template(v-if="mobileTempCell.show && cachedNewCell")
129

130 131 132
          //----- cell
          .cell-item.cell-item-tmp-mobile.row.justify-center.items-center(:style="mobileTempCellStyle(mobileTempCell)")

christianrhansen's avatar
christianrhansen committed
133
            cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")
134 135 136 137

            q-btn.bg-dark.text-white(v-if="mobileTempCell.button",
            @click="event => {addMobileCell(event)}", round, flat)
              q-icon(name="check")
138

christianrhansen's avatar
christianrhansen committed
139 140 141 142 143 144 145 146 147
          //----- resize handler (top left)
          .resize-handler-mobile.top-left.text-dark.fixed.justify-center.row.bg-white.shadow-6(
          v-touch-pan="handleTopLeft", round, flat,
          :style="{left: resizeHandler.topLeft.x - 20 + 'px', top: resizeHandler.topLeft.y - 20 + 'px'}")
            // q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
            q-icon.self-center.rotate-180(name="open_with", size="22px")

          //----- resize handler (bottom right)
          .resize-handler-mobile.bottom-right.text-dark.fixed.justify-center.row.bg-white.shadow-6(
148
          v-touch-pan="testButton", round, flat,
christianrhansen's avatar
christianrhansen committed
149
          :style="{left: resizeHandler.bottomRight.x - 20 + 'px', top: resizeHandler.bottomRight.y - 20 + 'px'}")
150
            q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
151

christianrhansen's avatar
christianrhansen committed
152
      // ---------------------------------------------------------------------------------------------------------------
Anton's avatar
Intial  
Anton committed
153
      template(v-else)
154
        .cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
Anton's avatar
Intial  
Anton committed
155
          div.cell-item-resize-handle(
156 157 158 159 160
          draggable="true",
          @dragstart="event => {handleGridResizerDragStart(event)}",
          @dragend="event => {handleGridResizerDragEnd(event)}",
          @dragexit="event => {handleGridResizerDragEnd(event)}")
            q-icon(name="network cell")
Anton's avatar
Intial  
Anton committed
161

Mathias Bär's avatar
Mathias Bär committed
162
      //template(v-if="!isMobile")
163 164 165 166 167
        .fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
          q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
            q-icon(name="add")
          q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
            q-icon(name="remove red eye")
Mathias Bär's avatar
Mathias Bär committed
168
      //template(v-if="isMobile")
Mathias Bär's avatar
Mathias Bär committed
169 170 171 172 173
        .fixed-top-right.q-mt-sm(v-if="!$store.state.mosys.showSources", style="z-index: 10000; padding-top: 3px;")
          q-btn.q-mr-sm(round, color="primary", size="sm", @click="handleGridButtonClickEdit")
            q-icon(name="add")
          q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
            q-icon(name="remove red eye")
Anton's avatar
Intial  
Anton committed
174

christianrhansen's avatar
christianrhansen committed
175
    // ------------------------------------------------------------------------------------------ edit box (mobile only)
176

christianrhansen's avatar
christianrhansen committed
177
    q-page-sticky.edit-box.q-mx-md.q-mb-md.transition-bottom.backdrop-filter.shadow-6.overflow-hidden(
christianrhansen's avatar
christianrhansen committed
178
    v-if="isMobile",
179
    :class="[{'show-full' : carousel.visibility && showEditingCells}, {'show-minimized' : showEditingCells}]",
180
    style="border-radius: .5rem;",
181
    position="bottom-right")
christianrhansen's avatar
christianrhansen committed
182

183
      //------------------------- buttons
184 185
      // .row.text-dark(style="background-color: rgba(0, 0, 0, .2);")
      .row.text-dark(style="background-color: rgba(255, 150, 150, .3);")
186 187 188

        //----- delete cell
        .col
christianrhansen's avatar
christianrhansen committed
189
          q-btn.q-py-none.q-pl-sm.q-ml-xs(
190
            @click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
191
            q-icon(name="delete")
christianrhansen's avatar
christianrhansen committed
192

193 194
        //----- toggle edit-box
        .col.text-right
christianrhansen's avatar
christianrhansen committed
195
          q-btn.q-py-none.q-pr-sm.q-mr-xs(@click="carouselVisibility()", flat, no-ripple)
christianrhansen's avatar
christianrhansen committed
196 197
            q-icon(v-if="carousel.visibility", name="keyboard_arrow_down")
            q-icon(v-else, name="keyboard_arrow_up")
198

christianrhansen's avatar
christianrhansen committed
199
      //q-item-separator.q-ma-none
200 201 202 203 204 205

      //------------------------- carousel
      q-carousel.q-py-sm.carousel.transition-opacity(ref="carousel", v-model="slide",
      infinite, @input="getCarouselIcon(index)", style="width: 180px;")

        //----- move
christianrhansen's avatar
christianrhansen committed
206 207
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat, size="md")
              q-icon.rotate-90(name="keyboard_backspace")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat, size="md")
              q-icon(name="keyboard_backspace")
            q-btn.invisible.text-dark(round, flat, size="md")
              q-icon.flip-vertical(name="photo_size_select_small")
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat, size="md")
              q-icon.rotate-180(name="keyboard_backspace")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat, size="md")
              q-icon.rotate-270(name="keyboard_backspace")

        //----- resize
christianrhansen's avatar
christianrhansen committed
223 224
        // q-carousel-slide.q-py-sm
        q-carousel-slide.q-py-none
225 226 227 228 229 230 231 232 233 234 235 236 237
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat, size="md")
              q-icon(name="remove")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat, size="md")
              q-icon(name="remove")
            q-btn.invisible.text-dark(round, flat, size="md")
              q-icon.rotate-45(name="zoom_out_map")
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat, size="md")
              q-icon(name="add")
          .text-center
            q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
              q-icon(name="add")
Anton's avatar
Intial  
Anton committed
238 239 240 241
</template>

<script>
  import Cell from './Cell'
242 243
  import { userHasFeature } from 'mbjs-quasar/src/lib'
  import { mapGetters } from 'vuex'
244
  import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
Anton's avatar
Intial  
Anton committed
245 246 247 248 249 250

  const nullImage = new Image()
  nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='

  export default {
    components: {
251 252
      Cell,
      GridEditorEditingCellsMobile
Anton's avatar
Intial  
Anton committed
253
    },
254
    props: ['gridUuid', 'tabsAreOpen'],
Anton's avatar
Intial  
Anton committed
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279
    data () {
      return {
        gridContextMenuActions: {
          insert_column_left: {
            label: 'Insert Column Left',
            handler: this.handleGridContextMenuInsertColumnLeft
          },
          delete_column: {
            label: 'Delete Column',
            handler: this.handleGridContextMenuDeleteColumn
          },
          insert_row_above: {
            label: 'Insert Row Above',
            handler: this.handleGridContextMenuInsertRowAbove
          },
          delete_row: {
            label: 'Delete Row',
            handler: this.handleGridContextMenuDeleteRow
          },
          edit_grid_dimensions: {
            label: 'Change Grid',
            handler: () => { this.resizingGrid = !this.resizingGrid }
          }
        },
        grid: undefined,
280
        annotations: undefined,
281
        tmpObjects: [],
282
        annotationUIStates: {},
Anton's avatar
Anton committed
283
        gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
Anton's avatar
Intial  
Anton committed
284
        contextMenuClickPosition: {},
285
        resizingGrid: false,
christianrhansen's avatar
christianrhansen committed
286
        mobileSelectedCell: undefined,
287
        touch: {position: {top: undefined, left: undefined}},
288
        isMobile: this.$q.platform.is.mobile,
christianrhansen's avatar
christianrhansen committed
289
        mobileTempCell: {x: 0, y: 0, width: 1, height: 1, show: false, onGrid: false, button: false},
290
        slide: undefined,
291
        modal: false,
292
        carousel: {visibility: false, icon: 'open_with', slide: 0},
christianrhansen's avatar
christianrhansen committed
293 294 295 296 297
        // cursor: {x: undefined, y: undefined},
        resizeHandler: {
          topLeft: {x: undefined, y: undefined},
          bottomRight: {x: undefined, y: undefined}
        }
Anton's avatar
Intial  
Anton committed
298 299
      }
    },
300 301
    computed: {
      ...mapGetters({
christianrhansen's avatar
christianrhansen committed
302
        cachedNewCell: 'mosys/getNewCell',
303
        user: 'auth/getUserState',
304
        // isMobile: 'globalSettings/getIsMobile',
Mathias Bär's avatar
Mathias Bär committed
305
        // editingCells: 'mosys/getEditingCells'
306
        showEditingCells: 'mosys/getShowEditingCells',
307 308
        scrollPositionCache: 'mosys/getScrollPositionCache',
        editMode: 'mosys/getEditMode'
309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
      }),
      cellContextMenuActions () {
        const actions = {
          delete: {
            label: 'Delete',
            handler: this.handleCellContextMenuDelete
          },
          insert_column_left: {
            label: 'Insert Column Left',
            handler: this.handleGridContextMenuInsertColumnLeft
          },
          insert_row_above: {
            label: 'Insert Row Above',
            handler: this.handleGridContextMenuInsertRowAbove
          }
        }
        if (userHasFeature(this.user, 'cssediting')) {
          actions.edit_css_classname = {
            label: 'Edit CSS class name',
            handler: this.handleCellContextMenuEditCSS
          }
        }
        return actions
332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347
      },
      gridStyle () {
        if (!this.gridDimensions || !this.gridDimensions.full) return {}
        // TODO: fix mobile grid editor view
        const cell = this.gridDimensions.full.cell
        return {
          width: `${this.gridDimensions.full.width}px`,
          height: '100%',
          'grid-auto-columns': `${cell.width}px`,
          'grid-auto-rows': `${cell.height}px`,
          'background-image': `url("data:image/svg+xml;utf8,` +
            `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs>` +
            `<pattern id='smallGrid' width='${cell.width}' height='${cell.height}' patternUnits='userSpaceOnUse'>` +
            `<path d='M ${cell.width} 0 L 0 0 0 ${cell.height}' fill='none' stroke='gray' stroke-width='0.5'/>` +
            `</pattern></defs><rect width='100%' height='100%' fill='url(%23smallGrid)' /></svg>")`
        }
348 349
      }
    },
Anton's avatar
Intial  
Anton committed
350 351
    async mounted () {
      await this.fetchData()
352
      this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
353 354
    },
    watch: {
355 356 357 358 359 360 361 362 363 364
      slide (val) {
        let icon
        switch (val) {
        case 0:
          icon = 'open_with'
          break
        case 1:
          icon = 'photo_size_select_small'
          break
        case 2:
365
          icon = 'more_horiz'
366 367 368 369 370
          break
        default:
          icon = 'open_with'
          break
        }
371 372 373
        // this.carousel.slide = val
        // this.carousel.icon = icon
        this.carousel = {slide: val, icon: icon, visibility: this.carousel.visibility}
374
      },
Anton's avatar
Anton committed
375
      annotations () {
376
        this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
377 378 379 380 381 382
      },
      gridMetadata () {
        this.updateGridDimensions()
      },
      async gridUuid () {
        await this.fetchData()
Mathias Bär's avatar
Mathias Bär committed
383 384
      },
      showEditingCells (val) {
385
        // console.log('show editing cells', val)
Mathias Bär's avatar
Mathias Bär committed
386 387 388
        if (val === false) {
          this.updateAnnotationUIStates()
        }
389 390 391
      },
      tabsAreOpen () {
        this.resetScrollPosition()
Anton's avatar
Intial  
Anton committed
392 393 394
      }
    },
    methods: {
christianrhansen's avatar
christianrhansen committed
395 396 397 398 399 400 401 402
      handleTopLeft (obj) {
        this.resizeHandler.topLeft = {x: obj.position.left, y: obj.position.top}
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
        }
403

christianrhansen's avatar
christianrhansen committed
404 405 406 407 408 409 410 411 412 413 414
        this.mobileTempCell.x = res.x
        this.mobileTempCell.y = res.y

        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
        }
      },
      testButton (obj) {
        // this.cursor = {x: obj.position.left, y: obj.position.top}
        this.resizeHandler.bottomRight = {x: obj.position.left, y: obj.position.top}
415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434
        // ---> panGrid
        let res = this.getGridPositionForEvent(obj)

        if (obj.isFirst) {
          this.mobileTempCell.show = true
          this.mobileTempCell.button = false
          // this.mobileTempCell.x = res.x
          // this.mobileTempCell.y = res.y
        }

        this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
        this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1

        if (obj.isFinal) {
          this.mobileTempCell.onGrid = true
          this.mobileTempCell.button = true
          // this.addMobileCell(obj)
          // this.mobileTempCell.show = false
        }
      },
435 436 437 438
      clearCachedCell () {
        this.$store.commit('mosys/cacheNewCell', undefined)
        this.clearTempCell()
      },
439 440 441 442
      handleCellInfoTouch (event, annotation) {
        this.touchMobileCell(event, annotation)
        this.handleModal()
      },
443 444 445 446
      getCarouselIcon (val) {
        console.log(val)
      },
      carouselVisibility () {
447 448 449 450
        console.log(this.carousel.slide)
        if (this.$refs.carousel) {
          this.$refs.carousel.goToSlide(this.carousel.slide)
        }
451 452
        this.carousel.visibility = !this.carousel.visibility
      },
453 454 455
      handleModal () {
        this.modal = !this.modal
      },
456
      clearTempCell () {
457
        this.mobileTempCell = {x: undefined, y: undefined, width: undefined, height: undefined, onGrid: false, button: false}
458
      },
459
      panGrid (obj) {
460
        if (this.cachedNewCell && !this.mobileTempCell.onGrid) {
461
          // console.log('hhhhhhhhhhhhhhhhh', obj)
462 463 464 465
          let res = this.getGridPositionForEvent(obj)

          if (obj.isFirst) {
            this.mobileTempCell.show = true
466
            this.mobileTempCell.button = false
467 468 469 470 471 472 473 474
            this.mobileTempCell.x = res.x
            this.mobileTempCell.y = res.y
          }

          this.mobileTempCell.width = res.x - this.mobileTempCell.x + 1
          this.mobileTempCell.height = res.y - this.mobileTempCell.y + 1

          if (obj.isFinal) {
475
            this.mobileTempCell.onGrid = true
476
            this.mobileTempCell.button = true
477 478
            // this.addMobileCell(obj)
            // this.mobileTempCell.show = false
479
          }
480
        }
481
      },
482
      async cellHold (event, annotation) {
483 484
        this.$store.commit('mosys/setEditingCells', '')

485
        this.$q.notify({
486
          message: 'Copied.',
487
          color: 'dark',
488 489
          textColor: 'white',
          position: 'bottom-right'
490 491 492 493 494 495 496 497 498 499
        })

        const _cell = await this.$store.dispatch('cells/get', annotation.body.source.id)
        const resourceCell = {
          data: { content: '' },
          config: {},
          component: _cell.component
        }
        this.$store.commit('mosys/cacheNewCell', resourceCell)
      },
christianrhansen's avatar
christianrhansen committed
500 501
      moveCachedCell (obj) {
        this.touch.position = {top: obj.position.top, left: obj.position.left}
502 503 504 505 506 507 508 509 510
        /*
        if (obj.isFinal) {
          console.log(obj.isFinal)
          console.log(window.event)
          console.log(this.touch.position)
          console.log('--->->->', this.getGridPositionForEvent(event))
        }
        */
        // console.log('--->>>', this.getGridPositionForEvent(event))
christianrhansen's avatar
christianrhansen committed
511
      },
512 513
      addMobileCell (event) {
        // console.log('addMobileCell()', event, annotation)
christianrhansen's avatar
christianrhansen committed
514
        if (this.cachedNewCell) {
515
          this.handleGridDrop(event)
christianrhansen's avatar
christianrhansen committed
516
          this.$store.commit('mosys/cacheNewCell', undefined)
517 518
          this.$q.notify({
            message: 'Cell was added.',
519 520 521
            color: 'dark',
            position: 'center',
            timeout: 50
522
          })
christianrhansen's avatar
christianrhansen committed
523 524
        }
      },
525 526 527 528 529 530 531 532 533 534
      touchMobileCell (event, cell) {
        Object.keys(this.annotationUIStates).filter((k) => {
          if (k === cell._uuid && this.annotationUIStates[k].editing) console.log(k, cell._uuid)
          else this.annotationUIStates[k].editing = false
        })
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
        this.$root.$emit('mosys_saveScrollPosition')
        // this.handleCellEditClick(event, annotation)
      },
christianrhansen's avatar
christianrhansen committed
535
      handleCellTouch (event, annotation) {
536 537 538 539
        if (!this.cachedNewCell) {
          console.log(event, annotation)
          this.mobileSelectedCell = annotation
        }
christianrhansen's avatar
christianrhansen committed
540
      },
541 542 543
      async mobileCellMove (annotation, _x, _y) {
        let
          parsed = annotation.target.selector.parse(),
544
          sliced = parsed.xywh.slice(0, 4),
545
          x = sliced[0],
546 547 548 549 550 551 552 553 554 555 556 557 558 559 560
          y = sliced[1],
          w = sliced[2],
          h = sliced[3]

        // ----- x
        if (_x === -1) if (x > 1) x += _x
        if (_x === 1 && x < this.grid.config.columns - w + 1) x += _x

        // ----- y
        if (_y === -1) if (y > 1) y += _y
        if (_y === 1 && y < this.grid.config.rows - h + 1) y += _y

        // x += _x
        // y += _y

561 562 563 564 565 566 567 568
        let target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
        annotation.target.selector.value = target.selector.value
        await this.$store.dispatch('annotations/patch', [annotation.id, {
          target: {
            selector: { value: target.selector.value }
          }
        }])
      },
569
      async mobileCellResize (annotation, _w, _h) {
570 571 572
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
573 574 575 576 577 578 579 580 581 582 583 584

        // ----- w
        if (_w === -1) if (w > 1) w += _w
        if (_w === 1 && x < this.grid.config.columns - w + 1) w += _w

        // ----- h
        if (_h === -1) if (h > 1) h += _h
        if (_h === 1 && y < this.grid.config.rows - h + 1) h += _h

        // w += _w
        // h += _h

585 586 587 588 589 590 591 592
        const value = { xywh: [x, y, w, h] }
        annotation.target.selector.value = value

        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },
      setEditMode (mode) {
        this.$store.commit('mosys/setEditMode', mode)
      },
593 594 595 596
      //
      // DATA
      //

Anton's avatar
Intial  
Anton committed
597 598 599
      async fetchData () {
        if (this.gridUuid) {
          this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
600 601 602 603 604 605 606 607
          if (!Object.keys(this.grid.config).length) {
            this.grid.config = {
              columns: 10,
              rows: 6,
              ratio: 16 / 9.0
            }
            await this.updateGridMetadataStore()
          }
Anton's avatar
Intial  
Anton committed
608
          this.updateGridDimensions()
609 610 611 612 613 614
          const { items } = await this.$store.dispatch('annotations/find', {
            'target.id': this.grid.id,
            'body.purpose': 'linking',
            'body.type': 'Cell'
          })
          this.annotations = items
Anton's avatar
Intial  
Anton committed
615 616
        }
      },
617 618 619
      async updateGridMetadataStore () {
        await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
        this.updateGridDimensions()
Anton's avatar
Intial  
Anton committed
620
      },
621 622 623 624 625
      updateSelectedCells () {
        const _this = this
        let selectedCells = Object.keys(this.annotationUIStates).filter(k => {
          return _this.annotationUIStates[k].selected
        }).map(k => {
Christian Hansen's avatar
Christian Hansen committed
626 627
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
628
        })
christianrhansen's avatar
christianrhansen committed
629
        console.log('wwww', selectedCells)
630
        this.$store.commit('mosys/setSelectedCells', selectedCells)
Anton's avatar
Intial  
Anton committed
631
      },
Mathias Bär's avatar
Mathias Bär committed
632 633 634 635 636 637 638 639
      updateEditingCells () {
        const _this = this
        let editingCells = Object.keys(this.annotationUIStates).filter(k => {
          return _this.annotationUIStates[k].editing
        }).map(k => {
          // return _this.cells.find(c => c._uuid === k)
          return _this.annotations.find(c => c._uuid === k)
        })
640 641 642 643 644 645 646
        /*
        console.log('this.annotationUIStates: ', this.annotationUIStates)
        console.log('editingCells: ', editingCells)
        if (this.isMobile) {
          console.log('MOBILE')
        }
        */
Mathias Bär's avatar
Mathias Bär committed
647 648
        this.$store.commit('mosys/setEditingCells', editingCells)
      },
649 650 651 652 653
      updateAnnotationUIStates () {
        let newAnnotationUIStates = {}
        this.annotations.forEach(a => {
          newAnnotationUIStates[a._uuid] = {
            selected: false,
Mathias Bär's avatar
Mathias Bär committed
654
            editing: false,
655
            beingResized: false,
Mathias Bär's avatar
Mathias Bär committed
656
            beginDragged: false,
657
            annotation: a
Anton's avatar
Intial  
Anton committed
658
          }
659 660
        })
        this.annotationUIStates = newAnnotationUIStates
Anton's avatar
Intial  
Anton committed
661
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
662
        this.updateEditingCells()
663
      },
664 665 666 667 668

      //
      // GRID DRAG & DROP HANDLERS
      //

669
      async handleGridDragOver (event) {
Anton's avatar
Intial  
Anton committed
670 671 672
        let _this = this
        if (this.resizingGrid) {
          const position = this.getGridPositionForEvent(event)
673 674
          this.grid.config.ratio = position.ox / (position.oy * 1.0)
          await this.updateGridMetadataStore()
Anton's avatar
Intial  
Anton committed
675 676
        }
        else {
677 678
          let annotation = this.annotations.filter(annotation => {
            if (!_this.annotationUIStates[annotation._uuid]) return false
Mathias Bär's avatar
Mathias Bär committed
679
            return _this.annotationUIStates[annotation._uuid].beingDragged ||
680
              _this.annotationUIStates[annotation._uuid].beingResized
Anton's avatar
Intial  
Anton committed
681 682
          }).shift()
          let offset, position
683 684 685 686
          if (!annotation) {
            annotation = {
              target: this.grid.get2DArea([1, 1], [1, 1])
            }
Anton's avatar
Intial  
Anton committed
687 688 689
            position = this.getGridPositionForEvent(event)
          }
          else {
690
            offset = this.annotationUIStates[annotation._uuid].draggingOffset
Anton's avatar
Intial  
Anton committed
691 692
            position = this.getGridPositionForEvent(event, offset)
          }
693 694
          if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
          const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
695
          if (event.dataTransfer.types.includes('text/plain')) {
696 697
            parsed.xywh[0] = position.x
            parsed.xywh[1] = position.y
Anton's avatar
Intial  
Anton committed
698 699 700
            event.preventDefault()
          }
          else {
701 702
            parsed.xywh[2] = Math.max(1, 1 + position.x - parsed.xywh[0])
            parsed.xywh[3] = Math.max(1, 1 + position.y - parsed.xywh[1])
Anton's avatar
Intial  
Anton committed
703
          }
704
          annotation.target.selector.value = parsed
Anton's avatar
Intial  
Anton committed
705 706 707
        }
      },
      handleGridDragEnd () {
708
        this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
709
      },
710
      async handleGridDrop (event) {
711 712 713 714 715
        let dropData
        if (event.dataTransfer) dropData = event.dataTransfer.getData('text/plain')
        if (!dropData) dropData = JSON.stringify(this.cachedNewCell)
        // console.log('handleGridDrop - event', event)
        // console.log('handleGridDrop - dropData', dropData)
716 717
        if (dropData) {
          dropData = JSON.parse(dropData)
718
          let annotation = this.annotations.find(a => a.id === dropData.id)
719 720 721 722 723
          const { x, y } = this.getGridPositionForEvent(
            event,
            annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
          )
          if (annotation) {
724 725 726
            const
              parsed = annotation.target.selector.parse(),
              target = this.grid.get2DArea([x, y], parsed.xywh.slice(2))
727 728 729 730 731 732
            annotation.target.selector.value = target.selector.value
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: {
                selector: { value: target.selector.value }
              }
            }])
Anton's avatar
Intial  
Anton committed
733 734
          }
          else {
735 736
            if (this.mobileTempCell.x) console.log('this.mobileTempCell', this.mobileTempCell)
            let test = this.grid.get2DArea([this.mobileTempCell.x, this.mobileTempCell.y], [this.mobileTempCell.width, this.mobileTempCell.height])
737 738 739 740 741 742 743 744 745 746 747
            const
              { data, config, component } = dropData,
              cell = await this.$store.dispatch('cells/post', { data, config, component })
            annotation = await this.$store.dispatch('annotations/post', {
              body: {
                type: 'Cell',
                purpose: 'linking',
                source: {
                  id: cell.id
                }
              },
748 749
              // target: this.grid.get2DArea([x, y], [1, 1])
              target: test
750
            })
751
            this.annotations.push(annotation)
Anton's avatar
Anton committed
752
            this.updateAnnotationUIStates()
Anton's avatar
Intial  
Anton committed
753
          }
754

755
          this.tmpObjects = []
Anton's avatar
Intial  
Anton committed
756 757
          event.preventDefault()
        }
758
        this.clearTempCell()
Anton's avatar
Intial  
Anton committed
759
      },
760 761 762 763

      //
      // CELL DRAG & DROP HANDLERS
      //
Mathias Bär's avatar
Mathias Bär committed
764 765 766
      handleCellEditClick (event, cell) {
        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
        this.updateEditingCells()
767
        this.$root.$emit('mosys_saveScrollPosition')
Mathias Bär's avatar
Mathias Bär committed
768
      },
769 770 771 772 773
      handleCellClick (event, cell) {
        this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
        this.updateSelectedCells()
      },
      handleCellDragStart (event, annotation) {
christianrhansen's avatar
christianrhansen committed
774
        console.log('§§§§§§§§', annotation)
775 776 777 778 779 780 781 782 783 784 785 786
        if (!this.isMobile) {
          if (!this.annotationUIStates[annotation._uuid].beingResized) {
            event.dataTransfer.setData('text/plain', JSON.stringify(annotation))
            event.dataTransfer.setDragImage(nullImage, 0, 0)
            let elContainerBoundingBox = this.$el.getBoundingClientRect()
            let elBoundingBox = event.target.getBoundingClientRect()
            let offset = {
              x: (event.clientX - elContainerBoundingBox.x) - (elBoundingBox.x - elContainerBoundingBox.x),
              y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y)
            }
            this.annotationUIStates[annotation._uuid].draggingOffset = offset
            this.annotationUIStates[annotation._uuid].beingDragged = true
787
          }
788
          this.tmpObjects.push(annotation)
789 790 791
        }
      },
      handleCellDragEnd (event, annotation) {
792 793 794
        if (!this.mobile) {
          this.annotationUIStates[annotation._uuid].beingDragged = false
        }
795 796 797 798
      },
      async handleCellContextMenuDelete (event, annotation) {
        this.annotationUIStates[annotation._uuid].selected = false
        this.updateSelectedCells()
Mathias Bär's avatar
Mathias Bär committed
799
        this.updateEditingCells()
800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842
        await this.$store.dispatch('cells/delete', annotation.body.source.id)
        await this.$store.dispatch('annotations/delete', annotation.id)
        this.annotations = this.annotations.filter(a => a.id !== annotation.id)
      },

      //
      // GRID RESIZE HANDLERS

      handleGridResizerDragStart (event) {
        event.dataTransfer.setDragImage(nullImage, 0, 0)
      },
      async handleGridResizerDragEnd () {
        await this.updateGridMetadataStore()
      },

      //
      // CELL RESIZE HANDLERS
      //

      handleCellResizerDragStart (event, annotation) {
        event.dataTransfer.setDragImage(nullImage, 0, 0)
        this.annotationUIStates[annotation._uuid].beingResized = true
        this.tmpObjects.push(annotation)
      },
      async handleCellResizerDragEnd (event, annotation) {
        let position = this.getGridPositionForEvent(event)
        let
          parsed = annotation.target.selector.parse(),
          [x, y, w, h] = parsed.xywh
        w = Math.max(1, 1 + position.x - x)
        h = Math.max(1, 1 + position.y - y)
        const value = { xywh: [x, y, w, h] }
        annotation.target.selector.value = value
        this.annotationUIStates[annotation._uuid].beingResized = false
        this.tmpObjects = []
        await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
      },

      //
      // CELL CONTEXT MENU
      //

      handleCellContextMenu (event) {
Anton's avatar
Intial  
Anton committed
843 844
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
      },
845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861
      async handleCellContextMenuEditCSS (event, annotation) {
        try {
          let styleClass = await this.$q.dialog({
            title: this.$t('forms.edit_css_class.title'),
            ok: this.$t('buttons.set_css_class'),
            cancel: this.$t('buttons.cancel'),
            prompt: {
              model: annotation.styleClass,
              type: 'text'
            }
          })
          if (styleClass) {
            if (!styleClass.length) styleClass = undefined
            else if (styleClass.indexOf('.') === 0) styleClass = styleClass.substr(1)
          }
          annotation.styleClass = styleClass
          this.$store.dispatch('annotations/patch', [annotation._uuid, { target: { styleClass: styleClass || null } }])
Anton's avatar
Intial  
Anton committed
862
        }
863 864 865 866 867 868 869 870 871
        catch (e) { /* dialog canceled */ }
      },

      //
      // GRID CONTEXT MENU
      //

      handleGridContextMenu (event) {
        this.contextMenuClickPosition = this.getGridPositionForEvent(event)
Anton's avatar
Intial  
Anton committed
872 873 874
      },
      async handleGridContextMenuInsertColumnLeft () {
        let position = this.contextMenuClickPosition
875 876 877 878 879 880 881 882
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] >= position.x) {
            parsed.xywh[0] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
883 884
          }
        }
885
        this.grid.config.columns += 1
Anton's avatar
Intial  
Anton committed
886 887 888 889
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteColumn () {
        let position = this.contextMenuClickPosition
890 891 892 893 894 895 896 897
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[0] > position.x) {
            parsed.xywh[0] -= 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
898 899
          }
        }
900
        this.grid.config.columns -= 1
Anton's avatar
Intial  
Anton committed
901 902 903 904
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuInsertRowAbove () {
        let position = this.contextMenuClickPosition
905 906 907 908 909 910 911 912
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[1] >= position.y) {
            parsed.xywh[1] += 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
913 914
          }
        }
915
        this.grid.config.rows += 1
Anton's avatar
Intial  
Anton committed
916 917 918 919
        await this.updateGridMetadataStore()
      },
      async handleGridContextMenuDeleteRow () {
        let position = this.contextMenuClickPosition
920 921 922 923 924 925 926 927
        for (let annotation of this.annotations) {
          const parsed = annotation.target.selector.parse()
          if (parsed.xywh[1] > position.y) {
            parsed.xywh[1] -= 1
            annotation.target.selector.value = parsed
            await this.$store.dispatch('annotations/patch', [annotation.id, {
              target: { selector: { value: parsed } }
            }])
Anton's avatar
Intial  
Anton committed
928 929
          }
        }
930
        this.grid.config.rows -= 1
Anton's avatar
Intial  
Anton committed
931 932
        await this.updateGridMetadataStore()
      },
933 934 935 936 937

      //
      // NAVIGATION
      //

Anton's avatar
Intial  
Anton committed
938
      handleGridButtonClickEdit () {
939
        this.$store.commit('mosys/toggleSources')
Anton's avatar
Intial  
Anton committed
940
      },
941 942 943 944 945

      //
      // GRID HELPERS
      //

Anton's avatar
Anton committed
946
      getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
947
        // console.log('###', event)
Anton's avatar
Anton committed
948
        offset = { x: 0, y: 0 } // TODO: remove quick fix
949 950 951 952 953 954 955

        let _clientX, _clientY

        if (event.clientX && event.clientY) {
          _clientX = event.clientX
          _clientY = event.clientY
        }
956
        if (event.position) {
957 958 959 960
          _clientX = event.position.left
          _clientY = event.position.top
        }

Anton's avatar
Intial  
Anton committed
961
        const elContainerBoundingBox = this.$el.getBoundingClientRect()
962 963 964 965
        const ox = _clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        const oy = _clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
        // const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
        // const oy = event.clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
Anton's avatar
Intial  
Anton committed
966 967
        const x = Math.ceil(ox / this.gridDimensions.full.cell.width)
        const y = Math.ceil(oy / this.gridDimensions.full.cell.height)
Anton's avatar
Anton committed
968
        return { x: x, y: y, ox: ox, oy: oy }
Anton's avatar
Intial  
Anton committed
969
      },
970 971 972 973
      updateGridDimensions (size) {
        if (!this.grid || !this.grid.config) return

        let elWidth = size ? size.width : this.$el.offsetWidth
974
        // let elHeight = size ? size.height : this.$el.offsetHeight
975
        let cellSizeRatio = this.grid.config.ratio
976 977
        // let gridHeight = elHeight
        let gridHeight = this.$el.offsetHeight
978
        let cellHeight = gridHeight / this.grid.config.rows
Anton's avatar
Intial  
Anton committed
979
        let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
980
        let gridWidth = cellWidth * this.grid.config.columns
Anton's avatar
Intial  
Anton committed
981
        let cellsPerWidth = elWidth / cellWidth
982
        let cellWidthMini = elWidth / this.grid.config.columns
Anton's avatar
Intial  
Anton committed
983 984 985 986 987 988 989 990 991 992 993 994 995
        let gridHeightMini = cellWidthMini / cellSizeRatio
        this.gridDimensions = {
          full: {
            width: gridWidth,
            height: gridHeight,
            cell: {
              width: cellWidth,
              height: cellHeight
            },
            cells_per_width: cellsPerWidth
          },
          mini: {
            width: elWidth,
996
            height: gridHeightMini * this.grid.config.rows,
Anton's avatar
Intial  
Anton committed
997 998 999 1000 1001 1002 1003
            cell: {
              width: cellWidthMini,
              height: gridHeightMini
            }
          }
        }
      },
1004 1005 1006
      mobileTempCellStyle (obj) {
        return {
          'grid-column-start': obj.x,
1007
          'grid-column-end': `span ${obj.width}`,
1008
          'grid-row-start': obj.y,
1009
          'grid-row-end': `span ${obj.height}`
1010 1011
        }
      },
1012 1013
      getAnnotationStyle (annotation) {
        const parsed = annotation.target.selector.parse()
Anton's avatar
Intial  
Anton committed
1014
        return {
1015 1016 1017 1018
          '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]}`
Anton's avatar
Intial  
Anton committed
1019
        }
Mathias Bär's avatar
Mathias Bär committed
1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032
      },
      getAnnotationClasses (uuid, which) {
        if (which === 'editing') {
          if (this.annotationUIStates[uuid].editing) {
            return 'bg-primary text-white'
          }
          else {
            return 'bg-grey'
          }
        }
        if (which === 'cell-item') {
          return {
            selected: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].selected : false,
1033 1034
            editing: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].editing : false,
            hover: !this.isMobile
Mathias Bär's avatar
Mathias Bär committed
1035 1036 1037
          }
        }
        else return {}
1038 1039 1040 1041
      },
      resetScrollPosition () {
        console.log('reset', this.scrollPositionCache, this.$el.scrollLeft)
        this.$el.scrollLeft = this.scrollPositionCache
Anton's avatar
Intial  
Anton committed
1042 1043 1044 1045 1046 1047
      }
    }
  }
</script>

<style scoped lang="stylus">
1048 1049
  @import '~variables'

Anton's avatar
Intial  
Anton committed
1050 1051 1052 1053 1054
  .cell-grid
    display grid
    background-color #eee

  .cell-item
1055
    border-radius .75rem
1056
    // backdrop-filter blur(3px)
Anton's avatar
Intial  
Anton committed
1057 1058

    &
1059
      // background-color rgba(0,0,0,0.2)
christianrhansen's avatar
christianrhansen committed
1060
      background-color rgba(200, 200, 200, .75)
1061
      border 1px solid rgba(0, 0, 0, .2)
Anton's avatar
Intial  
Anton committed
1062 1063 1064 1065 1066 1067 1068 1069 1070 1071
      margin 1px
      box-sizing border-box
      position relative
      overflow: hidden
      grid-column-start: 1
      grid-column-end: span 1
      grid-row-start: 1
      grid-row-end: span 1

    &:hover
1072
      /*background-color lightblue*/
Anton's avatar
Intial  
Anton committed
1073

Mathias Bär's avatar
Mathias Bär committed
1074 1075 1076 1077
      .edit-button
        display: block

    &.editing
1078
      /*background-color lightpink*/
1079
      // background rgba(255, 0, 0, .3)
christianrhansen's avatar
christianrhansen committed
1080
      background rgba(255, 150, 150, .8)
Mathias Bär's avatar
Mathias Bär committed
1081 1082 1083 1084

      .edit-button
        display: block

Anton's avatar
Intial  
Anton committed
1085 1086 1087
    &.selected
      background-color lightpink