@searpent/react-image-annotate 2.3.4 → 2.3.6

package/RegionShapes/index.js

@@ -12,30 +12,40 @@ var RegionComponents = {
     var region = _ref.region,
         iw = _ref.iw,
         ih = _ref.ih;
-    return React.createElement("g", {
-      transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
-    }, React.createElement("path", {
-      d: "M0 8L8 0L0 -8L-8 0Z",
-      strokeWidth: 2,
-      stroke: region.color,
-      fill: "transparent"
-    }));
+    return (
+      /*#__PURE__*/
+      React.createElement("g", {
+        transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+      },
+      /*#__PURE__*/
+      React.createElement("path", {
+        d: "M0 8L8 0L0 -8L-8 0Z",
+        strokeWidth: 2,
+        stroke: region.color,
+        fill: "transparent"
+      }))
+    );
   }),
   line: memo(function (_ref2) {
     var region = _ref2.region,
         iw = _ref2.iw,
         ih = _ref2.ih;
-    return React.createElement("g", {
-      transform: "translate(".concat(region.x1 * iw, " ").concat(region.y1 * ih, ")")
-    }, React.createElement("line", {
-      strokeWidth: 2,
-      x1: 0,
-      y1: 0,
-      x2: (region.x2 - region.x1) * iw,
-      y2: (region.y2 - region.y1) * ih,
-      stroke: colorAlpha(region.color, 0.75),
-      fill: colorAlpha(region.color, 0.25)
-    }));
+    return (
+      /*#__PURE__*/
+      React.createElement("g", {
+        transform: "translate(".concat(region.x1 * iw, " ").concat(region.y1 * ih, ")")
+      },
+      /*#__PURE__*/
+      React.createElement("line", {
+        strokeWidth: 2,
+        x1: 0,
+        y1: 0,
+        x2: (region.x2 - region.x1) * iw,
+        y2: (region.y2 - region.y1) * ih,
+        stroke: colorAlpha(region.color, 0.75),
+        fill: colorAlpha(region.color, 0.25)
+      }))
+    );
   }),
   box: memo(function (_ref3) {
     var region = _ref3.region,
@@ -47,29 +57,39 @@ var RegionComponents = {
         groupColor = _useColors.groupColor;
 
     if (region.groupId !== undefined) {
-      return React.createElement("g", {
-        transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
-      }, React.createElement("rect", {
-        strokeWidth: region.groupHighlighted ? 3 : 0,
-        x: 0,
-        y: 0,
-        width: Math.max(region.w * iw, 0),
-        height: Math.max(region.h * ih, 0),
-        stroke: colorAlpha(clsColor(region.cls), 0.85),
-        fill: region.groupHighlighted ? colorAlpha(clsColor(region.cls), 0.15) : colorAlpha(groupColor(region.groupId), 0.5)
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement("g", {
+          transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+        },
+        /*#__PURE__*/
+        React.createElement("rect", {
+          strokeWidth: region.groupHighlighted ? 3 : 0,
+          x: 0,
+          y: 0,
+          width: Math.max(region.w * iw, 0),
+          height: Math.max(region.h * ih, 0),
+          stroke: colorAlpha(clsColor(region.cls), 0.85),
+          fill: region.groupHighlighted ? colorAlpha(clsColor(region.cls), 0.15) : colorAlpha(groupColor(region.groupId), 0.5)
+        }))
+      );
     } else {
-      return React.createElement("g", {
-        transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
-      }, React.createElement("rect", {
-        strokeWidth: 2,
-        x: 0,
-        y: 0,
-        width: Math.max(region.w * iw, 0),
-        height: Math.max(region.h * ih, 0),
-        stroke: colorAlpha(clsColor(region.cls), 0.85),
-        fill: colorAlpha(clsColor(region.cls), 0.85)
-      }));
+      return (
+        /*#__PURE__*/
+        React.createElement("g", {
+          transform: "translate(".concat(region.x * iw, " ").concat(region.y * ih, ")")
+        },
+        /*#__PURE__*/
+        React.createElement("rect", {
+          strokeWidth: 2,
+          x: 0,
+          y: 0,
+          width: Math.max(region.w * iw, 0),
+          height: Math.max(region.h * ih, 0),
+          stroke: colorAlpha(clsColor(region.cls), 0.85),
+          fill: colorAlpha(clsColor(region.cls), 0.85)
+        }))
+      );
     }
   }),
   polygon: memo(function (_ref4) {
@@ -79,20 +99,23 @@ var RegionComponents = {
         fullSegmentationMode = _ref4.fullSegmentationMode;
     var Component = region.open ? "polyline" : "polygon";
     var alphaBase = fullSegmentationMode ? 0.5 : 1;
-    return React.createElement(Component, {
-      points: region.points.map(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-            x = _ref6[0],
-            y = _ref6[1];
+    return (
+      /*#__PURE__*/
+      React.createElement(Component, {
+        points: region.points.map(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+              x = _ref6[0],
+              y = _ref6[1];
 
-        return [x * iw, y * ih];
-      }).map(function (a) {
-        return a.join(" ");
-      }).join(" "),
-      strokeWidth: 2,
-      stroke: colorAlpha(region.color, 0.75),
-      fill: colorAlpha(region.color, 0.25)
-    });
+          return [x * iw, y * ih];
+        }).map(function (a) {
+          return a.join(" ");
+        }).join(" "),
+        strokeWidth: 2,
+        stroke: colorAlpha(region.color, 0.75),
+        fill: colorAlpha(region.color, 0.25)
+      })
+    );
   }),
   keypoints: function keypoints(_ref7) {
     var region = _ref7.region,
@@ -109,51 +132,66 @@ var RegionComponents = {
     var _keypointDefinitions$ = keypointDefinitions[keypointsDefinitionId],
         landmarks = _keypointDefinitions$.landmarks,
         connections = _keypointDefinitions$.connections;
-    return React.createElement("g", null, Object.entries(points).map(function (_ref8, i) {
-      var _ref9 = _slicedToArray(_ref8, 2),
-          keypointId = _ref9[0],
-          _ref9$ = _ref9[1],
-          x = _ref9$.x,
-          y = _ref9$.y;
+    return (
+      /*#__PURE__*/
+      React.createElement("g", null, Object.entries(points).map(function (_ref8, i) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+            keypointId = _ref9[0],
+            _ref9$ = _ref9[1],
+            x = _ref9$.x,
+            y = _ref9$.y;
 
-      return React.createElement("g", {
-        key: i,
-        transform: "translate(".concat(x * iw, " ").concat(y * ih, ")")
-      }, React.createElement("path", {
-        d: "M0 8L8 0L0 -8L-8 0Z",
-        strokeWidth: 2,
-        stroke: landmarks[keypointId].color,
-        fill: "transparent"
-      }));
-    }), connections.map(function (_ref10) {
-      var _ref11 = _slicedToArray(_ref10, 2),
-          kp1Id = _ref11[0],
-          kp2Id = _ref11[1];
+        return (
+          /*#__PURE__*/
+          React.createElement("g", {
+            key: i,
+            transform: "translate(".concat(x * iw, " ").concat(y * ih, ")")
+          },
+          /*#__PURE__*/
+          React.createElement("path", {
+            d: "M0 8L8 0L0 -8L-8 0Z",
+            strokeWidth: 2,
+            stroke: landmarks[keypointId].color,
+            fill: "transparent"
+          }))
+        );
+      }), connections.map(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 2),
+            kp1Id = _ref11[0],
+            kp2Id = _ref11[1];
 
-      var kp1 = points[kp1Id];
-      var kp2 = points[kp2Id];
-      var midPoint = {
-        x: (kp1.x + kp2.x) / 2,
-        y: (kp1.y + kp2.y) / 2
-      };
-      return React.createElement("g", {
-        key: "".concat(kp1.x, ",").concat(kp1.y, ".").concat(kp2.x, ",").concat(kp2.y)
-      }, React.createElement("line", {
-        x1: kp1.x * iw,
-        y1: kp1.y * ih,
-        x2: midPoint.x * iw,
-        y2: midPoint.y * ih,
-        strokeWidth: 2,
-        stroke: landmarks[kp1Id].color
-      }), React.createElement("line", {
-        x1: kp2.x * iw,
-        y1: kp2.y * ih,
-        x2: midPoint.x * iw,
-        y2: midPoint.y * ih,
-        strokeWidth: 2,
-        stroke: landmarks[kp2Id].color
-      }));
-    }));
+        var kp1 = points[kp1Id];
+        var kp2 = points[kp2Id];
+        var midPoint = {
+          x: (kp1.x + kp2.x) / 2,
+          y: (kp1.y + kp2.y) / 2
+        };
+        return (
+          /*#__PURE__*/
+          React.createElement("g", {
+            key: "".concat(kp1.x, ",").concat(kp1.y, ".").concat(kp2.x, ",").concat(kp2.y)
+          },
+          /*#__PURE__*/
+          React.createElement("line", {
+            x1: kp1.x * iw,
+            y1: kp1.y * ih,
+            x2: midPoint.x * iw,
+            y2: midPoint.y * ih,
+            strokeWidth: 2,
+            stroke: landmarks[kp1Id].color
+          }),
+          /*#__PURE__*/
+          React.createElement("line", {
+            x1: kp2.x * iw,
+            y1: kp2.y * ih,
+            x2: midPoint.x * iw,
+            y2: midPoint.y * ih,
+            strokeWidth: 2,
+            stroke: landmarks[kp2Id].color
+          }))
+        );
+      }))
+    );
   },
   "expanding-line": memo(function (_ref12) {
     var region = _ref12.region,
@@ -201,38 +239,52 @@ var RegionComponents = {
     }).asMutable();
     secondSection.reverse();
     var lastPoint = points.slice(-1)[0];
-    return React.createElement(React.Fragment, null, React.createElement("polygon", {
-      points: firstSection.concat(region.candidatePoint ? [region.candidatePoint] : []).concat(secondSection).map(function (p) {
-        return "".concat(p.x * iw, " ").concat(p.y * ih);
-      }).join(" "),
-      strokeWidth: 2,
-      stroke: colorAlpha(region.color, 0.75),
-      fill: colorAlpha(region.color, 0.25)
-    }), points.map(function (_ref18, i) {
-      var x = _ref18.x,
-          y = _ref18.y,
-          angle = _ref18.angle;
-      return React.createElement("g", {
-        key: i,
-        transform: "translate(".concat(x * iw, " ").concat(y * ih, ") rotate(").concat(-(angle || 0) * 180 / Math.PI, ")")
-      }, React.createElement("g", null, React.createElement("rect", {
-        x: -5,
-        y: -5,
-        width: 10,
-        height: 10,
+    return (
+      /*#__PURE__*/
+      React.createElement(React.Fragment, null,
+      /*#__PURE__*/
+      React.createElement("polygon", {
+        points: firstSection.concat(region.candidatePoint ? [region.candidatePoint] : []).concat(secondSection).map(function (p) {
+          return "".concat(p.x * iw, " ").concat(p.y * ih);
+        }).join(" "),
         strokeWidth: 2,
         stroke: colorAlpha(region.color, 0.75),
         fill: colorAlpha(region.color, 0.25)
-      })));
-    }), React.createElement("rect", {
-      x: lastPoint.x * iw - 8,
-      y: lastPoint.y * ih - 8,
-      width: 16,
-      height: 16,
-      strokeWidth: 4,
-      stroke: colorAlpha(region.color, 0.5),
-      fill: "transparent"
-    }));
+      }), points.map(function (_ref18, i) {
+        var x = _ref18.x,
+            y = _ref18.y,
+            angle = _ref18.angle;
+        return (
+          /*#__PURE__*/
+          React.createElement("g", {
+            key: i,
+            transform: "translate(".concat(x * iw, " ").concat(y * ih, ") rotate(").concat(-(angle || 0) * 180 / Math.PI, ")")
+          },
+          /*#__PURE__*/
+          React.createElement("g", null,
+          /*#__PURE__*/
+          React.createElement("rect", {
+            x: -5,
+            y: -5,
+            width: 10,
+            height: 10,
+            strokeWidth: 2,
+            stroke: colorAlpha(region.color, 0.75),
+            fill: colorAlpha(region.color, 0.25)
+          })))
+        );
+      }),
+      /*#__PURE__*/
+      React.createElement("rect", {
+        x: lastPoint.x * iw - 8,
+        y: lastPoint.y * ih - 8,
+        width: 16,
+        height: 16,
+        strokeWidth: 4,
+        stroke: colorAlpha(region.color, 0.5),
+        fill: "transparent"
+      }))
+    );
   }),
   pixel: function pixel() {
     return null;
@@ -248,14 +300,17 @@ export var WrappedRegionList = memo(function (_ref19) {
     return r.visible !== false;
   }).map(function (r) {
     var Component = RegionComponents[r.type];
-    return React.createElement(Component, {
-      key: r.id,
-      region: r,
-      iw: iw,
-      ih: ih,
-      keypointDefinitions: keypointDefinitions,
-      fullSegmentationMode: fullSegmentationMode
-    });
+    return (
+      /*#__PURE__*/
+      React.createElement(Component, {
+        key: r.id,
+        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;
@@ -270,25 +325,30 @@ export var RegionShapes = function RegionShapes(_ref20) {
   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", {
-    width: iw,
-    height: ih,
-    style: {
-      position: "absolute",
-      zIndex: 2,
-      left: imagePosition.topLeft.x,
-      top: imagePosition.topLeft.y,
-      pointerEvents: "none",
+  return (
+    /*#__PURE__*/
+    React.createElement("svg", {
       width: iw,
-      height: ih
-    }
-  }, React.createElement(WrappedRegionList, {
-    key: "wrapped-region-list",
-    regions: regions,
-    iw: iw,
-    ih: ih,
-    keypointDefinitions: keypointDefinitions,
-    fullSegmentationMode: fullSegmentationMode
-  }));
+      height: ih,
+      style: {
+        position: "absolute",
+        zIndex: 2,
+        left: imagePosition.topLeft.x,
+        top: imagePosition.topLeft.y,
+        pointerEvents: "none",
+        width: iw,
+        height: ih
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(WrappedRegionList, {
+      key: "wrapped-region-list",
+      regions: regions,
+      iw: iw,
+      ih: ih,
+      keypointDefinitions: keypointDefinitions,
+      fullSegmentationMode: fullSegmentationMode
+    }))
+  );
 };
 export default RegionShapes;

package/RegionTags/index.js

@@ -58,87 +58,101 @@ export var RegionTags = function RegionTags(_ref) {
     };
 
     if (region.locked) {
-      return React.createElement("div", {
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          key: region.id,
+          style: _objectSpread({
+            position: "absolute"
+          }, coords, {
+            zIndex: 10 + (region.editingLabels ? 5 : 0)
+          })
+        },
+        /*#__PURE__*/
+        React.createElement(Paper, {
+          style: _objectSpread({
+            position: "absolute",
+            left: 0
+          }, displayOnTop ? {
+            bottom: 0
+          } : {
+            top: 0
+          }, {
+            zIndex: 10,
+            backgroundColor: "#fff",
+            borderRadius: 4,
+            padding: 2,
+            paddingBottom: 0,
+            opacity: 0.5,
+            pointerEvents: "none"
+          })
+        },
+        /*#__PURE__*/
+        React.createElement(LockIcon, {
+          style: {
+            width: 16,
+            height: 16,
+            color: "#333"
+          }
+        })))
+      );
+    }
+
+    return (
+      /*#__PURE__*/
+      React.createElement("div", {
         key: region.id,
         style: _objectSpread({
           position: "absolute"
         }, coords, {
-          zIndex: 10 + (region.editingLabels ? 5 : 0)
-        })
-      }, React.createElement(Paper, {
+          zIndex: 10 + (region.editingLabels ? 5 : 0),
+          width: 200
+        }),
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
+        onMouseUp: function onMouseUp(e) {
+          return e.preventDefault();
+        },
+        onMouseEnter: function onMouseEnter(e) {
+          if (region.editingLabels) {
+            mouseEvents.onMouseUp(e);
+            e.button = 1;
+            mouseEvents.onMouseUp(e);
+          }
+        }
+      },
+      /*#__PURE__*/
+      React.createElement("div", Object.assign({
         style: _objectSpread({
           position: "absolute",
+          zIndex: 20,
           left: 0
         }, displayOnTop ? {
           bottom: 0
         } : {
           top: 0
-        }, {
-          zIndex: 10,
-          backgroundColor: "#fff",
-          borderRadius: 4,
-          padding: 2,
-          paddingBottom: 0,
-          opacity: 0.5,
-          pointerEvents: "none"
         })
-      }, React.createElement(LockIcon, {
-        style: {
-          width: 16,
-          height: 16,
-          color: "#333"
-        }
-      })));
-    }
-
-    return React.createElement("div", {
-      key: region.id,
-      style: _objectSpread({
-        position: "absolute"
-      }, coords, {
-        zIndex: 10 + (region.editingLabels ? 5 : 0),
-        width: 200
-      }),
-      onMouseDown: function onMouseDown(e) {
-        return e.preventDefault();
-      },
-      onMouseUp: function onMouseUp(e) {
-        return e.preventDefault();
-      },
-      onMouseEnter: function onMouseEnter(e) {
-        if (region.editingLabels) {
-          mouseEvents.onMouseUp(e);
-          e.button = 1;
-          mouseEvents.onMouseUp(e);
-        }
-      }
-    }, React.createElement("div", Object.assign({
-      style: _objectSpread({
-        position: "absolute",
-        zIndex: 20,
-        left: 0
-      }, displayOnTop ? {
-        bottom: 0
-      } : {
-        top: 0
-      })
-    }, !region.editingLabels ? copyWithout(mouseEvents, "onMouseDown", "onMouseUp") : {}), React.createElement(RegionLabel, {
-      allowedClasses: regionClsList,
-      allowedTags: regionTagList,
-      onOpen: onBeginRegionEdit,
-      onChange: onChangeRegion,
-      onClose: onCloseRegionEdit,
-      onDelete: onDeleteRegion,
-      onDeleteGroup: onDeleteGroup,
-      editing: region.editingLabels,
-      region: region,
-      regions: regions,
-      imageSrc: imageSrc,
-      onRegionClassAdded: onRegionClassAdded,
-      allowComments: allowComments,
-      hideNotEditingLabel: hideNotEditingLabel,
-      allowedGroups: allowedGroups
-    })));
+      }, !region.editingLabels ? copyWithout(mouseEvents, "onMouseDown", "onMouseUp") : {}),
+      /*#__PURE__*/
+      React.createElement(RegionLabel, {
+        allowedClasses: regionClsList,
+        allowedTags: regionTagList,
+        onOpen: onBeginRegionEdit,
+        onChange: onChangeRegion,
+        onClose: onCloseRegionEdit,
+        onDelete: onDeleteRegion,
+        onDeleteGroup: onDeleteGroup,
+        editing: region.editingLabels,
+        region: region,
+        regions: regions,
+        imageSrc: imageSrc,
+        onRegionClassAdded: onRegionClassAdded,
+        allowComments: allowComments,
+        hideNotEditingLabel: hideNotEditingLabel,
+        allowedGroups: allowedGroups
+      })))
+    );
   });
 };
 export default RegionTags;