presentation
This commit is contained in:
@@ -26,11 +26,22 @@
|
||||
<g class="scenes"></g>
|
||||
</svg>
|
||||
</div>
|
||||
<v-navigation-drawer location="right" width="400">
|
||||
<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>
|
||||
<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"
|
||||
:selected="selectedItem.includes(item)">
|
||||
</component>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
<v-navigation-drawer>
|
||||
<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`" v-show="!item.__parent || item.__parent.vd.expanded">
|
||||
: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]">
|
||||
<template v-slot:prepend>
|
||||
<v-btn variant="plain" density="comfortable" size="small"
|
||||
:icon="`mdi-eye${item.visible ? '' : '-off'}`"
|
||||
@@ -45,13 +56,6 @@
|
||||
</template>
|
||||
</v-list-item>
|
||||
</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"
|
||||
:selected="selectedItem.includes(item)">
|
||||
</component>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -98,7 +102,9 @@ export default {
|
||||
assetSelector: {
|
||||
active: false,
|
||||
type: 'Scene'
|
||||
}
|
||||
},
|
||||
dialog: false,
|
||||
expandDrawer: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@@ -277,12 +283,11 @@ export default {
|
||||
id = `${this.components[this.mode].name}-${nid++}`
|
||||
}while (this.flatItems.find(i=>i.data.id == id));
|
||||
|
||||
let targetContainer = this.selectedItem[0]?.data; //this.items;
|
||||
if (targetContainer){
|
||||
let targetContainer = this.items;
|
||||
if (this.mode != 'Scene'){
|
||||
targetContainer = this.selectedItem[0]?.data; //this.items;
|
||||
targetContainer.items = targetContainer.items || [];
|
||||
targetContainer = targetContainer.items;
|
||||
}else{
|
||||
targetContainer = this.items
|
||||
}
|
||||
targetContainer.push({
|
||||
//__type: this.mode,
|
||||
@@ -337,7 +342,7 @@ export default {
|
||||
},
|
||||
select(){
|
||||
let r = Utils.adjustMinMax(this.selector);
|
||||
this.selectedItem = this.flatItems.filter(i=>this.$refs['svg-'+i.id][0].intersect(r));
|
||||
this.selectedItem = this.flatItems.filter(i=>this.$refs['sc-'+i.__path][0].intersect(r));
|
||||
},
|
||||
resize(){
|
||||
let r = this.$refs.svgContainer;
|
||||
@@ -384,11 +389,17 @@ export default {
|
||||
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: 95vh;
|
||||
height: calc(100vh - 244px);
|
||||
&.pan {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user