From 00d4648ef5a37453aa600a1149ccc5c391af5b34 Mon Sep 17 00:00:00 2001 From: Orange Mug Date: Sat, 29 Apr 2023 23:58:18 +0100 Subject: [PATCH] Use `strokePathData` for `` path to avoid bugs in the inner path algo (#1207) 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) Screenshot 2023-04-27 at 16 54 53 After Screenshot 2023-04-27 at 16 55 24 This isn't perfect because we're filling it with this double fill shape, which I assume has perf issues. Screenshot 2023-04-27 at 17 08 28 --------- Co-authored-by: Steve Ruiz --- .../TLGeoUtil/components/DrawStylePolygon.tsx | 16 +++++++--------- packages/primitives/api-report.md | 3 --- packages/primitives/src/index.ts | 1 - .../primitives/src/lib/polygon-helpers.ts | 19 ------------------- 4 files changed, 7 insertions(+), 32 deletions(-) diff --git a/packages/editor/src/lib/app/shapeutils/TLGeoUtil/components/DrawStylePolygon.tsx b/packages/editor/src/lib/app/shapeutils/TLGeoUtil/components/DrawStylePolygon.tsx index 29862ce92..eb35574b2 100644 --- a/packages/editor/src/lib/app/shapeutils/TLGeoUtil/components/DrawStylePolygon.tsx +++ b/packages/editor/src/lib/app/shapeutils/TLGeoUtil/components/DrawStylePolygon.tsx @@ -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 ( <> @@ -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') diff --git a/packages/primitives/api-report.md b/packages/primitives/api-report.md index 3e0c49a4c..2039a63e0 100644 --- a/packages/primitives/api-report.md +++ b/packages/primitives/api-report.md @@ -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; diff --git a/packages/primitives/src/index.ts b/packages/primitives/src/index.ts index 1d9f33a59..33198a342 100644 --- a/packages/primitives/src/index.ts +++ b/packages/primitives/src/index.ts @@ -43,7 +43,6 @@ export { } from './lib/intersect' export { getDrawLinePathData, - getRoundedInkyPolygonInnerPath, getRoundedInkyPolygonPath, getRoundedPolygonPoints, } from './lib/polygon-helpers' diff --git a/packages/primitives/src/lib/polygon-helpers.ts b/packages/primitives/src/lib/polygon-helpers.ts index f5852ee59..e26773c0a 100644 --- a/packages/primitives/src/lib/polygon-helpers.ts +++ b/packages/primitives/src/lib/polygon-helpers.ts @@ -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`