@lvce-editor/title-bar-worker 3.21.0 → 4.1.0

package/dist/titleBarWorkerMain.js

@@ -1599,6 +1599,7 @@ const createDefaultState = (uid = DEFAULT_UID) => ({
   titleBarStyleCustom: true,
   titleBarTitleEnabled: true,
   titleTemplate: '${folderName}',
+  titleWidth: 0,
   uid,
   width: 800,
   workspaceUri: '',
@@ -2729,10 +2730,6 @@ const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
-const px = value => {
-  return `${value}px`;
-};
-
 const text = data => {
   return {
     childCount: 0,
@@ -2850,6 +2847,75 @@ const getMenuOffset = (x, clientX, iconWidth) => {
   return clientX - x - iconWidth;
 };
 
+const Ellipsis = 'Ellipsis';
+
+const MoreEntryWidth = 38;
+const OverflowMenuId = 'title-bar-overflow';
+const getTotalWidth$1 = entries => {
+  let total = 0;
+  for (const entry of entries) {
+    total += entry.width;
+  }
+  return total;
+};
+const getVisibleTitleBarEntries = (entries, width, focusedIndex, isMenuOpen) => {
+  array(entries);
+  number(width);
+  let total = 0;
+  const visible = [];
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const nextTotal = total + entry.width;
+    if (nextTotal >= width) {
+      break;
+    }
+    total = nextTotal;
+    const visibleIndex = visible.length;
+    const isOpen = visibleIndex === focusedIndex && isMenuOpen;
+    const isFocused = visibleIndex === focusedIndex;
+    visible.push({
+      ...entry,
+      isFocused,
+      isOpen
+    });
+  }
+  const hasOverflow = visible.length < entries.length;
+  if (hasOverflow) {
+    while (visible.length > 0 && getTotalWidth$1(visible) + MoreEntryWidth > width) {
+      visible.pop();
+    }
+    const hiddenEntries = entries.slice(visible.length);
+    const overflowIndex = visible.length;
+    visible.push({
+      ariaLabel: moreDot(),
+      hiddenEntries,
+      icon: Ellipsis,
+      id: OverflowMenuId,
+      isFocused: overflowIndex === focusedIndex,
+      isOpen: overflowIndex === focusedIndex && isMenuOpen,
+      label: '...',
+      width: MoreEntryWidth
+    });
+  }
+  return visible;
+};
+
+const hasOverflowEntry = entries => {
+  return entries.some(entry => entry?.id === OverflowMenuId);
+};
+const getNavigableTitleBarEntries = state => {
+  const {
+    focusedIndex,
+    isMenuOpen,
+    titleBarEntries,
+    width
+  } = state;
+  if (hasOverflowEntry(titleBarEntries)) {
+    return titleBarEntries;
+  }
+  return getVisibleTitleBarEntries(titleBarEntries, width, focusedIndex, isMenuOpen);
+};
+
 const getTitleBarIndexFromPosition = (titleBarEntries, x, y) => {
   let currentX = 0;
   for (let i = 0; i < titleBarEntries.length; i++) {
@@ -2954,23 +3020,34 @@ const getIndexToFocusNext = menu => {
 
 // TODO more tests
 
+const getOverflowMenuItems = hiddenEntries => {
+  return hiddenEntries.map(entry => ({
+    command: '',
+    flags: SubMenu$1,
+    id: entry.id,
+    label: entry.label
+  }));
+};
 const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   const {
     iconWidth,
     platform,
-    titleBarEntries,
     titleBarHeight,
     x
   } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   // TODO race conditions
   // TODO send renderer process
   // 1. open menu, items to show
   // 2. focus menu
   const titleBarEntry = titleBarEntries[index];
+  if (!titleBarEntry) {
+    return state;
+  }
   const {
     id
   } = titleBarEntry;
-  const items = await getMenuEntries2(state, {
+  const items = id === OverflowMenuId ? getOverflowMenuItems(titleBarEntry.hiddenEntries || []) : await getMenuEntries2(state, {
     menuId: id,
     platform
   });
@@ -2987,7 +3064,7 @@ const openMenuAtIndex = async (state, index, shouldBeFocused) => {
   const menu = {
     focusedIndex: menuFocusedIndex,
     height,
-    id,
+    id: id === OverflowMenuId ? undefined : id,
     items,
     level: 0,
     width,
@@ -3048,9 +3125,9 @@ const handleMouseOut = ifElse(handleMouseOutMenuOpen, handleMouseOutMenuClosed);
 const handlePointerOut = (state, clientX, clientY) => {
   const {
     iconWidth,
-    titleBarEntries,
     x
   } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const menuX = getMenuOffset(x, clientX, iconWidth);
   const index = getTitleBarIndexFromPosition(titleBarEntries, menuX);
   if (index === -1) {
@@ -3073,9 +3150,7 @@ const handleMouseOverMenuOpen = async (state, index) => {
 const handleMouseOver = ifElse(handleMouseOverMenuOpen, handleMouseOverMenuClosed);
 
 const handlePointerOver = (state, name) => {
-  const {
-    titleBarEntries
-  } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const index = titleBarEntries.findIndex(item => item.label === name);
   if (index === -1) {
     return state;
@@ -3124,45 +3199,6 @@ const getTitle = (workspaceUri, titleTemplate, appName) => {
   return parseTitleTemplate(titleTemplate, folderName, appName);
 };
 
-// TODO in the future, it could also be a multi-root workspace
-const handleWorkspaceChange = async (state, uri) => {
-  const title = getTitle(uri, state.titleTemplate, state.appName);
-  return {
-    ...state,
-    title,
-    workspaceUri: uri
-  };
-};
-
-const hideCommandCenter = async state => {
-  return {
-    ...state,
-    commandCenterEnabled: false
-  };
-};
-
-const hideMenuBar = async state => {
-  return {
-    ...state,
-    titleBarMenuBarEnabled: false
-  };
-};
-
-const createTextMeasureContext = (letterSpacing, font) => {
-  const canvas = new OffscreenCanvas(0, 0);
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    throw new Error('Failed to get canvas context 2d');
-  }
-  ctx.letterSpacing = letterSpacing;
-  ctx.font = font;
-  return ctx;
-};
-
-const getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-};
-
 const launchTextMeasurementWorker = async () => {
   const rpc = await create$4({
     commandMap: {},
@@ -3189,37 +3225,51 @@ const measureTextWidths2 = async (texts, fontWeight, fontSize, fontFamily, lette
   return result;
 };
 
-const measureTextWidthsOld = async (texts, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  if (typeof letterSpacing !== 'number') {
-    throw new TypeError('letterSpacing must be of type number');
-  }
-  const letterSpacingString = px(letterSpacing);
-  const fontString = getFontString(fontWeight, fontSize, fontFamily);
-  const ctx = createTextMeasureContext(letterSpacingString, fontString);
-  const widths = [];
-  for (const text of texts) {
-    const metrics = ctx.measureText(text);
-    const {
-      width
-    } = metrics;
-    widths.push(width);
-  }
-  return widths;
+const measureTextWidths = async (texts, fontWeight, fontSize, fontFamily, letterSpacing) => measureTextWidths2(texts, fontWeight, fontSize, fontFamily, letterSpacing);
+
+const measureTitleWidth = async (title, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const [titleWidth = 0] = await measureTextWidths([title], fontWeight, fontSize, fontFamily, letterSpacing);
+  return titleWidth;
 };
-const measureTextWidths = async (texts, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  try {
-    return measureTextWidths2(texts, fontWeight, fontSize, fontFamily, letterSpacing);
-  } catch {
-    return measureTextWidthsOld(texts, fontWeight, fontSize, fontFamily, letterSpacing);
-  }
+
+// TODO in the future, it could also be a multi-root workspace
+const handleWorkspaceChange = async (state, uri) => {
+  const {
+    appName,
+    labelFontFamily,
+    labelFontSize,
+    labelFontWeight,
+    labelLetterSpacing,
+    titleTemplate
+  } = state;
+  const title = getTitle(uri, titleTemplate, appName);
+  const titleWidth = await measureTitleWidth(title, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  return {
+    ...state,
+    title,
+    titleWidth,
+    workspaceUri: uri
+  };
+};
+
+const hideCommandCenter = async state => {
+  return {
+    ...state,
+    commandCenterEnabled: false
+  };
+};
+
+const hideMenuBar = async state => {
+  return {
+    ...state,
+    titleBarMenuBarEnabled: false
+  };
 };
 
 const getLabel = entry => {
   return entry.label;
 };
-const addWidths = async (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const labels = entries.map(getLabel);
-  const widths = await measureTextWidths(labels, fontWeight, fontSize, fontFamily, letterSpacing);
+const getWithWidths = (entries, widths, labelPadding) => {
   const withWidths = [];
   for (let i = 0; i < entries.length; i++) {
     const entry = entries[i];
@@ -3232,6 +3282,16 @@ const addWidths = async (entries, labelPadding, fontWeight, fontSize, fontFamily
   }
   return withWidths;
 };
+const addWidths = async (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const labels = entries.map(getLabel);
+  const widths = await measureTextWidths(labels, fontWeight, fontSize, fontFamily, letterSpacing);
+  const withWidths = getWithWidths(entries, widths, labelPadding);
+  return withWidths;
+};
+
+const getTitleBarMenuBarWidth = (windowWidth, menuBarX, iconWidth, titleWidth) => {
+  return windowWidth / 2 - titleWidth / 2 - menuBarX - iconWidth;
+};
 
 const getWorkspaceUri = () => {
   return invoke('Workspace.getUri');
@@ -3253,7 +3313,9 @@ const loadContent2 = async state => {
   const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
   const workspaceUri = await getWorkspaceUri();
   const title = getTitle(workspaceUri, state.titleTemplate, state.appName);
+  const titleWidth = await measureTitleWidth(title, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
   const iconWidth = 30;
+  const width = getTitleBarMenuBarWidth(state.width, state.x, iconWidth, titleWidth);
 
   // TODO load preferences here
 
@@ -3266,7 +3328,9 @@ const loadContent2 = async state => {
     iconWidth,
     title,
     titleBarButtons: buttons,
-    titleBarEntries: withWidths
+    titleBarEntries: withWidths,
+    titleWidth,
+    width
   };
 };
 
@@ -3606,6 +3670,7 @@ const getTitleBarIconVirtualDom = (titleBarIconEnabled, iconSrc) => {
 const getItemVirtualDom = item => {
   // @ts-ignore
   const {
+    ariaLabel,
     isFocused,
     isOpen,
     keyboardShortCut,
@@ -3619,6 +3684,7 @@ const getItemVirtualDom = item => {
     ariaExpanded: isOpen,
     ariaHasPopup: true,
     ariaKeyShortcuts: keyboardShortCut,
+    ariaLabel: ariaLabel || label,
     ariaOwns: isOpen ? 'Menu-0' : undefined,
     childCount: 1,
     className,
@@ -3670,46 +3736,6 @@ const getTitleVirtualDom = (titleBarTitleEnabled, title) => {
   return [parentNode, text(title)];
 };
 
-const Ellipsis = 'Ellipsis';
-
-const getVisibleTitleBarEntries = (entries, width, focusedIndex, isMenuOpen) => {
-  array(entries);
-  number(width);
-  let total = 0;
-  const visible = [];
-  for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i];
-    total += entry.width;
-    if (total >= width) {
-      break;
-    }
-    const isOpen = i === focusedIndex && isMenuOpen;
-    const isFocused = i === focusedIndex;
-    visible.push({
-      ...entry,
-      isFocused,
-      isOpen
-    });
-  }
-  const hasOverflow = visible.length < entries.length;
-  if (hasOverflow) {
-    const padding = 8;
-    const moreIconWidth = 22;
-    const totalPadding = padding * 2;
-    const hasStillOverflow = total + moreIconWidth + totalPadding > width;
-    if (hasStillOverflow) {
-      visible.pop();
-    }
-    visible.push({
-      ariaLabel: moreDot(),
-      icon: Ellipsis,
-      label: '',
-      width: moreIconWidth + totalPadding
-    });
-  }
-  return visible;
-};
-
 const getTitleBarVirtualDom = state => {
   const {
     assetDir,
@@ -3823,17 +3849,14 @@ const renderEventListeners = () => {
   }];
 };
 
-const getTitleBarMenuBarWidth = (width, menuBarX, titleBarButtonsWidth) => {
-  const remainingWidth = width - menuBarX - titleBarButtonsWidth;
-  return remainingWidth;
-};
 const resize = async (state, dimensions) => {
   const {
-    titleBarButtonsWidth
+    iconWidth,
+    titleWidth
   } = state;
   const menuBarX = dimensions.x;
   const menuBarY = dimensions.y;
-  const menuBarWidth = getTitleBarMenuBarWidth(dimensions.width, menuBarX, titleBarButtonsWidth);
+  const menuBarWidth = getTitleBarMenuBarWidth(dimensions.width, menuBarX, iconWidth, titleWidth);
   const menuBarHeight = dimensions.height;
   return {
     ...state,
@@ -3861,12 +3884,34 @@ const setPlatform = (state, platform) => {
   };
 };
 
-const setTitleTemplate = (state, titleTemplate) => {
-  const title = getTitle(state.workspaceUri, titleTemplate, state.appName);
+const setTitleTemplate = async (state, titleTemplate) => {
+  const {
+    appName,
+    labelFontFamily,
+    labelFontSize,
+    labelFontWeight,
+    labelLetterSpacing,
+    workspaceUri
+  } = state;
+  const title = getTitle(workspaceUri, titleTemplate, appName);
+  const titleWidth = await measureTitleWidth(title, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
   return {
     ...state,
     title,
-    titleTemplate
+    titleTemplate,
+    titleWidth
+  };
+};
+
+const setWidth = (state, width) => {
+  const {
+    iconWidth,
+    titleWidth,
+    x
+  } = state;
+  return {
+    ...state,
+    width: getTitleBarMenuBarWidth(width, x, iconWidth, titleWidth)
   };
 };
 
@@ -3947,27 +3992,25 @@ const focus = state => {
 };
 
 const focusLast = state => {
-  const {
-    titleBarEntries
-  } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const indexToFocus = last(titleBarEntries);
   return focusIndex(state, indexToFocus);
 };
 
 const focusNext = state => {
   const {
-    focusedIndex,
-    titleBarEntries
+    focusedIndex
   } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const indexToFocus = next(titleBarEntries, focusedIndex);
   return focusIndex(state, indexToFocus);
 };
 
 const focusPrevious = state => {
   const {
-    focusedIndex,
-    titleBarEntries
+    focusedIndex
   } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const indexToFocus = previous(titleBarEntries, focusedIndex);
   return focusIndex(state, indexToFocus);
 };
@@ -3998,9 +4041,9 @@ const handleClick = async (state, button, index) => {
 const handleClickAt = async (state, button, eventX, eventY) => {
   const {
     iconWidth,
-    titleBarEntries,
     x
   } = state;
+  const titleBarEntries = getNavigableTitleBarEntries(state);
   const menuOffset = getMenuOffset(x, eventX, iconWidth);
   const index = getTitleBarIndexFromPosition(titleBarEntries, menuOffset);
   if (index === -1) {
@@ -4512,6 +4555,7 @@ const commandMap = {
   'TitleBar.saveState': wrapGetter(saveState),
   'TitleBar.setPlatform': wrapCommand(setPlatform),
   'TitleBar.setTitleTemplate': wrapCommand(setTitleTemplate),
+  'TitleBar.setWidth': wrapCommand(setWidth),
   'TitleBar.showCommandCenter': wrapCommand(showCommandCenter),
   'TitleBar.showMenuBar': wrapCommand(showMenuBar),
   'TitleBar.terminate': terminate,

package/package.json

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