diff --git a/src/webapp/src/components/seatplan/editor/window.vue b/src/webapp/src/components/seatplan/editor/window.vue index bc41b2d..ab5fceb 100644 --- a/src/webapp/src/components/seatplan/editor/window.vue +++ b/src/webapp/src/components/seatplan/editor/window.vue @@ -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 ); } }