@lvce-editor/title-bar-worker 2.0.0 → 2.1.0

package/dist/titleBarWorkerMain.js

@@ -876,41 +876,25 @@ const isEqual$2 = (oldState, newState) => {
   return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const DiffEntries = {
-  __proto__: null,
-  diffType: diffType$2,
-  isEqual: isEqual$2
-};
-
 const diffType$1 = RenderFocusedIndex;
 const isEqual$1 = (oldState, newState) => {
   return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const DiffFocusedIndex = {
-  __proto__: null,
-  diffType: diffType$1,
-  isEqual: isEqual$1
-};
-
 const diffType = RenderMenus;
 const isEqual = (oldState, newState) => {
   return oldState.menus === newState.menus;
 };
 
-const DiffMenus = {
-  __proto__: null,
-  diffType,
-  isEqual
-};
-
-const modules = [DiffEntries, DiffFocusedIndex, DiffMenus];
+const modules = [isEqual$2, isEqual$1, isEqual];
+const numbers = [diffType$2, diffType$1, diffType];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
-  for (const module of modules) {
-    if (!module.isEqual(oldState, newState)) {
-      diffResult.push(module.diffType);
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
     }
   }
   return diffResult;
@@ -944,7 +928,7 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-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 commandsIds = ['closeMenu', 'handleClickAt', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusPrevious', 'handleClick', 'handleFocus', 'handleFocusOut', 'handleKeyArrowDown', 'handleKeyArrowLeft', 'handleKeyArrowRight', 'handleKeyArrowUp', 'handleKeyEnd', 'handleKeyEnter', 'handleKeyEscape', 'handleKeyHome', 'handleKeySpace', 'handleMenuClick', 'handleMenuMouseOver', 'handleMouseOut', 'handleMouseOver', 'handlePointerOver', 'handlePointerOut', 'toggleIndex', 'toggleMenu'];
 
 const getCommandIds = () => {
   return commandsIds;
@@ -1151,12 +1135,12 @@ const getMenuEntries$d = () => {
     id: 'undo',
     label: undo(),
     flags: Disabled,
-    command: /* TODO */-1
+    command: /* TODO */'-1'
   }, {
     id: 'redo',
     label: redo(),
     flags: Disabled,
-    command: /* TODO */-1
+    command: /* TODO */'-1'
   }, menuEntrySeparator, {
     id: 'cut',
     label: cut(),
@@ -1231,6 +1215,7 @@ const exit = () => {
 
 const Web = 1;
 const Electron = 2;
+const Remote = 3;
 
 const id$8 = File$1;
 const getMenuEntries$c = platform => {
@@ -1238,7 +1223,7 @@ const getMenuEntries$c = platform => {
     id: 'newFile',
     label: newFile(),
     flags: None$1,
-    command: -1
+    command: '-1'
   }, {
     id: 'newWindow',
     label: newWindow(),
@@ -1301,10 +1286,13 @@ const MenuEntriesGo = {
 const About = 'About';
 const CheckForUpdates = 'Check For Updates';
 const ClearRecentlyOpened = 'Clear Recently Opened';
+const Close = 'Close';
 const Edit = 'Edit';
 const File = 'File';
 const Go = 'Go';
 const Help = 'Help';
+const Maximize = 'Maximize';
+const Minimize = 'Minimize';
 const MoreDot = 'More ...';
 const OpenProcessExplorer = 'Open Process Explorer';
 const Run = 'Run';
@@ -1544,6 +1532,15 @@ const terminal = () => {
 const help = () => {
   return i18nString(Help);
 };
+const minimize$1 = () => {
+  return i18nString(Minimize);
+};
+const maximize$1 = () => {
+  return i18nString(Maximize);
+};
+const close$1 = () => {
+  return i18nString(Close);
+};
 
 const getMenuEntries$5 = () => {
   return [{
@@ -1656,6 +1653,50 @@ const getMenuEntries$1 = (id, platform) => {
   return menu.getMenuEntries(platform);
 };
 
+const getTitleBarButtonsWeb = () => {
+  return [];
+};
+const getTitleBarButtonsRemote = () => {
+  return [];
+};
+const getTitleBarButtonsElectron = (controlsOverlayEnabled, titleBarStyleCustom) => {
+  if (controlsOverlayEnabled) {
+    return [];
+  }
+  if (titleBarStyleCustom) {
+    // TODO don't render title bar buttons on windows when electron window controls overlay is enabled
+    return [{
+      label: minimize$1(),
+      icon: 'Minimize',
+      id: 'Minimize',
+      onClick: 'handleClickMinimize'
+    }, {
+      label: maximize$1(),
+      icon: 'Maximize',
+      id: 'ToggleMaximize',
+      onClick: 'handleClickToggleMaximize'
+    }, {
+      label: close$1(),
+      icon: 'ChromeClose',
+      id: 'Close',
+      onClick: 'handleClickClose'
+    }];
+  }
+  return [];
+};
+const getTitleBarButtons = (platform, controlsOverlayEnabled, titleBarStyleCustom) => {
+  switch (platform) {
+    case Electron:
+      return getTitleBarButtonsElectron(controlsOverlayEnabled, titleBarStyleCustom);
+    case Web:
+      return getTitleBarButtonsWeb();
+    case Remote:
+      return getTitleBarButtonsRemote();
+    default:
+      return [];
+  }
+};
+
 const MaskIconCheck = 'MaskIconCheck';
 const Menu$1 = 'Menu';
 const MenuItem$1 = 'MenuItem';
@@ -1685,7 +1726,6 @@ const Separator = 'separator';
 
 const Button = 1;
 const Div = 4;
-const Text = 12;
 const I = 16;
 const Img = 17;
 const Span = 8;
@@ -1719,6 +1759,14 @@ const createTitleBarButton = button => {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
 
 const getTitleBarButtonsVirtualDom = buttons => {
   const dom = [{
@@ -1754,14 +1802,6 @@ const HandlePointerOver = 'handlePointerOver';
 const HandleMenuClick = 'handleMenuClick';
 const HandleMenuMouseOver = 'handleMenuMouseOver';
 
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
-};
-
 const getItemVirtualDom = item => {
   // @ts-ignore
   const {
@@ -1823,18 +1863,29 @@ const getTitleVirtualDom = title => {
   return [text(title)];
 };
 
-const handleClickClose = async state => {
+const maximize = async () => {
+  await invoke('ElectronWindow.unmaximize');
+};
+const minimize = async () => {
+  await invoke('ElectronWindow.minimize');
+};
+const close = async () => {
   await invoke('ElectronWindow.close');
+};
+
+const handleClickClose = async state => {
+  await close();
   return state;
 };
 
 const handleClickMinimize = async state => {
-  await invoke('ElectronWindow.minimize');
+  await minimize();
   return state;
 };
 
 const handleClickToggleMaximize = async state => {
-  await (invoke('ElectronWindow.maximize'));
+  const fn = maximize;
+  await fn();
   return state;
 };
 
@@ -2101,6 +2152,15 @@ const getFontString = (fontWeight, fontSize, fontFamily) => {
   return `${fontWeight} ${fontSize}px ${fontFamily}`;
 };
 
+const createTextMeasureContext = () => {
+  const canvas = new OffscreenCanvas(0, 0);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Failed to get canvas context 2d');
+  }
+  return ctx;
+};
+
 const state = {
   ctx: undefined
 };
@@ -2112,16 +2172,8 @@ const getOrCreate = 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);
+  const ctx = getOrCreate(createTextMeasureContext);
   return ctx;
 };
 
@@ -2145,7 +2197,6 @@ const measureTextWidth = (text, fontWeight, fontSize, fontFamily, letterSpacing,
   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);
@@ -2242,6 +2293,25 @@ const renderFocusedIndex = (oldState, newState) => {
   return ['Viewlet.focusSelector', '.ViewletTitleBarMenuBar'];
 };
 
+const checkboxChecked = {
+  type: Div,
+  className: mergeClassNames(MenuItem$1, MenuItemCheckMark),
+  role: MenuItemCheckBox,
+  ariaChecked: true,
+  tabIndex: -1,
+  childCount: 2
+};
+const checkMark = {
+  type: Div,
+  className: mergeClassNames(MenuItemCheckmarkIcon, MaskIconCheck)
+};
+const getMenuItemCheckedDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [checkboxChecked, checkMark, text(label)];
+};
+
 const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
   let string = '';
   if (ctrlKey) {
@@ -2471,70 +2541,6 @@ const parseKey = rawKey => {
   };
 };
 
-const separator = {
-  type: Div,
-  className: MenuItemSeparator,
-  role: Separator,
-  childCount: 1
-};
-const separatorLine = {
-  type: Div,
-  className: MenuItemSeparatorLine,
-  childCount: 0
-};
-const checkboxUnchecked = {
-  type: Div,
-  className: MenuItem$1,
-  role: MenuItemCheckBox,
-  ariaChecked: false,
-  tabIndex: -1,
-  childCount: 1
-};
-const checkboxChecked = {
-  type: Div,
-  className: mergeClassNames(MenuItem$1, MenuItemCheckMark),
-  role: MenuItemCheckBox,
-  ariaChecked: true,
-  tabIndex: -1,
-  childCount: 2
-};
-const disabled = {
-  type: Div,
-  className: MenuItem$1,
-  role: MenuItem,
-  tabIndex: -1,
-  disabled: true,
-  childCount: 1
-};
-const arrowRight = {
-  type: Div,
-  className: MenuItemSubMenuArrowRight,
-  childCount: 0
-};
-const getMenuItemSeparatorDom = menuItem => {
-  return [separator, separatorLine];
-};
-const getMenuItemCheckedDom = menuItem => {
-  const {
-    label
-  } = menuItem;
-  return [checkboxChecked, {
-    type: Div,
-    className: mergeClassNames(MenuItemCheckmarkIcon, MaskIconCheck)
-  }, text(label)];
-};
-const getMenuItemUncheckedDom = menuItem => {
-  const {
-    label
-  } = menuItem;
-  return [checkboxUnchecked, text(label)];
-};
-const getMenuItemDisabledDom = menuItem => {
-  const {
-    label
-  } = menuItem;
-  return [disabled, text(label)];
-};
 const getMenuItemDefaultDom = menuItem => {
   const {
     label,
@@ -2565,6 +2571,46 @@ const getMenuItemDefaultDom = menuItem => {
   }
   return dom;
 };
+
+const disabled = {
+  type: Div,
+  className: MenuItem$1,
+  role: MenuItem,
+  tabIndex: -1,
+  disabled: true,
+  childCount: 1
+};
+const getMenuItemDisabledDom = menuItem => {
+  const {
+    label
+  } = menuItem;
+  return [disabled, text(label)];
+};
+
+const getMenuItemsNoopDom = () => {
+  return [];
+};
+
+const separator = {
+  type: Div,
+  className: MenuItemSeparator,
+  role: Separator,
+  childCount: 1
+};
+const separatorLine = {
+  type: Div,
+  className: MenuItemSeparatorLine,
+  childCount: 0
+};
+const getMenuItemSeparatorDom = menuItem => {
+  return [separator, separatorLine];
+};
+
+const arrowRight = {
+  type: Div,
+  className: MenuItemSubMenuArrowRight,
+  childCount: 0
+};
 const getMenuItemSubMenuDom = menuItem => {
   const {
     label,
@@ -2588,48 +2634,65 @@ const getMenuItemSubMenuDom = menuItem => {
     childCount: 2
   }, text(label), arrowRight];
 };
-const getMenuItemVirtualDom = menuItem => {
+
+const checkboxUnchecked = {
+  type: Div,
+  className: MenuItem$1,
+  role: MenuItemCheckBox,
+  ariaChecked: false,
+  tabIndex: -1,
+  childCount: 1
+};
+const getMenuItemUncheckedDom = menuItem => {
   const {
-    flags
+    label
   } = menuItem;
+  return [checkboxUnchecked, text(label)];
+};
+
+const getMenuItemRenderer = flags => {
   switch (flags) {
     case None$1:
     case RestoreFocus:
     case Ignore:
-      return getMenuItemDefaultDom(menuItem);
+      return getMenuItemDefaultDom;
     case Separator$1:
-      return getMenuItemSeparatorDom();
+      return getMenuItemSeparatorDom;
     case Checked:
-      return getMenuItemCheckedDom(menuItem);
+      return getMenuItemCheckedDom;
     case Unchecked:
-      return getMenuItemUncheckedDom(menuItem);
+      return getMenuItemUncheckedDom;
     case Disabled:
-      return getMenuItemDisabledDom(menuItem);
+      return getMenuItemDisabledDom;
     case SubMenu:
-      return getMenuItemSubMenuDom(menuItem);
+      return getMenuItemSubMenuDom;
     default:
-      return [];
+      return getMenuItemsNoopDom;
   }
 };
+
+const getMenuItemVirtualDom = menuItem => {
+  const {
+    flags
+  } = menuItem;
+  const fn = getMenuItemRenderer(flags);
+  return fn(menuItem);
+};
+
 const getMenuVirtualDom = menuItems => {
-  const dom = [];
-  dom.push({
+  const dom = [{
     type: Div,
     className: Menu$1,
     role: Menu,
     tabIndex: -1,
     childCount: menuItems.length
-  });
-  dom.push(...menuItems.flatMap(getMenuItemVirtualDom));
+  }, ...menuItems.flatMap(getMenuItemVirtualDom)];
   return dom;
 };
 
 const getVisible = (items, focusedIndex, expanded, level) => {
   const visibleItems = [];
-  const {
-    length
-  } = items;
-  for (let i = 0; i < length; i++) {
+  for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const {
       flags,
@@ -2649,7 +2712,7 @@ const getVisible = (items, focusedIndex, expanded, level) => {
 
 const SetMenus = 'setMenus';
 
-const renderMEnus = (oldState, newState) => {
+const renderMenus = (oldState, newState) => {
   const oldMenus = oldState.menus;
   const newMenus = newState.menus;
   const oldLength = oldMenus.length;
@@ -2684,7 +2747,7 @@ const getRenderer = diffType => {
     case RenderFocusedIndex:
       return renderFocusedIndex;
     case RenderMenus:
-      return renderMEnus;
+      return renderMenus;
     default:
       throw new Error('unknown renderer');
   }
@@ -2694,7 +2757,10 @@ const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
   for (const item of diffResult) {
     const fn = getRenderer(item);
-    commands.push(fn(oldState, newState));
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
   }
   return commands;
 };
@@ -2704,6 +2770,7 @@ const render2 = async (uid, diffResult) => {
     oldState,
     newState
   } = get(uid);
+  set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -2869,11 +2936,19 @@ const handleClickAt = async (state, button, x, y) => {
   return handleClick(state, button, index);
 };
 
+const setFocus = async focusKey => {
+  await invoke('Focus.setFocus', focusKey);
+};
+
 // TODO remove this file and merge with whenExpressions
 const TitleBarMenuBar = FocusTitleBarMenuBar;
 
 const handleFocus = async state => {
-  await invoke('Focus.setFocus', TitleBarMenuBar);
+  await setFocus(TitleBarMenuBar);
+  return state;
+};
+
+const handleFocusOut = async state => {
   return state;
 };
 
@@ -3261,18 +3336,17 @@ const wrapCommand = fn => {
 
 const commandMap = {
   'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
-  'TitleBar.handleContextMenu': handleContextMenu,
   'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
   'TitleBar.getMenuEntries': getMenuEntries$1,
   'TitleBar.getMenuIds': getMenuIds,
   'TitleBar.getTitleVirtualDom': getTitleVirtualDom,
   'TitleBar.handleButtonsClick': handleClick$1,
+  'TitleBar.handleContextMenu': handleContextMenu,
   'TitleBar.renderEventListeners': renderEventListeners,
   'TitleBarMenuBar.closeMenu': closeMenu,
   'TitleBarMenuBar.create': create,
-  'TitleBarMenuBar.focus': wrapCommand(focus),
   'TitleBarMenuBar.diff2': diff2,
-  'TitleBarMenuBar.render2': render2,
+  'TitleBarMenuBar.focus': wrapCommand(focus),
   'TitleBarMenuBar.focusFirst': wrapCommand(focusFirst),
   'TitleBarMenuBar.focusIndex': wrapCommand(focusLast),
   'TitleBarMenuBar.focusLast': wrapCommand(focusIndex),
@@ -3283,16 +3357,16 @@ const commandMap = {
   'TitleBarMenuBar.getMenus': getMenus,
   'TitleBarMenuBar.getVirtualDom': getTitleBarMenuBarVirtualDom,
   'TitleBarMenuBar.handleClick': wrapCommand(handleClick),
+  'TitleBarMenuBar.getTitleBarButtons': getTitleBarButtons,
+  'TitleBarMenuBar.handleClickAt': wrapCommand(handleClickAt),
   'TitleBarMenuBar.handleFocus': wrapCommand(handleFocus),
+  'TitleBarMenuBar.handleFocusOut': wrapCommand(handleFocusOut),
   'TitleBarMenuBar.handleKeyArrowDown': wrapCommand(handleKeyArrowDown),
   'TitleBarMenuBar.handleKeyArrowLeft': wrapCommand(handleKeyArrowLeft),
   'TitleBarMenuBar.handleKeyArrowRight': wrapCommand(handleKeyArrowRight),
   'TitleBarMenuBar.handleKeyArrowUp': wrapCommand(handleKeyArrowUp),
-  'TitleBarMenuBar.handleClickAt': wrapCommand(handleClickAt),
-  '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),
@@ -3300,7 +3374,10 @@ const commandMap = {
   'TitleBarMenuBar.handleMenuMouseOver': wrapCommand(handleMenuMouseOver),
   'TitleBarMenuBar.handleMouseOut': wrapCommand(handleMouseOut),
   'TitleBarMenuBar.handleMouseOver': wrapCommand(handleMouseOver),
+  'TitleBarMenuBar.handlePointerOut': wrapCommand(handlePointerOut),
+  'TitleBarMenuBar.handlePointerOver': wrapCommand(handlePointerOver),
   'TitleBarMenuBar.loadContent': wrapCommand(loadContent),
+  'TitleBarMenuBar.render2': render2,
   'TitleBarMenuBar.saveState': saveState,
   'TitleBarMenuBar.terminate': terminate,
   'TitleBarMenuBar.toggleIndex': wrapCommand(toggleIndex),

package/package.json

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