Merge pull request #25 from arcsi42/master

Change items distance from menu center
iantrich · Jan 20, 2023 · c5dea6b · c5dea6b
2 parents 688e6c9 + 4cdfdea
commit c5dea6b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,8 @@ resources:
 | `tap_action`        | `map`     | **Optional** | Action to take on tap. See [action options](#action-options)              | `action: toggle-menu` |
 | `hold_action`       | `map`     | **Optional** | Action to take on hold. See [action options](#action-options)             | `none`                |
 | `double_tap_action` | `map`     | **Optional** | Action to take on double tap. See [action options](#action-options)       | `action: none`        |
-| theme               | `string`  | **Optional** | Card theme                                                                |
+| `theme`             | `string`  | **Optional** | Card theme                                                                |                       |
+| `items_offset`      | `number`  | **Optional** | Distance of items from menu center                                        | `35`                   |
 
 ## Item Options
 

diff --git a/src/radial-menu.ts b/src/radial-menu.ts
@@ -41,6 +41,7 @@ export class RadialMenu extends LitElement {
         action: 'none',
       },
       default_dismiss: true,
+      items_offset: 35,
       ...config,
     };
 
@@ -80,15 +81,18 @@ export class RadialMenu extends LitElement {
       <nav class="circular-menu">
         <div class="circle">
           ${this._config.items.map((item, index) => {
+            const _items_offset = this._config?.items_offset ?? 35;
             const left = this._config
-              ? (50 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / this._config.items.length) * index * Math.PI)).toFixed(
-                  4,
-                ) + '%'
+              ? (
+                  50 -
+                  _items_offset * Math.cos(-0.5 * Math.PI - 2 * (1 / this._config.items.length) * index * Math.PI)
+                ).toFixed(4) + '%'
               : '';
             const top = this._config
-              ? (50 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / this._config.items.length) * index * Math.PI)).toFixed(
-                  4,
-                ) + '%'
+              ? (
+                  50 +
+                  _items_offset * Math.sin(-0.5 * Math.PI - 2 * (1 / this._config.items.length) * index * Math.PI)
+                ).toFixed(4) + '%'
               : '';
 
             if (item.card && item.element) {

diff --git a/src/types.ts b/src/types.ts
@@ -12,6 +12,7 @@ export interface RadialMenuConfig {
   hold_action?: ActionConfig;
   items: RadialMenuItemConfig[];
   theme?: string;
+  items_offset?: number;
 }
 
 export interface RadialMenuItemConfig {