Commit 9be3ba8f authored by Lasse Overgaard Møldrup's avatar Lasse Overgaard Møldrup
Browse files

Made dragging more robust and fixed a bug

parent 706af213
Pipeline #53027 passed with stage
in 39 seconds
<template>
<div class="home">
<div id="grid">
<div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
<div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: dragging }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
@dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
<span class="col-preview">
<component :is="previewType"></component>
<span class="col-preview" v-show="rowIndex == activePreview.row" :ref="'preview' + rowIndex">
<component :is="activePreview.type"></component>
</span>
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" :class="colBlock.type"
v-show="!isDragged(rowIndex, colIndex)" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
......@@ -123,9 +123,10 @@ export default {
{name: "Kalender", type: "Calendar"}
],
prevWinWidth: 1000,
draggedBlock: null,
activePreview: null,
draggedBlock: { row: null, col: null },
activePreview: { row: null, type: null },
dragEnabled: true,
dragging: false,
deleting: false,
resizing: false
}
......@@ -384,13 +385,15 @@ export default {
// to be fired immediately if the timeout is not used
setTimeout(() => {
this.draggedBlock = { row, col };
this.dragging = true;
this.showDropPreview(row, col);
this.showDropPreview(event, row, col);
}, 10);
},
stopDrag() {
this.draggedBlock = null;
this.dragging = false;
this.hidePreview();
},
getDropPosition(event, row) {
......@@ -445,16 +448,12 @@ export default {
if (position === null)
return;
this.showDropPreview(row, position);
this.showDropPreview(event, row, position);
event.preventDefault();
},
showDropPreview(row, position) {
if (this.activePreview !== null)
this.hidePreview();
this.activePreview = row;
showDropPreview(event, row, position) {
const origRow = this.draggedBlock.row;
const origCol = this.draggedBlock.col;
const origBlock = this.layout[origRow].blocks[origCol];
......@@ -464,20 +463,15 @@ export default {
position++;
}
const targetRow = document.getElementById(row.toString());
const preview = targetRow.getElementsByClassName('col-preview')[0];
const preview = this.$refs['preview' + row];
preview.style.order = position;
preview.style.flexGrow = origBlock.width;
preview.style.display = 'block';
this.activePreview.row = row;
this.activePreview.type = origBlock.type;
},
drop(event, row) {
// If events get processed in an unfortunate order
if (this.draggedBlock === null)
return;
this.hidePreview();
const position = this.getDropPosition(event, row);
// Do nothing if row full
......@@ -514,22 +508,16 @@ export default {
}
}
this.draggedBlock = null;
this.hidePreview();
this.saveLayout("isaac");
},
hidePreview() {
if (this.activePreview === null)
return;
const targetRow = document.getElementById(this.activePreview.toString());
const preview = targetRow.getElementsByClassName('col-preview')[0];
preview.style.display = 'none';
this.activePreview = null;
this.activePreview = { row: null, type: null };
},
isDragged(row, col) {
return row === this.draggedBlock?.row && col === this.draggedBlock?.col;
return this.dragging && row === this.draggedBlock?.row && col === this.draggedBlock?.col;
},
saveLayout(id) {
......@@ -564,18 +552,6 @@ export default {
this.mobileLayoutResize();
},
computed: {
previewType() {
if (this.draggedBlock == null)
return null;
const origRow = this.draggedBlock.row;
const origCol = this.draggedBlock.col;
return this.layout[origRow].blocks[origCol].type;
}
},
provide() {
return {
dragEnabled: computed(() => this.dragEnabled),
......@@ -635,7 +611,6 @@ export default {
}
.col-preview {
display: none;
opacity: 0.5;
}
......
Supports Markdown
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