v3-comf-dm 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,718 @@
+import { defineComponent, ref, computed, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot, watch, createStaticVNode, createCommentVNode, withModifiers, Fragment, renderList, normalizeClass, withDirectives, vModelText, toDisplayString } from "vue";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VcScaleContainer"
+  },
+  __name: "index",
+  props: {
+    designWidth: { default: 1920 },
+    designHeight: { default: 1080 },
+    keepAspectRatio: { type: Boolean, default: true },
+    scaleMode: { default: "fit" },
+    detectBrowserZoom: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const scaleContainer = ref(null);
+    const scale = ref(1);
+    const scaleX = ref(1);
+    const scaleY = ref(1);
+    const containerWidth = ref(1920);
+    const containerHeight = ref(1080);
+    const containerStyle = computed(() => ({
+      width: `${containerWidth.value}px`,
+      height: `${containerHeight.value}px`,
+      position: "relative",
+      overflow: "hidden"
+    }));
+    const wrapperStyle = computed(() => {
+      const commonStyle = {
+        width: `${props.designWidth}px`,
+        height: `${props.designHeight}px`,
+        transformOrigin: "top left"
+      };
+      if (props.keepAspectRatio && (props.scaleMode === "fit" || props.scaleMode === "fill")) {
+        const sw = props.designWidth * scale.value;
+        const sh = props.designHeight * scale.value;
+        return {
+          ...commonStyle,
+          transform: `scale(${scale.value})`,
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          marginTop: `-${sh / 2}px`,
+          marginLeft: `-${sw / 2}px`
+        };
+      }
+      return {
+        ...commonStyle,
+        transform: `scale(${scaleX.value}, ${scaleY.value})`
+      };
+    });
+    const updateScale = () => {
+      const el = scaleContainer.value;
+      if (!el || !el.parentElement) return;
+      const parent = el.parentElement;
+      let pw = parent.clientWidth || window.innerWidth;
+      let ph = parent.clientHeight || window.innerHeight;
+      if (pw === 0) pw = window.innerWidth;
+      if (ph === 0) ph = window.innerHeight;
+      containerWidth.value = pw;
+      containerHeight.value = ph;
+      const sx = pw / props.designWidth;
+      const sy = ph / props.designHeight;
+      if (props.scaleMode === "stretch") {
+        scaleX.value = sx;
+        scaleY.value = sy;
+      } else if (props.keepAspectRatio) {
+        scale.value = props.scaleMode === "fit" ? Math.min(sx, sy) : Math.max(sx, sy);
+      } else {
+        scaleX.value = sx;
+        scaleY.value = sy;
+      }
+    };
+    let resizeObserver = null;
+    const handleResize = () => updateScale();
+    onMounted(() => {
+      nextTick(() => {
+        var _a;
+        updateScale();
+        window.addEventListener("resize", handleResize);
+        if (window.ResizeObserver && ((_a = scaleContainer.value) == null ? void 0 : _a.parentElement)) {
+          resizeObserver = new ResizeObserver(handleResize);
+          resizeObserver.observe(scaleContainer.value.parentElement);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", handleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "scaleContainer",
+        ref: scaleContainer,
+        class: "vc-scale-container",
+        style: normalizeStyle(containerStyle.value)
+      }, [
+        createElementVNode("div", {
+          class: "vc-scale-wrapper",
+          style: normalizeStyle(wrapperStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 4)
+      ], 4);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const ScaleContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7f878606"]]);
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-image-cropper-placeholder"
+};
+const _hoisted_2 = ["src"];
+const _hoisted_3 = {
+  key: 0,
+  class: "vc-crop-grid"
+};
+const _hoisted_4 = ["onMousedown"];
+const _hoisted_5 = {
+  key: 0,
+  class: "vc-cropper-toolbar"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "toolbar-group"
+};
+const _hoisted_7 = ["min", "max"];
+const _hoisted_8 = { class: "toolbar-value" };
+const _hoisted_9 = {
+  key: 1,
+  class: "toolbar-group"
+};
+const __default__ = {
+  name: "VcImageCropper"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    imageSrc: {},
+    cropMode: { default: "free" },
+    fixedWidth: {},
+    fixedHeight: {},
+    aspectRatio: {},
+    minWidth: { default: 50 },
+    minHeight: { default: 50 },
+    maxWidth: {},
+    maxHeight: {},
+    showGrid: { type: Boolean, default: true },
+    rotatable: { type: Boolean, default: true },
+    zoomable: { type: Boolean, default: true },
+    initialZoom: { default: 1 },
+    containerWidth: { default: "100%" },
+    containerHeight: { default: "600px" }
+  },
+  emits: ["crop", "cancel", "ready"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = ref(null);
+    const contentRef = ref(null);
+    const imageWrapperRef = ref(null);
+    const imageRef = ref(null);
+    const cropBoxRef = ref(null);
+    const imageLoaded = ref(false);
+    const imageNaturalWidth = ref(0);
+    const imageNaturalHeight = ref(0);
+    const imageDisplayWidth = ref(0);
+    const imageDisplayHeight = ref(0);
+    const rotation = ref(0);
+    const zoom = ref(props.initialZoom);
+    const minZoom = ref(0.1);
+    const maxZoom = ref(5);
+    const cropArea = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    const isDragging = ref(false);
+    const isResizing = ref(false);
+    const dragType = ref("");
+    const dragStart = ref({ x: 0, y: 0 });
+    const cropStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+    const containerStyle = computed(() => ({
+      width: typeof props.containerWidth === "number" ? `${props.containerWidth}px` : props.containerWidth,
+      height: typeof props.containerHeight === "number" ? `${props.containerHeight}px` : props.containerHeight
+    }));
+    const imageWrapperStyle = computed(() => ({
+      transform: `rotate(${rotation.value}deg) scale(${zoom.value})`,
+      transformOrigin: "center center"
+    }));
+    const imageStyle = computed(() => ({
+      width: `${imageDisplayWidth.value}px`,
+      height: `${imageDisplayHeight.value}px`,
+      display: "block"
+    }));
+    const cropBoxStyle = computed(() => ({
+      left: `${cropArea.value.x}px`,
+      top: `${cropArea.value.y}px`,
+      width: `${cropArea.value.width}px`,
+      height: `${cropArea.value.height}px`
+    }));
+    const cropHandles = computed(() => {
+      return [
+        { type: "nw", class: "handle-nw", style: { top: "-4px", left: "-4px", cursor: "nwse-resize" } },
+        {
+          type: "ne",
+          class: "handle-ne",
+          style: { top: "-4px", right: "-4px", cursor: "nesw-resize" }
+        },
+        {
+          type: "sw",
+          class: "handle-sw",
+          style: { bottom: "-4px", left: "-4px", cursor: "nesw-resize" }
+        },
+        {
+          type: "se",
+          class: "handle-se",
+          style: { bottom: "-4px", right: "-4px", cursor: "nwse-resize" }
+        },
+        {
+          type: "n",
+          class: "handle-n",
+          style: { top: "-4px", left: "50%", transform: "translateX(-50%)", cursor: "ns-resize" }
+        },
+        {
+          type: "s",
+          class: "handle-s",
+          style: { bottom: "-4px", left: "50%", transform: "translateX(-50%)", cursor: "ns-resize" }
+        },
+        {
+          type: "w",
+          class: "handle-w",
+          style: { top: "50%", left: "-4px", transform: "translateY(-50%)", cursor: "ew-resize" }
+        },
+        {
+          type: "e",
+          class: "handle-e",
+          style: { top: "50%", right: "-4px", transform: "translateY(-50%)", cursor: "ew-resize" }
+        }
+      ];
+    });
+    const handleImageLoad = () => {
+      if (!imageRef.value) return;
+      imageNaturalWidth.value = imageRef.value.naturalWidth;
+      imageNaturalHeight.value = imageRef.value.naturalHeight;
+      nextTick(() => {
+        updateImageDisplaySize();
+        initCropArea();
+        imageLoaded.value = true;
+        emit("ready");
+      });
+    };
+    const updateImageDisplaySize = () => {
+      if (!contentRef.value || !imageRef.value) return;
+      const containerWidth = contentRef.value.clientWidth;
+      const containerHeight = contentRef.value.clientHeight;
+      if (containerWidth === 0 || containerHeight === 0) return;
+      const naturalAspect = imageNaturalWidth.value / imageNaturalHeight.value;
+      const containerAspect = containerWidth / containerHeight;
+      if (naturalAspect > containerAspect) {
+        imageDisplayWidth.value = containerWidth * 0.9;
+        imageDisplayHeight.value = containerWidth * 0.9 / naturalAspect;
+      } else {
+        imageDisplayHeight.value = containerHeight * 0.9;
+        imageDisplayWidth.value = containerHeight * 0.9 * naturalAspect;
+      }
+    };
+    const initCropArea = () => {
+      const width = imageDisplayWidth.value;
+      const height = imageDisplayHeight.value;
+      const size = Math.min(width, height) * 0.8;
+      let cropWidth = size;
+      let cropHeight = size;
+      if (props.cropMode === "fixed") {
+        cropWidth = props.fixedWidth || size;
+        cropHeight = props.fixedHeight || size;
+      } else if (props.cropMode === "ratio" && props.aspectRatio) {
+        if (width / height > props.aspectRatio) {
+          cropHeight = size;
+          cropWidth = size * props.aspectRatio;
+        } else {
+          cropWidth = size;
+          cropHeight = size / props.aspectRatio;
+        }
+      }
+      cropArea.value = {
+        x: (width - cropWidth) / 2,
+        y: (height - cropHeight) / 2,
+        width: cropWidth,
+        height: cropHeight
+      };
+    };
+    const handleMouseDown = (e) => {
+      if (e.target !== imageWrapperRef.value) return;
+      isDragging.value = true;
+      dragStart.value = { x: e.clientX, y: e.clientY };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      e.preventDefault();
+    };
+    const handleCropBoxMouseDown = (e) => {
+      if (e.target === cropBoxRef.value) {
+        isDragging.value = true;
+        dragType.value = "crop-box";
+        dragStart.value = { x: e.clientX, y: e.clientY };
+        cropStart.value = { ...cropArea.value };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        e.preventDefault();
+      }
+    };
+    const handleResizeStart = (e, type) => {
+      isResizing.value = true;
+      dragType.value = type;
+      dragStart.value = { x: e.clientX, y: e.clientY };
+      cropStart.value = { ...cropArea.value };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+      if (!contentRef.value) return;
+      const screenDeltaX = (e.clientX - dragStart.value.x) / zoom.value;
+      const screenDeltaY = (e.clientY - dragStart.value.y) / zoom.value;
+      const rad = -rotation.value * Math.PI / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const deltaX = screenDeltaX * cos - screenDeltaY * sin;
+      const deltaY = screenDeltaX * sin + screenDeltaY * cos;
+      if (isDragging.value && dragType.value === "crop-box") {
+        const width = imageDisplayWidth.value;
+        const height = imageDisplayHeight.value;
+        const newX = Math.max(0, Math.min(cropStart.value.x + deltaX, width - cropArea.value.width));
+        const newY = Math.max(0, Math.min(cropStart.value.y + deltaY, height - cropArea.value.height));
+        cropArea.value.x = newX;
+        cropArea.value.y = newY;
+      } else if (isResizing.value) {
+        resizeCropBox(deltaX, deltaY);
+      }
+    };
+    const resizeCropBox = (deltaX, deltaY) => {
+      const width = imageDisplayWidth.value;
+      const height = imageDisplayHeight.value;
+      const { x, y, width: w, height: h } = cropStart.value;
+      const type = dragType.value;
+      let newX = x;
+      let newY = y;
+      let newWidth = w;
+      let newHeight = h;
+      if (type.includes("e")) {
+        newWidth = Math.max(props.minWidth, Math.min(w + deltaX, width - x, props.maxWidth || Infinity));
+      }
+      if (type.includes("w")) {
+        const maxWidth = x + w;
+        newWidth = Math.max(props.minWidth, Math.min(w - deltaX, maxWidth, props.maxWidth || Infinity));
+        newX = Math.max(0, x + w - newWidth);
+      }
+      if (type.includes("s")) {
+        newHeight = Math.max(
+          props.minHeight,
+          Math.min(h + deltaY, height - y, props.maxHeight || Infinity)
+        );
+      }
+      if (type.includes("n")) {
+        const maxHeight = y + h;
+        newHeight = Math.max(
+          props.minHeight,
+          Math.min(h - deltaY, maxHeight, props.maxHeight || Infinity)
+        );
+        newY = Math.max(0, y + h - newHeight);
+      }
+      if (props.cropMode === "ratio" && props.aspectRatio) {
+        const currentAspect = newWidth / newHeight;
+        if (Math.abs(currentAspect - props.aspectRatio) > 0.01) {
+          if (type.includes("e") || type.includes("w")) {
+            newHeight = newWidth / props.aspectRatio;
+            if (type.includes("n")) {
+              newY = y + h - newHeight;
+            }
+          } else {
+            newWidth = newHeight * props.aspectRatio;
+            if (type.includes("w")) {
+              newX = x + w - newWidth;
+            }
+          }
+        }
+      }
+      if (newX + newWidth > width) {
+        newWidth = width - newX;
+        if (props.cropMode === "ratio" && props.aspectRatio) {
+          newHeight = newWidth / props.aspectRatio;
+        }
+      }
+      if (newY + newHeight > height) {
+        newHeight = height - newY;
+        if (props.cropMode === "ratio" && props.aspectRatio) {
+          newWidth = newHeight * props.aspectRatio;
+        }
+      }
+      cropArea.value = { x: newX, y: newY, width: newWidth, height: newHeight };
+    };
+    const handleMouseUp = () => {
+      isDragging.value = false;
+      isResizing.value = false;
+      dragType.value = "";
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+    const handleZoomChange = () => {
+    };
+    const handleWheel = (e) => {
+      if (!props.zoomable || !imageLoaded.value) return;
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      const newZoom = Math.max(minZoom.value, Math.min(maxZoom.value, zoom.value + delta));
+      zoom.value = Math.round(newZoom * 10) / 10;
+    };
+    const rotateImage = (angle) => {
+      rotation.value = (rotation.value + angle) % 360;
+      nextTick(() => {
+        updateImageDisplaySize();
+        initCropArea();
+      });
+    };
+    const handleCrop = () => {
+      if (!imageRef.value || !props.imageSrc) return;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const scaleX = imageNaturalWidth.value / imageDisplayWidth.value;
+      const scaleY = imageNaturalHeight.value / imageDisplayHeight.value;
+      const { x, y, width, height } = cropArea.value;
+      const cropW = width * scaleX;
+      const cropH = height * scaleY;
+      const is90Deg = Math.abs(rotation.value % 180) === 90;
+      canvas.width = is90Deg ? cropH : cropW;
+      canvas.height = is90Deg ? cropW : cropH;
+      ctx.save();
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(rotation.value * Math.PI / 180);
+      const imgCenterX = imageNaturalWidth.value / 2;
+      const imgCenterY = imageNaturalHeight.value / 2;
+      const cropCenterX = (x + width / 2) * scaleX;
+      const cropCenterY = (y + height / 2) * scaleY;
+      const drawOffsetX = imgCenterX - cropCenterX;
+      const drawOffsetY = imgCenterY - cropCenterY;
+      ctx.drawImage(
+        imageRef.value,
+        -imageNaturalWidth.value / 2 + drawOffsetX,
+        -imageNaturalHeight.value / 2 + drawOffsetY,
+        imageNaturalWidth.value,
+        imageNaturalHeight.value
+      );
+      ctx.restore();
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const dataUrl = canvas.toDataURL("image/png");
+          emit("crop", {
+            blob,
+            dataUrl,
+            cropArea: {
+              x: x * scaleX,
+              y: y * scaleY,
+              width: cropW,
+              height: cropH
+            }
+          });
+        }
+      }, "image/png");
+    };
+    const handleCancel = () => {
+      emit("cancel");
+    };
+    watch(
+      () => props.imageSrc,
+      (newSrc) => {
+        if (newSrc) {
+          imageLoaded.value = false;
+          rotation.value = 0;
+          zoom.value = props.initialZoom;
+        }
+      }
+    );
+    const resizeObserver = ref(null);
+    const handleKeyDown = (e) => {
+      if (!imageLoaded.value || !props.imageSrc) return;
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+        return;
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "=" || e.key === "+") {
+          e.preventDefault();
+          const newZoom = Math.min(maxZoom.value, zoom.value + 0.1);
+          zoom.value = Math.round(newZoom * 10) / 10;
+        } else if (e.key === "-" || e.key === "_") {
+          e.preventDefault();
+          const newZoom = Math.max(minZoom.value, zoom.value - 0.1);
+          zoom.value = Math.round(newZoom * 10) / 10;
+        }
+      }
+      if (props.rotatable && (e.key === "r" || e.key === "R")) {
+        e.preventDefault();
+        rotateImage(90);
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleCrop();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+      }
+    };
+    onMounted(() => {
+      if (containerRef.value && window.ResizeObserver) {
+        resizeObserver.value = new ResizeObserver(() => {
+          updateImageDisplaySize();
+        });
+        resizeObserver.value.observe(containerRef.value);
+      }
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onBeforeUnmount(() => {
+      handleMouseUp();
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "vc-image-cropper",
+        style: normalizeStyle(containerStyle.value),
+        tabindex: "0"
+      }, [
+        !__props.imageSrc ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[3] || (_cache[3] = [
+          createStaticVNode('<div class="placeholder-content" data-v-a3fe50be><svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-v-a3fe50be><rect x="3" y="3" width="18" height="18" rx="2" ry="2" data-v-a3fe50be></rect><circle cx="8.5" cy="8.5" r="1.5" data-v-a3fe50be></circle><polyline points="21 15 16 10 5 21" data-v-a3fe50be></polyline></svg><p data-v-a3fe50be>请选择图片</p></div>', 1)
+        ])])) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "vc-image-cropper-content",
+          ref_key: "contentRef",
+          ref: contentRef
+        }, [
+          createElementVNode("div", {
+            ref_key: "imageWrapperRef",
+            ref: imageWrapperRef,
+            class: "vc-image-wrapper",
+            style: normalizeStyle(imageWrapperStyle.value),
+            onMousedown: handleMouseDown,
+            onWheel: withModifiers(handleWheel, ["prevent"])
+          }, [
+            createElementVNode("img", {
+              ref_key: "imageRef",
+              ref: imageRef,
+              src: __props.imageSrc,
+              style: normalizeStyle(imageStyle.value),
+              onLoad: handleImageLoad,
+              draggable: "false"
+            }, null, 44, _hoisted_2),
+            imageLoaded.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "cropBoxRef",
+              ref: cropBoxRef,
+              class: "vc-crop-box",
+              style: normalizeStyle(cropBoxStyle.value),
+              onMousedown: withModifiers(handleCropBoxMouseDown, ["stop"])
+            }, [
+              __props.showGrid ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[4] || (_cache[4] = [
+                createElementVNode("div", { class: "grid-line grid-line-h1" }, null, -1),
+                createElementVNode("div", { class: "grid-line grid-line-h2" }, null, -1),
+                createElementVNode("div", { class: "grid-line grid-line-v1" }, null, -1),
+                createElementVNode("div", { class: "grid-line grid-line-v2" }, null, -1)
+              ])])) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(cropHandles.value, (handle, index2) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index2,
+                  class: normalizeClass(["vc-crop-handle", handle.class]),
+                  style: normalizeStyle(handle.style),
+                  onMousedown: withModifiers(($event) => handleResizeStart($event, handle.type), ["stop"])
+                }, null, 46, _hoisted_4);
+              }), 128))
+            ], 36)) : createCommentVNode("", true)
+          ], 36),
+          imageLoaded.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            __props.zoomable ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              _cache[5] || (_cache[5] = createElementVNode("label", { class: "toolbar-label" }, "缩放:", -1)),
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => zoom.value = $event),
+                type: "range",
+                min: minZoom.value,
+                max: maxZoom.value,
+                step: 0.1,
+                class: "toolbar-slider",
+                onInput: handleZoomChange
+              }, null, 40, _hoisted_7), [
+                [
+                  vModelText,
+                  zoom.value,
+                  void 0,
+                  { number: true }
+                ]
+              ]),
+              createElementVNode("span", _hoisted_8, toDisplayString(Math.round(zoom.value * 100)) + "%", 1)
+            ])) : createCommentVNode("", true),
+            __props.rotatable ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              createElementVNode("button", {
+                class: "toolbar-btn",
+                onClick: _cache[1] || (_cache[1] = ($event) => rotateImage(-90)),
+                title: "逆时针旋转"
+              }, "↺"),
+              createElementVNode("button", {
+                class: "toolbar-btn",
+                onClick: _cache[2] || (_cache[2] = ($event) => rotateImage(90)),
+                title: "顺时针旋转"
+              }, "↻")
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", { class: "toolbar-group" }, [
+              createElementVNode("button", {
+                class: "toolbar-btn toolbar-btn-primary",
+                onClick: handleCrop
+              }, "确认裁剪"),
+              createElementVNode("button", {
+                class: "toolbar-btn",
+                onClick: handleCancel
+              }, "取消")
+            ])
+          ])) : createCommentVNode("", true)
+        ], 512))
+      ], 4);
+    };
+  }
+});
+const ImageCropper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a3fe50be"]]);
+const components = [
+  ScaleContainer,
+  ImageCropper
+];
+const install$1 = (app) => {
+  components.forEach((component) => {
+    const name = component.name || component.__name;
+    if (name) {
+      app.component(name, component);
+    }
+  });
+};
+const isString = (val) => typeof val === "string";
+const isNumber = (val) => typeof val === "number";
+const isBoolean = (val) => typeof val === "boolean";
+const isObject = (val) => val !== null && typeof val === "object";
+const isArray = (val) => Array.isArray(val);
+const isFunction = (val) => typeof val === "function";
+function debounce(func, wait) {
+  let timeout = null;
+  return function(...args) {
+    const context = this;
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func.apply(context, args);
+    }, wait);
+  };
+}
+function throttle(func, wait) {
+  let timeout = null;
+  let previous = 0;
+  return function(...args) {
+    const now = Date.now();
+    const remaining = wait - (now - previous);
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      func.apply(this, args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now();
+        timeout = null;
+        func.apply(this, args);
+      }, remaining);
+    }
+  };
+}
+const install = (app) => {
+  install$1(app);
+};
+const index = {
+  install
+};
+const version = "1.0.0";
+export {
+  ImageCropper,
+  ScaleContainer,
+  debounce,
+  index as default,
+  install,
+  isArray,
+  isBoolean,
+  isFunction,
+  isNumber,
+  isObject,
+  isString,
+  throttle,
+  version
+};
+//# sourceMappingURL=index.esm.js.map