@lvce-editor/title-bar-worker 3.1.0 → 3.3.0

package/dist/titleBarWorkerMain.js

@@ -1401,6 +1401,27 @@ const Selection$1 = 'Selection';
 const Terminal$1 = 'Terminal';
 const ToggleDeveloperTools = 'Toggle Developer Tools';
 const View$1 = 'View';
+const AddCursorAbove = 'Add Cursor Above';
+const AddCursorBelow = 'Add Cursor Below';
+const AddCursorsToLineEnds = 'Add Cursors to Line ends';
+const AddNextOccurrence = 'Add Next Occurrence';
+const AddPreviousOccurrence = 'Add Previous Occurrence';
+const Copy = 'Copy';
+const CopyLineDown = 'Copy Line Down';
+const CopyLineUp = 'Copy Line Up';
+const Cut = 'Cut';
+const DuplicateSelection = 'Duplicate Selection';
+const ExpandSelection = 'Expand Selection';
+const MoveLineDown = 'Move Line Down';
+const MoveLineUp = 'Move Line Up';
+const Paste = 'Paste';
+const Redo = 'Redo';
+const SelectAll = 'Select All';
+const SelectAllOccurrences = 'Select All Occurrences';
+const ShrinkSelection = 'Shrink Selection';
+const ToggleBlockComment = 'Toggle Block Comment';
+const ToggleLineComment = 'Toggle Line Comment';
+const Undo = 'Undo';
 
 const file = () => {
   return i18nString(File$2);
@@ -1679,90 +1700,68 @@ const getMenuIds = () => {
   return [Edit$2, File$3, Go$2, Help$2, OpenRecent$1, Run$2, Selection$2, Terminal$2, TitleBar, View$2, MenuIdTitleBarContextMenu, TitleBarContextMenu];
 };
 
-/**
- * @enum {string}
- */
-const UiStrings$1 = {
-  AddCursorAbove: 'Add Cursor Above',
-  AddNextOccurrence: 'Add Next Occurrence',
-  AddPreviousOccurrence: 'Add Previous Occurrence',
-  Copy: 'Copy',
-  CopyLineDown: 'Copy Line Down',
-  CopyLineUp: 'Copy Line Up',
-  Cut: 'Cut',
-  MoveLineDown: 'Move Line Down',
-  MoveLineUp: 'Move Line Up',
-  Paste: 'Paste',
-  Redo: 'Redo',
-  SelectAll: 'Select All',
-  SelectAllOccurrences: 'Select All Occurrences',
-  ShrinkSelection: 'Shrink Selection',
-  ToggleBlockComment: 'Toggle Block Comment',
-  ToggleLineComment: 'Toggle Line Comment',
-  Undo: 'Undo'
-};
 const cut = () => {
-  return i18nString(UiStrings$1.Cut);
+  return i18nString(Cut);
 };
 const copy = () => {
-  return i18nString(UiStrings$1.Copy);
+  return i18nString(Copy);
 };
 const paste = () => {
-  return i18nString(UiStrings$1.Paste);
+  return i18nString(Paste);
 };
 const undo = () => {
-  return i18nString(UiStrings$1.Undo);
+  return i18nString(Undo);
 };
 const redo = () => {
-  return i18nString(UiStrings$1.Redo);
+  return i18nString(Redo);
 };
 const toggleLineComment = () => {
-  return i18nString(UiStrings$1.ToggleLineComment);
+  return i18nString(ToggleLineComment);
 };
 const toggleBlockComment = () => {
-  return i18nString(UiStrings$1.ToggleBlockComment);
+  return i18nString(ToggleBlockComment);
 };
 const selectAll = () => {
-  return i18nString(UiStrings$1.SelectAll);
+  return i18nString(SelectAll);
 };
 const expandSelection = () => {
-  return i18nString(UiStrings$1.SelectAll);
+  return i18nString(ExpandSelection);
 };
 const shrinkSelection = () => {
-  return i18nString(UiStrings$1.ShrinkSelection);
+  return i18nString(ShrinkSelection);
 };
 const copyLineUp = () => {
-  return i18nString(UiStrings$1.CopyLineUp);
+  return i18nString(CopyLineUp);
 };
 const copyLineDown = () => {
-  return i18nString(UiStrings$1.CopyLineDown);
+  return i18nString(CopyLineDown);
 };
 const moveLineUp = () => {
-  return i18nString(UiStrings$1.MoveLineUp);
+  return i18nString(MoveLineUp);
 };
 const moveLineDown = () => {
-  return i18nString(UiStrings$1.MoveLineDown);
+  return i18nString(MoveLineDown);
 };
 const duplicateSelection = () => {
-  return i18nString(UiStrings$1.MoveLineDown);
+  return i18nString(DuplicateSelection);
 };
 const addCursorAbove = () => {
-  return i18nString(UiStrings$1.AddCursorAbove);
+  return i18nString(AddCursorAbove);
 };
 const addCursorBelow = () => {
-  return i18nString(UiStrings$1.AddCursorAbove);
+  return i18nString(AddCursorBelow);
 };
 const addCursorsToLineEnds = () => {
-  return i18nString(UiStrings$1.AddCursorAbove);
+  return i18nString(AddCursorsToLineEnds);
 };
 const addNextOccurrence = () => {
-  return i18nString(UiStrings$1.AddNextOccurrence);
+  return i18nString(AddNextOccurrence);
 };
 const addPreviousOccurrence = () => {
-  return i18nString(UiStrings$1.AddPreviousOccurrence);
+  return i18nString(AddPreviousOccurrence);
 };
 const selectAllOccurrences = () => {
-  return i18nString(UiStrings$1.SelectAllOccurrences);
+  return i18nString(SelectAllOccurrences);
 };
 
 const menuEntrySeparator = {
@@ -1775,12 +1774,12 @@ const menuEntrySeparator = {
 const getMenuEntries$c = () => {
   return [{
     command: /* TODO */'-1',
-    flags: Disabled,
+    flags: None,
     id: 'undo',
     label: undo()
   }, {
     command: /* TODO */'-1',
-    flags: Disabled,
+    flags: None,
     id: 'redo',
     label: redo()
   }, menuEntrySeparator, {
@@ -2057,47 +2056,47 @@ const getMenuEntries$6 = () => {
     label: copyLineDown()
   }, {
     command: 'Editor.moveLineUp',
-    flags: Disabled,
+    flags: None,
     id: 'moveLineUp',
     label: moveLineUp()
   }, {
     command: 'Editor.moveLineDown',
-    flags: Disabled,
+    flags: None,
     id: 'moveLineDown',
     label: moveLineDown()
   }, {
     command: 'Editor.duplicateSelection',
-    flags: Disabled,
+    flags: None,
     id: 'duplicateSelection',
     label: duplicateSelection()
   }, menuEntrySeparator, {
     command: 'Editor.addCursorAbove',
-    flags: Disabled,
+    flags: None,
     id: 'addCursorAbove',
     label: addCursorAbove()
   }, {
     command: 'Editor.addCursorBelow',
-    flags: Disabled,
+    flags: None,
     id: 'addCursorBelow',
     label: addCursorBelow()
   }, {
     command: 'Editor.addCursorsToLineEnds',
-    flags: Disabled,
+    flags: None,
     id: 'addCursorsToLineEnds',
     label: addCursorsToLineEnds()
   }, {
     command: 'Editor.addNextOccurrence',
-    flags: Disabled,
+    flags: None,
     id: 'addNextOccurrence',
     label: addNextOccurrence()
   }, {
     command: 'Editor.addPreviousOccurrence',
-    flags: Disabled,
+    flags: None,
     id: 'addPreviousOccurrence',
     label: addPreviousOccurrence()
   }, {
     command: 'Editor.selectAllOccurrences',
-    flags: Disabled,
+    flags: None,
     id: 'selectAllOccurrences',
     label: selectAllOccurrences()
   }];
@@ -2877,7 +2876,8 @@ const renderMenus = (oldState, newState) => {
     const oldMenu = oldMenus[i];
     const newMenu = newMenus[i];
     if (oldMenu !== newMenu) {
-      const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
+      const expanded = newMenu.expanded ?? false;
+      const visible = getVisible(newMenu.items, newMenu.focusedIndex, expanded, newMenu.level);
       const dom = getMenuVirtualDom(visible).slice(1);
       changes.push([/* method */'updateMenu', newMenu, /* newLength */newLength, dom]);
     }
@@ -2885,9 +2885,12 @@ const renderMenus = (oldState, newState) => {
   const difference = newLength - oldLength;
   if (difference > 0) {
     const newMenu = newMenus.at(-1);
-    const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
-    const dom = getMenuVirtualDom(visible).slice(1);
-    changes.push(['addMenu', newMenu, dom]);
+    if (newMenu) {
+      const expanded = newMenu.expanded ?? false;
+      const visible = getVisible(newMenu.items, newMenu.focusedIndex, expanded, newMenu.level);
+      const dom = getMenuVirtualDom(visible).slice(1);
+      changes.push(['addMenu', newMenu, dom]);
+    }
   } else if (difference < 0) {
     changes.push(['closeMenus', newLength]);
   }
@@ -2927,7 +2930,10 @@ const createTitleBarButton = button => {
   return dom;
 };
 
-const getTitleBarButtonsVirtualDom = buttons => {
+const getTitleBarButtonsVirtualDom = (buttonsEnabled, buttons) => {
+  if (!buttonsEnabled) {
+    return [];
+  }
   return [{
     childCount: buttons.length,
     className: mergeClassNames(Viewlet, TitleBarButtons),
@@ -2940,7 +2946,10 @@ const parentNode$1 = {
   className: mergeClassNames(Viewlet, TitleBarIcon),
   type: Div
 };
-const getTitleBarIconVirtualDom = iconSrc => {
+const getTitleBarIconVirtualDom = (titleBarIconEnabled, iconSrc) => {
+  if (!titleBarIconEnabled) {
+    return [];
+  }
   return [parentNode$1, {
     alt: '',
     childCount: 0,
@@ -2970,34 +2979,27 @@ const getItemVirtualDom = item => {
     keyboardShortCut,
     label
   } = item;
-  // TODO avoid mutation
-  const dom = [{
+  let className = TitleBarTopLevelEntry;
+  if (isFocused) {
+    className += ' ' + TitleBarEntryActive;
+  }
+  return [{
     ariaExpanded: isOpen,
     ariaHasPopup: true,
     ariaKeyShortcuts: keyboardShortCut,
+    ariaOwns: isOpen ? 'Menu-0' : undefined,
     childCount: 1,
-    className: TitleBarTopLevelEntry,
+    className,
+    id: isFocused ? 'TitleBarEntryActive' : undefined,
     name: label,
     // TODO have separate name attribute
     role: MenuItem$1,
     type: Button$1
-  }];
-  if (isOpen) {
-    // @ts-ignore
-    dom[0].ariaOwns = 'Menu-0';
-  }
-  if (isFocused) {
-    dom[0].className += ' ' + TitleBarEntryActive;
-    // @ts-ignore
-    dom[0].id = 'TitleBarEntryActive';
-    dom.push({
-      childCount: 1,
-      className: TitleBarTopLevelEntryLabel,
-      type: Div
-    });
-  }
-  dom.push(text(label));
-  return dom;
+  }, ...(isFocused ? [{
+    childCount: 1,
+    className: TitleBarTopLevelEntryLabel,
+    type: Div
+  }] : []), text(label)];
 };
 const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
   const dom = visibleItems.flatMap(getItemVirtualDom);
@@ -3005,7 +3007,10 @@ const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
 };
 
 const activeId = 'TitleBarEntryActive';
-const getTitleBarMenuBarVirtualDom = (visibleItems, focusedIndex) => {
+const getTitleBarMenuBarVirtualDom = (menuBarEnabled, visibleItems, focusedIndex) => {
+  if (!menuBarEnabled) {
+    return [];
+  }
   return [{
     ariaActivedescendant: focusedIndex === -1 ? '' : activeId,
     childCount: visibleItems.length,
@@ -3026,7 +3031,10 @@ const parentNode = {
   className: 'TitleBarTitle',
   type: Div
 };
-const getTitleVirtualDom = title => {
+const getTitleVirtualDom = (titleBarTitleEnabled, title) => {
+  if (!titleBarTitleEnabled) {
+    return [];
+  }
   return [parentNode, text(title)];
 };
 
@@ -3077,44 +3085,24 @@ const getTitleBarVirtualDom = state => {
     isMenuOpen,
     title,
     titleBarButtons,
+    titleBarButtonsEnabled,
     titleBarEntries,
+    titleBarIconEnabled,
+    titleBarMenuBarEnabled,
+    titleBarTitleEnabled,
     width
   } = state;
-  const dom = [{
+  const iconSrc = getIcon(assetDir);
+  const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
+  return [{
     ariaLabel: 'Title Bar',
+    // TODO i18n string
     childCount: 4,
     className: 'Viewlet TitleBar',
     id: 'TitleBar',
     role: ContentInfo,
     type: Div
-  }];
-
-  // Add icon if enabled
-  if (state.titleBarIconEnabled) {
-    const iconSrc = getIcon(assetDir);
-    const iconDom = getTitleBarIconVirtualDom(iconSrc);
-    dom.push(...iconDom);
-  }
-
-  // Add menu bar if enabled
-  if (state.titleBarMenuBarEnabled) {
-    const visibleEntries = getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
-    const menuBarDom = getTitleBarMenuBarVirtualDom(visibleEntries, focusedIndex);
-    dom.push(...menuBarDom);
-  }
-
-  // Add title if enabled
-  if (state.titleBarTitleEnabled) {
-    const titleDom = getTitleVirtualDom(title);
-    dom.push(...titleDom);
-  }
-
-  // Add buttons if enabled
-  if (state.titleBarButtonsEnabled) {
-    const buttonsDom = getTitleBarButtonsVirtualDom(titleBarButtons);
-    dom.push(...buttonsDom);
-  }
-  return dom;
+  }, ...getTitleBarIconVirtualDom(titleBarIconEnabled, iconSrc), ...getTitleBarMenuBarVirtualDom(titleBarMenuBarEnabled, visibleEntries, focusedIndex), ...getTitleVirtualDom(titleBarTitleEnabled, title), ...getTitleBarButtonsVirtualDom(titleBarButtonsEnabled, titleBarButtons)];
 };
 
 const renderTitleBar = (oldState, newState) => {
@@ -3398,6 +3386,9 @@ const handleKeyArrowDownMenuOpen = state => {
     menus
   } = state;
   const menu = menus.at(-1);
+  if (!menu) {
+    return state;
+  }
   const newFocusedIndex = getIndexToFocusNext(menu);
   const newMenus = [...menus.slice(0, -1), {
     ...menu,
@@ -3421,6 +3412,9 @@ const closeOneMenu = state => {
     menus
   } = state;
   const parentMenu = menus.at(-2);
+  if (!parentMenu) {
+    return state;
+  }
   const newParentMenu = {
     ...parentMenu,
     expanded: false
@@ -3487,6 +3481,9 @@ const handleKeyArrowRightMenuOpen = async state => {
   } = state;
   // if menu can open sub menu to the right -> do that
   const menu = menus.at(-1);
+  if (!menu) {
+    return state;
+  }
   const {
     focusedIndex,
     items,
@@ -3497,7 +3494,7 @@ const handleKeyArrowRightMenuOpen = async state => {
     return focusNext(state);
   }
   const item = items[focusedIndex];
-  if (item.flags === SubMenu) {
+  if (item.flags === SubMenu && item.id !== undefined) {
     const subMenuEntries = await getMenuEntries(item.id);
     const subMenu = {
       focusedIndex: 0,
@@ -3530,6 +3527,9 @@ const handleKeyArrowUpMenuOpen = state => {
     menus
   } = state;
   const menu = menus.at(-1);
+  if (!menu) {
+    return state;
+  }
   const previousIndex = getIndexToFocusPrevious(menu);
   const newMenus = [...menus.slice(0, -1), {
     ...menu,
@@ -3656,6 +3656,9 @@ const selectIndexSubMenu = async (state, menu, index) => {
     y
   } = menu;
   const item = items[index];
+  if (!item.id) {
+    return state;
+  }
   const subMenuEntries = await getMenuEntries(item.id);
   const subMenu = {
     focusedIndex: -1,
@@ -3698,16 +3701,10 @@ const handleMenuClick = async (state, level, index) => {
   }
 };
 
-const handleMenuMouseOver = async (state, level, index) => {
-  object(state);
-  number(level);
-  number(index);
-  const {
-    menus
-  } = state;
+const getNewMenus = async (menus, level, index, flags) => {
   const menu = menus[level];
   if (!menu) {
-    return state;
+    return menus;
   }
   const {
     focusedIndex,
@@ -3718,7 +3715,7 @@ const handleMenuMouseOver = async (state, level, index) => {
   const item = items[index];
   if (focusedIndex === index) {
     if (index === -1) {
-      return state;
+      return menus;
     }
     if (item.flags === SubMenu && level === menus.length - 2) {
       const subMenu = menus[level + 1];
@@ -3728,26 +3725,23 @@ const handleMenuMouseOver = async (state, level, index) => {
           focusedIndex: -1
         };
         const newMenus = [...menus.slice(0, -1), newSubMenu];
-        return {
-          ...state,
-          menus: newMenus
-        };
+        return newMenus;
       }
     }
-    return state;
+    return menus;
   }
   if (index === -1) {
     const newMenus = [...menus.slice(0, level), {
       ...menu,
       focusedIndex: -1
     }];
-    return {
-      ...state,
-      menus: newMenus
-    };
+    return newMenus;
   }
   if (item.flags === SubMenu) {
     const item = items[index];
+    if (!item.id) {
+      return menus;
+    }
     const subMenuEntries = await getMenuEntries(item.id);
     const subMenu = {
       focusedIndex: -1,
@@ -3761,15 +3755,36 @@ const handleMenuMouseOver = async (state, level, index) => {
       focusedIndex: index
     };
     const newMenus = [...menus.slice(0, level - 1), newParentMenu, subMenu];
-    return {
-      ...state,
-      menus: newMenus
-    };
+    return newMenus;
   }
   const newMenus = [...menus.slice(0, level), {
     ...menu,
     focusedIndex: index
   }];
+  return newMenus;
+};
+const handleMenuMouseOver = async (state, level, index) => {
+  object(state);
+  number(level);
+  number(index);
+  const {
+    menus
+  } = state;
+  const menu = menus[level];
+  if (!menu) {
+    return state;
+  }
+  const {
+    items
+  } = menu;
+  const item = items[index];
+  if (!item) {
+    return state;
+  }
+  const newMenus = await getNewMenus(menus, level, index);
+  if (menus === newMenus) {
+    return state;
+  }
   return {
     ...state,
     menus: newMenus

package/package.json

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