Commit 1467d3a6 authored by Anton's avatar Anton

Changes for new data model

parent 43d60647
......@@ -33,6 +33,7 @@
props: ['gridUuid'],
data () {
return {
data: {},
grid: undefined,
annotations: [],
gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
......
......@@ -22,7 +22,7 @@
template(v-if="!resizingGrid")
template(v-for="(annotation, index) in annotations")
template(v-if="data.annotations", v-for="(annotation, index) in data.annotations")
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
draggable="true",
......@@ -169,7 +169,8 @@
import Cell from './Cell'
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { mapGetters } from 'vuex'
import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
import GridEditorEditingCellsMobile from './GridEditorEditingCellsMobile'
import constants from 'mbjs-data-models/src/constants'
const nullImage = new Image()
nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
......@@ -204,6 +205,7 @@
handler: () => { this.resizingGrid = !this.resizingGrid }
}
},
data: {},
grid: undefined,
annotations: undefined,
tmpObjects: [],
......@@ -264,7 +266,8 @@
}
},
async mounted () {
await this.fetchData()
this.data = await this.$store.dispatch('mosys/getGrid', this.gridUuid)
this.updateGridDimensions()
this.resetScrollPosition()
},
watch: {
......@@ -275,7 +278,7 @@
this.updateGridDimensions()
},
async gridUuid () {
await this.fetchData()
this.data = await this.$store.dispatch('mosys/getGrid', this.gridUuid)
},
showEditingCells (val) {
// console.log('show editing cells', val)
......@@ -339,25 +342,30 @@
async fetchData () {
if (this.gridUuid) {
this.grid = await this.$store.dispatch('maps/get', this.gridUuid)
if (!Object.keys(this.grid.config).length) {
this.grid.config = {
console.debug('Grid loaded', this.grid)
if (!this.grid.configuration.value && !this.grid.configuration.id) {
this.grid.configuration.value = {
columns: 10,
rows: 6,
ratio: 16 / 9.0
}
console.debug('Grid configuration initialised with', this.grid.configuration._value)
await this.updateGridMetadataStore()
}
this.updateGridDimensions()
const { items } = await this.$store.dispatch('annotations/find', {
'target.id': this.grid.id,
'body.purpose': 'linking',
'body.type': 'Cell'
})
const
query = {
'target.id': this.grid.id,
'body.purpose': 'linking',
'body.type': `${constants.BASE_URI_TERMS}Cell`
},
{ items } = await this.$store.dispatch('annotations/find', query)
console.debug('annotations query', query)
this.annotations = items
}
},
async updateGridMetadataStore () {
await this.$store.dispatch('maps/patch', [this.grid.id, { config: this.grid.config }])
await this.$store.dispatch('maps/patch', [this.grid.id, { configuration: this.grid.configuration }])
this.updateGridDimensions()
},
updateSelectedCells () {
......@@ -411,11 +419,11 @@
let _this = this
if (this.resizingGrid) {
const position = this.getGridPositionForEvent(event)
this.grid.config.ratio = position.ox / (position.oy * 1.0)
await this.updateGridMetadataStore()
Object.assign(this.data.configuration, { ratio: position.ox / (position.oy * 1.0) })
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
}
else {
let annotation = this.annotations.filter(annotation => {
let annotation = this.data.annotations.filter(annotation => {
if (!_this.annotationUIStates[annotation._uuid]) return false
return _this.annotationUIStates[annotation._uuid].beingDragged ||
_this.annotationUIStates[annotation._uuid].beingResized
......@@ -423,7 +431,7 @@
let offset, position
if (!annotation) {
annotation = {
target: this.grid.get2DArea([1, 1], [1, 1])
target: this.data.grid.get2DArea([1, 1], [1, 1])
}
position = this.getGridPositionForEvent(event)
}
......@@ -470,8 +478,8 @@
}
else {
const
{ data, config, component } = dropData,
cell = await this.$store.dispatch('cells/post', { data, config, component })
{ data, configuration, component } = dropData,
cell = await this.$store.dispatch('cells/post', { data, configuration, component })
annotation = await this.$store.dispatch('annotations/post', {
body: {
type: 'Cell',
......@@ -527,7 +535,7 @@
this.updateEditingCells()
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)
this.data.annotations = this.data.annotations.filter(a => a.id !== annotation.id)
},
//
......@@ -537,7 +545,7 @@
event.dataTransfer.setDragImage(nullImage, 0, 0)
},
async handleGridResizerDragEnd () {
await this.updateGridMetadataStore()
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
},
//
......@@ -600,7 +608,7 @@
},
async handleGridContextMenuInsertColumnLeft () {
let position = this.contextMenuClickPosition
for (let annotation of this.annotations) {
for (let annotation of this.data.annotations) {
const parsed = annotation.target.selector.parse()
if (parsed.xywh[0] >= position.x) {
parsed.xywh[0] += 1
......@@ -610,8 +618,8 @@
}])
}
}
this.grid.config.columns += 1
await this.updateGridMetadataStore()
this.data.configuration.columns++
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
},
async handleGridContextMenuDeleteColumn () {
let position = this.contextMenuClickPosition
......@@ -625,8 +633,8 @@
}])
}
}
this.grid.config.columns -= 1
await this.updateGridMetadataStore()
this.grid.configuration.columns = Math.max(1, this.grid.configuration.columns - 1)
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
},
async handleGridContextMenuInsertRowAbove () {
let position = this.contextMenuClickPosition
......@@ -640,8 +648,8 @@
}])
}
}
this.grid.config.rows += 1
await this.updateGridMetadataStore()
this.grid.configuration.rows++
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
},
async handleGridContextMenuDeleteRow () {
let position = this.contextMenuClickPosition
......@@ -655,8 +663,8 @@
}])
}
}
this.grid.config.rows -= 1
await this.updateGridMetadataStore()
this.data.configuration.rows = Math.max(1, this.data.configuration.rows - 1)
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
},
//
......@@ -681,18 +689,18 @@
return { x: x, y: y, ox: ox, oy: oy }
},
updateGridDimensions (size) {
if (!this.grid || !this.grid.config) return
if (!this.grid || !this.grid.configuration.value) return
let elWidth = size ? size.width : this.$el.offsetWidth
// let elHeight = size ? size.height : this.$el.offsetHeight
let cellSizeRatio = this.grid.config.ratio
let cellSizeRatio = this.grid.configuration._value.ratio
// let gridHeight = elHeight
let gridHeight = this.$el.offsetHeight
let cellHeight = gridHeight / this.grid.config.rows
let cellHeight = gridHeight / this.grid.configuration._value.rows
let cellWidth = elWidth / Math.round(elWidth / (cellHeight * cellSizeRatio))
let gridWidth = cellWidth * this.grid.config.columns
let gridWidth = cellWidth * this.grid.configuration._value.columns
let cellsPerWidth = elWidth / cellWidth
let cellWidthMini = elWidth / this.grid.config.columns
let cellWidthMini = elWidth / this.grid.configuration._value.columns
let gridHeightMini = cellWidthMini / cellSizeRatio
this.gridDimensions = {
full: {
......@@ -706,7 +714,7 @@
},
mini: {
width: elWidth,
height: gridHeightMini * this.grid.config.rows,
height: gridHeightMini * this.grid.configuration._value.rows,
cell: {
width: cellWidthMini,
height: gridHeightMini
......@@ -715,7 +723,8 @@
}
},
getAnnotationStyle (annotation) {
const parsed = annotation.target.selector.parse()
const parsed = annotation.target.selector._value
console.log('anno style', annotation, parsed)
return {
'grid-column-start': parsed.xywh[0],
'grid-column-end': `span ${parsed.xywh[2]}`,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment