add origin mod to properties & fix bugs

This commit is contained in:
2023-05-27 10:18:05 +02:00
parent da48045280
commit 84567f14d4
2 changed files with 21 additions and 8 deletions

View File

@@ -31,6 +31,11 @@
<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>
</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>
</div>
</template>
@@ -41,7 +46,7 @@ export default {
props: {
posSize: {
type: Object,
"default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100 }
"default": { 'x': 100, 'y': 100, 'w': 200, 'h': 100, 'origin': 1 }
},
scaleFactor: {
type: Number,
@@ -66,6 +71,11 @@ export default {
this.isEditing[ option ] = false;
this.$emit( 'updated', this.internal )
}
},
watch: {
posSize() {
console.log( 'posSize changed' );
}
}
}
</script>

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"
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">
<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>
</div>
</div>
@@ -46,7 +46,7 @@
data() {
return {
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 },
selectedObject: {},
scaleFactor: 1,
@@ -150,7 +150,7 @@
returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] / this.scaleFactor;
returnArray[ entry ][ attributes ] = Math.round( valueArray[ entry ][ attributes ] / this.scaleFactor );
} else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
}
@@ -165,7 +165,7 @@
returnArray[ entry ] = {};
for ( let attributes in valueArray[ entry ] ) {
if ( allowedAttributes.includes( attributes ) ) {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ] * this.scaleFactor;
returnArray[ entry ][ attributes ] = Math.round( valueArray[ entry ][ attributes ] * this.scaleFactor );
} else {
returnArray[ entry ][ attributes ] = valueArray[ entry ][ attributes ];
}
@@ -174,6 +174,7 @@
return returnArray;
},
activateComponent ( id ) {
console.log( id );
this.active = id;
this.selectedObject = this.draggables[ this.active ];
},
@@ -227,7 +228,7 @@
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 };
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();
},
deleteSelected () {
@@ -240,6 +241,7 @@
handleUpdate ( value ) {
this.draggables[ this.active ] = value;
this.selectedObject = value;
this.saveHistory();
}
},
created () {
@@ -255,8 +257,9 @@
<style scoped>
.parent {
aspect-ratio: 16 / 9;
height: 90vh;
left: 10%;
max-height: 90vh;
max-width: 90vw;
left: 5%;
position: relative;
border: black 1px solid;
user-select: none;