material-editor/src/components/MaterialView.vue

<template>
    <CfFlex class="material-view">
        <div ref="container" class="material-view-container" />
        <MaterialAdjuster ref="adjuster" class="material-view-sider" :name="matName" :textureSrcList="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
    </CfFlex>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
import MaterialAdjuster from './MaterialAdjuster.vue';
import { useScene } from '../stores/sceneStore';
import CfFlex from './CfFlex.vue';
import { GetConfig } from '../lib/libOutputConfig';
import { useEvent } from '../stores/eventStore';
import { FromDeflateBase64 } from '../helpers/helper.material';

const scene = useScene();
const eventbus = useEvent();
const container = useTemplateRef('container');
const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig();
const textureSrc = ref<string[]>(Array.from(config.textureSrc));
const matName = ref<string>();

// 禁用右键菜单
document.addEventListener('contextmenu', (e) => e.preventDefault()); 
onMounted(async () => {
    scene.Initial(container.value);
    await HandleUpdateConfig();

    eventbus.Subscribe('submit', HandleUpload);
    eventbus.Subscribe('update-texture', HandleChangeTexture);
    eventbus.Subscribe('update-config', HandleUpdateConfig)
});

onBeforeUnmount(() => {
    eventbus.Unsubscribe('submit', HandleUpload);
    eventbus.Unsubscribe('update-texture', HandleChangeTexture);
    scene.Dispose();
});

function HandleUpload() {
    adjusterRef.value.Upload();
}

function HandleChangeTexture() {
    textureSrc.value = Array.from(config.textureSrc);
}

async function HandleUpdateConfig() {
    if (config.updateModel) {
        matName.value = config.updateModel.name;
        const json = FromDeflateBase64(config.updateModel.file);
        await scene.ImportMaterialAsync(json);
    }
    textureSrc.value = Array.from(config.textureSrc);
}

</script>

<style scoped lang="scss">
.material-view
{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;

    &-container {
        flex: 3 1; 
        height: 100%; 
        box-sizing: border-box;
        overflow: hidden;
    }

    &-sider {
        flex: 1 1;
        overflow-y: auto; 
        height: 100%; 
        box-sizing: border-box;
    }
}
</style>