@searpent/react-image-annotate 2.0.75 → 2.0.76

package/src/ImageCanvas/index.story.js

@@ -0,0 +1,314 @@
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+
+import ImageCanvas from "./"
+import exampleMask from "./mouse_mask.story.png"
+import exampleImage from "./seves_desk.story.jpg"
+import dancingManImage from "./dancing-man.story.jpg"
+
+export const testRegions = [
+  {
+    type: "point",
+    id: "point1",
+    cls: "Paper",
+    highlighted: true,
+    x: 0.8,
+    y: 0.5,
+    visible: true,
+    color: "#f00",
+  },
+  {
+    type: "point",
+    id: "point2",
+    cls: "Dude's Head",
+    tags: ["human", "head", "male"],
+    x: 0.1,
+    y: 0.15,
+    visible: true,
+    color: "#0F0",
+  },
+  {
+    type: "box",
+    id: "box1",
+    cls: "Business Card",
+    highlighted: true,
+    x: 0.315,
+    y: 0.63,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff0",
+  },
+  {
+    type: "polygon",
+    id: "polygon1",
+    cls: "Laptop",
+    tags: ["Electronic Device"],
+    editingLabels: true,
+    highlighted: true,
+    points: [
+      [0.4019, 0.5065],
+      [0.407, 0.5895],
+      [0.4157, 0.6801],
+      [0.6579, 0.656],
+      [0.6115, 0.5674],
+      [0.5792, 0.4895],
+    ],
+    visible: true,
+    color: "#f0f",
+  },
+  {
+    type: "polygon",
+    id: "polygon2",
+    open: true,
+    points: [
+      [0.1201, 0.5987],
+      [0.0674, 0.7063],
+      [0.0726, 0.7477],
+      [0.2132, 0.7311],
+    ],
+    visible: true,
+    color: "#00f",
+  },
+  {
+    type: "pixel",
+    id: "pixel1",
+    cls: "Mouse",
+    tags: ["Electronic Device"],
+    sx: 0.7433,
+    sy: 0.5847,
+    w: 0.83 - 0.7433,
+    h: 0.67 - 0.5847,
+    src: exampleMask,
+    visible: true,
+    color: "#00f",
+  },
+]
+
+export const testRegionsBoxes = [
+  {
+    type: "box",
+    id: "box1",
+    cls: "title",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.315,
+    y: 0.63,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff4133",
+    groupColor: "#2436ff",
+    groupId: "alpha",
+    text: "first box text"
+  },
+  {
+    type: "box",
+    id: "box2",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.63,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff9924",
+    groupColor: "#2436ff",
+    groupId: "alpha",
+    text: "second box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta1",
+    cls: "title",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.315,
+    y: 0.43,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff4133",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "third box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta2",
+    cls: "subtitle",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.43,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff9924",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "fourth box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta3",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.53,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#007efc",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "fifth box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta4",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.73,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#007efc",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "sixth box text"
+  },
+
+]
+
+const events = {
+  // Ignore common mouse movements, they fill the action log
+  onMouseMove: () => null, //action("onMouseMove"),
+  onMouseDown: () => null, //action("onMouseDown"),
+  onMouseUp: () => null, //action("onMouseUp"),
+
+  onChangeRegion: action("onChangeRegion"),
+  onBeginRegionEdit: action("onBeginRegionEdit"),
+  onCloseRegionEdit: action("onCloseRegionEdit"),
+
+  onSelectRegion: action("onSelectRegion"),
+
+  onBeginBoxTransform: action("onBeginBoxTransform"),
+
+  onBeginMovePolygonPoint: action("onBeginMovePolygonPoint"),
+  onAddPolygonPoint: action("onAddPolygonPoint"),
+  onClosePolygon: action("onClosePolygon"),
+
+  onBeginMoveKeypoint: action("onBeginMoveKeypoint"),
+
+  onBeginMovePoint: action("onBeginMovePoint"),
+  onDeleteRegion: action("onDeleteRegion"),
+}
+
+storiesOf("ImageCanvas", module)
+  .add("Basic", () => (
+    <ImageCanvas
+      regions={testRegions}
+      imageSrc={exampleImage}
+      showTags
+      {...events}
+    />
+  ))
+  .add("Zoom Tool Selected", () => (
+    <ImageCanvas
+      showTags
+      regions={testRegions}
+      imageSrc={exampleImage}
+      zoomWithPrimary
+      {...events}
+    />
+  ))
+  .add("Allowed Area", () => (
+    <ImageCanvas
+      showTags
+      regions={[]}
+      imageSrc={exampleImage}
+      zoomWithPrimary
+      allowedArea={{ x: 0.25, y: 0.25, w: 0.5, h: 0.5 }}
+      {...events}
+    />
+  ))
+  .add("Allowed Area (2)", () => (
+    <ImageCanvas
+      showTags
+      regions={[]}
+      imageSrc={exampleImage}
+      zoomWithPrimary
+      allowedArea={{ x: 0.6, y: 0.6, w: 0.2, h: 0.2 }}
+      {...events}
+    />
+  ))
+  .add("Modify Allowed Area", () => (
+    <ImageCanvas
+      showTags
+      regions={[]}
+      imageSrc={exampleImage}
+      modifyingAllowedArea
+      allowedArea={{ x: 0.6, y: 0.6, w: 0.2, h: 0.2 }}
+      {...events}
+    />
+  ))
+  .add("Poses", () => (
+    <ImageCanvas
+      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],
+            },
+          },
+        },
+      }}
+      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,
+        },
+      ]}
+      imageSrc={dancingManImage}
+      showTags
+      {...events}
+    />
+  ))

