@lvce-editor/title-bar-worker 1.4.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
@@ -1459,9 +1464,11 @@ const File$1 = 'File';
 const Go$1 = 'Go';
 const Help$1 = 'Help';
 const MoreDot = 'More ...';
+const OpenProcessExplorer = 'Open Process Explorer';
 const Run$1 = 'Run';
 const Selection$1 = 'Selection';
 const Terminal$1 = 'Terminal';
+const ToggleDeveloperTools = 'Toggle Developer Tools';
 const View$1 = 'View';
 
 const moreDot = () => {
@@ -1598,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;
 };
@@ -1767,6 +1775,7 @@ const UiStrings$1 = {
   OpenFile: 'Open File',
   OpenFolder: 'Open Folder',
   OpenRecent: 'Open Recent',
+  Exit: 'Exit',
   Save: 'Save',
   SaveAll: 'Save All'
 };
@@ -1791,13 +1800,15 @@ const save = () => {
 const saveAll = () => {
   return i18nString(UiStrings$1.SaveAll);
 };
-
-const platform = 1;
+const exit = () => {
+  return i18nString(UiStrings$1.Exit);
+};
 
 const Web = 1;
+const Electron = 2;
 
 const id$8 = File;
-const getMenuEntries$c = () => {
+const getMenuEntries$c = platform => {
   const entries = [{
     id: 'newFile',
     label: newFile(),
@@ -1834,6 +1845,14 @@ const getMenuEntries$c = () => {
     flags: None,
     command: 'Main.saveAll'
   }];
+  if (platform === Electron) {
+    entries.push(menuEntrySeparator, {
+      id: 'exit',
+      label: exit(),
+      flags: Ignore,
+      command: 'Chrome.exit'
+    });
+  }
   return entries;
 };
 
@@ -1854,6 +1873,12 @@ const MenuEntriesGo = {
   id: id$7
 };
 
+const toggleDeveloperTools = () => {
+  return i18nString(ToggleDeveloperTools);
+};
+const openProcessExplorer = () => {
+  return i18nString(OpenProcessExplorer);
+};
 const checkForUpdates = () => {
   return i18nString(CheckForUpdates);
 };
@@ -1861,16 +1886,30 @@ const about = () => {
   return i18nString(About);
 };
 
-const isAutoUpdateSupported = () => {
-  {
+const isAutoUpdateSupported = platform => {
+  if (platform !== Electron) {
     return false;
   }
+  return false;
 };
 
 const id$6 = Help;
-const getMenuEntries$a = async () => {
-  const autoUpdateSupported = isAutoUpdateSupported();
+const getMenuEntries$a = async platform => {
+  const autoUpdateSupported = isAutoUpdateSupported(platform);
   const entries = [];
+  if (platform !== Web) {
+    entries.push({
+      id: 'toggleDeveloperTools',
+      label: toggleDeveloperTools(),
+      flags: None,
+      command: 'Developer.toggleDeveloperTools'
+    }, {
+      id: 'openProcessExplorer',
+      label: openProcessExplorer(),
+      flags: RestoreFocus,
+      command: 'Developer.openProcessExplorer'
+    });
+  }
   if (autoUpdateSupported) {
     entries.push(menuEntrySeparator, {
       id: 'checkForUpdates',
@@ -2126,7 +2165,7 @@ const getMenuEntries$4 = () => {
   }];
 };
 
-const getFn = () => {
+const getFn = platform => {
   switch (platform) {
     case Web:
       return getMenuEntries$4;
@@ -2135,8 +2174,8 @@ const getFn = () => {
   }
 };
 const id$1 = TitleBar;
-const getMenuEntries$3 = async () => {
-  const fn = getFn();
+const getMenuEntries$3 = async platform => {
+  const fn = getFn(platform);
   return fn();
 };
 
@@ -2158,15 +2197,16 @@ const MenuEntriesView = {
 };
 
 const menus$1 = [MenuEntriesEdit, MenuEntriesFile, MenuEntriesGo, MenuEntriesHelp, MenuEntriesRun, MenuEntriesSelection, MenuEntriesTerminal, MenuEntriesTitleBar, MenuEntriesView, MenuEntriesOpenRecent];
+
 const getMenuIds = () => {
   return menus$1.map(menu => menu.id);
 };
-const getMenuEntries$1 = id => {
+const getMenuEntries$1 = (id, platform) => {
   const menu = menus$1.find(item => item.id === id);
   if (!menu) {
     return [];
   }
-  return menu.getMenuEntries();
+  return menu.getMenuEntries(platform);
 };
 
 const getIconVirtualDom = (icon, type = Div) => {
@@ -2250,6 +2290,252 @@ const handleClick$1 = (state, className) => {
   return state;
 };
 
+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}`;
 };
@@ -2342,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
   }];
 };
 
@@ -2438,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);
@@ -2624,7 +2758,7 @@ const focusPrevious = state => {
 
 const LeftClick = 0;
 
-const toggleIndex = (state, index) => {
+const toggleIndex = async (state, index) => {
   const {
     isMenuOpen,
     focusedIndex
@@ -2635,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;
   }
@@ -2686,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 => {
@@ -3023,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
@@ -3069,6 +3167,7 @@ const wrapCommand = fn => {
 
 const commandMap = {
   'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
+  'TitleBar.handleContextMenu': handleContextMenu,
   'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
   'TitleBar.getMenuEntries': getMenuEntries$1,
   'TitleBar.getMenuIds': getMenuIds,
@@ -3093,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.4.0",
+  "version": "1.6.0",
   "description": "Title Bar Worker",
   "repository": {
     "type": "git",