@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-WNYWWGNM.js

@@ -1,394 +0,0 @@
-"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 (!_tigercatcore.isBrowser.call(void 0, ) || 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;