Bug fixes

Author: Templarian

src/pg/menuItemIcon/menuItemIcon.ts

@@ -47,7 +47,7 @@ export default class PgMenuItemIcon extends HTMLElement {
         detail: { index: this.index }
       }));
     });
-    this.$label.addEventListener('keydown', (e: KeyboardEvent) => {
+    this.$button.addEventListener('keydown', (e: KeyboardEvent) => {
       switch (e.key) {
         case 'ArrowDown':
           this.dispatchEvent(new CustomEvent('down', {
@@ -66,7 +66,7 @@ export default class PgMenuItemIcon extends HTMLElement {
   }
 
   focus() {
-    this.$label.focus();
+    this.$button.focus();
   }
 
   getHeight(): number {

src/pg/overlay/overlay.ts

@@ -1,22 +1,27 @@
 import { Component } from '@pictogrammers/element';
 
-const layers: any[] = [];
-const promises: any[] = [];
+const layers: Set<HTMLElement> = new Set();
+const promises: Map<HTMLElement, (value: any) => void> = new Map();
 
 @Component()
 export default class PgOverlay extends HTMLElement {
   static open(props: any = {}): Promise<any> {
     var ele = document.createElement(this.name);
     Object.assign(ele, props);
     document.body.appendChild(ele);
-    layers.push(ele);
+    layers.add(ele);
     return new Promise((resolve) => {
-      promises.push(resolve);
+      promises.set(ele, resolve);
     });
   }
 
   close(result?: any) {
-    layers.pop().remove();
-    promises.pop()(result);
+    this.remove();
+    layers.delete(this);
+    const resolve = promises.get(this);
+    if (resolve) {
+      resolve(result);
+    }
+    promises.delete(this);
   }
 }

src/pg/overlayContextMenu/README.md

@@ -12,11 +12,13 @@ Components that use `PgOverlayContextMenu` include:
 import PgMenuItem from '@pictogrammers/components/pg/menuItem';
 
 #isOpen: false;
-handleSourceClick() {
+handleSourceClick(e: MouseEvent) {
   if (this.#isOpen) { return; }
   this.#isOpen = true;
   const result = await PgOverlayContextMenu.open({
     source: this.$element,
+    x: e.clientX,
+    y: e.clientY,
     items: [{
       label: 'Item 1',
       value: 'item1',

src/pg/overlayContextMenu/__examples__/basic/basic.css

@@ -10,7 +10,14 @@ p {
   border-radius: 1rem;
   align-items: center;
   justify-content: center;
+  cursor: default;
   background: var(--pg-focus-background-color, rgba(79, 143, 249, 0.1));
   color: rgba(79, 143, 249, 0.75);
   text-shadow: 0 0 4px #fff;
+  box-sizing: border-box;
+  outline: 0;
+}
+
+[part=area]:focus {
+  border-width: 2px;
 }

src/pg/overlayContextMenu/__examples__/basic/basic.html

@@ -1,5 +1,5 @@
 <div class="example">
-  <div part="area">
+  <div part="area" tabindex="0">
     Right Click Here
   </div>
   <p>Result: <code part="result"></code></p></p>

src/pg/overlayContextMenu/__examples__/basic/basic.ts

@@ -1,12 +1,15 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 
-import PgMenuItem from '../../../menuItem/menuItem';
+import PgMenuItemIcon from '../../../menuItemIcon/menuItemIcon';
 import PgMenuDivider from '../../../menuDivider/menuDivider';
 import PgOverlayContextMenu from '../../overlayContextMenu';
 
 import template from './basic.html';
 import style from './basic.css';
 
+const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
+const IconFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z';
+
 @Component({
   selector: 'x-pg-overlay-context-menu-basic',
   template,
@@ -23,31 +26,33 @@ export default class XPgOverlayContextMenuBasic extends HTMLElement {
 
   #value = null;
 
-  #menuOpen = false;
-  async #handleContextMenu(e: any) {
-    if (this.#menuOpen) { return; }
+  async #handleContextMenu(e: MouseEvent) {
     e.preventDefault();
     const items = [{
-      label: 'Item 1',
+      label: 'Add File',
       value: 'item1',
-      type: PgMenuItem
+      icon: IconFile,
+      type: PgMenuItemIcon
     },
     {
-      label: 'Item 2',
+      label: 'Add Folder',
       value: 'item2',
-      type: PgMenuItem
+      icon: IconFolder,
+      type: PgMenuItemIcon
     },
     {
       type: PgMenuDivider
     },
     {
-      label: 'Item 3',
+      label: 'More Items',
       value: 'item3',
-      type: PgMenuItem
+      icon: IconFile,
+      type: PgMenuItemIcon
     }];
-    this.#menuOpen = true;
     const result = await PgOverlayContextMenu.open({
       source: this.$area,
+      x: e.clientX,
+      y: e.clientY,
       value: this.#value,
       items,
       oninput: (value) => {
@@ -57,7 +62,6 @@ export default class XPgOverlayContextMenuBasic extends HTMLElement {
     if (result !== undefined) {
       this.#value = result;
     }
-    this.$result.textContent = result;
-    this.#menuOpen = false;
+    this.$result.textContent = JSON.stringify(result);
   }
 }

src/pg/overlayContextMenu/overlayContextMenu.css

@@ -11,6 +11,6 @@
   --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
   top: anchor(top);
   left: anchor(left);
-  min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
+  min-width: 10rem;
   translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
 }

src/pg/overlayContextMenu/overlayContextMenu.ts

@@ -6,6 +6,9 @@ import PgOverlay from '../overlay/overlay';
 import template from './overlayContextMenu.html';
 import style from './overlayContextMenu.css';
 
+// Only allow a single open context menu
+const stack: PgOverlayContextMenu[] = [];
+
 @Component({
   selector: 'pg-overlay-context-menu',
   template,
@@ -16,6 +19,8 @@ export default class PgOverlayContextMenu extends PgOverlay {
   @Part() $menu: PgMenu;
 
   @Prop() source: HTMLElement | null = null;
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
   @Prop() default: any = null;
   @Prop() items: any[] = [];
   @Prop() value: any = null;
@@ -31,6 +36,8 @@ export default class PgOverlayContextMenu extends PgOverlay {
   }
 
   connectedCallback() {
+    stack.pop()?.close();
+    stack.push(this);
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
     this.$overlay.popover = 'auto';
     if (this.source !== null) {
@@ -42,39 +49,13 @@ export default class PgOverlayContextMenu extends PgOverlay {
     this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
     // Position
     const rect = this.source?.getBoundingClientRect();
-    let x = 0, y = 0;
-    const value = this.value === null || typeof this.value !== 'object'
-      ? this.value
-      : this.value.value;
-    // value is an item in the items list
-    const index = this.value === null
-      ? -1
-      : this.items.findIndex(x => x.value === value);
-    if (index !== -1) {
-      const height = this.$menu.getItemHeight(index);
-      // Overlap item
-      y -= this.$menu.getItemOffset(0, index);
-      if (rect?.height !== height && rect?.height) {
-        y += (rect.height - height) / 2;
-      }
-    } else if (this.items.length > 0) {
-      // insert default if defined
-      if (this.default) {
-        this.default.checked = true;
-        this.$menu.items.unshift(this.default);
-      }
-      // focus first item
-      const height = this.$menu.getItemHeight(0);
-      y -= this.$menu.getItemOffset(0, 0);
-      if (rect?.height !== height && rect?.height) {
-        y += (rect.height - height) / 2;
-      }
-    }
+    const x =  this.x - (rect?.left || 0),
+      y = this.y - (rect?.top || 0);
     // ToDo: update to CSS Variables
     this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
     this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
     // Focus
-    this.$menu.focus(index);
+    this.$menu.focus(0);
   }
 
   #toggle(e: ToggleEvent) {
@@ -85,6 +66,7 @@ export default class PgOverlayContextMenu extends PgOverlay {
   }
 
   disconnectedCallback() {
+
   }
 
   #handleSelect(e: any) {