div.cell-grid-container(
:class="{'overflow-hidden': activeHandler}",
style="overflow-y: hidden; scroll-behavior: smooth;")
q-window-resize-observable(@resize="updateGridDimensions")
//----- modal for existing cell editing
q-modal(v-model="modal", minimized, content-css="background-color: #eee; border-radius: .5rem;")
grid-editor-editing-cells-mobile
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------- "new cell"-header
#new-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': cachedNewCell}")
q-item.q-pl-md.q-pr-xs.q-py-none.full-height
q-item-main
strong New {{ cachedNewCellType }}
q-item-side.text-white
q-btn(@click="event => {addMobileCell(event)}", round, flat)
q-icon(name="check")
q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cached cell')", flat)
q-icon(name="clear")
// ------------------------------------------------------------------------------------------ "selected cell"-header
#selected-cell-header.fixed-top.z-top.bg-dark.text-white.transition(:class="{'show': showEditingCells}")
q-item.q-pl-md.q-pr-none.q-py-none.full-height(v-if="!modal")
q-item-main
strong {{ selectedCell.type }}
q-item-side.text-white
q-btn.q-px-sm(@click="event => {handleCellEdit(event, selectedCell.annotation)}", flat)
q-icon(name="edit")
q-btn.q-px-sm.on-right.on-left(
@click="event => {handleCellContextMenuDelete(event, selectedCell.annotation)}", flat)
q-icon(name="delete")
q-btn.clear-button.q-px-md.q-mr-md.on-right(@click="clearHandler('cell')", flat)
q-icon(name="clear")
// -----------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------------------------------------------------------ grid
div.cell-grid.relative-position(
v-touch-pan="panGrid",
@dragenter="handleGridDragOver",
@dragover="handleGridDragOver",
@dragleave="handleGridDragEnd",
@drop="handleGridDrop",
@contextmenu="handleGridContextMenu",
:style="gridStyle")
//----------------------------------------------------------------------------------- context menu: grid (desktop)
q-context-menu.desktop-only(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")
template(v-if="!resizingGrid")
//--------------------------------------------------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------- cell
template(v-for="(annotation, index) in annotations")
// v-touch-hold="event => {cellCopy(event, annotation)}",
.cell-item(
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="getCellStyle(annotation)",
:class="getAnnotationClasses(annotation._uuid, 'cell-item')",
:key="`cell-${index}`")
//------------------------------------------------------------------------------------ edit-button (desktop)
.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")
//------------------------------------------------------------------------------------- select cell (mobile)
.mobile-only
.edit-button.absolute.fit.bg-transparent(
v-touch-hold="event => {handleCellEdit(event, annotation)}",
@click.prevent="event => {touchMobileCell(event, annotation)}")
//--------------------------------------------------------------------------------------------- cell content
//----- 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")
//-------------------------------------------------------------------------------------------------- desktop
//------------------------------------------------------------------------------------------- resize-handler
.desktop-only.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event, annotation)}",
@dragend="event => {handleCellResizerDragEnd(event, annotation)}",
@dragexit="event => {handleCellResizerDragEnd(event, annotation)}")
q-icon.q-ma-xs(name="network cell")
//-------------------------------------------------------------------------------------- context menu: cells
// TODO: needs revision
q-context-menu.desktop-only
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")
//----------------------------------------------------------------------------------------------- temporary cell
//------------------------------------------------------------------------------------------------------ desktop
template(v-for="(tmpCell, index) in tmpObjects")
.cell-item.cell-item-tmp(:style="getCellStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell")
//------------------------------------------------------------------------------------------------------- mobile
template(v-if="mobileTempCell.show && cachedNewCell")
.cell-item.cell-item-tmp-mobile(:style="getCellStyle(mobileTempCell)")
//------------------------------------------------------------------------------------------------------ handler
//--------------------------------------------------------------------------------------------------------- move
//----- (main)
cell-handler-mobile.main-handler.shadow-1(
v-if="!cellHandler.resize.pushed",
@onIntersectionChange="intersectionChanged",
:element="'move'",
v-touch-pan="handleMoveCell",
:style="{left: cellHandler.move.x - 20 + 'px', top: cellHandler.move.y - 20 + 'px'}",
:class="[{'pushed': !cellHandler.move.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
q-icon.rotate-180(name="open_with", size="22px")
//----- (temp)
//----- (when main move handler is outside of viewport)
cell-handler-mobile.temp-handler.shadow-1(
v-touch-pan="handleMoveCell",
:doubleTap="{el: $el, type: 'scroll', oLeft: mobileTempCell.left}",
:class="[(!mobileTempCell.onGrid || tempHandler.move.intersectingMainHandler || cellHandler.resize.pushed || cellHandler.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
:style="{top: cellHandler.move.y + 59 - 20 + 'px'}",)
q-icon.rotate-180(name="open_with", size="22px")
//------------------------------------------------------------------------------------------------------- resize
//----- (main)
cell-handler-mobile.main-handler.shadow-1(
v-if="!cellHandler.move.pushed",
@onIntersectionChange="intersectionChanged",
:element="'resize'",
v-touch-pan="handleResizeCell",
:style="{left: cellHandler.resize.x - 20 + 'px', top: cellHandler.resize.y - 20 + 'px'}",
:class="[{'pushed': !cellHandler.resize.pushed}, {'hide': !mobileTempCell.onGrid && !showEditingCells}]")
q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
//----- (temp)
//----- (when main resize handler is outside of viewport)
cell-handler-mobile.temp-handler.shadow-1(
v-touch-pan="handleResizeCell",
:class="[(!mobileTempCell.onGrid || tempHandler.resize.intersectingMainHandler || cellHandler.move.pushed || cellHandler.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
:style="{top: cellHandler.resize.y + 59 - 20 + 'px'}",)
q-icon(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
// ---------------------------------------------------------------------------------------------------------------
template(v-else)
.cell-item(:style="getCellStyle({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")
//template(v-if="!isMobile")
.fixed-top-right(style="right:18px; top:68px", v-if="!$store.state.mosys.showSources")
q-btn(round, color="primary", small, @click="handleGridButtonClickEdit", style="margin-right: 0.5em")
q-icon(name="add")
q-btn(round, color="primary", small, @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")
//template(v-if="isMobile")
.fixed-top-right.q-mt-sm(v-if="!$store.state.mosys.showSources", style="z-index: 10000; padding-top: 3px;")
q-btn.q-mr-sm(round, color="primary", size="sm", @click="handleGridButtonClickEdit")
q-icon(name="add")
q-btn.q-mr-md(round, color="primary", size="sm", @click="$router.push(`/mosys/grids/${$route.params.uuid}`)")
q-icon(name="remove red eye")