https://github.com/speciesfilegroup/svg_radial_menu
A generic radial menu in SVG
https://github.com/speciesfilegroup/svg_radial_menu
Last synced: about 1 year ago
JSON representation
A generic radial menu in SVG
- Host: GitHub
- URL: https://github.com/speciesfilegroup/svg_radial_menu
- Owner: SpeciesFileGroup
- Created: 2021-03-27T22:55:52.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-30T17:25:43.000Z (over 4 years ago)
- Last Synced: 2024-04-26T05:23:34.075Z (about 2 years ago)
- Language: TypeScript
- Size: 114 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG Radial Menu
A simple SVG radial menu
## How to run on localhost
First install dependencies:
```sh
npm install
```
To run in dev mode mode:
```sh
npm run dev
```
Then go to http://localhost:5173
## Installation
With NPM
```bash
npm install @sfg/svg-radial-menu
```
## Quick start
### Example
```html
```
```javascript
import RadialMenu from '@sfg/svg-radial-menu'
const element = document.querySelector('#svg-menu-container')
const myMenu = new RadialMenu(element, options)
```
### Options object
```javascript
{
width: 500, // SVG width
height: 500, // SVG height
margin: 2, // Space between slices
centerSize: 30, // Size for empty space in the middle of the radial
rotateAngle: 0, // Start radial angle, default = 0
svgAttributes: { // SVG attributes
class: 'radial-menu'
...
},
svgSliceAttributes: { // default SVG attributes for all slices
fontSize: 11,
fontFamily: 'Arial',
...
},
slices: [{
label: 'Example',
name: 'example', // (Optional) Assign a name/id to the slice, useful to identify it on event trigger
link: 'http://taxonworks.org', // (Optional) parameter, it will make the slice work as a link
radius: 50, // (Optional) Set the slice radius
icon: { // (Optional) Adds an icon to the slice
width: 20,
height: 20,
url: '' // url or base64 image
},
slices: [ // Add another level to the menu
{
label: '6',
name: 'examples counts',
size: 26, // (Optional) Set the slice size
svgAttributes: {
color: '#FFFFFF',
fill: '#006ebf'
}
}
]
],
middleButton: { // Middle button
name: center,
radius: 28,
name: 'middle',
svgAttributes: {
...
}
icon: {
...
}
},
}
```
### Events
#### click, dblclick, contextmenu, mousedown, mouseup
```javascript
import RadialMenu from '@sfg/svg-radial-menu'
const element = document.querySelector('#svg-menu-container')
const myMenu.on('click', function (event) {
console.log('Clicked!')
})
```
Events are triggered when a slice or middle button is clicked providing the following data:
```typescript
{
event: PointerEvent,
name: string,
SegmentObject: Slice | MiddleButton
}
```