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

dev

Browse Source
This commit is contained in:
goynov
2025-03-18 12:21:21 +02:00
parent eaa46eeda8
commit 1f6ee77c24
17 changed files with 407 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneDesigner/SceneDesigner.vue
+20 -59
View File
@@ -26,12 +26,13 @@
<g class="scenes"></g>
</svg>
</div>
<v-navigation-drawer location="right" :width="!selectedItem.length ? 400 : expandDrawer ? 800 : 400">
<v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="small"
@click="expandDrawer = !expandDrawer" v-if="selectedItem.length"></v-btn>
<v-navigation-drawer location="right" :width="expandDrawer ? 800 : 400">
<v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="x-small" density="compact"
@click="expandDrawer = !expandDrawer" v-if="selectedItem.length" class="position-absolute z-100 ma-1"></v-btn>
<template v-for="(item, i) in flatItems" :key="i">
<component :is="components[item.__type]" :ref="'sc-' + item.__path" :vd="item.vd" v-model="item.data"
@target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
<component :is="components[item.__type]" :ref="`sc-${item.__path}`" :vd="item.vd" v-model="item.data"
@target="setTarget($event, item)" @preview="preview"
:visible="item.visible" :cid="item.id" :parent="item.__parent"
:selected="selectedItem.includes(item)">
</component>
</template>
@@ -41,7 +42,8 @@
: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`"
v-show="!item.__parent || item.__parent.vd.expanded" :color="[0,'secondary', 'primary', 'success'][item.__level]">
v-show="!item.__parent || item.__parent.vd.expanded" :base-color="item.vd.__showInView ? '' : 'grey'"
:color="[0,'secondary', 'primary', 'success'][item.__level]">
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small"
:icon="`mdi-eye${item.visible ? '' : '-off'}`"
@@ -58,6 +60,9 @@
</v-list>
</v-navigation-drawer>
</div>
<v-dialog v-model="previewDialog" width="auto" max-width="1200">
<AssetPreview :objectId="previewObject" autoplay></AssetPreview>
</v-dialog>
</template>
<script>
@@ -65,7 +70,7 @@ import GameObject from './GameObject.vue';
import Scene from './Scene.vue';
import SvgRectangle from './SvgRectangle.vue';
import Utils from '@/lib/utils';
import AssetSelector from './AssetSelector.vue';
import AssetSelector from '../AssetsManagement/AssetSelector.vue';
import Task from './Task.vue';
const components = {
@@ -104,7 +109,9 @@ export default {
type: 'Scene'
},
dialog: false,
expandDrawer: false
expandDrawer: false,
previewObject: null,
previewDialog: false
}
},
mounted(){
@@ -354,57 +361,11 @@ export default {
//console.log(item);
let p = item.__parent?.data?.items || this.items;
p.splice(p.indexOf(item), 1);
},
preview(v){
this.previewObject = v;
this.previewDialog = true;
}
}
}
</script>
<style lang="scss">
:root {
--svg-scale: 1;
}
.svg-container{
svg{
image{
clip-path: circle(50% at 50% 50%);
}
circle {
stroke: rgba(var(--v-theme-primary), .7);
fill:rgba(255,255,255,.5);
stroke-width: 2px;
}
g{
&.selected circle{
fill: rgba(var(--v-theme-secondary), .9);
}
}
line, path{
stroke: rgb(213, 226, 231);
stroke-width: calc( 2px * var(--svg-scale) );
}
g.selector {
line {
stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
}
}
text {
text-anchor: middle;
fill:rgb(var(--v-theme-on-surface));
stroke-width: 0;//calc( .1px * var(--svg-scale) );;
}
background-color: rgba(128,128,128,.05);
}
overflow: hidden;
width: 100%;
max-width: 100vw;
height: calc(100vh - 244px);
&.pan {
cursor: grab;
}
&.Scene, &.GameObject, &.Task {
cursor: grabbing;
}
}
</style>
</script>