@expcat/tigercat-vue 1.1.0 → 1.2.14

package/dist/chunk-PY6P4N2Q.js

@@ -0,0 +1,393 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ImageAnnotation.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var ImageAnnotation = _vue.defineComponent.call(void 0, {
+  name: "TigerImageAnnotation",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, required: true },
+    alt: { type: String, default: "Image to annotate" },
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    selectedId: { type: String, default: void 0 },
+    defaultSelectedId: { type: String, default: void 0 },
+    tool: { type: String, default: void 0 },
+    defaultTool: { type: String, default: "select" },
+    tools: {
+      type: Array,
+      default: () => _tigercatcore.defaultImageAnnotationTools
+    },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    minSize: { type: Number, default: 0.01 },
+    strokeWidth: { type: Number, default: 2 },
+    showLabels: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "select", "tool-change", "ready"],
+  setup(props, { attrs, emit }) {
+    const containerRef = _vue.ref.call(void 0, null);
+    const overlayRef = _vue.ref.call(void 0, null);
+    const idSeed = _vue.ref.call(void 0, 0);
+    const imageLoaded = _vue.ref.call(void 0, false);
+    const displayWidth = _vue.ref.call(void 0, 0);
+    const displayHeight = _vue.ref.call(void 0, 0);
+    const innerAnnotations = _vue.ref.call(void 0, props.defaultValue);
+    const innerSelectedId = _vue.ref.call(void 0, props.defaultSelectedId);
+    const innerTool = _vue.ref.call(void 0, props.defaultTool);
+    const draft = _vue.ref.call(void 0, null);
+    const drawing = _vue.ref.call(void 0, null);
+    const annotations = _vue.computed.call(void 0, () => _nullishCoalesce(props.modelValue, () => ( innerAnnotations.value)));
+    const activeSelectedId = _vue.computed.call(void 0, () => _nullishCoalesce(props.selectedId, () => ( innerSelectedId.value)));
+    const activeTool = _vue.computed.call(void 0, () => _nullishCoalesce(props.tool, () => ( innerTool.value)));
+    const canEdit = _vue.computed.call(void 0, () => !props.disabled && !props.readonly);
+    const loadImage = () => {
+      imageLoaded.value = false;
+      draft.value = null;
+      if (typeof window === "undefined" || typeof window.Image !== "function") return;
+      const img = new window.Image();
+      img.onload = () => {
+        const naturalWidth = img.naturalWidth || 1;
+        const naturalHeight = img.naturalHeight || 1;
+        const containerWidth = _optionalChain([containerRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.clientWidth]) || naturalWidth;
+        const containerHeight = _optionalChain([containerRef, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.clientHeight]) || naturalHeight;
+        const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
+        displayWidth.value = naturalWidth * ratio;
+        displayHeight.value = naturalHeight * ratio;
+        imageLoaded.value = true;
+        emit("ready");
+      };
+      img.src = props.src;
+    };
+    _vue.onMounted.call(void 0, loadImage);
+    _vue.watch.call(void 0, () => props.src, loadImage);
+    const commitAnnotations = (next, meta) => {
+      if (props.modelValue === void 0) innerAnnotations.value = next;
+      emit("update:modelValue", next);
+      emit("change", next, meta);
+    };
+    const selectAnnotation = (annotation) => {
+      if (props.selectedId === void 0) innerSelectedId.value = _optionalChain([annotation, 'optionalAccess', _5 => _5.id]);
+      emit("select", annotation);
+    };
+    const setActiveTool = (nextTool) => {
+      draft.value = null;
+      drawing.value = null;
+      if (props.tool === void 0) innerTool.value = nextTool;
+      emit("tool-change", nextTool);
+    };
+    const createId = (shape) => {
+      idSeed.value += 1;
+      return `${shape}-${idSeed.value}`;
+    };
+    const getPointFromEvent = (event) => {
+      const bounds = _optionalChain([overlayRef, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.getBoundingClientRect, 'call', _8 => _8()]);
+      if (!bounds) return { x: 0, y: 0 };
+      return _tigercatcore.getImageAnnotationPointFromClient.call(void 0, event.clientX, event.clientY, bounds);
+    };
+    const commitAnnotation = (annotation) => {
+      commitAnnotations([...annotations.value, annotation], { type: "add", annotation });
+      selectAnnotation(annotation);
+    };
+    const commitPolygon = () => {
+      if (!drawing.value || drawing.value.tool !== "polygon" || drawing.value.points.length < 3) {
+        return;
+      }
+      const annotation = _tigercatcore.createImageAnnotationPath.call(void 0, 
+        "polygon",
+        createId("polygon"),
+        drawing.value.points
+      );
+      drawing.value = null;
+      draft.value = null;
+      commitAnnotation(annotation);
+    };
+    const handleStageMouseDown = (event) => {
+      if (!canEdit.value || activeTool.value === "select" || activeTool.value === "polygon") return;
+      const point = getPointFromEvent(event);
+      drawing.value = { tool: activeTool.value, start: point, points: [point] };
+      const handleMouseMove = (moveEvent) => {
+        if (!drawing.value) return;
+        const nextPoint = getPointFromEvent(moveEvent);
+        if (drawing.value.tool === "rectangle" || drawing.value.tool === "ellipse") {
+          draft.value = _tigercatcore.createImageAnnotationBox.call(void 0, 
+            drawing.value.tool,
+            "draft",
+            drawing.value.start,
+            nextPoint
+          );
+          return;
+        }
+        const nextPoints = [...drawing.value.points, nextPoint];
+        drawing.value = { ...drawing.value, points: nextPoints };
+        draft.value = _tigercatcore.createImageAnnotationPath.call(void 0, "freehand", "draft", nextPoints);
+      };
+      const handleMouseUp = (upEvent) => {
+        const current = drawing.value;
+        drawing.value = null;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        if (!current) return;
+        const end = getPointFromEvent(upEvent);
+        if (current.tool === "rectangle" || current.tool === "ellipse") {
+          const annotation = _tigercatcore.createImageAnnotationBox.call(void 0, 
+            current.tool,
+            createId(current.tool),
+            current.start,
+            end
+          );
+          draft.value = null;
+          if (_tigercatcore.shouldCommitImageAnnotationBox.call(void 0, annotation, props.minSize))
+            commitAnnotation(annotation);
+          return;
+        }
+        const points = [...current.points, end];
+        draft.value = null;
+        if (points.length >= 2) {
+          commitAnnotation(_tigercatcore.createImageAnnotationPath.call(void 0, "freehand", createId("freehand"), points));
+        }
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    };
+    const handleStageClick = (event) => {
+      if (!canEdit.value || activeTool.value !== "polygon") return;
+      const point = getPointFromEvent(event);
+      const points = _optionalChain([drawing, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.tool]) === "polygon" ? [...drawing.value.points, point] : [point];
+      drawing.value = { tool: "polygon", start: points[0], points };
+      draft.value = _tigercatcore.createImageAnnotationPath.call(void 0, "polygon", "draft", points);
+    };
+    const removeSelectedAnnotation = () => {
+      if (!canEdit.value || !activeSelectedId.value) return;
+      const removed = annotations.value.find(
+        (annotation) => annotation.id === activeSelectedId.value
+      );
+      const next = annotations.value.filter(
+        (annotation) => annotation.id !== activeSelectedId.value
+      );
+      commitAnnotations(next, { type: "remove", annotation: removed });
+      selectAnnotation(null);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        drawing.value = null;
+        draft.value = null;
+        return;
+      }
+      if (event.key === "Enter") {
+        commitPolygon();
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        removeSelectedAnnotation();
+      }
+    };
+    const renderAnnotation = (annotation, isDraft = false) => {
+      const selected = !isDraft && annotation.id === activeSelectedId.value;
+      const stroke = _tigercatcore.getImageAnnotationStrokeColor.call(void 0, annotation);
+      const fillOpacity = annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1;
+      const commonProps = {
+        stroke,
+        strokeWidth: selected ? props.strokeWidth + 1 : props.strokeWidth,
+        fill: stroke,
+        fillOpacity,
+        role: "button",
+        tabindex: isDraft ? -1 : 0,
+        "aria-label": _tigercatcore.getImageAnnotationShapeAriaLabel.call(void 0, annotation),
+        class: _tigercatcore.classNames.call(void 0, !isDraft && "cursor-pointer focus:outline-none"),
+        onClick: (event) => {
+          if (isDraft) return;
+          event.stopPropagation();
+          selectAnnotation(annotation);
+        }
+      };
+      if (annotation.type === "rectangle") {
+        return _vue.h.call(void 0, "rect", {
+          ...commonProps,
+          key: annotation.id,
+          x: annotation.x * displayWidth.value,
+          y: annotation.y * displayHeight.value,
+          width: annotation.width * displayWidth.value,
+          height: annotation.height * displayHeight.value
+        });
+      }
+      if (annotation.type === "ellipse") {
+        return _vue.h.call(void 0, "ellipse", {
+          ...commonProps,
+          key: annotation.id,
+          cx: (annotation.x + annotation.width / 2) * displayWidth.value,
+          cy: (annotation.y + annotation.height / 2) * displayHeight.value,
+          rx: annotation.width * displayWidth.value / 2,
+          ry: annotation.height * displayHeight.value / 2
+        });
+      }
+      const pathAnnotation = annotation;
+      return _vue.h.call(void 0, "path", {
+        ...commonProps,
+        key: annotation.id,
+        d: _tigercatcore.getImageAnnotationPathData.call(void 0, pathAnnotation, displayWidth.value, displayHeight.value),
+        fillOpacity: pathAnnotation.type === "polygon" ? fillOpacity : 0
+      });
+    };
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.imageAnnotationContainerClasses,
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      )
+    );
+    const containerStyle = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const toolbar = _vue.h.call(void 0, 
+        "div",
+        { class: _tigercatcore.imageAnnotationToolbarClasses, "aria-label": "Annotation tools" },
+        [
+          ...props.tools.map(
+            (item) => _vue.h.call(void 0, 
+              "button",
+              {
+                key: item,
+                type: "button",
+                class: _tigercatcore.getImageAnnotationToolButtonClasses.call(void 0, activeTool.value === item),
+                disabled: props.disabled || props.readonly,
+                "aria-pressed": activeTool.value === item,
+                onClick: () => setActiveTool(item)
+              },
+              _tigercatcore.getImageAnnotationToolLabel.call(void 0, item)
+            )
+          ),
+          _vue.h.call(void 0, 
+            "button",
+            {
+              type: "button",
+              class: _tigercatcore.imageAnnotationDeleteButtonClasses,
+              disabled: !canEdit.value || !activeSelectedId.value,
+              onClick: removeSelectedAnnotation
+            },
+            "Delete"
+          )
+        ]
+      );
+      const stageChildren = !imageLoaded.value ? [
+        _vue.h.call(void 0, "div", { class: "flex min-h-[200px] min-w-[240px] items-center justify-center" }, [
+          _vue.h.call(void 0, "div", {
+            class: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]"
+          })
+        ])
+      ] : [
+        _vue.h.call(void 0, "img", {
+          src: props.src,
+          alt: props.alt,
+          class: _tigercatcore.imageAnnotationImageClasses,
+          style: { width: `${displayWidth.value}px`, height: `${displayHeight.value}px` },
+          draggable: false
+        }),
+        _vue.h.call(void 0, 
+          "svg",
+          {
+            ref: overlayRef,
+            class: _tigercatcore.classNames.call(void 0, 
+              _tigercatcore.imageAnnotationOverlayClasses,
+              (!canEdit.value || activeTool.value === "select") && _tigercatcore.imageAnnotationReadonlyOverlayClasses
+            ),
+            width: displayWidth.value,
+            height: displayHeight.value,
+            viewBox: `0 0 ${displayWidth.value} ${displayHeight.value}`,
+            "aria-label": "Image annotation canvas",
+            onMousedown: handleStageMouseDown,
+            onClick: handleStageClick,
+            onDblclick: commitPolygon
+          },
+          [
+            ...annotations.value.map((annotation) => renderAnnotation(annotation)),
+            ...draft.value ? [renderAnnotation(draft.value, true)] : [],
+            ...props.showLabels ? annotations.value.filter((annotation) => annotation.label).map((annotation) => {
+              const center = _tigercatcore.getImageAnnotationCenter.call(void 0, 
+                annotation,
+                displayWidth.value,
+                displayHeight.value
+              );
+              return _vue.h.call(void 0, 
+                "text",
+                {
+                  key: `${annotation.id}-label`,
+                  x: center.x,
+                  y: center.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  class: _tigercatcore.imageAnnotationLabelClasses
+                },
+                annotation.label
+              );
+            }) : []
+          ]
+        )
+      ];
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...forwardedAttrs,
+          class: containerClasses.value,
+          style: containerStyle.value,
+          onKeydown: handleKeyDown
+        },
+        [
+          toolbar,
+          _vue.h.call(void 0, 
+            "div",
+            {
+              ref: containerRef,
+              class: _tigercatcore.imageAnnotationStageClasses,
+              style: imageLoaded.value ? { width: `${displayWidth.value}px` } : void 0,
+              role: imageLoaded.value ? "application" : "img",
+              "aria-label": imageLoaded.value ? "Image annotation editor" : "Loading image for annotation"
+            },
+            stageChildren
+          )
+        ]
+      );
+    };
+  }
+});
+var ImageAnnotation_default = ImageAnnotation;
+
+
+
+
+exports.ImageAnnotation = ImageAnnotation; exports.ImageAnnotation_default = ImageAnnotation_default;