quentinroy / marking-menu Goto Github PK

View Code? Open in Web Editor NEW

12.0 2.0 2.0 2.47 MB

Marking Menu implementation in JavaScript

Home Page: https://quentinroy.github.io/Marking-Menu/

License: MIT License

JavaScript 97.84% Shell 0.10% CSS 2.06%

marking-menu menu technique interaction

marking-menu's Introduction

Marking Menu

This library is an implementation of Gordon Kurtenbach's infamous Marking Menus in JavaScript [1, 2, 3].

Have a look at the demo.

License

This codebase is licensed under the MIT license. However, Marking Menus are concerned by several patents, none of which are owned by the author of this library. Make sure you have the rights to include this library in your application before doing so. The authors and contributors of this library may not be held responsible for any patent infringement following the use of this codebase.

Dependencies

rxjs.

Install

Browser with CDN

You can use unpkg to fetch both rxjs and marking-menu:

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js"
      defer
    ></script>
    <script src="https://unpkg.com/marking-menu" defer></script>
    <script defer>
      // Your stuff.
    </script>
  </head>
  <body></body>
</html>

ES modules or CommonJS

npm install -S marking-menu

Then (ES modules)

import MarkingMenu from 'marking-menu';

or (CommonJS)

var MarkingMenu = require('marking-menu');

API

`MarkingMenu(items, parentDOM): Observable`

MarkingMenu returns a 'hot' Observable that emits notification of the form { name, angle }. The menu is activated upon subscription of this observable, and disabled upon un-subscription.

items: Array of string or { name, children }. The list of the menu's items. If children is provided, the item will be considered as a sub-menu (children has the same form as items). Currently, MarkingMenu supports up to 8 items per level. The first item is on the right and the followings are layed out clockwise.
parentDOM: HTMLElement. The container of the menu.

Example

// Create the menu with a sub-menu at the bottom.
const items = [
  'Item Right',
  {
    name: 'Others...',
    children: ['Sub Right', 'Sub Down', 'Sub Left', 'Sub Top'],
  },
  'Item Left',
  'Item Up',
];
const mm = MarkingMenu(items, document.getElementById('main'));

// Subscribe (and activates) the menu.
const subscription = mm.subscribe((selection) => {
  // Do something.
  console.log(selection.name);
});

setTimeout(() => {
  // Later, disable the menu.
  subscription.unsubscribe();
}, 60 * 1000);

marking-menu's People

Contributors

Stargazers

Watchers

Forkers

shaendro jennywjn

marking-menu's Issues

simplify navigation.js

navigation.js is ridiculously complicated. It could benefit from a complete rewrite, possibly moving out of rxjs.

Better cancelation feedback

The cancellation feedback looks just like selection feedback. This is confusing.

Remove pug stuff

Pug add some ko in the bundle but is virtually useless.

Crash on tap/click

The marking menu crashes when tapping or clicking. It maybe due to completion during the 'startup' phase of the navigation.

Allow setting up an item's direction

Currently, only 4 and 8 items marking menus are supported. It would be great to allow consumer to specify the angle they are interested in and allow marking menu with any number of items.

Put first item at the top rather than the right

Usual CSS position order starts at the top (top > right > bottom > left). Current implementation put the first item at the right instead which might not be intuitive for web developers.
It is probably preferable to put the first item on the top instead.

Gesture feedback upon selection

The gesture feedback is missing.

Slow performance with big displays in Safari

Performance tend to be rather slow on big displays with Safari. I believe this is connected to the canvases that then tend to be very large. More investigation is required to identify the slowest operations. It might be that clearing the canvas is too slow in these situations, it might be possible to only clear the drawn area. It might also be possible to reduce the canvas size to be the smallest possible.

Smaller RxJS bundle

Create an RxJS bundle that only includes required functionalities.

Try to make it so that others can other functionalities that they may need.

Improve the demonstration

For anyone not familiar with marking menus, the demonstration is just a blank page. We need to provide some instructions.

Erroneous timestamp for 'open' notification in Safari

The timestamp of the 'open' notification (when using the 'notifySteps' option) is erroneous (not coherent with the other timestamps).

It is probably due to a buggy or incomplete implementation of the performance API in Safari.

Gesture feedback showing ideal gestures

Ideally, the gesture feedback should adjust the user stroke, i.e. show the "perfect stroke" that matches what has been recognized. Currently it just show the user stroke.

Even cooler would to have an animation morphing the user stroke to the "perfect stroke".

postCSS prints warning on build

These warning are not actually an issue. PostCSS does not support min or max in calc, c.f. postcss/postcss-calc#117. Fortunately it leaves them as is in our case so the build work anyway.

Alternative designs

Not all marking menu implementations have Kurtenbach's original design.

E.g. Maya seem to remove the lines toward the labels:

Others use a circular layout, e.g. https://github.com/FlexMonkey/MarkingMenu.

The circular layout in particular looks promising: it makes it explicit where the selection threshold is.

Dynamic Label size

The size of the labels is rather small, which is quite restrictive for the name of the items.
Ideally, the size of the labels should adapt to their content.

How to run the demo?

Hi, may I ask how can I run the demo locally? There's not a start file...