@jvs-milkdown/components 1.2.0 → 1.2.2

package/src/image-block/view/components/image-viewer.tsx

@@ -8,45 +8,63 @@ import { IMAGE_DATA_TYPE } from '../../schema'
 
 keepAlive(h, Fragment)
 
+const ratioMap: Record<string, number> = {
+  '1:1': 1,
+  '4:3': 4 / 3,
+  '3:2': 3 / 2,
+  '16:9': 16 / 9,
+}
+
 export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
   props: {
-    src: {
-      type: Object,
-      required: true,
-    },
-    caption: {
-      type: Object,
-      required: true,
-    },
-    ratio: {
-      type: Object,
-      required: true,
-    },
-    align: {
-      type: Object,
-      required: true,
-    },
-    selected: {
-      type: Object,
-      required: true,
-    },
-    readonly: {
-      type: Object,
-      required: true,
-    },
-    setAttr: {
-      type: Function,
-      required: true,
-    },
-    config: {
-      type: Object,
-      required: true,
-    },
+    src: { type: Object, required: true },
+    caption: { type: Object, required: true },
+    ratio: { type: Object, required: true },
+    align: { type: Object, required: true },
+    cropRatio: { type: Object, required: true },
+    cropTop: { type: Object, required: true },
+    cropLeft: { type: Object, required: true },
+    cropWidth: { type: Object, required: true },
+    cropHeight: { type: Object, required: true },
+    borderWidth: { type: Object, required: true },
+    borderColor: { type: Object, required: true },
+    borderStyle: { type: Object, required: true },
+    selected: { type: Object, required: true },
+    readonly: { type: Object, required: true },
+    setAttr: { type: Function, required: true },
+    config: { type: Object, required: true },
   },
