<template>
    <div ref="container" style="width: 800px;height: 800px;"></div>
    {{ CurGeometryName }}
    <div v-for="geo in geometries">
        <button @click="changeGeometry(geo[0])">{{ geo[0] }}</button>
    </div>
</template>
<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import { MaterialEditor } from '../common/MaterialEditor';
import { PhysicalMaterialRecord } from 'webcad_ue4_api';

const container = useTemplateRef<HTMLElement>('container');


let editor:MaterialEditor = MaterialEditor.GetInstance();
const geometries = editor.Geometrys;
const material = new PhysicalMaterialRecord();

const CurGeometryName = editor.CurGeometryName;
onMounted(() => {
    editor.SetViewer(container.value);
    editor.setMaterial(material);

    const view = editor.Viewer;
    view.OnSize(800, 800);
    view.ZoomAll();
    view.Zoom(2.1);
})

function changeGeometry(geoName:string) {
    CurGeometryName.value = geoName;
    let geo = editor.Geometrys.get(CurGeometryName.value);
    if (geo) {
        editor.ShowMesh.geometry = geo;
        editor.Viewer.UpdateRender();
    }
}


</script>