offset anchors towards facing direction

Is your feature request related to a problem? Please describe. When a straight arrow is anchored to a circular/round element, neither middle nor auto is a preferable choice.

Describe the solution you’d like It would be nice if there were a variant of middle where you could provide a radius offset where the arrow would point towards the middle of the target element, but is radius-amount shorter.

Of course, this type of anchor would only really be useful on straight arrows.

[Eliav2]

understood, you are right and this is planned for the next release. will leave this issue open as a feature request until the next release that solves this.

[sillydan1]

For anyone interested, this is how I ended up sidestepping this issue (please excuse the messy code) note that this code is not very performant:

import React, {Component} from "react";
import Xarrow from "react-xarrows";
import * as ReactDOM from "react-dom";


class Edge extends Component {
    state = {
        startOffset: {},
        endOffset: {}
    }

    dist(a, b) {
        return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
    }

    calculateOffset(startId, endId) {
        let start_el = document.getElementById(startId);
        let end_el = document.getElementById(endId);
        if(start_el === null || end_el === null)
            return {x:0, y:0};
        let start_box = start_el.getBoundingClientRect();
        let end_box = end_el.getBoundingClientRect();
        let start = {x: start_box.x + start_box.width/2, y: start_box.y + start_box.height/2};
        let end = {x: end_box.x + end_box.width/2, y: end_box.y + end_box.height/2};
        let radius = end_box.width / 2;
        let directionMagnitude = this.dist(start, end);
        if(directionMagnitude === 0)
            return {x:0, y:0};
        let directionNormalized = {
            x: (start.x - end.x) / directionMagnitude,
            y: (start.y - end.y) / directionMagnitude
        };
        return {
            x: (directionNormalized.x * radius),
            y: (directionNormalized.y * radius)
        };
    }

    updateOffsets = () => {
        const startOffset = this.props.startAnchor === 'middle' ? this.calculateOffset(this.props.end, this.props.start) : {x: 0, y: 0};
        const endOffset = this.props.endAnchor === 'middle' ? this.calculateOffset(this.props.start, this.props.end) : {x: 0, y: 0};
        this.setState({
            startOffset: startOffset,
            endOffset: endOffset
        });
    }

    componentDidMount() {
        // TODO: Once react-xarrows supports anchors with offset in facing direction, use that instead.
        ReactDOM.findDOMNode(this).addEventListener("DOMAttrModified", this.updateOffsets.bind(this));
    }

    render() {
        const {start, end, id, startAnchor, endAnchor} = this.props;
        return (
            <Xarrow start={start}
                    end={end}
                    path='straight'
                    startAnchor={{
                        position: startAnchor,
                        offset: this.state.startOffset
                    }}
                    endAnchor={{
                        position: endAnchor,
                        offset: this.state.endOffset
                    }}
            />
        );
    }
}

export default Edge;