mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
4ff14b5eb9
## Summary Various fixes from app mode QA ## Changes - **What**: - fix: prevent inserting nodes from workflow/apps sidebar tabs - fix: hide json extension in workflow tab - fix: hide apps nav button in apps tab when already in apps mode - fix: center text on arrange page - fix: prevent IoItems from "jumping" due to stale transform after drag and drop op - fix: refactor side panels and add custom stable pixel based sizing - fix: make outputs/inputs lists in app builder scrollable - fix: fix rerun not working correctly - feat: add text to interrupt button - feat: add enter app mode button to builder toolbar - feat: add tooltip to download button on linear view - feat: show last output of workflow in arrange tab if available - feat: show download count in download all button, hide if only 1 asset to download ## Review Focus - Rerun - I am not sure why it was triggering widget actions, removing it seemed like the correct fix - useStablePrimeVueSplitter - this is a workaround for the fact it uses percent sizing, I also tried switching to reka-ui splitters, but they also only support % sizing in our version [pixel based looks to have been added in a newer version, will log an issue to upgrade & replace splitters with this] ## Screenshots (if applicable) <img width="1314" height="1129" alt="image" src="https://github.com/user-attachments/assets/c430f9d6-7c29-4853-803e-5b6fe7086fca" /> <img width="511" height="283" alt="image" src="https://github.com/user-attachments/assets/b7e594d4-70a1-41e3-8ba1-78512f2a5c8b" /> <img width="254" height="232" alt="image" src="https://github.com/user-attachments/assets/1d146399-39ea-4b0e-928c-340b74957535" /> <img width="487" height="198" alt="image" src="https://github.com/user-attachments/assets/e2ba7f5d-8ff5-47f4-9526-61ebb99514b8" /> <img width="378" height="647" alt="image" src="https://github.com/user-attachments/assets/a47a3054-9320-4327-bdc0-b0a16e19f83d" /> <img width="1016" height="476" alt="image" src="https://github.com/user-attachments/assets/479ae50e-d380-4d56-a5c9-5df142b14ed0" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9439-feat-fix-App-mode-QA-updates-31a6d73d365081b38337d63207b88817) by [Unito](https://www.unito.io)
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, useTemplateRef } from 'vue'
|
|
|
|
import ZoomPane from '@/components/ui/ZoomPane.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const { src } = defineProps<{
|
|
src: string
|
|
mobile?: boolean
|
|
}>()
|
|
|
|
const imageRef = useTemplateRef('imageRef')
|
|
const width = ref('')
|
|
const height = ref('')
|
|
</script>
|
|
<template>
|
|
<ZoomPane
|
|
v-if="!mobile"
|
|
v-slot="slotProps"
|
|
:class="cn('w-full flex-1', $attrs.class as string)"
|
|
>
|
|
<img
|
|
ref="imageRef"
|
|
:src
|
|
v-bind="slotProps"
|
|
class="size-full object-contain"
|
|
@load="
|
|
() => {
|
|
if (!imageRef) return
|
|
width = `${imageRef.naturalWidth}`
|
|
height = `${imageRef.naturalHeight}`
|
|
}
|
|
"
|
|
/>
|
|
</ZoomPane>
|
|
<img
|
|
v-else
|
|
ref="imageRef"
|
|
class="grow object-contain contain-size"
|
|
:src
|
|
@load="
|
|
() => {
|
|
if (!imageRef) return
|
|
width = `${imageRef.naturalWidth}`
|
|
height = `${imageRef.naturalHeight}`
|
|
}
|
|
"
|
|
/>
|
|
<span class="self-center md:z-10" v-text="`${width} x ${height}`" />
|
|
</template>
|