ta-react-xarrows
Version:
Draw arrows (or lines) between components in React!
91 lines • 3.99 kB
JavaScript
;
/**
* utility functions for preparing `startAnchor` and `endAnchor` to accept the diffrent types that can be passed.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.getShortestLine = exports.prepareAnchorLines = void 0;
var index_1 = require("./index");
var index_2 = require("../index");
var getAnchorsDefaultOffsets = function (width, height) {
return {
middle: { rightness: width * 0.5, bottomness: height * 0.5 },
left: { rightness: 0, bottomness: height * 0.5 },
right: { rightness: width, bottomness: height * 0.5 },
top: { rightness: width * 0.5, bottomness: 0 },
bottom: { rightness: width * 0.5, bottomness: height },
};
};
exports.prepareAnchorLines = function (anchor, anchorPos) {
var defsOffsets = getAnchorsDefaultOffsets(anchorPos.right - anchorPos.x, anchorPos.bottom - anchorPos.y);
// convert given anchors to array if not array already
var anchorChoice = Array.isArray(anchor) ? anchor : [anchor];
if (anchorChoice.length == 0)
anchorChoice = ['auto'];
//now map each item in the array to relevant object
var anchorChoiceMapped = anchorChoice.map(function (anchorChoice) {
if (index_1.typeOf(anchorChoice) === 'string') {
if (!index_2.tAnchorEdge.includes(anchorChoice))
anchorChoice = 'auto';
anchorChoice = anchorChoice;
return {
position: anchorChoice,
offset: { rightness: 0, bottomness: 0 },
};
}
else if (index_1.typeOf(anchorChoice) === 'object') {
if (!anchorChoice.offset)
anchorChoice.offset = { rightness: 0, bottomness: 0 };
if (!anchorChoice.offset.bottomness)
anchorChoice.offset.bottomness = 0;
if (!anchorChoice.offset.rightness)
anchorChoice.offset.rightness = 0;
anchorChoice = anchorChoice;
return anchorChoice;
}
});
//now build the object that represents the users possibilities for different anchors
var anchorPossibilities = [];
if (anchorChoiceMapped.map(function (a) { return a.position; }).includes('auto')) {
var autoAnchor_1 = anchorChoiceMapped.find(function (a) { return a.position === 'auto'; });
['left', 'right', 'top', 'bottom'].forEach(function (anchor) {
var offset = defsOffsets[anchor];
offset.rightness += autoAnchor_1.offset.rightness;
offset.bottomness += autoAnchor_1.offset.bottomness;
anchorPossibilities.push({ position: anchor, offset: offset });
});
}
else {
anchorChoiceMapped.forEach(function (customAnchor) {
var offset = defsOffsets[customAnchor.position];
offset.rightness += customAnchor.offset.rightness;
offset.bottomness += customAnchor.offset.bottomness;
anchorPossibilities.push({ position: customAnchor.position, offset: offset });
});
}
// now prepare this list of anchors to object expected by the `getShortestLine` function
return anchorPossibilities.map(function (pos) { return ({
x: anchorPos.x + pos.offset.rightness,
y: anchorPos.y + pos.offset.bottomness,
anchorPosition: pos.position,
}); });
};
var dist = function (p1, p2) {
//length of line
return Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2));
};
exports.getShortestLine = function (sPoints, ePoints) {
// closes tPair Of Points which feet to the specified anchors
var minDist = Infinity, d = Infinity;
var closestPair;
sPoints.forEach(function (sp) {
ePoints.forEach(function (ep) {
d = dist(sp, ep);
if (d < minDist) {
minDist = d;
closestPair = { startPointObj: sp, endPointObj: ep };
}
});
});
return closestPair;
};
//# sourceMappingURL=anchors.js.map