@searpent/react-image-annotate 2.3.4 → 2.3.6

package/RegionLabel/index.js

@@ -50,182 +50,234 @@ export var RegionLabel = function RegionLabel(_ref) {
       label: g.label || uuidToHash(g.id)
     };
   }) : [];
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(Paper, {
-    onClick: function onClick() {
-      return !editing ? onOpen(region) : null;
+  return (
+    /*#__PURE__*/
+    React.createElement(ThemeProvider, {
+      theme: theme
     },
-    className: classnames(classes.regionInfo, {
-      highlighted: region.highlighted
-    })
-  }, !editing ? React.createElement("div", null, region.cls && React.createElement("div", {
-    className: "name"
-  }, React.createElement("div", {
-    className: "circle",
-    style: {
-      backgroundColor: region.color
-    }
-  }), region.cls), region.tags && React.createElement("div", {
-    className: "tags"
-  }, region.tags.map(function (t) {
-    return React.createElement("div", {
-      key: t,
-      className: "tag"
-    }, t);
-  }))) : React.createElement("div", {
-    style: {
-      width: 200
-    }
-  }, React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "row"
-    }
-  }, React.createElement("div", {
-    style: {
-      display: "flex",
-      backgroundColor: region.color || "#888",
-      color: "#fff",
-      padding: 4,
-      paddingLeft: 8,
-      paddingRight: 8,
-      borderRadius: 4,
-      fontWeight: "bold",
-      textShadow: "0px 0px 5px rgba(0,0,0,0.4)"
-    }
-  }, region.type), React.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), React.createElement(IconButton, {
-    onClick: function onClick() {
-      return onDelete(region);
+    /*#__PURE__*/
+    React.createElement(Paper, {
+      onClick: function onClick() {
+        return !editing ? onOpen(region) : null;
+      },
+      className: classnames(classes.regionInfo, {
+        highlighted: region.highlighted
+      })
+    }, !editing ?
+    /*#__PURE__*/
+    React.createElement("div", null, region.cls &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "name"
     },
-    tabIndex: -1,
-    style: {
-      width: 22,
-      height: 22
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "circle",
+      style: {
+        backgroundColor: region.color
+      }
+    }), region.cls), region.tags &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: "tags"
+    }, region.tags.map(function (t) {
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          key: t,
+          className: "tag"
+        }, t)
+      );
+    }))) :
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        width: 200
+      }
     },
