mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
e1e560403e
## Summary Make WidgetInputNumberInput usable without the widget system by making the widget prop optional and adding simple min/max/step/disabled props. BoundingBox now uses this component instead of a separate ScrubableNumberInput ## Screenshots (if applicable) <img width="828" height="1393" alt="image" src="https://github.com/user-attachments/assets/68e012cf-baae-4a53-b4f8-70917cf05554" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8895-feat-add-scrub-drag-to-adjust-to-BoundingBox-numeric-inputs-3086d73d36508194b4b5e9bc823b34d1) by [Unito](https://www.unito.io)
60 lines
1.6 KiB
Vue
60 lines
1.6 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>
|
|
<ScrubableNumberInput v-model="x" :min="0" :step="1" />
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.y') }}
|
|
</label>
|
|
<ScrubableNumberInput v-model="y" :min="0" :step="1" />
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.width') }}
|
|
</label>
|
|
<ScrubableNumberInput v-model="width" :min="1" :step="1" />
|
|
<label class="content-center text-xs text-node-component-slot-text">
|
|
{{ $t('boundingBox.height') }}
|
|
</label>
|
|
<ScrubableNumberInput v-model="height" :min="1" :step="1" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.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>
|