Menu bar

src/fontra/client/core/canvas-controller.js

@@ -219,6 +219,17 @@ export class CanvasController {
     });
   }
 
+  isActualViewBox(viewBox) {
+    const canvasCenter = this.canvasPoint(rectCenter(viewBox));
+    return (
+      this.magnification === this._getProposedViewBoxMagnification(viewBox) &&
+      Math.round(this.origin.x) ===
+        Math.round(this.canvasWidth / 2 + this.origin.x - canvasCenter.x) &&
+      Math.round(this.origin.y) ===
+        Math.round(this.canvasHeight / 2 + this.origin.y - canvasCenter.y)
+    );
+  }
+
   setViewBox(viewBox) {
     this.magnification = this._getProposedViewBoxMagnification(viewBox);
     const canvasCenter = this.canvasPoint(rectCenter(viewBox));

src/fontra/client/web-components/menu-bar.js

@@ -0,0 +1,145 @@
+import * as html from "../core/html-utils.js";
+import { SimpleElement } from "../core/html-utils.js";
+import { MenuPanel } from "./menu-panel.js";
+
+export class MenuBar extends SimpleElement {
+  static styles = `
+  .menu-bar {
+    padding: 0.2rem 0.5rem;
+    align-items: center;
+    position: absolute;
+    font-size: 1rem;
+    width: 100%;
+  }
+
+  .menu-item {
+    padding: 0.4rem 0.6rem;
+    display: inline-block;
+    cursor: default;
+    user-select: none;
+  }
+
+  .menu-item:hover,
+  .menu-item.current {
+    background: var(--editor-top-bar-link-hover);
+    border-radius: 5px;
+  }
+  `;
+
+  constructor(items = []) {
+    super();
+    this.items = items;
+    this.contentElement = this.shadowRoot.appendChild(html.div());
+    this.contentElement.classList.add("menu-bar");
+    this.render();
+    window.addEventListener("mousedown", this.onBlur.bind(this));
+    window.addEventListener("blur", this.onBlur.bind(this));
+    this.contentElement.addEventListener("mouseover", this.onMouseover.bind(this));
+    this.contentElement.addEventListener("click", this.onClick.bind(this));
+    this.showMenuWhenHover = false;
+  }
+
+  onClick(event) {
+    if (event.target.classList.contains("menu-item")) {
+      const currentSelection = this.contentElement.querySelector(".current");
+      if (currentSelection === event.target) {
+        this.clearCurrentSelection();
+        this.showMenuWhenHover = false;
+      } else {
+        for (let i = 0; i < this.contentElement.childElementCount; i++) {
+          const node = this.contentElement.childNodes[i];
+          if (node === event.target) {
+            this.clearCurrentSelection();
+            this.showMenuWhenHover = true;
+            this.showMenu(this.items[i].getItems(), node);
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  onMouseover(event) {
+    const currentSelection = this.contentElement.querySelector(".current");
+    if (!currentSelection && !this.showMenuWhenHover) {
+      return;
+    }
+    if (event.target === this.contentElement) {
+      this.clearCurrentSelection();
+      this.showMenuWhenHover = true;
+      return;
+    }
+    if (event.target.classList.contains("menu-item")) {
+      this.clearCurrentSelection();
+      for (let i = 0; i < this.contentElement.childElementCount; i++) {
+        const node = this.contentElement.childNodes[i];
+        if (node === event.target) {
+          if (this.showMenuWhenHover) {
+            this.showMenu(this.items[i].getItems(), node);
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  onBlur(event) {
+    this.clearCurrentSelection();
+    this.showMenuWhenHover = false;
+  }
+
+  clearCurrentSelection(event) {
+    const currentSelection = this.contentElement.querySelector(".current");
+    if (currentSelection) {
+      currentSelection.classList.remove("current");
+      const menuPanel = this.contentElement.querySelector("menu-panel");
+      if (menuPanel) {
+        this.contentElement.removeChild(menuPanel);
+      }
+    }
+  }
+
+  showMenu(items, menuItemElement) {
+    menuItemElement.classList.add("current");
+    const clientRect = menuItemElement.getBoundingClientRect();
+    const position = {
+      x: clientRect.x,
+      y: clientRect.y + clientRect.height,
+    };
+    const menuPanel = new MenuPanel(items, {
+      position,
+      onSelect: () => {
+        this.showMenuWhenHover = false;
+        this.clearCurrentSelection();
+      },
+      onClose: () => {
+        this.showMenuWhenHover = false;
+        this.clearCurrentSelection();
+      },
+    });
+    this.contentElement.appendChild(menuPanel);
+  }
+
+  render() {
+    const fragment = document.createDocumentFragment();
+    for (const item of this.items) {
+      fragment.appendChild(
+        html.div(
+          {
+            class: "menu-item",
+            onmousedown: (event) => {
+              const currentSelection = this.contentElement.querySelector(".current");
+              if (currentSelection === event.target) {
+                event.stopImmediatePropagation();
+              }
+            },
+          },
+          [item.title]
+        )
+      );
+    }
+    this.contentElement.appendChild(fragment);
+  }
+}
+
+customElements.define("menu-bar", MenuBar);

src/fontra/client/web-components/menu-panel.js

@@ -1,27 +1,23 @@
 import { themeColorCSS } from "./theme-support.js";
 import * as html from "/core/html-utils.js";
 import { SimpleElement } from "/core/html-utils.js";
-import { capitalizeFirstLetter, reversed } from "/core/utils.js";
+import { capitalizeFirstLetter, enumerate, reversed } from "/core/utils.js";
+import { InlineSVG } from "/web-components/inline-svg.js";
 
 export const MenuItemDivider = { title: "-" };
 
 export function showMenu(menuItems, position, positionContainer, container) {
   if (!container) {
     container = document.querySelector("#menu-panel-container");
   }
-  const menu = new MenuPanel(menuItems, position, positionContainer);
+  const menu = new MenuPanel(menuItems, { position, positionContainer });
   container.appendChild(menu);
 }
 
-class MenuPanel extends SimpleElement {
+export class MenuPanel extends SimpleElement {
   static openMenuPanels = [];
 
   static closeAllMenus(event) {
-    if (event) {
-      if (event.target instanceof MenuPanel) {
-        return;
-      }
-    }
     for (const element of MenuPanel.openMenuPanels) {
       element.parentElement?.removeChild(element);
     }
@@ -66,11 +62,20 @@ class MenuPanel extends SimpleElement {
     .context-menu-item {
       display: grid;
       grid-template-columns: 1em auto;
+      align-items: center;
       gap: 0em;
       padding: 0.1em 0.8em 0.1em 0.5em; /* top, right, bottom, left */
       color: #8080a0;
     }
 
+    .with-submenu {
+      grid-template-columns: 1em auto auto;
+    }
+
+    .has-open-submenu {
+      background-color: #dedede;
+    }
+
     .context-menu-item.enabled {
       color: inherit;
     }
@@ -86,51 +91,91 @@ class MenuPanel extends SimpleElement {
       gap: 0.5em;
       justify-content: space-between;
     }
+
+    .submenu-icon {
+      width: 10px;
+      height: 14px;
+    }
   `;
 
-  constructor(menuItems, position, positionContainer) {
+  constructor(menuItems, options = {}) {
     super();
+    options = { visible: true, ...options };
     this.style = "display: none;";
-    this.position = position;
-    this.positionContainer = positionContainer;
+    this.visible = options.visible;
+    this.position = options.position;
+    this.onSelect = options.onSelect;
+    this.onClose = options.onClose;
+    this.positionContainer = options.positionContainer;
     this.menuElement = html.div({ class: "menu-container", tabindex: 0 });
+    this.childOf = options.childOf;
     this.menuSearchText = "";
 
     // No context menu on our context menu please:
     this.menuElement.oncontextmenu = (event) => event.preventDefault();
 
-    for (const item of menuItems) {
+    this.menuItems = menuItems;
+
+    for (const [index, item] of enumerate(menuItems)) {
+      const hasSubMenu = typeof item.getItems === "function";
       let itemElement;
       if (item === MenuItemDivider || item.title === "-") {
         itemElement = html.hr({ class: "menu-item-divider" });
       } else {
+        const classNames = ["context-menu-item"];
+        if (
+          (!hasSubMenu || item.getItems().length > 0) &&
+          typeof item.enabled === "function" &&
+          item.enabled()
+        ) {
+          classNames.push("enabled");
+        }
+        if (hasSubMenu) {
+          classNames.push("with-submenu");
+        }
+        const itemElementContent = [
+          html.div({ class: "check-mark" }, [item.checked ? "✓" : ""]),
+          html.div({ class: "item-content" }, [
+            typeof item.title === "function" ? item.title() : item.title,
+            html.span({}, [buildShortCutString(item.shortCut)]),
+          ]),
+        ];
+        if (hasSubMenu) {
+          itemElementContent.push(
+            html.div({ class: "submenu-icon" }, [
+              new InlineSVG(`/tabler-icons/chevron-right.svg`, {
+                style: "margin-top: 2px",
+              }),
+            ])
+          );
+        }
         itemElement = html.div(
           {
-            class: `context-menu-item ${item.enabled() ? "enabled" : ""}`,
+            class: classNames.join(" "),
             onmouseenter: (event) => this.selectItem(itemElement),
             onmousemove: (event) => {
               if (!itemElement.classList.contains("selected")) {
                 this.selectItem(itemElement);
               }
             },
+            onmousedown: (event) => {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+            },
             onmouseleave: (event) => itemElement.classList.remove("selected"),
             onmouseup: (event) => {
               event.preventDefault();
               event.stopImmediatePropagation();
               if (item.enabled()) {
                 item.callback?.(event);
                 this.dismiss();
+                this.onSelect?.(itemElement);
               }
             },
           },
-          [
-            html.div({ class: "check-mark" }, [item.checked ? "✓" : ""]),
-            html.div({ class: "item-content" }, [
-              typeof item.title === "function" ? item.title() : item.title,
-              html.span({}, [buildShortCutString(item.shortCut)]),
-            ]),
-          ]
+          itemElementContent
         );
+        itemElement.dataset.index = index;
       }
       this.menuElement.appendChild(itemElement);
     }
@@ -143,6 +188,16 @@ class MenuPanel extends SimpleElement {
   }
 
   connectedCallback() {
+    if (this.visible) {
+      this.show();
+    }
+  }
+
+  hide() {
+    this.style.display = "none";
+  }
+
+  show() {
     this._savedActiveElement = document.activeElement;
     const position = { ...this.position };
     this.style = `display: inherited; left: ${position.x}px; top: ${position.y}px;`;
@@ -167,14 +222,47 @@ class MenuPanel extends SimpleElement {
     }
     this.parentElement?.removeChild(this);
     this._savedActiveElement?.focus();
+    this.onClose?.();
   }
 
   selectItem(itemElement) {
+    for (const menuPanel of MenuPanel.openMenuPanels) {
+      if (menuPanel.childOf === this) {
+        menuPanel.dismiss();
+        break;
+      }
+    }
+
+    for (const item of this.menuElement.children) {
+      if (item.classList.contains("has-open-submenu")) {
+        item.classList.remove("has-open-submenu");
+      }
+    }
+
     const selectedItem = this.findSelectedItem();
     if (selectedItem && selectedItem !== itemElement) {
       selectedItem.classList.remove("selected");
     }
     itemElement.classList.add("selected");
+
+    if (itemElement.classList.contains("with-submenu")) {
+      const { y: menuElementY } = this.getBoundingClientRect();
+      const { y, width } = itemElement.getBoundingClientRect();
+      const submenu = new Menupanel(
+        this.menuItems[itemElement.dataset.index].getItems(),
+        {
+          position: {
+            x: 0,
+            y: 0,
+          },
+          childOf: this,
+        }
+      );
+      this.menuElement.appendChild(submenu);
+      submenu.position = { x: width, y: y - menuElementY - 4 };
+      submenu.show();
+      itemElement.classList.add("has-open-submenu");
+    }
   }
 
   handleKeyDown(event) {