dev

src/components/SceneDesigner/Scene.vue

@@ -1,11 +1,14 @@
 <template>
     <teleport to=".scene-designer .scenes" v-if="active">
-        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="visible">
+        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="showInView">
             <svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
             <text :x="vd.x1" :y="vd.y1" dy="86">{{ modelValue.title }}</text>
+            <image v-if="modelValue.environment" href="/static/svg/play-circle.svg" width="20" class="cursor-pointer"
+                :x="vd.x1 + 60 - 10" :y="vd.y1 + 60 - 10" @click="$emit('preview', modelValue.environment)">
+            </image>
         </g>
     </teleport>
-    <v-card :title="modelValue.title" v-if="selected">
+    <v-card :title="modelValue.title" v-if="selected" class="mx-2" variant="text">
         <asset-selector @select="assignEnvironment" type="Scene">
             <template v-slot:activator="props">
                 <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
@@ -13,8 +16,8 @@
         </asset-selector>
 
         <v-form class="py-4">
-            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
-            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
+            <v-text-field density="compact" :label="l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
         </v-form>
     </v-card>
 </template>
@@ -22,10 +25,10 @@
 <script>
 import SvgIcon from './SvgIcon.vue';
 import Utils from '@/lib/utils';
-import AssetSelector from './AssetSelector.vue';
+import AssetSelector from '../AssetsManagement/AssetSelector.vue';
 
 export default {
-  emits:['target'],
+  emits:['target', 'preview'],
   components: { SvgIcon, AssetSelector },
     data(){
         return {
@@ -47,6 +50,12 @@ export default {
     steps: [['x1', 'y1']],
     name: 'scene',
     modifiers: ['x1', 'y1'],
+    computed:{
+        showInView(){
+            this.vd.__showInView = this.visible;
+            return this.vd.__showInView;
+        }
+    },
     methods:{
         intersect(v){
             return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);