Fix linking

This commit is contained in:
barsdeveloper
2022-02-19 23:01:52 +01:00
parent 45918eebaa
commit 55b12bac0c
5 changed files with 131 additions and 63 deletions

View File

@@ -9,6 +9,14 @@ import Utility from "../Utility"
*/
export default class LinkTemplate extends Template {
static pixelToUnit(pixels, pixelFullSize) {
return pixels * 100 / pixelFullSize
}
static unitToPixel(units, pixelFullSize) {
return Math.round(units * pixelFullSize / 100)
}
/**
* Computes the html content of the target element.
* @param {GraphLink} link Link connecting two graph nodes
@@ -52,9 +60,12 @@ export default class LinkTemplate extends Template {
const height = Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
const fillRatio = dx / width
const aspectRatio = width / height
let start = dx < width
? (width - dx) / width * 100 / 2
: 0
const xInverted = link.originatesFromInput
? link.sourceLocation[0] < link.destinationLocation[0]
: link.destinationLocation[0] < link.sourceLocation[0]
let start = dx < width // If under minimum width
? (width - dx) / 2 // Start from half the empty space
: 0 // Otherwise start from the beginning
{
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
@@ -63,16 +74,23 @@ export default class LinkTemplate extends Template {
link.style.setProperty("margin-left", `-${start}px`)
}
let c1 = 15
const xInverted = link.originatesFromInput
? link.sourceLocation[0] < link.destinationLocation[0]
: link.destinationLocation[0] < link.sourceLocation[0]
if (!xInverted) {
c1 = start + c1 * fillRatio
} else {
start = start + fillRatio * 100
c1 = start + c1 * fillRatio * 100 / width
c1 = start + c1 * fillRatio
}
let c2 = Math.max(40 / aspectRatio, 30) + start
const c2Decreasing = -0.05
const getMaxC2 = (m, p) => {
const a = -m * p[0] * p[0]
const q = p[1] - a / p[0]
return x => a / x + q
}
const controlPoint = [500, 140]
if (xInverted) {
c2 = Math.min(c2, getMaxC2(c2Decreasing, controlPoint)(width))
}
let c2 = Math.max(40 / aspectRatio, 30) + start * 1.4
const d = Configuration.linkRightSVGPath(start, c1, c2)
// TODO move to CSS when Firefox will support property d
link.pathElement.setAttribute("d", d)