@expcat/tigercat-core 0.3.69 → 0.3.70

package/dist/index.js

@@ -5150,6 +5150,203 @@ function getTextClasses(props) {
   );
 }
 
+// src/utils/image-utils.ts
+var imageBaseClasses = "relative inline-block overflow-hidden";
+function getImageImgClasses(fit) {
+  const fitMap = {
+    contain: "object-contain",
+    cover: "object-cover",
+    fill: "object-fill",
+    none: "object-none",
+    "scale-down": "object-scale-down"
+  };
+  return classNames("block w-full h-full", fitMap[fit]);
+}
+var imageErrorClasses = "flex items-center justify-center w-full h-full bg-[var(--tiger-image-error-bg,#f3f4f6)] text-[var(--tiger-image-error-text,#9ca3af)]";
+var imageLoadingClasses = "flex items-center justify-center w-full h-full bg-[var(--tiger-image-error-bg,#f3f4f6)] text-[var(--tiger-image-error-text,#9ca3af)] animate-pulse";
+var imagePreviewCursorClass = "cursor-pointer";
+var imageErrorIconPath = "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z";
+var zoomInIconPath = "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7";
+var zoomOutIconPath = "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7";
+var resetIconPath = "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15";
+var prevIconPath = "M15 19l-7-7 7-7";
+var nextIconPath = "M9 5l7 7-7 7";
+var previewCloseIconPath = "M6 18L18 6M6 6l12 12";
+var imagePreviewMaskClasses = "fixed inset-0 bg-[var(--tiger-image-mask,rgba(0,0,0,0.85))] transition-opacity";
+var imagePreviewWrapperClasses = "fixed inset-0 flex items-center justify-center select-none";
+var imagePreviewImgClasses = "max-w-none transition-transform duration-150 ease-out cursor-grab active:cursor-grabbing";
+var imagePreviewToolbarClasses = "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--tiger-image-toolbar-bg,rgba(0,0,0,0.6))] text-white";
+var imagePreviewToolbarBtnClasses = "flex items-center justify-center w-8 h-8 rounded-full hover:bg-white/20 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50 disabled:opacity-40 disabled:cursor-not-allowed";
+var imagePreviewNavBtnClasses = "absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-[var(--tiger-image-toolbar-bg,rgba(0,0,0,0.6))] text-white hover:bg-white/20 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50 disabled:opacity-40 disabled:cursor-not-allowed";
+var imagePreviewCloseBtnClasses = "absolute top-4 right-4 flex items-center justify-center w-10 h-10 rounded-full bg-[var(--tiger-image-toolbar-bg,rgba(0,0,0,0.6))] text-white hover:bg-white/20 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50";
+var imagePreviewCounterClasses = "text-sm text-white/80 mx-2 tabular-nums";
+var imageCropperContainerClasses = "relative overflow-hidden bg-[var(--tiger-image-cropper-bg,#1a1a2e)] select-none touch-none";
+var imageCropperImgClasses = "absolute top-0 left-0 max-w-none pointer-events-none";
+var imageCropperMaskClasses = "absolute inset-0 pointer-events-none";
+var imageCropperSelectionClasses = "absolute border-2 border-[var(--tiger-image-cropper-border,#ffffff)] pointer-events-none";
+var imageCropperGuideClasses = "absolute border-[var(--tiger-image-cropper-border,rgba(255,255,255,0.4))] pointer-events-none";
+var imageCropperDragAreaClasses = "absolute cursor-move";
+function getCropperHandleClasses(handle) {
+  const base = "absolute w-3 h-3 bg-[var(--tiger-image-cropper-border,#ffffff)] border border-[var(--tiger-image-cropper-handle-border,rgba(0,0,0,0.3))]";
+  const positionMap = {
+    nw: "-top-1.5 -left-1.5 cursor-nw-resize",
+    n: "-top-1.5 left-1/2 -translate-x-1/2 cursor-n-resize",
+    ne: "-top-1.5 -right-1.5 cursor-ne-resize",
+    e: "top-1/2 -right-1.5 -translate-y-1/2 cursor-e-resize",
+    se: "-bottom-1.5 -right-1.5 cursor-se-resize",
+    s: "-bottom-1.5 left-1/2 -translate-x-1/2 cursor-s-resize",
+    sw: "-bottom-1.5 -left-1.5 cursor-sw-resize",
+    w: "top-1/2 -left-1.5 -translate-y-1/2 cursor-w-resize"
+  };
+  return classNames(base, positionMap[handle]);
+}
+var CROP_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var cropUploadTriggerClasses = "inline-flex items-center justify-center gap-2 px-4 py-2 border-2 border-dashed border-[var(--tiger-border,#d1d5db)] rounded-lg text-[var(--tiger-text-muted,#6b7280)] hover:border-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-[var(--tiger-primary,#2563eb)] focus:ring-offset-2";
+var cropUploadTriggerDisabledClasses = "inline-flex items-center justify-center gap-2 px-4 py-2 border-2 border-dashed border-[var(--tiger-border,#d1d5db)] rounded-lg text-[var(--tiger-text-muted,#9ca3af)] cursor-not-allowed opacity-50";
+var uploadPlusIconPath = "M12 4v16m8-8H4";
+function clampScale(scale, min, max) {
+  return Math.min(Math.max(scale, min), max);
+}
+function calculateTransform(scale, offsetX, offsetY) {
+  return `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+}
+function getPreviewNavState(currentIndex, total) {
+  return {
+    hasPrev: currentIndex > 0,
+    hasNext: currentIndex < total - 1,
+    counter: total > 1 ? `${currentIndex + 1} / ${total}` : ""
+  };
+}
+function constrainCropRect(rect, imageWidth, imageHeight, aspectRatio) {
+  let { x, y, width, height } = rect;
+  if (aspectRatio && aspectRatio > 0) {
+    const currentRatio = width / height;
+    if (currentRatio > aspectRatio) {
+      width = height * aspectRatio;
+    } else {
+      height = width / aspectRatio;
+    }
+  }
+  width = Math.min(width, imageWidth);
+  height = Math.min(height, imageHeight);
+  x = Math.max(0, Math.min(x, imageWidth - width));
+  y = Math.max(0, Math.min(y, imageHeight - height));
+  return { x, y, width, height };
+}
+function resizeCropRect(rect, handle, dx, dy, imageWidth, imageHeight, aspectRatio, minW = 20, minH = 20) {
+  let { x, y, width, height } = rect;
+  switch (handle) {
+    case "nw":
+      x += dx;
+      y += dy;
+      width -= dx;
+      height -= dy;
+      break;
+    case "n":
+      y += dy;
+      height -= dy;
+      break;
+    case "ne":
+      width += dx;
+      y += dy;
+      height -= dy;
+      break;
+    case "e":
+      width += dx;
+      break;
+    case "se":
+      width += dx;
+      height += dy;
+      break;
+    case "s":
+      height += dy;
+      break;
+    case "sw":
+      x += dx;
+      width -= dx;
+      height += dy;
+      break;
+    case "w":
+      x += dx;
+      width -= dx;
+      break;
+  }
+  if (width < minW) {
+    if (handle.includes("w")) {
+      x = rect.x + rect.width - minW;
+    }
+    width = minW;
+  }
+  if (height < minH) {
+    if (handle.includes("n")) {
+      y = rect.y + rect.height - minH;
+    }
+    height = minH;
+  }
+  if (aspectRatio && aspectRatio > 0) {
+    const newRatio = width / height;
+    if (handle === "n" || handle === "s" || handle === "nw" || handle === "sw" || handle === "ne" || handle === "se") {
+      width = height * aspectRatio;
+    }
+    if (handle === "e" || handle === "w") {
+      height = width / aspectRatio;
+    }
+    if (newRatio !== aspectRatio && (handle === "nw" || handle === "ne" || handle === "sw" || handle === "se")) {
+      width = height * aspectRatio;
+    }
+  }
+  return constrainCropRect({ x, y, width, height }, imageWidth, imageHeight, aspectRatio);
+}
+function moveCropRect(rect, dx, dy, boundW, boundH) {
+  const x = Math.max(0, Math.min(rect.x + dx, boundW - rect.width));
+  const y = Math.max(0, Math.min(rect.y + dy, boundH - rect.height));
+  return { x, y, width: rect.width, height: rect.height };
+}
+function getInitialCropRect(imageWidth, imageHeight, aspectRatio) {
+  const padding = 0.1;
+  let cropW = imageWidth * (1 - padding * 2);
+  let cropH = imageHeight * (1 - padding * 2);
+  if (aspectRatio && aspectRatio > 0) {
+    if (cropW / cropH > aspectRatio) {
+      cropW = cropH * aspectRatio;
+    } else {
+      cropH = cropW / aspectRatio;
+    }
+  }
+  return {
+    x: (imageWidth - cropW) / 2,
+    y: (imageHeight - cropH) / 2,
+    width: cropW,
+    height: cropH
+  };
+}
+function cropCanvas(image, cropRect, displayWidth, displayHeight, outputType = "image/png", quality = 0.92) {
+  const scaleX = image.naturalWidth / displayWidth;
+  const scaleY = image.naturalHeight / displayHeight;
+  const sx = cropRect.x * scaleX;
+  const sy = cropRect.y * scaleY;
+  const sw = cropRect.width * scaleX;
+  const sh = cropRect.height * scaleY;
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(sw);
+  canvas.height = Math.round(sh);
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.drawImage(image, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
+  }
+  const dataUrl = canvas.toDataURL(outputType, quality);
+  return { canvas, dataUrl };
+}
+function getTouchDistance(touch1, touch2) {
+  const dx = touch1.clientX - touch2.clientX;
+  const dy = touch1.clientY - touch2.clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function toCSSSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+
 // src/utils/carousel-utils.ts
 var carouselBaseClasses = "relative overflow-hidden w-full";
 var carouselTrackScrollClasses = "flex transition-transform ease-in-out";
@@ -6453,6 +6650,7 @@ export {
   ANIMATION_DURATION_FAST_MS,
   ANIMATION_DURATION_MS,
   ANIMATION_DURATION_SLOW_MS,
+  CROP_HANDLES,
   CalendarIconPath,
   ChevronLeftIconPath,
   ChevronRightIconPath,
@@ -6557,6 +6755,7 @@ export {
   calculateCirclePath,
   calculatePagination,
   calculateStepStatus,
+  calculateTransform,
   calendarSolidIcon20PathD,
   captureActiveElement,
   cardActionsClasses,
@@ -6598,6 +6797,7 @@ export {
   chevronRightSolidIcon20PathD,
   clampBarWidth,
   clampPercentage,
+  clampScale,
   clampSlideIndex,
   classNames,
   clearFieldErrors,
@@ -6631,6 +6831,7 @@ export {
   computeFloatingPosition,
   computePieHoverOffset,
   computePieLabelLine,
+  constrainCropRect,
   containerBaseClasses,
   containerCenteredClasses,
   containerMaxWidthClasses,
@@ -6646,6 +6847,9 @@ export {
   createPieArcPath,
   createPointScale,
   createPolygonPath,
+  cropCanvas,
+  cropUploadTriggerClasses,
+  cropUploadTriggerDisabledClasses,
   datePickerBaseClasses,
   datePickerCalendarClasses,
   datePickerCalendarGridClasses,
@@ -6776,6 +6980,7 @@ export {
   getContainerClasses,
   getContainerHeight,
   getContainerScrollTop,
+  getCropperHandleClasses,
   getCurrentTime,
   getDatePickerDayCellClasses,
   getDatePickerIconButtonClasses,
@@ -6823,6 +7028,8 @@ export {
   getFormWizardLabels,
   getGridColumnClasses,
   getGutterStyles,
+  getImageImgClasses,
+  getInitialCropRect,
   getInitials,
   getInputAffixClasses,
   getInputClasses,
@@ -6894,6 +7101,7 @@ export {
   getPopoverTitleClasses,
   getPopoverTriggerClasses,
   getPrevSlideIndex,
+  getPreviewNavState,
   getProgressTextColorClasses,
   getProgressVariantClasses,
   getQuickJumperInputClasses,
@@ -6982,6 +7190,7 @@ export {
   getTooltipTriggerClasses,
   getTotalPages,
   getTotalTextClasses,
+  getTouchDistance,
   getTransformOrigin,
   getTreeNodeClasses,
   getTreeNodeExpandIconClasses,
@@ -7005,6 +7214,25 @@ export {
   iconSvgDefaultStrokeLinejoin,
   iconSvgDefaultStrokeWidth,
   iconWrapperClasses,
+  imageBaseClasses,
+  imageCropperContainerClasses,
+  imageCropperDragAreaClasses,
+  imageCropperGuideClasses,
+  imageCropperImgClasses,
+  imageCropperMaskClasses,
+  imageCropperSelectionClasses,
+  imageErrorClasses,
+  imageErrorIconPath,
+  imageLoadingClasses,
+  imagePreviewCloseBtnClasses,
+  imagePreviewCounterClasses,
+  imagePreviewCursorClass,
+  imagePreviewImgClasses,
+  imagePreviewMaskClasses,
+  imagePreviewNavBtnClasses,
+  imagePreviewToolbarBtnClasses,
+  imagePreviewToolbarClasses,
+  imagePreviewWrapperClasses,
   initRovingTabIndex,
   injectDropdownStyles,
   injectLoadingAnimationStyles,
@@ -7109,7 +7337,9 @@ export {
   modalSizeClasses,
   modalTitleClasses,
   modalWrapperClasses,
+  moveCropRect,
   moveFocusInMenu,
+  nextIconPath,
   normalizeActiveKeys,
   normalizeChartPadding,
   normalizeDate,
@@ -7142,6 +7372,8 @@ export {
   popconfirmSuccessIconPath,
   popconfirmWarningIconPath,
   prepareUploadFiles,
+  prevIconPath,
+  previewCloseIconPath,
   progressCircleBaseClasses,
   progressCircleSizeClasses,
   progressCircleTextClasses,
@@ -7166,8 +7398,10 @@ export {
   replaceKeys,
   resetAreaGradientCounter,
   resetBarGradientCounter,
+  resetIconPath,
   resetLineGradientCounter,
   resetScatterGradientCounter,
+  resizeCropRect,
   resolveChartPalette,
   resolveChartTooltipContent,
   resolveLocaleText,
@@ -7289,6 +7523,7 @@ export {
   to12HourFormat,
   to24HourFormat,
   toActivityTimelineItems,
+  toCSSSize,
   toggleKey,
   togglePanelKey,
   treeBaseClasses,
@@ -7307,6 +7542,7 @@ export {
   treeNodeLabelClasses,
   treeNodeSelectedClasses,
   treeNodeWrapperClasses,
+  uploadPlusIconPath,
   uploadStatusIconColorClasses,
   uploadStatusIconSizeClasses,
   validateCurrentPage,
@@ -7315,5 +7551,7 @@ export {
   validateFileType,
   validateForm,
   validateRule,
-  version
+  version,
+  zoomInIconPath,
+  zoomOutIconPath
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expcat/tigercat-core",
-  "version": "0.3.69",
+  "version": "0.3.70",
   "type": "module",
   "description": "Core utilities for Tigercat UI library",
   "license": "MIT",