@searpent/react-image-annotate 2.3.4 → 2.3.6

package/Annotator/index.story_repr.js

@@ -24,228 +24,240 @@ var middlewares = [function (store) {
   };
 }];
 storiesOf("Annotator", module).add("Basic", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: middlewares,
-    labelImages: true,
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    regionTagList: ["tag1", "tag2", "tag3"],
-    imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    imageTagList: ["tag1", "tag2", "tag3"],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=1",
-      name: "Frame 0036"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=2",
-      name: "Frame 0037"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=3",
-      name: "Frame 0038"
-    }]
-  });
-}).add("Basic with onImagesChange", function () {
-  return React.createElement(HotKeys, {
-    keyMap: defaultKeyMap
-  }, React.createElement("div", null, React.createElement("div", null, React.createElement(Annotator, {
-    middlewares: middlewares,
-    labelImages: true,
-    regionClsList: ["author", "appendix", "photo_author", "photo_caption", "advertisement", "other_graphics", "unknown", "title", "about_author", "image", "subtitle", "interview", "table", "text", "continuation_ref", "cover_clip", "page_id", "continuation_mark", "follow_up_mark", "article_termination_mark", "page_splitting_stripe", "column_id_stripe", "prev_page_reference", "section_subcategory"],
-    help: "# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class",
-    onImagesChange: function onImagesChange(images) {
-      return console.log("[images changed to]:", images);
-    },
-    images: photosToImages([examplePhotos[0]]),
-    clsColors: {
-      title: "#f70202",
-      subtitle: "#ffb405",
-      text: "#14deef",
-      author: "#f8d51e",
-      appendix: "#bfede2",
-      photo_author: "#9a17bb",
-      photo_caption: "#ff84f6",
-      advertisement: "#ffb201",
-      other_graphics: "#ff5400",
-      unknown: "#bfede2",
-      about_author: "#9a17bb",
-      image: "#14deef",
-      interview: "#23b20f",
-      table: "#02b4ba",
-      continuation_ref: '#FF33CC',
-      cover_clip: '#669966',
-      page_id: '#4433AA',
-      continuation_mark: '#660066',
-      follow_up_mark: '#873e23',
-      article_termination_mark: '#873e23',
-      page_splitting_stripe: '#873e23',
-      column_id_stripe: '#873e23',
-      prev_page_reference: '#f3a864',
-      section_subcategory: '#442c55'
-    } // groupColors={[
-    //   "#3853F1",
-    //   "#F6E54C",
-    //   "#39D33C",
-    //   "#CF24CF",
-    //   "#22E3ED",
-    //   "#EF3029",
-    // ]}
-    ,
-    enabledTools: [],
-    groupColors: ['#343434', '#989898', '#dcdcdc'],
-    onGroupSelect: function onGroupSelect(groupId) {
-      return console.log('selected groupid:', groupId);
-    },
-    hideHeader: true,
-    hideHistory: true,
-    hideNotEditingLabel: true,
-    showEditor: true,
-    showPageSelector: true,
-    albumMetadata: [{
-      key: "issueNumber",
-      value: "12"
-    }, {
-      key: "issueType",
-      value: "news"
-    }],
-    metadataConfigs: [{
-      key: "issueNumber",
-      level: "album",
-      options: []
-    }, {
-      key: "issueType",
-      level: "album",
-      options: ['news', 'magazine', 'q&a']
-    }, {
-      key: "mutation",
-      level: "photo",
-      options: ['Morava', 'Slezsko', 'Cechy']
-    }, {
-      key: "previousArticleId",
-      level: "photo_metadata-engine",
-      options: [{
-        value: "alpha",
-        label: "0 - alpha"
-      }, {
-        value: "beta",
-        label: "1 - beta"
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: middlewares,
+      labelImages: true,
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      regionTagList: ["tag1", "tag2", "tag3"],
+      imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      imageTagList: ["tag1", "tag2", "tag3"],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
       }, {
-        value: "gamma",
-        label: "2 - gamma"
-      }]
-    }, {
-      key: "pageNumber",
-      level: "photo",
-      options: []
-    }, {
-      key: "articleType",
-      level: "photo_metadata-engine",
-      selectable: true,
-      options: [{
-        value: "alpha",
-        label: "0 - alpha"
+        src: "https://loremflickr.com/100/100/cars?lock=1",
+        name: "Frame 0036"
       }, {
-        value: "beta",
-        label: "1 - beta"
+        src: "https://loremflickr.com/100/100/cars?lock=2",
+        name: "Frame 0037"
       }, {
-        value: "gamma",
-        label: "2 - gamma"
+        src: "https://loremflickr.com/100/100/cars?lock=3",
+        name: "Frame 0038"
       }]
-    }, {
-      key: "section",
-      level: "photo_metadata-engine",
-      options: ['editorial', 'article', 'last page']
-    }],
-    onSelectedImageChange: function onSelectedImageChange(d) {
-      return console.log("[onSelectedImageChange] triggered:", d);
-    },
-    onExit: function onExit(s) {
-      return console.log('[onExit] triggered:', s);
+    })
+  );
+}).add("Basic with onImagesChange", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement(HotKeys, {
+      keyMap: defaultKeyMap
     },
-    save:
     /*#__PURE__*/
-    function () {
-      var _ref2 = _asyncToGenerator(
+    React.createElement("div", null,
+    /*#__PURE__*/
+    React.createElement("div", null,
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      middlewares: middlewares,
+      labelImages: true,
+      regionClsList: ["author", "appendix", "photo_author", "photo_caption", "advertisement", "other_graphics", "unknown", "title", "about_author", "image", "subtitle", "interview", "table", "text", "continuation_ref", "cover_clip", "page_id", "continuation_mark", "follow_up_mark", "article_termination_mark", "page_splitting_stripe", "column_id_stripe", "prev_page_reference", "section_subcategory"],
+      help: "# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class",
+      onImagesChange: function onImagesChange(images) {
+        return console.log("[images changed to]:", images);
+      },
+      images: photosToImages([examplePhotos[0]]),
+      clsColors: {
+        title: "#f70202",
+        subtitle: "#ffb405",
+        text: "#14deef",
+        author: "#f8d51e",
+        appendix: "#bfede2",
+        photo_author: "#9a17bb",
+        photo_caption: "#ff84f6",
+        advertisement: "#ffb201",
+        other_graphics: "#ff5400",
+        unknown: "#bfede2",
+        about_author: "#9a17bb",
+        image: "#14deef",
+        interview: "#23b20f",
+        table: "#02b4ba",
+        continuation_ref: '#FF33CC',
+        cover_clip: '#669966',
+        page_id: '#4433AA',
+        continuation_mark: '#660066',
+        follow_up_mark: '#873e23',
+        article_termination_mark: '#873e23',
+        page_splitting_stripe: '#873e23',
+        column_id_stripe: '#873e23',
+        prev_page_reference: '#f3a864',
+        section_subcategory: '#442c55'
+      } // groupColors={[
+      //   "#3853F1",
+      //   "#F6E54C",
+      //   "#39D33C",
+      //   "#CF24CF",
+      //   "#22E3ED",
+      //   "#EF3029",
+      // ]}
+      ,
+      enabledTools: [],
+      groupColors: ['#343434', '#989898', '#dcdcdc'],
+      onGroupSelect: function onGroupSelect(groupId) {
+        return console.log('selected groupid:', groupId);
+      },
+      hideHeader: true,
+      hideHistory: true,
+      hideNotEditingLabel: true,
+      showEditor: true,
+      showPageSelector: true,
+      albumMetadata: [{
+        key: "issueNumber",
+        value: "12"
+      }, {
+        key: "issueType",
+        value: "news"
+      }],
+      metadataConfigs: [{
+        key: "issueNumber",
+        level: "album",
+        options: []
+      }, {
+        key: "issueType",
+        level: "album",
+        options: ['news', 'magazine', 'q&a']
+      }, {
+        key: "mutation",
+        level: "photo",
+        options: ['Morava', 'Slezsko', 'Cechy']
+      }, {
+        key: "previousArticleId",
+        level: "photo_metadata-engine",
+        options: [{
+          value: "alpha",
+          label: "0 - alpha"
+        }, {
+          value: "beta",
+          label: "1 - beta"
+        }, {
+          value: "gamma",
+          label: "2 - gamma"
+        }]
+      }, {
+        key: "pageNumber",
+        level: "photo",
+        options: []
+      }, {
+        key: "articleType",
+        level: "photo_metadata-engine",
+        selectable: true,
+        options: [{
+          value: "alpha",
+          label: "0 - alpha"
+        }, {
+          value: "beta",
+          label: "1 - beta"
+        }, {
+          value: "gamma",
+          label: "2 - gamma"
+        }]
+      }, {
+        key: "section",
+        level: "photo_metadata-engine",
+        options: ['editorial', 'article', 'last page']
+      }],
+      onSelectedImageChange: function onSelectedImageChange(d) {
+        return console.log("[onSelectedImageChange] triggered:", d);
+      },
+      onExit: function onExit(s) {
+        return console.log('[onExit] triggered:', s);
+      },
+      save:
       /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee(_ref) {
-        var image, triggerRecalc, albumMetadata;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                image = _ref.image, triggerRecalc = _ref.triggerRecalc, albumMetadata = _ref.albumMetadata;
-                console.log("[SYNC] image ".concat(image.id, " saving...  recalc: ").concat(triggerRecalc, " albumMetadata: ").concat(albumMetadata.length));
-                return _context.abrupt("return", new Promise(function (resolve, reject) {
-                  setTimeout(function () {
-                    var lockedUntil = null;
+      function () {
+        var _ref2 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee(_ref) {
+          var image, triggerRecalc, albumMetadata;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  image = _ref.image, triggerRecalc = _ref.triggerRecalc, albumMetadata = _ref.albumMetadata;
+                  console.log("[SYNC] image ".concat(image.id, " saving...  recalc: ").concat(triggerRecalc, " albumMetadata: ").concat(albumMetadata.length));
+                  return _context.abrupt("return", new Promise(function (resolve, reject) {
+                    setTimeout(function () {
+                      var lockedUntil = null;
 
-                    if (triggerRecalc) {
-                      var now = new Date();
-                      now.setSeconds(now.getSeconds() + 60);
-                      lockedUntil = now;
-                    }
+                      if (triggerRecalc) {
+                        var now = new Date();
+                        now.setSeconds(now.getSeconds() + 60);
+                        lockedUntil = now;
+                      }
 
-                    resolve({
-                      lockedUntil: lockedUntil
-                    });
-                  }, 3000);
-                }));
+                      resolve({
+                        lockedUntil: lockedUntil
+                      });
+                    }, 3000);
+                  }));
 
-              case 3:
-              case "end":
-                return _context.stop();
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
             }
-          }
-        }, _callee);
-      }));
+          }, _callee);
+        }));
 
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }(),
-    fetchImage:
-    /*#__PURE__*/
-    function () {
-      var _ref4 = _asyncToGenerator(
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }(),
+      fetchImage:
       /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee2(_ref3) {
-        var imageId;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                imageId = _ref3.imageId;
-                console.log("[SYNC] image ".concat(imageId, " fetching..."));
-                return _context2.abrupt("return", new Promise(function (resolve, reject) {
-                  setTimeout(function () {
-                    console.log("[SYNC] image ".concat(imageId, " fetched")); // resolve({
-                    //   image: { ...exampleImages[0], lockedUntil: new Date().toISOString(), id: imageId }
-                    // })
+      function () {
+        var _ref4 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee2(_ref3) {
+          var imageId;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  imageId = _ref3.imageId;
+                  console.log("[SYNC] image ".concat(imageId, " fetching..."));
+                  return _context2.abrupt("return", new Promise(function (resolve, reject) {
+                    setTimeout(function () {
+                      console.log("[SYNC] image ".concat(imageId, " fetched")); // resolve({
+                      //   image: { ...exampleImages[0], lockedUntil: new Date().toISOString(), id: imageId }
+                      // })
 
-                    resolve({
-                      image: _objectSpread({}, exampleImages[0], {
-                        lockedUntil: null,
-                        id: imageId
-                      })
-                    });
-                  }, 5000);
-                }));
+                      resolve({
+                        image: _objectSpread({}, exampleImages[0], {
+                          lockedUntil: null,
+                          id: imageId
+                        })
+                      });
+                    }, 5000);
+                  }));
 
-              case 3:
-              case "end":
-                return _context2.stop();
+                case 3:
+                case "end":
+                  return _context2.stop();
+              }
             }
-          }
-        }, _callee2);
-      }));
+          }, _callee2);
+        }));
 
