Made diamonds for points when user in full image segmentation annotator and removed from wrapper

Author: puskuruk

src/Annotator/index.js

@@ -58,6 +58,7 @@ export const Annotator = ({
   imageClsList = [],
   keyframes = {},
   taskDescription,
+  fullImageSegmentationMode,
   RegionEditLabel,
   videoSrc,
   videoTime = 0,
@@ -137,6 +138,7 @@ export const Annotator = ({
         alwaysShowNextButton={Boolean(onNextImage)}
         alwaysShowPrevButton={Boolean(onPrevImage)}
         mask={mask}
+        fullImageSegmentationMode={fullImageSegmentationMode}
         // maskVersion={maskVersion}
         state={state}
         dispatch={dispatch}

src/FullImageSegmentationAnnotator/index.js

@@ -20,5 +20,11 @@ const imageData = new ImageData(uint8Array, width, height)
 // TODO remove this !!!!
 
 export default ({ onExit, images }) => {
-  return <Annotator mask={imageData} images={images} onExit={onExit} />
+  return (
+    <Annotator
+      images={images}
+      onExit={onExit}
+      fullImageSegmentationMode={true}
+    />
+  )
 }

src/HighlightBox/index.js

@@ -101,7 +101,6 @@ export const HighlightBox = ({
         top: pbox.y - 5,
         width: pbox.w + 10,
         height: pbox.h + 10,
-        transform: 'rotate(-45deg)'
       }}
     >
       <path

src/ImageCanvas/index.js

@@ -90,7 +90,7 @@ export const ImageCanvas = ({
   videoPlaying = false,
   mask,
   maskVersion,
-
+  fullImageSegmentationMode,
   onImageOrVideoLoaded,
   onChangeRegion,
   onBeginRegionEdit,
@@ -237,22 +237,41 @@ export const ImageCanvas = ({
     )) {
       switch (region.type) {
         case "point": {
-          context.save()
-
-          context.beginPath()
-          context.strokeStyle = region.color
-          context.moveTo(region.x * iw - 10, region.y * ih)
-          context.lineTo(region.x * iw - 2, region.y * ih)
-          context.moveTo(region.x * iw + 10, region.y * ih)
-          context.lineTo(region.x * iw + 2, region.y * ih)
-          context.moveTo(region.x * iw, region.y * ih - 10)
-          context.lineTo(region.x * iw, region.y * ih - 2)
-          context.moveTo(region.x * iw, region.y * ih + 10)
-          context.lineTo(region.x * iw, region.y * ih + 2)
-          context.moveTo(region.x * iw + 5, region.y * ih)
-          context.arc(region.x * iw, region.y * ih, 5, 0, 2 * Math.PI)
-          context.stroke()
-          context.restore()
+          if(!fullImageSegmentationMode){
+            context.save()
+            
+            context.beginPath()
+            context.strokeStyle = region.color
+            context.moveTo(region.x * iw - 10, region.y * ih)
+            context.lineTo(region.x * iw - 2, region.y * ih)
+            context.moveTo(region.x * iw + 10, region.y * ih)
+            context.lineTo(region.x * iw + 2, region.y * ih)
+            context.moveTo(region.x * iw, region.y * ih - 10)
+            context.lineTo(region.x * iw, region.y * ih - 2)
+            context.moveTo(region.x * iw, region.y * ih + 10)
+            context.lineTo(region.x * iw, region.y * ih + 2)
+            context.moveTo(region.x * iw + 5, region.y * ih)
+            context.arc(region.x * iw, region.y * ih, 5, 0, 2 * Math.PI)
+            context.stroke()
+            context.restore()
+          }else {
+            const length = 4
+            context.save()
+
+            context.beginPath()
+            context.strokeStyle = region.color
+
+            context.moveTo(region.x * iw, region.y * ih+ length)
+            context.lineTo(region.x * iw + length, region.y * ih)
+            context.moveTo(region.x * iw, region.y * ih- length)
+            context.lineTo(region.x * iw + length, region.y * ih)
+            context.moveTo(region.x * iw, region.y * ih-length)
+            context.lineTo(region.x * iw - length, region.y * ih)
+            context.moveTo(region.x * iw, region.y * ih+length)
+            context.lineTo(region.x * iw - length, region.y * ih)
+            context.stroke()
+            context.restore()
+          }
           break
         }
         case "box": {

src/ImageMask/index.js

@@ -1,7 +1,14 @@
 // @flow
 
 import React, { useState, useEffect, useMemo } from "react"
-export default ({ imageData, imagePosition, videoPlaying, maskVersion, pointerEvents = "none", opacity = 0.5, zIndex = 999, position = 'absolute'}) => {
+export default ({ imageData,
+    imagePosition,
+    videoPlaying, maskVersion,
+    pointerEvents = "none",
+    opacity = 0.5,
+    zIndex = 999,
+    position = 'absolute'
+  }) => {
   const [canvasRef, setCanvasRef] = useState(null)
 
   useEffect(() => {

src/MainLayout/index.js

@@ -42,6 +42,7 @@ export const MainLayout = ({
   alwaysShowNextButton = false,
   alwaysShowPrevButton = false,
   mask,
+  fullImageSegmentationMode,
   RegionEditLabel,
 }: Props) => {
   const classes = useStyles()
@@ -156,6 +157,7 @@ export const MainLayout = ({
                   {...settings}
                   key={state.selectedImage}
                   mask={mask}
+                  fullImageSegmentationMode={fullImageSegmentationMode}
                   showTags={state.showTags}
                   allowedArea={state.allowedArea}
                   regionClsList={state.regionClsList}