feat(edgeless): support pie menu widget

[golok727]

A pie menu inspired by Blender's interface.

For preview I have added a tools menu for edgeless the trigger is 'q'.

tests are wip...

Usage

• Trigger Key: Each menu is associated with a trigger key to open it. To activate a menu, press and hold the trigger key.

• Navigation: While holding the trigger key, move the cursor towards the desired action within the pie menu. Hovering over a wedge of the pie menu highlights that action. Release the trigger key to select the highlighted action.

• Submenu: Submenus can be accessed by hovering over the submenu node (with a blue dot) within the pie menu. To close a submenu just hover over the desired center node

• Keeping Menu Open: If the trigger key is released before the "SELECT_ON_RELEASE_TIMEOUT" (150ms default) threshold, the pie menu remains open and you can select with your mouse.

• Shortcut Selection: The numeric keys (0-9) correspond to actions within the pie menu. Pressing a numeric key selects the pie node associated with that number directly.

I have also provided a pie builder api to build pie menus layouts easier. Looking forward for help to make the api better.

Preview

pie2.1.mp4

New!

Color Node

Color.Node.mp4

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2024 4:56am
blocksuite-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2024 4:56am

[hwangdev97]

Great, this pie menu is exactly what we need!

But there are some color issues that can be quickly addressed. It's best to choose colors from the theme for the hover state so that it can have better light/dark mode compatibility.

In addition, it is recommended to set a feature flag for related functions so that different users can control the function switch.

In fact, our product design itself also has plans to design a circular menu. I never expected the open-source community to complete it ahead of us!

[golok727]

But there are some color issues that can be quickly addressed. It's best to choose colors from the theme for the hover state so that it can have better light/dark mode compatibility.

Hey! While working on it I used the hover color (--affine-hover-color) but it had some transparency, which didn't look right when hovering over it in the current setup. so for now I just used a hardcoded value. I will fix it 👍🏻

[doodlewind]

@golok727 thanks again for the great work! I've seen previous comment regarding feature flags and some best practice, and here's the advice:

• It's really a smooth and polished feature to try, so landing this without feature flag should be fine - we may fallback if needed but no worries.
• Limiting the usage of this widget in edgeless mode should be expected.

I think @Saul-Mirone would land this after some style checks.

Thanks again for your feat. If you are interested in BlockSuite, AFFiNE and related contributions, feel free to DM me: doodlewind at toeverything dot info

[Saul-Mirone]

Thanks for your contribution!

[golok727]

@Saul-Mirone, just to clarify, you mentioned removing it from both the DocSpec and EdgelessSpec, correct? I've commented it out as per your instructions. Additionally, as @doodlewind pointed out, since this is an edgeless-only feature, I've removed its support in Page. PTA👀. Btw I don't know how to enable it in the playground.

[doodlewind]

@golok727 you can search for enable_synced_doc_block to see how feature flags is being used in the codebase. Adding a enable_pie_menu flag and test this flag on the key handler for q should be adequate. Also in this way you can enable the flag by default in BlockSuite playground, since there are defaultFlags that can be used to override.

[golok727]

@golok727 you can search for enable_synced_doc_block to see how feature flags is being used in the codebase. Adding a enable_pie_menu flag and test this flag on the key handler for q should be adequate. Also in this way you can enable the flag by default in BlockSuite playground, since there are defaultFlags that can be used to override.

Thanks! I added the flag...