@lvce-editor/menu-worker 1.5.0 → 1.7.0

package/dist/menuWorkerMain.js

@@ -421,10 +421,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$3 = (id, fn) => {
+const set$4 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get$2 = id => {
+const get$3 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -440,7 +440,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$3(id, resolve);
+  set$4(id, resolve);
   return {
     id,
     promise
@@ -601,14 +601,14 @@ const unwrapJsonRpcResult = responseMessage => {
   }
   throw new JsonRpcError('unexpected response message');
 };
-const warn = (...args) => {
+const warn$1 = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$2(id);
+  const fn = get$3(id);
   if (!fn) {
     console.log(response);
-    warn(`callback ${id} may already be disposed`);
+    warn$1(`callback ${id} may already be disposed`);
     return;
   }
   fn(response);
@@ -1151,6 +1151,9 @@ const getKeyCodeString = keyCode => {
 const CtrlCmd = 1 << 11 >>> 0;
 const Shift = 1 << 10 >>> 0;
 
+const Separator$2 = 1;
+const Disabled$1 = 5;
+
 const parseKey = rawKey => {
   const isCtrl = Boolean(rawKey & CtrlCmd);
   const isShift = Boolean(rawKey & Shift);
@@ -1166,10 +1169,10 @@ const parseKey = rawKey => {
 const RendererWorker = 1;
 
 const rpcs = Object.create(null);
-const set$2 = (id, rpc) => {
+const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$1 = id => {
+const get$2 = id => {
   return rpcs[id];
 };
 
@@ -1177,21 +1180,21 @@ const create$1 = rpcId => {
   return {
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
     set(rpc) {
-      set$2(rpcId, rpc);
+      set$3(rpcId, rpc);
     },
     async dispose() {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       await rpc.dispose();
     }
   };
@@ -1199,7 +1202,7 @@ const create$1 = rpcId => {
 
 const {
   invoke: invoke$1,
-  set: set$1} = create$1(RendererWorker);
+  set: set$2} = create$1(RendererWorker);
 
 const matchesArgs = (a, b) => {
   if (!a && !b) {
@@ -1227,11 +1230,16 @@ const getCommandKeyBinding = (keyBindings, command, args) => {
   return undefined;
 };
 
+/* eslint-disable no-console */
+const warn = (...args) => {
+  console.warn(...args);
+};
+
 const invoke = async (method, ...params) => {
   // TODO
 };
 
-const state$2 = {
+const state$1 = {
   /**
    * @type {any}
    */
@@ -1829,7 +1837,7 @@ const getMenuEntries2 = async (uid, menuId, ...args) => {
 };
 
 const addKeyBindings = menuEntries => {
-  const keyBindings = state$2.matchingKeyBindings;
+  const keyBindings = state$1.matchingKeyBindings;
   const newMenuEntries = [];
   for (const menuEntry of menuEntries) {
     const keyBinding = getCommandKeyBinding(keyBindings, menuEntry.command, menuEntry.args);
@@ -2085,17 +2093,72 @@ const getVisible = (items, focusedIndex, expanded, level) => {
   return visibleItems;
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 // TODO lazyload menuEntries and use Command.execute (maybe)
-const CONTEXT_MENU_WIDTH$1 = 250;
-const state$1 = {
-  menus: []};
-const addMenuInternal$1 = menu => {
-  if (state$1.menus.length > 5) {
+
+// TODO difference between focusing with mouse or keyboard
+// with mouse -> open submenu
+// with keyboard -> don't open submenu, only focus
+
+// TODO this code seems a bit too complicated, maybe it can be simplified
+
+const state = {
+  menus: [],
+  latestTimeStamp: 0};
+const addMenuInternal = menu => {
+  if (state.menus.length > 5) {
     throw new Error('too many menus');
   }
-  state$1.menus.push(menu);
+  state.menus.push(menu);
   return menu;
 };
+const getCount = () => {
+  return state.menus.length;
+};
+const reset = () => {
+  state.menus = [];
+};
+const get$1 = index => {
+  return state.menus[index];
+};
+const set$1 = menus => {
+  state.menus = menus;
+};
+const getAll = () => {
+  return state.menus;
+};
+const setTimestamp = timestamp => {
+  state.latestTimeStamp = timestamp;
+};
+const getLatestTimestamp = () => {
+  return state.latestTimeStamp;
+};
+
+// TODO lazyload menuEntries and use Command.execute (maybe)
+const CONTEXT_MENU_ITEM_HEIGHT$2 = 26;
+const CONTEXT_MENU_SEPARATOR_HEIGHT$2 = 11;
+const CONTEXT_MENU_PADDING$2 = 8;
+const getMenuHeight$2 = items => {
+  let height = CONTEXT_MENU_PADDING$2;
+  for (const item of items) {
+    switch (item.flags) {
+      case Separator$1:
+        height += CONTEXT_MENU_SEPARATOR_HEIGHT$2;
+        break;
+      default:
+        height += CONTEXT_MENU_ITEM_HEIGHT$2;
+        break;
+    }
+  }
+  return height;
+};
+
+// TODO lazyload menuEntries and use Command.execute (maybe)
+const MENU_WIDTH = 150;
+const CONTEXT_MENU_WIDTH$1 = 250;
+const getMenuWidth = () => {
+  return CONTEXT_MENU_WIDTH$1;
+};
 
 // TODO handle printable letter and focus item that starts with that letter
 
@@ -2147,11 +2210,11 @@ const getMenuBounds$1 = (x, y, items) => {
 const show$2 = async (x, y, id, mouseBlocking = false, ...args) => {
   const items = await getMenuEntriesWithKeyBindings(id, ...args);
   const bounds = getMenuBounds$1(x, y, items);
-  const menu = addMenuInternal$1({
+  const menu = addMenuInternal({
     id,
     items,
     focusedIndex: -1,
-    level: state$1.menus.length,
+    level: getCount(),
     x: bounds.x,
     y: bounds.y
   });
@@ -2162,11 +2225,11 @@ const show$2 = async (x, y, id, mouseBlocking = false, ...args) => {
 const show2$2 = async (uid, menuId, x, y, mouseBlocking = false, ...args) => {
   const items = await getMenuEntriesWithKeyBindings2(uid, menuId, ...args);
   const bounds = getMenuBounds$1(x, y, items);
-  const menu = addMenuInternal$1({
+  const menu = addMenuInternal({
     id: menuId,
     items,
     focusedIndex: -1,
-    level: state$1.menus.length,
+    level: getCount(),
     x: bounds.x,
     y: bounds.y
   });
@@ -2175,10 +2238,10 @@ const show2$2 = async (uid, menuId, x, y, mouseBlocking = false, ...args) => {
   await invoke(/* Menu.show */'Menu.showMenu', /* x */bounds.x, /* y */bounds.y, /* width */bounds.width, /* height */bounds.height, /* items */menu.items, /* level */menu.level, /* parentIndex */-1, /* dom */dom, /* mouseBlocking */mouseBlocking);
 };
 const hide = async (restoreFocus = true) => {
-  if (state$1.menus.length === 0) {
+  if (getCount() === 0) {
     return;
   }
-  state$1.menus = [];
+  reset();
   await invoke(/* Menu.hide */'Menu.hide', /* restoreFocus */restoreFocus);
 };
 
@@ -2288,6 +2351,69 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const canBeFocused = item => {
+  switch (item.flags) {
+    case Separator$2:
+    case Disabled$1:
+      return false;
+    default:
+      return true;
+  }
+};
+
+const focusIndex = async (menu, index) => {
+  if (menu.items.length === 0) {
+    return;
+  }
+  const oldFocusedIndex = menu.focusedIndex;
+  menu.focusedIndex = index;
+  return {
+    commands: [/* Menu.focusIndex */'Menu.focusIndex', /* level */menu.level, /* oldFocusedIndex */oldFocusedIndex, /* newFocusedIndex */index],
+    menus: getAll()
+  };
+};
+
+const getCurrentMenu = () => {
+  if (getCount() === 0) {
+    warn('menu not available');
+  }
+  return getAll().at(-1);
+};
+const getIndexToFocusNextStartingAt = (items, startIndex) => {
+  for (let i = startIndex; i < startIndex + items.length; i++) {
+    const index = i % items.length;
+    const item = items[index];
+    if (canBeFocused(item)) {
+      return index;
+    }
+  }
+  return -1;
+};
+const getIndexToFocusFirst = items => {
+  return getIndexToFocusNextStartingAt(items, 0);
+};
+const focusFirst = async () => {
+  const menu = getCurrentMenu();
+  if (getCount() === 0) {
+    return;
+  }
+  const indexToFocus = getIndexToFocusFirst(menu.items);
+  await focusIndex(menu, indexToFocus);
+};
+
+const getIndexToFocusNext = menu => {
+  const startIndex = menu.focusedIndex + 1;
+  return getIndexToFocusNextStartingAt(menu.items, startIndex);
+};
+const focusNext = async () => {
+  const menu = getCurrentMenu();
+  if (menu.items.length === 0) {
+    return;
+  }
+  const indexToFocus = getIndexToFocusNext(menu);
+  await focusIndex(menu, indexToFocus);
+};
+
 const commandsIds = ['closeMenu', 'handleClickAt', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleClick', 'handleFocus', 'handleFocusOut', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOut', 'handleMouseOver', 'handlePointerOver', 'handlePointerOut', 'toggleIndex', 'toggleMenu'];
 
 const getCommandIds = () => {
@@ -2332,6 +2458,33 @@ const getKeyBindings = () => {
   }];
 };
 
+const getMenuHideCommands = async (restoreFocus = true) => {
+  if (getCount() === 0) {
+    return {
+      newMenus: [],
+      commands: []
+    };
+  }
+  reset();
+  return {
+    commands: [/* Menu.hide */'Menu.hide', /* restoreFocus */restoreFocus],
+    newMenus: []
+  };
+};
+
+const menus = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHelp, MenuEntriesRun, MenuEntriesSelection, MenuEntriesTerminal, MenuEntriesTitleBar, MenuEntriesView, MenuEntriesOpenRecent];
+
+const getMenuIds = () => {
+  return menus.map(menu => menu.id);
+};
+const getMenuEntries = (id, platform) => {
+  const menu = menus.find(item => item.id === id);
+  if (!menu) {
+    return [];
+  }
+  return menu.getMenuEntries(platform);
+};
+
 // TODO lazyload menuEntries and use Command.execute (maybe)
 const CONTEXT_MENU_WIDTH = 250;
 
@@ -2341,16 +2494,6 @@ const CONTEXT_MENU_WIDTH = 250;
 
 // TODO this code seems a bit too complicated, maybe it can be simplified
 
-const state = {
-  menus: []};
-const addMenuInternal = menu => {
-  if (state.menus.length > 5) {
-    throw new Error('too many menus');
-  }
-  state.menus.push(menu);
-  return menu;
-};
-
 // TODO handle printable letter and focus item that starts with that letter
 
 // TODO pageup / pagedown keys
@@ -2404,47 +2547,110 @@ const getMenuShowCommands = async (items, menuId, x, y, mouseBlocking = false) =
     id: menuId,
     items,
     focusedIndex: -1,
-    level: state.menus.length,
+    level: getCount(),
     x: bounds.x,
     y: bounds.y
   });
   const visible = getVisible(menu.items, -1, false, menu.level);
   const dom = getMenuVirtualDom(visible).slice(1);
   return {
+    menus: getAll(),
     menu,
     commands: [/* Menu.show */'Menu.showMenu', /* x */bounds.x, /* y */bounds.y, /* width */bounds.width, /* height */bounds.height, /* items */menu.items, /* level */menu.level, /* parentIndex */-1, /* dom */dom, /* mouseBlocking */mouseBlocking]
   };
 };
 
-const getMenuHideCommands = async (restoreFocus = true) => {
-  if (state.menus.length === 0) {
+const handleContextMenu = state => {
+  return state;
+};
+
+const hideSubMenus = async level => {
+  if (level < getCount()) {
+    set$1(getAll().slice(0, level + 1));
     return {
-      newMenus: [],
-      commands: []
+      commands: [/* Menu.hideSubMenu */'Menu.hideSubMenu', /* level */level + 1],
+      menus: getAll()
     };
   }
-  state.menus = [];
+};
+
+const showSubMenuAtEnter = async (level, index, enterX, enterY) => {
+  // TODO delete old menus
+  set$1(getAll().slice(0, level + 1));
+  const parentMenu = get$1(level);
+  const item = parentMenu.items[index];
+  const subMenuItems = await getMenuEntries$1(item.id);
+  const subMenu = addMenuInternal({
+    id: item.id,
+    items: subMenuItems,
+    focusedIndex: -1,
+    level: getCount(),
+    y: parentMenu.y + index * 25,
+    x: parentMenu.x + MENU_WIDTH,
+    enterX,
+    enterY
+  });
+  const width = getMenuWidth();
+  const height = getMenuHeight$2(subMenuItems);
+  const visible = getVisible(subMenu.items, -1, false, subMenu.level);
+  const dom = getMenuVirtualDom(visible).slice(1);
   return {
-    commands: [/* Menu.hide */'Menu.hide', /* restoreFocus */restoreFocus],
-    newMenus: []
+    commands: [/* Menu.showMenu */'Menu.showMenu', /* x */subMenu.x, /* y */subMenu.y, /* width */width, /* height */height, /* items */subMenu.items, /* level */subMenu.level, /* parentIndex */index, /* dom */dom],
+    menus: getAll()
   };
 };
+const showSubMenu = async (level, index) => {
+  return showSubMenuAtEnter(level, index, -1, -1);
+};
 
-const menus = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHelp, MenuEntriesRun, MenuEntriesSelection, MenuEntriesTerminal, MenuEntriesTitleBar, MenuEntriesView, MenuEntriesOpenRecent];
-
-const getMenuIds = () => {
-  return menus.map(menu => menu.id);
+/* eslint-disable @typescript-eslint/no-implied-eval */
+const MENU_DELAY_TRIANGLE = 300;
+const resolveAfterTimeout = fn => {
+  setTimeout(fn, MENU_DELAY_TRIANGLE);
 };
-const getMenuEntries = (id, platform) => {
-  const menu = menus.find(item => item.id === id);
-  if (!menu) {
-    return [];
+const handleMouseEnter = async (level, index, enterX, enterY, enterTimeStamp) => {
+  setTimestamp(enterTimeStamp);
+  if (level >= getCount()) {
+    return;
+  }
+  const menu = get$1(level);
+  if (menu.focusedIndex === index) {
+    return;
+  }
+  if (level < getCount() - 1) {
+    const subMenu = get$1(level + 1);
+    const subMenuEnterX = subMenu.enterX;
+    // TODO should check for triangle position here
+    if (enterX >= subMenuEnterX) {
+      await new Promise(resolveAfterTimeout);
+      if (getLatestTimestamp() !== enterTimeStamp) {
+        return;
+      }
+    }
+  }
+  const item = menu.items[index];
+  await focusIndex(menu, index);
+  switch (item.flags) {
+    case /* SubMenu */4:
+      await showSubMenuAtEnter(menu.level, index, enterX, enterY);
+      break;
+    default:
+      await hideSubMenus(menu.level);
+      break;
   }
-  return menu.getMenuEntries(platform);
 };
 
-const handleContextMenu = state => {
-  return state;
+const handleMouseLeave = async () => {
+  const menu = get$1(0);
+  if (menu.items.length === 0) {
+    return;
+  }
+  const oldFocusedIndex = menu.focusedIndex;
+  menu.focusedIndex = -1;
+  return {
+    commands: [/* Menu.focusIndex */'Menu.focusIndex', /* level */menu.level, /* oldFocusedIndex */oldFocusedIndex, /* newFocusedIndex */-1],
+    menus: getAll()
+  };
 };
 
 const loadContent = async (state, titleBarEntries) => {
@@ -2574,28 +2780,34 @@ const wrapCommand = fn => {
 };
 
 const commandMap = {
-  'Menu.getMenuEntries': getMenuEntries,
-  'Menu.getMenuIds': getMenuIds,
-  'Menu.handleContextMenu': handleContextMenu,
-  'Menu.renderEventListeners': renderEventListeners,
   'Menu.diff2': diff2,
+  'Menu.focusFirst': focusFirst,
+  'Menu.focusNext': focusNext,
   'Menu.getCommands': getCommandIds,
+  'Menu.getHideCommands': getMenuHideCommands,
   'Menu.getKeyBindings': getKeyBindings,
+  'Menu.getMenuEntries': getMenuEntries,
+  'Menu.getMenuIds': getMenuIds,
   'Menu.getMenus': getMenus,
+  'Menu.getShowCommands': getMenuShowCommands,
+  'Menu.handleContextMenu': handleContextMenu,
+  'Menu.handleMouseEnter': handleMouseEnter,
+  'Menu.handleMouseLeave': handleMouseLeave,
+  'Menu.hideSubMenus': hideSubMenus,
   'Menu.loadContent': wrapCommand(loadContent),
   'Menu.render2': render2,
+  'Menu.renderEventListeners': renderEventListeners,
   'Menu.saveState': saveState,
   'Menu.show': show,
   'Menu.show2': show2,
-  'Menu.getShowCommands': getMenuShowCommands,
-  'Menu.getHideCommands': getMenuHideCommands
+  'Menu.showSubMenu': showSubMenu
 };
 
 const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$1(rpc);
+  set$2(rpc);
 };
 
 const main = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/menu-worker",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Menu Worker",
   "repository": {
     "type": "git",