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

Fixes bug with arrowhead, fits ellipse and rectangle sizes within bounding box

Browse source
This commit is contained in:
Steve Ruiz 2021-06-23 16:00:23 +01:00
parent d5fe5612e1
commit 4fb7096f2b
4 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -102,6 +102,8 @@ const arrow = registerShapeUtils<ArrowShape>({
const strokeWidth = +styles.strokeWidth
const sw = strokeWidth * (style.dash === DashStyle.Solid ? 1 : 1.618)
const arrowDist = vec.dist(start.point, end.point)
let shaftPath: JSX.Element
@ -126,7 +128,7 @@ const arrow = registerShapeUtils<ArrowShape>({
}
: getPerfectDashProps(
arrowDist,
strokeWidth * 1.618,
sw,
shape.style.dash === DashStyle.Dotted ? 'dotted' : 'dashed',
2
)
@ -149,9 +151,7 @@ const arrow = registerShapeUtils<ArrowShape>({
<path
d={path}
fill="none"
strokeWidth={
strokeWidth * (style.dash === DashStyle.Solid ? 1 : 1.618)
}
strokeWidth={sw}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
@ -176,7 +176,7 @@ const arrow = registerShapeUtils<ArrowShape>({
start.point,
end.point
) - 1,
strokeWidth * 1.618,
sw,
shape.style.dash === DashStyle.Dotted ? 'dotted' : 'dashed',
2
)
@ -205,7 +205,7 @@ const arrow = registerShapeUtils<ArrowShape>({
<path
d={path}
fill="none"
strokeWidth={strokeWidth * 2}
strokeWidth={sw}
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
@ -395,35 +395,31 @@ const arrow = registerShapeUtils<ArrowShape>({
const handle = handles[id]
shape.handles[handle.id] = handle
}
if ('bend' in handles) {
const { start, end, bend } = shape.handles
const dist = vec.dist(start.point, end.point)
if (handle.id === 'bend') {
const midPoint = vec.med(start.point, end.point)
const u = vec.uni(vec.vec(start.point, end.point))
const ap = vec.add(midPoint, vec.mul(vec.per(u), dist / 2))
const bp = vec.sub(midPoint, vec.mul(vec.per(u), dist / 2))
const midPoint = vec.med(start.point, end.point)
const u = vec.uni(vec.vec(start.point, end.point))
const ap = vec.add(midPoint, vec.mul(vec.per(u), dist / 2))
const bp = vec.sub(midPoint, vec.mul(vec.per(u), dist / 2))
bend.point = vec.nearestPointOnLineSegment(ap, bp, bend.point, true)
shape.bend = vec.dist(bend.point, midPoint) / (dist / 2)
bend.point = vec.nearestPointOnLineSegment(ap, bp, bend.point, true)
shape.bend = vec.dist(bend.point, midPoint) / (dist / 2)
const sa = vec.angle(end.point, start.point)
const la = sa - Math.PI / 2
if (isAngleBetween(sa, la, vec.angle(end.point, bend.point))) {
shape.bend *= -1
}
const sa = vec.angle(end.point, start.point)
const la = sa - Math.PI / 2
if (isAngleBetween(sa, la, vec.angle(end.point, bend.point))) {
shape.bend *= -1
}
}
shape.handles.bend.point = getBendPoint(shape)
// const newBounds = this.getRotatedBounds(shape)
// const newCenter = getBoundsCenter(newBounds)
// shape.point = vec.add(shape.point, vec.neg(vec.sub(newCenter, prevCenter)))
return this
},

5
state/shape-utils/ellipse.tsx
View file

@ -73,6 +73,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
}
const h = Math.pow(rx - ry, 2) / Math.pow(rx + ry, 2)
const perimeter =
Math.PI * (rx + ry) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)))
@ -190,8 +191,8 @@ function renderPath(shape: EllipseShape) {
const strokeWidth = +getShapeStyle(style).strokeWidth
const rx = radiusX + getRandom() * strokeWidth
const ry = radiusY + getRandom() * strokeWidth
const rx = radiusX + getRandom() * strokeWidth - strokeWidth / 2
const ry = radiusY + getRandom() * strokeWidth - strokeWidth / 2
const points: number[][] = []
const start = Math.PI + Math.PI * getRandom()

16
state/shape-utils/rectangle.tsx
View file

@ -182,18 +182,24 @@ function renderPath(shape: RectangleShape) {
const getRandom = rng(shape.id)
const baseOffset = +styles.strokeWidth / 2
const strokeWidth = +styles.strokeWidth
const baseOffset = strokeWidth / 2
const offsets = Array.from(Array(4)).map(() => [
getRandom() * baseOffset,
getRandom() * baseOffset,
])
const [w, h] = shape.size
const tl = vec.add([0, 0], offsets[0])
const tr = vec.add([w, 0], offsets[1])
const sw = strokeWidth
const w = Math.max(0, shape.size[0] - sw / 2)
const h = Math.max(0, shape.size[1] - sw / 2)
const tl = vec.add([sw / 2, sw / 2], offsets[0])
const tr = vec.add([w, sw / 2], offsets[1])
const br = vec.add([w, h], offsets[2])
const bl = vec.add([0, h], offsets[3])
const bl = vec.add([sw / 2, h], offsets[3])
const lines = shuffleArr(
[

4
utils/dashes.ts
View file

@ -23,8 +23,8 @@ export function getPerfectDashProps(
ratio = 1
strokeDashoffset = (dashLength / 2).toString()
} else {
dashLength = strokeWidth / 4
ratio = 4
dashLength = strokeWidth / 100
ratio = 100
strokeDashoffset = '0'
}