Merge pull request jonataswalker#258 from jonataswalker/253-fix-posit…

…ioning fix: container positioning
code4history · Mar 11, 2023 · 69f771a · 69f771a
2 parents 0c54d8a + e2bfd51
commit 69f771a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,6 +12,7 @@ module.exports = {
     rules: {
         'no-shadow': 'off',
         'no-new': 'off',
+        'max-params': 'off',
         'no-magic-numbers': 'off',
         'no-unused-vars': 'off',
         'no-this-before-super': 'off',

diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts
@@ -1,5 +1,5 @@
 import { CSS_CLASSES } from '../constants';
-import { CustomEventTypes, Item } from '../types';
+import { CustomEventTypes, Item, MenuEntry } from '../types';
 import emitter from '../emitter';
 
 export function createFragment(html: string): DocumentFragment {
@@ -43,7 +43,8 @@ export function getLineHeight(container: HTMLDivElement): number {
 export function addMenuEntry(
     parentNode: HTMLUListElement,
     item: Item,
-    isSubmenu = false
+    isSubmenu = false,
+    isInsideSubmenu = false
 ): HTMLLIElement {
     const id = `_${Math.random().toString(36).slice(2, 11)}`;
 
@@ -69,17 +70,16 @@ export function addMenuEntry(
         element.append(frag);
         parentNode.append(element);
 
-        emitter.emit(
-            CustomEventTypes.ADD_MENU_ENTRY,
-            {
-                id,
-                isSubmenu,
-                isSeparator: false,
-                callback: 'callback' in item ? item.callback : null,
-                data: 'data' in item ? item.data : null,
-            },
-            element
-        );
+        const entry: MenuEntry = {
+            id,
+            isSubmenu,
+            isInsideSubmenu,
+            isSeparator: false,
+            callback: 'callback' in item ? item.callback : null,
+            data: 'data' in item ? item.data : null,
+        };
+
+        emitter.emit(CustomEventTypes.ADD_MENU_ENTRY, entry, element);
 
         return element;
     }
@@ -90,23 +90,26 @@ export function addMenuEntry(
     parentNode.append(frag);
 
     const element = parentNode.lastChild as HTMLLIElement;
+    const entry: MenuEntry = {
+        id,
+        isSubmenu: false,
+        isInsideSubmenu: false,
+        isSeparator: true,
+        callback: null,
+        data: null,
+    };
 
-    emitter.emit(
-        CustomEventTypes.ADD_MENU_ENTRY,
-        {
-            id,
-            isSubmenu,
-            isSeparator: true,
-            callback: null,
-            data: null,
-        },
-        element
-    );
+    emitter.emit(CustomEventTypes.ADD_MENU_ENTRY, entry, element);
 
     return element;
 }
 
-export function addMenuEntries(container: HTMLUListElement, items: Item[], menuWidth: number) {
+export function addMenuEntries(
+    container: HTMLUListElement,
+    items: Item[],
+    menuWidth: number,
+    isInsideSubmenu?: boolean
+) {
     items.forEach((item) => {
         if (typeof item !== 'string' && 'items' in item && Array.isArray(item.items)) {
             const li = addMenuEntry(container, item, true);
@@ -119,9 +122,9 @@ export function addMenuEntries(container: HTMLUListElement, items: Item[], menuW
 
             li.append(ul);
 
-            addMenuEntries(ul, item.items, menuWidth);
+            addMenuEntries(ul, item.items, menuWidth, true);
         } else {
-            addMenuEntry(container, item);
+            addMenuEntry(container, item, false, isInsideSubmenu);
         }
     });
 }
diff --git a/src/main.ts b/src/main.ts
@@ -320,7 +320,8 @@ export default class ContextMenu extends Control {
 
     protected getMenuEntriesLength(): number {
         return Array.from(this.menuEntries).filter(
-            ([, v]) => v.isSeparator === false || v.isSubmenu === false
+            ([, v]) =>
+                v.isSeparator === false && v.isSubmenu === false && v.isInsideSubmenu === false
         ).length;
     }
 
@@ -330,13 +331,13 @@ export default class ContextMenu extends Control {
             w: mapSize[0] - this.pixel[0],
             h: mapSize[1] - this.pixel[1],
         };
+        const entriesLength = this.getMenuEntriesLength();
         const menuSize = {
             w: this.container.offsetWidth,
             // a cheap way to recalculate container height
             // since offsetHeight is like cached
-            h: Math.round(this.lineHeight * this.getMenuEntriesLength()),
+            h: Math.round(this.lineHeight * entriesLength),
         };
-
         const left = spaceLeft.w >= menuSize.w ? this.pixel[0] + 5 : this.pixel[0] - menuSize.w;
 
         this.container.style.left = `${left}px`;

diff --git a/src/types.ts b/src/types.ts
@@ -42,6 +42,7 @@ export type SingleItem = {
 export type MenuEntry = {
     id: string;
     isSubmenu: boolean;
+    isInsideSubmenu: boolean;
     isSeparator: boolean;
     callback: SingleItem['callback'] | null;
     data: unknown;