feat: Add visual crop preview widget for ImageCrop node - widget ImageCrop (#7825)

## Summary

Another implementation for image crop node, alternative for
#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](Comfy-Org/ComfyUI#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)

Author: jtydhr88

src/components/boundingbox/WidgetBoundingBox.vue

@@ -0,0 +1,82 @@
+<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>

src/components/imagecrop/WidgetImageCrop.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="widget-expands relative flex h-full w-full flex-col gap-1"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+  >
+    <!-- Image preview container -->
+    <div
+      ref="containerEl"
+      class="relative min-h-0 flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
+    >
+      <div v-if="isLoading" class="flex size-full items-center justify-center">
+        <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
+      </div>
+
+      <div
+        v-else-if="!imageUrl"
+        class="flex size-full flex-col items-center justify-center text-center"
+      >
+        <i class="mb-2 icon-[lucide--image] h-12 w-12" />
+        <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
+      </div>
+
+      <img
+        v-else
+        ref="imageEl"
+        :src="imageUrl"
+        :alt="$t('imageCrop.cropPreviewAlt')"
+        draggable="false"
+        class="block size-full object-contain select-none brightness-50"
+        @load="handleImageLoad"
+        @error="handleImageError"
+        @dragstart.prevent
+      />
+
+      <div
+        v-if="imageUrl && !isLoading"
+        class="absolute box-content cursor-move overflow-hidden border-2 border-white"
+        :style="cropBoxStyle"
+        @pointerdown="handleDragStart"
+        @pointermove="handleDragMove"
+        @pointerup="handleDragEnd"
+      >
+        <div class="pointer-events-none size-full" :style="cropImageStyle" />
+      </div>
+
+      <div
+        v-for="handle in resizeHandles"
+        v-show="imageUrl && !isLoading"
+        :key="handle.direction"
+        :class="['absolute', handle.class]"
+        :style="handle.style"
+        @pointerdown="(e) => handleResizeStart(e, handle.direction)"
+        @pointermove="handleResizeMove"
+        @pointerup="handleResizeEnd"
+      />
+    </div>
+
+    <WidgetBoundingBox v-model="modelValue" class="shrink-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import WidgetBoundingBox from '@/components/boundingbox/WidgetBoundingBox.vue'
+import { useImageCrop } from '@/composables/useImageCrop'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { Bounds } from '@/renderer/core/layout/types'
+
+const props = defineProps<{
+  nodeId: NodeId
+}>()
+
+const modelValue = defineModel<Bounds>({
+  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
+})
+
+const imageEl = useTemplateRef<HTMLImageElement>('imageEl')
+const containerEl = useTemplateRef<HTMLDivElement>('containerEl')
+
+const {
+  imageUrl,
+  isLoading,
+
+  cropBoxStyle,
+  cropImageStyle,
+  resizeHandles,
+
+  handleImageLoad,
+  handleImageError,
+  handleDragStart,
+  handleDragMove,
+  handleDragEnd,
+  handleResizeStart,
+  handleResizeMove,
+  handleResizeEnd
+} = useImageCrop(props.nodeId, { imageEl, containerEl, modelValue })
+</script>