-    size: "small",
-    variant: "outlined"
-  }, React.createElement(DeleteOutlineIcon, {
-    style: {
-      marginTop: -8,
-      width: 16,
-      height: 16
-    }
-  })), React.createElement(IconButton, {
-    onClick: function onClick() {
-      return onDeleteGroup(region.groupId);
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "row"
+      }
     },
-    tabIndex: -1,
-    style: {
-      width: 22,
-      height: 22
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        display: "flex",
+        backgroundColor: region.color || "#888",
+        color: "#fff",
+        padding: 4,
+        paddingLeft: 8,
+        paddingRight: 8,
+        borderRadius: 4,
+        fontWeight: "bold",
+        textShadow: "0px 0px 5px rgba(0,0,0,0.4)"
+      }
+    }, region.type),
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        flexGrow: 1
+      }
+    }),
+    /*#__PURE__*/
+    React.createElement(IconButton, {
+      onClick: function onClick() {
+        return onDelete(region);
+      },
+      tabIndex: -1,
+      style: {
+        width: 22,
+        height: 22
+      },
+      size: "small",
+      variant: "outlined"
     },
-    size: "small",
-    variant: "outlined"
-  }, React.createElement(DeleteForeverIcon, {
-    style: {
-      marginTop: -8,
-      width: 16,
-      height: 16
-    }
-  }))), (allowedClasses || []).length > 0 && React.createElement("div", {
-    style: {
-      marginTop: 6
-    }
-  }, React.createElement(CreatableSelect, {
-    placeholder: "Classification",
-    onChange: function onChange(o, actionMeta) {
-      if (actionMeta.action == "create-option") {
-        onRegionClassAdded(o.value);
+    /*#__PURE__*/
+    React.createElement(DeleteOutlineIcon, {
+      style: {
+        marginTop: -8,
+        width: 16,
+        height: 16
       }
-
-      return _onChange(_objectSpread({}, region, {
-        cls: o.value
-      }));
+    })),
+    /*#__PURE__*/
+    React.createElement(IconButton, {
+      onClick: function onClick() {
+        return onDeleteGroup(region.groupId);
+      },
+      tabIndex: -1,
+      style: {
+        width: 22,
+        height: 22
+      },
+      size: "small",
+      variant: "outlined"
     },
-    value: region.cls ? {
-      label: region.cls,
-      value: region.cls
-    } : null,
-    options: asMutable(allowedClasses.map(function (c) {
-      return {
-        value: c,
-        label: c
-      };
-    }))
-  })), (allowedGroups || []).length > 0 && React.createElement(Select, {
-    onChange: function onChange(newGroup) {
-      return _onChange(_objectSpread({}, region, {
-        groupId: newGroup.value
-      }));
+    /*#__PURE__*/
+    React.createElement(DeleteForeverIcon, {
+      style: {
+        marginTop: -8,
+        width: 16,
+        height: 16
+      }
+    }))), (allowedClasses || []).length > 0 &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        marginTop: 6
+      }
     },
-    placeholder: "Group",
-    value: allowedGroupsForSelect.find(function (g) {
-      return g.value === region.groupId;
-    }),
-    options: _toConsumableArray(allowedGroupsForSelect)
-  }), (allowedTags || []).length > 0 && React.createElement("div", {
-    style: {
-      marginTop: 4
-    }
-  }, React.createElement(Select, {
-    onChange: function onChange(newTags) {
-      return _onChange(_objectSpread({}, region, {
-        tags: newTags.map(function (t) {
-          return t.value;
-        })
-      }));
+    /*#__PURE__*/
+    React.createElement(CreatableSelect, {
+      placeholder: "Classification",
+      onChange: function onChange(o, actionMeta) {
+        if (actionMeta.action == "create-option") {
+          onRegionClassAdded(o.value);
+        }
+
+        return _onChange(_objectSpread({}, region, {
+          cls: o.value
+        }));
+      },
+      value: region.cls ? {
+        label: region.cls,
+        value: region.cls
+      } : null,
+      options: asMutable(allowedClasses.map(function (c) {
+        return {
+          value: c,
+          label: c
+        };
+      }))
+    })), (allowedGroups || []).length > 0 &&
+    /*#__PURE__*/
+    React.createElement(Select, {
+      onChange: function onChange(newGroup) {
+        return _onChange(_objectSpread({}, region, {
+          groupId: newGroup.value
+        }));
+      },
+      placeholder: "Group",
+      value: allowedGroupsForSelect.find(function (g) {
+        return g.value === region.groupId;
+      }),
+      options: _toConsumableArray(allowedGroupsForSelect)
+    }), (allowedTags || []).length > 0 &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        marginTop: 4
+      }
     },
-    placeholder: "Tags",
-    value: (region.tags || []).map(function (c) {
-      return {
-        label: c,
-        value: c
-      };
-    }),
-    isMulti: true,
-    options: asMutable(allowedTags.map(function (c) {
-      return {
-        value: c,
-        label: c
-      };
-    }))
-  })), allowComments && React.createElement(TextField, {
-    InputProps: {
-      className: classes.commentBox
+    /*#__PURE__*/
+    React.createElement(Select, {
+      onChange: function onChange(newTags) {
+        return _onChange(_objectSpread({}, region, {
+          tags: newTags.map(function (t) {
+            return t.value;
+          })
+        }));
+      },
+      placeholder: "Tags",
+      value: (region.tags || []).map(function (c) {
+        return {
+          label: c,
+          value: c
+        };
+      }),
+      isMulti: true,
+      options: asMutable(allowedTags.map(function (c) {
+        return {
+          value: c,
+          label: c
+        };
+      }))
+    })), allowComments &&
+    /*#__PURE__*/
+    React.createElement(TextField, {
+      InputProps: {
+        className: classes.commentBox
+      },
+      fullWidth: true,
+      multiline: true,
+      rows: 3,
+      ref: commentInputRef,
+      onClick: onCommentInputClick,
+      value: region.comment || "",
+      onChange: function onChange(event) {
+        return _onChange(_objectSpread({}, region, {
+          comment: event.target.value
+        }));
+      }
+    }), onClose &&
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        marginTop: 4,
+        display: "flex"
+      }
     },
