Expand and hide center connector

src/Connector.js

@@ -1,25 +1,21 @@
-import React, {Component} from 'react';
-import {
-  PanResponder,
-  View,
-} from 'react-native';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import { PanResponder, View } from "react-native";
+import PropTypes from "prop-types";
 
-export const CONNECTOR_TOP_LEFT = 'tl';
-export const CONNECTOR_TOP_MIDDLE = 'tm';
-export const CONNECTOR_TOP_RIGHT = 'tr';
-export const CONNECTOR_MIDDLE_RIGHT = 'mr';
-export const CONNECTOR_BOTTOM_RIGHT = 'br';
-export const CONNECTOR_BOTTOM_MIDDLE = 'bm';
-export const CONNECTOR_BOTTOM_LEFT = 'bl';
-export const CONNECTOR_MIDDLE_LEFT = 'ml';
-export const CONNECTOR_CENTER = 'c';
+export const CONNECTOR_TOP_LEFT = "tl";
+export const CONNECTOR_TOP_MIDDLE = "tm";
+export const CONNECTOR_TOP_RIGHT = "tr";
+export const CONNECTOR_MIDDLE_RIGHT = "mr";
+export const CONNECTOR_BOTTOM_RIGHT = "br";
+export const CONNECTOR_BOTTOM_MIDDLE = "bm";
+export const CONNECTOR_BOTTOM_LEFT = "bl";
+export const CONNECTOR_MIDDLE_LEFT = "ml";
+export const CONNECTOR_CENTER = "c";
 
 /**
  * Connector component for handle touch events.
  */
 export class Connector extends Component {
-
   constructor(props) {
     super(props);
 
@@ -39,24 +35,17 @@ export class Connector extends Component {
         // The gesture has started. Show visual feedback so the user knows
         // what is happening!
         // gestureState.d{x,y} will be set to zero now
-        const {
-          onStart
-        } = this.props;
+        const { onStart } = this.props;
 
         this.position = {
           x: 0,
           y: 0,
         };
 
-        onStart([
-          0,
-          0,
-        ]);
+        onStart([0, 0]);
       },
       onPanResponderMove: (event, gestureState) => {
-        const {
-          onMove
-        } = this.props;
+        const { onMove } = this.props;
 
         onMove([
           gestureState.dx - this.position.x,
@@ -72,14 +61,9 @@ export class Connector extends Component {
       onPanResponderRelease: (event, gestureState) => {
         // The user has released all touches while this view is the
         // responder. This typically means a gesture has succeeded
-        const {
-          onEnd
-        } = this.props;
+        const { onEnd } = this.props;
 
-        onEnd([
-          gestureState.moveX,
-          gestureState.moveY,
-        ]);
+        onEnd([gestureState.moveX, gestureState.moveY]);
       },
       onPanResponderTerminate: (event, gestureState) => {
         // Another component has become the responder, so this gesture
@@ -98,22 +82,50 @@ export class Connector extends Component {
       x,
       y,
       size,
+      width,
+      height,
+      connectorType,
+      connectorStyle,
+      customConnector,
     } = this.props;
+    const LESS = 12;
+    const CONNECTOR_CENTER_WIDTH = width - size - LESS;
+    const CONNECTOR_CENTER_HEIGHT = height - size - LESS;
+    const CONNECTOR_CENTER_LEFT = x + size / 2 + LESS / 2;
+    const CONNECTOR_CENTER_RIGHT = y + size / 2 + LESS / 2;
 
-    return (
+    return connectorType.type === "center" ? (
       <View
         style={{
-          position: 'absolute',
-          left: x,
-          top: y,
-          width: size,
-          height: size,
-          borderWidth: 2,
-          borderColor: 'black',
-          backgroundColor: 'white'
+          position: "absolute",
+          backgroundColor: "transparent",
+          borderWidth: 1,
+          borderColor: "black",
+          left: CONNECTOR_CENTER_LEFT,
+          top: CONNECTOR_CENTER_RIGHT,
+          width: CONNECTOR_CENTER_WIDTH,
+          height: CONNECTOR_CENTER_HEIGHT,
         }}
         {...this._panResponder.panHandlers}
       />
+    ) : (
+      <View
+        style={[
+          {
+            position: "absolute",
+            left: x,
+            top: y,
+            width: size,
+            height: size,
+            borderWidth: 1,
+            borderColor: "black",
+            backgroundColor: "white",
+          },
+          connectorStyle,
+        ]}
+        {...this._panResponder.panHandlers}>
+        {customConnector ? customConnector : null}
+      </View>
     );
   }
 }