diff --git a/src/components/Annotation.js b/src/components/Annotation.js index 39dbb58..0c7380a 100644 --- 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 index fafc885..8f3ee39 100644 --- 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 (
- - {props.annotation.data && props.annotation.data.text} + + {props.annotation.data && props.annotation.data.age} + {' - '} + {props.annotation.data && props.annotation.data.renovationType}
) diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js index 5e6d03b..2501013 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 RadioButtonEditor from '../RadioButtonEditor' import { getHorizontallyCentralPoint, getVerticallyLowestPoint } from '../../utils/pointsUtils' import { PolygonSelector } from '../../selectors' @@ -47,17 +48,41 @@ 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, + 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) && + props.onChange({ + ...props.annotation, + data: { + ...props.annotation.data, + text: e.target.value + } + })} + onSubmit={props.onSubmit} + value={props.annotation.data && props.annotation.data.text} + /> + } ) 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; ` diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js index ae69264..ef4c116 100644 --- 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 (
- {(geometry.points.length >= 2) && } - - + {(geometry.points.length >= 2) && + + } + + {(geometry.points.length >= 3) && + + }
) diff --git a/src/components/RadioButtonEditor/index.js b/src/components/RadioButtonEditor/index.js new file mode 100644 index 0000000..822bf71 --- /dev/null +++ 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 ( + + +
- Coffee Age -
+
+ +
+
+ +
+ +
- Renovation Type -
+
+ +
+
+ +
+
+ {(props.ageValue && props.ageValue.length > 0 && props.renovationTypeValue && props.renovationTypeValue.length > 0) && + + } +
+ ) +} + +export default RadioButtonEditor diff --git a/src/components/defaultProps.js b/src/components/defaultProps.js index d65b95b..d461f86 100644 --- 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 }) => ( ), - renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo }) => ( + renderPolygonControls: ({ annotation, onSelectionComplete, onSelectionClear, onSelectionUndo, imageZoomAmount }) => ( ), renderHighlight: ({ key, annotation, active }) => { @@ -116,10 +119,11 @@ export default { return null } }, - renderContent: ({ key, annotation }) => ( + renderContent: ({ key, annotation, imageZoomAmount }) => ( ), renderOverlay: ({ type, annotation }) => { diff --git a/src/hocs/PolygonSelector.js b/src/hocs/PolygonSelector.js index 0d44e6e..a3c5702 100644 --- 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 {