ComfyUI_frontend/src/components/load3d/Load3DControls.vue

<template>
  <div
    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
    @pointerdown.stop
    @pointermove.stop
    @pointerup.stop
    @wheel.stop
  >
    <div class="show-menu relative">
      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
        <i class="pi pi-bars text-lg text-white" />
      </Button>

      <div
        v-show="isMenuOpen"
        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
      >
        <div class="flex flex-col">
          <Button
            v-for="category in availableCategories"
            :key="category"
            class="p-button-text flex w-full items-center justify-start"
            :class="{ 'bg-smoke-600': activeCategory === category }"
            @click="selectCategory(category)"
          >
            <i :class="getCategoryIcon(category)" />
            <span class="whitespace-nowrap text-white">{{
              $t(categoryLabels[category])
            }}</span>
          </Button>
        </div>
      </div>
    </div>

    <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
      <SceneControls
        v-if="showSceneControls"
        ref="sceneControlsRef"
        v-model:show-grid="sceneConfig!.showGrid"
        v-model:background-color="sceneConfig!.backgroundColor"
        v-model:background-image="sceneConfig!.backgroundImage"
        @update-background-image="handleBackgroundImageUpdate"
      />

      <ModelControls
        v-if="showModelControls"
        ref="modelControlsRef"
        v-model:material-mode="modelConfig!.materialMode"
        v-model:up-direction="modelConfig!.upDirection"
      />

      <CameraControls
        v-if="showCameraControls"
        ref="cameraControlsRef"
        v-model:camera-type="cameraConfig!.cameraType"
        v-model:fov="cameraConfig!.fov"
      />

      <LightControls
        v-if="showLightControls"
        ref="lightControlsRef"
        v-model:light-intensity="lightConfig!.intensity"
        v-model:material-mode="modelConfig!.materialMode"
      />

      <ExportControls
        v-if="showExportControls"
        ref="exportControlsRef"
        @export-model="handleExportModel"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from 'primevue/button'
import { computed, onMounted, onUnmounted, ref } from 'vue'

import CameraControls from '@/components/load3d/controls/CameraControls.vue'
import ExportControls from '@/components/load3d/controls/ExportControls.vue'
import LightControls from '@/components/load3d/controls/LightControls.vue'
import ModelControls from '@/components/load3d/controls/ModelControls.vue'
import SceneControls from '@/components/load3d/controls/SceneControls.vue'
import type {
  CameraConfig,
  LightConfig,
  ModelConfig,
  SceneConfig
} from '@/extensions/core/load3d/interfaces'

const sceneConfig = defineModel<SceneConfig>('sceneConfig')
const modelConfig = defineModel<ModelConfig>('modelConfig')
const cameraConfig = defineModel<CameraConfig>('cameraConfig')
const lightConfig = defineModel<LightConfig>('lightConfig')

const isMenuOpen = ref(false)
const activeCategory = ref<string>('scene')
const categoryLabels: Record<string, string> = {
  scene: 'load3d.scene',
  model: 'load3d.model',
  camera: 'load3d.camera',
  light: 'load3d.light',
  export: 'load3d.export'
}

const availableCategories = computed(() => {
  return ['scene', 'model', 'camera', 'light', 'export']
})

const showSceneControls = computed(
  () => activeCategory.value === 'scene' && !!sceneConfig.value
)
const showModelControls = computed(
  () => activeCategory.value === 'model' && !!modelConfig.value
)
const showCameraControls = computed(
  () => activeCategory.value === 'camera' && !!cameraConfig.value
)
const showLightControls = computed(
  () =>
    activeCategory.value === 'light' &&
    !!lightConfig.value &&
    !!modelConfig.value
)
const showExportControls = computed(() => activeCategory.value === 'export')

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const selectCategory = (category: string) => {
  activeCategory.value = category
  isMenuOpen.value = false
}

const getCategoryIcon = (category: string) => {
  const icons = {
    scene: 'pi pi-image',
    model: 'pi pi-box',
    camera: 'pi pi-camera',
    light: 'pi pi-sun',
    export: 'pi pi-download'
  }
  // @ts-expect-error fixme ts strict error
  return `${icons[category]} text-white text-lg`
}

const emit = defineEmits<{
  (e: 'updateBackgroundImage', file: File | null): void
  (e: 'exportModel', format: string): void
}>()

const handleBackgroundImageUpdate = (file: File | null) => {
  emit('updateBackgroundImage', file)
}

const handleExportModel = (format: string) => {
  emit('exportModel', format)
}

const closeSlider = (e: MouseEvent) => {
  const target = e.target as HTMLElement

  if (!target.closest('.show-menu')) {
    isMenuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', closeSlider)
})

onUnmounted(() => {
  document.removeEventListener('click', closeSlider)
})
</script>