PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fixes arrow bug

Browse source
This commit is contained in:
Steve Ruiz 2021-06-30 21:30:48 +01:00
parent 9ded94945f
commit 467424d93e
1 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
state/shape-utils/arrow.tsx
View file

@ -105,8 +105,7 @@ const arrow = registerShapeUtils<ArrowShape>({
const strokeWidth = +styles.strokeWidth const strokeWidth = +styles.strokeWidth
const sw = const sw = strokeWidth * 1.618
strokeWidth * (style.dash === DashStyle.Solid && bend === 0 ? 1 : 1.618)
const arrowDist = vec.dist(start.point, end.point) const arrowDist = vec.dist(start.point, end.point)
@ -115,6 +114,9 @@ const arrow = registerShapeUtils<ArrowShape>({
let endAngle: number let endAngle: number
if (isStraightLine) { if (isStraightLine) {
const straight_sw =
strokeWidth * (style.dash === DashStyle.Solid && bend === 0 ? 1 : 1.618)
if (shape.style.dash === DashStyle.Solid && !pathCache.has(shape)) { if (shape.style.dash === DashStyle.Solid && !pathCache.has(shape)) {
renderFreehandArrowShaft(shape) renderFreehandArrowShaft(shape)
} }
@ -141,6 +143,7 @@ const arrow = registerShapeUtils<ArrowShape>({
endAngle = 0 endAngle = 0
// Straight arrow path
shaftPath = ( shaftPath = (
<> <>
<path <path
@ -154,12 +157,12 @@ const arrow = registerShapeUtils<ArrowShape>({
/> />
<path <path
d={path} d={path}
fill="none" fill={styles.stroke}
strokeWidth={sw} strokeWidth={straight_sw}
strokeDasharray={strokeDasharray} strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset} strokeDashoffset={strokeDashoffset}
strokeLinecap="round" strokeLinecap="round"
></path> />
</> </>
) )
} else { } else {
@ -195,6 +198,7 @@ const arrow = registerShapeUtils<ArrowShape>({
vec.angle(start.point, end.point) + vec.angle(start.point, end.point) +
(Math.PI / 2) * (bend > 0 ? 0.98 : -0.98) (Math.PI / 2) * (bend > 0 ? 0.98 : -0.98)
// Curved arrow path
shaftPath = ( shaftPath = (
<> <>
<path <path
@ -224,7 +228,7 @@ const arrow = registerShapeUtils<ArrowShape>({
{shape.decorations.start === Decoration.Arrow && ( {shape.decorations.start === Decoration.Arrow && (
<path <path
d={getArrowHeadPath(shape, start.point, startAngle)} d={getArrowHeadPath(shape, start.point, startAngle)}
strokeWidth={strokeWidth * 1.618} strokeWidth={sw}
fill="none" fill="none"
strokeDashoffset="none" strokeDashoffset="none"
strokeDasharray="none" strokeDasharray="none"
@ -233,7 +237,7 @@ const arrow = registerShapeUtils<ArrowShape>({
{shape.decorations.end === Decoration.Arrow && ( {shape.decorations.end === Decoration.Arrow && (
<path <path
d={getArrowHeadPath(shape, end.point, endAngle)} d={getArrowHeadPath(shape, end.point, endAngle)}
strokeWidth={strokeWidth * 1.618} strokeWidth={sw}
fill="none" fill="none"
strokeDashoffset="none" strokeDashoffset="none"
strokeDasharray="none" strokeDasharray="none"
@ -401,6 +405,8 @@ const arrow = registerShapeUtils<ArrowShape>({
shape.handles[handle.id] = handle shape.handles[handle.id] = handle
} }
const midPoint = vec.med(shape.handles.start.point, shape.handles.end.point)
if ('bend' in handles) { if ('bend' in handles) {
const { start, end, bend } = shape.handles const { start, end, bend } = shape.handles
@ -424,6 +430,10 @@ const arrow = registerShapeUtils<ArrowShape>({
shape.handles.bend.point = getBendPoint(shape) shape.handles.bend.point = getBendPoint(shape)
if (vec.isEqual(shape.handles.bend.point, midPoint)) {
shape.bend = 0
}
return this return this
}, },
@ -512,11 +522,11 @@ function renderFreehandArrowShaft(shape: ArrowShape) {
end.point, end.point,
], ],
{ {
size: 1 + strokeWidth, size: strokeWidth * 0.82,
thinning: 0.6, thinning: 0.6,
easing: (t) => t * t * t * t, easing: (t) => t * t * t * t,
end: { taper: strokeWidth * 2 }, end: { taper: 4 + getRandom() * 4 },
start: { taper: strokeWidth * 2 }, start: { taper: 4 + getRandom() * 4 },
simulatePressure: false, simulatePressure: false,
} }
) )