mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-23 16:24:06 +00:00
8d1f8edc5a
## Summary Set up a minimum height on the viewer container to prevent layout collapse caused by the absolutely positioned canvas. ## Changes What: Updated handleResize apply a minimum height style to the parent element ## Screenshots before https://github.com/user-attachments/assets/0ddb2681-3083-4dfe-b59f-77724072002d after https://github.com/user-attachments/assets/672570ad-8792-4e09-8050-6dfcb921cd36 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7815-fix-3d-min-resize-2da6d73d3650811ca66fd82ad13258b9) by [Unito](https://www.unito.io)
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
ref="container"
|
|
class="relative h-full w-full min-h-[200px]"
|
|
data-capture-wheel="true"
|
|
@pointerdown.stop
|
|
@pointermove.stop
|
|
@pointerup.stop
|
|
@mousedown.stop
|
|
@mousemove.stop
|
|
@mouseup.stop
|
|
@contextmenu.stop.prevent
|
|
@dragover.prevent.stop="handleDragOver"
|
|
@dragleave.stop="handleDragLeave"
|
|
@drop.prevent.stop="handleDrop"
|
|
>
|
|
<LoadingOverlay :loading="loading" :loading-message="loadingMessage" />
|
|
<div
|
|
v-if="!isPreview && isDragging"
|
|
class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
|
>
|
|
<div
|
|
class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
|
|
>
|
|
{{ dragMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
|
|
import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
|
|
|
|
const props = defineProps<{
|
|
initializeLoad3d: (containerRef: HTMLElement) => Promise<void>
|
|
cleanup: () => void
|
|
loading: boolean
|
|
loadingMessage: string
|
|
onModelDrop?: (file: File) => void | Promise<void>
|
|
isPreview: boolean
|
|
}>()
|
|
|
|
const container = ref<HTMLElement | null>(null)
|
|
|
|
const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
|
|
useLoad3dDrag({
|
|
onModelDrop: async (file) => {
|
|
if (props.onModelDrop) {
|
|
await props.onModelDrop(file)
|
|
}
|
|
},
|
|
disabled: computed(() => props.isPreview)
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (container.value) {
|
|
void props.initializeLoad3d(container.value)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
props.cleanup()
|
|
})
|
|
</script>
|