@lvce-editor/menu-worker 1.6.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,6 +1230,11 @@ const getCommandKeyBinding = (keyBindings, command, args) => {
   return undefined;
 };
 
+/* eslint-disable no-console */
+const warn = (...args) => {
+  console.warn(...args);
+};
+
 const invoke = async (method, ...params) => {
   // TODO
 };
@@ -2095,7 +2103,8 @@ const getVisible = (items, focusedIndex, expanded, level) => {
 // TODO this code seems a bit too complicated, maybe it can be simplified
 
 const state = {
-  menus: []};
+  menus: [],
+  latestTimeStamp: 0};
 const addMenuInternal = menu => {
   if (state.menus.length > 5) {
     throw new Error('too many menus');
@@ -2109,12 +2118,47 @@ const getCount = () => {
 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
 
@@ -2307,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 = () => {
@@ -2457,6 +2564,95 @@ const handleContextMenu = state => {
   return state;
 };
 
+const hideSubMenus = async level => {
+  if (level < getCount()) {
+    set$1(getAll().slice(0, level + 1));
+    return {
+      commands: [/* Menu.hideSubMenu */'Menu.hideSubMenu', /* level */level + 1],
+      menus: getAll()
+    };
+  }
+};
+
+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.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);
+};
+
+/* eslint-disable @typescript-eslint/no-implied-eval */
+const MENU_DELAY_TRIANGLE = 300;
+const resolveAfterTimeout = fn => {
+  setTimeout(fn, MENU_DELAY_TRIANGLE);
+};
+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;
+  }
+};
+
+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) => {
   return {
     ...state
@@ -2584,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.6.0",
+  "version": "1.7.0",
   "description": "Menu Worker",
   "repository": {
     "type": "git",