# annular-menu

> annular menu

Latest version **1.0.15** (published 2017-08-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install annular-menu
pnpm add annular-menu
yarn add annular-menu
bun add annular-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2017-08-08 |
| First published | 2017-08-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | kouyjes |
| Maintainers | kouyjes |
| Keywords | annular, menu, circle, menu |

## Links

- npm: https://www.npmjs.com/package/annular-menu
- Repository: https://github.com/kouyjes/annular-menu
- Homepage: https://github.com/kouyjes/annular-menu#readme
- Issues: https://github.com/kouyjes/annular-menu/issues
- npm.io page: https://npm.io/package/annular-menu

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.0.15 (latest) — 2017-08-08
- 1.0.13 — 2017-08-05
- 1.0.12 — 2017-08-05
- 1.0.11 — 2017-08-05
- 1.0.10 — 2017-08-03
- 1.0.9 — 2017-08-02
- 1.0.8 — 2017-08-02
- 1.0.7 — 2017-08-02
- 1.0.6 — 2017-08-02
- 1.0.5 — 2017-08-01
- 1.0.4 — 2017-08-01
- 1.0.3 — 2017-08-01
- 1.0.2 — 2017-08-01
- 1.0.1 — 2017-08-01
- 1.0.0 — 2017-08-01

## README

# menus
## Demo
- [Demo1 url](https://kouyjes.github.io/annular-menu/example/index.html)
- [Demo2 url](https://kouyjes.github.io/annular-menu/example/index-default.html)
![](./screenshot/menu_01.png)
![](./screenshot/menu_02.png)
## Getting Started
### Interfaces
```javascript
    interface MenuConfig {
        angle?:number; // define menu radian eg:Math.PI / 6
        callback?:Function; // called when menu created
    }
    interface Menu extends MenuConfig {
        name:String; // menu name
        caption:String; // menu caption
        html?:String; // menu html content
        icon?:String; // menu icon
        menuList?:MenuList; // subMenu define
    }
    interface MenuList extends MenuConfig {
        items:Menu[]; // menu list
        radiusStep?:number; // whitespace of two arc
        offsetRadius?:number; // distance of two arc
    }
    interface AnnularMenuOption {
        menuList:MenuList;
        startAngle?:number;
        centerSize?:number;
        collapsible?:boolean;
        draggable?:boolean;
    }
    interface Point {
        x:number;
        y:number;
    }
    interface EventListeners {
        click:Function,
        mouseover:Function
        menuClick:Function[],
        menuHover:Function[]
    }  
```
### Define Menu data
```javascript
    //second level menu
    var menus_1 = [];
    for(var i = 0;i < 4;i++){
        menus_1.push({
            name: 'M1_' + i,
            caption: 'M1_' + i,
            icon: './image/icon.png',
            angle:Math.PI / 4,
            menuList:{
                radiusStep:5,
                items:[]
            }
        });
    }
    
    // first level menu
    var menus_0 = [];
    for(i = 0;i < 4;i++){
        menus_1.push({
            name: 'M0_' + i,
            caption: 'M0_' + i,
            icon: './image/icon.png',
            menuList:{
                radiusStep:8,
                items:menus_1
            }
        });
    }
```
### Initiate AnnularMenu
```javascript
    var contextMenu = new HERE.UI.AnnularMenu({
      menuList:{
          items:menus_0
      }
    });
```
### Render AnnularMenu
```javascript
    var centerX = document.body.clientWidth / 2,
        centerY = document.body.clientHeight / 2;
    var element = contextMenu.render({
        x:centerX,
        y:centerY
    });
    
    var container = document.querySelector('.menu-container');
    container.appendChild(element);
```
### Event
1. menuClick
2. menuHover
3. click
4. mouseover
```javascript
    contextMenu.addEventListener('menuClick', function (e,menu) {
    });
```
### API 
1. render(position?:Point):SVGElement
2. scale(point?:Point)
3. position(point?:Point)
4. toggleCollapse(collapse?:boolean)
5. toggleVisible(visible?:boolean)
6. addEventListener(type:String, handler:Function)
7. removeEventListener(type:String, handler:Function)

---
_Source: https://npm.io/package/annular-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._