-    fullWidth: true,
-    multiline: true,
-    rows: 3,
-    ref: commentInputRef,
-    onClick: onCommentInputClick,
-    value: region.comment || "",
-    onChange: function onChange(event) {
-      return _onChange(_objectSpread({}, region, {
-        comment: event.target.value
-      }));
-    }
-  }), onClose && React.createElement("div", {
-    style: {
-      marginTop: 4,
-      display: "flex"
-    }
-  }, React.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), React.createElement(Button, {
-    onClick: function onClick() {
-      return onClose(region);
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        flexGrow: 1
+      }
+    }),
+    /*#__PURE__*/
+    React.createElement(Button, {
+      onClick: function onClick() {
+        return onClose(region);
+      },
+      size: "small",
+      variant: "contained",
+      color: "primary"
     },
-    size: "small",
-    variant: "contained",
-    color: "primary"
-  }, React.createElement(CheckIcon, null))))));
+    /*#__PURE__*/
+    React.createElement(CheckIcon, null))))))
+  );
 };
 export default memo(RegionLabel, function (prevProps, nextProps) {
   return prevProps.editing === nextProps.editing && prevProps.region === nextProps.region;

package/RegionSelectAndTransformBoxes/index.js

@@ -46,110 +46,133 @@ export var RegionSelectAndTransformBox = memo(function (_ref2) {
   var _layoutParams$current = layoutParams.current,
       iw = _layoutParams$current.iw,
       ih = _layoutParams$current.ih;
-  return React.createElement(ThemeProvider, {
-    theme: theme
-  }, React.createElement(Fragment, null, React.createElement(PreventScrollToParents, null, showHighlightBox && r.type !== "polygon" && React.createElement(HighlightBox, {
-    region: r,
-    mouseEvents: mouseEvents,
-    dragWithPrimary: dragWithPrimary,
-    createWithPrimary: createWithPrimary,
-    zoomWithPrimary: zoomWithPrimary,
-    onBeginMovePoint: onBeginMovePoint,
-    onSelectRegion: onSelectRegion,
-    pbox: pbox
-  }), r.type === "box" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && mat.a < 1.2 && [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5], [0.5, 0.5]].map(function (_ref3, i) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        px = _ref4[0],
-        py = _ref4[1];
+  return (
+    /*#__PURE__*/
+    React.createElement(ThemeProvider, {
+      theme: theme
+    },
+    /*#__PURE__*/
+    React.createElement(Fragment, null,
+    /*#__PURE__*/
+    React.createElement(PreventScrollToParents, null, showHighlightBox && r.type !== "polygon" &&
+    /*#__PURE__*/
+    React.createElement(HighlightBox, {
+      region: r,
+      mouseEvents: mouseEvents,
+      dragWithPrimary: dragWithPrimary,
+      createWithPrimary: createWithPrimary,
+      zoomWithPrimary: zoomWithPrimary,
+      onBeginMovePoint: onBeginMovePoint,
+      onSelectRegion: onSelectRegion,
+      pbox: pbox
+    }), r.type === "box" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && mat.a < 1.2 && [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5], [0.5, 0.5]].map(function (_ref3, i) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          px = _ref4[0],
+          py = _ref4[1];
 
-    return React.createElement(TransformGrabber, Object.assign({
-      key: i
-    }, mouseEvents, {
-      onMouseDown: function onMouseDown(e) {
-        if (e.button === 0) return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1]);
-        mouseEvents.onMouseDown(e);
-      },
-      style: {
-        left: pbox.x - 4 - 2 + pbox.w * px,
-        top: pbox.y - 4 - 2 + pbox.h * py,
-        cursor: boxCursorMap[py * 2][px * 2],
-        borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined
-      }
-    }));
-  }), r.type === "polygon" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && r.points.map(function (_ref5, i) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-        px = _ref6[0],
-        py = _ref6[1];
+      return (
+        /*#__PURE__*/
+        React.createElement(TransformGrabber, Object.assign({
+          key: i
+        }, mouseEvents, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button === 0) return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1]);
+            mouseEvents.onMouseDown(e);
+          },
+          style: {
+            left: pbox.x - 4 - 2 + pbox.w * px,
+            top: pbox.y - 4 - 2 + pbox.h * py,
+            cursor: boxCursorMap[py * 2][px * 2],
+            borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined
+          }
+        }))
+      );
+    }), r.type === "polygon" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && r.points.map(function (_ref5, i) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          px = _ref6[0],
+          py = _ref6[1];
 
-    var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
-    return React.createElement(TransformGrabber, Object.assign({
-      key: i
-    }, mouseEvents, {
-      onMouseDown: function onMouseDown(e) {
-        if (e.button === 0 && (!r.open || i === 0)) return onBeginMovePolygonPoint(r, i);
-        mouseEvents.onMouseDown(e);
-      },
-      style: {
-        cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
-        zIndex: 10,
-        pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
-        left: proj.x - 4,
-        top: proj.y - 4
-      }
-    }));
-  }), r.type === "polygon" && r.highlighted && !dragWithPrimary && !zoomWithPrimary && !r.locked && !r.open && r.points.length > 1 && r.points.map(function (p1, i) {
-    return [p1, r.points[(i + 1) % r.points.length]];
-  }).map(function (_ref7) {
-    var _ref8 = _slicedToArray(_ref7, 2),
-        p1 = _ref8[0],
-        p2 = _ref8[1];
+      var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
+      return (
+        /*#__PURE__*/
+        React.createElement(TransformGrabber, Object.assign({
+          key: i
+        }, mouseEvents, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button === 0 && (!r.open || i === 0)) return onBeginMovePolygonPoint(r, i);
+            mouseEvents.onMouseDown(e);
+          },
+          style: {
+            cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
+            zIndex: 10,
+            pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
+            left: proj.x - 4,
+            top: proj.y - 4
+          }
+        }))
+      );
+    }), r.type === "polygon" && r.highlighted && !dragWithPrimary && !zoomWithPrimary && !r.locked && !r.open && r.points.length > 1 && r.points.map(function (p1, i) {
+      return [p1, r.points[(i + 1) % r.points.length]];
+    }).map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+          p1 = _ref8[0],
+          p2 = _ref8[1];
 
