janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

size normalisation of editor

Browse Source
This commit is contained in:
Janis Hutz
2023-05-20 13:10:14 +02:00
parent 48a5f99293
commit 1f4bbe691f
1 changed files with 73 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/webapp/src/components/seatplan/editor/window.vue
View File

@@ -45,6 +45,9 @@
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 } },
available: { 'redo': false, 'undo': false },
selectedObject: {},
scaleFactor: 1,
sizePoll: null,
prevSize: { 'h': window.innerHeight, 'w': window.innerWidth },
}
},
methods: {
@@ -60,16 +63,6 @@
runHook () {
let self = this;
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan' ) );
}
for ( let element in this.draggables ) {
if ( this.draggables[ element ].active ) {
this.activateComponent( element );
}
}
/*
Keybinds:
- Delete: delete selected object
@@ -96,10 +89,12 @@
}
};
this.loadSeatplan();
// TODO: build Zoom function (including touch gesture support)
if ( !sessionStorage.getItem( 'seatplan-history' ) ) {
sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.draggables } ) );
sessionStorage.setItem( 'seatplan-history', JSON.stringify( { '1': this.scaleDown( this.draggables ) } ) );
}
let history = sessionStorage.getItem( 'seatplan-history' ) ? JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) : {};
@@ -116,6 +111,64 @@
let supportedBrowser = [];
// TODO: Add warning for untested browsers & suboptimal window sizes!
},
eventHandler ( e ) {
if ( this.prevSize.h != window.innerHeight || this.prevSize.w != window.innerWidth ) {
this.prevSize = { 'h': window.innerHeight, 'w': window.innerWidth };
this.loadSeatplan();
}
},
loadSeatplan () {
/*
Calculate scale factor (this adds support for differently sized screens)
900px is the "default" height
*/
let height = $( document ).height() * 0.8;
this.scaleFactor = height / 900;
/*
Load seatplan
*/
// TODO: load from server
if ( sessionStorage.getItem( 'seatplan' ) ) {
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan' ) ) );
}
for ( let element in this.draggables ) {
if ( this.draggables[ element ].active ) {
this.activateComponent( element );
}
}
},
scaleDown ( valueArray ) {
const allowedAttributes = [ 'w', 'h', 'x', 'y' ]
let returnArray = {};
for ( let entry in valueArray ) {
returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] / this.scaleFactor;
} else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
}
}
}
return returnArray;
},
scaleUp ( valueArray ) {
const allowedAttributes = [ 'w', 'h', 'x', 'y' ]
let returnArray = {};
for ( let entry in valueArray ) {
returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] * this.scaleFactor;
} else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
}
}
}
return returnArray;
},
activateComponent ( id ) {
this.active = id;
this.selectedObject = this.draggables[ this.active ];
@@ -132,7 +185,7 @@
count = parseInt( Object.keys( history ).length + 1 );
sessionStorage.setItem( 'historyPos', count );
history[ count ] = this.draggables;
history[ count ] = this.scaleDown( this.draggables );
sessionStorage.setItem( 'seatplan-history', JSON.stringify( history ) );
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
@@ -145,7 +198,7 @@
if ( action === 'undo' ) {
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) > 1 ) {
sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) - 1 );
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ] );
this.available.redo = true;
if ( parseInt( sessionStorage.getItem( 'historyPos' ) ) < 2 ) {
this.available.undo = false;
@@ -156,7 +209,7 @@
} else if ( action === 'redo' ) {
if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) > parseInt( sessionStorage.getItem( 'historyPos' ) ) ) {
sessionStorage.setItem( 'historyPos', parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 );
this.draggables = JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ];
this.draggables = this.scaleUp( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) )[ sessionStorage.getItem( 'historyPos' ) ] );
this.available.undo = true;
if ( parseInt( Object.keys( JSON.parse( sessionStorage.getItem( 'seatplan-history' ) ) ).length ) < parseInt( sessionStorage.getItem( 'historyPos' ) ) + 1 ) {
this.available.redo = false;
@@ -167,7 +220,7 @@
}
},
save () {
sessionStorage.setItem( 'seatplan', JSON.stringify( this.draggables ) );
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
},
addNewElement () {
this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1 };
@@ -187,13 +240,17 @@
},
created () {
this.runHook();
this.sizePoll = setInterval( this.eventHandler, 250 );
},
unmounted() {
clearInterval( this.sizePoll );
}
}
</script>
<style scoped>
.parent {
width: 99.8%;
aspect-ratio: 16 / 9;
height: 80vh;
position: relative;
border: black 1px solid;