I've been looking for something framework-agnostic like this to make a fresh implementation of pie menus.

Here's the documentation and source code of my old jQuery pie menus, which are getting pretty long in the tooth, and which I need to reimplement as Web Components in TypeScript.

https://donhopkins.com/mediawiki/index.php?title=JQuery_Pie_...

https://github.com/SimHacker/jquery-pie

The challenge is how to design widgets that developers and designers can easily skin, and totally customize the presentation and feedback by mixing and layering different technologies (like css, html, canvas, and WebGL, for example), independent of the tracking behavior.

And how to design a complete set of callbacks and tracking notifiers and hooks that enable developers to provide rich feedback that's deeply integrated with their application (like drawing the feedback based on application state, or previewing the effects of the pie menu gesture in the app, while the menu is still tracking).

You can do some kinds of simple styling with CSS, and more kinds of deeper designs with html templates, and all kinds cool customization with JavaScript code and dynamic HTML.

And you can define and configure trees of menus/slices/items with JSON, XML, or HTML structures, including graphical and layout properties, and event handlers.

Or you might want to procedurally draw some or all of the widget with a canvas (while using html text for the labels, which is much easier to deal with and more accessible than drawing text in a canvas).

Or you might want to draw the menu items or background or even the labels in 3D with WebGL.

How can one web component handle all these different ways of mixing and matching rendering and feedback?

For example, these Unity3D pie menus can display text and image feedback in the 2D overlay, mixed with 3D objects (drawn in an overlay camera, not actually drawn directly in the world, or objects in the world would occlude them).

https://www.youtube.com/watch?v=sMN1LQ7qx9g

>Unity3D Pie Menu Demo: I've made a general purpose pie menu component in C# for Unity3D, which supports text items, image items, and 3d object items too!

Another hard question is how do you define and configure these widgets? There's a whole spectrum of different people with different use cases, from downloading dynamic JSON menu trees from a web server, to writing annotated html trees that degrade gracefully to usable menus with JavaScript disabled, to building and styling menus in an interface builder at design time, to procedurally generating them with an api at runtime, to integrating with an existing tool's editors like Unity3D at authoring time, or even to enabling game players to build and customize their own menus at playtime.

The Unity3D editor makes it possible to construct trees of menus/slices/items out of 3d objects in the world, and edit their properties with custom editor control panels, and configure callback handlers that can modify the menus and 3D objects during tracking to provide feedback. (Like making the 3d menu items spin and scale and fly around, or mapping your face from the camera onto a mesh in the center of the menu, and tilting the mesh in the direction of the selected slice, to simulate the pie menus in The Sims.)

The Coral Menu and Trace Menu from Simon Schneegans’ Bachelor Thesis are perfect examples of the kind of fluid dynamic layout and feedback that I'd like to implement with HTML components and the canvas 2d api:

https://vimeo.com/51072812

>The Coral-Menu

>The first prototype is targeted at users who often search for items due to their manifold menu usage. It displays hierarchies with ease. Even very deep hierarchies are easy to explore. Many items are displayed by increasing the pie’s radius and stacking the labels which are displayed next to their sector on top of each other. The following clip demonstrates the behavior. As you can see, the items of sub-menus are indicated by little dark blobs at their parents. This menu is quite fast to use because of the mouse making a smooth movement.

https://vimeo.com/51073078

>The Trace-Menu

>The second prototype addresses itself to users who often make use of the same menus. Thus they know where to find an entry and want to select it blazingly fast. In contrast to the Coral-Menu each sub-menu is a complete 360-degree-Pie-Menu with one entry being the parent menu. The hierarchy is visualized by a path between the visited menus. This menu features a so-called “Marking-Mode”: The user may draw the path (the “trace”) to the desired entry with one continuous gesture. Watch the following clip and you will understand this behavior — the Marking-Mode is used for the very last selection.