@alekstar79/context-menu 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 alekstar79
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,284 @@
+# Context Menu TS (Vanilla/Vue3)
+
+[![NPM Version](https://img.shields.io/npm/v/context-menu.svg)](https://www.npmjs.com/package/@alekstar79/context-menu)
+[![License](https://img.shields.io/badge/License-MIT-blue)](LICENSE)
+[![GitHub](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/alekstar79/context-menu)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square)](https://www.typescriptlang.org)
+[![Coverage](https://img.shields.io/badge/coverage-81.65%25-brightgreen.svg)](https://github.com/alekstar79/comparison-slider)
+
+> A beautiful and customizable radial context menu written in TypeScript.
+> It can be used both as a plain JavaScript/TypeScript module and as a Vue component.
+> The project includes full TypeScript support (types are exported) and provides a simple API for controlling the menu (show/hide, event subscription).
+> The library is lightweight, has no required dependencies (Vue 3 is optional), and can be easily integrated into existing projects.
+
+![slider](menu.svg)
+
+**[View Live Demo](https://alekstar79.github.io/context-menu)**
+
+<!-- TOC -->
+* [Context Menu TS (Vanilla/Vue3)](#context-menu-ts-vanillavue3)
+  * [✨ Features](#-features)
+  * [📦 Installation](#-installation)
+  * [🚀 Usage](#-usage)
+  * [⚙️ Configuration](#-configuration)
+  * [🧠 API](#-api)
+    * [Methods](#methods)
+    * [Events](#events)
+    * [Vue component CircularMenu](#vue-component-circularmenu)
+  * [💅 Styling](#-styling)
+  * [🛠️ Development](#-development)
+    * [Scripts](#scripts)
+  * [📄 License](#-license)
+<!-- TOC -->
+
+## ✨ Features
+
+    🎨 Customizable appearance (colors, radii, opacity)
+    🖼️ SVG icon support via sprites
+    💬 Hints with optional background
+    🖱️ Hover and wheel animations
+    🧩 Optional central button
+    📦 Two usage modes: vanilla JS and Vue 3 component
+    ⚡ Full TypeScript support (types included)
+
+## 📦 Installation
+
+```bash
+npm install context-menu
+```
+
+The library has an optional peer dependency on vue. If you are using the Vue component, install Vue 3 as well:
+
+```bash
+npm install vue@^3
+```
+
+## 🚀 Usage
+1. Vanilla JS / TypeScript
+
+```ts
+import { defineConfig, Manager } from 'context-menu-ts'
+
+const config = defineConfig({
+  sprite: '/path/to/icons.svg',  // path to SVG sprite
+  innerRadius: 50,
+  outerRadius: 150,
+  opacity: 0.7,
+  color: '#1976D2',
+  sectors: [
+    { icon: 'new', hint: 'New' },
+    { icon: 'open', hint: 'Open' },
+    { icon: 'save', hint: 'Save' }
+  ],
+  centralButton: {
+    icon: 'home',
+    hint: 'Home',
+    hintPosition: 'top'
+  }
+})
+
+// container element where the menu will be placed
+const container = document.getElementById('menu-container')
+const menu = new Manager(container, config)
+
+// subscribe to events
+menu.on('click', (data) => {
+  console.log(`Selected: ${data.hint}`)
+})
+
+// show menu at cursor position (e.g., on contextmenu)
+window.addEventListener('contextmenu', (e) => {
+  e.preventDefault()
+  menu.show(e)
+})
+```
+
+2. Vue Component
+
+```vue
+<template>
+  <CircularMenu
+    ref="menuRef"
+    :sprite="sprite"
+    :inner-radius="75"
+    :outer-radius="150"
+    :sectors="sectors"
+    :central-button="centralButton"
+    color="#42B883"
+    @click="onMenuItemClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContextMenu from 'context-menu/vue'
+import type { ISector } from 'context-menu'
+
+const sprite = '/icons.svg'
+const sectors: ISector[] = [
+  { icon: 'new', hint: 'New' },
+  { icon: 'open', hint: 'Open' },
+  { icon: 'save', hint: 'Save' }
+];
+
+const centralButton = {
+  icon: 'home',
+  hint: 'Home',
+  hintPosition: 'bottom'
+}
+
+const menuRef = ref()
+
+const onMenuItemClick = (data: { icon: string; hint: string }) => {
+  console.log('Selected:', data.hint)
+}
+
+// Example of manually showing the menu
+const showMenu = (e: PointerEvent) => {
+  menuRef.value?.show(e)
+}
+</script>
+```
+
+## ⚙️ Configuration
+`defineConfig(options: Partial<IConfig>): IConfig`
+
+Creates a configuration object with default values.
+
+`IConfig` interface
+
+| Property            | Type           | Default        | Description                                                                                  |
+|---------------------|----------------|----------------|----------------------------------------------------------------------------------------------|
+| sprite              | string         | `../icons.svg` | Path to the SVG sprite containing icons                                                      |
+| innerRadius         | number         | –              | Inner radius of sectors (the smaller ring radius)                                            |
+| outerRadius         | number         | –              | Outer radius of sectors                                                                      |
+| opacity             | number         | `0.7`          | Opacity of sectors and hint backgrounds (if any)                                             |
+| color               | string         | –              | Main color for sectors and hint backgrounds (default '#1976D2' if omitted)                   |
+| hintPadding         | number         | –              | Padding around the hint text (pixels). If not set, the hint is rendered without a background |
+| iconScale           | number         | –              | Global scale factor for all icons (can be overridden per sector)                             |
+| iconRadius          | number         | –              | Global radius at which icons are placed (can be overridden per sector)                       |
+| sectors             | ISector[]      | `[]`           | Array of menu sectors                                                                        |
+| centralButton       | ICentralButton | –              | Configuration for the central button                                                         |
+| autoBindContextMenu | boolean        | `true`         | Automatically bind the contextmenu event listener to window                                  |
+
+
+`ISector` interface
+
+| Property    | Type       | Default | Description                               |
+|-------------|------------|---------|-------------------------------------------|
+| icon        | string     | –       | Icon identifier (without #)               |
+| hint        | string     | –       | Hint text                                 |
+| onclick     | () => void | –       | Click handler for the sector              |
+| rotate      | number     | `0`     | Additional rotation of the icon (degrees) |
+| iconScale   | number     | global  | Icon scale for this specific sector       |
+| iconRadius  | number     | global  | Icon placement radius for this sector     |
+| hintPadding | number     | global  | Hint padding for this sector              |
+
+
+`ICentralButton` interface
+
+| Property       | Type             | Default | Description                                                     |
+|----------------|------------------|---------|-----------------------------------------------------------------|
+| icon           | string           | –       | Icon identifier                                                 |
+| hint           | string           | –       | Hint text                                                       |
+| onclick        | () => void       | –       | Click handler                                                   |
+| iconScale      | number           | global  | Icon scale                                                      |
+| iconRadius     | number           | global  | Icon radius (effectively the button size)                       |
+| hintPosition   | `top \|  bottom` | `top`   | Position of the hint relative to the button                     |
+| hintSpan       | number           | `180`   | Angular span of the hint arc (degrees)                          |
+| hintDistance   | number           | `8`     | Distance from button edge to the hint text (when no background) |
+| hintOffset     | number           | –       | Absolute offset of the hint (overrides hintDistance)            |
+| hintPadding    | number           | global  | Hint padding for the central button                             |
+| hintStartAngle | number           | –       | Start angle of the arc (must be set together with hintEndAngle) |
+| hintEndAngle   | number           | –       | End angle of the arc                                            |
+
+
+## 🧠 API
+
+`Manager` class (vanilla)
+
+```ts
+const menu = new Manager(container: HTMLElement, config: IConfig)
+```
+
+### Methods
+
+- `show(event: MouseEvent | PointerEvent)` – Shows the menu at the cursor position.
+- `hide()` – Hides the menu.
+- `on(event: string, callback: Function)` – Subscribes to events.
+
+### Events
+
+- `click` – Emitted when a sector or the central button is clicked. The callback receives `{ icon: string; hint: string }`.
+
+### Vue component CircularMenu
+
+**Props**
+
+All properties from `IConfig` except `sectors` and `centralButton` (they are passed separately).  
+Additional props:
+
+- `autoBindContextMenu` – Automatically bind contextmenu to window (default `true`).
+
+**Events**
+
+- `click` – Same as the vanilla `click` event.
+
+**Exposed methods (via `ref`)**
+
+- `show(event: PointerEvent)` – Shows the menu.
+- `hide()` – Hides the menu.
+
+## 💅 Styling
+
+> The library comes with basic styles that are automatically included. You can override them using the following CSS classes:
+
+- `.context` – Root menu container.
+- `.radial-menu-svg` – The SVG element.
+- `.radial-sector` – A sector.
+- `.radial-icon` – An icon.
+- `.radial-hint` – Hint text.
+- `.radial-hint-bg` – Hint background.
+- `.central-sector`, `.central-icon`, `.central-hint` – Central button elements.
+- `.active` – Class added to hints on hover.
+
+Example of customization:
+
+```scss
+.radial-hint {
+  font-size: 14px;
+  font-weight: 600;
+  fill: #000;
+}
+```
+
+## 🛠️ Development
+
+```bash
+git clone <repo>
+cd context-menu
+npm install
+```
+
+### Scripts
+
+- `npm run dev` – Start dev server with demo.
+- `npm run build` – Build the library.
+- `npm run build:demo` – Build the demo app.
+- `npm run test` – Run tests.
+- `npm run test:ui` – Run tests with UI.
+- `npm run test:coverage` – Run tests with coverage.
+
+Project structure:
+
+- `src/` – Source code.
+- `src/menu/` – Core menu implementation.
+- `src/components/` – Vue component.
+- `src/core/` – Utilities and SVG wrapper.
+- `public/` – Static assets for the demo.
+
+## 📄 License
+
+MIT © [alekstar79](https://github.com/alekstar79)
+
+For more examples and a live demo, visit the repository. Feel free to open issues for questions or suggestions.

package/lib/components/ContextMenu.vue.d.ts

@@ -0,0 +1,31 @@
+import { IConfig, ISector } from '../menu/config';
+interface Props {
+    sprite: string;
+    innerRadius: number;
+    outerRadius: number;
+    opacity?: number;
+    iconScale?: number;
+    iconRadius?: number;
+    sectors: ISector[];
+    color?: string;
+    hintPadding?: number;
+    centralButton?: IConfig['centralButton'];
+    autoBindContextMenu?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {
+    show: (event: PointerEvent) => void | undefined;
+    hide: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (data: {
+        icon: string;
+        hint: string;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((data: {
+        icon: string;
+        hint: string;
+    }) => any) | undefined;
+}>, {
+    autoBindContextMenu: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/lib/context-menu-vue.d.ts

@@ -0,0 +1,2 @@
+export * from './vue'
+export {}

package/lib/context-menu-vue.js

@@ -0,0 +1,74 @@
+import { Manager as m } from "./context-menu.js";
+import { defineConfig as y } from "./context-menu.js";
+import { defineComponent as f, onMounted as h, onUnmounted as C, watch as R, getCurrentInstance as x } from "vue";
+const B = /* @__PURE__ */ f({
+  __name: "ContextMenu",
+  props: {
+    sprite: {},
+    innerRadius: {},
+    outerRadius: {},
+    opacity: {},
+    iconScale: {},
+    iconRadius: {},
+    sectors: {},
+    color: {},
+    hintPadding: {},
+    centralButton: {},
+    autoBindContextMenu: { type: Boolean, default: !0 }
+  },
+  emits: ["click"],
+  setup(s, { expose: d, emit: l }) {
+    const e = s, p = l;
+    let i = null, t = null;
+    function c() {
+      const n = {
+        autoBindContextMenu: e.autoBindContextMenu,
+        sprite: e.sprite,
+        innerRadius: e.innerRadius,
+        outerRadius: e.outerRadius,
+        opacity: e.opacity ?? 0.7,
+        iconScale: e.iconScale,
+        iconRadius: e.iconRadius,
+        sectors: e.sectors,
+        centralButton: e.centralButton,
+        color: e.color,
+        hintPadding: e.hintPadding
+      }, o = document.createElement("div");
+      return i = new m(o, n), i.on("click", (r) => p("click", r)), t = o.firstChild, o.removeChild(t), t;
+    }
+    function a(n) {
+      const o = x(), r = o?.vnode.el, u = r?.parentNode;
+      u && r && n && (u.replaceChild(n, r), o.vnode.el = n);
+    }
+    return h(() => {
+      a(c());
+    }), C(() => {
+      t && t.parentNode && t.parentNode.removeChild(t), i = null;
+    }), R(() => [
+      e.sprite,
+      e.innerRadius,
+      e.outerRadius,
+      e.opacity,
+      e.iconScale,
+      e.iconRadius,
+      e.sectors,
+      e.centralButton,
+      e.color,
+      e.hintPadding,
+      e.autoBindContextMenu
+    ], () => {
+      if (!t) return;
+      const n = c();
+      a(n), t = n;
+    }, { deep: !0 }), d({
+      show: (n) => i?.show(n),
+      hide: () => i?.hide()
+    }), (n, o) => null;
+  }
+});
+export {
+  B as ContextMenu,
+  m as Manager,
+  y as defineConfig
+};
+//# sourceMappingURL=context-menu-vue.js.map

package/lib/context-menu-vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-vue.js","sources":["../src/components/ContextMenu.vue"],"sourcesContent":["<template></template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, getCurrentInstance } from 'vue'\nimport type { IConfig, ISector } from '@/menu/config'\nimport { Manager } from '@/menu/manager'\n\ninterface Props {\n  sprite: string;\n  innerRadius: number;\n  outerRadius: number;\n  opacity?: number;\n  iconScale?: number;\n  iconRadius?: number;\n  sectors: ISector[];\n  color?: string;\n  hintPadding?: number;\n  centralButton?: IConfig['centralButton'];\n  autoBindContextMenu?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  autoBindContextMenu: true\n})\n\nconst emit = defineEmits<{\n  (e: 'click', data: { icon: string; hint: string }): void;\n}>();\n\nlet menuManager: Manager | null = null\nlet menuElement: HTMLElement | null = null\n\nfunction createMenu() {\n  const config: IConfig = {\n    autoBindContextMenu: props.autoBindContextMenu,\n    sprite: props.sprite,\n    innerRadius: props.innerRadius,\n    outerRadius: props.outerRadius,\n    opacity: props.opacity ?? 0.7,\n    iconScale: props.iconScale,\n    iconRadius: props.iconRadius,\n    sectors: props.sectors,\n    centralButton: props.centralButton,\n    color: props.color,\n    hintPadding: props.hintPadding,\n  }\n\n  const tempContainer = document.createElement('div')\n\n  menuManager = new Manager(tempContainer, config)\n  menuManager.on('click', (data: any) => emit('click', data))\n  menuElement = tempContainer.firstChild as HTMLElement\n  tempContainer.removeChild(menuElement)\n\n  return menuElement\n}\n\nfunction replaceRoot(newElement: HTMLElement) {\n  const instance = getCurrentInstance()\n  const oldEl = instance?.vnode.el\n  const parent = oldEl?.parentNode\n\n  if (parent && oldEl && newElement) {\n    parent.replaceChild(newElement, oldEl)\n    instance.vnode.el = newElement\n  }\n}\n\nonMounted(() => {\n  replaceRoot(createMenu())\n})\n\nonUnmounted(() => {\n  if (menuElement && menuElement.parentNode) {\n    menuElement.parentNode.removeChild(menuElement)\n  }\n\n  menuManager = null\n})\n\nwatch(() => [\n  props.sprite,\n  props.innerRadius,\n  props.outerRadius,\n  props.opacity,\n  props.iconScale,\n  props.iconRadius,\n  props.sectors,\n  props.centralButton,\n  props.color,\n  props.hintPadding,\n  props.autoBindContextMenu,\n], () => {\n  if (!menuElement) return\n\n  const newEl = createMenu()\n  replaceRoot(newEl)\n  menuElement = newEl\n}, { deep: true })\n\ndefineExpose({\n  show: (event: PointerEvent) => menuManager?.show(event),\n  hide: () => menuManager?.hide()\n})\n</script>\n"],"names":["props","__props","emit","__emit","menuManager","menuElement","createMenu","config","tempContainer","Manager","data","replaceRoot","newElement","instance","getCurrentInstance","oldEl","parent","onMounted","onUnmounted","watch","newEl","__expose","event"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAQC,GAIRC,IAAOC;AAIb,QAAIC,IAA8B,MAC9BC,IAAkC;AAEtC,aAASC,IAAa;AACpB,YAAMC,IAAkB;AAAA,QACtB,qBAAqBP,EAAM;AAAA,QAC3B,QAAQA,EAAM;AAAA,QACd,aAAaA,EAAM;AAAA,QACnB,aAAaA,EAAM;AAAA,QACnB,SAASA,EAAM,WAAW;AAAA,QAC1B,WAAWA,EAAM;AAAA,QACjB,YAAYA,EAAM;AAAA,QAClB,SAASA,EAAM;AAAA,QACf,eAAeA,EAAM;AAAA,QACrB,OAAOA,EAAM;AAAA,QACb,aAAaA,EAAM;AAAA,MAAA,GAGfQ,IAAgB,SAAS,cAAc,KAAK;AAElD,aAAAJ,IAAc,IAAIK,EAAQD,GAAeD,CAAM,GAC/CH,EAAY,GAAG,SAAS,CAACM,MAAcR,EAAK,SAASQ,CAAI,CAAC,GAC1DL,IAAcG,EAAc,YAC5BA,EAAc,YAAYH,CAAW,GAE9BA;AAAA,IACT;AAEA,aAASM,EAAYC,GAAyB;AAC5C,YAAMC,IAAWC,EAAA,GACXC,IAAQF,GAAU,MAAM,IACxBG,IAASD,GAAO;AAEtB,MAAIC,KAAUD,KAASH,MACrBI,EAAO,aAAaJ,GAAYG,CAAK,GACrCF,EAAS,MAAM,KAAKD;AAAA,IAExB;AAEA,WAAAK,EAAU,MAAM;AACd,MAAAN,EAAYL,GAAY;AAAA,IAC1B,CAAC,GAEDY,EAAY,MAAM;AAChB,MAAIb,KAAeA,EAAY,cAC7BA,EAAY,WAAW,YAAYA,CAAW,GAGhDD,IAAc;AAAA,IAChB,CAAC,GAEDe,EAAM,MAAM;AAAA,MACVnB,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA,GACL,MAAM;AACP,UAAI,CAACK,EAAa;AAElB,YAAMe,IAAQd,EAAA;AACd,MAAAK,EAAYS,CAAK,GACjBf,IAAce;AAAA,IAChB,GAAG,EAAE,MAAM,IAAM,GAEjBC,EAAa;AAAA,MACX,MAAM,CAACC,MAAwBlB,GAAa,KAAKkB,CAAK;AAAA,MACtD,MAAM,MAAMlB,GAAa,KAAA;AAAA,IAAK,CAC/B;;;"}

package/lib/context-menu.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}