mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-07 16:40:05 +00:00
be8916b4ce
## Summary Another implementation for image crop node, alternative for https://github.com/Comfy-Org/ComfyUI_frontend/pull/7014 As discussed with @christian-byrne and @DrJKL we could have single widget - IMAGECROP with 4 ints and UI preview. However, this solution requires changing the definition of image crop node in BE (sent [here](https://github.com/comfyanonymous/ComfyUI/pull/11594)), which will break the exsiting workflow, also it would not allow connect separate int node as input, I am not sure it is a good idea. So I keep two PRs openned for references ## Screenshots https://github.com/user-attachments/assets/fde6938c-4395-48f6-ac05-6282c5eb8157 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7825-feat-Add-visual-crop-preview-widget-for-ImageCrop-node-widget-ImageCrop-2dc6d73d3650812bb8a2cdff4615032b) by [Unito](https://www.unito.io)
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1">
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.x') }}
|
|
</label>
|
|
<input
|
|
v-model.number="x"
|
|
type="number"
|
|
:min="0"
|
|
step="1"
|
|
class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
|
|
/>
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.y') }}
|
|
</label>
|
|
<input
|
|
v-model.number="y"
|
|
type="number"
|
|
:min="0"
|
|
step="1"
|
|
class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
|
|
/>
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.width') }}
|
|
</label>
|
|
<input
|
|
v-model.number="width"
|
|
type="number"
|
|
:min="1"
|
|
step="1"
|
|
class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
|
|
/>
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.height') }}
|
|
</label>
|
|
<input
|
|
v-model.number="height"
|
|
type="number"
|
|
:min="1"
|
|
step="1"
|
|
class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import type { Bounds } from '@/renderer/core/layout/types'
|
|
|
|
const modelValue = defineModel<Bounds>({
|
|
default: () => ({ x: 0, y: 0, width: 512, height: 512 })
|
|
})
|
|
|
|
const x = computed({
|
|
get: () => modelValue.value.x,
|
|
set: (x) => {
|
|
modelValue.value = { ...modelValue.value, x }
|
|
}
|
|
})
|
|
|
|
const y = computed({
|
|
get: () => modelValue.value.y,
|
|
set: (y) => {
|
|
modelValue.value = { ...modelValue.value, y }
|
|
}
|
|
})
|
|
|
|
const width = computed({
|
|
get: () => modelValue.value.width,
|
|
set: (width) => {
|
|
modelValue.value = { ...modelValue.value, width }
|
|
}
|
|
})
|
|
|
|
const height = computed({
|
|
get: () => modelValue.value.height,
|
|
set: (height) => {
|
|
modelValue.value = { ...modelValue.value, height }
|
|
}
|
|
})
|
|
</script>
|