|
| 1 | +import {create} from "d3"; |
| 2 | +import {radians} from "../math.js"; |
| 3 | +import {Mark} from "../plot.js"; |
| 4 | +import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js"; |
| 5 | +import {maybeSameValue} from "./link.js"; |
| 6 | + |
| 7 | +const defaults = { |
| 8 | + fill: "none", |
| 9 | + stroke: "currentColor", |
| 10 | + strokeLinecap: "round", |
| 11 | + strokeMiterlimit: 1, |
| 12 | + strokeWidth: 1.5 |
| 13 | +}; |
| 14 | + |
| 15 | +export class Arrow extends Mark { |
| 16 | + constructor(data, options = {}) { |
| 17 | + const { |
| 18 | + x1, |
| 19 | + y1, |
| 20 | + x2, |
| 21 | + y2, |
| 22 | + bend = 0, |
| 23 | + headAngle = 60, |
| 24 | + headLength = 8, |
| 25 | + inset = 0, |
| 26 | + insetStart = inset, |
| 27 | + insetEnd = inset |
| 28 | + } = options; |
| 29 | + super( |
| 30 | + data, |
| 31 | + [ |
| 32 | + {name: "x1", value: x1, scale: "x"}, |
| 33 | + {name: "y1", value: y1, scale: "y"}, |
| 34 | + {name: "x2", value: x2, scale: "x", optional: true}, |
| 35 | + {name: "y2", value: y2, scale: "y", optional: true} |
| 36 | + ], |
| 37 | + options, |
| 38 | + defaults |
| 39 | + ); |
| 40 | + this.bend = bend === true ? 22.5 : Math.max(-90, Math.min(90, bend)); |
| 41 | + this.headAngle = +headAngle; |
| 42 | + this.headLength = +headLength; |
| 43 | + this.insetStart = +insetStart; |
| 44 | + this.insetEnd = +insetEnd; |
| 45 | + } |
| 46 | + render(index, {x, y}, channels) { |
| 47 | + const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, SW} = channels; |
| 48 | + const {dx, dy, strokeWidth, bend, headAngle, headLength, insetStart, insetEnd} = this; |
| 49 | + const sw = SW ? i => SW[i] : () => strokeWidth; |
| 50 | + |
| 51 | + // When bending, the offset between the straight line between the two points |
| 52 | + // and the outgoing tangent from the start point. (Also the negative |
| 53 | + // incoming tangent to the end point.) This must be within ±π/2. A positive |
| 54 | + // angle will produce a clockwise curve; a negative angle will produce a |
| 55 | + // counterclockwise curve; zero will produce a straight line. |
| 56 | + const bendAngle = bend * radians; |
| 57 | + |
| 58 | + // The angle between the arrow’s shaft and one of the wings; the “head” |
| 59 | + // angle between the wings is twice this value. |
| 60 | + const wingAngle = headAngle * radians / 2; |
| 61 | + |
| 62 | + // The length of the arrowhead’s “wings” (the line segments that extend from |
| 63 | + // the end point) relative to the stroke width. |
| 64 | + const wingScale = headLength / 1.5; |
| 65 | + |
| 66 | + return create("svg:g") |
| 67 | + .call(applyIndirectStyles, this) |
| 68 | + .call(applyTransform, x, y, offset + dx, offset + dy) |
| 69 | + .call(g => g.selectAll() |
| 70 | + .data(index) |
| 71 | + .join("path") |
| 72 | + .call(applyDirectStyles, this) |
| 73 | + .attr("d", i => { |
| 74 | + let x1 = X1[i], y1 = Y1[i], x2 = X2[i], y2 = Y2[i]; |
| 75 | + let lineAngle = Math.atan2(y2 - y1, x2 - x1); |
| 76 | + const lineLength = Math.hypot(x2 - x1, y2 - y1); |
| 77 | + |
| 78 | + // We don’t allow the wing length to be too large relative to the |
| 79 | + // length of the arrow. (Plot.vector allows arbitrarily large |
| 80 | + // wings, but that’s okay since vectors are usually small.) |
| 81 | + const headLength = Math.min(wingScale * sw(i), lineLength / 3); |
| 82 | + |
| 83 | + // The radius of the circle that intersects with the two endpoints |
| 84 | + // and has the specified bend angle. |
| 85 | + const r = Math.hypot(lineLength / Math.tan(bendAngle), lineLength) / 2; |
| 86 | + |
| 87 | + // Apply insets. |
| 88 | + if (insetStart || insetEnd) { |
| 89 | + if (r < 1e5) { |
| 90 | + // For inset swoopy arrows, compute the circle-circle |
| 91 | + // intersection between a circle centered around the |
| 92 | + // respective arrow endpoint and the center of the circle |
| 93 | + // segment that forms the shaft of the arrow. |
| 94 | + const sign = Math.sign(bendAngle); |
| 95 | + const [cx, cy] = pointPointCenter([x1, y1], [x2, y2], r, sign); |
| 96 | + if (insetStart) { |
| 97 | + ([x1, y1] = circleCircleIntersect([cx, cy, r], [x1, y1, insetStart], -sign * Math.sign(insetStart))); |
| 98 | + } |
| 99 | + // For the end inset, rotate the arrowhead so that it aligns |
| 100 | + // with the truncated end of the arrow. Since the arrow is a |
| 101 | + // segment of the circle centered at <cx,cy>, we can compute |
| 102 | + // the angular difference to the new endpoint. |
| 103 | + if (insetEnd) { |
| 104 | + const [x, y] = circleCircleIntersect([cx, cy, r], [x2, y2, insetEnd], sign * Math.sign(insetEnd)); |
| 105 | + lineAngle += Math.atan2(y - cy, x - cx) - Math.atan2(y2 - cy, x2 - cx); |
| 106 | + x2 = x, y2 = y; |
| 107 | + } |
| 108 | + } else { |
| 109 | + // For inset straight arrows, offset along the straight line. |
| 110 | + const dx = x2 - x1, dy = y2 - y1, d = Math.hypot(dx, dy); |
| 111 | + if (insetStart) x1 += dx / d * insetStart, y1 += dy / d * insetStart; |
| 112 | + if (insetEnd) x2 -= dx / d * insetEnd, y2 -= dy / d * insetEnd; |
| 113 | + } |
| 114 | + } |
| 115 | + |
| 116 | + // The angle of the arrow as it approaches the endpoint, and the |
| 117 | + // angles of the adjacent wings. Here “left” refers to if the |
| 118 | + // arrow is pointing up. |
| 119 | + const endAngle = lineAngle + bendAngle; |
| 120 | + const leftAngle = endAngle + wingAngle; |
| 121 | + const rightAngle = endAngle - wingAngle; |
| 122 | + |
| 123 | + // The endpoints of the two wings. |
| 124 | + const x3 = x2 - headLength * Math.cos(leftAngle); |
| 125 | + const y3 = y2 - headLength * Math.sin(leftAngle); |
| 126 | + const x4 = x2 - headLength * Math.cos(rightAngle); |
| 127 | + const y4 = y2 - headLength * Math.sin(rightAngle); |
| 128 | + |
| 129 | + // If the radius is very large (or even infinite, as when the bend |
| 130 | + // angle is zero), then render a straight line. |
| 131 | + return `M${x1},${y1}${r < 1e5 ? `A${r},${r} 0,0,${bendAngle > 0 ? 1 : 0} ` : `L`}${x2},${y2}M${x3},${y3}L${x2},${y2}L${x4},${y4}`; |
| 132 | + }) |
| 133 | + .call(applyChannelStyles, this, channels)) |
| 134 | + .node(); |
| 135 | + } |
| 136 | +} |
| 137 | + |
| 138 | +function pointPointCenter([ax, ay], [bx, by], r, sign = 1) { |
| 139 | + const dx = bx - ax, dy = by - ay, d = Math.hypot(dx, dy); |
| 140 | + const k = sign * Math.sqrt(r * r - d * d / 4) / d; |
| 141 | + return [(ax + bx) / 2 - dy * k, (ay + by) / 2 + dx * k]; |
| 142 | +} |
| 143 | + |
| 144 | +function circleCircleIntersect([ax, ay, ar], [bx, by, br], sign = 1) { |
| 145 | + const dx = bx - ax, dy = by - ay, d = Math.hypot(dx, dy); |
| 146 | + const x = (dx * dx + dy * dy - br * br + ar * ar) / (2 * d); |
| 147 | + const y = sign * Math.sign(ay) * Math.sqrt(ar * ar - x * x); |
| 148 | + return [ax + (dx * x + dy * y) / d, ay + (dy * x - dx * y) / d]; |
| 149 | +} |
| 150 | + |
| 151 | +export function arrow(data, {x, x1, x2, y, y1, y2, ...options} = {}) { |
| 152 | + ([x1, x2] = maybeSameValue(x, x1, x2)); |
| 153 | + ([y1, y2] = maybeSameValue(y, y1, y2)); |
| 154 | + return new Arrow(data, {...options, x1, x2, y1, y2}); |
| 155 | +} |
0 commit comments