imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

list items

Browse Source
This commit is contained in:
goynov
2025-03-16 22:16:47 +02:00
parent 2a44578430
commit 733d212f17
8 changed files with 227 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneDesigner/SceneDesigner.vue
+101 -22
View File
@@ -23,7 +23,73 @@
<SvgRectangle v-model="selector" class="selector"></SvgRectangle>
</svg>
</div>
<v-navigation-drawer location="right">
<v-navigation-drawer location="right" width="400">
<v-list density="compact" nav v-model:selected="selectedItem"
:select-strategy="mode == 'select' ? 'leaf' : 'single-leaf'">
<v-list-item v-for="(item, i) in flatItems.toSorted((a,b)=>a.__path.localeCompare(b.__path))"
:key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`">
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${item.visible ? '' : '-off'}`"
@click.stop="item.visible = !item.visible"></v-btn>
<!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
</template>
<template v-slot:append>
<v-btn variant="plain" density="compact" class="float-right" size="small" color="red-darken-4" icon="mdi-delete"
@click="items.splice(i, 1)"></v-btn>
</template>
</v-list-item>
</v-list>
<v-list density="compact" v-model:selected="selectedItem"
:select-strategy="mode == 'select' ? 'independent' : 'single-independent'" selectable
open-strategy="multiple">
<v-list-group v-for="(item, i) in items" :key="i" :value="item" subgroup>
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" color="secondary">
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${item.visible ? '' : '-off'}`"
@click.stop="item.visible = !item.visible"></v-btn>
<!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
</template>
<v-list-item-title>
{{ item.data.title }}
<v-btn variant="plain" density="compact" class="float-right" size="small" color="red-darken-4" icon="mdi-delete"
@click="items.splice(i, 1)"></v-btn>
</v-list-item-title>
</v-list-item>
</template>
<v-list-group v-for="(go, i) in item.data.gameObjects" :key="i" :value="go" subgroup>
<template v-slot:activator="{ props }">
<v-list-item color="primary" v-bind="props" >
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${go.visible ? '' : '-off'}`"
@click.stop="go.visible = !go.visible"></v-btn>
</template>
<v-list-item-title>
{{ go.data.title }}
<v-btn variant="plain" density="compact" class="float-right" size="small" color="red-darken-4" icon="mdi-delete"
@click="item.data.gameObjects.splice(i, 1)"></v-btn>
</v-list-item-title>
</v-list-item>
</template>
<v-list-item v-for="(task, i) in go.data.tasks" :key="i" :value="task" color="primary">
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${task.visible ? '' : '-off'}`"
@click.stop="task.visible = !task.visible"></v-btn>
</template>
<v-list-item-title>
{{ task.data.title }}
<v-btn variant="plain" density="compact" class="float-right" size="small" color="red-darken-4" icon="mdi-delete"
@click="go.data.tasks.splice(i, 1)"></v-btn>
</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list-group>
</v-list>
<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"
@@ -40,9 +106,10 @@ import Scene from './Scene.vue';
import SvgRectangle from './SvgRectangle.vue';
import Utils from '@/lib/utils';
import AssetSelector from './AssetSelector.vue';
import Task from './Task.vue';
const components = {
Scene, GameObject
Scene, GameObject, Task
}
export default {
@@ -113,16 +180,27 @@ export default {
},
flatItems(){
let fi = [];
this.items?.forEach(i=>{
this.items?.forEach((i, ii)=>{
i.__type = 'Scene';
fi.push(i);
i.data?.gameObjects?.forEach(go=>{
fi.push(go);
i.__path = `scene-${ii.toString().padStart(4, '0')}`;
i.__level = 1;
i.data?.gameObjects?.forEach((go, igo)=>{
go.__parent = i;
go.__type = 'GameObject';
go.__path = `${i.__path}.go-${igo.toString().padStart(4, '0')}`
go.__level = 2;
go.data.tasks?.forEach((t, it)=>{
fi.push(t);
t.__parent = go;
t.__type = 'Task';
t.__path = `${go.__path}.task-${it.toString().padStart(4, '0')}`
t.__level = 3;
})
fi.push(go);
})
fi.push(i);
})
return fi.reverse();
return fi;
}
},
methods:{
@@ -241,19 +319,22 @@ export default {
do {
id = `${this.components[this.mode].name}-${nid++}`
}while (this.flatItems.find(i=>i.id == id));
let targetArray = this.items;
let targetContainer = this.selectedItem[0]?.data; //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;
targetContainer.gameObjects = targetContainer.gameObjects || [];
targetContainer = targetContainer.gameObjects;
}else if(this.mode == 'Task'){
targetContainer.tasks = targetContainer.tasks || [];
targetContainer = targetContainer.tasks;
}else{
targetContainer = this.items
}
targetArray.push({
targetContainer.push({
//__type: this.mode,
vd: this.target.target,
data: {},
visible: true,
id, title: id
data: { title: id },
visible: true
})
}
}
@@ -305,9 +386,6 @@ export default {
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)
}
}
}
</script>
@@ -324,7 +402,7 @@ export default {
clip-path: circle(50% at 50% 50%);
}
circle {
stroke: rgb(var(--v-theme-primary));
stroke: rgba(var(--v-theme-primary), .7);
fill:rgba(255,255,255,.5);
stroke-width: 2px;
}
@@ -344,12 +422,13 @@ export default {
}
}
overflow: hidden;
width: 100%;
max-width: 100vw;
max-height: 95vh;
height: 95vh;
&.pan {
cursor: grab;
}
&.Scene, &.GameObject {
&.Scene, &.GameObject, &.Task {
cursor: grabbing;
}
}