package/src/ImageCanvas/region-tools.js

@@ -0,0 +1,171 @@
+// @flow
+
+export type BaseRegion = {
+  id: string | number,
+  cls?: string,
+  locked?: boolean,
+  visible?: boolean,
+  color: string,
+  editingLabels?: boolean,
+  highlighted?: boolean,
+  tags?: Array<string>,
+}
+
+export type Point = {|
+  ...$Exact<BaseRegion>,
+  type: "point",
+  x: number,
+  y: number,
+|}
+
+export type PixelRegion =
+  | {|
+      ...$Exact<BaseRegion>,
+      type: "pixel",
+      sx: number,
+      sy: number,
+      w: number,
+      h: number,
+      src: string,
+    |}
+  | {|
+      ...$Exact<BaseRegion>,
+      type: "pixel",
+      points: Array<[number, number]>,
+    |}
+export type Box = {|
+  ...$Exact<BaseRegion>,
+  type: "box",
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+|}
+
+export type Polygon = {|
+  ...$Exact<BaseRegion>,
+  type: "polygon",
+  open?: boolean,
+  points: Array<[number, number]>,
+|}
+
+export type Line = {|
+  ...$Exact<BaseRegion>,
+  type: "line",
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+|}
+
+export type ExpandingLine = {|
+  ...$Exact<BaseRegion>,
+  type: "expanding-line",
+  points: Array<{ x: number, y: number, angle: number, width: number }>,
+|}
+
+export type KeypointDefinition = {|
+  label: string,
+  color: string,
+  defaultPosition: [number, number],
+|}
+
+export type KeypointId = string
+
+export type KeypointsDefinition = {|
+  [id: string]: {
+    connections: Array<[KeypointId, KeypointId]>,
+    landmarks: {
+      [KeypointId]: KeypointDefinition,
+    },
+  },
+|}
+
+export type Keypoints = {|
+  ...$Exact<BaseRegion>,
+  type: "keypoints",
+  keypointsDefinitionId: string,
+  points: {
+    [string]: { x: number, y: number },
+  },
+|}
+
+export type Region =
+  | Point
+  | PixelRegion
+  | Box
+  | Polygon
+  | ExpandingLine
+  | Keypoints
+
+export const getEnclosingBox = (region: Region) => {
+  switch (region.type) {
+    case "polygon": {
+      const box = {
+        x: Math.min(...region.points.map(([x, y]) => x)),
+        y: Math.min(...region.points.map(([x, y]) => y)),
+        w: 0,
+        h: 0,
+      }
+      box.w = Math.max(...region.points.map(([x, y]) => x)) - box.x
+      box.h = Math.max(...region.points.map(([x, y]) => y)) - box.y
+      return box
+    }
+    case "keypoints": {
+      const minX = Math.min(
+        ...Object.values(region.points).map(({ x, y }) => x)
+      )
+      const minY = Math.min(
+        ...Object.values(region.points).map(({ x, y }) => y)
+      )
+      const maxX = Math.max(
+        ...Object.values(region.points).map(({ x, y }) => x)
+      )
+      const maxY = Math.max(
+        ...Object.values(region.points).map(({ x, y }) => y)
+      )
+      return {
+        x: minX,
+        y: minY,
+        w: maxX - minX,
+        h: maxY - minY,
+      }
+    }
+    case "expanding-line": {
+      const box = {
+        x: Math.min(...region.points.map(({ x, y }) => x)),
+        y: Math.min(...region.points.map(({ x, y }) => y)),
+        w: 0,
+        h: 0,
+      }
+      box.w = Math.max(...region.points.map(({ x, y }) => x)) - box.x
+      box.h = Math.max(...region.points.map(({ x, y }) => y)) - box.y
+      return box
+    }
+    case "line": {
+      return { x: region.x1, y: region.y1, w: 0, h: 0 }
+    }
+    case "box": {
+      return { x: region.x, y: region.y, w: region.w, h: region.h }
+    }
+    case "point": {
+      return { x: region.x, y: region.y, w: 0, h: 0 }
+    }
+    default: {
+      return { x: 0, y: 0, w: 0, h: 0 }
+    }
+  }
+  throw new Error("unknown region")
+}
+
+export const moveRegion = (region: Region, x: number, y: number) => {
+  switch (region.type) {
+    case "point": {
+      return { ...region, x, y }
+    }
+    case "box": {
+      return { ...region, x: x - region.w / 2, y: y - region.h / 2 }
+    }
+  }
+  return region
+}

