feat: support background fill for freedraw shapes

[h7y]

fix #4592

chrome_LR9SV7RT36.mp4

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

excalidraw-package-example – ./src/packages/excalidraw

🔍 Inspect: https://vercel.com/excalidraw/excalidraw-package-example/J7pSJ5GhRHgqt1BjoDPW1NGNpj4e
✅ Preview: https://excalidraw-package-example-git-support-fill-freedraw-excalidraw.vercel.app

excalidraw – ./

🔍 Inspect: https://vercel.com/excalidraw/excalidraw/6t1jYjuUB1wFdoDBGnaZA31LmC5j
✅ Preview: https://excalidraw-git-support-fill-freedraw-excalidraw.vercel.app

[h7y]

Just noticed that the fill style is not working. Looking into it.

[dwelle]

Very cool @h7y!

Just noticed that the fill style is not working. Looking into it.

You'd need to use rough-js renderer for this.

---

Also, let's make sure that filled freedraw shapes are selectable from inside. Don't recall where in the checks you need to enable this.

[dai-shi]

This looks cool.
(This may require excalidraw-animate to have some new logic.)

[h7y]

Fixed fill style and made the freedraw shapes with background selectable from inside.

firefox_97IltXUnDp.mp4

One thing I noticed is sometimes the fill goes slightly out of the shape. Trying to figure out why that happens.

[h7y]

One thing I noticed is sometimes the fill goes slightly out of the shape. Trying to figure out why that happens.

Okay this is already happening on all existing shapes.

From Excalidraw.com

[dwelle]

Strangely, the hitbox doesn't work when the fill is solid --- unclear what's happening

[h7y]

Found out why this is happening. It's because when the fill style is solid most of the curve path ops of the filled shape have op value as "lineTo" which is not yet handled in the hitTestRoughShape function.

excalidraw/src/element/collision.ts

Lines 899 to 900 in 24bf4cb

	} else if (op === "lineTo") {
	// TODO: Implement this

I came up with something that somewhat works which I'll push shortly. Trying to understand how this all works to come up with a proper solution.

[dwelle]

Ad the collision check — I've reused hitTestCurveInside() which gives much more accurate results (even if it's not meant to be used with freedraw shapes). For example, on the one below, the check correctly reports false when you move inside the horseshow:

https://excalidraw-fmuyhaoqx-excalidraw.vercel.app/#json=FKUqS6rIx6IU2zyUixVbZ,joS7GdzobemjGPstuPwOtA

[dwelle]

Thanks for the PR (and sorry for the delay!) ❤️

[h7y]

Thanks for taking it up and making the changes! :) ♥