@jvs-milkdown/components 1.2.0 → 1.2.1

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

@@ -8,45 +8,61 @@ 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)
+
+    // Display dimensions (set in onImageLoad)
+    const displayW = ref(0)
+    const displayH = ref(0)
+
+    // Local crop state for interactive editing
+    const localCrop = ref({ top: 0, left: 0, width: 1, height: 1 })
 
     let resizeDir = ''
     let startY = 0
@@ -54,6 +70,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
@@ -80,9 +104,13 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       image.style.height = `${h}px`
 
       if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`
+
+      const dw = width < maxWidth ? width : maxWidth
+      displayW.value = dw
+      displayH.value = parseFloat(h)
     }
 
-    const onToggleCaption = (e: PointerEvent) => {
+    const onToggleCaption = (e: MouseEvent) => {
       e.preventDefault()
       e.stopPropagation()
       if (readonly.value) return
@@ -172,43 +200,498 @@ export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
       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 = borderWidth.value ?? 0
+      const currentBorderColor = 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 dw = displayW.value
+      const dh = displayH.value
+
+      // Use actual rendered dimensions when available for accurate crop margins
+      const imgEl = imageRef.value
+      const actualW = imgEl ? imgEl.getBoundingClientRect().width : dw
+      const actualH = imgEl ? imgEl.getBoundingClientRect().height : dh
+      const baseW = cropped && !isCropping.value && imgEl ? actualW : dw
+      const baseH = cropped && !isCropping.value && imgEl ? actualH : dh
+
+      const cropPxW = baseW * cWidth
+      const cropPxH = baseH * cHeight
+      const cropPxL = baseW * cLeft
+      const cropPxT = baseH * cTop
+
+      const wrapperStyle: Record<string, string> = {}
+      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> = {}
+      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`
+        imgStyle.border = borderStyleStr ?? ''
+      } else {
+        imgStyle.border = borderStyleStr ?? ''
+      }
+
       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"
+                  onClick={(e) => 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
+                        type="range"
+                        min="1"
+                        max="10"
+                        value={currentBorderWidth}
+                        onInput={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          setAttr('borderWidth', Number(target.value))
+                        }}
+                        onClick={(e: MouseEvent) => e.stopPropagation()}
+                        onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                      />
+                      <span class="setting-value">{currentBorderWidth}px</span>
+                    </div>
+                  ) : null}
+                  {currentBorderStyle !== 'none' ? (
+                    <div class="setting-row">
+                      <span class="setting-label">{'颜色'}</span>
+                      <input
+                        type="color"
+                        value={currentBorderColor}
+                        onInput={(e: Event) => {
+                          const target = e.target as HTMLInputElement
+                          setAttr('borderColor', target.value)
+                        }}
+                        onClick={(e: MouseEvent) => e.stopPropagation()}
+                        onPointerdown={(e: PointerEvent) => 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