package/{ImageCanvas → src/ImageCanvas}/styles.js

@@ -1,11 +1,7 @@
-import { grey } from "@mui/material/colors";
+import { grey } from "@mui/material/colors"
+
 export default {
-  canvas: {
-    width: "100%",
-    height: "100%",
-    position: "relative",
-    zIndex: 1
-  },
+  canvas: { width: "100%", height: "100%", position: "relative", zIndex: 1 },
   zoomIndicator: {
     position: "absolute",
     bottom: 16,
@@ -15,7 +11,7 @@ export default {
     opacity: 0.5,
     fontWeight: "bolder",
     fontSize: 14,
-    padding: 4
+    padding: 4,
   },
   fixedRegionLabel: {
     position: "absolute",
@@ -25,7 +21,7 @@ export default {
     opacity: 0.5,
     transition: "opacity 500ms",
     "&:hover": {
-      opacity: 1
-    }
-  }
-};
+      opacity: 1,
+    },
+  },
+}

package/src/ImageCanvas/use-mouse.js

@@ -0,0 +1,168 @@
+// @flow weak
+
+import { useRef } from "react"
+import { Matrix } from "transformation-matrix-js"
+
+const getDefaultMat = () => Matrix.from(1, 0, 0, 1, -10, -10)
+
+export default ({
+  canvasEl,
+  changeMat,
+  changeDragging,
+  zoomStart,
+  zoomEnd,
+  changeZoomStart,
+  changeZoomEnd,
+  layoutParams,
+  zoomWithPrimary,
+  dragWithPrimary,
+  mat,
+  onMouseMove,
+  onMouseUp,
+  onMouseDown,
+  dragging,
+}) => {
+  const mousePosition = useRef({ x: 0, y: 0 })
+  const prevMousePosition = useRef({ x: 0, y: 0 })
+
+  const zoomIn = (direction, point) => {
+    const [mx, my] = [point.x, point.y]
+    let scale =
+      typeof direction === "object" ? direction.to / mat.a : 1 + 0.2 * direction
+
+    // NOTE: We're mutating mat here
+    mat.translate(mx, my).scaleU(scale)
+    if (mat.a > 2) mat.scaleU(2 / mat.a)
+    if (mat.a < 0.05) mat.scaleU(0.05 / mat.a)
+    mat.translate(-mx, -my)
+
+    changeMat(mat.clone())
+  }
+
+  const mouseEvents = {
+    onMouseMove: (e) => {
+      const { left, top } = canvasEl.current.getBoundingClientRect()
+      prevMousePosition.current.x = mousePosition.current.x
+      prevMousePosition.current.y = mousePosition.current.y
+      mousePosition.current.x = e.clientX - left
+      mousePosition.current.y = e.clientY - top
+
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+
+      if (zoomWithPrimary && zoomStart) {
+        changeZoomEnd(projMouse)
+      }
+
+      const { iw, ih } = layoutParams.current
+      onMouseMove({ x: projMouse.x / iw, y: projMouse.y / ih })
+
+      if (dragging) {
+        mat.translate(
+          prevMousePosition.current.x - mousePosition.current.x,
+          prevMousePosition.current.y - mousePosition.current.y
+        )
+
+        changeMat(mat.clone())
+      }
+      e.preventDefault()
+    },
+    onMouseDown: (e, specialEvent = {}) => {
+      e.preventDefault()
+
+      if (
+        e.button === 1 ||
+        e.button === 2 ||
+        (e.button === 0 && dragWithPrimary)
+      )
+        return changeDragging(true)
+
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+      if (zoomWithPrimary && e.button === 0) {
+        changeZoomStart(projMouse)
+        changeZoomEnd(projMouse)
+        return
+      }
+      if (e.button === 0) {
+        if (specialEvent.type === "resize-box") {
+          // onResizeBox()
+        }
+        if (specialEvent.type === "move-region") {
+          // onResizeBox()
+        }
+        const { iw, ih } = layoutParams.current
+        onMouseDown({ x: projMouse.x / iw, y: projMouse.y / ih })
+      }
+    },
+    onMouseUp: (e) => {
+      e.preventDefault()
+      const projMouse = mat.applyToPoint(
+        mousePosition.current.x,
+        mousePosition.current.y
+      )
+      if (zoomStart) {
+        const zoomEnd = projMouse
+        if (
+          Math.abs(zoomStart.x - zoomEnd.x) < 10 &&
+          Math.abs(zoomStart.y - zoomEnd.y) < 10
+        ) {
+          if (mat.a < 1) {
+            zoomIn({ to: 1 }, mousePosition.current)
+          } else {
+            zoomIn({ to: 0.25 }, mousePosition.current)
+          }
+        } else {
+          const { iw, ih } = layoutParams.current
+
+          if (zoomStart.x > zoomEnd.x) {
+            ;[zoomStart.x, zoomEnd.x] = [zoomEnd.x, zoomStart.x]
+          }
+          if (zoomStart.y > zoomEnd.y) {
+            ;[zoomStart.y, zoomEnd.y] = [zoomEnd.y, zoomStart.y]
+          }
+
+          // The region defined by zoomStart and zoomEnd should be the new transform
+          let scale = Math.min(
+            (zoomEnd.x - zoomStart.x) / iw,
+            (zoomEnd.y - zoomStart.y) / ih
+          )
+          if (scale < 0.05) scale = 0.05
+          if (scale > 10) scale = 10
+
+          const newMat = getDefaultMat()
+            .translate(zoomStart.x, zoomStart.y)
+            .scaleU(scale)
+
+          changeMat(newMat.clone())
+        }
+
+        changeZoomStart(null)
+        changeZoomEnd(null)
+      }
+      if (
+        e.button === 1 ||
+        e.button === 2 ||
+        (e.button === 0 && dragWithPrimary)
+      )
+        return changeDragging(false)
+      if (e.button === 0) {
+        const { iw, ih } = layoutParams.current
+        onMouseUp({ x: projMouse.x / iw, y: projMouse.y / ih })
+      }
+    },
+    onWheel: (e) => {
+      const direction = e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0
+      zoomIn(direction, mousePosition.current)
+      // e.preventDefault()
+    },
+    onContextMenu: (e) => {
+      e.preventDefault()
+    },
+  }
+  return { mouseEvents, mousePosition }
+}

package/src/ImageCanvas/use-project-box.js

@@ -0,0 +1,23 @@
+// @flow weak
+import useEventCallback from "use-event-callback"
+import { getEnclosingBox } from "./region-tools.js"
+
+export default ({ layoutParams, mat }) => {
+  return useEventCallback((r) => {
+    const { iw, ih } = layoutParams.current
+    const bbox = getEnclosingBox(r)
+    const margin = r.type === "point" ? 15 : 2
+    const cbox = {
+      x: bbox.x * iw - margin,
+      y: bbox.y * ih - margin,
+      w: bbox.w * iw + margin * 2,
+      h: bbox.h * ih + margin * 2,
+    }
+    const pbox = {
+      ...mat.clone().inverse().applyToPoint(cbox.x, cbox.y),
+      w: cbox.w / mat.a,
+      h: cbox.h / mat.d,
+    }
+    return pbox
+  })
+}