Play white keys when touched anywhere in its area

[abaresk]

This highlights and accepts touch inputs from the entire area of a white key, including the tabs underneath black keys:

[vercel]

@abaresk is attempting to deploy a commit to the Ryohei Kameyama's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
signal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2024 2:36am

[ryohey]

@abaresk Very nice! It looks better than before. One small suggestion: you could simplify the code by adjusting the rendering logic to draw white keys first, then black keys. This change would allow you to remove the below code.

signal/src/main/components/PianoRoll/PianoKeys.tsx

Lines 60 to 67 in 521809f

	if (prevKeyBlack) {
	ctx.fillStyle = fillSytle
	ctx.fillRect(blackKeyWidth, height / 2, width - blackKeyWidth, height)
	}
	if (nextKeyBlack) {
	ctx.fillStyle = fillSytle
	ctx.fillRect(blackKeyWidth, -height / 2, width - blackKeyWidth, height)
	}

It looks like below:

for (let i = 0; i < numberOfKeys; i++) {
  const isWhite = ...
  if (isWhite) {
    drawWhiteKey(...)
  }
}

for (let i = 0; i < numberOfKeys; i++) {
  const isBlack = ...
  if (isBlack) {
    drawBlackKey(...)
  }
}

[abaresk]

I updated the rendering logic according to your suggestions. There still is some complexity as the white key height depends on its neighboring black keys. Let me know how this looks to you!

[ryohey]

Very clean code! Thanks.