@searpent/react-image-annotate 2.3.1 → 2.3.3-cand

package/Annotator/reducers/general-reducer.js

@@ -1018,6 +1018,17 @@ export default (function (state, action) {
         }));
       }
 
+    case "DELETE_ALL_REGIONS":
+      {
+        // Delete all non-metadata regions (frames) and article-level metadata,
+        // but keep page-level/global metadata (metadata without groupId).
+        state = saveToHistory(state, "Delete all regions");
+        state = addSaveableAction(state, "DELETE_REGION");
+        return setIn(state, [].concat(_toConsumableArray(pathToActiveImage), ["regions"]), (activeImage.regions || []).filter(function (r) {
+          return r.cls === "metadata" && (r.groupId === null || r.groupId === undefined);
+        }));
+      }
+
     case "DELETE_GROUP":
       {
         var _groupId = action.groupId;

package/Annotator/reducers/video-reducer.js

@@ -16,6 +16,8 @@ export default (function (state, action) {
         if (typeof duration === "number") {
           return setIn(state, ["videoDuration"], duration * 1000);
         }
+
+        break;
       }
 
     case "HEADER_BUTTON_CLICKED":
@@ -26,7 +28,12 @@ export default (function (state, action) {
 
           case "pause":
             return setIn(state, ["videoPlaying"], false);
+
+          default:
+            break;
         }
+
+        break;
       }
 
     case "CHANGE_VIDEO_TIME":
@@ -44,6 +51,11 @@ export default (function (state, action) {
         return setIn(state, ["keyframes"], without(state.keyframes, action.time));
       }
 
+    case "DELETE_ALL_KEYFRAMES":
+      {
+        return setIn(state, ["keyframes"], {});
+      }
+
     default:
       break;
   } // Before the user modifies regions, copy the interpolated regions over to a

package/KeyframesSelectorSidebarBox/index.js

@@ -49,7 +49,8 @@ var KeyframesSelectorSidebarBox = function KeyframesSelectorSidebarBox(_ref2) {
   var currentVideoTime = _ref2.currentVideoTime,
       keyframes = _ref2.keyframes,
       onChangeVideoTime = _ref2.onChangeVideoTime,
-      onDeleteKeyframe = _ref2.onDeleteKeyframe;
+      onDeleteKeyframe = _ref2.onDeleteKeyframe,
+      onDeleteAllKeyframes = _ref2.onDeleteAllKeyframes;
   var keyframeTimes = Object.keys(keyframes).map(function (t) {
     return parseInt(t);
   });
@@ -64,7 +65,32 @@ var KeyframesSelectorSidebarBox = function KeyframesSelectorSidebarBox(_ref2) {
       }
     }),
     expandedByDefault: true
-  }, keyframeTimes.map(function (t) {
+  }, keyframeTimes.length > 0 && React.createElement("div", {
+    style: {
+      padding: 8,
+      paddingBottom: 0
+    }
+  }, React.createElement("button", {
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      if (window.confirm("Are you really sure you want to delete all frames? This will remove all keyframes for this video.")) {
+        if (onDeleteAllKeyframes) {
+          onDeleteAllKeyframes();
+        }
+      }
+    },
+    style: {
+      fontSize: 12,
+      color: colors.red[700],
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      padding: 0,
+      textDecoration: "underline"
+    }
+  }, "Delete all frames")), keyframeTimes.map(function (t) {
     var _keyframes$t;
 
     return React.createElement(KeyframeRow, {

package/MainLayout/index.js

@@ -481,11 +481,13 @@ export var MainLayout = function MainLayout(_ref5) {
       regions: activeImage ? activeImage.regions : emptyArr,
       onSelectRegion: action("SELECT_REGION", "region"),
       onDeleteRegion: action("DELETE_REGION", "region"),
+      onDeleteAllRegions: action("DELETE_ALL_REGIONS"),
       onChangeRegion: action("CHANGE_REGION", "region"),
       key: "region-selector"
     }), state.keyframes && React.createElement(KeyframesSelector, {
       onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
       onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
+      onDeleteAllKeyframes: action("DELETE_ALL_KEYFRAMES"),
       onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
       currentTime: state.currentVideoTime,
       duration: state.videoDuration,

package/MetadataEditorSidebarBox/index.js

@@ -36,6 +36,9 @@ var MetadataItem = function MetadataItem(_ref2) {
       onChange = _ref2.onChange,
       _ref2$metadataConfig = _ref2.metadataConfig,
       metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
+  // Ensure inputs are always controlled: when metadata value is undefined/null,
+  // use an empty string so we don't keep stale values from a previously selected article.
+  var normalizedValue = value == null ? "" : value;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -59,7 +62,7 @@ var MetadataItem = function MetadataItem(_ref2) {
     }
   }, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && React.createElement(React.Fragment, null, React.createElement("input", {
     type: "text",
-    value: value,
+    value: normalizedValue,
     name: name,
     onChange: handleChange,
     id: name,
@@ -93,7 +96,7 @@ var MetadataItem = function MetadataItem(_ref2) {
       return React.createElement("option", {
         key: opt.value,
         value: opt.value,
-        selected: opt.value === value
+        selected: opt.value === normalizedValue
       }, opt.label);
     }
 

package/RegionSelectorSidebarBox/index.js

@@ -216,6 +216,7 @@ export var RegionSelectorSidebarBox = function RegionSelectorSidebarBox(_ref5) {
   var _ref5$regions = _ref5.regions,
       regions = _ref5$regions === void 0 ? emptyArr : _ref5$regions,
       onDeleteRegion = _ref5.onDeleteRegion,
+      onDeleteAllRegions = _ref5.onDeleteAllRegions,
       onChangeRegion = _ref5.onChangeRegion,
       onSelectRegion = _ref5.onSelectRegion;
   var classes = useStyles();
@@ -232,7 +233,31 @@ export var RegionSelectorSidebarBox = function RegionSelectorSidebarBox(_ref5) {
     expandedByDefault: true
   }, React.createElement("div", {
     className: classes.container
-  }, React.createElement(MemoRowHeader, null), React.createElement(HeaderSep, null), regions.map(function (r, i) {
+  }, regions.length > 0 && onDeleteAllRegions && React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      marginBottom: 4
+    }
+  }, React.createElement("button", {
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      if (window.confirm("Are you really sure you want to delete all frames on this page? This will remove all non-metadata regions.")) {
+        onDeleteAllRegions();
+      }
+    },
+    style: {
+      fontSize: 12,
+      color: "#d32f2f",
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      padding: 0,
+      textDecoration: "underline"
+    }
+  }, "Delete all frames")), React.createElement(MemoRowHeader, null), React.createElement(HeaderSep, null), regions.map(function (r, i) {
     return React.createElement(MemoRow, Object.assign({
       key: r.id
     }, r, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.3.1",
+  "version": "2.3.3-cand",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",