-    return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
-  }).map(function (pa, i) {
-    var proj = mat.clone().inverse().applyToPoint(pa[0] * iw, pa[1] * ih);
-    return React.createElement(TransformGrabber, Object.assign({
-      key: i
-    }, mouseEvents, {
-      onMouseDown: function onMouseDown(e) {
-        if (e.button === 0) return onAddPolygonPoint(r, pa, i + 1);
-        mouseEvents.onMouseDown(e);
-      },
-      style: {
-        cursor: "copy",
-        zIndex: 10,
-        left: proj.x - 4,
-        top: proj.y - 4,
-        border: "2px dotted #fff",
-        opacity: 0.5
-      }
-    }));
-  }), r.type === "keypoints" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && Object.entries(r.points).map(function (_ref9, i) {
-    var _ref10 = _slicedToArray(_ref9, 2),
-        keypointId = _ref10[0],
-        _ref10$ = _ref10[1],
-        px = _ref10$.x,
-        py = _ref10$.y;
+      return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
+    }).map(function (pa, i) {
+      var proj = mat.clone().inverse().applyToPoint(pa[0] * iw, pa[1] * ih);
+      return (
+        /*#__PURE__*/
+        React.createElement(TransformGrabber, Object.assign({
+          key: i
+        }, mouseEvents, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button === 0) return onAddPolygonPoint(r, pa, i + 1);
+            mouseEvents.onMouseDown(e);
+          },
+          style: {
+            cursor: "copy",
+            zIndex: 10,
+            left: proj.x - 4,
+            top: proj.y - 4,
+            border: "2px dotted #fff",
+            opacity: 0.5
+          }
+        }))
+      );
+    }), r.type === "keypoints" && !dragWithPrimary && !zoomWithPrimary && !r.locked && r.highlighted && Object.entries(r.points).map(function (_ref9, i) {
+      var _ref10 = _slicedToArray(_ref9, 2),
+          keypointId = _ref10[0],
+          _ref10$ = _ref10[1],
+          px = _ref10$.x,
+          py = _ref10$.y;
 
-    var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
-    return React.createElement(Tooltip, {
-      title: keypointId,
-      key: i
-    }, React.createElement(TransformGrabber, Object.assign({
-      key: i
-    }, mouseEvents, {
-      onMouseDown: function onMouseDown(e) {
-        if (e.button === 0 && (!r.open || i === 0)) return onBeginMoveKeypoint(r, keypointId);
-        mouseEvents.onMouseDown(e);
-      },
-      style: {
-        cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
-        zIndex: 10,
-        pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
-        left: proj.x - 4,
-        top: proj.y - 4
-      }
-    })));
-  }))));
+      var proj = mat.clone().inverse().applyToPoint(px * iw, py * ih);
+      return (
+        /*#__PURE__*/
+        React.createElement(Tooltip, {
+          title: keypointId,
+          key: i
+        },
+        /*#__PURE__*/
+        React.createElement(TransformGrabber, Object.assign({
+          key: i
+        }, mouseEvents, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button === 0 && (!r.open || i === 0)) return onBeginMoveKeypoint(r, keypointId);
+            mouseEvents.onMouseDown(e);
+          },
+          style: {
+            cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
+            zIndex: 10,
+            pointerEvents: r.open && i === r.points.length - 1 ? "none" : undefined,
+            left: proj.x - 4,
+            top: proj.y - 4
+          }
+        })))
+      );
+    }))))
+  );
 }, arePropsEqual);
 export var RegionSelectAndTransformBoxes = memo(function (props) {
   return props.regions.filter(function (r) {
@@ -157,11 +180,14 @@ export var RegionSelectAndTransformBoxes = memo(function (props) {
   }).filter(function (r) {
     return !r.locked;
   }).map(function (r, i) {
-    return React.createElement(RegionSelectAndTransformBox, Object.assign({
-      key: r.id
-    }, props, {
-      region: r
-    }));
+    return (
+      /*#__PURE__*/
+      React.createElement(RegionSelectAndTransformBox, Object.assign({
+        key: r.id
+      }, props, {
+        region: r
+      }))
+    );
   });
 }, function (n, p) {
   return n.regions === p.regions && n.mat === p.mat;