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

[fix] label (#836)

Browse source 
* fix label

* Update ArrowUtil.tsx
This commit is contained in:
Steve Ruiz 2022-07-21 17:03:31 +01:00 committed by GitHub
parent bdd63443e0
commit 223391afe5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/tldraw/src/state/shapes/ArrowUtil/ArrowUtil.tsx
View file

@ -92,11 +92,19 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
decorations = {}, decorations = {},
style, style,
} = shape } = shape
const hasLabel = label?.trim()?.length ?? 0 > 0
const isStraightLine = Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) < 1 const isStraightLine = Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) < 1
const font = getFontStyle(style) const font = getFontStyle(style)
const styles = getShapeStyle(style, meta.isDarkMode) const styles = getShapeStyle(style, meta.isDarkMode)
const labelSize = label || isEditing ? getTextLabelSize(label, font) : [0, 0]
const labelSize = hasLabel || isEditing ? getTextLabelSize(label, font) : [0, 0]
const bounds = this.getBounds(shape) const bounds = this.getBounds(shape)
const dist = React.useMemo(() => { const dist = React.useMemo(() => {
const { start, bend, end } = shape.handles const { start, bend, end } = shape.handles
if (isStraightLine) return Vec.dist(start.point, end.point) if (isStraightLine) return Vec.dist(start.point, end.point)
@ -106,10 +114,12 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
const length = getArcLength(center, radius, start.point, end.point) const length = getArcLength(center, radius, start.point, end.point)
return Math.abs(length) return Math.abs(length)
}, [shape.handles]) }, [shape.handles])
const scale = Math.max( const scale = Math.max(
0.5, 0.5,
Math.min(1, Math.max(dist / (labelSize[1] + 128), dist / (labelSize[0] + 128))) Math.min(1, Math.max(dist / (labelSize[1] + 128), dist / (labelSize[0] + 128)))
) )
const offset = React.useMemo(() => { const offset = React.useMemo(() => {
const bounds = this.getBounds(shape) const bounds = this.getBounds(shape)
const offset = Vec.sub( const offset = Vec.sub(
@ -118,13 +128,16 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
) )
return offset return offset
}, [shape, scale]) }, [shape, scale])
const handleLabelChange = React.useCallback( const handleLabelChange = React.useCallback(
(label: string) => { (label: string) => {
onShapeChange?.({ id, label }) onShapeChange?.({ id, label })
}, },
[onShapeChange] [onShapeChange]
) )
const Component = isStraightLine ? StraightArrow : CurvedArrow const Component = isStraightLine ? StraightArrow : CurvedArrow
return ( return (
<FullWrapper ref={ref} {...events}> <FullWrapper ref={ref} {...events}>
<TextLabel <TextLabel
@ -163,7 +176,7 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
<g <g
pointerEvents="none" pointerEvents="none"
opacity={isGhost ? GHOSTED_OPACITY : 1} opacity={isGhost ? GHOSTED_OPACITY : 1}
mask={label || isEditing ? `url(#${shape.id}_clip)` : ``} mask={hasLabel || isEditing ? `url(#${shape.id}_clip)` : ``}
> >
<Component <Component
id={id} id={id}
@ -191,9 +204,13 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
label, label,
handles: { start, bend, end }, handles: { start, bend, end },
} = shape } = shape
const hasLabel = label?.trim()?.length ?? 0 > 0
const font = getFontStyle(style) const font = getFontStyle(style)
const labelSize = label ? getTextLabelSize(label, font) : [0, 0] const labelSize = hasLabel ? getTextLabelSize(label!, font) : [0, 0]
const isStraightLine = Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) < 1 const isStraightLine = Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) < 1
const dist = React.useMemo(() => { const dist = React.useMemo(() => {
const { start, bend, end } = shape.handles const { start, bend, end } = shape.handles
if (isStraightLine) return Vec.dist(start.point, end.point) if (isStraightLine) return Vec.dist(start.point, end.point)
@ -203,17 +220,21 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
const length = getArcLength(center, radius, start.point, end.point) const length = getArcLength(center, radius, start.point, end.point)
return Math.abs(length) return Math.abs(length)
}, [shape.handles]) }, [shape.handles])
const scale = Math.max( const scale = Math.max(
0.5, 0.5,
Math.min(1, Math.max(dist / (labelSize[1] + 128), dist / (labelSize[0] + 128))) Math.min(1, Math.max(dist / (labelSize[1] + 128), dist / (labelSize[0] + 128)))
) )
const offset = React.useMemo(() => { const offset = React.useMemo(() => {
const bounds = this.getBounds(shape) const bounds = this.getBounds(shape)
const offset = Vec.sub(shape.handles.bend.point, [bounds.width / 2, bounds.height / 2]) const offset = Vec.sub(shape.handles.bend.point, [bounds.width / 2, bounds.height / 2])
return offset return offset
}, [shape, scale]) }, [shape, scale])
return ( return (
<> <>
{hasLabel && (
<LabelMask <LabelMask
id={shape.id} id={shape.id}
scale={scale} scale={scale}
@ -221,6 +242,7 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
bounds={bounds} bounds={bounds}
labelSize={labelSize} labelSize={labelSize}
/> />
)}
<path <path
d={getArrowPath( d={getArrowPath(
style, style,
@ -230,9 +252,9 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
decorations?.start, decorations?.start,
decorations?.end decorations?.end
)} )}
mask={label ? `url(#${shape.id}_clip)` : ``} mask={hasLabel ? `url(#${shape.id}_clip)` : ``}
/> />
{label && ( {hasLabel && (
<rect <rect
x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]} x={bounds.width / 2 - (labelSize[0] / 2) * scale + offset[0]}
y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]} y={bounds.height / 2 - (labelSize[1] / 2) * scale + offset[1]}