Add support for optional arrow click handler and pointer cursor (#20)

example/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import FirstExample from './FirstExample';
 import SecondExample from './SecondExample';
+import ThirdExample from './ThirdExample';
 
 class App extends React.Component {
   state = { currentExample: 1 };
@@ -11,6 +12,8 @@ class App extends React.Component {
         return FirstExample;
       case 2:
         return SecondExample;
+      case 3:
+        return ThirdExample;
       default:
         return SecondExample;
     }
@@ -29,6 +32,7 @@ class App extends React.Component {
           <p>Choose an example:</p>
           <button onClick={this.changeExample(1)}>Example 1</button>
           <button onClick={this.changeExample(2)}>Example 2</button>
+          <button onClick={this.changeExample(3)}>Example 3</button>
         </div>
         <hr />
         <Example />

example/ThirdExample.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import ArcherContainer from '../src/ArcherContainer';
+import ArcherElement from '../src/ArcherElement';
+
+const boxStyle = { padding: '10px', border: '1px solid black' };
+const elementStyle = {
+  width: '100px',
+  height: '30px',
+  position: 'absolute',
+  textAlign: 'center',
+};
+
+const initialState = {
+  elements: [{
+    id: 'root',
+    label: 'Root',
+    position: { x: 400, y: 0 },
+    relations: [{
+      from: { anchor: 'bottom' },
+      to: { anchor: 'top', id: 'element2' },
+    }],
+  }, {
+    id: 'element2',
+    label: 'Element 2',
+    position: { x: 100, y: 200 },
+    relations: [{
+      from: { anchor: 'right' },
+      to: { anchor: 'left', id: 'element3' },
+      label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>,
+    }],
+  }, {
+    id: 'element3',
+    label: 'Element 3',
+    position: { x: 600, y: 200 },
+    relations: [],
+  }],
+};
+
+class ThirdExample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.onArrowClick = this.onArrowClick.bind(this)
+  }
+  deleteRelation(from, to) {
+    const elements = this.state.elements.map(el => {
+      if (el.id !== from) return el;
+      const relations = el.relations.filter(rel => {
+        return rel.to.id !== to;
+      });
+      return { ...el, relations };
+    });
+    this.setState({ elements });
+  }
+  renderElement(el) {
+    const { id, label, relations, position } = el;
+    return (
+      <ArcherElement
+        key={id}
+        id={id}
+        relations={relations}
+        style={{ ...elementStyle, top: position.y, left: position.x }}
+      >
+        <div style={boxStyle}>{label}</div>
+      </ArcherElement>
+    );
+  }
+  onArrowClick(evt, markerId, from, to) {
+    const { nativeEvent } = evt;
+    this.deleteRelation(from, to);
+  }
+  render() {
+    return (
+      <div style={{ height: '500px', margin: '50px' }}>
+        <ArcherContainer strokeColor="red" style={{ height: '100%' }} onClick={this.onArrowClick}>
+          {this.state.elements.map(this.renderElement)}
+        </ArcherContainer>
+      </div>
+    );
+  }
+}
+
+export default ThirdExample;

src/ArcherContainer.js

@@ -14,6 +14,7 @@ type Props = {
   children: React$Node,
   style?: Object,
   className?: string,
+  onClick?: Function,
 };
 
 type State = {
@@ -252,6 +253,13 @@ export class ArcherContainer extends React.Component<Props, State> {
         to.id,
         parentCoordinates,
       );
+      const markerId = this.getMarkerId(from, to);
+      const clickHandler = this.props.onClick
+        ? (evt) => {
+          if (this.props.onClick) {
+            this.props.onClick(evt, markerId, from.id, to.id);
+          }
+        } : null;
 
       const strokeColor =
         (style && style.strokeColor) || this.props.strokeColor;
@@ -273,7 +281,8 @@ export class ArcherContainer extends React.Component<Props, State> {
           arrowLength={arrowLength}
           strokeWidth={strokeWidth}
           arrowLabel={label}
-          arrowMarkerId={this.getMarkerId(from, to)}
+          arrowMarkerId={markerId}
+          onClick={clickHandler}
         />
       );
     });
@@ -337,15 +346,17 @@ export class ArcherContainer extends React.Component<Props, State> {
         }}
       >
         <div
-          style={{ ...this.props.style, position: 'relative' }}
+          style={{ ...this.props.style, position: 'relative', pointerEvents: 'none' }}
           className={this.props.className}
         >
           <svg style={svgContainerStyle}>
             <defs>{this.generateAllArrowMarkers()}</defs>
             {SvgArrows}
           </svg>
 
-          <div ref={this.storeParent}>{this.props.children}</div>
+          <div ref={this.storeParent} style={{ pointerEvents: 'auto' }}>
+            {this.props.children}
+          </div>
         </div>
       </ArcherContainerContextProvider>
     );

src/SvgArrow.js

@@ -13,6 +13,7 @@ type Props = {
   strokeWidth: number,
   arrowLabel?: ?React$Node,
   arrowMarkerId: string,
+  onClick?: ?Function,
 };
 
 function computeEndingArrowDirectionVector(endingAnchor) {
@@ -121,6 +122,7 @@ const SvgArrow = ({
   strokeWidth,
   arrowLabel,
   arrowMarkerId,
+  onClick,
 }: Props) => {
   const actualArrowLength = arrowLength * 2;
 
@@ -155,15 +157,18 @@ const SvgArrow = ({
 
   const { xl, yl, wl, hl } = computeLabelDimensions(xs, ys, xe, ye);
 
+  const cursor = onClick && 'pointer' || '';
+
   return (
-    <g>
+    <g cursor={cursor} pointerEvents="visible">
       <path
         d={pathString}
         style={{ fill: 'none', stroke: strokeColor, strokeWidth }}
         markerEnd={`url(${location.href}#${arrowMarkerId})`}
+        onClick={onClick}
       />
       {arrowLabel && (
-        <foreignObject x={xl} y={yl} width={wl} height={hl}>
+        <foreignObject x={xl} y={yl} width={wl} height={hl} pointerEvents="none">
           <div
             style={{
               width: wl,