Merge pull request #14 from flyingcarpet-network/feature/FD-146-Incre…

…ase-zoom-amount implement 4x image zoom text/spacing adjustments
flyingcarpet-network · Nov 13, 2018 · 2c3cd5d · 2c3cd5d
2 parents d1cbae8 + 4eba950
commit 2c3cd5d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/src/components/Content/index.js b/src/components/Content/index.js
@@ -21,7 +21,7 @@ function Content (props) {
   const { geometry } = props.annotation
   if (!geometry) return null
 
-  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+  const zoomBetweenZeroAndOne = Math.abs(((props.imageZoomAmount - 1) / 4) - 1);
 
   return (
     <div
@@ -36,7 +36,7 @@ function Content (props) {
       geometry={geometry}
     >
       <Container
-        style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+        style={{fontSize: (((1 / 5) + (zoomBetweenZeroAndOne * (4 / 5))) + 'rem'), padding: ((((1 / 5) * 8) + ((4 / 5) * 8 * zoomBetweenZeroAndOne)) + 'px ' + (((1 / 5) * 16) + ((4 / 5) * 16 * zoomBetweenZeroAndOne)) + 'px')}}
       >
         {props.annotation.data && props.annotation.data.age}
         {' - '}

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: 2px;
-  width: 4px;
-  height: 4px;
-  margin-left: -2px;
-  margin-top: -2px;
+  border-radius: 1px;
+  width: 2px;
+  height: 2px;
+  margin-left: -1px;
+  margin-top: -1px;
   position: absolute;
 `
 

diff --git a/src/components/PolygonControls/index.js b/src/components/PolygonControls/index.js
@@ -56,14 +56,18 @@ 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;
+  const zoomBetweenZeroAndOne = Math.abs(((props.imageZoomAmount - 1) / 4) - 1);
+
+  const fontSize = ((1 / 5) + (zoomBetweenZeroAndOne * (4 / 5)));
+  const paddingHorizontal = (((1 / 5) * 8) + ((4 / 5) * 8 * zoomBetweenZeroAndOne));
+  const paddingVertical = (((1 / 5) * 16) + ((4 / 5) * 16 * (zoomBetweenZeroAndOne)));
 
   return (
     <div
       style={{
         position: 'absolute',
         left: `${getHorizontallyCentralPoint(geometry.points)}%`,
-        top: `${(getVerticallyLowestPoint(geometry.points) + (5 + (5 * zoomBetweenHalfAndOne)))}%`,
+        top: `${(getVerticallyLowestPoint(geometry.points) + ((10 * (1 / 5)) + (10 * (4 / 5) * zoomBetweenZeroAndOne)))}%`,
         ...props.style
       }}
     >
@@ -73,17 +77,17 @@ function PolygonControls (props) {
         {(geometry.points.length >= 2) && 
           <Button
             onClick={props.onSelectionUndo}
-            style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+            style={{fontSize: (fontSize + 'rem'), padding: paddingHorizontal + 'px ' + paddingVertical + 'px'}}
           >Undo</Button>
         }
         <Button
           onClick={props.onSelectionClear}
-          style={{fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem'), padding: ((4 + (4 * zoomBetweenHalfAndOne)) + 'px ' + (8 + (8 * zoomBetweenHalfAndOne)) + 'px')}}
+          style={{fontSize: (fontSize + 'rem'), padding: paddingHorizontal + 'px ' + paddingVertical + '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')}}
+            style={{fontSize: (fontSize + 'rem'), padding: paddingHorizontal + 'px ' + paddingVertical + 'px'}}
           >Done</Button>
         }
       </Container>

diff --git a/src/components/RadioButtonEditor/index.js b/src/components/RadioButtonEditor/index.js
@@ -28,12 +28,14 @@ const Button = styled.div`
 `
 
 function RadioButtonEditor (props) {
-  const zoomBetweenHalfAndOne = Math.abs(props.imageZoomAmount - 2) / 2;
+  const zoomBetweenZeroAndOne = Math.abs(((props.imageZoomAmount - 1) / 4) - 1);
+
+  const fontSize = ((1 / 5) + (zoomBetweenZeroAndOne * (4 / 5)));
 
   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', fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem')}}> - Coffee Age - </h6></div>
+      <Inner style={{fontSize: (fontSize + 'rem'), padding: ((((1 / 5) * 8) + ((4 / 5) * 8 * zoomBetweenZeroAndOne)) + 'px ' + (((1 / 5) * 16) + ((4 / 5) * 16 * zoomBetweenZeroAndOne)) + 'px')}}>
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center', fontSize: (fontSize + 'rem')}}> - Coffee Age - </h6></div>
         <div>
           <label><input type="radio"
             name="age" 
@@ -51,7 +53,7 @@ function RadioButtonEditor (props) {
           /> Mature</label>
         </div>
 
-        <div><h6 style={{margin: '0px 0px', textAlign: 'center', fontSize: ((0.5 + zoomBetweenHalfAndOne) + 'rem')}}> - Renovation Type - </h6></div>
+        <div><h6 style={{margin: '0px 0px', textAlign: 'center', fontSize: (fontSize + 'rem')}}> - Renovation Type - </h6></div>
         <div>
           <label><input type="radio"
             name="renovationType" 
@@ -72,7 +74,7 @@ function RadioButtonEditor (props) {
       {(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')}}
+          style={{fontSize: (fontSize + 'rem'), padding: ((((1 / 5) * 8) + ((4 / 5) * 8 * zoomBetweenZeroAndOne)) + 'px ' + (((1 / 5) * 16) + ((4 / 5) * 16 * zoomBetweenZeroAndOne)) + 'px')}}
         >
           Submit
         </Button>