@lvce-editor/title-bar-worker 1.2.0 → 1.4.0

package/README.md

@@ -1,3 +1,16 @@
 # Title Bar Worker
 
 Webworker for the title bar functionality in LVCE Editor.
+
+## Contributing
+
+```sh
+git clone git@github.com:lvce-editor/title-bar-worker.git &&
+cd text-search-worker &&
+npm ci &&
+npm test
+```
+
+## Gitpod
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/lvce-editor/title-bar-worker)

package/dist/titleBarWorkerMain.js

@@ -868,6 +868,7 @@ const Menu$1 = 'menu';
 const MenuBar = 'menubar';
 const MenuItem$1 = 'menuitem';
 const MenuItemCheckBox = 'menuitemcheckbox';
+const None$1 = 'none';
 const Separator$1 = 'separator';
 
 const Menu = 'Menu';
@@ -1184,9 +1185,12 @@ const parseKey = rawKey => {
   };
 };
 
+const Button = 1;
 const Div = 4;
 const Span = 8;
 const Text = 12;
+const I = 16;
+const Img = 17;
 
 const text = data => {
   return {
@@ -1515,7 +1519,7 @@ const renderTitleBarEntries = {
   apply(oldState, newState) {
     const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
     const dom = getTitleBarMenuBarVirtualDom(visibleEntries);
-    return ['Viewlet.setDom2', dom];
+    return ['Viewlet.setDom2', newState.uid, dom];
   }
 };
 const renderFocusedIndex = {
@@ -1523,7 +1527,7 @@ const renderFocusedIndex = {
     return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
   },
   apply(oldState, newState) {
-    return [/* method */SetFocusedIndex, /* oldFocusedIndex */oldState.focusedIndex, /* newfocusedIndex */newState.focusedIndex, /* oldIsMenuOpen */oldState.isMenuOpen, /* newIsMenuOpen */newState.isMenuOpen];
+    return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */oldState.focusedIndex, /* newfocusedIndex */newState.focusedIndex, /* oldIsMenuOpen */oldState.isMenuOpen, /* newIsMenuOpen */newState.isMenuOpen];
   }
 };
 const renderMenus = {
@@ -1555,7 +1559,7 @@ const renderMenus = {
     } else if (difference < 0) {
       changes.push(['closeMenus', newLength]);
     }
-    return [/* method */SetMenus, /* changes */changes, newState.uid];
+    return ['Viewlet.send', newState.uid, /* method */SetMenus, /* changes */changes, newState.uid];
   }
 };
 const render = [renderTitleBarEntries, renderFocusedIndex, renderMenus];
@@ -1637,98 +1641,6 @@ const getKeyBindings = () => {
   }];
 };
 
-const getFontString = (fontWeight, fontSize, fontFamily) => {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-};
-
-const state$1 = {
-  ctx: undefined
-};
-const getOrCreate = createCtx => {
-  if (state$1.ctx) {
-    return state$1.ctx;
-  }
-  state$1.ctx = createCtx();
-  return state$1.ctx;
-};
-
-const createCtx = () => {
-  const canvas = new OffscreenCanvas(0, 0);
-  const ctx = /** @type {OffscreenCanvasRenderingContext2D} */canvas.getContext('2d');
-  if (!ctx) {
-    throw new Error('Failed to get canvas context 2d');
-  }
-  return ctx;
-};
-const getContext = () => {
-  const ctx = getOrCreate(createCtx);
-  return ctx;
-};
-
-const px = value => {
-  return `${value}px`;
-};
-
-const getLetterSpacingString = letterSpacing => {
-  return px(letterSpacing);
-};
-const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
-  string(text);
-  number(fontWeight);
-  number(fontSize);
-  string(fontFamily);
-  boolean(isMonoSpaceFont);
-  number(charWidth);
-  if (typeof letterSpacing !== 'number') {
-    throw new TypeError('letterSpacing must be of type number');
-  }
-  const letterSpacingString = getLetterSpacingString(letterSpacing);
-  const fontString = getFontString(fontWeight, fontSize, fontFamily);
-  const ctx = getContext();
-  // @ts-ignore
-  ctx.letterSpacing = letterSpacingString;
-  ctx.font = fontString;
-  const metrics = ctx.measureText(text);
-  const {
-    width
-  } = metrics;
-  return width;
-};
-
-const measureTitleBarEntryWidth = (label, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const isMonospaceFont = false;
-  const charWidth = 0;
-  return measureTextWidth(label, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
-};
-
-const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const withWidths = [];
-  for (const entry of entries) {
-    const textWidth = measureTitleBarEntryWidth(entry.label, fontWeight, fontSize, fontFamily, letterSpacing);
-    const width = textWidth + labelPadding * 2;
-    withWidths.push({
-      ...entry,
-      width
-    });
-  }
-  return withWidths;
-};
-
-const loadContent = async (state, titleBarEntries) => {
-  const {
-    labelFontFamily,
-    labelFontSize,
-    labelFontWeight,
-    labelLetterSpacing,
-    labelPadding
-  } = state;
-  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
-  return {
-    ...state,
-    titleBarEntries: withWidths
-  };
-};
-
 /**
  * @enum {string}
  */
