@searpent/react-image-annotate 2.0.2 → 2.0.5

package/ImageCanvas/use-mouse.js

@@ -1,180 +0,0 @@
-import { useRef } from "react";
-import { Matrix } from "transformation-matrix-js";
-
-var getDefaultMat = function getDefaultMat() {
-  return Matrix.from(1, 0, 0, 1, -10, -10);
-};
-
-export default (function (_ref) {
-  var canvasEl = _ref.canvasEl,
-      changeMat = _ref.changeMat,
-      changeDragging = _ref.changeDragging,
-      zoomStart = _ref.zoomStart,
-      zoomEnd = _ref.zoomEnd,
-      changeZoomStart = _ref.changeZoomStart,
-      changeZoomEnd = _ref.changeZoomEnd,
-      layoutParams = _ref.layoutParams,
-      zoomWithPrimary = _ref.zoomWithPrimary,
-      dragWithPrimary = _ref.dragWithPrimary,
-      mat = _ref.mat,
-      _onMouseMove = _ref.onMouseMove,
-      _onMouseUp = _ref.onMouseUp,
-      _onMouseDown = _ref.onMouseDown,
-      dragging = _ref.dragging;
-  var mousePosition = useRef({
-    x: 0,
-    y: 0
-  });
-  var prevMousePosition = useRef({
-    x: 0,
-    y: 0
-  });
-
-  var zoomIn = function zoomIn(direction, point) {
-    var _ref2 = [point.x, point.y],
-        mx = _ref2[0],
-        my = _ref2[1];
-    var scale = typeof direction === "object" ? direction.to / mat.a : 1 + 0.2 * direction; // NOTE: We're mutating mat here
-
-    mat.translate(mx, my).scaleU(scale);
-    if (mat.a > 2) mat.scaleU(2 / mat.a);
-    if (mat.a < 0.05) mat.scaleU(0.05 / mat.a);
-    mat.translate(-mx, -my);
-    changeMat(mat.clone());
-  };
-
-  var mouseEvents = {
-    onMouseMove: function onMouseMove(e) {
-      var _canvasEl$current$get = canvasEl.current.getBoundingClientRect(),
-          left = _canvasEl$current$get.left,
-          top = _canvasEl$current$get.top;
-
-      prevMousePosition.current.x = mousePosition.current.x;
-      prevMousePosition.current.y = mousePosition.current.y;
-      mousePosition.current.x = e.clientX - left;
-      mousePosition.current.y = e.clientY - top;
-      var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
-
-      if (zoomWithPrimary && zoomStart) {
-        changeZoomEnd(projMouse);
-      }
-
-      var _layoutParams$current = layoutParams.current,
-          iw = _layoutParams$current.iw,
-          ih = _layoutParams$current.ih;
-
-      _onMouseMove({
-        x: projMouse.x / iw,
-        y: projMouse.y / ih
-      });
-
-      if (dragging) {
-        mat.translate(prevMousePosition.current.x - mousePosition.current.x, prevMousePosition.current.y - mousePosition.current.y);
-        changeMat(mat.clone());
-      }
-
-      e.preventDefault();
-    },
-    onMouseDown: function onMouseDown(e) {
-      var specialEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      e.preventDefault();
-      if (e.button === 1 || e.button === 2 || e.button === 0 && dragWithPrimary) return changeDragging(true);
-      var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
-
-      if (zoomWithPrimary && e.button === 0) {
-        changeZoomStart(projMouse);
-        changeZoomEnd(projMouse);
-        return;
-      }
-
-      if (e.button === 0) {
-        if (specialEvent.type === "resize-box") {// onResizeBox()
-        }
-
-        if (specialEvent.type === "move-region") {// onResizeBox()
-        }
-
-        var _layoutParams$current2 = layoutParams.current,
-            iw = _layoutParams$current2.iw,
-            ih = _layoutParams$current2.ih;
-
-        _onMouseDown({
-          x: projMouse.x / iw,
-          y: projMouse.y / ih
-        });
-      }
-    },
-    onMouseUp: function onMouseUp(e) {
-      e.preventDefault();
-      var projMouse = mat.applyToPoint(mousePosition.current.x, mousePosition.current.y);
-
-      if (zoomStart) {
-        var _zoomEnd = projMouse;
-
-        if (Math.abs(zoomStart.x - _zoomEnd.x) < 10 && Math.abs(zoomStart.y - _zoomEnd.y) < 10) {
-          if (mat.a < 1) {
-            zoomIn({
-              to: 1
-            }, mousePosition.current);
-          } else {
-            zoomIn({
-              to: 0.25
-            }, mousePosition.current);
-          }
-        } else {
-          var _layoutParams$current3 = layoutParams.current,
-              iw = _layoutParams$current3.iw,
-              ih = _layoutParams$current3.ih;
-
-          if (zoomStart.x > _zoomEnd.x) {
-            ;
-            var _ref3 = [_zoomEnd.x, zoomStart.x];
-            zoomStart.x = _ref3[0];
-            _zoomEnd.x = _ref3[1];
-          }
-
-          if (zoomStart.y > _zoomEnd.y) {
-            ;
-            var _ref4 = [_zoomEnd.y, zoomStart.y];
-            zoomStart.y = _ref4[0];
-            _zoomEnd.y = _ref4[1];
-          } // The region defined by zoomStart and zoomEnd should be the new transform
-
-
-          var scale = Math.min((_zoomEnd.x - zoomStart.x) / iw, (_zoomEnd.y - zoomStart.y) / ih);
-          if (scale < 0.05) scale = 0.05;
-          if (scale > 10) scale = 10;
-          var newMat = getDefaultMat().translate(zoomStart.x, zoomStart.y).scaleU(scale);
-          changeMat(newMat.clone());
-        }
-
-        changeZoomStart(null);
-        changeZoomEnd(null);
-      }
-
-      if (e.button === 1 || e.button === 2 || e.button === 0 && dragWithPrimary) return changeDragging(false);
-
-      if (e.button === 0) {
-        var _layoutParams$current4 = layoutParams.current,
-            _iw = _layoutParams$current4.iw,
-            _ih = _layoutParams$current4.ih;
-
-        _onMouseUp({
-          x: projMouse.x / _iw,
-          y: projMouse.y / _ih
-        });
-      }
-    },
-    onWheel: function onWheel(e) {
-      var direction = e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;
-      zoomIn(direction, mousePosition.current); // e.preventDefault()
-    },
-    onContextMenu: function onContextMenu(e) {
-      e.preventDefault();
-    }
-  };
-  return {
-    mouseEvents: mouseEvents,
-    mousePosition: mousePosition
-  };
-});

