@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-CT36XD5I.mjs

@@ -1,412 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/ImageAnnotation.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  classNames,
-  isActivationKey,
-  createImageAnnotationBox,
-  createImageAnnotationPath,
-  defaultImageAnnotationTools,
-  getImageAnnotationCenter,
-  getImageAnnotationPathData,
-  getImageAnnotationPointFromClient,
-  getImageAnnotationShapeAriaLabel,
-  getImageAnnotationStrokeColor,
-  getImageAnnotationToolButtonClasses,
-  getImageEditorLabels,
-  imageAnnotationContainerClasses,
-  imageAnnotationDeleteButtonClasses,
-  imageAnnotationImageClasses,
-  imageAnnotationLabelClasses,
-  imageAnnotationOverlayClasses,
-  imageAnnotationReadonlyOverlayClasses,
-  imageAnnotationStageClasses,
-  imageAnnotationToolbarClasses,
-  shouldCommitImageAnnotationBox,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ImageAnnotation({
-  locale,
-  src,
-  alt = "Image to annotate",
-  value,
-  defaultValue = [],
-  selectedId,
-  defaultSelectedId,
-  tool,
-  defaultTool = "select",
-  tools = defaultImageAnnotationTools,
-  disabled = false,
-  readonly = false,
-  minSize = 0.01,
-  strokeWidth = 2,
-  showLabels = true,
-  className,
-  style,
-  onChange,
-  onSelect,
-  onToolChange,
-  onReady
-}) {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const labels = useMemo(() => getImageEditorLabels(mergedLocale), [mergedLocale]);
-  const toolLabels = useMemo(
-    () => ({
-      select: labels.selectToolText,
-      rectangle: labels.rectangleToolText,
-      ellipse: labels.ellipseToolText,
-      polygon: labels.polygonToolText,
-      freehand: labels.freehandToolText
-    }),
-    [labels]
-  );
-  const containerRef = useRef(null);
-  const overlayRef = useRef(null);
-  const idSeedRef = useRef(0);
-  const drawingRef = useRef(null);
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [displayWidth, setDisplayWidth] = useState(0);
-  const [displayHeight, setDisplayHeight] = useState(0);
-  const [innerAnnotations, setInnerAnnotations] = useState(defaultValue);
-  const [innerSelectedId, setInnerSelectedId] = useState(defaultSelectedId);
-  const [innerTool, setInnerTool] = useState(defaultTool);
-  const [draft, setDraft] = useState(null);
-  const annotations = value ?? innerAnnotations;
-  const activeSelectedId = selectedId ?? innerSelectedId;
-  const activeTool = tool ?? innerTool;
-  const canEdit = !disabled && !readonly;
-  useEffect(() => {
-    setImageLoaded(false);
-    setDraft(null);
-    if (typeof window === "undefined" || typeof window.Image !== "function") return;
-    const img = new window.Image();
-    img.onload = () => {
-      const container = containerRef.current;
-      const naturalWidth = img.naturalWidth || 1;
-      const naturalHeight = img.naturalHeight || 1;
-      const containerWidth = container?.clientWidth || naturalWidth;
-      const containerHeight = container?.clientHeight || naturalHeight;
-      const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
-      setDisplayWidth(naturalWidth * ratio);
-      setDisplayHeight(naturalHeight * ratio);
-      setImageLoaded(true);
-      onReady?.();
-    };
-    img.src = src;
-  }, [src, onReady]);
-  const commitAnnotations = useCallback(
-    (next, meta) => {
-      if (value === void 0) setInnerAnnotations(next);
-      onChange?.(next, meta);
-    },
-    [onChange, value]
-  );
-  const selectAnnotation = useCallback(
-    (annotation) => {
-      if (selectedId === void 0) setInnerSelectedId(annotation?.id);
-      onSelect?.(annotation);
-    },
-    [onSelect, selectedId]
-  );
-  const setActiveTool = useCallback(
-    (nextTool) => {
-      setDraft(null);
-      drawingRef.current = null;
-      if (tool === void 0) setInnerTool(nextTool);
-      onToolChange?.(nextTool);
-    },
-    [onToolChange, tool]
-  );
-  const createId = useCallback((shape) => {
-    idSeedRef.current += 1;
-    return `${shape}-${idSeedRef.current}`;
-  }, []);
-  const getPointFromEvent = useCallback((event) => {
-    const bounds = overlayRef.current?.getBoundingClientRect();
-    if (!bounds) return { x: 0, y: 0 };
-    return getImageAnnotationPointFromClient(event.clientX, event.clientY, bounds);
-  }, []);
-  const commitAnnotation = useCallback(
-    (annotation) => {
-      const next = [...annotations, annotation];
-      commitAnnotations(next, { type: "add", annotation });
-      selectAnnotation(annotation);
-    },
-    [annotations, commitAnnotations, selectAnnotation]
-  );
-  const commitPolygon = useCallback(() => {
-    const drawing = drawingRef.current;
-    if (!drawing || drawing.tool !== "polygon" || drawing.points.length < 3) return;
-    const annotation = createImageAnnotationPath("polygon", createId("polygon"), drawing.points);
-    drawingRef.current = null;
-    setDraft(null);
-    commitAnnotation(annotation);
-  }, [commitAnnotation, createId]);
-  const handleStageMouseDown = useCallback(
-    (event) => {
-      if (!canEdit || activeTool === "select" || activeTool === "polygon") return;
-      const point = getPointFromEvent(event);
-      drawingRef.current = { tool: activeTool, start: point, points: [point] };
-      const handleMouseMove = (moveEvent) => {
-        const drawing = drawingRef.current;
-        if (!drawing) return;
-        const nextPoint = getPointFromEvent(moveEvent);
-        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
-          setDraft(createImageAnnotationBox(drawing.tool, "draft", drawing.start, nextPoint));
-          return;
-        }
-        const nextPoints = [...drawing.points, nextPoint];
-        drawingRef.current = { ...drawing, points: nextPoints };
-        setDraft(createImageAnnotationPath("freehand", "draft", nextPoints));
-      };
-      const handleMouseUp = (upEvent) => {
-        const drawing = drawingRef.current;
-        drawingRef.current = null;
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        if (!drawing) return;
-        const end = getPointFromEvent(upEvent);
-        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
-          const annotation = createImageAnnotationBox(
-            drawing.tool,
-            createId(drawing.tool),
-            drawing.start,
-            end
-          );
-          setDraft(null);
-          if (shouldCommitImageAnnotationBox(annotation, minSize)) commitAnnotation(annotation);
-          return;
-        }
-        const points = [...drawing.points, end];
-        setDraft(null);
-        if (points.length >= 2)
-          commitAnnotation(createImageAnnotationPath("freehand", createId("freehand"), points));
-      };
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [activeTool, canEdit, commitAnnotation, createId, getPointFromEvent, minSize]
-  );
-  const handleStageClick = useCallback(
-    (event) => {
-      if (!canEdit || activeTool !== "polygon") return;
-      const point = getPointFromEvent(event);
-      const drawing = drawingRef.current;
-      const points = drawing?.tool === "polygon" ? [...drawing.points, point] : [point];
-      drawingRef.current = { tool: "polygon", start: points[0], points };
-      setDraft(createImageAnnotationPath("polygon", "draft", points));
-    },
-    [activeTool, canEdit, getPointFromEvent]
-  );
-  const removeAnnotation = useCallback(
-    (annotation) => {
-      if (!canEdit) return;
-      const next = annotations.filter((item) => item.id !== annotation.id);
-      commitAnnotations(next, { type: "remove", annotation });
-      selectAnnotation(null);
-    },
-    [annotations, canEdit, commitAnnotations, selectAnnotation]
-  );
-  const removeSelectedAnnotation = useCallback(() => {
-    if (!canEdit || !activeSelectedId) return;
-    const removed = annotations.find((annotation) => annotation.id === activeSelectedId);
-    if (removed) removeAnnotation(removed);
-  }, [activeSelectedId, annotations, canEdit, removeAnnotation]);
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (event.key === "Escape") {
-        drawingRef.current = null;
-        setDraft(null);
-        return;
-      }
-      if (event.key === "Enter") {
-        commitPolygon();
-        return;
-      }
-      if (event.key === "Delete" || event.key === "Backspace") {
-        event.preventDefault();
-        removeSelectedAnnotation();
-      }
-    },
-    [commitPolygon, removeSelectedAnnotation]
-  );
-  const renderAnnotation = useCallback(
-    (annotation, isDraft = false) => {
-      const selected = !isDraft && annotation.id === activeSelectedId;
-      const stroke = getImageAnnotationStrokeColor(annotation);
-      const onKeyDown = (event) => {
-        if (isDraft) return;
-        if (isActivationKey(event)) {
-          event.preventDefault();
-          event.stopPropagation();
-          selectAnnotation(annotation);
-          return;
-        }
-        if (event.key === "Delete" || event.key === "Backspace") {
-          event.preventDefault();
-          event.stopPropagation();
-          removeAnnotation(annotation);
-        }
-      };
-      const commonProps = {
-        stroke,
-        strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
-        fill: stroke,
-        fillOpacity: annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1,
-        role: "button",
-        tabIndex: isDraft ? -1 : 0,
-        "aria-label": getImageAnnotationShapeAriaLabel(annotation),
-        className: classNames(!isDraft && "cursor-pointer focus:outline-none"),
-        onKeyDown: isDraft ? void 0 : onKeyDown
-      };
-      const onClick = (event) => {
-        if (isDraft) return;
-        event.stopPropagation();
-        selectAnnotation(annotation);
-      };
-      if (annotation.type === "rectangle") {
-        return /* @__PURE__ */ jsx(
-          "rect",
-          {
-            ...commonProps,
-            x: annotation.x * displayWidth,
-            y: annotation.y * displayHeight,
-            width: annotation.width * displayWidth,
-            height: annotation.height * displayHeight,
-            onClick
-          },
-          annotation.id
-        );
-      }
-      if (annotation.type === "ellipse") {
-        return /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            ...commonProps,
-            cx: (annotation.x + annotation.width / 2) * displayWidth,
-            cy: (annotation.y + annotation.height / 2) * displayHeight,
-            rx: annotation.width * displayWidth / 2,
-            ry: annotation.height * displayHeight / 2,
-            onClick
-          },
-          annotation.id
-        );
-      }
-      const pathAnnotation = annotation;
-      return /* @__PURE__ */ jsx(
-        "path",
-        {
-          ...commonProps,
-          d: getImageAnnotationPathData(pathAnnotation, displayWidth, displayHeight),
-          fillOpacity: pathAnnotation.type === "polygon" ? commonProps.fillOpacity : 0,
-          onClick
-        },
-        annotation.id
-      );
-    },
-    [activeSelectedId, displayHeight, displayWidth, removeAnnotation, selectAnnotation, strokeWidth]
-  );
-  const renderedAnnotations = useMemo(
-    () => annotations.map((annotation) => renderAnnotation(annotation)),
-    [annotations, renderAnnotation]
-  );
-  const renderedLabels = showLabels ? annotations.filter((annotation) => annotation.label).map((annotation) => {
-    const center = getImageAnnotationCenter(annotation, displayWidth, displayHeight);
-    return /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: center.x,
-        y: center.y,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        className: imageAnnotationLabelClasses,
-        children: annotation.label
-      },
-      `${annotation.id}-label`
-    );
-  }) : null;
-  const containerClasses = classNames(imageAnnotationContainerClasses, className);
-  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs("div", { className: imageAnnotationToolbarClasses, "aria-label": labels.annotationToolbarAriaLabel, children: [
-      tools.map((item) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getImageAnnotationToolButtonClasses(activeTool === item),
-          disabled: disabled || readonly,
-          "aria-pressed": activeTool === item,
-          onClick: () => setActiveTool(item),
-          children: toolLabels[item]
-        },
-        item
-      )),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: imageAnnotationDeleteButtonClasses,
-          disabled: !canEdit || !activeSelectedId,
-          onClick: removeSelectedAnnotation,
-          children: labels.deleteText
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: imageAnnotationStageClasses,
-        style: { width: imageLoaded ? `${displayWidth}px` : void 0 },
-        role: imageLoaded ? "application" : "img",
-        "aria-label": imageLoaded ? labels.annotationEditorAriaLabel : labels.loadingAnnotationImageAriaLabel,
-        children: !imageLoaded ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] min-w-[240px] items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src,
-              alt,
-              className: imageAnnotationImageClasses,
-              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
-              draggable: false
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              ref: overlayRef,
-              className: classNames(
-                imageAnnotationOverlayClasses,
-                (!canEdit || activeTool === "select") && imageAnnotationReadonlyOverlayClasses
-              ),
-              width: displayWidth,
-              height: displayHeight,
-              viewBox: `0 0 ${displayWidth} ${displayHeight}`,
-              "aria-label": labels.annotationCanvasAriaLabel,
-              onMouseDown: handleStageMouseDown,
-              onClick: handleStageClick,
-              onDoubleClick: commitPolygon,
-              children: [
-                renderedAnnotations,
-                draft ? renderAnnotation(draft, true) : null,
-                renderedLabels
-              ]
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-ImageAnnotation.displayName = "ImageAnnotation";
-
-export {
-  ImageAnnotation
-};