-  setup({ src, caption, ratio, readonly, setAttr, config }) {
+  setup({
+    src,
+    caption,
+    ratio,
+    readonly,
+    setAttr,
+    config,
+    cropRatio,
+    cropTop,
+    cropLeft,
+    cropWidth,
+    cropHeight,
+    borderWidth,
+    borderColor,
+    borderStyle,
+  }) {
     const imageRef = ref<HTMLImageElement>()
+    const wrapperRef = ref<HTMLDivElement>()
     const showCaption = ref(Boolean(caption.value?.length))
     const timer = ref(0)
+    const showBorderPanel = ref(false)
+    const isCropping = ref(false)
+
+    const baseDisplayW = ref(0)
+    const baseDisplayH = ref(0)
+    const liveRatio = ref<number | null>(null)
+    const localBorderWidth = ref<number | null>(null)
+    const localBorderColor = ref<string | null>(null)
+
+    // Local crop state for interactive editing
+    const localCrop = ref({ top: 0, left: 0, width: 1, height: 1 })
 
     let resizeDir = ''
     let startY = 0
@@ -54,6 +72,14 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
     let startHeight = 0
     let startWidth = 0
 
+    const isCropped = () => {
+      const t = cropTop.value ?? 0
+      const l = cropLeft.value ?? 0
+      const w = cropWidth.value ?? 1
+      const h = cropHeight.value ?? 1
+      return t > 0.001 || l > 0.001 || w < 0.999 || h < 0.999
+    }
+
     const onImageLoad = () => {
       const image = imageRef.value
       if (!image) return
@@ -68,21 +94,23 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
       const height = image.naturalHeight
       const width = image.naturalWidth
-      let transformedHeight =
-        width < maxWidth ? height : maxWidth * (height / width)
+      if (!height || !width) return
 
-      if (config.maxHeight && transformedHeight > config.maxHeight)
-        transformedHeight = config.maxHeight
+      const aspect = width / height
+
+      let transformedWidth = width < maxWidth ? width : maxWidth
+      let transformedHeight = transformedWidth / aspect
 
-      const h = (transformedHeight * (ratio.value ?? 1)).toFixed(2)
-      image.dataset.origin = transformedHeight.toFixed(2)
-      image.dataset.height = h
-      image.style.height = `${h}px`
+      if (config.maxHeight && transformedHeight > config.maxHeight) {
+        transformedHeight = config.maxHeight
+        transformedWidth = transformedHeight * aspect
+      }
 
-      if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`
+      baseDisplayH.value = transformedHeight
+      baseDisplayW.value = transformedWidth
     }
 
-    const onToggleCaption = (e: PointerEvent) => {
+    const onToggleCaption = (e: MouseEvent) => {
       e.preventDefault()
       e.stopPropagation()
       if (readonly.value) return
@@ -112,8 +140,6 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
 
     const onResizeHandlePointerMove = (e: PointerEvent) => {
       e.preventDefault()
-      const image = imageRef.value
-      if (!image) return
 
       const deltaY = e.clientY - startY
       const deltaX = e.clientX - startX
@@ -121,6 +147,7 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       const aspect = startHeight / (startWidth || 1)
       let dhY = resizeDir.includes('bottom') ? deltaY : -deltaY
       let dhX = 0
+
       if (resizeDir.includes('right')) {
         dhX = deltaX * aspect
       } else if (resizeDir.includes('left')) {
@@ -128,32 +155,53 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       }
 
       const dh = Math.abs(dhX) > Math.abs(dhY) ? dhX : dhY
-      let height = startHeight + dh
+      let newWrapperHeight = startHeight + dh
+
+      let newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1))
+
+      if (newWrapperHeight < 20) {
+        newWrapperHeight = 20
+        newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1))
+      }
+
+      if (newWrapperWidth < 20) {
+        newWrapperWidth = 20
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1))
+      }
+
+      const image = imageRef.value
+      const host = image?.closest('.milkdown-image-block')
+      const hostWidth = host?.getBoundingClientRect().width
+      const maxW =
+        config.maxWidth && hostWidth
+          ? Math.min(config.maxWidth, hostWidth)
+          : hostWidth || Infinity
+
+      if (newWrapperWidth > maxW) {
+        newWrapperWidth = maxW
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1))
+      }
 
-      if (height < 20) height = 20
-      if (config.maxHeight && height > config.maxHeight)
-        height = config.maxHeight
+      if (config.maxHeight && newWrapperHeight > config.maxHeight) {
+        newWrapperHeight = config.maxHeight
+      }
+
+      const cHeight =
+        isCropped() && !isCropping.value ? (cropHeight.value ?? 1) : 1
+      const newBaseHeight = newWrapperHeight / cHeight
 
-      const h = Number(height).toFixed(2)
-      image.dataset.height = h
-      image.style.height = `${h}px`
+      const newRatio = newBaseHeight / (baseDisplayH.value || 1)
+      liveRatio.value = Number(newRatio.toFixed(2))
     }
 
     const onResizeHandlePointerUp = () => {
       window.removeEventListener('pointermove', onResizeHandlePointerMove)
       window.removeEventListener('pointerup', onResizeHandlePointerUp)
 
-      const image = imageRef.value
-      if (!image) return
-
-      const originHeight = Number(image.dataset.origin)
-      const currentHeight = Number(image.dataset.height)
-      const ratio = Number.parseFloat(
-        Number(currentHeight / originHeight).toFixed(2)
-      )
-      if (Number.isNaN(ratio)) return
-
-      setAttr('ratio', ratio)
+      if (liveRatio.value !== null) {
+        setAttr('ratio', liveRatio.value)
+        liveRatio.value = null
+      }
     }
 
     const onResizeHandlePointerDown = (e: PointerEvent, dir: string) => {
@@ -163,52 +211,573 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       resizeDir = dir
       startY = e.clientY
       startX = e.clientX
-      const image = imageRef.value
-      if (image) {
-        startHeight = image.getBoundingClientRect().height
-        startWidth = image.getBoundingClientRect().width
+      const wrapper = wrapperRef.value
+      if (wrapper) {
+        startHeight = wrapper.getBoundingClientRect().height
+        startWidth = wrapper.getBoundingClientRect().width
       }
+      liveRatio.value = ratio.value ?? 1
       window.addEventListener('pointermove', onResizeHandlePointerMove)
       window.addEventListener('pointerup', onResizeHandlePointerUp)
     }
 
+    // --- Crop box interaction ---
+    const borderStyleOptions = [
+      { label: 'none', value: 'none' },
+      { label: 'solid', value: 'solid' },
+      { label: 'dashed', value: 'dashed' },
+      { label: 'dotted', value: 'dotted' },
+    ]
+
+    const onToggleCropPanel = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (readonly.value) return
+      showBorderPanel.value = false
+      if (isCropping.value) {
+        isCropping.value = false
+      } else {
+        startCropping()
+      }
+    }
+
+    const onToggleBorderPanel = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (readonly.value) return
+      showBorderPanel.value = !showBorderPanel.value
+    }
+
+    const closePanels = () => {
+      showBorderPanel.value = false
+    }
+
+    const startCropping = () => {
+      localCrop.value = {
+        top: cropTop.value ?? 0,
+        left: cropLeft.value ?? 0,
+        width: cropWidth.value ?? 1,
+        height: cropHeight.value ?? 1,
+      }
+      isCropping.value = true
+    }
+
+    const applyCrop = () => {
+      setAttr('cropTop', localCrop.value.top)
+      setAttr('cropLeft', localCrop.value.left)
+      setAttr('cropWidth', localCrop.value.width)
+      setAttr('cropHeight', localCrop.value.height)
+      isCropping.value = false
+    }
+
+    const cancelCrop = () => {
+      isCropping.value = false
+    }
+
+    const resetCrop = () => {
+      setAttr('cropTop', 0)
+      setAttr('cropLeft', 0)
+      setAttr('cropWidth', 1)
+      setAttr('cropHeight', 1)
+    }
+
+    // Crop box drag state
+    let cropDragType = '' // 'move' | 'nw' | 'ne' | 'sw' | 'se' | 'n' | 's' | 'e' | 'w'
+    let cropStartX = 0
+    let cropStartY = 0
+    let cropStartBox = { top: 0, left: 0, width: 1, height: 1 }
+
+    const onCropBoxPointerDown = (e: PointerEvent, type: string) => {
+      e.preventDefault()
+      e.stopPropagation()
+      cropDragType = type
+      cropStartX = e.clientX
+      cropStartY = e.clientY
+      cropStartBox = { ...localCrop.value }
+      window.addEventListener('pointermove', onCropBoxPointerMove)
+      window.addEventListener('pointerup', onCropBoxPointerUp)
+    }
+
+    const onCropBoxPointerMove = (e: PointerEvent) => {
+      const wrapper = wrapperRef.value
+      if (!wrapper) return
+      const rect = wrapper.getBoundingClientRect()
+      if (!rect.width || !rect.height) return
+
+      const dx = (e.clientX - cropStartX) / rect.width
+      const dy = (e.clientY - cropStartY) / rect.height
+
+      const ar = ratioMap[cropRatio.value ?? 'free']
+      let box = { ...cropStartBox }
+
+      if (cropDragType === 'move') {
+        box.left = Math.max(0, Math.min(1 - box.width, cropStartBox.left + dx))
+        box.top = Math.max(0, Math.min(1 - box.height, cropStartBox.top + dy))
+      } else {
+        const isLeft =
+          cropDragType === 'nw' || cropDragType === 'sw' || cropDragType === 'w'
+        const isTop =
+          cropDragType === 'nw' || cropDragType === 'ne' || cropDragType === 'n'
+        const isRight =
+          cropDragType === 'ne' || cropDragType === 'se' || cropDragType === 'e'
+        const isBottom =
+          cropDragType === 'sw' || cropDragType === 'se' || cropDragType === 's'
+        const isHorizontal = cropDragType === 'n' || cropDragType === 's'
+        const isVertical = cropDragType === 'e' || cropDragType === 'w'
+
+        let newLeft = cropStartBox.left
+        let newTop = cropStartBox.top
+        let newWidth = cropStartBox.width
+        let newHeight = cropStartBox.height
+
+        if (isLeft) {
+          newWidth = cropStartBox.width - dx
+          newLeft = cropStartBox.left + dx
+        } else if (isRight) {
+          newWidth = cropStartBox.width + dx
+        }
+
+        if (isTop) {
+          newHeight = cropStartBox.height - dy
+          newTop = cropStartBox.top + dy
+        } else if (isBottom) {
+          newHeight = cropStartBox.height + dy
+        }
+
+        // Enforce aspect ratio if set (only for corner handles)
+        if (ar && !isHorizontal && !isVertical) {
+          const cropPixelW = newWidth * rect.width
+          const desiredH = cropPixelW / ar / rect.height
+
+          if (isTop) {
+            newTop = newTop + newHeight - desiredH
+          }
+          newHeight = desiredH
+        }
+
+        // Clamp
+        if (newWidth < 0.05) newWidth = 0.05
+        if (newHeight < 0.05) newHeight = 0.05
+        if (newLeft < 0) {
+          newWidth += newLeft
+          newLeft = 0
+        }
+        if (newTop < 0) {
+          newHeight += newTop
+          newTop = 0
+        }
+        if (newLeft + newWidth > 1) newWidth = 1 - newLeft
+        if (newTop + newHeight > 1) newHeight = 1 - newTop
+
+        box = { left: newLeft, top: newTop, width: newWidth, height: newHeight }
+      }
+
+      localCrop.value = box
+    }
+
+    const onCropBoxPointerUp = () => {
+      window.removeEventListener('pointermove', onCropBoxPointerMove)
+      window.removeEventListener('pointerup', onCropBoxPointerUp)
+      cropDragType = ''
+    }
+
     return () => {
+      const currentBorderStyle = borderStyle.value ?? 'none'
+      const currentBorderWidth =
+        localBorderWidth.value !== null
+          ? localBorderWidth.value
+          : (borderWidth.value ?? 0)
+      const currentBorderColor =
+        localBorderColor.value !== null
+          ? localBorderColor.value
+          : (borderColor.value ?? '#000000')
+      const cTop = cropTop.value ?? 0
+      const cLeft = cropLeft.value ?? 0
+      const cWidth = cropWidth.value ?? 1
+      const cHeight = cropHeight.value ?? 1
+
+      const cropped = isCropped()
+
+      const borderStyleStr =
+        currentBorderStyle !== 'none' && currentBorderWidth > 0
+          ? `${currentBorderWidth}px ${currentBorderStyle} ${currentBorderColor}`
+          : undefined
+
+      const currentRatio =
+        liveRatio.value !== null ? liveRatio.value : (ratio.value ?? 1)
+
+      let baseW = baseDisplayW.value * currentRatio
+      let baseH = baseDisplayH.value * currentRatio
+
+      const image = imageRef.value
+      const host = image?.closest('.milkdown-image-block')
+      const hostWidth = host?.getBoundingClientRect().width
+      const maxW =
+        config.maxWidth && hostWidth
+          ? Math.min(config.maxWidth, hostWidth)
+          : hostWidth || Infinity
+
+      const visibleW = isCropping.value
+        ? baseW
+        : cropped
+          ? baseW * cWidth
+          : baseW
+
+      if (visibleW > maxW && maxW > 0) {
+        const scale = maxW / visibleW
+        baseW = baseW * scale
+        baseH = baseH * scale
+      }
+
+      const cropPxW = baseW * cWidth
+      const cropPxH = baseH * cHeight
+      const cropPxL = baseW * cLeft
+      const cropPxT = baseH * cTop
+
+      const wrapperStyle: Record<string, string> = {
+        minWidth: '20px',
+        minHeight: '20px',
+        border: !isCropping.value ? (borderStyleStr ?? '') : '',
+      }
+      if (cropped && !isCropping.value && cropPxW > 0 && cropPxH > 0) {
+        wrapperStyle.width = `${cropPxW}px`
+        wrapperStyle.height = `${cropPxH}px`
+      }
+      const cropClipStyle: Record<string, string> | null =
+        cropped && !isCropping.value && baseW > 0 && baseH > 0
+          ? {
+              width: `${cropPxW}px`,
+              height: `${cropPxH}px`,
+              overflow: 'hidden',
+            }
+          : null
+
+      const imgStyle: Record<string, string> = {
+        minWidth: '0px',
+        minHeight: '0px',
+      }
+      if (cropped && !isCropping.value && baseW > 0 && baseH > 0) {
+        imgStyle.width = `${baseW}px`
+        imgStyle.height = `${baseH}px`
+        imgStyle.maxWidth = 'none'
+        imgStyle.marginLeft = `${-cropPxL}px`
+        imgStyle.marginTop = `${-cropPxT}px`
+      } else {
+        if (baseH > 0 && baseW > 0) {
+          imgStyle.width = `${baseW}px`
+          imgStyle.height = `${baseH}px`
+          if (config.maxWidth) imgStyle.maxWidth = `${config.maxWidth}px`
+        }
+      }
+
       return (
         <>
-          <div class="image-wrapper">
-            <div class="operation">
-              <div class="operation-item" onPointerdown={onToggleCaption}>
+          {!isCropping.value ? (
+            <div
+              class="image-toolbar"
+              onClick={(e) => e.stopPropagation()}
+              onMousedown={(e) => e.stopPropagation()}
+              onDragstart={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+            >
+              <div
+                class="image-toolbar-item"
+                title="标题"
+                onClick={onToggleCaption}
+              >
                 <Icon icon={config.captionIcon} />
               </div>
+              {config.cropIcon ? (
+                <div
+                  class="image-toolbar-item"
+                  title="裁剪"
+                  onClick={onToggleCropPanel}
+                >
+                  <Icon icon={config.cropIcon} />
+                </div>
+              ) : null}
+              {cropped ? (
+                <div
+                  class="image-toolbar-item"
+                  title="恢复裁剪"
+                  onClick={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    resetCrop()
+                  }}
+                >
+                  <Icon icon={config.resetCropIcon ?? '↩'} />
+                </div>
+              ) : null}
+              {config.borderIcon ? (
+                <div
+                  class="image-toolbar-item"
+                  title="边框"
+                  onClick={onToggleBorderPanel}
+                >
+                  <Icon icon={config.borderIcon} />
+                </div>
+              ) : null}
+
+              {showBorderPanel.value ? (
+                <div
+                  class="setting-panel border-panel"
+                  draggable="true"
+                  onClick={(e) => e.stopPropagation()}
+                  onMousedown={(e) => e.stopPropagation()}
+                  onPointerdown={(e) => e.stopPropagation()}
+                  onDragstart={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                  }}
+                >
+                  <div class="setting-panel-title">{'边框设置'}</div>
+                  <div class="setting-row">
+                    <span class="setting-label">{'样式'}</span>
+                    <div class="border-style-options">
+                      {borderStyleOptions.map((opt) => (
+                        <div
+                          class={`border-style-option ${currentBorderStyle === opt.value ? 'active' : ''}`}
+                          onClick={(e: MouseEvent) => {
+                            e.stopPropagation()
+                            setAttr('borderStyle', opt.value)
+                          }}
+                        >
+                          {opt.label === 'none'
+                            ? '无'
+                            : opt.label === 'solid'
+                              ? '实线'
+                              : opt.label === 'dashed'
+                                ? '虚线'
+                                : '点线'}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  {currentBorderStyle !== 'none' ? (
+                    <div class="setting-row">
+                      <span class="setting-label">{'宽度'}</span>
+                      <input
+                        draggable="true"
+                        type="range"
+                        min="1"
+                        max="10"
+                        value={currentBorderWidth}
+                        onInput={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          localBorderWidth.value = Number(target.value)
+                        }}
+                        onChange={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          setAttr('borderWidth', Number(target.value))
+                          localBorderWidth.value = null
+                        }}
+                        onClick={(e: MouseEvent) => e.stopPropagation()}
+                        onMousedown={(e: MouseEvent) => e.stopPropagation()}
+                        onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                        onDragstart={(e: DragEvent) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                        }}
+                      />
+                      <span class="setting-value">{currentBorderWidth}px</span>
+                    </div>
+                  ) : null}
+                  {currentBorderStyle !== 'none' ? (
+                    <div class="setting-row">
+                      <span class="setting-label">{'颜色'}</span>
+                      <input
+                        draggable="true"
+                        type="color"
+                        value={currentBorderColor}
+                        onInput={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          localBorderColor.value = target.value
+                        }}
+                        onChange={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          setAttr('borderColor', target.value)
+                          localBorderColor.value = null
+                        }}
+                        onClick={(e: MouseEvent) => e.stopPropagation()}
+                        onMousedown={(e: MouseEvent) => e.stopPropagation()}
+                        onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                        onDragstart={(e: DragEvent) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                        }}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
             </div>
-            <img
-              ref={imageRef}
-              data-type={IMAGE_DATA_TYPE}
-              onLoad={onImageLoad}
-              src={src.value}
-              alt={caption.value}
-              onError={(e) =>
-                Promise.resolve(config.onImageLoadError?.(e)).catch(() => {})
-              }
-            />
-            <div
-              class="image-resize-handle top-left"
-              onPointerdown={(e) => onResizeHandlePointerDown(e, 'top-left')}
-            />
-            <div
-              class="image-resize-handle top-right"
-              onPointerdown={(e) => onResizeHandlePointerDown(e, 'top-right')}
-            />
-            <div
-              class="image-resize-handle bottom-left"
-              onPointerdown={(e) => onResizeHandlePointerDown(e, 'bottom-left')}
-            />
-            <div
-              class="image-resize-handle bottom-right"
-              onPointerdown={(e) =>
-                onResizeHandlePointerDown(e, 'bottom-right')
-              }
-            />
+          ) : null}
+
+          <div
+            class={`image-wrapper${isCropping.value ? ' cropping' : ''}`}
+            ref={wrapperRef}
+            style={wrapperStyle}
+            onClick={closePanels}
+          >
+            {cropClipStyle ? (
+              <div class="crop-clip" style={cropClipStyle}>
+                <img
+                  draggable="false"
+                  ref={imageRef}
+                  data-type={IMAGE_DATA_TYPE}
+                  onLoad={onImageLoad}
+                  src={src.value}
+                  alt={caption.value}
+                  style={imgStyle}
+                  onError={(e) =>
+                    Promise.resolve(config.onImageLoadError?.(e)).catch(
+                      () => {}
+                    )
+                  }
+                />
+              </div>
+            ) : (
+              <img
+                draggable="false"
+                ref={imageRef}
+                data-type={IMAGE_DATA_TYPE}
+                onLoad={onImageLoad}
+                src={src.value}
+                alt={caption.value}
+                style={imgStyle}
+                onError={(e) =>
+                  Promise.resolve(config.onImageLoadError?.(e)).catch(() => {})
+                }
+              />
+            )}
+
+            {/* Crop overlay */}
+            {isCropping.value ? (
+              <div class="crop-overlay" onClick={(e) => e.stopPropagation()}>
+                <div
+                  class="crop-box"
+                  style={{
+                    top: `${(localCrop.value.top * 100).toFixed(2)}%`,
+                    left: `${(localCrop.value.left * 100).toFixed(2)}%`,
+                    width: `${(localCrop.value.width * 100).toFixed(2)}%`,
+                    height: `${(localCrop.value.height * 100).toFixed(2)}%`,
+                  }}
+                  onPointerdown={(e: PointerEvent) =>
+                    onCropBoxPointerDown(e, 'move')
+                  }
+                >
+                  {/* 3x3 grid lines */}
+                  <div class="crop-grid">
+                    <div class="crop-grid-line horizontal first" />
+                    <div class="crop-grid-line horizontal second" />
+                    <div class="crop-grid-line vertical first" />
+                    <div class="crop-grid-line vertical second" />
+                  </div>
+                  {/* Corner handles */}
+                  <div
+                    class="crop-handle nw"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'nw')
+                    }
+                  />
+                  <div
+                    class="crop-handle ne"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'ne')
+                    }
+                  />
+                  <div
+                    class="crop-handle sw"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'sw')
+                    }
+                  />
+                  <div
+                    class="crop-handle se"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'se')
+                    }
+                  />
+                  {/* Edge midpoint handles */}
+                  <div
+                    class="crop-handle n"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'n')
+                    }
+                  />
+                  <div
+                    class="crop-handle s"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 's')
+                    }
+                  />
+                  <div
+                    class="crop-handle e"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'e')
+                    }
+                  />
+                  <div
+                    class="crop-handle w"
+                    onPointerdown={(e: PointerEvent) =>
+                      onCropBoxPointerDown(e, 'w')
+                    }
+                  />
+                </div>
+                {/* Bottom toolbar */}
+                <div class="crop-toolbar">
+                  <div
+                    class="crop-toolbar-btn"
+                    onClick={(e: MouseEvent) => {
+                      e.stopPropagation()
+                      applyCrop()
+                    }}
+                  >
+                    <Icon icon={config.confirmIcon ?? '✓'} />
+                  </div>
+                  <div
+                    class="crop-toolbar-btn"
+                    onClick={(e: MouseEvent) => {
+                      e.stopPropagation()
+                      cancelCrop()
+                    }}
+                  >
+                    <Icon icon={config.cancelIcon ?? '✕'} />
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {!isCropping.value ? (
+              <>
+                <div
+                  class="image-resize-handle top-left"
+                  onPointerdown={(e) =>
+                    onResizeHandlePointerDown(e, 'top-left')
+                  }
+                />
+                <div
+                  class="image-resize-handle top-right"
+                  onPointerdown={(e) =>
+                    onResizeHandlePointerDown(e, 'top-right')
+                  }
+                />
+                <div
+                  class="image-resize-handle bottom-left"
+                  onPointerdown={(e) =>
+                    onResizeHandlePointerDown(e, 'bottom-left')
+                  }
+                />
+                <div
+                  class="image-resize-handle bottom-right"
+                  onPointerdown={(e) =>
+                    onResizeHandlePointerDown(e, 'bottom-right')
+                  }
+                />
+              </>
+            ) : null}
           </div>
           {showCaption.value && (
             <input