-      return function (_x2) {
-        return _ref4.apply(this, arguments);
-      };
-    }()
-  }))));
+        return function (_x2) {
+          return _ref4.apply(this, arguments);
+        };
+      }()
+    }))))
+  );
 }).add("Basic with onImagesChange (missing articleType value -> reproduce hang)", function () {
   var _storyPhoto$modelResu, _storyPhoto$modelResu2, _metadataEngine$resul;
 
@@ -292,613 +304,674 @@ storiesOf("Annotator", module).add("Basic", function () {
     return children;
   };
 
-  return React.createElement(HotKeys, {
-    keyMap: defaultKeyMap
-  }, React.createElement(EnableBuggyMetadataInputMode, null, React.createElement("div", null, React.createElement("div", null, React.createElement(Annotator, {
-    middlewares: middlewares,
-    labelImages: true,
-    regionClsList: ["author", "appendix", "photo_author", "photo_caption", "advertisement", "other_graphics", "unknown", "title", "about_author", "image", "subtitle", "interview", "table", "text", "continuation_ref", "cover_clip", "page_id", "continuation_mark", "follow_up_mark", "article_termination_mark", "page_splitting_stripe", "column_id_stripe", "prev_page_reference", "section_subcategory"],
-    help: "# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class",
-    onImagesChange: function onImagesChange(images) {
-      return console.log("[images changed to]:", images);
-    },
-    images: photosToImages([storyPhoto]),
-    clsColors: {
-      title: "#f70202",
-      subtitle: "#ffb405",
-      text: "#14deef",
-      author: "#f8d51e",
-      appendix: "#bfede2",
-      photo_author: "#9a17bb",
-      photo_caption: "#ff84f6",
-      advertisement: "#ffb201",
-      other_graphics: "#ff5400",
-      unknown: "#bfede2",
-      about_author: "#9a17bb",
-      image: "#14deef",
-      interview: "#23b20f",
-      table: "#02b4ba",
-      continuation_ref: "#FF33CC",
-      cover_clip: "#669966",
-      page_id: "#4433AA",
-      continuation_mark: "#660066",
-      follow_up_mark: "#873e23",
-      article_termination_mark: "#873e23",
-      page_splitting_stripe: "#873e23",
-      column_id_stripe: "#873e23",
-      prev_page_reference: "#f3a864",
-      section_subcategory: "#442c55"
-    },
-    enabledTools: [],
-    groupColors: ["#343434", "#989898", "#dcdcdc"],
-    onGroupSelect: function onGroupSelect(groupId) {
-      return console.log("selected groupid:", groupId);
+  return (
+    /*#__PURE__*/
+    React.createElement(HotKeys, {
+      keyMap: defaultKeyMap
     },
-    hideHeader: true,
-    hideHistory: true,
-    hideNotEditingLabel: true,
-    showEditor: true,
-    showPageSelector: true,
-    albumMetadata: [{
-      key: "issueNumber",
-      value: "12"
-    }, {
-      key: "issueType",
-      value: "news"
-    }],
-    metadataConfigs: [{
-      key: "issueNumber",
-      level: "album",
-      options: []
-    }, {
-      key: "issueType",
-      level: "album",
-      options: ["news", "magazine", "q&a"]
-    }, {
-      key: "mutation",
-      level: "photo",
-      options: ["Morava", "Slezsko", "Cechy"]
-    }, {
-      key: "previousArticleId",
-      level: "photo_metadata-engine",
-      selectable: true,
-      options: [{
-        value: "alpha",
-        label: "0 - alpha"
+    /*#__PURE__*/
+    React.createElement(EnableBuggyMetadataInputMode, null,
+    /*#__PURE__*/
+    React.createElement("div", null,
+    /*#__PURE__*/
+    React.createElement("div", null,
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      middlewares: middlewares,
+      labelImages: true,
+      regionClsList: ["author", "appendix", "photo_author", "photo_caption", "advertisement", "other_graphics", "unknown", "title", "about_author", "image", "subtitle", "interview", "table", "text", "continuation_ref", "cover_clip", "page_id", "continuation_mark", "follow_up_mark", "article_termination_mark", "page_splitting_stripe", "column_id_stripe", "prev_page_reference", "section_subcategory"],
+      help: "# Tools\n\n**E** - select tool\n\n**D** - frame tool\n\n**Ctrl** + **click frame** - edit frame\n\n**1**- **9** - change class",
+      onImagesChange: function onImagesChange(images) {
+        return console.log("[images changed to]:", images);
+      },
+      images: photosToImages([storyPhoto]),
+      clsColors: {
+        title: "#f70202",
+        subtitle: "#ffb405",
+        text: "#14deef",
+        author: "#f8d51e",
+        appendix: "#bfede2",
+        photo_author: "#9a17bb",
+        photo_caption: "#ff84f6",
+        advertisement: "#ffb201",
+        other_graphics: "#ff5400",
+        unknown: "#bfede2",
+        about_author: "#9a17bb",
+        image: "#14deef",
+        interview: "#23b20f",
+        table: "#02b4ba",
+        continuation_ref: "#FF33CC",
+        cover_clip: "#669966",
+        page_id: "#4433AA",
+        continuation_mark: "#660066",
+        follow_up_mark: "#873e23",
+        article_termination_mark: "#873e23",
+        page_splitting_stripe: "#873e23",
+        column_id_stripe: "#873e23",
+        prev_page_reference: "#f3a864",
+        section_subcategory: "#442c55"
+      },
+      enabledTools: [],
+      groupColors: ["#343434", "#989898", "#dcdcdc"],
+      onGroupSelect: function onGroupSelect(groupId) {
+        return console.log("selected groupid:", groupId);
+      },
+      hideHeader: true,
+      hideHistory: true,
+      hideNotEditingLabel: true,
+      showEditor: true,
+      showPageSelector: true,
+      albumMetadata: [{
+        key: "issueNumber",
+        value: "12"
       }, {
-        value: "beta",
-        label: "1 - beta"
+        key: "issueType",
+        value: "news"
+      }],
+      metadataConfigs: [{
+        key: "issueNumber",
+        level: "album",
+        options: []
       }, {
-        value: "gamma",
-        label: "2 - gamma"
-      }]
-    }, {
-      key: "pageNumber",
-      level: "photo",
-      options: []
-    }, // IMPORTANT: articleType is a text input here (not selectable),
-    // to match production (`<input type="text" ...>`).
-    {
-      key: "articleType",
-      level: "photo_metadata-engine",
-      options: ["alpha", "beta", "gamma"]
-    }, {
-      key: "section",
-      level: "photo_metadata-engine",
-      options: ["editorial", "article", "last page"]
-    }],
-    onSelectedImageChange: function onSelectedImageChange(d) {
-      return console.log("[onSelectedImageChange] triggered:", d);
-    },
-    onExit: function onExit(s) {
-      return console.log("[onExit] triggered:", s);
-    },
-    save:
-    /*#__PURE__*/
-    function () {
-      var _ref7 = _asyncToGenerator(
+        key: "issueType",
+        level: "album",
+        options: ["news", "magazine", "q&a"]
+      }, {
+        key: "mutation",
+        level: "photo",
+        options: ["Morava", "Slezsko", "Cechy"]
+      }, {
+        key: "previousArticleId",
+        level: "photo_metadata-engine",
+        selectable: true,
+        options: [{
+          value: "alpha",
+          label: "0 - alpha"
+        }, {
+          value: "beta",
+          label: "1 - beta"
+        }, {
+          value: "gamma",
+          label: "2 - gamma"
+        }]
+      }, {
+        key: "pageNumber",
+        level: "photo",
+        options: []
+      }, // IMPORTANT: articleType is a text input here (not selectable),
+      // to match production (`<input type="text" ...>`).
+      {
+        key: "articleType",
+        level: "photo_metadata-engine",
+        options: ["alpha", "beta", "gamma"]
+      }, {
+        key: "section",
+        level: "photo_metadata-engine",
+        options: ["editorial", "article", "last page"]
+      }],
+      onSelectedImageChange: function onSelectedImageChange(d) {
+        return console.log("[onSelectedImageChange] triggered:", d);
+      },
+      onExit: function onExit(s) {
+        return console.log("[onExit] triggered:", s);
+      },
+      save:
       /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee3(_ref6) {
-        var image, triggerRecalc, albumMetadata;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                image = _ref6.image, triggerRecalc = _ref6.triggerRecalc, albumMetadata = _ref6.albumMetadata;
-                console.log("[SYNC] image ".concat(image.id, " saving...  recalc: ").concat(triggerRecalc, " albumMetadata: ").concat(albumMetadata.length));
-                return _context3.abrupt("return", new Promise(function (resolve) {
-                  setTimeout(function () {
-                    var lockedUntil = null;
+      function () {
+        var _ref7 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee3(_ref6) {
+          var image, triggerRecalc, albumMetadata;
+          return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  image = _ref6.image, triggerRecalc = _ref6.triggerRecalc, albumMetadata = _ref6.albumMetadata;
+                  console.log("[SYNC] image ".concat(image.id, " saving...  recalc: ").concat(triggerRecalc, " albumMetadata: ").concat(albumMetadata.length));
+                  return _context3.abrupt("return", new Promise(function (resolve) {
+                    setTimeout(function () {
+                      var lockedUntil = null;
 
-                    if (triggerRecalc) {
-                      var now = new Date();
-                      now.setSeconds(now.getSeconds() + 60);
-                      lockedUntil = now;
-                    }
+                      if (triggerRecalc) {
+                        var now = new Date();
+                        now.setSeconds(now.getSeconds() + 60);
+                        lockedUntil = now;
+                      }
 
-                    resolve({
-                      lockedUntil: lockedUntil
-                    });
-                  }, 3000);
-                }));
+                      resolve({
+                        lockedUntil: lockedUntil
+                      });
+                    }, 3000);
+                  }));
 
-              case 3:
-              case "end":
-                return _context3.stop();
+                case 3:
+                case "end":
+                  return _context3.stop();
+              }
             }
-          }
-        }, _callee3);
-      }));
+          }, _callee3);
+        }));
 
-      return function (_x3) {
-        return _ref7.apply(this, arguments);
-      };
-    }(),
-    fetchImage:
-    /*#__PURE__*/
-    function () {
-      var _ref9 = _asyncToGenerator(
+        return function (_x3) {
+          return _ref7.apply(this, arguments);
+        };
+      }(),
+      fetchImage:
       /*#__PURE__*/
-      _regeneratorRuntime.mark(function _callee4(_ref8) {
-        var imageId;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                imageId = _ref8.imageId;
-                console.log("[SYNC] image ".concat(imageId, " fetching..."));
-                return _context4.abrupt("return", new Promise(function (resolve) {
-                  setTimeout(function () {
-                    console.log("[SYNC] image ".concat(imageId, " fetched"));
-                    resolve({
-                      image: _objectSpread({}, exampleImages[0], {
-                        lockedUntil: null,
-                        id: imageId
-                      })
-                    });
-                  }, 5000);
-                }));
+      function () {
+        var _ref9 = _asyncToGenerator(
+        /*#__PURE__*/
+        _regeneratorRuntime.mark(function _callee4(_ref8) {
+          var imageId;
+          return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+            while (1) {
+              switch (_context4.prev = _context4.next) {
+                case 0:
+                  imageId = _ref8.imageId;
+                  console.log("[SYNC] image ".concat(imageId, " fetching..."));
+                  return _context4.abrupt("return", new Promise(function (resolve) {
+                    setTimeout(function () {
+                      console.log("[SYNC] image ".concat(imageId, " fetched"));
+                      resolve({
+                        image: _objectSpread({}, exampleImages[0], {
+                          lockedUntil: null,
+                          id: imageId
+                        })
+                      });
+                    }, 5000);
+                  }));
 
-              case 3:
-              case "end":
-                return _context4.stop();
+                case 3:
+                case "end":
+                  return _context4.stop();
+              }
             }
-          }
-        }, _callee4);
-      }));
+          }, _callee4);
+        }));
 
-      return function (_x4) {
-        return _ref9.apply(this, arguments);
-      };
-    }()
-  })))));
+        return function (_x4) {
+          return _ref9.apply(this, arguments);
+        };
+      }()
+    })))))
+  );
 }).add("Basic - Allow Comments", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: middlewares,
-    labelImages: true,
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    regionTagList: ["tag1", "tag2", "tag3"],
-    imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    imageTagList: ["tag1", "tag2", "tag3"],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=1",
-      name: "Frame 0036"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=2",
-      name: "Frame 0037"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=3",
-      name: "Frame 0038"
-    }],
-    allowComments: true
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: middlewares,
+      labelImages: true,
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      regionTagList: ["tag1", "tag2", "tag3"],
+      imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      imageTagList: ["tag1", "tag2", "tag3"],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=1",
+        name: "Frame 0036"
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=2",
+        name: "Frame 0037"
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=3",
+        name: "Frame 0038"
+      }],
+      allowComments: true
+    })
+  );
 }).add("Fixed Size Container", function () {
-  return React.createElement("div", {
-    style: {
-      width: 500,
-      height: 500
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        width: 500,
+        height: 500
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
         };
-      };
-    }],
-    labelImages: true,
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    regionTagList: ["tag1", "tag2", "tag3"],
-    imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    imageTagList: ["tag1", "tag2", "tag3"],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=1",
-      name: "Frame 0036"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=2",
-      name: "Frame 0037"
-    }, {
-      src: "https://loremflickr.com/100/100/cars?lock=3",
-      name: "Frame 0038"
-    }]
-  }));
+      }],
+      labelImages: true,
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      regionTagList: ["tag1", "tag2", "tag3"],
+      imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      imageTagList: ["tag1", "tag2", "tag3"],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=1",
+        name: "Frame 0036"
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=2",
+        name: "Frame 0037"
+      }, {
+        src: "https://loremflickr.com/100/100/cars?lock=3",
+        name: "Frame 0038"
+      }]
+    }))
+  );
 }).add("Shrunk Annotator (Test Fullscreen)", function () {
-  return React.createElement("div", {
-    style: {
-      padding: 100
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    regionTagList: ["tag1", "tag2", "tag3"],
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        padding: 100
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      regionTagList: ["tag1", "tag2", "tag3"],
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
         };
-      };
-    }],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  }));
+      }],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    }))
+  );
 }).add("Annotator w/o No Region Labels or Image Labels", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: middlewares,
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: middlewares,
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    })
+  );
 }).add("Annotator with no enabled tools", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    enabledTools: [],
-    showTags: false,
-    middlewares: middlewares,
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      enabledTools: [],
+      showTags: false,
+      middlewares: middlewares,
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    })
+  );
 }).add("Bounding Box Annotator with output to console.log", function () {
-  return React.createElement(Annotator, {
-    onExit: function onExit(out) {
-      window.lastOutput = out;
-      console.log(out);
-    },
-    taskDescription: "## Annotate Hands\nDraw a bounding box around each hand.",
-    enabledTools: ["select", "create-box"],
-    regionClsList: ["Hand", "Face"],
-    regionTagList: ["Open Pinch", "Closed Pinch", "In Frame"],
-    showTags: false,
-    images: [{
-      src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-      name: "Bounding Box Test",
-      regions: []
-    }, {
-      src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
-      name: "Bounding Box Test",
-      regions: []
-    }]
-  });
-}).add("Bounding Box Annotator with allowed area", function () {
-  return React.createElement(Annotator, {
-    taskDescription: "## Annotate Hands\nDraw a bounding box around each hand.",
-    enabledTools: ["select", "create-box"],
-    regionClsList: ["Hand", "Face"],
-    regionTagList: ["Open Pinch", "Closed Pinch", "In Frame"],
-    showTags: false,
-    allowedArea: {
-      x: 0,
-      y: 0.6,
-      w: 0.3,
-      h: 0.3
-    },
-    images: [{
-      src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-      name: "Bounding Box Test",
-      regions: []
-    }]
-  });
-}).add("Car Annotation", function () {
-  return React.createElement(Annotator, {
-    middlewares: middlewares,
-    labelImages: true,
-    regionClsList: ["Car", "Sign", "Construction Barrier"],
-    regionTagList: ["Moving", "Stopped", "Obstacle"],
-    imageClsList: ["On Street", "Sidewalk", "Other"] // imageTagList={["tag1", "tag2", "tag3"]}
-    ,
-    images: [{
-      src: bikeImg1,
-      name: "Frame 03021",
-      regions: [{
-        cls: "Car",
-        color: "hsl(82,100%,50%)",
-        h: 0.45921666772960146,
-        w: 0.3932156342484836,
-        x: 0.6302148980776354,
-        y: 0.5559504689545722,
-        type: "box",
-        id: "8776160642957009",
-        tags: ["Stopped"],
-        highlighted: false,
-        editingLabels: false
-      }, {
-        cls: "Car",
-        color: "hsl(264,100%,50%)",
-        type: "box",
-        id: "885140028730734",
-        tags: ["Moving"],
-        w: 0.2627711048576583,
-        x: 0.20751775748638238,
-        y: 0.5566583219431673,
-        h: 0.268717618171478,
-        highlighted: false,
-        editingLabels: false
-      }, {
-        cls: "Car",
-        color: "hsl(127,100%,50%)",
-        w: 0.033016094117647055,
-        x: 0.5051247779336334,
-        y: 0.5396378545840628,
-        h: 0.03423999999999994,
-        type: "box",
-        id: "5952553512262024",
-        tags: ["Stopped"],
-        highlighted: false,
-        editingLabels: false
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: function onExit(out) {
+        window.lastOutput = out;
+        console.log(out);
+      },
+      taskDescription: "## Annotate Hands\nDraw a bounding box around each hand.",
+      enabledTools: ["select", "create-box"],
+      regionClsList: ["Hand", "Face"],
+      regionTagList: ["Open Pinch", "Closed Pinch", "In Frame"],
+      showTags: false,
+      images: [{
+        src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
+        name: "Bounding Box Test",
+        regions: []
       }, {
-        type: "box",
-        x: 0.7847296794208894,
-        y: 0.3635007199404308,
-        w: 0.04871147880041349,
-        h: 0.10995961095800888,
-        highlighted: true,
-        editingLabels: false,
-        color: "hsl(268,100%,50%)",
-        id: "5647593040225252",
-        cls: "Sign"
+        src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
+        name: "Bounding Box Test",
+        regions: []
       }]
-    }, {
-      src: bikeImg2,
-      name: "Frame 03022",
-      regions: [{
-        type: "box",
-        x: 0.12226982552783494,
-        y: 0.5578947368421052,
-        w: 0.3301518695958121,
-        h: 0.33562583001232194,
-        highlighted: false,
-        editingLabels: false,
-        color: "hsl(171,100%,50%)",
-        id: "014393439034159128",
-        cls: "Car",
-        tags: ["Stopped"]
-      }, {
-        type: "box",
-        x: 0.5018477698901193,
-        y: 0.5954194079501558,
-        w: 0.07194249496837657,
-        h: 0.06826906557009338,
-        highlighted: false,
-        editingLabels: false,
-        color: "hsl(17,100%,50%)",
-        id: "02954614542034717",
-        cls: "Car",
-        tags: ["Moving"]
-      }, {
-        type: "box",
-        x: 0.6483083881082046,
-        y: 0.6217109311709718,
-        w: 0.08786544324705947,
-        h: 0.20450608002345438,
-        highlighted: true,
-        editingLabels: true,
-        color: "hsl(337,100%,50%)",
-        id: "9124138360972984",
-        cls: "Construction Barrier",
-        tags: ["Obstacle"]
-      }, {
-        type: "box",
-        x: 0.7628671305695606,
-        y: 0.6299511028935285,
-        w: 0.12734928166820647,
-        h: 0.2689292407634438,
-        highlighted: false,
-        editingLabels: false,
-        color: "hsl(89,100%,50%)",
-        id: "5960600741979638",
-        cls: "Construction Barrier"
-      }, {
-        type: "box",
-        x: 0.5871362440754417,
-        y: 0.6232091442114366,
-        w: 0.06562102723514573,
-        h: 0.15281773012741662,
-        highlighted: false,
-        editingLabels: false,
-        color: "hsl(326,100%,50%)",
-        id: "7955287536996538",
-        cls: "Construction Barrier"
-      }, {
-        type: "box",
-        x: 0.42943330004934643,
-        y: 0.6054718359824862,
-        w: 0.053210066743122564,
-        h: 0.054984658299147116,
-        highlighted: false,
-        editingLabels: false,
-        color: "hsl(66,100%,50%)",
-        id: "49573139861381166",
-        cls: "Car",
-        tags: ["Stopped"]
+    })
+  );
+}).add("Bounding Box Annotator with allowed area", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      taskDescription: "## Annotate Hands\nDraw a bounding box around each hand.",
+      enabledTools: ["select", "create-box"],
+      regionClsList: ["Hand", "Face"],
+      regionTagList: ["Open Pinch", "Closed Pinch", "In Frame"],
+      showTags: false,
+      allowedArea: {
+        x: 0,
+        y: 0.6,
+        w: 0.3,
+        h: 0.3
+      },
+      images: [{
+        src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
+        name: "Bounding Box Test",
+        regions: []
       }]
-    }],
-    onExit: function onExit(out) {
-      window.lastOutput = out;
-      console.log(JSON.stringify(out.images));
-    }
-  });
-}).add("Annotator blocks scroll from propagating", function () {
-  return React.createElement("div", {
-    style: {
-      height: "200vh"
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    showTags: false,
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
-        };
-      };
-    }],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  }), React.createElement("div", {
-    style: {
-      color: "red"
-    }
-  }, "You shouldn't be able to see this"));
-}).add("Annotator should not expand beyond parent", function () {
-  return React.createElement("div", {
-    style: {
-      width: "100vw",
-      height: "100vh",
-      padding: 100,
-      boxSizing: "border-box"
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    showTags: false,
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
-        };
-      };
-    }],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  }));
-}).add("Video with frames as each image", function () {
-  return React.createElement("div", {
-    style: {
-      width: "100vw",
-      height: "100vh",
-      boxSizing: "border-box"
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    showTags: false,
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
-        };
-      };
-    }],
-    images: [{
-      src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-      frameTime: 0,
-      name: "Frame 1"
-    }, {
-      src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-      frameTime: 4500,
-      name: "Frame 2"
-    }]
-  }));
-}).add("Keyframe video", function () {
-  return React.createElement("div", {
-    style: {
-      width: "100vw",
-      height: "100vh",
-      boxSizing: "border-box"
-    }
-  }, React.createElement(Annotator, {
-    onExit: function onExit() {
-      var _console;
-
-      (_console = console).log.apply(_console, arguments);
-
-      actionAddon("onExit").apply(void 0, arguments);
-    },
-    showTags: true,
-    videoSrc: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-    videoTime: 1000,
-    keyframes: {
-      0: {
+    })
+  );
+}).add("Car Annotation", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      middlewares: middlewares,
+      labelImages: true,
+      regionClsList: ["Car", "Sign", "Construction Barrier"],
+      regionTagList: ["Moving", "Stopped", "Obstacle"],
+      imageClsList: ["On Street", "Sidewalk", "Other"] // imageTagList={["tag1", "tag2", "tag3"]}
+      ,
+      images: [{
+        src: bikeImg1,
+        name: "Frame 03021",
         regions: [{
-          type: "point",
-          x: 0.1608187134502924,
-          y: 0.5769980506822612,
-          highlighted: true,
-          editingLabels: false,
-          color: "hsl(238,100%,50%)",
-          id: "9995495728521284"
+          cls: "Car",
+          color: "hsl(82,100%,50%)",
+          h: 0.45921666772960146,
+          w: 0.3932156342484836,
+          x: 0.6302148980776354,
+          y: 0.5559504689545722,
+          type: "box",
+          id: "8776160642957009",
+          tags: ["Stopped"],
+          highlighted: false,
+          editingLabels: false
         }, {
+          cls: "Car",
+          color: "hsl(264,100%,50%)",
           type: "box",
-          x: 0.089171974522293,
-          y: 0.36801132342533616,
-          w: 0.30573248407643316,
-          h: 0.4170794998820476,
+          id: "885140028730734",
+          tags: ["Moving"],
+          w: 0.2627711048576583,
+          x: 0.20751775748638238,
+          y: 0.5566583219431673,
+          h: 0.268717618171478,
+          highlighted: false,
+          editingLabels: false
+        }, {
+          cls: "Car",
+          color: "hsl(127,100%,50%)",
+          w: 0.033016094117647055,
+          x: 0.5051247779336334,
+          y: 0.5396378545840628,
+          h: 0.03423999999999994,
+          type: "box",
+          id: "5952553512262024",
+          tags: ["Stopped"],
+          highlighted: false,
+          editingLabels: false
+        }, {
+          type: "box",
+          x: 0.7847296794208894,
+          y: 0.3635007199404308,
+          w: 0.04871147880041349,
+          h: 0.10995961095800888,
           highlighted: true,
           editingLabels: false,
-          color: "hsl(263,100%,50%)",
-          id: "04858393322065635"
+          color: "hsl(268,100%,50%)",
+          id: "5647593040225252",
+          cls: "Sign"
         }]
-      },
-      3333: {
+      }, {
+        src: bikeImg2,
+        name: "Frame 03022",
         regions: [{
-          type: "point",
-          x: 0.1608187134502924,
-          y: 0.5769980506822612,
-          highlighted: true,
+          type: "box",
+          x: 0.12226982552783494,
+          y: 0.5578947368421052,
+          w: 0.3301518695958121,
+          h: 0.33562583001232194,
+          highlighted: false,
           editingLabels: false,
-          color: "hsl(238,100%,50%)",
-          id: "9995495728521284"
+          color: "hsl(171,100%,50%)",
+          id: "014393439034159128",
+          cls: "Car",
+          tags: ["Stopped"]
         }, {
           type: "box",
-          x: 0.14861995753715496,
-          y: 0.0934182590233546,
-          w: 0.3163481953290871,
-          h: 0.7596131163010142,
+          x: 0.5018477698901193,
+          y: 0.5954194079501558,
+          w: 0.07194249496837657,
+          h: 0.06826906557009338,
+          highlighted: false,
+          editingLabels: false,
+          color: "hsl(17,100%,50%)",
+          id: "02954614542034717",
+          cls: "Car",
+          tags: ["Moving"]
+        }, {
+          type: "box",
+          x: 0.6483083881082046,
+          y: 0.6217109311709718,
+          w: 0.08786544324705947,
+          h: 0.20450608002345438,
           highlighted: true,
+          editingLabels: true,
+          color: "hsl(337,100%,50%)",
+          id: "9124138360972984",
+          cls: "Construction Barrier",
+          tags: ["Obstacle"]
+        }, {
+          type: "box",
+          x: 0.7628671305695606,
+          y: 0.6299511028935285,
+          w: 0.12734928166820647,
+          h: 0.2689292407634438,
+          highlighted: false,
+          editingLabels: false,
+          color: "hsl(89,100%,50%)",
+          id: "5960600741979638",
+          cls: "Construction Barrier"
+        }, {
+          type: "box",
+          x: 0.5871362440754417,
+          y: 0.6232091442114366,
+          w: 0.06562102723514573,
+          h: 0.15281773012741662,
+          highlighted: false,
           editingLabels: false,
-          color: "hsl(263,100%,50%)",
-          id: "04858393322065635"
+          color: "hsl(326,100%,50%)",
+          id: "7955287536996538",
+          cls: "Construction Barrier"
+        }, {
+          type: "box",
+          x: 0.42943330004934643,
+          y: 0.6054718359824862,
+          w: 0.053210066743122564,
+          h: 0.054984658299147116,
+          highlighted: false,
+          editingLabels: false,
+          color: "hsl(66,100%,50%)",
+          id: "49573139861381166",
+          cls: "Car",
+          tags: ["Stopped"]
         }]
+      }],
+      onExit: function onExit(out) {
+        window.lastOutput = out;
+        console.log(JSON.stringify(out.images));
+      }
+    })
+  );
+}).add("Annotator blocks scroll from propagating", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        height: "200vh"
       }
