@searpent/react-image-annotate 2.0.75 → 2.0.77

package/src/Annotator/poses.story.js

@@ -0,0 +1,150 @@
+// @flow
+
+import React, { useState } from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action as actionAddon } from "@storybook/addon-actions"
+import dancingManImage from "../ImageCanvas/dancing-man.story.jpg"
+import dabKeyframes from "./dab-keyframes.story.json"
+import Annotator from "./"
+
+const dancingManVideo =
+  "https://s3.us-east-1.amazonaws.com/asset.workaround.online/developer-samples/how-to-dab.mp4"
+
+const middlewares = [
+  (store) => (next) => (action) => {
+    actionAddon(action.type)(action)
+    console.log(action)
+    return next(action)
+  },
+]
+
+storiesOf("Annotator (Poses)", module)
+  .add("Image", () => (
+    <Annotator
+      onExit={actionAddon("onExit")}
+      middlewares={middlewares}
+      labelImages
+      enabledTools={["create-keypoints"]}
+      keypointDefinitions={{
+        human: {
+          connections: [
+            ["head", "sternum"],
+            ["sternum", "leftElbow"],
+            ["sternum", "rightElbow"],
+          ],
+          landmarks: {
+            head: {
+              label: "Head",
+              color: "#f00",
+              defaultPosition: [0, -0.05],
+            },
+            sternum: {
+              label: "Torso",
+              color: "#0f0",
+              defaultPosition: [0, 0],
+            },
+            leftElbow: {
+              label: "Left Elbow",
+              color: "#00f",
+              defaultPosition: [-0.05, 0],
+            },
+            rightElbow: {
+              label: "Right Elbow",
+              color: "#00f",
+              defaultPosition: [0.05, 0],
+            },
+          },
+        },
+      }}
+      images={[
+        {
+          src: dancingManImage,
+          name: "Dancing Man",
+          regions: [
+            {
+              type: "keypoints",
+              id: "keypoints1",
+              keypointsDefinitionId: "human",
+              highlighted: true,
+              points: {
+                head: { x: 0.54, y: 0.2 },
+                sternum: { x: 0.57, y: 0.3 },
+                leftElbow: { x: 0.4, y: 0.39 },
+                rightElbow: { x: 0.7, y: 0.32 },
+              },
+              visible: true,
+            },
+          ],
+        },
+      ]}
+    />
+  ))
+  .add("Video", () => (
+    <Annotator
+      onExit={(...props) => {
+        actionAddon("onExit")(...props)
+        window.testPropsSavePlease = props
+        console.log(...props)
+      }}
+      labelImages
+      enabledTools={["create-box", "create-keypoints"]}
+      videoSrc={dancingManVideo}
+      keypointDefinitions={{
+        human: {
+          connections: [
+            ["head", "sternum"],
+            ["sternum", "leftShoulder"],
+            ["leftShoulder", "leftElbow"],
+            ["leftElbow", "leftHand"],
+            ["sternum", "rightShoulder"],
+            ["rightShoulder", "rightElbow"],
+            ["rightElbow", "rightHand"],
+          ],
+          landmarks: {
+            head: {
+              label: "Head",
+              color: "#f00",
+              defaultPosition: [0, -0.05],
+            },
+            sternum: {
+              label: "Torso",
+              color: "#0f0",
+              defaultPosition: [0, 0],
+            },
+            leftShoulder: {
+              label: "Left Shoulder",
+              color: "#00f",
+              defaultPosition: [-0.05, 0],
+            },
+            leftHand: {
+              label: "Left Hand",
+              color: "#00f",
+              defaultPosition: [-0.05, 0.05],
+            },
+            rightShoulder: {
+              label: "Right Shoulder",
+              color: "#00f",
+              defaultPosition: [0.05, 0],
+            },
+            leftElbow: {
+              label: "Left Elbow",
+              color: "#00f",
+              defaultPosition: [-0.08, 0.02],
+            },
+            rightElbow: {
+              label: "Right Elbow",
+              color: "#00f",
+              defaultPosition: [0.08, 0.02],
+            },
+            rightHand: {
+              label: "Right Hand",
+              color: "#00f",
+              defaultPosition: [0.05, 0.05],
+            },
+          },
+        },
+      }}
+      keyframes={dabKeyframes}
+    />
+  ))

package/src/Annotator/reducers/combine-reducers.js

@@ -0,0 +1,7 @@
+export default (...reducers) =>
+  (state, action) => {
+    for (const reducer of reducers) {
+      state = reducer(state, action)
+    }
+    return state
+  }

package/src/Annotator/reducers/convert-expanding-line-to-polygon.js

@@ -0,0 +1,53 @@
+// @flow
+
+function clamp(num, min, max) {
+  return num <= min ? min : num >= max ? max : num
+}
+
+export default (expandingLine) => {
+  const expandingWidth = expandingLine.expandingWidth || 0.005
+  const pointPairs = expandingLine.points.map(({ x, y, angle, width }, i) => {
+    if (!angle) {
+      const n =
+        expandingLine.points[clamp(i + 1, 0, expandingLine.points.length - 1)]
+      const p =
+        expandingLine.points[clamp(i - 1, 0, expandingLine.points.length - 1)]
+      angle = Math.atan2(p.x - n.x, p.y - n.y) + Math.PI / 2
+    }
+    const dx = (Math.sin(angle) * (width || expandingWidth)) / 2
+    const dy = (Math.cos(angle) * (width || expandingWidth)) / 2
+    return [
+      { x: x + dx, y: y + dy },
+      { x: x - dx, y: y - dy },
+    ]
+  })
+  const firstSection = pointPairs.map(([p1, p2]) => p1)
+  const secondSection = pointPairs.map(([p1, p2]) => p2).asMutable()
+  secondSection.reverse()
+
+  const newPoints = firstSection.concat(secondSection).map(({ x, y }) => [x, y])
+
+  return {
+    ...expandingLine,
+    type: "polygon",
+    open: false,
+    points: newPoints,
+    unfinished: undefined,
+    candidatePoint: undefined,
+  }
+
+  // let { expandingWidth = 0.005, points } = region
+  // expandingWidth = points.slice(-1)[0].width || expandingWidth
+  // const lastPoint = points.slice(-1)[0]
+  // return (
+  //   <>
+  //     <polygon
+  //       points={
+  //         .map((p) => `${p.x * iw} ${p.y * ih}`)
+  //         .join(" ")}
+  // return {
+  //   ...expandingLine,
+  //   unfinished: undefined,
+  //   candidatePoint: undefined,
+  // }
+}

package/{Annotator → src/Annotator}/reducers/fix-twisted.js

@@ -1,4 +1,6 @@
-export default (function (pointsWithAngles) {
+// @flow
+
+export default (pointsWithAngles) => {
   // Adjacent angles should not have an angular distance of more than Math.PI
-  return pointsWithAngles;
-});
+  return pointsWithAngles
+}