annotation-toolkit v1.1.2 - Adds the MovableRect component (#478)

* Fix bug where actions menu header was showing even when there were no gathered actions

* Layers actions menu enhancements

* Add a better json viewer for the DebugPanel. Major enhancements

* prepare v1.1.0 of annotation-toolkit

* Merge in extract-css-plugin fix, add intent prop to layerButtons and videoPlayerProps to VideoPlayer

* Updates

* Add support for screenshots for the VideoPlayer component

* Update layer path

* Remove accidentally added folder

* Have the video player auto-detect an id if none is provided. Content panel now passes down layer info via context (LayerContext)

* release notes fix

* Add support for MovableRects within the annotation-toolkit

* Allow MovableRect to use LayerContext to deduce the layerId for state

* Add a few TODOs to the vNext release notes

* add more todos to the release notes

* Fix alwaysOnLayers map bugfix

* Version bump

* Update release otes. Add getLabel and VideoPlayer click toggling

* Hide unsafe from debug panel. beta version bump

* Add docs for MovableRect

* Change getTs to getFrame and remove scaling, offloading to client. Use frameNumber instead of originalFrameNumber for preload

* update todo in release notes

* Add getInterpolatedFrames helper method

* Add higher CSS specifity for movable frame, rename .frame to .movable-rect-frame

* Make css styles more specific

* Update react peer deps for mephisto UI packages

* update style names for RRRR to also scope, fixing a major bug for MovableRect in 1.1.2-beta.2. version bump annotation-toolkit and global-context-store to include updated peerdeps

* Release notes formatting

* Update README docs

packages/annotation-toolkit/README.md

@@ -88,7 +88,7 @@ A full list of the properties of a `<Layer />` are as follows:
 - `icon`: `string` A `@blueprintjs/icons` name. Shows up on the left hand side. Highly recommended to specify one.
 - `secondaryIcon`: `string` A `@blueprintjs/icons` name. Shows up on the right hand side. Optional.
 - `component` - `render prop` The component to render in the content pane when this layer is selected.
-- `actions` - `React.Node` Specify what actions to have show up in the Actions pane using `@blueprintjs/core`'s `<MenuItem />` components.
+- `actions` - `() => React.Node` Specify what actions to have show up in the Actions pane using `@blueprintjs/core`'s `<MenuItem />` components.
 - `noPointerEvents` - `bool` Whether this layer should accept pointer events. You may want to use this when you have multiple layers that can be active at the same time to avoid them competing with each other for clicks. For example a Bounding Box layer on top of a VideoPlayer layer may want to set this on so that click events can passthrough to the underlying VideoPlayer component.
 - `alwaysOn` - `bool` Always show this layer, even if it's not selected.
 - `onWithGroup` - `bool` Always show this layer if it, or one of it's sibling, or it's parent is selected.
@@ -123,3 +123,18 @@ Updates it's data state with:
 - `detectedSize`: `[width, height]`
 - `playedSeconds`
 - `playing`: `boolean`
+
+### `<MovableRect />`
+
+- `id` - The layer id where state will be kept track of under a `kf` data prop.
+- `defaultBox` - Where to place the box initially
+- `getFrame` - A getter, returns the current frameNumber to render the frame at
+- `preload` - Optional, expects an array of objects of form `{x, y, width, height, frameNumber}`.
+- `document` - Optional, if you want to use a different document, e.g. within an iframe context
+- `getLabel` - Optional, a getter, returns string text for a label to add to the bbox
+
+TODO: Add the following additional optional props, all a callback receiving the frame #:
+- `onNextKeyframe`
+- `onPreviousKeyframe`
+- `onFirstKeyframe`
+- `onLastKeyframe`

packages/annotation-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "annotation-toolkit",
-  "version": "1.1.1",
+  "version": "1.1.2-beta.3",
   "description": "",
   "main": "build/bundle.js",
   "scripts": {
@@ -49,8 +49,12 @@
     "@blueprintjs/core": "^3.42.0",
     "@blueprintjs/icons": "^3.26.0",
     "global-context-store": "^1.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.13.1 || 17 || 18",
+    "react-dom": "^16.13.1 || 17 || 18",
     "react-player": "^2.9.0"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "keyframes": "^2.3.0"
   }
 }

packages/annotation-toolkit/release-notes.md

@@ -1,3 +1,18 @@
+# v1.1.2-beta
+- **NEW** Adds in the `<MovableRect />` component with built-in linear interpolation between keyframes. Usage:
+   ```js
+   <MovableRect defaultBox={[50, 200, 100, 100]} getFrame={() => {
+        return currentFrameNumber;
+    }} />
+    ```
+- **ENHANCEMENT** - VideoPlayer playing can be toggled by clicking on the video.
+- **ENHANCEMENT** - Add a getLabel property to MovableRect that adds a label to the box.
+- **NEW** - Add `getInterpolatedFrames(allKeyframes)` helper to convert keyframes into interpolated frames, frame-by-frame. Returns array of: `{frame, value: [x, y, width, height]}`
+
+---
+
+- **BREAKING** - Layer actions now require a render prop instead of React node.
+
 # v1.1.1
 - **NEW** Support for generating `<VideoPlayer />` screenshots via the requests queue. Usage:
   ```js

packages/annotation-toolkit/src/helpers.js

@@ -1,6 +1,6 @@
 export const frameToMs = (frame, fps) => (frame * 1000) / fps;
 
-export const msToFrame = (ms, fps) => Math.round((ms * fps) / 1000);
+export const msToFrame = (ms, fps) => Math.floor((ms * fps) / 1000);
 
 // Given a layerId, returns the conventional nested state path for the
 // requests array for a layer. The requests array is used to

packages/annotation-toolkit/src/index.css

@@ -100,3 +100,32 @@ body,
 .debug-panel .bp3-tab-panel {
   height: 100%;
 }
+
+/** vvvv Custom styles for MovableRect */
+div.movable-rect-frame div.rect {
+  border-width: 2px;
+  opacity: 1;
+  background-color: rgba(235, 86, 72, 0.3);
+  border-style: dashed;
+}
+
+div.movable-rect-frame.keyframe div.rect {
+  /* border: 2px solid cyan; */
+  border-style: solid;
+}
+
+div.movable-rect-frame.selected div.rect {
+  /* opacity: 1; */
+  background-color: transparent;
+  border-color: cyan;
+}
+
+div.movable-rect-frame.selected div.square {
+  border: 2px solid cyan;
+}
+
+div.movable-rect-frame.immovable .square {
+  border: 2px solid transparent;
+  background: none;
+}
+/** ^^^^ Custom styles for MovableRect */

packages/annotation-toolkit/src/index.js

@@ -3,9 +3,20 @@ import AppShell from "./AppShell";
 import Layer, { LayerContext } from "./layers/Layer";
 import BBoxFrame from "./layers/BBoxFrame";
 import VideoPlayer from "./layers/VideoPlayer";
+import MovableRect, { getInterpolatedFrames } from "./layers/MovableRect";
 
 import "./react-mosaic-component.css";
 import "./index.css";
+import "./layers/RRRR/react-rect.css";
+
+export {
+  AppShell,
+  Layer,
+  LayerContext,
+  BBoxFrame,
+  VideoPlayer,
+  MovableRect,
+  getInterpolatedFrames,
+};
 
-export { AppShell, Layer, BBoxFrame, VideoPlayer, LayerContext };
 export * from "./helpers";