@lvce-editor/title-bar-worker 1.5.0 → 1.6.0

package/dist/titleBarWorkerMain.js

@@ -1354,10 +1354,15 @@ const getMenuVirtualDom = menuItems => {
 };
 
 const HandleClick = 'handleClick';
+const HandleClickMinimize = 'handleClickMinimize';
+const HandleClickToggleClose = 'handleClickToggleClose';
+const HandleClickToggleMaximize = 'handleClickToggleMaximize';
 const HandleFocusIn = 'handleFocusIn';
 const HandleFocusOut = 'handleFocusOut';
 const HandlePointerOut = 'handlePointerOut';
 const HandlePointerOver = 'handlePointerOver';
+const HandleMenuClick = 'handleMenuClick';
+const HandleMenuMouseOver = 'handleMenuMouseOver';
 
 const getItemVirtualDom = item => {
   // @ts-ignore
@@ -1600,7 +1605,8 @@ const doRender = async uid => {
   return commands;
 };
 
-const commandsIds = ['closeMenu', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOver', 'handleMouseOut', 'toggleIndex', 'toggleMenu', 'handleClick', 'handleFocus'];
+const commandsIds = ['closeMenu', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleClick', 'handleFocus', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOut', 'handleMouseOver', 'handlePointerOver', 'handlePointerOut', 'toggleIndex', 'toggleMenu'];
+
 const getCommandIds = () => {
   return commandsIds;
 };
@@ -2288,6 +2294,248 @@ const handleContextMenu = state => {
   return state;
 };
 
+const getTitleBarIndexFromPosition = (titleBarEntries, x, y) => {
+  let currentX = 0;
+  for (let i = 0; i < titleBarEntries.length; i++) {
+    const entry = titleBarEntries[i];
+    const entryWidth = entry.width;
+    if (x >= currentX && x < currentX + entryWidth) {
+      return i;
+    }
+    currentX += entryWidth;
+  }
+  return -1;
+};
+
+const getTotalWidth = entries => {
+  let total = 0;
+  for (const entry of entries) {
+    total += entry.width;
+  }
+  return total;
+};
+
+// TODO lazyload menuEntries and use Command.execute (maybe)
+const CONTEXT_MENU_ITEM_HEIGHT = 26;
+const CONTEXT_MENU_SEPARATOR_HEIGHT = 11;
+const CONTEXT_MENU_PADDING = 8;
+const getMenuHeight = items => {
+  let height = CONTEXT_MENU_PADDING;
+  for (const item of items) {
+    switch (item.flags) {
+      case Separator:
+        height += CONTEXT_MENU_SEPARATOR_HEIGHT;
+        break;
+      default:
+        height += CONTEXT_MENU_ITEM_HEIGHT;
+        break;
+    }
+  }
+  return height;
+};
+
+// TODO lazyload menuEntries and use Command.execute (maybe)
+const MENU_WIDTH = 150;
+const CONTEXT_MENU_WIDTH = 250;
+const getMenuWidth = () => {
+  return CONTEXT_MENU_WIDTH;
+};
+
+// TODO difference between focusing with mouse or keyboard
+// with mouse -> open submenu
+// with keyboard -> don't open submenu, only focus
+
+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 getIndexToFocusLast = items => {
+  return getIndexToFocusPreviousStartingAt(items, items.length - 1);
+};
+
+// TODO this code seems a bit too complicated, maybe it can be simplified
+const getIndexToFocusPreviousStartingAt = (items, startIndex) => {
+  for (let i = startIndex; i > startIndex - items.length; i--) {
+    const index = (i + items.length) % items.length;
+    const item = items[index];
+    if (canBeFocused(item)) {
+      return index;
+    }
+  }
+  return -1;
+};
+const getIndexToFocusPrevious = menu => {
+  const startIndex = menu.focusedIndex === -1 ? menu.items.length - 1 : menu.focusedIndex - 1;
+  return getIndexToFocusPreviousStartingAt(menu.items, startIndex);
+};
+const canBeFocused = item => {
+  switch (item.flags) {
+    case Separator:
+    case Disabled:
+      return false;
+    default:
+      return true;
+  }
+};
+const getIndexToFocusNext = menu => {
+  const startIndex = menu.focusedIndex + 1;
+  return getIndexToFocusNextStartingAt(menu.items, startIndex);
+};
+
+// TODO handle printable letter and focus item that starts with that letter
+
+// TODO pageup / pagedown keys
+
+// TODO more tests
+
+const menus = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHelp, MenuEntriesRun, MenuEntriesSelection, MenuEntriesTerminal, MenuEntriesTitleBar, MenuEntriesView, MenuEntriesOpenRecent];
+const getMenus = () => {
+  return menus;
+};
+const getModule = id => {
+  for (const module of menus) {
+    if (module.id === id) {
+      return module;
+    }
+  }
+  return undefined;
+};
+const getMenuEntries = async (id, ...args) => {
+  try {
+    const module = getModule(id);
+    // @ts-ignore
+    const inject = module.inject || [];
+    // @ts-ignore
+    return module.getMenuEntries(...args);
+  } catch (error) {
+    throw new VError(error, `Failed to load menu entries for id ${id}`);
+  }
+};
+
+const openMenuAtIndex = async (state, index, shouldBeFocused) => {
+  const {
+    titleBarEntries,
+    titleBarHeight,
+    x
+  } = state;
+  // TODO race conditions
+  // TODO send renderer process
+  // 1. open menu, items to show
+  // 2. focus menu
+  const titleBarEntry = titleBarEntries[index];
+  const {
+    id
+  } = titleBarEntry;
+  const items = await getMenuEntries(id);
+  const relevantEntries = titleBarEntries.slice(0, index);
+  const totalWidths = getTotalWidth(relevantEntries);
+  const offset = totalWidths;
+  // TODO race condition: another menu might already be open at this point
+
+  const menuX = x + offset;
+  const menuY = titleBarHeight;
+  const width = getMenuWidth();
+  const height = getMenuHeight(items);
+  const menuFocusedIndex = shouldBeFocused ? getIndexToFocusNextStartingAt(items, 0) : -1;
+  const menu = {
+    id,
+    items,
+    focusedIndex: menuFocusedIndex,
+    level: 0,
+    x: menuX,
+    y: menuY,
+    width,
+    height
+  };
+  const menus = [menu];
+  return {
+    ...state,
+    isMenuOpen: true,
+    focusedIndex: index,
+    menus
+  };
+};
+
+const focusIndex = async (state, index) => {
+  object(state);
+  number(index);
+  const {
+    isMenuOpen,
+    focusedIndex
+  } = state;
+  if (index === focusedIndex) {
+    return state;
+  }
+  if (isMenuOpen) {
+    return openMenuAtIndex(state, index, /* focus */false);
+  }
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
+const handleMouseOutMenuClosed = state => {
+  return focusIndex(state, -1);
+};
+
+const handleMouseOutMenuOpen = state => {
+  return state;
+};
+
+const ifElse = (menuOpenFunction, menuClosedFunction) => {
+  const ifElseFunction = (state, ...args) => {
+    const {
+      isMenuOpen
+    } = state;
+    if (isMenuOpen) {
+      return menuOpenFunction(state, ...args);
+    }
+    return menuClosedFunction(state, ...args);
+  };
+  return ifElseFunction;
+};
+
+const handleMouseOut = ifElse(handleMouseOutMenuOpen, handleMouseOutMenuClosed);
+
+const handlePointerOut = (state, clientX, clientY) => {
+  const index = getTitleBarIndexFromPosition(state.titleBarEntries, clientX - state.x);
+  if (index === -1) {
+    return state;
+  }
+  return handleMouseOut(state, index);
+};
+
+const handleMouseOverMenuClosed = (state, index) => {
+  return focusIndex(state, index);
+};
+
+const handleMouseOverMenuOpen = async (state, index) => {
+  if (index === -1) {
+    return state;
+  }
+  return focusIndex(state, index);
+};
+
+const handleMouseOver = ifElse(handleMouseOverMenuOpen, handleMouseOverMenuClosed);
+
+const handlePointerOver = (state, clientX, clientY) => {
+  const index = getTitleBarIndexFromPosition(state.titleBarEntries, clientX - state.x);
+  if (index === -1) {
+    return state;
+  }
+  return handleMouseOver(state, index);
+};
+
 const getFontString = (fontWeight, fontSize, fontFamily) => {
   return `${fontWeight} ${fontSize}px ${fontFamily}`;
 };
@@ -2380,40 +2628,37 @@ const loadContent = async (state, titleBarEntries) => {
   };
 };
 
-const menus = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHelp, MenuEntriesRun, MenuEntriesSelection, MenuEntriesTerminal, MenuEntriesTitleBar, MenuEntriesView, MenuEntriesOpenRecent];
-const getMenus = () => {
-  return menus;
-};
-const getModule = id => {
-  for (const module of menus) {
-    if (module.id === id) {
-      return module;
-    }
-  }
-  return undefined;
-};
-const getMenuEntries = async (id, ...args) => {
-  try {
-    const module = getModule(id);
-    // @ts-ignore
-    const inject = module.inject || [];
-    // @ts-ignore
-    return module.getMenuEntries(...args);
-  } catch (error) {
-    throw new VError(error, `Failed to load menu entries for id ${id}`);
-  }
-};
-
 const renderEventListeners = () => {
   return [{
-    name: 'handleClickMinimize',
+    name: HandleClickMinimize,
     params: ['handleClickMinimize']
   }, {
-    name: 'handleClickClose',
+    name: HandleClickToggleClose,
     params: ['handleClickClose']
   }, {
-    name: 'handleClickToggleMaximize',
+    name: HandleClickToggleMaximize,
     params: ['handleClickToggleMaximize']
+  }, {
+    name: HandleFocusIn,
+    params: ['handlefocus']
+  }, {
+    name: HandleMenuClick,
+    params: ['handleMenuClick', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleMenuMouseOver,
+    params: ['handleMenuMouseOver', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleClick,
+    params: ['handleClick', 'event.button', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandlePointerOut,
+    params: ['handlePointerOut', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandlePointerOver,
+    params: ['handlePointerOver', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleFocusOut,
+    params: ['handleFocusOut', 'event.clientX', 'event.clientY'] // TODO maybe check relatedTarget
   }];
 };
 
@@ -2476,155 +2721,6 @@ const previous = (items, index) => {
   return index === 0 ? items.length - 1 : index - 1;
 };
 
-const getTotalWidth = entries => {
-  let total = 0;
-  for (const entry of entries) {
-    total += entry.width;
-  }
-  return total;
-};
-
-// TODO lazyload menuEntries and use Command.execute (maybe)
-const CONTEXT_MENU_ITEM_HEIGHT = 26;
-const CONTEXT_MENU_SEPARATOR_HEIGHT = 11;
-const CONTEXT_MENU_PADDING = 8;
-const getMenuHeight = items => {
-  let height = CONTEXT_MENU_PADDING;
-  for (const item of items) {
-    switch (item.flags) {
-      case Separator:
-        height += CONTEXT_MENU_SEPARATOR_HEIGHT;
-        break;
-      default:
-        height += CONTEXT_MENU_ITEM_HEIGHT;
-        break;
-    }
-  }
-  return height;
-};
-
-// TODO lazyload menuEntries and use Command.execute (maybe)
-const MENU_WIDTH = 150;
-const CONTEXT_MENU_WIDTH = 250;
-const getMenuWidth = () => {
-  return CONTEXT_MENU_WIDTH;
-};
-
-// TODO difference between focusing with mouse or keyboard
-// with mouse -> open submenu
-// with keyboard -> don't open submenu, only focus
-
-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 getIndexToFocusLast = items => {
-  return getIndexToFocusPreviousStartingAt(items, items.length - 1);
-};
-
-// TODO this code seems a bit too complicated, maybe it can be simplified
-const getIndexToFocusPreviousStartingAt = (items, startIndex) => {
-  for (let i = startIndex; i > startIndex - items.length; i--) {
-    const index = (i + items.length) % items.length;
-    const item = items[index];
-    if (canBeFocused(item)) {
-      return index;
-    }
-  }
-  return -1;
-};
-const getIndexToFocusPrevious = menu => {
-  const startIndex = menu.focusedIndex === -1 ? menu.items.length - 1 : menu.focusedIndex - 1;
-  return getIndexToFocusPreviousStartingAt(menu.items, startIndex);
-};
-const canBeFocused = item => {
-  switch (item.flags) {
-    case Separator:
-    case Disabled:
-      return false;
-    default:
-      return true;
-  }
-};
-const getIndexToFocusNext = menu => {
-  const startIndex = menu.focusedIndex + 1;
-  return getIndexToFocusNextStartingAt(menu.items, startIndex);
-};
-
-// TODO handle printable letter and focus item that starts with that letter
-
-// TODO pageup / pagedown keys
-
-// TODO more tests
-
-const openMenuAtIndex = async (state, index, shouldBeFocused) => {
-  const {
-    titleBarEntries,
-    titleBarHeight,
-    x
-  } = state;
-  // TODO race conditions
-  // TODO send renderer process
-  // 1. open menu, items to show
-  // 2. focus menu
-  const titleBarEntry = titleBarEntries[index];
-  const {
-    id
-  } = titleBarEntry;
-  const items = await getMenuEntries(id);
-  const relevantEntries = titleBarEntries.slice(0, index);
-  const totalWidths = getTotalWidth(relevantEntries);
-  const offset = totalWidths;
-  // TODO race condition: another menu might already be open at this point
-
-  const menuX = x + offset;
-  const menuY = titleBarHeight;
-  const width = getMenuWidth();
-  const height = getMenuHeight(items);
-  const menuFocusedIndex = shouldBeFocused ? getIndexToFocusNextStartingAt(items, 0) : -1;
-  const menu = {
-    id,
-    items,
-    focusedIndex: menuFocusedIndex,
-    level: 0,
-    x: menuX,
-    y: menuY,
-    width,
-    height
-  };
-  const menus = [menu];
-  return {
-    ...state,
-    isMenuOpen: true,
-    focusedIndex: index,
-    menus
-  };
-};
-
-const focusIndex = async (state, index) => {
-  object(state);
-  number(index);
-  const {
-    isMenuOpen
-  } = state;
-  if (isMenuOpen) {
-    return openMenuAtIndex(state, index, /* focus */false);
-  }
-  return {
-    ...state,
-    focusedIndex: index
-  };
-};
-
 const focusFirst = state => {
   const indexToFocus = first();
   return focusIndex(state, indexToFocus);
@@ -2662,7 +2758,7 @@ const focusPrevious = state => {
 
 const LeftClick = 0;
 
-const toggleIndex = (state, index) => {
+const toggleIndex = async (state, index) => {
   const {
     isMenuOpen,
     focusedIndex
@@ -2673,7 +2769,7 @@ const toggleIndex = (state, index) => {
   return openMenuAtIndex(state, index, /* focus */false);
 };
 
-const handleClick = (state, button, index) => {
+const handleClick = async (state, button, index) => {
   if (button !== LeftClick) {
     return state;
   }
@@ -2724,19 +2820,6 @@ const handleKeyArrowDownMenuOpen = state => {
   };
 };
 
-const ifElse = (menuOpenFunction, menuClosedFunction) => {
-  const ifElseFunction = (state, ...args) => {
-    const {
-      isMenuOpen
-    } = state;
-    if (isMenuOpen) {
-      return menuOpenFunction(state, ...args);
-    }
-    return menuClosedFunction(state, ...args);
-  };
-  return ifElseFunction;
-};
-
 const handleKeyArrowDown = ifElse(handleKeyArrowDownMenuOpen, handleKeyArrowDownMenuClosed);
 
 const handleKeyArrowLeftMenuClosed = state => {
@@ -3061,29 +3144,6 @@ const handleMenuMouseOver = async (state, level, index) => {
   };
 };
 
-const handleMouseOutMenuClosed = state => {
-  return focusIndex(state, -1);
-};
-
-const handleMouseOutMenuOpen = state => {
-  return state;
-};
-
-const handleMouseOut = ifElse(handleMouseOutMenuOpen, handleMouseOutMenuClosed);
-
-const handleMouseOverMenuClosed = (state, index) => {
-  return focusIndex(state, index);
-};
-
-const handleMouseOverMenuOpen = async (state, index) => {
-  if (index === -1) {
-    return state;
-  }
-  return focusIndex(state, index);
-};
-
-const handleMouseOver = ifElse(handleMouseOverMenuOpen, handleMouseOverMenuClosed);
-
 const toggleMenu = state => {
   const {
     isMenuOpen
@@ -3132,8 +3192,10 @@ const commandMap = {
   'TitleBarMenuBar.handleKeyArrowLeft': wrapCommand(handleKeyArrowLeft),
   'TitleBarMenuBar.handleKeyArrowRight': wrapCommand(handleKeyArrowRight),
   'TitleBarMenuBar.handleKeyArrowUp': wrapCommand(handleKeyArrowUp),
+  'TitleBarMenuBar.handlePointerOver': wrapCommand(handlePointerOver),
   'TitleBarMenuBar.handleKeyEnd': wrapCommand(handleKeyEnd),
   'TitleBarMenuBar.handleKeyEnter': wrapCommand(handleKeyEnter),
+  'TitleBarMenuBar.handlePointerOut': wrapCommand(handlePointerOut),
   'TitleBarMenuBar.handleKeyEscape': wrapCommand(handleKeyEscape),
   'TitleBarMenuBar.handleKeyHome': wrapCommand(handleKeyHome),
   'TitleBarMenuBar.handleKeySpace': wrapCommand(handleKeySpace),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/title-bar-worker",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Title Bar Worker",
   "repository": {
     "type": "git",