Use strokePathData for <ShapeFill/> 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) 

<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>

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

@@ -1,9 +1,4 @@
-import {
+import { getRoundedInkyPolygonPath, getRoundedPolygonPoints, VecLike } from '@tldraw/primitives'
-	getRoundedInkyPolygonInnerPath,
-	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')

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;
 

packages/primitives/src/index.ts

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

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`