@@ -1801,7 +1713,7 @@ const menuEntrySeparator = {
 };
 
 const id$9 = Edit;
-const getMenuEntries$c = () => {
+const getMenuEntries$d = () => {
   return [{
     id: 'undo',
     label: undo(),
@@ -1842,7 +1754,7 @@ const getMenuEntries$c = () => {
 
 const MenuEntriesEdit = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$c,
+  getMenuEntries: getMenuEntries$d,
   id: id$9
 };
 
@@ -1885,7 +1797,7 @@ const platform = 1;
 const Web = 1;
 
 const id$8 = File;
-const getMenuEntries$b = () => {
+const getMenuEntries$c = () => {
   const entries = [{
     id: 'newFile',
     label: newFile(),
@@ -1927,18 +1839,18 @@ const getMenuEntries$b = () => {
 
 const MenuEntriesFile = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$b,
+  getMenuEntries: getMenuEntries$c,
   id: id$8
 };
 
 const id$7 = Go;
-const getMenuEntries$a = () => {
+const getMenuEntries$b = () => {
   return [];
 };
 
 const MenuEntriesGo = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$a,
+  getMenuEntries: getMenuEntries$b,
   id: id$7
 };
 
@@ -1956,7 +1868,7 @@ const isAutoUpdateSupported = () => {
 };
 
 const id$6 = Help;
-const getMenuEntries$9 = async () => {
+const getMenuEntries$a = async () => {
   const autoUpdateSupported = isAutoUpdateSupported();
   const entries = [];
   if (autoUpdateSupported) {
@@ -1981,22 +1893,26 @@ const getMenuEntries$9 = async () => {
 
 const MenuEntriesHelp = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$9,
+  getMenuEntries: getMenuEntries$a,
   id: id$6
 };
 
-const state = {
+const state$1 = {
   rpc: undefined
 };
 const invoke = (method, ...params) => {
   const {
     rpc
-  } = state;
+  } = state$1;
   // @ts-ignore
   return rpc.invoke(method, ...params);
 };
 const setRpc = rpc => {
-  state.rpc = rpc;
+  state$1.rpc = rpc;
+};
+
+const getRecentlyOpened = () => {
+  return invoke(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
 };
 
 const getTitle = uri => {
@@ -2016,11 +1932,8 @@ const toMenuItem = folder => {
     args: [folder]
   };
 };
-const getRecentlyOpened = () => {
-  return invoke(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
-};
 const id$5 = OpenRecent;
-const getMenuEntries$8 = async () => {
+const getMenuEntries$9 = async () => {
   const allItems = await getRecentlyOpened();
   const itemsToShow = allItems.slice(0, MAX_MENU_RECENT_ENTRIES);
   const items = [];
@@ -2043,23 +1956,23 @@ const getMenuEntries$8 = async () => {
 
 const MenuEntriesOpenRecent = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$8,
+  getMenuEntries: getMenuEntries$9,
   id: id$5
 };
 
 const id$4 = Run;
-const getMenuEntries$7 = () => {
+const getMenuEntries$8 = () => {
   return [];
 };
 
 const MenuEntriesRun = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$7,
+  getMenuEntries: getMenuEntries$8,
   id: id$4
 };
 
 const id$3 = Selection;
-const getMenuEntries$6 = () => {
+const getMenuEntries$7 = () => {
   return [{
     id: 'selectAll',
     label: selectAll(),
@@ -2090,7 +2003,7 @@ const getMenuEntries$6 = () => {
 
 const MenuEntriesSelection = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$6,
+  getMenuEntries: getMenuEntries$7,
   id: id$3
 };
 
@@ -2105,7 +2018,7 @@ const newTerminal = () => {
 };
 
 const id$2 = Terminal;
-const getMenuEntries$5 = () => {
+const getMenuEntries$6 = () => {
   return [{
     id: 'newTerminal',
     label: newTerminal(),
@@ -2117,7 +2030,7 @@ const getMenuEntries$5 = () => {
 
 const MenuEntriesTerminal = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$5,
+  getMenuEntries: getMenuEntries$6,
   id: id$2
 };
 
@@ -2146,7 +2059,7 @@ const help = () => {
   return i18nString(Help$1);
 };
 
-const getMenuEntries$4 = () => {
+const getMenuEntries$5 = () => {
   return [{
     id: File,
     label: file(),
@@ -2185,7 +2098,7 @@ const getMenuEntries$4 = () => {
   }];
 };
 
-const getMenuEntries$3 = () => {
+const getMenuEntries$4 = () => {
   return [{
     id: File,
     label: file(),
@@ -2216,41 +2129,234 @@ const getMenuEntries$3 = () => {
 const getFn = () => {
   switch (platform) {
     case Web:
-      return getMenuEntries$3;
-    default:
       return getMenuEntries$4;
+    default:
+      return getMenuEntries$5;
   }
 };
 const id$1 = TitleBar;
-const getMenuEntries$2 = async () => {
+const getMenuEntries$3 = async () => {
   const fn = getFn();
   return fn();
 };
 
 const MenuEntriesTitleBar = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$2,
+  getMenuEntries: getMenuEntries$3,
   id: id$1
 };
 
 const id = View;
-const getMenuEntries$1 = () => {
+const getMenuEntries$2 = () => {
   return [];
 };
 
 const MenuEntriesView = {
   __proto__: null,
-  getMenuEntries: getMenuEntries$1,
+  getMenuEntries: getMenuEntries$2,
   id
 };
 
+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 menu = menus$1.find(item => item.id === id);
+  if (!menu) {
+    return [];
+  }
+  return menu.getMenuEntries();
+};
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: None$1,
+    childCount: 0
+  };
+};
+
+const createTitleBarButton = button => {
+  const {
+    id,
+    icon,
+    label,
+    onClick
+  } = button;
+  const dom = [{
+    type: Button,
+    className: `TitleBarButton TitleBarButton${id}`,
+    ariaLabel: label,
+    childCount: 1,
+    onClick
+  }, getIconVirtualDom(icon, I)];
+  return dom;
+};
+
+const getTitleBarButtonsVirtualDom = buttons => {
+  const dom = [{
+    type: Div,
+    className: 'Viewlet TitleBarButtons',
+    childCount: buttons.length
+  }, ...buttons.flatMap(createTitleBarButton)];
+  return dom;
+};
+
+const getTitleBarIconVirtualDom = iconSrc => {
+  return [{
+    type: Div,
+    className: 'Viewlet TitleBarIcon',
+    childCount: 1
+  }, {
+    type: Img,
+    className: 'TitleBarIconIcon',
+    src: iconSrc,
+    alt: '',
+    childCount: 0
+  }];
+};
+
+const getTitleVirtualDom = title => {
+  return [text(title)];
+};
+
+const handleClickClose = async state => {
+  await invoke('ElectronWindow.close');
+  return state;
+};
+
+const handleClickMinimize = async state => {
+  await invoke('ElectronWindow.minimize');
+  return state;
+};
+
+const handleClickToggleMaximize = async state => {
+  await (invoke('ElectronWindow.maximize'));
+  return state;
+};
+
+const handleClick$1 = (state, className) => {
+  if (className.includes('Minimize')) {
+    return handleClickMinimize(state);
+  }
+  if (className.includes('Maximize') || className.includes('Restore')) {
+    return handleClickToggleMaximize(state);
+  }
+  if (className.includes('Close')) {
+    return handleClickClose(state);
+  }
+  return state;
+};
+
+const getFontString = (fontWeight, fontSize, fontFamily) => {
+  return `${fontWeight} ${fontSize}px ${fontFamily}`;
+};
+
+const state = {
+  ctx: undefined
+};
+const getOrCreate = createCtx => {
+  if (state.ctx) {
+    return state.ctx;
+  }
+  state.ctx = createCtx();
+  return state.ctx;
+};
+
+const createCtx = () => {
+  const canvas = new OffscreenCanvas(0, 0);
+  const ctx = /** @type {OffscreenCanvasRenderingContext2D} */canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Failed to get canvas context 2d');
+  }
+  return ctx;
+};
+const getContext = () => {
+  const ctx = getOrCreate(createCtx);
+  return ctx;
+};
+
+const px = value => {
+  return `${value}px`;
+};
+
+const getLetterSpacingString = letterSpacing => {
+  return px(letterSpacing);
+};
+const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
+  string(text);
+  number(fontWeight);
+  number(fontSize);
+  string(fontFamily);
+  boolean(isMonoSpaceFont);
+  number(charWidth);
+  if (typeof letterSpacing !== 'number') {
+    throw new TypeError('letterSpacing must be of type number');
+  }
+  const letterSpacingString = getLetterSpacingString(letterSpacing);
+  const fontString = getFontString(fontWeight, fontSize, fontFamily);
+  const ctx = getContext();
+  // @ts-ignore
+  ctx.letterSpacing = letterSpacingString;
+  ctx.font = fontString;
+  const metrics = ctx.measureText(text);
+  const {
+    width
+  } = metrics;
+  return width;
+};
+
+const measureTitleBarEntryWidth = (label, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const isMonospaceFont = false;
+  const charWidth = 0;
+  return measureTextWidth(label, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
+};
+
+const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
+  const withWidths = [];
+  for (const entry of entries) {
+    const textWidth = measureTitleBarEntryWidth(entry.label, fontWeight, fontSize, fontFamily, letterSpacing);
+    const width = textWidth + labelPadding * 2;
+    withWidths.push({
+      ...entry,
+      width
+    });
+  }
+  return withWidths;
+};
+
+const loadContent = async (state, titleBarEntries) => {
+  const {
+    labelFontFamily,
+    labelFontSize,
+    labelFontWeight,
+    labelLetterSpacing,
+    labelPadding
+  } = state;
+  const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  return {
+    ...state,
+    titleBarEntries: withWidths
+  };
+};
+
 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 = menus[0];
+    const module = getModule(id);
     // @ts-ignore
     const inject = module.inject || [];
     // @ts-ignore
@@ -2260,6 +2366,19 @@ const getMenuEntries = async (id, ...args) => {
   }
 };
 
+const renderEventListeners = () => {
+  return [{
+    name: 'handleClickMinimize',
+    params: ['handleClickMinimize']
+  }, {
+    name: 'handleClickClose',
+    params: ['handleClickClose']
+  }, {
+    name: 'handleClickToggleMaximize',
+    params: ['handleClickToggleMaximize']
+  }];
+};
+
 const saveState = uid => {
   return {};
 };
@@ -2328,14 +2447,9 @@ const getTotalWidth = entries => {
 };
 
 // TODO lazyload menuEntries and use Command.execute (maybe)
-const MENU_WIDTH = 150;
 const CONTEXT_MENU_ITEM_HEIGHT = 26;
 const CONTEXT_MENU_SEPARATOR_HEIGHT = 11;
 const CONTEXT_MENU_PADDING = 8;
-const CONTEXT_MENU_WIDTH = 250;
-const getMenuWidth = () => {
-  return CONTEXT_MENU_WIDTH;
-};
 const getMenuHeight = items => {
   let height = CONTEXT_MENU_PADDING;
   for (const item of items) {
@@ -2351,6 +2465,13 @@ const getMenuHeight = items => {
   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
@@ -2751,17 +2872,16 @@ const handleKeySpaceMenuOpen = state => {
 const handleKeySpace = ifElse(handleKeySpaceMenuOpen, handleKeySpaceMenuClosed);
 
 const executeMenuItemCommand = async item => {
-  // TODO
-  throw new Error('not implemented');
+  await invoke(item.command, ...(item.args || []));
 };
 
 const selectIndexIgnore = async (state, item) => {
-  await executeMenuItemCommand();
+  await executeMenuItemCommand(item);
   return state;
 };
 
 const selectIndexNone = async (state, item) => {
-  await executeMenuItemCommand();
+  await executeMenuItemCommand(item);
   return {
     ...state,
     menus: [],
@@ -2770,7 +2890,7 @@ const selectIndexNone = async (state, item) => {
 };
 
 const selectIndexRestoreFocus = async (state, item) => {
-  await executeMenuItemCommand();
+  await executeMenuItemCommand(item);
   return {
     ...state,
     menus: [],
@@ -2816,13 +2936,13 @@ const handleMenuClick = (state, level, index) => {
   const item = menu.items[index];
   switch (item.flags) {
     case None:
-      return selectIndexNone(state);
+      return selectIndexNone(state, item);
     case SubMenu:
       return selectIndexSubMenu(state, menu, index);
     case RestoreFocus:
-      return selectIndexRestoreFocus(state);
+      return selectIndexRestoreFocus(state, item);
     case Ignore:
-      return selectIndexIgnore(state);
+      return selectIndexIgnore(state, item);
     default:
       return state;
   }
@@ -2948,6 +3068,13 @@ const wrapCommand = fn => {
 };
 
 const commandMap = {
+  'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
+  'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
+  'TitleBar.getMenuEntries': getMenuEntries$1,
+  'TitleBar.getMenuIds': getMenuIds,
+  'TitleBar.getTitleVirtualDom': getTitleVirtualDom,
+  'TitleBar.handleButtonsClick': handleClick$1,
+  'TitleBar.renderEventListeners': renderEventListeners,
   'TitleBarMenuBar.closeMenu': closeMenu,
   'TitleBarMenuBar.create': create,
   'TitleBarMenuBar.focus': wrapCommand(focus),
@@ -2969,7 +3096,6 @@ const commandMap = {
   'TitleBarMenuBar.handleKeyEnd': wrapCommand(handleKeyEnd),
   'TitleBarMenuBar.handleKeyEnter': wrapCommand(handleKeyEnter),
   'TitleBarMenuBar.handleKeyEscape': wrapCommand(handleKeyEscape),
-  'TitleBarMenuBar.saveState': saveState,
   'TitleBarMenuBar.handleKeyHome': wrapCommand(handleKeyHome),
   'TitleBarMenuBar.handleKeySpace': wrapCommand(handleKeySpace),
   'TitleBarMenuBar.handleMenuClick': wrapCommand(handleMenuClick),
@@ -2978,9 +3104,10 @@ const commandMap = {
   'TitleBarMenuBar.handleMouseOver': wrapCommand(handleMouseOver),
   'TitleBarMenuBar.loadContent': wrapCommand(loadContent),
   'TitleBarMenuBar.render': doRender,
+  'TitleBarMenuBar.saveState': saveState,
+  'TitleBarMenuBar.terminate': terminate,
   'TitleBarMenuBar.toggleIndex': wrapCommand(toggleIndex),
-  'TitleBarMenuBar.toggleMenu': wrapCommand(toggleMenu),
-  'TitleBarMenuBar.terminate': terminate
+  'TitleBarMenuBar.toggleMenu': wrapCommand(toggleMenu)
 };
 
 const listen = async () => {

package/package.json

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