list items

src/components/SceneDesigner/AssetSelector.vue

@@ -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-container>
+        <v-card title="Assets">
-            <v-row>
+            <v-container>
-                <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <v-row>
-                    <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"
-                    <div class="d-flex">
+                        class="position-relative">
-                        <span class="flex-grow-1">{{ v.name }}</span>
+                        <v-img :src="`/asset/thumb/${v.asset?.thumb}`" @click="select(v.id)"
-                        <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>
+                            class="cursor-pointer"></v-img>
-                        <!-- <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn> -->
+                        <div class="d-flex">
-                    </div>
+                            <span class="flex-grow-1">{{ v.name }}</span>
-                </v-col>
+                            <v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{
-            </v-row>
+                                $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
-        </v-container>
+                            <!-- <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

@@ -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: 'game-object',
-    name: 'svg-game-object',
     modifiers: ['x1', 'y1'],
     methods:{
         intersect(v){

src/components/SceneDesigner/Scene.vue

@@ -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: 'scene',
-    name: 'svg-scene',
     modifiers: ['x1', 'y1'],
     methods:{
         intersect(v){

src/components/SceneDesigner/SceneDesigner.vue

@@ -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.__path = `scene-${ii.toString().padStart(4, '0')}`;
-                i.data?.gameObjects?.forEach(go=>{
+                i.__level = 1;
-                    fi.push(go);
+                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){
+                            targetContainer.gameObjects = targetContainer.gameObjects || [];
-                                this.selectedItem[0].data.gameObjects = [];
+                            targetContainer = targetContainer.gameObjects;
-                            }
+                        }else if(this.mode == 'Task'){
-                            targetArray = this.selectedItem[0].data.gameObjects;
+                            targetContainer.tasks = targetContainer.tasks || [];
+                            targetContainer = targetContainer.tasks;
+                        }else{
+                            targetContainer = this.items
                         }
-                        targetArray.push({
+                        targetContainer.push({
                             //__type: this.mode,
                             vd: this.target.target,
-                            data: {},
+                            data: { title: id },
-                            visible: true,
+                            visible: true
-                            id, title: id
                         })
                     }
                 }
@@ -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

@@ -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

@@ -1,23 +1,26 @@
 <template>
-    <v-card :title="id == 'add' ? $l.createScenario : $l.editScenario" class="container my-3">
+    <v-container max-width="1400">
-        <!-- <v-form class="pa-4" v-model="valid">
+        <v-expansion-panels v-model="panel">
-            <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+            <v-expansion-panel static :title="id == 'add' ? $l.createScenario : $l.editScenario" value="scenario">
-        </v-form> -->
+                <v-expansion-panel-text>
-        <v-card-actions>
+                    <v-form class="pa-4" v-model="valid">
-            <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">
+                        <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                {{ $l.save }}
+                    </v-form>
-            </v-btn>
+                </v-expansion-panel-text>
-        </v-card-actions>
+            </v-expansion-panel>
-    </v-card>
+            <v-expansion-panel static title="Edit scenes" value="scenes">
-    <SceneDesigner v-model="object"></SceneDesigner>
+                <v-expansion-panel-text>
-        
+                    <div>
-        <div class="sceneDrawer" >
+                        <SceneDesigner v-model="object" ref="sceneDesigner"></SceneDesigner>
-    
+                    </div>
-    </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

@@ -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

@@ -1,4 +1,8 @@
 .container {
     margin:auto;
     max-width: 1200px;
+}
+
+.v-btn {
+    text-transform: unset !important;
 }