-    }
-  }));
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      showTags: false,
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
+        };
+      }],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    }),
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        color: "red"
+      }
+    }, "You shouldn't be able to see this"))
+  );
+}).add("Annotator should not expand beyond parent", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        width: "100vw",
+        height: "100vh",
+        padding: 100,
+        boxSizing: "border-box"
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      showTags: false,
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
+        };
+      }],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    }))
+  );
+}).add("Video with frames as each image", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        width: "100vw",
+        height: "100vh",
+        boxSizing: "border-box"
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      showTags: false,
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
+        };
+      }],
+      images: [{
+        src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+        frameTime: 0,
+        name: "Frame 1"
+      }, {
+        src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+        frameTime: 4500,
+        name: "Frame 2"
+      }]
+    }))
+  );
+}).add("Keyframe video", function () {
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        width: "100vw",
+        height: "100vh",
+        boxSizing: "border-box"
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: function onExit() {
+        var _console;
+
+        (_console = console).log.apply(_console, arguments);
+
+        actionAddon("onExit").apply(void 0, arguments);
+      },
+      showTags: true,
+      videoSrc: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
+      videoTime: 1000,
+      keyframes: {
+        0: {
+          regions: [{
+            type: "point",
+            x: 0.1608187134502924,
+            y: 0.5769980506822612,
+            highlighted: true,
+            editingLabels: false,
+            color: "hsl(238,100%,50%)",
+            id: "9995495728521284"
+          }, {
+            type: "box",
+            x: 0.089171974522293,
+            y: 0.36801132342533616,
+            w: 0.30573248407643316,
+            h: 0.4170794998820476,
+            highlighted: true,
+            editingLabels: false,
+            color: "hsl(263,100%,50%)",
+            id: "04858393322065635"
+          }]
+        },
+        3333: {
+          regions: [{
+            type: "point",
+            x: 0.1608187134502924,
+            y: 0.5769980506822612,
+            highlighted: true,
+            editingLabels: false,
+            color: "hsl(238,100%,50%)",
+            id: "9995495728521284"
+          }, {
+            type: "box",
+            x: 0.14861995753715496,
+            y: 0.0934182590233546,
+            w: 0.3163481953290871,
+            h: 0.7596131163010142,
+            highlighted: true,
+            editingLabels: false,
+            color: "hsl(263,100%,50%)",
+            id: "04858393322065635"
+          }]
+        }
+      }
+    }))
+  );
 }).add("Override Next/Prev Button Handling", function () {
   var images = [exampleImage, "https://loremflickr.com/100/100/cars?lock=1", "https://loremflickr.com/100/100/cars?lock=2"];
 
@@ -907,31 +980,34 @@ storiesOf("Annotator", module).add("Basic", function () {
       selectedImageIndex = _useState2[0],
       changeSelectedImageIndex = _useState2[1];
 
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    onNextImage: function onNextImage() {
-      actionAddon("onNextImage")();
-      changeSelectedImageIndex((selectedImageIndex + 1) % 3);
-    },
-    onPrevImage: function onPrevImage() {
-      actionAddon("onPrevImage")();
-      changeSelectedImageIndex((selectedImageIndex - 1 + 3) % 3);
-    },
-    labelImages: true,
-    selectedImage: images[selectedImageIndex],
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk"
-    }, {
-      src: images[1],
-      name: "Frame 0036"
-    }, {
-      src: images[2],
-      name: "Frame 0037"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      onNextImage: function onNextImage() {
+        actionAddon("onNextImage")();
+        changeSelectedImageIndex((selectedImageIndex + 1) % 3);
+      },
+      onPrevImage: function onPrevImage() {
+        actionAddon("onPrevImage")();
+        changeSelectedImageIndex((selectedImageIndex - 1 + 3) % 3);
+      },
+      labelImages: true,
+      selectedImage: images[selectedImageIndex],
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk"
+      }, {
+        src: images[1],
+        name: "Frame 0036"
+      }, {
+        src: images[2],
+        name: "Frame 0037"
+      }]
+    })
+  );
 }).add("Override RegionEditLabel", function () {
   var images = [exampleImage, "https://loremflickr.com/100/100/cars?lock=1", "https://loremflickr.com/100/100/cars?lock=2"];
 
@@ -942,147 +1018,186 @@ storiesOf("Annotator", module).add("Basic", function () {
         onChange = _ref10.onChange,
         onClose = _ref10.onClose,
         onOpen = _ref10.onOpen;
-    return React.createElement("div", {
-      style: {
-        backgroundColor: "white"
-      }
-    }, "I'm the closed part", React.createElement("div", {
-      style: {
-        display: editing ? "block" : "none"
-      }
-    }, "I'm the part that shows when it's being edited!", React.createElement("button", {
-      onClick: function onClick() {
-        return onDelete(region);
-      }
-    }, "Delete This Region"), React.createElement("button", {
-      onClick: function onClick() {
-        return onChange(_objectSpread({}, region, {
-          cls: "awesome-value"
-        }));
-      }
-    }, "Set Classification to \"awesome-value\""), React.createElement("button", {
-      onClick: function onClick() {
-        return onClose(region);
-      }
-    }, "Close the edit mode")));
+    return (
+      /*#__PURE__*/
+      React.createElement("div", {
+        style: {
+          backgroundColor: "white"
+        }
+      }, "I'm the closed part",
+      /*#__PURE__*/
+      React.createElement("div", {
+        style: {
+          display: editing ? "block" : "none"
+        }
+      }, "I'm the part that shows when it's being edited!",
+      /*#__PURE__*/
+      React.createElement("button", {
+        onClick: function onClick() {
+          return onDelete(region);
+        }
+      }, "Delete This Region"),
+      /*#__PURE__*/
+      React.createElement("button", {
+        onClick: function onClick() {
+          return onChange(_objectSpread({}, region, {
+            cls: "awesome-value"
+          }));
+        }
+      }, "Set Classification to \"awesome-value\""),
+      /*#__PURE__*/
+      React.createElement("button", {
+        onClick: function onClick() {
+          return onClose(region);
+        }
+      }, "Close the edit mode")))
+    );
   };
 
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    labelImages: true,
-    selectedImage: images[0],
-    RegionEditLabel: NewRegionEditLabel,
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk"
-    }, {
-      src: images[1],
-      name: "Frame 0036"
-    }, {
-      src: images[2],
-      name: "Frame 0037"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      labelImages: true,
+      selectedImage: images[0],
+      RegionEditLabel: NewRegionEditLabel,
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk"
+      }, {
+        src: images[1],
+        name: "Frame 0036"
+      }, {
+        src: images[2],
+        name: "Frame 0037"
+      }]
+    })
+  );
 }).add("Two on sample page w/ hotkeys", function () {
-  return React.createElement(HotKeys, {
-    keyMap: defaultKeyMap
-  }, React.createElement("div", null, React.createElement("div", {
-    style: {
-      height: 600
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
+  return (
+    /*#__PURE__*/
+    React.createElement(HotKeys, {
+      keyMap: defaultKeyMap
+    },
+    /*#__PURE__*/
+    React.createElement("div", null,
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        height: 600
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      imageClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
         };
-      };
-    }],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  })), React.createElement("div", {
-    style: {
-      height: 600
-    }
-  }, React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: [function (store) {
-      return function (next) {
-        return function (action) {
-          actionAddon(action.type)(action);
-          return next(action);
+      }],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    })),
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        height: 600
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: [function (store) {
+        return function (next) {
+          return function (action) {
+            actionAddon(action.type)(action);
+            return next(action);
+          };
         };
-      };
-    }],
-    images: [{
-      src: exampleImage,
-      name: "Seve's Desk",
-      regions: testRegions
-    }]
-  }))));
+      }],
+      images: [{
+        src: exampleImage,
+        name: "Seve's Desk",
+        regions: testRegions
+      }]
+    }))))
+  );
 }).add("CORs Error (Pixel Segmentation)", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: middlewares,
-    labelImages: true,
-    fullImageSegmentationMode: true,
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    images: [{
-      src: "https://placebear.com/200/300",
-      name: "Frame 0036"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: middlewares,
+      labelImages: true,
+      fullImageSegmentationMode: true,
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      images: [{
+        src: "https://placebear.com/200/300",
+        name: "Frame 0036"
+      }]
+    })
+  );
 }).add("Modify Allowed Area", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    middlewares: middlewares,
-    labelImages: true,
-    fullImageSegmentationMode: true,
-    allowedArea: {
-      x: 0,
-      y: 0.6,
-      w: 0.3,
-      h: 0.3
-    },
-    enabledTools: ["modify-allowed-area"],
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    images: [{
-      src: exampleImage,
-      name: "Frame 0036"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      middlewares: middlewares,
+      labelImages: true,
+      fullImageSegmentationMode: true,
+      allowedArea: {
+        x: 0,
+        y: 0.6,
+        w: 0.3,
+        h: 0.3
+      },
+      enabledTools: ["modify-allowed-area"],
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      images: [{
+        src: exampleImage,
+        name: "Frame 0036"
+      }]
+    })
+  );
 }).add("Hide Next, Hide Header Text", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    labelImages: true,
-    hideNext: true,
-    hideHeaderText: true,
-    fullImageSegmentationMode: true,
-    enabledTools: ["modify-allowed-area"],
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    images: [{
-      src: exampleImage,
-      name: "Frame 0036"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      labelImages: true,
+      hideNext: true,
+      hideHeaderText: true,
+      fullImageSegmentationMode: true,
+      enabledTools: ["modify-allowed-area"],
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      images: [{
+        src: exampleImage,
+        name: "Frame 0036"
+      }]
+    })
+  );
 }).add("Hide Header", function () {
-  return React.createElement(Annotator, {
-    onExit: actionAddon("onExit"),
-    labelImages: true,
-    hideHeader: true,
-    fullImageSegmentationMode: true,
-    enabledTools: ["modify-allowed-area"],
-    regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
-    images: [{
-      src: exampleImage,
-      name: "Frame 0036"
-    }]
-  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Annotator, {
+      onExit: actionAddon("onExit"),
+      labelImages: true,
+      hideHeader: true,
+      fullImageSegmentationMode: true,
+      enabledTools: ["modify-allowed-area"],
+      regionClsList: ["Alpha", "Beta", "Charlie", "Delta"],
+      images: [{
+        src: exampleImage,
+        name: "Frame 0036"
+      }]
+    })
+  );
 });