@jvs-milkdown/components 1.2.1 → 1.2.2

package/lib/image-block/index.js

@@ -665,8 +665,11 @@ const ImageViewer = defineComponent({
     const timer = ref(0);
     const showBorderPanel = ref(false);
     const isCropping = ref(false);
-    const displayW = ref(0);
-    const displayH = ref(0);
+    const baseDisplayW = ref(0);
+    const baseDisplayH = ref(0);
+    const liveRatio = ref(null);
+    const localBorderWidth = ref(null);
+    const localBorderColor = ref(null);
     const localCrop = ref({ top: 0, left: 0, width: 1, height: 1 });
     let resizeDir = "";
     let startY = 0;
@@ -682,7 +685,6 @@ const ImageViewer = defineComponent({
       return t > 1e-3 || l > 1e-3 || w < 0.999 || h2 < 0.999;
     };
     const onImageLoad = () => {
-      var _a2;
       const image = imageRef.value;
       if (!image) return;
       const host = image.closest(".milkdown-image-block");
@@ -693,17 +695,16 @@ const ImageViewer = defineComponent({
         maxWidth = config.maxWidth;
       const height = image.naturalHeight;
       const width = image.naturalWidth;
-      let transformedHeight = width < maxWidth ? height : maxWidth * (height / width);
-      if (config.maxHeight && transformedHeight > config.maxHeight)
+      if (!height || !width) return;
+      const aspect = width / height;
+      let transformedWidth = width < maxWidth ? width : maxWidth;
+      let transformedHeight = transformedWidth / aspect;
+      if (config.maxHeight && transformedHeight > config.maxHeight) {
         transformedHeight = config.maxHeight;
-      const h2 = (transformedHeight * ((_a2 = ratio.value) != null ? _a2 : 1)).toFixed(2);
-      image.dataset.origin = transformedHeight.toFixed(2);
-      image.dataset.height = h2;
-      image.style.height = `${h2}px`;
-      if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`;
-      const dw = width < maxWidth ? width : maxWidth;
-      displayW.value = dw;
-      displayH.value = parseFloat(h2);
+        transformedWidth = transformedHeight * aspect;
+      }
+      baseDisplayH.value = transformedHeight;
+      baseDisplayW.value = transformedWidth;
     };
     const onToggleCaption = (e) => {
       e.preventDefault();
@@ -729,9 +730,8 @@ const ImageViewer = defineComponent({
       setAttr("caption", value);
     };
     const onResizeHandlePointerMove = (e) => {
+      var _a2;
       e.preventDefault();
-      const image = imageRef.value;
-      if (!image) return;
       const deltaY = e.clientY - startY;
       const deltaX = e.clientX - startX;
       const aspect = startHeight / (startWidth || 1);
@@ -743,39 +743,54 @@ const ImageViewer = defineComponent({
         dhX = -deltaX * aspect;
       }
       const dh = Math.abs(dhX) > Math.abs(dhY) ? dhX : dhY;
-      let height = startHeight + dh;
-      if (height < 20) height = 20;
-      if (config.maxHeight && height > config.maxHeight)
-        height = config.maxHeight;
-      const h2 = Number(height).toFixed(2);
-      image.dataset.height = h2;
-      image.style.height = `${h2}px`;
+      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 == null ? void 0 : image.closest(".milkdown-image-block");
+      const hostWidth = host == null ? void 0 : 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 (config.maxHeight && newWrapperHeight > config.maxHeight) {
+        newWrapperHeight = config.maxHeight;
+      }
+      const cHeight = isCropped() && !isCropping.value ? (_a2 = cropHeight.value) != null ? _a2 : 1 : 1;
+      const newBaseHeight = newWrapperHeight / cHeight;
+      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 ratio2 = Number.parseFloat(
-        Number(currentHeight / originHeight).toFixed(2)
-      );
-      if (Number.isNaN(ratio2)) return;
-      setAttr("ratio", ratio2);
+      if (liveRatio.value !== null) {
+        setAttr("ratio", liveRatio.value);
+        liveRatio.value = null;
+      }
     };
     const onResizeHandlePointerDown = (e, dir) => {
+      var _a2;
       if (readonly.value) return;
       e.preventDefault();
       e.stopPropagation();
       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 = (_a2 = ratio.value) != null ? _a2 : 1;
       window.addEventListener("pointermove", onResizeHandlePointerMove);
       window.addEventListener("pointerup", onResizeHandlePointerUp);
     };
@@ -911,43 +926,63 @@ const ImageViewer = defineComponent({
       cropDragType = "";
     };
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
       const currentBorderStyle = (_a2 = borderStyle.value) != null ? _a2 : "none";
-      const currentBorderWidth = (_b = borderWidth.value) != null ? _b : 0;
-      const currentBorderColor = (_c = borderColor.value) != null ? _c : "#000000";
+      const currentBorderWidth = localBorderWidth.value !== null ? localBorderWidth.value : (_b = borderWidth.value) != null ? _b : 0;
+      const currentBorderColor = localBorderColor.value !== null ? localBorderColor.value : (_c = borderColor.value) != null ? _c : "#000000";
       const cTop = (_d = cropTop.value) != null ? _d : 0;
       const cLeft = (_e = cropLeft.value) != null ? _e : 0;
       const cWidth = (_f = cropWidth.value) != null ? _f : 1;
       const cHeight = (_g = cropHeight.value) != null ? _g : 1;
       const cropped = isCropped();
       const borderStyleStr = currentBorderStyle !== "none" && currentBorderWidth > 0 ? `${currentBorderWidth}px ${currentBorderStyle} ${currentBorderColor}` : void 0;
-      const dw = displayW.value;
-      const dh = displayH.value;
-      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 currentRatio = liveRatio.value !== null ? liveRatio.value : (_h = ratio.value) != null ? _h : 1;
+      let baseW = baseDisplayW.value * currentRatio;
+      let baseH = baseDisplayH.value * currentRatio;
+      const image = imageRef.value;
+      const host = image == null ? void 0 : image.closest(".milkdown-image-block");
+      const hostWidth = host == null ? void 0 : 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 = {};
+      const wrapperStyle = {
+        minWidth: "20px",
+        minHeight: "20px",
+        border: !isCropping.value ? borderStyleStr != null ? borderStyleStr : "" : ""
+      };
+      if (cropped && !isCropping.value && cropPxW > 0 && cropPxH > 0) {
+        wrapperStyle.width = `${cropPxW}px`;
+        wrapperStyle.height = `${cropPxH}px`;
+      }
       const cropClipStyle = cropped && !isCropping.value && baseW > 0 && baseH > 0 ? {
         width: `${cropPxW}px`,
         height: `${cropPxH}px`,
         overflow: "hidden"
       } : null;
-      const imgStyle = {};
+      const imgStyle = {
+        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`;
-        imgStyle.border = borderStyleStr != null ? borderStyleStr : "";
       } else {
-        imgStyle.border = borderStyleStr != null ? borderStyleStr : "";
+        if (baseH > 0 && baseW > 0) {
+          imgStyle.width = `${baseW}px`;
+          imgStyle.height = `${baseH}px`;
+          if (config.maxWidth) imgStyle.maxWidth = `${config.maxWidth}px`;
+        }
       }
       return /* @__PURE__ */ h(Fragment$2, null, !isCropping.value ? /* @__PURE__ */ h(
         "div",
@@ -988,7 +1023,7 @@ const ImageViewer = defineComponent({
               resetCrop();
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: (_h = config.resetCropIcon) != null ? _h : "\u21A9" })
+          /* @__PURE__ */ h(Icon, { icon: (_i = config.resetCropIcon) != null ? _i : "\u21A9" })
         ) : null,
         config.borderIcon ? /* @__PURE__ */ h(
           "div",
@@ -1003,7 +1038,14 @@ const ImageViewer = defineComponent({
           "div",
           {
             class: "setting-panel border-panel",
-            onClick: (e) => e.stopPropagation()
+            draggable: "true",
+            onClick: (e) => e.stopPropagation(),
+            onMousedown: (e) => e.stopPropagation(),
+            onPointerdown: (e) => e.stopPropagation(),
+            onDragstart: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
           },
           /* @__PURE__ */ h("div", { class: "setting-panel-title" }, "\u8FB9\u6846\u8BBE\u7F6E"),
           /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u6837\u5F0F"), /* @__PURE__ */ h("div", { class: "border-style-options" }, borderStyleOptions.map((opt) => /* @__PURE__ */ h(
@@ -1020,29 +1062,51 @@ const ImageViewer = defineComponent({
           currentBorderStyle !== "none" ? /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u5BBD\u5EA6"), /* @__PURE__ */ h(
             "input",
             {
+              draggable: "true",
               type: "range",
               min: "1",
               max: "10",
               value: currentBorderWidth,
               onInput: (e) => {
+                const target = e.target;
+                localBorderWidth.value = Number(target.value);
+              },
+              onChange: (e) => {
                 const target = e.target;
                 setAttr("borderWidth", Number(target.value));
+                localBorderWidth.value = null;
               },
               onClick: (e) => e.stopPropagation(),
-              onPointerdown: (e) => e.stopPropagation()
+              onMousedown: (e) => e.stopPropagation(),
+              onPointerdown: (e) => e.stopPropagation(),
+              onDragstart: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
             }
           ), /* @__PURE__ */ h("span", { class: "setting-value" }, currentBorderWidth, "px")) : null,
           currentBorderStyle !== "none" ? /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u989C\u8272"), /* @__PURE__ */ h(
             "input",
             {
+              draggable: "true",
               type: "color",
               value: currentBorderColor,
               onInput: (e) => {
+                const target = e.target;
+                localBorderColor.value = target.value;
+              },
+              onChange: (e) => {
                 const target = e.target;
                 setAttr("borderColor", target.value);
+                localBorderColor.value = null;
               },
               onClick: (e) => e.stopPropagation(),
-              onPointerdown: (e) => e.stopPropagation()
+              onMousedown: (e) => e.stopPropagation(),
+              onPointerdown: (e) => e.stopPropagation(),
+              onDragstart: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
             }
           )) : null
         ) : null
@@ -1167,7 +1231,7 @@ const ImageViewer = defineComponent({
               applyCrop();
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: (_i = config.confirmIcon) != null ? _i : "\u2713" })
+          /* @__PURE__ */ h(Icon, { icon: (_j = config.confirmIcon) != null ? _j : "\u2713" })
         ), /* @__PURE__ */ h(
           "div",
           {
@@ -1177,7 +1241,7 @@ const ImageViewer = defineComponent({
               cancelCrop();
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: (_j = config.cancelIcon) != null ? _j : "\u2715" })
+          /* @__PURE__ */ h(Icon, { icon: (_k = config.cancelIcon) != null ? _k : "\u2715" })
         ))) : null,
         !isCropping.value ? /* @__PURE__ */ h(Fragment$2, null, /* @__PURE__ */ h(
           "div",