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

lists

Browse Source
This commit is contained in:
goynov
2025-03-17 09:14:01 +02:00
parent 733d212f17
commit d5d8d60212
7 changed files with 56 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneDesigner/SceneDesigner.vue
+26 -62
View File
@@ -21,13 +21,16 @@
: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>
<g class="tasks"></g>
<g class="game-objects"></g>
<g class="scenes"></g>
</svg>
</div>
<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`">
:key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" v-show="!item.__parent || item.__parent.vd.expanded">
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${item.visible ? '' : '-off'}`"
@@ -35,60 +38,13 @@
<!-- <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>
<v-btn variant="plain" density="compact" size="small" color="red-darken-4" icon="mdi-delete"
@click="remove(item)"></v-btn>
<v-btn v-if="item.__type != 'Task'" :icon="item.vd.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
variant="plain" size="small" @click="item.vd.expanded = !item.vd.expanded"></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"
@@ -148,6 +104,7 @@ export default {
mounted(){
window.addEventListener('resize', this.resize);
this.resize();
this.object.scenes = this.object.scenes || [];
},
unmounted(){
window,removeEventListener('resize', this.resize);
@@ -184,12 +141,12 @@ export default {
i.__type = 'Scene';
i.__path = `scene-${ii.toString().padStart(4, '0')}`;
i.__level = 1;
i.data?.gameObjects?.forEach((go, igo)=>{
i.data?.items?.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)=>{
go.data.items?.forEach((t, it)=>{
fi.push(t);
t.__parent = go;
t.__type = 'Task';
@@ -318,22 +275,19 @@ export default {
let id, nid = 1;
do {
id = `${this.components[this.mode].name}-${nid++}`
}while (this.flatItems.find(i=>i.id == id));
}while (this.flatItems.find(i=>i.data.id == id));
let targetContainer = this.selectedItem[0]?.data; //this.items;
if (this.mode == 'GameObject'){
targetContainer.gameObjects = targetContainer.gameObjects || [];
targetContainer = targetContainer.gameObjects;
}else if(this.mode == 'Task'){
targetContainer.tasks = targetContainer.tasks || [];
targetContainer = targetContainer.tasks;
if (targetContainer){
targetContainer.items = targetContainer.items || [];
targetContainer = targetContainer.items;
}else{
targetContainer = this.items
}
targetContainer.push({
//__type: this.mode,
vd: this.target.target,
data: { title: id },
data: { title: id, id },
visible: true
})
}
@@ -375,6 +329,11 @@ export default {
setTarget(t, item){
this.target = t;
this.selectedItem = [item]
let i = item;
while (i){
i.vd.expanded = true;
i = i.__parent;
}
},
select(){
let r = Utils.adjustMinMax(this.selector);
@@ -386,6 +345,11 @@ export default {
this.viewBox.h = r.clientHeight;
//this.zoom = Math.min(r.clientWidth / this.viewBox.w, r.clientHeight / this.viewBox.h);
},
remove(item){
//console.log(item);
let p = item.__parent?.data?.items || this.items;
p.splice(p.indexOf(item), 1);
}
}
}
</script>