This library is an implementation of Gordon Kurtenbach's infamous Marking Menus in JavaScript [1, 2, 3].
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.
rxjs.
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>npm install -S marking-menuThen (ES modules)
import MarkingMenu from 'marking-menu';or (CommonJS)
var MarkingMenu = require('marking-menu');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:Arrayofstringor{ name, children }. The list of the menu's items. Ifchildrenis provided, the item will be considered as a sub-menu (childrenhas the same form asitems). Currently,MarkingMenusupports 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.
// 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);