Merge pull request #11 from flyingcarpet-network/feature/FD-134-Updat…

…e-Sucafina-Annotation-Label-Options Feature/fd 134 update sucafina annotation label options
flyingcarpet-network · Nov 9, 2018 · 1c3c5fc · 1c3c5fc
2 parents db7982f + a95f835
commit 1c3c5fc
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 30 deletions.
diff --git a/src/components/Annotation.js b/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')
@@ -255,7 +285,8 @@ export default compose(
           && (
             renderContent({
               key: annotation.data.id,
-              annotation: annotation
+              annotation: annotation,
+              imageZoomAmount: props.imageZoomAmount
             })
           )
         ))}
@@ -267,7 +298,8 @@ export default compose(
             renderEditor({
               annotation: props.value,
               onChange: props.onChange,
-              onSubmit: this.onSubmit
+              onSubmit: this.onSubmit,
+              imageZoomAmount: props.imageZoomAmount
             })
           )
         }
@@ -280,7 +312,8 @@ export default compose(
               annotation: props.value,
               onSelectionComplete: this.onSelectionComplete,
               onSelectionClear: this.onSelectionClear,
-              onSelectionUndo: this.onSelectionUndo
+              onSelectionUndo: this.onSelectionUndo,
+              imageZoomAmount: props.imageZoomAmount
             })
           )
         }

diff --git a/src/components/Content/index.js b/src/components/Content/index.js
@@ -14,12 +14,15 @@ const Container = styled.div`
   margin-top: 8px;
   margin-left: -50%;
   margin-right: 50%;
+  color: #363636!important;
 `
 
 function Content (props) {
   const { geometry } = props.annotation
   if (!geometry) return null
 
+  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+
   return (
     <div
       style={{
@@ -32,8 +35,12 @@ function Content (props) {
       className={props.className}
       geometry={geometry}
     >
-      <Container>
-        {props.annotation.data && props.annotation.data.text}
+      <Container
+        style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+      >
+        {props.annotation.data && props.annotation.data.age}
+        {' - '}
+        {props.annotation.data && props.annotation.data.renovationType}
       </Container>
     </div>
   )

diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 import TextEditor from '../TextEditor'
+import RadioButtonEditor from '../RadioButtonEditor'
 import { getHorizontallyCentralPoint, getVerticallyLowestPoint } from '../../utils/pointsUtils'
 import { PolygonSelector } from '../../selectors'
 
@@ -47,17 +48,41 @@ 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) &&
+          <RadioButtonEditor
+            onChangeAge={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                age: e.target.value
+              }
+            })}
+            onChangeRenovationType={e => props.onChange({
+              ...props.annotation,
+              data: {
+                ...props.annotation.data,
+                renovationType: e.target.value
+              }
+            })}
+            onSubmit={props.onSubmit}
+            ageValue={props.annotation.data && props.annotation.data.age}
+            renovationTypeValue={props.annotation.data && props.annotation.data.renovationType}
+            imageZoomAmount={props.imageZoomAmount}
+          />
+        }
+        {(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>
   )

diff --git a/src/components/Polygon/index.js b/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;
 `
 

diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js
@@ -55,21 +55,36 @@ function PolygonControls (props) {
   // Only show polygon controls if there are at least three points set
   if (!geometry || !geometry.points || geometry.points.length === 0) return null
 
+  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+
   return (
     <div
       style={{
         position: 'absolute',
         left: `${getHorizontallyCentralPoint(geometry.points)}%`,
-        top: `${(getVerticallyLowestPoint(geometry.points) + 10)}%`,
+        top: `${(getVerticallyLowestPoint(geometry.points) + (10 * zoomBetweenHalfAndOne))}%`,
         ...props.style
       }}
     >
       <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>
+        {(geometry.points.length >= 2) && 
+          <Button
+            onClick={props.onSelectionUndo}
+            style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+          >Undo</Button>
+        }
+        <Button
+          onClick={props.onSelectionClear}
+          style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+        >Clear</Button>
+        {(geometry.points.length >= 3) &&
+          <Button
+            onClick={props.onSelectionComplete}
+            style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+          >Done</Button>
+        }
       </Container>
     </div>
   )

diff --git a/src/components/RadioButtonEditor/index.js b/src/components/RadioButtonEditor/index.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const Inner = styled.div`
+  padding: 8px 16px;
+  color: #363636!important;
+`
+
+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 RadioButtonEditor (props) {
+  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+
+  return (
+    <React.Fragment>
+      <Inner style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}>
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center'}}> - Coffee Age - </h6></div>
+        <div>
+          <label><input type="radio"
+            name="age" 
+            value={'young'} 
+            checked={props.ageValue === 'young'} 
+            onChange={props.onChangeAge}
+          /> Young</label>
+        </div>
+        <div>
+          <label><input type="radio"
+            name="age" 
+            value={'mature'} 
+            checked={props.ageValue === 'mature'} 
+            onChange={props.onChangeAge}
+          /> Mature</label>
+        </div>
+
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center'}}> - Renovation Type - </h6></div>
+        <div>
+          <label><input type="radio"
+            name="renovationType" 
+            value={'esqueletomento'} 
+            checked={props.renovationTypeValue === 'esqueletomento'} 
+            onChange={props.onChangeRenovationType}
+          /> Esquele.</label>
+        </div>
+        <div>
+          <label><input type="radio"
+            name="renovationType" 
+            value={'recepa'} 
+            checked={props.renovationTypeValue === 'recepa'}  
+            onChange={props.onChangeRenovationType}
+          /> Recepa</label>
+        </div>
+      </Inner>
+      {(props.ageValue && props.ageValue.length > 0 && props.renovationTypeValue && props.renovationTypeValue.length > 0) &&
+        <Button
+          onClick={props.onSubmit}
+          style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+        >
+          Submit
+        </Button>
+      }
+    </React.Fragment>
+  )
+}
+
+export default RadioButtonEditor
diff --git a/src/components/defaultProps.js b/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) {
@@ -63,19 +64,21 @@ export default {
         return null
     }
   },
-  renderEditor: ({ annotation, onChange, onSubmit }) => (
+  renderEditor: ({ annotation, onChange, onSubmit, imageZoomAmount }) => (
     <Editor
       annotation={annotation}
       onChange={onChange}
       onSubmit={onSubmit}
+      imageZoomAmount={imageZoomAmount}
     />
   ),
-  renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo }) => (
+  renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo, imageZoomAmount }) => (
     <PolygonControls
       annotation={annotation}
       onSelectionComplete={onSelectionComplete}
       onSelectionClear={onSelectionClear}
       onSelectionUndo={onSelectionUndo}
+      imageZoomAmount={imageZoomAmount}
     />
   ),
   renderHighlight: ({ key, annotation, active }) => {
@@ -116,10 +119,11 @@ export default {
         return null
     }
   },
-  renderContent: ({ key, annotation }) => (
+  renderContent: ({ key, annotation, imageZoomAmount }) => (
     <Content
       key={key}
       annotation={annotation}
+      imageZoomAmount={imageZoomAmount}
     />
   ),
   renderOverlay: ({ type, annotation }) => {

diff --git a/src/hocs/PolygonSelector.js b/src/hocs/PolygonSelector.js
@@ -105,7 +105,7 @@ export const methods = {
     }
   },
 
-  onMouseUp (annotation, e) {
+  onClick (annotation, e) {
     const coordOfClick = getCoordPercentage(e)
 
     return {