Commit ce57fe2c authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Adapting resizing to new layout

parent 8aeeaf1b
Pipeline #51372 passed with stage
in 39 seconds
<template>
<div class="home" >
<div id="grid">
<div class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<div @mousedown="resizeVertical($event, rowIndex)" class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<component :is="colBlock.type"></component>
</div>
</div>
......@@ -40,7 +40,8 @@ export default {
}
],
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {side: "", index: 0}
verticalResizeObject: {index: 0},
horizontalResizeObject: {row: 0, col: 0}
}
},
......@@ -59,10 +60,42 @@ export default {
},
resizeHorizontalMouseMove(event){
// Mouse movement
const deltaX = this.mouseDragPos.x - event.x;
this.mouseDragPos.x = event.x;
const row = this.horizontalResizeObject.row;
const col = this.horizontalResizeObject.col;
//const gaps = this.layout[this.horizontalResizeObject.row].blocks.length -1
let colIndex = col;
for (let i = 0; i < row; i++) {
const element = this.layout[i];
colIndex += element.blocks.length;
}
const leftCol = document.getElementsByClassName("col")[colIndex - 1];
const rigthCol = document.getElementsByClassName("col")[colIndex];
const contentWidth = leftCol.clientWidth + rigthCol.clientWidth + 40;
const totalFlex = this.layout[row].blocks[col -1].width + this.layout[row].blocks[col].width
const newLeftWidth = leftCol.clientWidth - deltaX
const newRightWidth = rigthCol.clientWidth + deltaX
var newFlexRight = contentWidth/newRightWidth;
var newFlexLeft = (newLeftWidth * parseFloat(newFlexRight))/newRightWidth;
const preAdjustedTotalFlex = newFlexRight+newFlexLeft
newFlexRight = (newFlexRight/preAdjustedTotalFlex)*totalFlex
newFlexLeft = (newFlexLeft/preAdjustedTotalFlex)*totalFlex
this.layout[row].blocks[col -1].width = newFlexLeft;
this.layout[row].blocks[col].width = newFlexRight
/*
rigthCol.style.flexGrow = parseFloat(newFlexRight)
leftCol.style.flexGrow = parseFloat(newFlexLeft)
*/
/*
// Left and Right box to be resized
let leftCol = document.getElementById("left-col");
let rightCol = document.getElementById("right-col");
......@@ -74,48 +107,41 @@ export default {
var flexLeft = (newLeftWidth * parseFloat(flexright))/newRightWidth;
rightCol.style.flexGrow = parseFloat(flexright);
leftCol.style.flexGrow = parseFloat(flexLeft);
*/
},
resizeVerticalMouseMove(event){
//console.log(event + " " + this.verticalResizeObject.side + " " + this.verticalResizeObject.index)
const deltaY = this.mouseDragPos.y - event.y;
this.mouseDragPos.y = event.y;
this[this.verticalResizeObject.side][this.verticalResizeObject.index].height -= deltaY
//console.log(this.mouseDragPos.y - event.y)
},
eventRemover(){
document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.removeEventListener("mouseup", this.eventRemover, false)
document.getElementsByTagName("html")[0].classList.remove("noselect");
this.layout[this.verticalResizeObject.index].height -= deltaY
},
resizeHorizontal(event, side){
resizeHorizontal(event, row, col){
if(event.offsetX < 0){
console.log(side)
this.mouseDragPos.x = event.x;
this.horizontalResizeObject.row = row;
this.horizontalResizeObject.col = col;
document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("noselect");
}
},
resizeRowHorizontal(event, side, rowIndex, colIndex){
console.log(event + " " + side + " " + rowIndex + " " + colIndex);
},
resizeVertical(event, side, index){
if(event.offsetY > this[side][index].height){
console.log("Resize now pls");
resizeVertical(event, index){
if(event.offsetY > this.layout[index].height){
this.mouseDragPos.y = event.y
this.verticalResizeObject.side = side;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.addEventListener("mouseup", this.eventRemover, false)
document.getElementsByTagName("html")[0].classList.add("noselect");
}
},
eventRemover(){
document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false)
document.removeEventListener("mouseup", this.eventRemover, false)
document.getElementsByTagName("html")[0].classList.remove("noselect");
}
},
......
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