From cb67c32da5fd06132d7cfe8524bdd6a6f8b47ddb Mon Sep 17 00:00:00 2001
From: Michael Lefkowitz <lefkowitz.michael@gmail.com>
Date: Wed, 30 Jan 2019 21:46:55 -0600
Subject: [PATCH] fix marking spacing

---
 package.json    |  2 +-
 src/MeasureX.js | 43 +++++++++++++++------------
 src/MeasureY.js | 77 +++++++++++++++++++++++++------------------------
 src/index.js    |  8 ++---
 4 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/package.json b/package.json
index 9c2302c..e0e5185 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-native-ruler",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A devtool for measuring pixel dimensions on your React Native screens",
     "license": "MIT",
     "author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>",
diff --git a/src/MeasureX.js b/src/MeasureX.js
index 661e488..254c1c2 100644
--- a/src/MeasureX.js
+++ b/src/MeasureX.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Animated, Dimensions, PanResponder, Text, View } from 'react-native';
+import { Animated, Dimensions, PanResponder, StyleSheet, Text, View } from 'react-native';
 
 const { width, height } = Dimensions.get('screen');
 
@@ -71,11 +71,13 @@ export class MeasureX extends PureComponent {
         };
 
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
                 <Text
                     style={{
                         position: 'absolute',
-                        right: xLine - 15,
+                        left: xLine - 15,
+                        top: 15,
+                        transform: [{ rotate: '90deg' }],
                     }}
                 >
                     {xLine.toFixed(2)}
@@ -92,7 +94,9 @@ export class MeasureX extends PureComponent {
                 <Text
                     style={{
                         position: 'absolute',
-                        right: xLine,
+                        left: xLine - 30,
+                        top: 15,
+                        transform: [{ rotate: '90deg' }],
                     }}
                 >
                     {xLine.toFixed(2)}
@@ -105,34 +109,35 @@ export class MeasureX extends PureComponent {
                             position: 'absolute',
                             bottom: 0,
                             right: 0,
-                            height,
-                            flexDirection: 'row',
+                            height: '100%',
                             zIndex: 10,
                         },
                     ]}
                 >
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            width: 1,
-                        }}
-                    />
                     <View
                         style={{
                             backgroundColor: 'yellow',
-                            width: 28,
+                            width: 30,
+                            height,
+                            borderLeftColor: 'black',
+                            borderRightColor: 'black',
+                            borderLeftWidth: 1,
+                            borderRightWidth: 1,
                         }}
                     >
                         {/* {this.renderVerticalRulerTicks()} */}
                     </View>
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            width: 1,
-                        }}
-                    />
                 </Animated.View>
             </View>
         );
     }
 }
+
+const defaultStyles = StyleSheet.create({
+    lineText: {
+        position: 'absolute',
+        textAlign: 'center',
+        width: '100%',
+        fontWeight: 'bold',
+    },
+});
diff --git a/src/MeasureY.js b/src/MeasureY.js
index 250ce02..75ae045 100644
--- a/src/MeasureY.js
+++ b/src/MeasureY.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Animated, Dimensions, PanResponder, Text, View } from 'react-native';
+import { Animated, Dimensions, PanResponder, StyleSheet, Text, View } from 'react-native';
 
 const { width, height } = Dimensions.get('screen');
 
@@ -37,24 +37,22 @@ export class MeasureY extends PureComponent {
         });
     }
 
-    modifyHorizonalAlignment({ tick }) {
-        if (tick < 10) {
+    modifyAlignment({ mark }) {
+        if (mark === 0) {
             return { alignItems: 'flex-start' };
-        } else if (tick > width - 10) {
+        } else if (mark === width) {
             return { alignItems: 'flex-end' };
         }
+        return { alignItems: 'center' };
     }
 
-    renderHorizontalRulerTicks() {
-        const ticks = [0, width * 0.25, width * 0.5, width * 0.75, width];
-        return ticks.map((tick) => {
+    renderHatchMarks() {
+        const marks = [0, width * 0.25, width * 0.5, width * 0.75, width];
+        return marks.map((mark) => {
             return (
-                <View
-                    key={tick}
-                    style={[{ alignItems: 'center' }, this.modifyHorizonalAlignment({ tick })]}
-                >
+                <View key={mark} style={[{ width: 50 }, this.modifyAlignment({ mark })]}>
                     <View style={{ width: 1, height: 10, backgroundColor: 'black' }} />
-                    <Text>{tick}</Text>
+                    <Text>{mark}</Text>
                 </View>
             );
         });
@@ -68,29 +66,33 @@ export class MeasureY extends PureComponent {
         };
 
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
                 <Text
-                    style={{
-                        position: 'absolute',
-                        top: yLine - 15,
-                    }}
+                    style={[
+                        defaultStyles.lineText,
+                        {
+                            top: yLine - 15,
+                        },
+                    ]}
                 >
                     {yLine.toFixed(2)}
                 </Text>
                 <View
                     style={{
                         position: 'absolute',
-                        width,
+                        width: '100%',
                         height: 1,
                         backgroundColor: 'black',
                         top: yLine,
                     }}
                 />
                 <Text
-                    style={{
-                        position: 'absolute',
-                        top: yLine,
-                    }}
+                    style={[
+                        defaultStyles.lineText,
+                        {
+                            top: yLine,
+                        },
+                    ]}
                 >
                     {yLine.toFixed(2)}
                 </Text>
@@ -102,35 +104,36 @@ export class MeasureY extends PureComponent {
                             position: 'absolute',
                             bottom: 0,
                             right: 0,
-                            width,
+                            width: '100%',
                             zIndex: 10,
                         },
                     ]}
                 >
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            height: 1,
-                        }}
-                    />
                     <View
                         style={{
                             backgroundColor: 'yellow',
                             justifyContent: 'space-between',
                             flexDirection: 'row',
-                            height: 28,
+                            height: 30,
+                            borderTopColor: 'black',
+                            borderBottomColor: 'black',
+                            borderTopWidth: 1,
+                            borderBottomWidth: 1,
                         }}
                     >
-                        {this.renderHorizontalRulerTicks()}
+                        {this.renderHatchMarks()}
                     </View>
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            height: 1,
-                        }}
-                    />
                 </Animated.View>
             </View>
         );
     }
 }
+
+const defaultStyles = StyleSheet.create({
+    lineText: {
+        position: 'absolute',
+        textAlign: 'center',
+        width: '100%',
+        fontWeight: 'bold',
+    },
+});
diff --git a/src/index.js b/src/index.js
index c40a86f..55011ab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,14 @@
 import React, { PureComponent } from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
 import { MeasureY } from './MeasureY';
 // import { MeasureX } from "./MeasureX";
-
-const { width, height } = Dimensions.get('screen');
+// TODO: finish MeasureX
 
 export class RNRuler extends PureComponent {
     render() {
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
+                {/* <MeasureX /> */}
                 <MeasureY />
             </View>
         );