From 809ca58d365851910536747368381425db89e7b8 Mon Sep 17 00:00:00 2001
From: Leopold Joy <leo@leopoldjoy.com>
Date: Tue, 30 Oct 2018 18:40:11 +0100
Subject: [PATCH] implement an undo button for removing the last added point on
 the polygon

---
 src/components/Annotation.js            |  5 ++++-
 src/components/PolygonControls/index.js |  3 ++-
 src/components/defaultProps.js          |  3 ++-
 src/hocs/PolygonSelector.js             | 10 ++++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Annotation.js b/src/components/Annotation.js
index 2e5863f..39dbb58 100644
--- a/src/components/Annotation.js
+++ b/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
             })
           )
         }
diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js
index 4c615f9..9d49890 100644
--- a/src/components/PolygonControls/index.js
+++ b/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>
diff --git a/src/components/defaultProps.js b/src/components/defaultProps.js
index 90891a1..d65b95b 100644
--- a/src/components/defaultProps.js
+++ b/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 }) => {
diff --git a/src/hocs/PolygonSelector.js b/src/hocs/PolygonSelector.js
index 59ba704..0d44e6e 100644
--- a/src/hocs/PolygonSelector.js
+++ b/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)