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

add origin mod to properties & fix bugs

Browse Source
This commit is contained in:
Janis Hutz
2023-05-27 10:18:05 +02:00
parent da48045280
commit 84567f14d4
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/webapp/src/components/seatplan/editor/properties.vue
View File

@@ -31,6 +31,11 @@
<td><div v-if="!isEditing.h" @dblclick="activateEditing( 'h' )">{{ posSize.h }}px</div> <td><div v-if="!isEditing.h" @dblclick="activateEditing( 'h' )">{{ posSize.h }}px</div>
<input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'h' )"></td> <input v-else type="number" min="20" v-model="internal.w" @focusout="resubmit( 'h' )"></td>
</tr> </tr>
<tr>
<td>Origin:</td>
<td><div v-if="!isEditing.origin" @dblclick="activateEditing( 'origin' )">{{ posSize.origin }}</div>
<input v-else type="number" min="20" v-model="internal.origin" @focusout="resubmit( 'origin' )"></td>
</tr>
</table> </table>
</div> </div>
</template> </template>
@@ -41,7 +46,7 @@ export default {
props: { props: {
posSize: { posSize: {
type: Object, type: Object,
"default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100 } "default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100, 'origin': 1 }
}, },
scaleFactor: { scaleFactor: {
type: Number, type: Number,
@@ -66,6 +71,11 @@ export default {
this.isEditing[ option ] = false; this.isEditing[ option ] = false;
this.$emit( 'updated', this.internal ) this.$emit( 'updated', this.internal )
} }
},
watch: {
posSize() {
console.log( 'posSize changed' );
}
} }
} }
</script> </script>

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

@@ -15,7 +15,7 @@
<Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h" <Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h"
v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );" v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );"
@drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box"> @drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
<circularSeatplanComponent :scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h"></circularSeatplanComponent> <circularSeatplanComponent :scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h" :origin="draggable.origin"></circularSeatplanComponent>
</Vue3DraggableResizable> </Vue3DraggableResizable>
</div> </div>
</div> </div>
@@ -46,7 +46,7 @@
data() { data() {
return { return {
active: 0, active: 0,
draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1 } }, draggables: { 1: { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': 1, 'origin': 1, 'categories': { 1: 0 } } },
available: { 'redo': false, 'undo': false }, available: { 'redo': false, 'undo': false },
selectedObject: {}, selectedObject: {},
scaleFactor: 1, scaleFactor: 1,
@@ -150,7 +150,7 @@
returnArray[ entry ] = {}; returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) { for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) { if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] / this.scaleFactor; returnArray[ entry ][ attributes ] = Math.round( valueArray[ entry ][ attributes ] / this.scaleFactor );
} else { } else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ]; returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
} }
@@ -165,7 +165,7 @@
returnArray[ entry ] = {}; returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) { for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) { if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] * this.scaleFactor; returnArray[ entry ][ attributes ] = Math.round( valueArray[ entry ][ attributes ] * this.scaleFactor );
} else { } else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ]; returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
} }
@@ -174,6 +174,7 @@
return returnArray; return returnArray;
}, },
activateComponent ( id ) { activateComponent ( id ) {
console.log( id );
this.active = id; this.active = id;
this.selectedObject = this.draggables[ this.active ]; this.selectedObject = this.draggables[ this.active ];
}, },
@@ -227,7 +228,7 @@
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) ); sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
}, },
addNewElement () { 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 }; 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, 'origin': 1, 'categories': { 1: 0 } };
this.saveHistory(); this.saveHistory();
}, },
deleteSelected () { deleteSelected () {
@@ -240,6 +241,7 @@
handleUpdate ( value ) { handleUpdate ( value ) {
this.draggables[ this.active ] = value; this.draggables[ this.active ] = value;
this.selectedObject = value; this.selectedObject = value;
this.saveHistory();
} }
}, },
created () { created () {
@@ -255,8 +257,9 @@
<style scoped> <style scoped>
.parent { .parent {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
height: 90vh; max-height: 90vh;
left: 10%; max-width: 90vw;
left: 5%;
position: relative; position: relative;
border: black 1px solid; border: black 1px solid;
user-select: none; user-select: none;