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

Use strokePathData for <ShapeFill/> path to avoid bugs in the inner path algo (#1207)

Browse source 
This avoids some bug with fills in the new inky path algo. This is a
temp fix as it reuses the outer path, but it's fairly broken at the
moment so probably a good hotfix.

Before (notice the background fill busting the bounds of the shape) 

<img width="575" alt="Screenshot 2023-04-27 at 16 54 53"
src="https://user-images.githubusercontent.com/235915/234921462-3f2d81a4-f209-427e-ba33-bfc6b919bba9.png">

After

<img width="575" alt="Screenshot 2023-04-27 at 16 55 24"
src="https://user-images.githubusercontent.com/235915/234921460-7f36ab3e-ec97-4c4a-8634-868bf8eec791.png">

This isn't perfect because we're filling it with this double fill shape,
which I assume has perf issues.

<img width="1058" alt="Screenshot 2023-04-27 at 17 08 28"
src="https://user-images.githubusercontent.com/235915/234921788-f400bac0-fd2c-469a-beec-3e0a0d2f309d.png">

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Orange Mug 2023-04-29 23:58:18 +01:00 committed by GitHub
parent 77175a9dc4
commit 00d4648ef5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/editor/src/lib/app/shapeutils/TLGeoUtil/components/DrawStylePolygon.tsx
View file

@ -1,9 +1,4 @@
import {
getRoundedInkyPolygonInnerPath,
getRoundedInkyPolygonPath,
getRoundedPolygonPoints,
VecLike,
} from '@tldraw/primitives'
import { getRoundedInkyPolygonPath, getRoundedPolygonPoints, VecLike } from '@tldraw/primitives'
import { TLGeoShape } from '@tldraw/tlschema'
import * as React from 'react'
import { getShapeFillSvg, getSvgWithShapeFill, ShapeFill } from '../../shared/ShapeFill'
@ -23,16 +18,17 @@ export const DrawStylePolygon = React.memo(function DrawStylePolygon({
lines?: VecLike[][]
}) {
const polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)
let innerPathData = getRoundedInkyPolygonInnerPath(polygonPoints)
let strokePathData = getRoundedInkyPolygonPath(polygonPoints)
if (lines) {
for (const [A, B] of lines) {
innerPathData += `M${A.x},${A.y}L${B.x},${B.y}`
strokePathData += `M${A.x},${A.y}L${B.x},${B.y}`
}
}
const innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)
const innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)
return (
<>
<ShapeFill d={innerPathData} fill={fill} color={color} />
@ -57,7 +53,6 @@ export function DrawStylePolygonSvg({
colors: TLExportColors
}) {
const polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)
const innerPathData = getRoundedInkyPolygonInnerPath(polygonPoints)
let strokePathData = getRoundedInkyPolygonPath(polygonPoints)
@ -67,6 +62,9 @@ export function DrawStylePolygonSvg({
}
}
const innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)
const innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)
const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
strokeElement.setAttribute('d', strokePathData)
strokeElement.setAttribute('fill', 'none')

3
packages/primitives/api-report.md
View file

@ -259,9 +259,6 @@ export function getPointOnCircle(cx: number, cy: number, r: number, a: number):
// @public (undocumented)
export function getPolygonVertices(width: number, height: number, sides: number): Vec2d[];
// @public (undocumented)
export function getRoundedInkyPolygonInnerPath(points: VecLike[]): string;
// @public (undocumented)
export function getRoundedInkyPolygonPath(points: VecLike[]): string;

1
packages/primitives/src/index.ts
View file

@ -43,7 +43,6 @@ export {
} from './lib/intersect'
export {
getDrawLinePathData,
getRoundedInkyPolygonInnerPath,
getRoundedInkyPolygonPath,
getRoundedPolygonPoints,
} from './lib/polygon-helpers'

19
packages/primitives/src/lib/polygon-helpers.ts
View file

@ -28,25 +28,6 @@ function rng(seed = '') {
return next
}
/** @public */
export function getRoundedInkyPolygonInnerPath(points: VecLike[]) {
let polylineA = `M${precise(points[2])}L`
const len = points.length
let p2: VecLike
for (let i = 3, n = len; i < n; i += 3) {
p2 = points[i + 2]
polylineA += `${precise(p2)}`
}
polylineA += ` Z`
return polylineA
}
/** @public */
export function getRoundedInkyPolygonPath(points: VecLike[]) {
let polylineA = `M`