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/AssetSelector.vue
+11 -3
View File
@@ -1,18 +1,26 @@
<template>
<slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
<v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
<v-card title="Assets">
<v-container>
<v-row>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
<v-img :src="`/asset/thumb/${v.asset?.thumb}`" @click="select(v.id)"></v-img>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2"
class="position-relative">
<v-img :src="`/asset/thumb/${v.asset?.thumb}`" @click="select(v.id)"
class="cursor-pointer"></v-img>
<div class="d-flex">
<span class="flex-grow-1">{{ v.name }}</span>
<v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{ $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
<v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{
$p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
<!-- <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn> -->
</div>
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
src/components/SceneDesigner/GameObject.vue
+7 -5
View File
@@ -1,16 +1,19 @@
<template>
<teleport to=".scene-designer" v-if="active">
<g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}">
<g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}" v-show="visible && parent.visible">
<line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
<svg-icon :src="`/asset/thumb/${modelValue.id||0}.webp`" :x="vd.x1" :y="vd.y1" :size="37"></svg-icon>
</g>
</teleport>
<v-card v-if="selected">
<v-card v-if="selected" class="py-4">
<asset-selector @select="modelValue.id = $event" type="GameObject">
<template v-slot:activator="props">
<v-btn v-bind="props" icon="mdi-panorama-outline"></v-btn>
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
</template>
</asset-selector>
<v-form class="py-4">
<v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
</v-form>
</v-card>
</template>
@@ -39,8 +42,7 @@ export default {
parent: Object
},
steps: [['x1', 'y1']],
icon: 'mdi-vector-line',
name: 'svg-game-object',
name: 'game-object',
modifiers: ['x1', 'y1'],
methods:{
intersect(v){
src/components/SceneDesigner/Scene.vue
+7 -8
View File
@@ -1,20 +1,20 @@
<template>
<teleport to=".scene-designer" v-if="active">
<g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}">
<g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="visible">
<svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
</g>
</teleport>
<v-card title="Scene" v-if="selected">
<v-form class="pa-4">
<v-text-field density="compact" :label="$l.name" v-model="modelValue.name"></v-text-field>
</v-form>
<asset-selector @select="modelValue.environment = $event" type="Scene">
<template v-slot:activator="props">
<v-btn v-bind="props" icon="mdi-panorama-outline"></v-btn>
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
</template>
</asset-selector>
<v-form class="py-4">
<v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
</v-form>
</v-card>
</template>
@@ -44,8 +44,7 @@ export default {
parent: Object
},
steps: [['x1', 'y1']],
icon: 'mdi-vector-line',
name: 'svg-scene',
name: 'scene',
modifiers: ['x1', 'y1'],
methods:{
intersect(v){
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);
})
return fi.reverse();
fi.push(i);
})
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 = [];
targetContainer.gameObjects = targetContainer.gameObjects || [];
targetContainer = targetContainer.gameObjects;
}else if(this.mode == 'Task'){
targetContainer.tasks = targetContainer.tasks || [];
targetContainer = targetContainer.tasks;
}else{
targetContainer = this.items
}
targetArray = this.selectedItem[0].data.gameObjects;
}
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;
}
}
src/components/SceneDesigner/Task.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<teleport to=".scene-designer" v-if="active">
<g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{task: true, selected}" v-show="visible && parent.visible">
<line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
<svg-icon :src="`/asset/thumb/${modelValue.id||0}.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
</g>
</teleport>
<v-card v-if="selected">
<v-form class="py-4">
<v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
</v-form>
<!-- <asset-selector @select="modelValue.id = $event" type="Task">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline">Choose game object</v-btn>
</template>
</asset-selector> -->
</v-card>
</template>
<script>
import SvgIcon from './SvgIcon.vue';
import Utils from '@/lib/utils';
export default {
emits:['target'],
components: { SvgIcon },
data(){
return {
active: false
}
},
mounted(){
this.active = true;
},
props:{
//context: Object,
modelValue: Object,
vd: Object,
selected: Boolean,
cid:String,
visible: Boolean,
parent: Object
},
steps: [['x1', 'y1']],
name: 'task',
modifiers: ['x1', 'y1'],
methods:{
intersect(v){
return Utils.intersectLineRect(this.vd, v);
}
}
}
</script>
src/pages/scenarios/[[id]].vue
+26 -14
View File
@@ -1,23 +1,26 @@
<template>
<v-card :title="id == 'add' ? $l.createScenario : $l.editScenario" class="container my-3">
<!-- <v-form class="pa-4" v-model="valid">
<v-container max-width="1400">
<v-expansion-panels v-model="panel">
<v-expansion-panel static :title="id == 'add' ? $l.createScenario : $l.editScenario" value="scenario">
<v-expansion-panel-text>
<v-form class="pa-4" v-model="valid">
<v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
</v-form> -->
<v-card-actions>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">
{{ $l.save }}
</v-btn>
</v-card-actions>
</v-card>
<SceneDesigner v-model="object"></SceneDesigner>
<div class="sceneDrawer" >
</v-form>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel static title="Edit scenes" value="scenes">
<v-expansion-panel-text>
<div>
<SceneDesigner v-model="object" ref="sceneDesigner"></SceneDesigner>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">Save</v-btn>
</v-container>
</template>
<script>
import SceneDesigner from '@/components/SceneDesigner/SceneDesigner.vue';
export default {
data() {
@@ -29,6 +32,7 @@ export default {
requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
},
loading: false,
panel: []
}
},
async mounted(){
@@ -41,6 +45,14 @@ export default {
return this.$route.params?.id;
}
},
watch:{
async panel(n){
if ((n||[]).includes('scenes')){
await this.$nextTick();
this.$refs.sceneDesigner.resize();
}
}
},
methods:{
async save(params) {
this.loading = true;
src/plugins/lang.js
+7 -4
View File
@@ -1,5 +1,5 @@
const lang = {
bg: {
bg0: {
createGameObject: 'Добавяне на игрови обект',
editGameObject: 'Редактиране на игрови обект',
name: 'Име',
@@ -25,10 +25,10 @@ const lang = {
yes: 'Да',
no: 'Не',
createScenario: 'Създаване на сценарий',
editScenario: 'Редкатиране на сценарий',
editScenario: 'Редактиране на сценарий',
addScene: 'Добавяне на сцена'
},
en: {
bg: {
createGameObject: 'Add game object',
editGameObject: 'Edit game object',
name: 'Name',
@@ -52,7 +52,10 @@ const lang = {
darkMode: 'Dark mode',
confirmDeletionOf: 'Confirm deletion of',
yes: 'Yes',
no: 'No'
no: 'No',
createScenario: 'Create scenario',
editScenario: 'Edit scenario',
addScene: 'Add scene'
}
}
src/styles/style.scss
+4
View File
@@ -2,3 +2,7 @@
margin:auto;
max-width: 1200px;
}
.v-btn {
text-transform: unset !important;
}