react-image-annotate-master-custom 0.0.16 → 0.0.18

package/ImageCanvas/index.js

@@ -406,18 +406,18 @@ export var ImageCanvas = function ImageCanvas(_ref2) {
     regionClsList: regionClsList,
     imageSrc: imageSrc,
     regions: regions
-  }), React.createElement("canvas", {
-    style: {
-      opacity: 0.25
-    },
-    className: classes.canvas,
-    ref: canvasEl
   }), React.createElement(RegionShapes, {
     mat: mat,
     keypointDefinitions: keypointDefinitions,
     imagePosition: imagePosition,
     regions: regions,
     fullSegmentationMode: fullImageSegmentationMode
+  }), React.createElement("canvas", {
+    style: {
+      opacity: 0.25
+    },
+    className: classes.canvas,
+    ref: canvasEl
   }), React.createElement(VideoOrImageCanvasBackground, {
     videoPlaying: videoPlaying,
     imagePosition: imagePosition,

package/MainLayout/index.js

@@ -147,11 +147,7 @@ export var MainLayout = function MainLayout(_ref3) {
       e.target.focus();
     }
   }, []);
-  var canvas = React.createElement(ImageCanvas, Object.assign({
-    onClick: function onClick() {
-      return console.log("3333");
-    }
-  }, settings, {
+  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
     showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
     key: state.selectedImage,
     showMask: state.showMask,
@@ -197,7 +193,6 @@ export var MainLayout = function MainLayout(_ref3) {
     allowComments: state.allowComments
   }));
   var onClickIconSidebarItem = useEventCallback(function (item) {
-    console.log(1111);
     dispatch({
       type: "SELECT_TOOL",
       selectedTool: item.name

package/RegionShapes/index.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { memo } from "react";
 import colorAlpha from "color-alpha";
+import "./regionShape.css";
 
 function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num;
@@ -12,19 +13,18 @@ var RegionComponents = {
     var region = _ref.region,
         iw = _ref.iw,
         ih = _ref.ih;
-    return React.createElement("g", {
+    return React.createElement(React.Fragment, null, React.createElement("g", {
       transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
     }, React.createElement("path", {
       d: "M 1.866 12.7018 C 4.234 9.7951 9.486 2.7501 9.486 -1.207 C 9.486 -6.0063 5.5922 -9.9 0.793 -9.9 S -7.9 -6.0063 -7.9 -1.207 c 0 3.9571 5.2973 11.0021 7.62 13.9088 c 0.5569 0.6927 1.5892 0.6927 2.1461 0 z M 0.793 -4.1047 A 2.8977 2.8977 90 1 1 0.793 1.6907 a 2.8977 2.8977 90 1 1 0 -5.7953 z",
+      style: {
+        position: "absolute",
+        zIndex: -1
+      },
       strokeWidth: 2,
       stroke: "#E45B21",
       fill: "#E45B21"
-    }), React.createElement("text", {
-      x: "15",
-      y: "15",
-      fill: "red",
-      fontSize: "12"
-    }, region === null || region === void 0 ? void 0 : region.sid));
+    })));
   }),
   line: memo(function (_ref2) {
     var region = _ref2.region,
@@ -234,29 +234,54 @@ export var WrappedRegionList = memo(function (_ref19) {
     return r.visible !== false;
   }).map(function (r) {
     var Component = RegionComponents[r.type];
-    return React.createElement(Component, {
+    return React.createElement(React.Fragment, null, React.createElement(Component, {
       key: r.regionId,
       region: r,
       iw: iw,
       ih: ih,
       keypointDefinitions: keypointDefinitions,
       fullSegmentationMode: fullSegmentationMode
-    });
+    }));
   });
 }, function (n, p) {
   return n.regions === p.regions && n.iw === p.iw && n.ih === p.ih;
 });
-export var RegionShapes = function RegionShapes(_ref20) {
-  var mat = _ref20.mat,
-      imagePosition = _ref20.imagePosition,
-      _ref20$regions = _ref20.regions,
-      regions = _ref20$regions === void 0 ? [] : _ref20$regions,
+export var WrappedRegionListSid = memo(function (_ref20) {
+  var regions = _ref20.regions,
       keypointDefinitions = _ref20.keypointDefinitions,
+      iw = _ref20.iw,
+      ih = _ref20.ih,
       fullSegmentationMode = _ref20.fullSegmentationMode;
+  return regions.filter(function (r) {
+    return r.visible !== false;
+  }).map(function (r) {
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      style: {
+        color: '#800020',
+        position: 'absolute',
+        zIndex: 1000,
+        left: r.x * iw + 18,
+        top: r.y * ih + 18,
+        fontSize: '13px',
+        fontWeight: 500
+      },
+      className: "noselect"
+    }, (r === null || r === void 0 ? void 0 : r.sid) && "#".concat(r === null || r === void 0 ? void 0 : r.sid)));
+  });
+}, function (n, p) {
+  return n.regions === p.regions && n.iw === p.iw && n.ih === p.ih;
+});
+export var RegionShapes = function RegionShapes(_ref21) {
+  var mat = _ref21.mat,
+      imagePosition = _ref21.imagePosition,
+      _ref21$regions = _ref21.regions,
+      regions = _ref21$regions === void 0 ? [] : _ref21$regions,
+      keypointDefinitions = _ref21.keypointDefinitions,
+      fullSegmentationMode = _ref21.fullSegmentationMode;
   var iw = imagePosition.bottomRight.x - imagePosition.topLeft.x;
   var ih = imagePosition.bottomRight.y - imagePosition.topLeft.y;
   if (isNaN(iw) || isNaN(ih)) return null;
-  return React.createElement("svg", {
+  return React.createElement(React.Fragment, null, React.createElement("svg", {
     width: iw,
     height: ih,
     style: {
@@ -275,6 +300,13 @@ export var RegionShapes = function RegionShapes(_ref20) {
     ih: ih,
     keypointDefinitions: keypointDefinitions,
     fullSegmentationMode: fullSegmentationMode
+  })), React.createElement(WrappedRegionListSid, {
+    key: "wrapped-region-list-sid",
+    regions: regions,
+    iw: iw,
+    ih: ih,
+    keypointDefinitions: keypointDefinitions,
+    fullSegmentationMode: fullSegmentationMode
   }));
 };
 export default RegionShapes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-annotate-master-custom",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",