added line tool

Author: sreevardhanreddi

package-lock.json

@@ -29,6 +29,7 @@
     "seamless-immutable": "^7.1.4",
     "shallow-equal": "^1.2.1",
     "storybook": "^5.3.14",
+    "styled-components": "^5.2.1",
     "transformation-matrix-js": "^2.7.6",
     "use-event-callback": "^0.1.0",
     "use-key-hook": "^1.3.0"

package.json

@@ -66,6 +66,7 @@ export const Annotator = ({
     "create-point",
     "create-box",
     "create-polygon",
+    "create-line",
     "create-expanding-line",
     "show-mask",
   ],

src/Annotator/index.js

@@ -377,6 +377,24 @@ export default (state: MainLayoutState, action: Action) => {
             [x, y]
           )
         }
+        case "DRAW_LINE": {
+          const { regionId } = state.mode
+          const [region, regionIndex] = getRegion(regionId)
+          if (!region) return setIn(state, ["mode"], null)
+          return setIn(
+            state,
+            [
+              ...pathToActiveImage,
+              "regions",
+              regionIndex,
+            ],
+            {
+              ...region,
+              x2:x,
+              y2:y,
+            }
+          )
+        }
         case "DRAW_EXPANDING_LINE": {
           const { regionId } = state.mode
           const [expandingLine, regionIndex] = getRegion(regionId)
@@ -449,6 +467,16 @@ export default (state: MainLayoutState, action: Action) => {
               { ...polygon, points: polygon.points.concat([[x, y]]) }
             )
           }
+          case "DRAW_LINE": {
+            const [line, regionIndex] = getRegion(state.mode.regionId)
+            if (!line) break
+             setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex],
+              { ...line, x2:x, y2:y }
+            )
+            return setIn(state, ["mode"], null)
+          }
           case "DRAW_EXPANDING_LINE": {
             const [expandingLine, regionIndex] = getRegion(state.mode.regionId)
             if (!expandingLine) break
@@ -588,6 +616,27 @@ export default (state: MainLayoutState, action: Action) => {
           })
           break
         }
+        case "create-line": {
+          if (state.mode && state.mode.mode === "DRAW_LINE") break
+          state = saveToHistory(state, "Create Line")
+          newRegion = {
+            type: "line",
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y,
+            highlighted: true,
+            editingLabels: false,
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
+            id: getRandomId(),
+          }
+          state = setIn(state, ["mode"], {
+            mode: "DRAW_LINE",
+            regionId: newRegion.id,
+          })
+          break
+        }
         case "create-keypoints": {
           state = saveToHistory(state, "Create Keypoints")
           const [

src/Annotator/reducers/general-reducer.js

@@ -179,7 +179,7 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
   imageTagList?: Array<string>,
   imageClsList?: Array<string>,
   // all tools are enabled by default
-  enabledTools?: Array< "select" | "create-point" | "create-box" | "create-polygon">,
+  enabledTools?: Array< "select" | "create-point" | "create-box" | "create-polygon" | "create-line">,
   selectedImage?: string, // initial selected image
   images: Array<{
     src: string,

src/DemoSite/Editor.js

@@ -48,6 +48,16 @@ export 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",
@@ -132,6 +142,9 @@ export const getEnclosingBox = (region: Region) => {
       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 }
     }

src/ImageCanvas/region-tools.js

@@ -16,6 +16,7 @@ import {
   faSearch,
   faMask,
   faEdit,
+  faChartLine
 } from "@fortawesome/free-solid-svg-icons"
 import FullscreenIcon from "@material-ui/icons/Fullscreen"
 import AccessibilityNewIcon from "@material-ui/icons/AccessibilityNew"
@@ -62,6 +63,14 @@ export const iconDictionary = {
   "create-expanding-line": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faGripLines} />
   ),
+  "create-line": () => (
+    <FontAwesomeIcon
+      style={faStyle}
+      size="xs"
+      fixedWidth
+      icon={faChartLine}
+    />
+  ),
   "show-mask": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faMask} />
   ),

src/MainLayout/icon-dictionary.js

@@ -304,6 +304,10 @@ export const MainLayout = ({
                 name: "create-polygon",
                 helperText: "Add Polygon" + getHotkeyHelpText("create_polygon"),
               },
+              {
+                name: "create-line",
+                helperText: "Add Line",
+              },
               {
                 name: "create-expanding-line",
                 helperText: "Add Expanding Line",

src/MainLayout/index.js

@@ -18,6 +18,19 @@ const RegionComponents = {
       />
     </g>
   )),
+  line: memo(({ region, iw, ih }) => (
+    <g transform={`translate(${region.x1 * iw} ${region.y1 * ih})`}>
+      <line
+        strokeWidth={2}
+        x1={0}
+        y1={0}
+        x2={(region.x2 - region.x1) * iw}
+        y2={(region.y2 - region.y1) * ih}
+        stroke={colorAlpha(region.color, 0.75)}
+        fill={colorAlpha(region.color, 0.25)}
+      />
+    </g>
+  )),
   box: memo(({ region, iw, ih }) => (
     <g transform={`translate(${region.x * iw} ${region.y * ih})`}>
       <rect