Feature/fix laggy line updates on image zoom

src/components/Annotation.js

@@ -44,6 +44,11 @@ export default compose(
     onMouseDown: T.func,
     onMouseMove: T.func,
     onClick: T.func,
+    // This prop represents how zoom the image is (default: 1)
+    imageZoomAmount: T.number,
+    // This function is run before the onClick callback is executed (onClick
+    // is only called if onClickCheckFunc resolve to true or doesn't exist)
+    onClickCheckFunc: T.func,
     // For Polygon Selector
     onSelectionComplete: T.func,
     onSelectionClear: T.func,
@@ -93,6 +98,24 @@ export default compose(
 
   static defaultProps = defaultProps
 
+  componentDidMount = () => {
+    window.addEventListener("resize", this.forceUpdateComponent);
+  }
+
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.forceUpdateComponent);
+  }
+
+  forceUpdateComponent = () => {
+    this.forceUpdate();
+  }
+
+  componentDidUpdate = prevProps => {
+     if (prevProps.imageZoomAmount !== this.props.imageZoomAmount) {
+       this.forceUpdateComponent();
+     }
+   }
+
   setInnerRef = (el) => {
     this.container = el
     this.props.relativeMousePos.innerRef(el)
@@ -141,7 +164,14 @@ export default compose(
   onMouseUp = (e) => this.callSelectorMethod('onMouseUp', e)
   onMouseDown = (e) => this.callSelectorMethod('onMouseDown', e)
   onMouseMove = (e) => this.callSelectorMethod('onMouseMove', e)
-  onClick = (e) => this.callSelectorMethod('onClick', e)
+  onClick = (e) => {
+    const { onClickCheckFunc } = this.props;
+
+    if (!onClickCheckFunc || onClickCheckFunc(e)) {
+      return this.callSelectorMethod('onClick', e)
+    }
+    return;
+  }
   onSelectionComplete = () => this.callSelectorMethod('onSelectionComplete')
   onSelectionClear = () => this.callSelectorMethod('onSelectionClear')
   onSelectionUndo = () => this.callSelectorMethod('onSelectionUndo')

src/components/DropdownEditor/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const Inner = styled.div`
+  padding: 8px 16px;
+
+  textarea {
+    border: 0;
+    font-size: 14px;
+    margin: 6px 0;
+    min-height: 60px;
+    outline: 0;
+  }
+`
+
+const Button = styled.div`
+  background: whitesmoke;
+  border: 0;
+  box-sizing: border-box;
+  color: #363636;
+  cursor: pointer;
+  font-size: 1rem;
+  margin: 0;
+  outline: 0;
+  padding: 8px 16px;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
+  width: 100%;
+
+  transition: background 0.21s ease-in-out;
+
+  &:focus, &:hover {
+    background: #eeeeee;
+  }
+`
+
+function DropdownEditor (props) {
+  return (
+    <React.Fragment>
+      <Inner>
+        <select defaultValue={props.value} onChange={props.onChange}>
+          <option value="na">- classify -</option>
+          <option>Young Coffee</option>
+          <option>Mature Coffee</option>
+        </select>
+        {/*<textarea
+          placeholder='Write description'
+          onFocus={props.onFocus}
+          onBlur={props.onBlur}
+          onChange={props.onChange}
+          value={props.value}
+        >
+        </textarea>*/}
+      </Inner>
+      {(props.value && props.value.length > 0 && props.value !== 'na') &&
+        <Button
+          onClick={props.onSubmit}
+        >
+          Submit
+        </Button>
+      }
+    </React.Fragment>
+  )
+}
+
+export default DropdownEditor

src/components/Editor/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 import TextEditor from '../TextEditor'
+import DropdownEditor from '../DropdownEditor'
 import { getHorizontallyCentralPoint, getVerticallyLowestPoint } from '../../utils/pointsUtils'
 import { PolygonSelector } from '../../selectors'
 
@@ -47,17 +48,32 @@ function Editor (props) {
       }}
     >
       <Container>
-        <TextEditor
-          onChange={e => props.onChange({
-            ...props.annotation,
-            data: {
-              ...props.annotation.data,
-              text: e.target.value
-            }
-          })}
-          onSubmit={props.onSubmit}
-          value={props.annotation.data && props.annotation.data.text}
-        />
+        {(geometry.type === PolygonSelector.TYPE) &&
+          <DropdownEditor
+            onChange={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                text: e.target.value
+              }
+            })}
+            onSubmit={props.onSubmit}
+            value={props.annotation.data && props.annotation.data.text}
+          />
+        }
+        {(geometry.type !== PolygonSelector.TYPE) &&
+          <TextEditor
+            onChange={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                text: e.target.value
+              }
+            })}
+            onSubmit={props.onSubmit}
+            value={props.annotation.data && props.annotation.data.text}
+          />
+        }
       </Container>
     </div>
   )

src/components/Polygon/index.js

@@ -5,11 +5,11 @@ import './index.css'
 
 const PointDot = styled.div`
   background: black;
-  border-radius: 3px;
-  width: 6px;
-  height: 6px;
-  margin-left: -3px;
-  margin-top: -3px;
+  border-radius: 2px;
+  width: 4px;
+  height: 4px;
+  margin-left: -2px;
+  margin-top: -2px;
   position: absolute;
 `
 

src/components/PolygonControls/index.js

@@ -21,7 +21,6 @@ const Container = styled.div`
     0px 1px 5px 0px rgba(0, 0, 0, 0.2),
     0px 2px 2px 0px rgba(0, 0, 0, 0.14),
     0px 3px 1px -2px rgba(0, 0, 0, 0.12);
-  margin-top: 16px;
   transform-origin: top left;
 
   animation: ${fadeInScale} 0.31s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -61,7 +60,7 @@ function PolygonControls (props) {
       style={{
         position: 'absolute',
         left: `${getHorizontallyCentralPoint(geometry.points)}%`,
-        top: `${getVerticallyLowestPoint(geometry.points)}%`,
+        top: `${(getVerticallyLowestPoint(geometry.points) + 10)}%`,
         ...props.style
       }}
     >
@@ -70,7 +69,7 @@ function PolygonControls (props) {
       >
         {(geometry.points.length >= 2) && <Button onClick={props.onSelectionUndo}>Undo</Button>}
         <Button onClick={props.onSelectionClear}>Clear</Button>
-        <Button onClick={props.onSelectionComplete}>Done</Button>
+        {(geometry.points.length >= 3) && <Button onClick={props.onSelectionComplete}>Done</Button>}
       </Container>
     </div>
   )

src/components/defaultProps.js

@@ -32,6 +32,7 @@ export default {
   disableSelector: false,
   disableEditor: false,
   disableOverlay: false,
+  imageZoomAmount: 1,
   activeAnnotationComparator: (a, b) => a === b,
   renderSelector: ({ annotation }) => {
     switch (annotation.geometry.type) {

src/hocs/PolygonSelector.js

@@ -105,7 +105,7 @@ export const methods = {
     }
   },
 
-  onMouseUp (annotation, e) {
+  onClick (annotation, e) {
     const coordOfClick = getCoordPercentage(e)
 
     return {