import { percentToPixel } from './tools' type curveType = 'curves' | 'straight' | 'flows' type pathVersions = { [key in curveType]: string } type ArrowGenerator = ( offset: { x: number; y: number }, svgSize: number[], linePadding: number, lineHeight: number, type: curveType ) => string export const ArrowGenerator: ArrowGenerator = ( offset, svgSize, linePadding, lineHeight, type ) => { const x = percentToPixel(offset.x, svgSize[0]) const y = percentToPixel(offset.y, svgSize[1]) let xStart = 0 let yStart = 0 // lineHeight = lineHeight * 0.8 // Padding to Annotation if (Math.abs(offset.x) < Math.abs(offset.y)) { // more vertical yStart = y < 0 ? -linePadding : linePadding yStart -= y < 0 ? lineHeight : -lineHeight * 1.5 } else { // more horizontal xStart = x < 0 ? -linePadding : linePadding if (type === 'curves' && offset.y !== 0) { yStart -= y < 0 ? lineHeight : -lineHeight } } const pathVersions: pathVersions = { flows: 'M' + xStart + ' ' + yStart + ' C ' + x * 0.3 + ' ' + yStart + ', ' + (x - x * 0.6) + ' ' + y + ', ' + x + ',' + y, straight: 'M' + xStart + ' ' + yStart + ' L' + x + ',' + y, curves: 'M' + xStart + ' ' + yStart + ' C ' + xStart + ' ' + (y - y * 0.5) + ', ' + (x - x * 0.5) + ' ' + y + ', ' + x + ',' + y } if (Math.abs(offset.x) < 1) return pathVersions.straight return pathVersions[type] }