@searpent/react-image-annotate 2.0.77 → 2.0.78

package/src/ImageCanvas/index.story.js

@@ -1,314 +0,0 @@
-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

@@ -1,171 +0,0 @@
-// @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/src/ImageCanvas/use-mouse.js

@@ -1,168 +0,0 @@
-// @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

@@ -1,23 +0,0 @@
-// @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
-  })
-}