Commit 64e2a5ff authored by christianrhansen's avatar christianrhansen

created via touch resizable temp mobile cell (not finished)

parent 49293545
Pipeline #16591 passed with stage
in 1 minute and 23 seconds
......@@ -20,6 +20,7 @@
// ------------------------------------------------------------------------------------------------------------ grid
div.cell-grid(
v-touch-pan="panGrid",
@click="event => {addMobileCell(event)}",
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
......@@ -101,6 +102,11 @@
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell")
//----- temporary cell (mobile)
.cell-item.cell-item-tmp-mobile(:style="mobileTempCellStyle(mobileTempCell)")
| blabla
// cell(:cell="tmpCell")
// ---------------------------------------------------------------------------------------------------------------
template(v-else)
.cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
......@@ -243,7 +249,8 @@
resizingGrid: false,
mobileSelectedCell: undefined,
touch: {position: {top: undefined, left: undefined}},
isMobile: this.$q.platform.is.mobile
isMobile: this.$q.platform.is.mobile,
mobileTempCell: {x: 0, y: 0, width: 1, height: 1}
}
},
computed: {
......@@ -321,6 +328,12 @@
}
},
methods: {
panGrid (obj) {
let res = this.getGridPositionForEvent(obj)
console.log(res)
this.mobileTempCell.x = res.x + 1
this.mobileTempCell.y = res.y + 1
},
async cellHold (event, annotation) {
this.$store.commit('mosys/setEditingCells', '')
......@@ -751,9 +764,23 @@
getGridPositionForEvent (event, offset = { x: 0, y: 0 }) {
// console.log('###', event)
offset = { x: 0, y: 0 } // TODO: remove quick fix
let _clientX, _clientY
if (event.clientX && event.clientY) {
_clientX = event.clientX
_clientY = event.clientY
}
if (event.position.left && event.position.top) {
_clientX = event.position.left
_clientY = event.position.top
}
const elContainerBoundingBox = this.$el.getBoundingClientRect()
const ox = event.clientX + this.$el.scrollLeft - elContainerBoundingBox.x - offset.x
const oy = event.clientY + this.$el.scrollTop - elContainerBoundingBox.y - offset.y
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
const x = Math.ceil(ox / this.gridDimensions.full.cell.width)
const y = Math.ceil(oy / this.gridDimensions.full.cell.height)
return { x: x, y: y, ox: ox, oy: oy }
......@@ -792,6 +819,15 @@
}
}
},
mobileTempCellStyle (obj) {
console.log(obj)
return {
'grid-column-start': obj.x,
'grid-column-end': obj.width,
'grid-row-start': obj.y,
'grid-row-end': obj.height
}
},
getAnnotationStyle (annotation) {
const parsed = annotation.target.selector.parse()
return {
......@@ -901,4 +937,7 @@
top -60px
&.show
top 0px
.cell-item-tmp-mobile
background-color rgba(0, 0, 255, .25)
</style>
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