x and y axis toggleable

lfkwtz · May 24, 2019 · c0e5ae3 · c0e5ae3
1 parent cb67c32
commit c0e5ae3
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 93 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,6 @@
 node_modules/
 coverage/
 .vscode/
-.npm/
+.npm/
+
+demo/
diff --git a/README.md b/README.md
@@ -22,6 +22,8 @@ import { RNRuler } from 'react-native-ruler';
 <RNRuler />;
 ```
 
+-   Tap the bottom right corner of the ruler to swap between axis
+
 ## License
 
 react-native-ruler is [MIT licensed](https://github.com/lfkwtz/react-native-ruler/tree/master/LICENSE)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-native-ruler",
-    "version": "0.0.7",
+    "version": "0.1.0",
     "description": "A devtool for measuring pixel dimensions on your React Native screens",
     "license": "MIT",
     "author": "Michael Lefkowitz <[email protected]>",

diff --git a/src/MeasureX.js b/src/MeasureX.js
@@ -9,7 +9,8 @@ export class MeasureX extends PureComponent {
 
         this.state = {
             pan: new Animated.ValueXY(),
-            xLine: 0,
+            opacity: new Animated.Value(1),
+            xLine: null,
         };
 
         this._val = { x: 0, y: 0 };
@@ -19,7 +20,10 @@ export class MeasureX extends PureComponent {
         });
 
         this.panResponder = PanResponder.create({
-            onStartShouldSetPanResponder: () => {
+            onStartShouldSetPanResponder: ({ nativeEvent }, { numberActiveTouches }) => {
+                if (nativeEvent.pageY > height * 0.95 || numberActiveTouches > 1) {
+                    this.props.swapLines();
+                }
                 return true;
             },
             onPanResponderMove: Animated.event([
@@ -28,79 +32,107 @@ export class MeasureX extends PureComponent {
                     dx: this.state.pan.x,
                 },
             ]),
-            onPanResponderRelease: (e, gesture) => {
-                const xLine = width + gesture.dx - 30;
+            onPanResponderRelease: (e, { dx }) => {
+                const xLine = width + dx - 30;
                 console.log('x location', xLine);
-                this.setState({ xLine });
-                Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start();
+                this.setState({ xLine, opacity: new Animated.Value(1) }, () => {
+                    Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start();
+                    Animated.timing(this.state.opacity, {
+                        toValue: 0,
+                        duration: 1500,
+                    }).start();
+                });
             },
         });
     }
 
-    modifyVerticalAlignment({ tick }) {
-        if (tick < 10) {
-            return { alignItems: 'flex-end' };
-        } else if (tick > height - 10) {
-            return { alignItems: 'flex-start' };
+    setAlignment({ mark }) {
+        if (mark === 0) {
+            return 2;
+        } else if (mark === height) {
+            return -12;
         }
+        return 2;
     }
 
-    renderVerticalRulerTicks() {
-        const ticks = [0, height * 0.25, height * 0.5, height * 0.75, height];
-        return ticks.map((tick) => {
+    renderHatchMarks() {
+        const marks = [0, height * 0.25, height * 0.5, height * 0.75, height];
+        return marks.map((mark, idx) => {
             return (
-                <View
-                    key={tick}
-                    //   style={[
-                    //     { alignItems: "center" },
-                    //     this.modifyVerticalAlignment({ tick })
-                    //   ]}
-                >
+                <View key={mark}>
                     <View style={{ width: 10, height: 1, backgroundColor: 'black' }} />
-                    <Text style={{ fontSize: 10 }}>{tick}</Text>
+                    <Text
+                        style={{
+                            fontSize: 11,
+                            position: 'absolute',
+                            top: this.setAlignment({ mark }),
+                            left: 1,
+                        }}
+                    >
+                        {mark}
+                    </Text>
                 </View>
             );
         });
     }
 
     render() {
-        const { xLine, pan } = this.state;
+        const { xLine, pan, opacity } = this.state;
 
         const panStyle = {
             transform: pan.getTranslateTransform(),
         };
 
         return (
-            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
-                <Text
+            <View
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    position: 'absolute',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}
+            >
+                <Animated.Text
                     style={{
+                        opacity,
                         position: 'absolute',
-                        left: xLine - 15,
-                        top: 15,
-                        transform: [{ rotate: '90deg' }],
+                        fontSize: 80,
                     }}
+                    testID="linePosition"
                 >
-                    {xLine.toFixed(2)}
-                </Text>
+                    {xLine === null ? '' : xLine.toFixed(2)}
+                </Animated.Text>
+                {/* <Text
+          style={{
+            position: "absolute",
+            left: xLine - 55 + (xLine < 100 ? 10 : 0),
+            top: height / 2,
+            fontWeight: "bold"
+          }}
+        >
+          {xLine.toFixed(2)}
+        </Text> */}
                 <View
                     style={{
                         position: 'absolute',
                         width: 1,
                         height,
-                        backgroundColor: 'black',
+                        backgroundColor: xLine === null ? 'transparent' : 'black',
                         left: xLine,
                     }}
                 />
-                <Text
-                    style={{
-                        position: 'absolute',
-                        left: xLine - 30,
-                        top: 15,
-                        transform: [{ rotate: '90deg' }],
-                    }}
-                >
-                    {xLine.toFixed(2)}
-                </Text>
+                {/* <Text
+          style={{
+            position: "absolute",
+            left: xLine + 5,
+            top: height / 2,
+            fontWeight: "bold",
+            transform: [{ rotate: "90deg" }]
+          }}
+        >
+          {xLine.toFixed(2)}
+        </Text> */}
                 <Animated.View
                     {...this.panResponder.panHandlers}
                     style={[
@@ -110,34 +142,25 @@ export class MeasureX extends PureComponent {
                             bottom: 0,
                             right: 0,
                             height: '100%',
-                            zIndex: 10,
                         },
                     ]}
                 >
                     <View
                         style={{
-                            backgroundColor: 'yellow',
+                            backgroundColor: 'rgba(254,229,95,0.9)',
                             width: 30,
                             height,
                             borderLeftColor: 'black',
                             borderRightColor: 'black',
                             borderLeftWidth: 1,
                             borderRightWidth: 1,
+                            justifyContent: 'space-between',
                         }}
                     >
-                        {/* {this.renderVerticalRulerTicks()} */}
+                        {this.renderHatchMarks()}
                     </View>
                 </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
@@ -9,7 +9,8 @@ export class MeasureY extends PureComponent {
 
         this.state = {
             pan: new Animated.ValueXY(),
-            yLine: 0,
+            opacity: new Animated.Value(1),
+            yLine: null,
         };
 
         this._val = { x: 0, y: 0 };
@@ -19,7 +20,10 @@ export class MeasureY extends PureComponent {
         });
 
         this.panResponder = PanResponder.create({
-            onStartShouldSetPanResponder: () => {
+            onStartShouldSetPanResponder: ({ nativeEvent }, { numberActiveTouches }) => {
+                if (nativeEvent.pageX > width * 0.95 || numberActiveTouches > 1) {
+                    this.props.swapLines();
+                }
                 return true;
             },
             onPanResponderMove: Animated.event([
@@ -28,16 +32,22 @@ export class MeasureY extends PureComponent {
                     dy: this.state.pan.y,
                 },
             ]),
-            onPanResponderRelease: (e, gesture) => {
-                const yLine = height + gesture.dy - 30;
+            onPanResponderRelease: (e, { dy }) => {
+                const yLine = height + dy - 30;
                 console.log('y location', yLine);
-                this.setState({ yLine });
-                Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start();
+
+                this.setState({ yLine, opacity: new Animated.Value(1) }, () => {
+                    Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start();
+                    Animated.timing(this.state.opacity, {
+                        toValue: 0,
+                        duration: 1500,
+                    }).start();
+                });
             },
         });
     }
 
-    modifyAlignment({ mark }) {
+    setAlignment({ mark }) {
         if (mark === 0) {
             return { alignItems: 'flex-start' };
         } else if (mark === width) {
@@ -50,52 +60,70 @@ export class MeasureY extends PureComponent {
         const marks = [0, width * 0.25, width * 0.5, width * 0.75, width];
         return marks.map((mark) => {
             return (
-                <View key={mark} style={[{ width: 50 }, this.modifyAlignment({ mark })]}>
+                <View key={mark} style={[{ width: 50 }, this.setAlignment({ mark })]}>
                     <View style={{ width: 1, height: 10, backgroundColor: 'black' }} />
-                    <Text>{mark}</Text>
+                    <Text style={{ fontSize: 11 }}>{mark}</Text>
                 </View>
             );
         });
     }
 
     render() {
-        const { yLine, pan } = this.state;
+        const { yLine, pan, opacity } = this.state;
 
         const panStyle = {
             transform: pan.getTranslateTransform(),
         };
 
         return (
-            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
-                <Text
-                    style={[
-                        defaultStyles.lineText,
-                        {
-                            top: yLine - 15,
-                        },
-                    ]}
+            <View
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    position: 'absolute',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}
+            >
+                <Animated.Text
+                    style={{
+                        opacity,
+                        position: 'absolute',
+                        fontSize: 80,
+                    }}
+                    testID="linePosition"
                 >
-                    {yLine.toFixed(2)}
-                </Text>
+                    {yLine === null ? '' : yLine.toFixed(2)}
+                </Animated.Text>
+                {/* <Text
+          style={[
+            defaultStyles.lineText,
+            {
+              top: yLine - 15
+            }
+          ]}
+        >
+          {yLine.toFixed(2)}
+        </Text> */}
                 <View
                     style={{
                         position: 'absolute',
                         width: '100%',
                         height: 1,
-                        backgroundColor: 'black',
+                        backgroundColor: yLine === null ? 'transparent' : 'black',
                         top: yLine,
                     }}
                 />
-                <Text
-                    style={[
-                        defaultStyles.lineText,
-                        {
-                            top: yLine,
-                        },
-                    ]}
-                >
-                    {yLine.toFixed(2)}
-                </Text>
+                {/* <Text
+          style={[
+            defaultStyles.lineText,
+            {
+              top: yLine
+            }
+          ]}
+        >
+          {yLine.toFixed(2)}
+        </Text> */}
                 <Animated.View
                     {...this.panResponder.panHandlers}
                     style={[
@@ -105,13 +133,12 @@ export class MeasureY extends PureComponent {
                             bottom: 0,
                             right: 0,
                             width: '100%',
-                            zIndex: 10,
                         },
                     ]}
                 >
                     <View
                         style={{
-                            backgroundColor: 'yellow',
+                            backgroundColor: 'rgba(254,229,95,0.9)',
                             justifyContent: 'space-between',
                             flexDirection: 'row',
                             height: 30,