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

[fix] arrow rendering safari (#1767)

Browse source 
This PR fixes an arrow rendering bug in Safari.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create arrows in safari
2. Drag them
This commit is contained in:
Steve Ruiz 2023-07-26 17:58:20 +01:00 committed by GitHub
parent 28b92c5e76
commit e3f4cac786
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
View file

@ -571,7 +571,6 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
info.start.arrowhead === 'none' || info.start.arrowhead === 'arrow'
)
const maskEndArrowhead = !(info.end.arrowhead === 'none' || info.end.arrowhead === 'arrow')
const includeMask = maskStartArrowhead || maskEndArrowhead || !!labelGeometry
// NOTE: I know right setting `changeIndex` hacky-as right! But we need this because otherwise safari loses
// the mask, see <https://linear.app/tldraw/issue/TLD-1500/changing-arrow-color-makes-line-pass-through-text>
@ -580,44 +579,43 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
return (
<>
<SVGContainer id={shape.id} style={{ minWidth: 50, minHeight: 50 }}>
{includeMask && (
<defs>
<mask id={maskId}>
{/* Yep */}
<defs>
<mask id={maskId}>
<rect
x={toDomPrecision(-100 + bounds.minX)}
y={toDomPrecision(-100 + bounds.minY)}
width={toDomPrecision(bounds.width + 200)}
height={toDomPrecision(bounds.height + 200)}
fill="white"
/>
{labelGeometry && (
<rect
x={toDomPrecision(-100 + bounds.minX)}
y={toDomPrecision(-100 + bounds.minY)}
width={toDomPrecision(bounds.width + 200)}
height={toDomPrecision(bounds.height + 200)}
fill="white"
x={labelGeometry.x}
y={labelGeometry.y}
width={labelGeometry.w}
height={labelGeometry.h}
fill="black"
rx={4}
ry={4}
/>
{labelGeometry && (
<rect
x={labelGeometry.x}
y={labelGeometry.y}
width={labelGeometry.w}
height={labelGeometry.h}
fill="black"
rx={4}
ry={4}
/>
)}
{as && maskStartArrowhead && (
<path
d={as}
fill={info.start.arrowhead === 'arrow' ? 'none' : 'black'}
stroke="none"
/>
)}
{ae && maskEndArrowhead && (
<path
d={ae}
fill={info.end.arrowhead === 'arrow' ? 'none' : 'black'}
stroke="none"
/>
)}
</mask>
</defs>
)}
)}
{as && maskStartArrowhead && (
<path
d={as}
fill={info.start.arrowhead === 'arrow' ? 'none' : 'black'}
stroke="none"
/>
)}
{ae && maskEndArrowhead && (
<path
d={ae}
fill={info.end.arrowhead === 'arrow' ? 'none' : 'black'}
stroke="none"
/>
)}
</mask>
</defs>
<g
fill="none"
stroke={theme[shape.props.color].solid}
@ -628,17 +626,14 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
>
{handlePath}
{/* firefox will clip if you provide a maskURL even if there is no mask matching that URL in the DOM */}
<g {...(includeMask ? { mask: `url(#${maskId})` } : undefined)}>
{/* This rect needs to be here if we're creating a mask due to an svg quirk on Chrome */}
{includeMask && (
<rect
x={toDomPrecision(bounds.minX - 100)}
y={toDomPrecision(bounds.minY - 100)}
width={toDomPrecision(bounds.width + 200)}
height={toDomPrecision(bounds.height + 200)}
opacity={0}
/>
)}
<g mask={`url(#${maskId})`}>
<rect
x={toDomPrecision(bounds.minX - 100)}
y={toDomPrecision(bounds.minY - 100)}
width={toDomPrecision(bounds.width + 200)}
height={toDomPrecision(bounds.height + 200)}
opacity={0}
/>
<path
d={path}
strokeDasharray={strokeDasharray}