More fixes for cells and sources

partials/GridEditor.vue

@@ -165,7 +165,7 @@
       await this.fetchData()
     },
     watch: {
-      cells () {
+      annotations () {
         this.updateAnnotationUIStates()
       },
       gridMetadata () {
@@ -198,7 +198,6 @@
             'body.type': 'Cell'
           })
           this.annotations = items
-          this.updateAnnotationUIStates()
         }
       },
       async updateGridMetadataStore () {
@@ -307,6 +306,7 @@
               target: this.grid.get2DArea([x, y], [1, 1])
             })
             this.annotations.push(annotation)
+            this.updateAnnotationUIStates()
           }
 
           this.tmpObjects = []

partials/GridEditorSourceDocuments.vue

@@ -25,8 +25,7 @@
   import { mapGetters } from 'vuex'
 
   const typeToIconName = {
-    'image': 'photo',
-    'video': 'local movies'
+    'image': 'photo'
   }
 
   export default {
@@ -78,13 +77,12 @@
       },
       handleItemDragStart (event, item) {
         const resourceCell = {
-          uuid: null,
-          type: this.getSimpleType(item.metaData['content-type'], true),
-          x: 1,
-          y: 1,
-          width: 1,
-          height: 1,
-          content: `${process.env.STORAGE_HOST}/files/${this.bucketName}/${item.name}`
+          data: {
+            content: `${process.env.STORAGE_HOST}/files/${this.bucketName}/${item.name}`,
+            type: this.getSimpleType(item.metaData['content-type'], true)
+          },
+          config: {},
+          component: 'CellImage'
         }
         event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
       }

partials/GridEditorSourcePieceMaker.vue

@@ -33,11 +33,11 @@
             q-item-side
               q-icon(
                 draggable="true",
-                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'Video')}",
+                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'CellVideo')}",
                 name="local movies", style="font-size: 1.8rem")
               q-icon(
                 draggable="true",
-                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'Annotation-List')}",
+                @dragstart.native="event => {handleItemDragStart(event, entry.annotation, 'CellAnnotationList')}",
                 name="comment", style="font-size: 1.8rem")
             q-item-main
               a(@click.prevent="event => {handleVideoItemClick(event, entry.annotation)}") {{entry.title || entry.annotation._uuid}}
@@ -108,18 +108,17 @@
       },
       handleVideoItemClick () {
       },
-      handleItemDragStart (event, item, type = 'Video') {
-        let videoCell = {
-          _uuid: null,
-          type: type,
-          x: 1,
-          y: 1,
-          width: 1,
-          height: 1,
-          content: type === 'Video' ? item.body.source.id : item._uuid,
-          sourceUuid: item._uuid
+      handleItemDragStart (event, item, component = 'CellVideo') {
+        const resourceCell = {
+          component,
+          config: {},
+          data: {
+            id: item.id,
+            sourceUuid: item._uuid,
+            content: component === 'CellVideo' ? item.body.source.id : item._uuid
+          }
         }
-        event.dataTransfer.setData('text/plain', JSON.stringify(videoCell))
+        event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
       }
     }
   }

partials/cells/CellAnnotationList.vue

@@ -71,7 +71,6 @@ export default {
   props: ['cell', 'display', 'preview', 'visible'],
   data () {
     return {
-      videoUuid: '',
       video: {},
       videoTime: {},
       videoMeta: {},
@@ -92,7 +91,6 @@ export default {
     }
   },
   async mounted () {
-    this.videoUuid = this.cell.sourceUuid
     const videoAnnotation = await this.$store.dispatch(
       'annotations/get',
       this.cell.sourceUuid
@@ -111,6 +109,9 @@ export default {
     this.$root.$on('grid-datetime', this.onGridDateTime)
   },
   computed: {
+    videoUuid () {
+      return this.cell ? this.cell.id : undefined
+    },
     currentIndex () {
       if (!this.annotations || !this.annotations.length) return
 

partials/cells/CellVideo.vue

@@ -66,7 +66,7 @@
     },
     async mounted () {
       if (this.cell && this.cell.data.sourceUuid) {
-        this.video = await this.$store.dispatch('annotations/get', this.cell.data.sourceUuid)
+        this.video = await this.$store.dispatch('annotations/get', this.cell.data.id)
         if (this.video) {
           this.videoTime = DateTime.fromMillis(this.video.target.selector._valueMillis)
           this.contextTime = this.videoTime