Commit ea303568 authored by Christian Hansen's avatar Christian Hansen Committed by Anton Koch
Browse files

better gui solution for existing cells edit in mosys mobile (#5)

parent c56b6b97
......@@ -4,63 +4,74 @@
q-window-resize-observable(@resize="updateGridDimensions")
div.cell-grid(
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
@dragleave="handleGridDragEnd",
@drop="handleGridDrop",
@contextmenu="handleGridContextMenu",
:style="gridStyle")
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
@dragleave="handleGridDragEnd",
@drop="handleGridDrop",
@contextmenu="handleGridContextMenu",
:style="gridStyle")
q-context-menu(ref="gridmenu")
q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
q-item(
v-for="action in gridContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event)}")
q-item-main(:label="action.label")
v-for="action in gridContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event)}")
q-item-main(:label="action.label")
template(v-if="!resizingGrid")
template(v-for="(annotation, index) in annotations")
.cell-item(
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
draggable="true",
@dragstart="event => {handleCellDragStart(event, annotation)}",
@dragend="event => {handleCellDragEnd(event, annotation)}",
@contextmenu="handleCellContextMenu",
:style="getAnnotationStyle(annotation)",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
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
q-btn.edit-button.absolute-top-right(
@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"
)
// selecting cells disabled because it has no use currently
// 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"
)
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
@dragend="event => {handleCellResizerDragEnd(event, annotation)}",
@dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
q-icon(name="network cell")
q-context-menu
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")
@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)
// selecting cells disabled because it has no use currently
// 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"
)
//----- resize-handler (cell)
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
@dragend="event => {handleCellResizerDragEnd(event, annotation)}",
@dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
q-icon(name="network cell")
q-context-menu
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")
template(v-for="(tmpCell, index) in tmpObjects")
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
......@@ -69,11 +80,11 @@
template(v-else)
.cell-item(:style="getAnnotationStyle({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleGridResizerDragStart(event)}",
@dragend="event => {handleGridResizerDragEnd(event)}",
@dragexit="event => {handleGridResizerDragEnd(event)}")
q-icon(name="network cell")
draggable="true",
@dragstart="event => {handleGridResizerDragStart(event)}",
@dragend="event => {handleGridResizerDragEnd(event)}",
@dragexit="event => {handleGridResizerDragEnd(event)}")
q-icon(name="network cell")
//template(v-if="!isMobile")
.fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
......@@ -88,19 +99,85 @@
q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")
// --------------------------------------------------------------------------------------------------------- buttons
q-page-sticky.z-top.q-mb-md.backdrop-filter.shadow-1.q-mx-md.overflow-hidden(v-if="showEditingCells", position="bottom-right")
div.row.text-center.text-dark.round-borders.full-width(style="border-bottom: 1px solid #bbb;")
.col-3
q-btn.full-width(@click="setEditMode('edit')", :class="{'bg-primary text-white' : editMode === 'edit'}", flat, size="lg")
q-icon(name="edit")
.col-3
q-btn.full-width(@click="setEditMode('resize')", :class="{'bg-primary text-white' : editMode === 'resize'}", flat, size="lg")
q-icon.flip-vertical(name="photo_size_select_small")
.col-3
q-btn.full-width(@click="setEditMode('move')", :class="{'bg-primary text-white' : editMode === 'move'}", flat, size="lg")
q-icon(name="open_with")
.col-3
q-btn.full-width(@click="setEditMode('delete')", :class="{'bg-primary text-white' : editMode === 'delete'}", flat, size="lg")
q-icon(name="delete")
div.full-width
//----- edit
div#edit-content-mobile(v-if="editMode === 'edit'")
grid-editor-editing-cells-mobile
//----- move
div(v-if="editMode === 'move'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, 0, -1)", round, flat)
q-icon.rotate-90(name="keyboard_backspace")
.text-center
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, -1, 0)", round, flat)
q-icon(name="keyboard_backspace")
q-btn.invisible.text-dark(round, flat)
q-icon.flip-vertical(name="photo_size_select_small")
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, 1, 0)", round, flat)
q-icon.rotate-180(name="keyboard_backspace")
.text-center
q-btn.bg-dark(@click="mobileCellMove(mobileSelectedCell, 0, 1)", round, flat)
q-icon.rotate-270(name="keyboard_backspace")
//----- resize
div(v-if="editMode === 'resize'", :class="{'q-pa-md' : editMode}")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, -1)", round, flat)
q-icon(name="remove")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, -1, 0)", round, flat)
q-icon(name="remove")
q-btn.invisible.text-dark(round, flat)
q-icon.rotate-45(name="zoom_out_map")
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 1, 0)", round, flat)
q-icon(name="add")
.text-center
q-btn.bg-dark(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat)
q-icon(name="add")
//----- delete
div(v-if="editMode === 'delete'", :class="{'q-pa-md' : editMode}")
.text-center
.text-dark
| {{ $t('labels.delete_cell') }}
.q-mt-md
q-btn.bg-dark.text-white.q-mx-sm(@click="event => {handleCellContextMenuDelete(event, mobileSelectedCell)}", flat, round)
q-icon(name="check")
</template>
<script>
import Cell from './Cell'
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { mapGetters } from 'vuex'
import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
const nullImage = new Image()
nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
export default {
components: {
Cell
Cell,
GridEditorEditingCellsMobile
},
props: ['gridUuid', 'tabsAreOpen'],
data () {
......@@ -133,7 +210,8 @@
annotationUIStates: {},
gridDimensions: { gridWidth: 0, gridHeight: 0, cellWidth: 0, cellHeight: 0 },
contextMenuClickPosition: {},
resizingGrid: false
resizingGrid: false,
mobileSelectedCell: undefined
}
},
computed: {
......@@ -142,7 +220,8 @@
isMobile: 'globalSettings/getIsMobile',
// editingCells: 'mosys/getEditingCells'
showEditingCells: 'mosys/getShowEditingCells',
scrollPositionCache: 'mosys/getScrollPositionCache'
scrollPositionCache: 'mosys/getScrollPositionCache',
editMode: 'mosys/getEditMode'
}),
cellContextMenuActions () {
const actions = {
......@@ -199,7 +278,7 @@
await this.fetchData()
},
showEditingCells (val) {
console.log('show editing cells', val)
// console.log('show editing cells', val)
if (val === false) {
this.updateAnnotationUIStates()
}
......@@ -209,6 +288,50 @@
}
},
methods: {
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)
},
async mobileCellMove (annotation, _x, _y) {
let
parsed = annotation.target.selector.parse(),
sliced = parsed.xywh.slice(0, 2),
x = sliced[0],
y = sliced[1]
x += _x
y += _y
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 }
}
}])
},
handleCellTouch (event, annotation) {
console.log(event, annotation)
this.mobileSelectedCell = annotation
},
async mobileCellResize (annotation, width, height) {
let
parsed = annotation.target.selector.parse(),
[x, y, w, h] = parsed.xywh
w += width
h += height
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)
},
//
// DATA
//
......@@ -255,6 +378,13 @@
// return _this.cells.find(c => c._uuid === k)
return _this.annotations.find(c => c._uuid === k)
})
/*
console.log('this.annotationUIStates: ', this.annotationUIStates)
console.log('editingCells: ', editingCells)
if (this.isMobile) {
console.log('MOBILE')
}
*/
this.$store.commit('mosys/setEditingCells', editingCells)
},
updateAnnotationUIStates () {
......@@ -369,7 +499,6 @@
this.updateEditingCells()
this.$root.$emit('mosys_saveScrollPosition')
},
handleCellClick (event, cell) {
this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
this.updateSelectedCells()
......@@ -671,4 +800,13 @@
&:hover
color black
.backdrop-filter
backdrop-filter blur(6px)
background-color rgba(255, 255, 255, .3)
border-radius .5rem
#edit-content-mobile
width calc(100vw - 32px)
max-height calc(calc(100vh - 60px - 16px - 16px) / 2)
overflow-y scroll
</style>
......@@ -5,7 +5,7 @@
q-tab.q-pa-none.bg-dark.text-white(slot="title", name="tab-editing-cells")
q-item.full-width.q-py-none.q-pl-md.q-pr-sm
q-item-main
| {{ $t('routes.mosys.cells.edit_cell') }}
| {{ $t('routes.mosys.cells.edit_cell') }} Cell
q-item-side
q-btn.text-white(icon="check", size="md", flat, round, @click="handleCloseTabs()")
......
<template lang="pug">
cell-editor(:cells="editingCells")
</template>
<script>
import CellEditor from './CellEditor'
import { mapGetters } from 'vuex'
// import { userHasFeature } from 'mbjs-quasar/src/lib'
export default {
components: {
CellEditor
},
data () {
return {
}
},
computed: {
...mapGetters({
// user: 'auth/getUserState',
editingCells: 'mosys/getEditingCells'
})
/*
userHasDocuments () {
return userHasFeature(this.user, 'documents')
}
*/
},
mounted () {
},
beforeDestroy () {
// this.$store.commit('mosys/hideEditingCells')
},
methods: {
}
}
</script>
<style lang="stylus" scoped>
</style>
<style lang="stylus">
@import '~variables'
</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