package/ImageCanvas/use-project-box.js

@@ -1,27 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
-import useEventCallback from "use-event-callback";
-import { getEnclosingBox } from "./region-tools.js";
-export default (function (_ref) {
-  var layoutParams = _ref.layoutParams,
-      mat = _ref.mat;
-  return useEventCallback(function (r) {
-    var _layoutParams$current = layoutParams.current,
-        iw = _layoutParams$current.iw,
-        ih = _layoutParams$current.ih;
-    var bbox = getEnclosingBox(r);
-    var margin = r.type === "point" ? 15 : 2;
-    var cbox = {
-      x: bbox.x * iw - margin,
-      y: bbox.y * ih - margin,
-      w: bbox.w * iw + margin * 2,
-      h: bbox.h * ih + margin * 2
-    };
-
-    var pbox = _objectSpread({}, mat.clone().inverse().applyToPoint(cbox.x, cbox.y), {
-      w: cbox.w / mat.a,
-      h: cbox.h / mat.d
-    });
-
-    return pbox;
-  });
-});

package/ImageCanvas/use-wasd-mode.js

@@ -1,62 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { useEffect } from "react";
-import { useSettings } from "../SettingsProvider";
-export default (function (_ref) {
-  var getLatestMat = _ref.getLatestMat,
-      changeMat = _ref.changeMat;
-
-  var _useSettings = useSettings(),
-      wasdMode = _useSettings.wasdMode;
-
-  useEffect(function () {
-    if (!wasdMode) return;
-    var vel = 10;
-    var dirs = {
-      w: [0, -vel],
-      a: [-vel, 0],
-      s: [0, vel],
-      d: [vel, 0]
-    };
-    var keysDown = {};
-    var keys = Object.keys(dirs);
-
-    var keyDownListener = function keyDownListener(e) {
-      if (keys.includes(e.key)) {
-        keysDown[e.key] = true;
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-
-    var keyUpListener = function keyUpListener(e) {
-      if (keys.includes(e.key)) {
-        keysDown[e.key] = false;
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-
-    var interval = setInterval(function () {
-      var newMat = getLatestMat().clone();
-      var somethingChanged = false;
-
-      for (var key in keysDown) {
-        if (keysDown[key]) {
-          var _newMat;
-
-          newMat = (_newMat = newMat).translate.apply(_newMat, _toConsumableArray(dirs[key]));
-          somethingChanged = true;
-        }
-      }
-
-      if (somethingChanged) changeMat(newMat);
-    }, 16);
-    window.addEventListener("keydown", keyDownListener);
-    window.addEventListener("keyup", keyUpListener);
-    return function () {
-      clearInterval(interval);
-      window.removeEventListener("keydown", keyDownListener);
-      window.removeEventListener("keyup", keyUpListener);
-    };
-  }, [wasdMode]);
-});

package/ImageMask/index.js

@@ -1,133 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState, useEffect, useMemo, useRef } from "react";
-import { colorInts } from "../colors";
-import { useDebounce } from "react-use";
-import loadImage from "./load-image";
-import autoseg from "autoseg/webworker";
-
-function convertToUDTRegions(regions) {
-  return regions.map(function (r) {
-    switch (r.type) {
-      case "point":
-        {
-          return {
-            regionType: "point",
-            classification: r.cls,
-            x: r.x,
-            y: r.y
-          };
-        }
-
-      case "polygon":
-        {
-          return {
-            regionType: "polygon",
-            classification: r.cls,
-            points: r.points.map(function (_ref) {
-              var _ref2 = _slicedToArray(_ref, 2),
-                  x = _ref2[0],
-                  y = _ref2[1];
-
-              return {
-                x: x,
-                y: y
-              };
-            })
-          };
-        }
-
-      case "box":
-        {
-          return {
-            regionType: "bounding-box",
-            classification: r.cls,
-            centerX: r.x + r.w / 2,
-            centerY: r.y + r.h / 2,
-            width: r.w,
-            height: r.h
-          };
-        }
-
-      default:
-        {
-          return null;
-        }
-    }
-  }).filter(Boolean);
-}
-
-export var ImageMask = function ImageMask(_ref3) {
-  var regions = _ref3.regions,
-      regionClsList = _ref3.regionClsList,
-      imageSrc = _ref3.imageSrc,
-      imagePosition = _ref3.imagePosition,
-      _ref3$zIndex = _ref3.zIndex,
-      zIndex = _ref3$zIndex === void 0 ? 1 : _ref3$zIndex,
-      _ref3$hide = _ref3.hide,
-      hide = _ref3$hide === void 0 ? false : _ref3$hide,
-      _ref3$autoSegmentatio = _ref3.autoSegmentationOptions,
-      autoSegmentationOptions = _ref3$autoSegmentatio === void 0 ? {
-    type: "simple"
-  } : _ref3$autoSegmentatio;
-
-  // if (!window.mmgc) window.mmgc = MMGC_INIT()
-  // const mmgc = window.mmgc
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      canvasRef = _useState2[0],
-      setCanvasRef = _useState2[1];
-
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      sampleImageData = _useState4[0],
-      setSampleImageData = _useState4[1];
-
-  useEffect(function () {
-    if (!imageSrc) return;
-    loadImage(imageSrc).then(function (imageData) {
-      autoseg.setConfig(_objectSpread({
-        classNames: regionClsList
-      }, autoSegmentationOptions));
-      autoseg.loadImage(imageData);
-      setSampleImageData(imageData);
-    });
-  }, [imageSrc]);
-  useDebounce(function () {
-    if (hide) return;
-    if (!canvasRef) return;
-    if (!sampleImageData) return;
-    if (regions.filter(function (cp) {
-      return cp.cls;
-    }).length < 2) return;
-    var udtRegions = convertToUDTRegions(regions);
-    autoseg.getMask(udtRegions).then(function (maskImageData) {
-      var context = canvasRef.getContext("2d");
-      context.clearRect(0, 0, maskImageData.width, maskImageData.height);
-      context.putImageData(maskImageData, 0, 0);
-    });
-  }, 1000, [canvasRef, sampleImageData, regions, hide]);
-  var style = useMemo(function () {
-    var width = imagePosition.bottomRight.x - imagePosition.topLeft.x;
-    var height = imagePosition.bottomRight.y - imagePosition.topLeft.y;
-    return {
-      display: hide ? "none" : undefined,
-      imageRendering: "pixelated",
-      transform: "translateZ(0px)",
-      left: imagePosition.topLeft.x,
-      top: imagePosition.topLeft.y,
-      width: isNaN(width) ? 0 : width,
-      height: isNaN(height) ? 0 : height,
-      zIndex: zIndex,
-      position: "absolute",
-      pointerEvents: "none"
-    };
-  }, [imagePosition.topLeft.x, imagePosition.topLeft.y, imagePosition.bottomRight.x, imagePosition.bottomRight.y, zIndex, hide]);
-  return React.createElement("canvas", {
-    style: style,
-    width: sampleImageData ? sampleImageData.width : 0,
-    height: sampleImageData ? sampleImageData.height : 0,
-    ref: setCanvasRef
-  });
-};
-export default ImageMask;

package/ImageMask/load-image.js

@@ -1,25 +0,0 @@
-export var loadImage = function loadImage(imageSrc) {
-  // Check if image is already loaded in a page element
-  var image = Array.from(document.getElementsByTagName("img")).find(function (img) {
-    return img.src === imageSrc;
-  });
-  var canvas = document.createElement("canvas");
-  var ctx = canvas.getContext("2d");
-
-  if (!image) {
-    image = new Image();
-    image.crossOrigin = "anonymous";
-    image.src = imageSrc;
-  }
-
-  return new Promise(function (resolve, reject) {
-    image.onload = function () {
-      canvas.width = image.naturalWidth;
-      canvas.height = image.naturalHeight;
-      ctx.drawImage(image, 0, 0);
-      var imageData = ctx.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
-      resolve(imageData);
-    };
-  });
-};
-export default loadImage;

package/ImageSelectorSidebarBox/index.js

@@ -1,60 +0,0 @@
-import React, { memo } from "react";
-import { makeStyles } from "@mui/styles";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import SidebarBoxContainer from "../SidebarBoxContainer";
-import CollectionsIcon from "@mui/icons-material/Collections";
-import { grey } from "@mui/material/colors";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import Avatar from "@mui/material/Avatar";
-import isEqual from "lodash/isEqual";
-var theme = createTheme();
-var useStyles = makeStyles(function (theme) {
-  return {
-    img: {
-      width: 40,
-      height: 40,
-      borderRadius: 8
-    }
-  };
-});
-export var ImageSelectorSidebarBox = function ImageSelectorSidebarBox(_ref) {
-  var images = _ref.images,
-      onSelect = _ref.onSelect;
-  var classes = useStyles();
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(SidebarBoxContainer, {
-    title: "Images",
-    subTitle: "(".concat(images.length, ")"),
-    icon: React.createElement(CollectionsIcon, {
-      style: {
-        color: grey[700]
-      }
-    })
-  }, React.createElement("div", null, React.createElement(List, null, images.map(function (img, i) {
-    return React.createElement(ListItem, {
-      button: true,
-      onClick: function onClick() {
-        return onSelect(img);
-      },
-      dense: true,
-      key: i
-    }, React.createElement("img", {
-      className: classes.img,
-      src: img.src
-    }), React.createElement(ListItemText, {
-      primary: img.name,
-      secondary: "".concat((img.regions || []).length, " Labels")
-    }));
-  })))));
-};
-
-var mapUsedImageProps = function mapUsedImageProps(a) {
-  return [a.name, (a.regions || []).length, a.src];
-};
-
-export default memo(ImageSelectorSidebarBox, function (prevProps, nextProps) {
-  return isEqual(prevProps.images.map(mapUsedImageProps), nextProps.images.map(mapUsedImageProps));
-});

package/KeyframeTimeline/get-time-string.js

@@ -1,27 +0,0 @@
-var getTimeString = function getTimeString(ms) {
-  var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-
-  if (ms < 1000) {
-    return ms + "ms";
-  } else {
-    var secs = ms / 1000;
-
-    if (secs < 60) {
-      if (Number.isInteger(secs)) {
-        return secs + "s";
-      } else {
-        return secs.toFixed(precision) + "s";
-      }
-    } else {
-      var mins = secs / 60;
-
-      if (Number.isInteger(mins)) {
-        return mins + "m";
-      } else {
-        return mins.toFixed(precision) + "m";
-      }
-    }
-  }
-};
-
-export default getTimeString;