Focus indicator in ImageViewer obscures image content

[n-oshiro]

Thank you for developing and maintaining Pyxel.

Regarding the focus indicator in the ImageViewer of the pixel editor, the current focus border often covers a large portion of the image area,
which can reduce visibility, especially for small or low-resolution images.

After testing several alternatives, I found the following two approaches to be effective:

• drawing an expanded focus border outside the image area, and
• drawing only L-shaped markers at the four corners.

With the corner-only approach, pixel content remains visible while the focus position is still easy to recognize.

Screenshots are attached for comparison. In both alternatives, the focus indicator slightly extends outside the image area, but I would appreciate feedback on the overall direction.

ピクセルエディタの ImageViewer におけるフォーカス表示について、現在の枠表示では元の編集画像の大半を覆ってしまい、特に小さい画像で視認性が低下するケースがあります。

いくつか試した結果、「枠線を拡大して外側に描画する案」と「四隅のみをL字状に描画する案」
の2案が有効だと考えています。

後者の四隅のみを表示する案では、描画内容を隠さずフォーカス位置を認識しやすいように思われます。

スクリーンショットを添付します。どちらの案もフォーカス表示がわずかに描画領域の外側にはみ出しますが、全体的な方向性についてご意見をいただければ幸いです。

[kitao]

なるほどありがとうございます。
実装にあたっての不都合ないかこれから精査してみますが、いいアイデアだと思います。

もし、他のカーソル周りでも改善できそうなアイデアありましたら併せて修正してしまおうと思いますので、ぜひ教えてくださいませ。

Thanks! It looks good idea though I haven't checked the concrete implementation way yet.
If you have any other idea regarding focus UI design, please let me know so that I can implement them at the same time.

[kitao]

書き忘れましたが、３のアイデアが良さそうに思いましたので、他のフォーカスも同じ路線で考えられないかと思いました。

[n-oshiro]

Thank you for the feedback.

For reference, I tested the corner-only focus marker locally. The implementation is small and replaces the triple rectb-based focus frame with a simple corner marker pattern.

Below is an excerpt showing the top-left corner marker only (for illustration; the same pattern is applied to the other three corners):

Here is an excerpt from image_viewer.py showing the top-left corner marker:

        # x, y, w, h = focus rect

        # top-left corner marker (border + 3 main pixels)
        pyxel.rectb(x - 2, y - 2, 2, 4, PANEL_FOCUS_BORDER_COLOR)
        pyxel.rectb(x - 2, y - 2, 4, 2, PANEL_FOCUS_BORDER_COLOR)
        pyxel.pset(x,     y,     PANEL_FOCUS_BORDER_COLOR)
        pyxel.pset(x - 1, y - 1, PANEL_FOCUS_COLOR)
        pyxel.pset(x - 1, y,     PANEL_FOCUS_COLOR)
        pyxel.pset(x,     y - 1, PANEL_FOCUS_COLOR)

上記は左上の角のみの抜粋です。
他の3隅も同様の描画パターンを適用しています。