link scenarios to backend
This commit is contained in:
@@ -1,28 +1,33 @@
|
||||
<template>
|
||||
<div class="container my-3">
|
||||
<v-btn-toggle variant="tonal" density="compact" class="mx-auto" v-model="mode" color="blue">
|
||||
<v-btn size="small" class="text-none" value="default" prepend-icon="mdi-cursor-default-click">Pointer</v-btn>
|
||||
<v-btn size="small" class="text-none" value="default"
|
||||
prepend-icon="mdi-cursor-default-click">Pointer</v-btn>
|
||||
<v-btn size="small" class="text-none" value="select" prepend-icon="mdi-select-multiple">Select</v-btn>
|
||||
<v-btn size="small" class="text-none" value="move" prepend-icon="mdi-cursor-move">Move</v-btn>
|
||||
<v-btn size="small" class="text-none" value="pan" prepend-icon="mdi-hand-back-right-outline">Pan</v-btn>
|
||||
|
||||
<v-btn size="small" class="text-none" value="scene" prepend-icon="mdi-panorama-outline">{{ $l.addScene }}</v-btn>
|
||||
<v-btn size="small" class="text-none" value="object" prepend-icon="mdi-bird">{{ $l.addScene }}</v-btn>
|
||||
<v-btn size="small" class="text-none" value="task" prepend-icon="mdi-checkbox-marked-circle-plus-outline">{{ $l.addScene }}</v-btn>
|
||||
<v-btn size="small" class="text-none" value="Scene" prepend-icon="mdi-panorama-outline">Add scene</v-btn>
|
||||
<v-btn size="small" class="text-none" value="GameObject"
|
||||
v-if="selectedItem.length == 1 && selectedItem[0].__type == 'Scene'" prepend-icon="mdi-bird">Add game
|
||||
object</v-btn>
|
||||
<v-btn size="small" class="text-none" value="Task"
|
||||
v-if="selectedItem.length == 1 && selectedItem[0].__type == 'GameObject'"
|
||||
prepend-icon="mdi-checkbox-marked-circle-plus-outline">Add task</v-btn>
|
||||
</v-btn-toggle>
|
||||
<div @wheel="onWheel" @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onDrag"
|
||||
:class="`svg-container ${mode}`" ref="svgContainer">
|
||||
<svg class="scene-designer" @resize="resize" :width="viewBox.w" :height="viewBox.h" :viewBox="`${vb.x} ${vb.y} ${vb.w} ${vb.h}`" x="0" y="0"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg class="scene-designer" @resize="resize" :width="viewBox.w" :height="viewBox.h"
|
||||
:viewBox="`${vb.x} ${vb.y} ${vb.w} ${vb.h}`" x="0" y="0" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<SvgRectangle v-model="selector" class="selector"></SvgRectangle>
|
||||
</svg>
|
||||
</div>
|
||||
<v-navigation-drawer location="right">
|
||||
<template v-for="(item, i) in flatItems" :key="i">
|
||||
<component :is="components[item.__type]" :ref="'svg-'+item.id"
|
||||
:vd="item.vd" v-model="item.data" @target="setTarget($event, item)"
|
||||
:visible="item.visible" :cid="item.id"
|
||||
:parent="item.__parent" :selected="selectedItem.includes(item)">
|
||||
<component :is="components[item.__type]" :ref="'svg-'+item.id" :vd="item.vd" v-model="item.data"
|
||||
@target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
|
||||
:selected="selectedItem.includes(item)">
|
||||
</component>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
@@ -34,17 +39,20 @@ import GameObject from './GameObject.vue';
|
||||
import Scene from './Scene.vue';
|
||||
import SvgRectangle from './SvgRectangle.vue';
|
||||
import Utils from '@/lib/utils';
|
||||
import AssetSelector from './AssetSelector.vue';
|
||||
|
||||
const components = {
|
||||
Scene, GameObject
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { AssetSelector },
|
||||
props:{
|
||||
modelValue: Object
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
context: this,
|
||||
mode: 'default',
|
||||
selectedItem: [],
|
||||
viewBox: {
|
||||
@@ -64,6 +72,10 @@ export default {
|
||||
modeStep: 0,
|
||||
mousedown: false,
|
||||
target: null,
|
||||
assetSelector: {
|
||||
active: false,
|
||||
type: 'Scene'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@@ -101,7 +113,7 @@ export default {
|
||||
},
|
||||
flatItems(){
|
||||
let fi = [];
|
||||
this.items.forEach(i=>{
|
||||
this.items?.forEach(i=>{
|
||||
i.__type = 'Scene';
|
||||
fi.push(i);
|
||||
i.data?.gameObjects?.forEach(go=>{
|
||||
@@ -228,10 +240,18 @@ export default {
|
||||
let id, nid = 1;
|
||||
do {
|
||||
id = `${this.components[this.mode].name}-${nid++}`
|
||||
}while (this.flatItems.find(i=>i.id == id))
|
||||
this.items.push({
|
||||
name: this.mode,
|
||||
data: this.target.target,
|
||||
}while (this.flatItems.find(i=>i.id == id));
|
||||
let targetArray = this.items;
|
||||
if (this.mode == 'GameObject'){
|
||||
if (this.selectedItem[0].data && !this.selectedItem[0].data.gameObjects){
|
||||
this.selectedItem[0].data.gameObjects = [];
|
||||
}
|
||||
targetArray = this.selectedItem[0].data.gameObjects;
|
||||
}
|
||||
targetArray.push({
|
||||
//__type: this.mode,
|
||||
vd: this.target.target,
|
||||
data: {},
|
||||
visible: true,
|
||||
id, title: id
|
||||
})
|
||||
@@ -284,6 +304,9 @@ export default {
|
||||
this.viewBox.w = r.clientWidth;
|
||||
this.viewBox.h = r.clientHeight;
|
||||
//this.zoom = Math.min(r.clientWidth / this.viewBox.w, r.clientHeight / this.viewBox.h);
|
||||
},
|
||||
assetSelected(e, v){
|
||||
console.log(e, v)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -311,7 +334,7 @@ export default {
|
||||
}
|
||||
}
|
||||
line, path{
|
||||
stroke: #19c;
|
||||
stroke: rgb(213, 226, 231);
|
||||
stroke-width: calc( 2px * var(--svg-scale) );
|
||||
}
|
||||
g.selector {
|
||||
@@ -326,5 +349,8 @@ export default {
|
||||
&.pan {
|
||||
cursor: grab;
|
||||
}
|
||||
&.Scene, &.GameObject {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user