@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-BCU7GYF6.mjs

@@ -1,476 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/ImageCropper.ts
-import {
-  defineComponent,
-  h,
-  ref,
-  computed,
-  watch,
-  onMounted,
-  getCurrentInstance
-} from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  mergeStyleValues,
-  imageCropperContainerClasses,
-  imageCropperImgClasses,
-  imageCropperMaskClasses,
-  imageCropperSelectionClasses,
-  imageCropperGuideClasses,
-  imageCropperDragAreaClasses,
-  getCropperHandleClasses,
-  CROP_HANDLES,
-  getInitialCropRect,
-  resizeCropRect,
-  moveCropRect,
-  cropCanvas,
-  getImageEditorLabels,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-var isPositiveFinite = (value) => Number.isFinite(value) && value > 0;
-var ImageCropper = defineComponent({
-  name: "TigerImageCropper",
-  inheritAttrs: false,
-  props: {
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    src: { type: String, required: true },
-    aspectRatio: { type: Number, default: void 0 },
-    minWidth: { type: Number, default: 20 },
-    minHeight: { type: Number, default: 20 },
-    outputType: {
-      type: String,
-      default: "image/png"
-    },
-    quality: { type: Number, default: 0.92 },
-    guides: { type: Boolean, default: true },
-    className: { type: String, default: void 0 },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["crop-change", "ready"],
-  setup(props, { emit, attrs, expose }) {
-    const instance = getCurrentInstance();
-    const maskId = `tiger-crop-mask-${instance?.uid ?? "0"}`;
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
-    const containerRef = ref(null);
-    const imageRef = ref(null);
-    const imageLoaded = ref(false);
-    const displayWidth = ref(0);
-    const displayHeight = ref(0);
-    const cropRect = ref({ x: 0, y: 0, width: 0, height: 0 });
-    const dragMode = ref("none");
-    const activeHandle = ref(null);
-    const dragStartPos = ref({ x: 0, y: 0 });
-    const dragStartRect = ref({ x: 0, y: 0, width: 0, height: 0 });
-    const loadImage = () => {
-      imageRef.value = null;
-      const img = new window.Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        const naturalWidth = img.naturalWidth;
-        const naturalHeight = img.naturalHeight;
-        if (!isPositiveFinite(naturalWidth) || !isPositiveFinite(naturalHeight)) return;
-        if (containerRef.value) {
-          const measuredWidth = containerRef.value.clientWidth;
-          const measuredHeight = containerRef.value.clientHeight;
-          const containerW = isPositiveFinite(measuredWidth) ? measuredWidth : naturalWidth;
-          const containerH = isPositiveFinite(measuredHeight) ? measuredHeight : 400;
-          const ratio = Math.min(containerW / naturalWidth, containerH / naturalHeight, 1);
-          displayWidth.value = naturalWidth * ratio;
-          displayHeight.value = naturalHeight * ratio;
-        } else {
-          displayWidth.value = naturalWidth;
-          displayHeight.value = naturalHeight;
-        }
-        if (!isPositiveFinite(displayWidth.value) || !isPositiveFinite(displayHeight.value)) return;
-        imageRef.value = img;
-        cropRect.value = getInitialCropRect(
-          displayWidth.value,
-          displayHeight.value,
-          props.aspectRatio
-        );
-        imageLoaded.value = true;
-        emit("ready");
-      };
-      img.src = props.src;
-    };
-    watch(
-      () => props.src,
-      () => {
-        imageLoaded.value = false;
-        loadImage();
-      }
-    );
-    onMounted(() => {
-      loadImage();
-    });
-    const handleMouseDown = (e, mode, handle) => {
-      e.preventDefault();
-      e.stopPropagation();
-      dragMode.value = mode;
-      activeHandle.value = handle || null;
-      dragStartPos.value = { x: e.clientX, y: e.clientY };
-      dragStartRect.value = { ...cropRect.value };
-      const onMouseMove = (ev) => {
-        const dx = ev.clientX - dragStartPos.value.x;
-        const dy = ev.clientY - dragStartPos.value.y;
-        if (dragMode.value === "move") {
-          cropRect.value = moveCropRect(
-            dragStartRect.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value
-          );
-        } else if (dragMode.value === "resize" && activeHandle.value) {
-          cropRect.value = resizeCropRect(
-            dragStartRect.value,
-            activeHandle.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value,
-            props.aspectRatio,
-            props.minWidth,
-            props.minHeight
-          );
-        }
-        emit("crop-change", cropRect.value);
-      };
-      const onMouseUp = () => {
-        dragMode.value = "none";
-        activeHandle.value = null;
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
-    };
-    const handleTouchStart = (e, mode, handle) => {
-      if (e.touches.length !== 1) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const touch = e.touches[0];
-      dragMode.value = mode;
-      activeHandle.value = handle || null;
-      dragStartPos.value = { x: touch.clientX, y: touch.clientY };
-      dragStartRect.value = { ...cropRect.value };
-      const onTouchMove = (ev) => {
-        if (ev.touches.length !== 1) return;
-        const t = ev.touches[0];
-        const dx = t.clientX - dragStartPos.value.x;
-        const dy = t.clientY - dragStartPos.value.y;
-        if (dragMode.value === "move") {
-          cropRect.value = moveCropRect(
-            dragStartRect.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value
-          );
-        } else if (dragMode.value === "resize" && activeHandle.value) {
-          cropRect.value = resizeCropRect(
-            dragStartRect.value,
-            activeHandle.value,
-            dx,
-            dy,
-            displayWidth.value,
-            displayHeight.value,
-            props.aspectRatio,
-            props.minWidth,
-            props.minHeight
-          );
-        }
-        emit("crop-change", cropRect.value);
-      };
-      const onTouchEnd = () => {
-        dragMode.value = "none";
-        activeHandle.value = null;
-        document.removeEventListener("touchmove", onTouchMove);
-        document.removeEventListener("touchend", onTouchEnd);
-      };
-      document.addEventListener("touchmove", onTouchMove, { passive: false });
-      document.addEventListener("touchend", onTouchEnd);
-    };
-    const updateCropRect = (nextRect) => {
-      cropRect.value = nextRect;
-      emit("crop-change", cropRect.value);
-    };
-    const getKeyboardDelta = (e) => {
-      const step = e.shiftKey ? 10 : 1;
-      switch (e.key) {
-        case "ArrowLeft":
-          return { dx: -step, dy: 0 };
-        case "ArrowRight":
-          return { dx: step, dy: 0 };
-        case "ArrowUp":
-          return { dx: 0, dy: -step };
-        case "ArrowDown":
-          return { dx: 0, dy: step };
-        default:
-          return null;
-      }
-    };
-    const handleMoveKeyDown = (e) => {
-      const delta = getKeyboardDelta(e);
-      if (!delta) return;
-      e.preventDefault();
-      updateCropRect(
-        moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
-      );
-    };
-    const handleResizeKeyDown = (e, handle) => {
-      const delta = getKeyboardDelta(e);
-      if (!delta) return;
-      e.preventDefault();
-      updateCropRect(
-        resizeCropRect(
-          cropRect.value,
-          handle,
-          delta.dx,
-          delta.dy,
-          displayWidth.value,
-          displayHeight.value,
-          props.aspectRatio,
-          props.minWidth,
-          props.minHeight
-        )
-      );
-    };
-    const getCropResult = () => {
-      return new Promise((resolve, reject) => {
-        if (!imageRef.value) {
-          reject(new Error("Image not loaded"));
-          return;
-        }
-        const { canvas, dataUrl } = cropCanvas(
-          imageRef.value,
-          cropRect.value,
-          displayWidth.value,
-          displayHeight.value,
-          props.outputType,
-          props.quality
-        );
-        canvas.toBlob(
-          (blob) => {
-            if (blob) {
-              resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect.value } });
-            } else {
-              reject(new Error("Failed to create blob"));
-            }
-          },
-          props.outputType,
-          props.quality
-        );
-      });
-    };
-    expose({ getCropResult });
-    const containerClasses = computed(
-      () => classNames(
-        imageCropperContainerClasses,
-        props.className,
-        coerceClassValue(attrs.class)
-      )
-    );
-    const containerStyle = computed(
-      () => mergeStyleValues(attrs.style, props.style)
-    );
-    return () => {
-      const forwardedAttrs = Object.fromEntries(
-        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
-      );
-      if (!imageLoaded.value) {
-        return h(
-          "div",
-          {
-            ...forwardedAttrs,
-            ref: containerRef,
-            class: classNames(containerClasses.value, "flex items-center justify-center"),
-            style: Object.assign({}, containerStyle.value, {
-              minHeight: "200px"
-            }),
-            role: "img",
-            "aria-label": labels.value.loadingCropImageAriaLabel
-          },
-          [
-            h("div", {
-              class: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin"
-            })
-          ]
-        );
-      }
-      const cr = cropRect.value;
-      const img = h("img", {
-        src: props.src,
-        class: imageCropperImgClasses,
-        style: {
-          width: `${displayWidth.value}px`,
-          height: `${displayHeight.value}px`
-        },
-        draggable: false,
-        alt: labels.value.imageToCropAriaLabel
-      });
-      const mask = h(
-        "svg",
-        {
-          class: imageCropperMaskClasses,
-          width: displayWidth.value,
-          height: displayHeight.value,
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        [
-          h("defs", null, [
-            h("mask", { id: maskId }, [
-              h("rect", {
-                width: displayWidth.value,
-                height: displayHeight.value,
-                fill: "white"
-              }),
-              h("rect", {
-                x: cr.x,
-                y: cr.y,
-                width: cr.width,
-                height: cr.height,
-                fill: "black"
-              })
-            ])
-          ]),
-          h("rect", {
-            width: displayWidth.value,
-            height: displayHeight.value,
-            fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-            mask: `url(#${maskId})`
-          })
-        ]
-      );
-      const selection = h("div", {
-        class: imageCropperSelectionClasses,
-        style: {
-          left: `${cr.x}px`,
-          top: `${cr.y}px`,
-          width: `${cr.width}px`,
-          height: `${cr.height}px`
-        }
-      });
-      const dragArea = h("div", {
-        class: imageCropperDragAreaClasses,
-        style: {
-          left: `${cr.x}px`,
-          top: `${cr.y}px`,
-          width: `${cr.width}px`,
-          height: `${cr.height}px`
-        },
-        role: "button",
-        tabindex: 0,
-        "aria-label": labels.value.moveCropAreaAriaLabel,
-        onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move"),
-        onKeydown: handleMoveKeyDown
-      });
-      const guideLines = props.guides ? [
-        // Horizontal lines
-        h("div", {
-          class: imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x}px`,
-            top: `${cr.y + cr.height / 3}px`,
-            width: `${cr.width}px`,
-            height: "0px",
-            borderTopWidth: "1px",
-            borderTopStyle: "dashed"
-          }
-        }),
-        h("div", {
-          class: imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x}px`,
-            top: `${cr.y + cr.height * 2 / 3}px`,
-            width: `${cr.width}px`,
-            height: "0px",
-            borderTopWidth: "1px",
-            borderTopStyle: "dashed"
-          }
-        }),
-        // Vertical lines
-        h("div", {
-          class: imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x + cr.width / 3}px`,
-            top: `${cr.y}px`,
-            width: "0px",
-            height: `${cr.height}px`,
-            borderLeftWidth: "1px",
-            borderLeftStyle: "dashed"
-          }
-        }),
-        h("div", {
-          class: imageCropperGuideClasses,
-          "data-guide": "true",
-          style: {
-            left: `${cr.x + cr.width * 2 / 3}px`,
-            top: `${cr.y}px`,
-            width: "0px",
-            height: `${cr.height}px`,
-            borderLeftWidth: "1px",
-            borderLeftStyle: "dashed"
-          }
-        })
-      ] : [];
-      const handles = CROP_HANDLES.map((handle) => {
-        const pos = {};
-        if (handle.includes("n")) pos.top = `${cr.y}px`;
-        if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
-        if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
-        if (handle.includes("w")) pos.left = `${cr.x}px`;
-        if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
-        if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
-        return h("div", {
-          class: getCropperHandleClasses(handle),
-          style: pos,
-          role: "button",
-          tabindex: 0,
-          "aria-label": labels.value.resizeCropAreaAriaLabel.replace("{handle}", handle),
-          onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
-          onKeydown: (e) => handleResizeKeyDown(e, handle)
-        });
-      });
-      return h(
-        "div",
-        {
-          ...forwardedAttrs,
-          ref: containerRef,
-          class: containerClasses.value,
-          style: Object.assign({}, containerStyle.value, {
-            width: `${displayWidth.value}px`,
-            height: `${displayHeight.value}px`
-          }),
-          role: "application",
-          "aria-label": labels.value.cropperDialogAriaLabel,
-          "aria-roledescription": "image cropper"
-        },
-        [img, mask, selection, dragArea, ...guideLines, ...handles]
-      );
-    };
-  }
-});
-var ImageCropper_default = ImageCropper;
-
-export {
-  ImageCropper,
-  ImageCropper_default
-};