Feature/polygon selection undo functionality

src/components/Annotation.js

@@ -47,6 +47,7 @@ export default compose(
     // For Polygon Selector
     onSelectionComplete: T.func,
     onSelectionClear: T.func,
+    onSelectionUndo: T.func,
 
     annotations: T.arrayOf(
       T.shape({
@@ -143,6 +144,7 @@ export default compose(
   onClick = (e) => this.callSelectorMethod('onClick', e)
   onSelectionComplete = () => this.callSelectorMethod('onSelectionComplete')
   onSelectionClear = () => this.callSelectorMethod('onSelectionClear')
+  onSelectionUndo = () => this.callSelectorMethod('onSelectionUndo')
 
   onSubmit = () => {
     this.props.onSubmit(this.props.value)
@@ -277,7 +279,8 @@ export default compose(
             renderPolygonControls({
               annotation: props.value,
               onSelectionComplete: this.onSelectionComplete,
-              onSelectionClear: this.onSelectionClear
+              onSelectionClear: this.onSelectionClear,
+              onSelectionUndo: this.onSelectionUndo
             })
           )
         }

src/components/PolygonControls/index.js

@@ -54,7 +54,7 @@ const Button = styled.div`
 function PolygonControls (props) {
   const { geometry } = props.annotation
   // Only show polygon controls if there are at least three points set
-  if (!geometry || !geometry.points || geometry.points.length < 3) return null
+  if (!geometry || !geometry.points || geometry.points.length === 0) return null
 
   return (
     <div
@@ -68,6 +68,7 @@ function PolygonControls (props) {
       <Container
         className={props.className}
       >
+        {(geometry.points.length >= 2) && <Button onClick={props.onSelectionUndo}>Undo</Button>}
         <Button onClick={props.onSelectionClear}>Clear</Button>
         <Button onClick={props.onSelectionComplete}>Done</Button>
       </Container>

src/components/defaultProps.js

@@ -70,11 +70,12 @@ export default {
       onSubmit={onSubmit}
     />
   ),
-  renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear }) => (
+  renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo }) => (
     <PolygonControls
       annotation={annotation}
       onSelectionComplete={onSelectionComplete}
       onSelectionClear={onSelectionClear}
+      onSelectionUndo={onSelectionUndo}
     />
   ),
   renderHighlight: ({ key, annotation, active }) => {

src/hocs/PolygonSelector.js

@@ -95,6 +95,16 @@ export const methods = {
     }
   },
 
+  onSelectionUndo (annotation) {
+    return {
+      ...annotation,
+      geometry: {
+        ...annotation.geometry,
+        points: annotation.geometry.points.slice(0, -1)
+      }
+    }
+  },
+
   onMouseUp (annotation, e) {
     const coordOfClick = getCoordPercentage(e)