From e10d80b267244ab701fb75dfbfdf4939fd0fc452 Mon Sep 17 00:00:00 2001 From: Leopold Joy Date: Wed, 31 Oct 2018 20:58:22 +0100 Subject: [PATCH 1/4] position polygon controls to improve UX --- src/components/PolygonControls/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js index 9d49890..ae69264 100644 --- a/src/components/PolygonControls/index.js +++ b/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 }} > From b9d6a4526837e3a5e7e255304fabb25b2320ce25 Mon Sep 17 00:00:00 2001 From: Leopold Joy Date: Wed, 7 Nov 2018 18:11:34 -0500 Subject: [PATCH 2/4] implement dropdown menu for classifying imagery --- src/components/DropdownEditor/index.js | 66 ++++++++++++++++++++++++++ src/components/Editor/index.js | 38 ++++++++++----- 2 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 src/components/DropdownEditor/index.js diff --git a/src/components/DropdownEditor/index.js b/src/components/DropdownEditor/index.js new file mode 100644 index 0000000..e3d6a2b --- /dev/null +++ b/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 ( + + + + {/**/} + + {(props.value && props.value.length > 0 && props.value !== 'na') && + + } + + ) +} + +export default DropdownEditor diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js index 5e6d03b..e1a0e23 100644 --- 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 DropdownEditor from '../DropdownEditor' import { getHorizontallyCentralPoint, getVerticallyLowestPoint } from '../../utils/pointsUtils' import { PolygonSelector } from '../../selectors' @@ -47,17 +48,32 @@ function Editor (props) { }} > - 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) && + 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) && + props.onChange({ + ...props.annotation, + data: { + ...props.annotation.data, + text: e.target.value + } + })} + onSubmit={props.onSubmit} + value={props.annotation.data && props.annotation.data.text} + /> + } ) From dc8e760c7b2e1416497c46477d98debb9a8eb407 Mon Sep 17 00:00:00 2001 From: Leopold Joy Date: Wed, 7 Nov 2018 18:15:49 -0500 Subject: [PATCH 3/4] fix laggy line updates on window resize --- src/components/Annotation.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/Annotation.js b/src/components/Annotation.js index 39dbb58..fa8822d 100644 --- a/src/components/Annotation.js +++ b/src/components/Annotation.js @@ -93,6 +93,18 @@ export default compose( static defaultProps = defaultProps + componentDidMount = () => { + window.addEventListener("resize", this.windowResizing); + } + + componentWillUnmount = () => { + window.removeEventListener("resize", this.windowResizing); + } + + windowResizing = () => { + this.forceUpdate(); + } + setInnerRef = (el) => { this.container = el this.props.relativeMousePos.innerRef(el) From 5fb682fd4b9d0fd806dcae92374fe850daf2be3e Mon Sep 17 00:00:00 2001 From: Leopold Joy Date: Wed, 7 Nov 2018 18:17:40 -0500 Subject: [PATCH 4/4] make polygon dots smaller --- src/components/Polygon/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Polygon/index.js b/src/components/Polygon/index.js index fe76668..999e56c 100644 --- 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; `