<script setup lang="ts">
import { onMounted, inject } from 'vue'
const __sdk: any = inject('__sdk')
const onEnter = () => {
  __sdk.Plugins.TagEditor.enter()
}
const onLeave = () => {
  __sdk.Plugins.TagEditor.exit()
}
onMounted(() => {
  __sdk.use('TagView')
  __sdk.use('TagEditor')
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="tools">
    <button @click="onEnter">编辑</button>
    <button @click="onLeave">退出</button>
  </div>
  <div id="scene"></div>
</template>

<style scoped>
#tools {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1000;
  transform: translateX(-50%);
}
#scene {
  width: 100vw;
  height: 100vh;
}
#scene-front {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
</style>
