@searpent/react-image-annotate 2.0.0 → 2.0.3

package/ImageCanvas/use-mouse.js

@@ -0,0 +1,180 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,27 @@
+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;