Commit aa964150 authored by Anton's avatar Anton
Browse files

Fix drag & drop on grid, fix delete cell action

parent 43a2ce1b
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
@click.native="event => {action.handler(event, annotation)}") @click.native="event => {action.handler(event, annotation)}")
q-item-main(:label="action.label") q-item-main(:label="action.label")
template(v-for="(tmpCell, index) in tmpCells") template(v-for="(tmpCell, index) in tmpObjects")
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`") .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell") cell(:cell="tmpCell")
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
annotations: undefined, annotations: undefined,
gridMetadata: {}, gridMetadata: {},
cells: [], cells: [],
tmpCells: [], tmpObjects: [],
annotationUIStates: {}, annotationUIStates: {},
gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 }, gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
gridStyle: {}, gridStyle: {},
...@@ -194,6 +194,7 @@ ...@@ -194,6 +194,7 @@
'body.type': 'Cell' 'body.type': 'Cell'
}) })
this.annotations = items this.annotations = items
this.updateAnnotationUIStates()
} }
}, },
handleGridResizerDragStart (event) { handleGridResizerDragStart (event) {
...@@ -206,7 +207,7 @@ ...@@ -206,7 +207,7 @@
event.dataTransfer.setDragImage(nullImage, 0, 0) event.dataTransfer.setDragImage(nullImage, 0, 0)
this.annotationUIStates[annotation._uuid].beingResized = true this.annotationUIStates[annotation._uuid].beingResized = true
let tmpCell = this.getTmpCell(annotation) let tmpCell = this.getTmpCell(annotation)
this.tmpCells.push(tmpCell) this.tmpObjects.push(tmpCell)
}, },
async handleCellResizerDragEnd (event, annotation) { async handleCellResizerDragEnd (event, annotation) {
let position = this.getGridPositionForEvent(event) let position = this.getGridPositionForEvent(event)
...@@ -218,16 +219,16 @@ ...@@ -218,16 +219,16 @@
const value = { xywh: [x, y, w, h] } const value = { xywh: [x, y, w, h] }
annotation.target.selector.value = value annotation.target.selector.value = value
this.annotationUIStates[annotation._uuid].beingResized = false this.annotationUIStates[annotation._uuid].beingResized = false
this.tmpCells = [] this.tmpObjects = []
await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }]) await this.$store.dispatch('annotations/patch', [annotation.id, { target: { selector: { value } } }])
}, },
handleCellClick (event, cell) { handleCellClick (event, cell) {
this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
this.updateSelectedCells() this.updateSelectedCells()
}, },
handleCellDragStart (event, cell) { handleCellDragStart (event, annotation) {
if (!this.annotationUIStates[cell._uuid].beingResized) { if (!this.annotationUIStates[annotation._uuid].beingResized) {
event.dataTransfer.setData('text/plain', JSON.stringify(cell)) event.dataTransfer.setData('text/plain', JSON.stringify(annotation))
event.dataTransfer.setDragImage(nullImage, 0, 0) event.dataTransfer.setDragImage(nullImage, 0, 0)
let elContainerBoundingBox = this.$el.getBoundingClientRect() let elContainerBoundingBox = this.$el.getBoundingClientRect()
let elBoundingBox = event.target.getBoundingClientRect() let elBoundingBox = event.target.getBoundingClientRect()
...@@ -235,11 +236,10 @@ ...@@ -235,11 +236,10 @@
x: (event.clientX - elContainerBoundingBox.x) - (elBoundingBox.x - elContainerBoundingBox.x), x: (event.clientX - elContainerBoundingBox.x) - (elBoundingBox.x - elContainerBoundingBox.x),
y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y) y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y)
} }
this.annotationUIStates[cell._uuid].draggingOffset = offset this.annotationUIStates[annotation._uuid].draggingOffset = offset
this.annotationUIStates[cell._uuid].beginDragged = true this.annotationUIStates[annotation._uuid].beginDragged = true
} }
let tmpCell = this.getTmpCell(cell) this.tmpObjects.push(annotation)
this.tmpCells.push(tmpCell)
}, },
handleCellDragEnd (event, cell) { handleCellDragEnd (event, cell) {
this.annotationUIStates[cell._uuid].beingDragged = false this.annotationUIStates[cell._uuid].beingDragged = false
...@@ -250,12 +250,12 @@ ...@@ -250,12 +250,12 @@
// // this.$store.commit('mosys/showSources') // // this.$store.commit('mosys/showSources')
// // this.$store.commit('mosys/setSourcesTab', 'tab-default-cells') // // this.$store.commit('mosys/setSourcesTab', 'tab-default-cells')
// }, // },
async handleCellContextMenuDelete (event, cell) { async handleCellContextMenuDelete (event, annotation) {
this.annotationUIStates[cell._uuid].selected = false this.annotationUIStates[annotation._uuid].selected = false
this.updateSelectedCells() this.updateSelectedCells()
this.cells = this.cells.filter(c => c !== cell) await this.$store.dispatch('cells/delete', annotation.body.source.id)
await this.$store.dispatch('annotations/delete', cell._uuid) await this.$store.dispatch('annotations/delete', annotation.id)
this.fetchCellAnnotations() this.annotations = this.annotations.filter(a => a.id !== annotation.id)
}, },
handleCellContextMenu (event) { handleCellContextMenu (event) {
this.contextMenuClickPosition = this.getGridPositionForEvent(event) this.contextMenuClickPosition = this.getGridPositionForEvent(event)
...@@ -304,30 +304,29 @@ ...@@ -304,30 +304,29 @@
offset = this.annotationUIStates[annotation._uuid].draggingOffset offset = this.annotationUIStates[annotation._uuid].draggingOffset
position = this.getGridPositionForEvent(event, offset) position = this.getGridPositionForEvent(event, offset)
} }
if (!this.tmpCells.length) this.tmpCells.push(annotation) if (!this.tmpObjects.length) this.tmpObjects.push(annotation)
let tmpCell = this.tmpCells[0] const parsed = annotation.target.selector.parse()
const parsed = tmpCell.target.selector.parse()
if (event.dataTransfer.types.includes('text/plain')) { if (event.dataTransfer.types.includes('text/plain')) {
tmpCell.target.selector.value = { xywh: [position.x, position.y] } annotation.target.selector.value = { xywh: [position.x, position.y] }
parsed.xywh[0] = position.x parsed.xywh[0] = position.x
parsed.xywh[1] = position.y parsed.xywh[1] = position.y
event.preventDefault() event.preventDefault()
} }
else { else {
parsed.xywh[2] = Math.max(1, 1 + position.x - tmpCell.x) parsed.xywh[2] = Math.max(1, 1 + position.x - parsed.xywh[0])
parsed.xywh[3] = Math.max(1, 1 + position.y - tmpCell.y) parsed.xywh[3] = Math.max(1, 1 + position.y - parsed.xywh[1])
} }
tmpCell.target.selector.value = parsed annotation.target.selector.value = parsed
} }
}, },
handleGridDragEnd () { handleGridDragEnd () {
this.tmpCells = [] this.tmpObjects = []
}, },
async handleGridDrop (event) { async handleGridDrop (event) {
let dropData = event.dataTransfer.getData('text/plain') let dropData = event.dataTransfer.getData('text/plain')
if (dropData) { if (dropData) {
dropData = JSON.parse(dropData) dropData = JSON.parse(dropData)
let annotation = this.cells.find(c => c.id === dropData.id) let annotation = this.annotations.find(a => a.id === dropData.id)
const { x, y } = this.getGridPositionForEvent( const { x, y } = this.getGridPositionForEvent(
event, event,
annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined annotation ? this.annotationUIStates[annotation._uuid].draggingOffset : undefined
...@@ -359,7 +358,7 @@ ...@@ -359,7 +358,7 @@
console.debug('dropped new cell', cell, annotation) console.debug('dropped new cell', cell, annotation)
} }
this.tmpCells = [] this.tmpObjects = []
// this.updateCellStore(cell) // this.updateCellStore(cell)
event.preventDefault() event.preventDefault()
} }
...@@ -451,7 +450,7 @@ ...@@ -451,7 +450,7 @@
}, },
updateAnnotationUIStates () { updateAnnotationUIStates () {
let newAnnotationUIStates = {} let newAnnotationUIStates = {}
this.annotations.map(a => { this.annotations.forEach(a => {
newAnnotationUIStates[a._uuid] = { newAnnotationUIStates[a._uuid] = {
selected: false, selected: false,
beingResized: false, beingResized: false,
......
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