Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-20 14:30:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[backport cloud/1.41] feat: App mode - allow resizing of textarea and image previews (#10345)

Browse Source 
Backport of #9792 to `cloud/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10345-backport-cloud-1-41-feat-App-mode-allow-resizing-of-textarea-and-image-previews-3296d73d36508173be60e0fc10292292)
by [Unito](https://www.unito.io)

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
This commit is contained in:
Comfy Org PR Bot
2026-03-21 02:11:07 +09:00
committed by GitHub
parent 80cc488e55
commit 9f470b22c0
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/builder/AppModeWidgetList.vue
View File

@@ -201,7 +201,7 @@ function nodeToNodeData(node: LGraphNode) {
:node-data
:class="
cn(
'gap-y-3 rounded-lg py-1 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
nodeData.hasErrors && 'ring-2 ring-node-stroke-error ring-inset'
)
"

30
src/renderer/extensions/linearMode/DropZone.vue
View File

@@ -23,6 +23,27 @@ const {
const dropZoneRef = ref<HTMLElement | null>(null)
const canAcceptDrop = ref(false)
const pointerStart = ref<{ x: number; y: number } | null>(null)
function onPointerDown(e: PointerEvent) {
pointerStart.value = { x: e.clientX, y: e.clientY }
}
function onIndicatorClick(e: MouseEvent) {
if (e.detail !== 0) {
const start = pointerStart.value
if (start) {
const dx = e.clientX - start.x
const dy = e.clientY - start.y
if (dx * dx + dy * dy > 25) {
pointerStart.value = null
return
}
}
}
pointerStart.value = null
dropIndicator?.onClick?.(e)
}
const { isOverDropZone } = useDropZone(dropZoneRef, {
onDrop: (_files, event) => {
@@ -70,16 +91,17 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
data-slot="drop-zone-indicator"
:class="
cn(
'm-3 block w-[calc(100%-1.5rem)] appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
'm-3 block h-42 min-h-32 w-[calc(100%-1.5rem)] resize-y appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
dropIndicator?.onClick && 'cursor-pointer'
)
"
@click.prevent="dropIndicator?.onClick?.($event)"
@pointerdown="onPointerDown"
@click.prevent="onIndicatorClick"
>
<div
:class="
cn(
'flex min-h-23 w-full flex-col items-center justify-center gap-2 rounded-[7px] p-6 text-center text-sm/tight transition-colors',
'flex h-full max-w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-[7px] p-3 text-center text-sm/tight transition-colors',
isHovered &&
!dropIndicator?.imageUrl &&
'border border-dashed border-component-node-foreground-secondary bg-component-node-widget-background-hovered'
@@ -88,7 +110,7 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
>
<img
v-if="dropIndicator?.imageUrl"
class="max-h-23 rounded-md object-contain"
class="max-h-full max-w-full rounded-md object-contain"
:alt="dropIndicator?.label ?? ''"
:src="dropIndicator?.imageUrl"
/>