@lvce-editor/title-bar-worker 1.7.0 → 1.9.0

package/dist/titleBarWorkerMain.js

@@ -901,7 +901,7 @@ const DiffMenus = {
   isEqual
 };
 
-const modules = [DiffFocusedIndex, DiffEntries, DiffMenus];
+const modules = [DiffEntries, DiffFocusedIndex, DiffMenus];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -920,6 +920,17 @@ const MenuItemCheckBox = 'menuitemcheckbox';
 const None$1 = 'none';
 const Separator$1 = 'separator';
 
+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 Menu = 'Menu';
 const MenuItem = 'MenuItem';
 const MenuItemFocused = 'MenuItemFocused';
@@ -931,6 +942,165 @@ const TitleBarEntryActive = 'TitleBarEntryActive';
 const TitleBarTopLevelEntry = 'TitleBarTopLevelEntry';
 const TitleBarTopLevelEntryLabel = 'TitleBarTopLevelEntryLabel';
 
+const Button = 1;
+const Div = 4;
+const Text = 12;
+const I = 16;
+const Img = 17;
+const Span = 8;
+
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getItemVirtualDom = item => {
+  // @ts-ignore
+  const {
+    keyboardShortCut,
+    label,
+    isOpen,
+    isFocused
+  } = item;
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: TitleBarTopLevelEntry,
+    ariaHasPopup: true,
+    ariaExpanded: isOpen,
+    role: MenuItem$1,
+    childCount: 1,
+    ariaKeyShortcuts: keyboardShortCut
+  });
+  if (isOpen) {
+    // @ts-ignore
+    dom[0].ariaOwns = 'Menu-0';
+  }
+  if (isFocused) {
+    dom[0].className += ' ' + TitleBarEntryActive;
+    // @ts-ignore
+    dom[0].id = 'TitleBarEntryActive';
+    dom.push({
+      type: Div,
+      className: TitleBarTopLevelEntryLabel,
+      childCount: 1
+    });
+  }
+  dom.push(text(label));
+  return dom;
+};
+const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
+  const dom = visibleItems.flatMap(getItemVirtualDom);
+  return dom;
+};
+
+const activeId = 'TitleBarEntryActive';
+const getTitleBarMenuBarVirtualDom = (visibleItems, focusedIndex) => {
+  return [{
+    type: Div,
+    className: 'Viewlet TitleBarMenuBar',
+    role: MenuBar,
+    tabIndex: 0,
+    childCount: visibleItems.length,
+    onMouseDown: HandleClick,
+    onFocusOut: HandleFocusOut,
+    onFocusIn: HandleFocusIn,
+    onPointerOver: HandlePointerOver,
+    onPointerOut: HandlePointerOut,
+    ariaActivedescendant: focusedIndex === -1 ? '' : activeId
+  }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
+};
+
+const Ellipsis = 'Ellipsis';
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const About = 'About';
+const CheckForUpdates = 'Check For Updates';
+const ClearRecentlyOpened = 'Clear Recently Opened';
+const Edit$1 = 'Edit';
+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 = () => {
+  return i18nString(MoreDot);
+};
+const clearRecentlyOpened = () => {
+  return i18nString(ClearRecentlyOpened);
+};
+
+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,
+      isOpen,
+      isFocused
+    });
+  }
+  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 renderEntries = (oldState, newState) => {
+  const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
+  const dom = getTitleBarMenuBarVirtualDom(visibleEntries, newState.focusedIndex);
+  return ['Viewlet.setDom2', newState.uid, dom];
+};
+
+const SetFocusedIndex = 'setFocusedIndex';
+const SetMenus = 'setMenus';
+
+const renderFocusedIndex = (oldState, newState) => {
+  return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */oldState.focusedIndex, /* newfocusedIndex */newState.focusedIndex, /* oldIsMenuOpen */oldState.isMenuOpen, /* newIsMenuOpen */newState.isMenuOpen];
+};
+
 const getKeyBindingString = (key, altKey, ctrlKey, shiftKey, metaKey) => {
   let string = '';
   if (ctrlKey) {
@@ -1234,21 +1404,6 @@ const parseKey = rawKey => {
   };
 };
 
-const Button = 1;
-const Div = 4;
-const Text = 12;
-const I = 16;
-const Img = 17;
-const Span = 8;
-
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
-};
-
 const separator = {
   type: Div,
   className: MenuItemSeparator,
@@ -1402,72 +1557,6 @@ const getMenuVirtualDom = menuItems => {
   return dom;
 };
 
-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
-  const {
-    keyboardShortCut,
-    label,
-    isOpen,
-    isFocused
-  } = item;
-  const dom = [];
-  dom.push({
-    type: Div,
-    className: TitleBarTopLevelEntry,
-    ariaHasPopup: true,
-    ariaExpanded: isOpen,
-    role: MenuItem$1,
-    childCount: 1,
-    ariaKeyShortcuts: keyboardShortCut
-  });
-  if (isOpen) {
-    // @ts-ignore
-    dom[0].ariaOwns = 'Menu-0';
-  }
-  if (isFocused) {
-    dom[0].className += ' ' + TitleBarEntryActive;
-    // @ts-ignore
-    dom[0].id = 'TitleBarEntryActive';
-    dom.push({
-      type: Div,
-      className: TitleBarTopLevelEntryLabel,
-      childCount: 1
-    });
-  }
-  dom.push(text(label));
-  return dom;
-};
-const getTitleBarMenuBarItemsVirtualDom = visibleItems => {
-  const dom = visibleItems.flatMap(getItemVirtualDom);
-  return dom;
-};
-
-const getTitleBarMenuBarVirtualDom = visibleItems => {
-  return [{
-    type: Div,
-    className: 'Viewlet TitleBarMenuBar',
-    role: MenuBar,
-    tabIndex: 0,
-    childCount: visibleItems.length,
-    onMouseDown: HandleClick,
-    onFocusOut: HandleFocusOut,
-    onFocusIn: HandleFocusIn,
-    onPointerOver: HandlePointerOver,
-    onPointerOut: HandlePointerOut
-  }, ...getTitleBarMenuBarItemsVirtualDom(visibleItems)];
-};
-
 const getVisible = (items, focusedIndex, expanded, level) => {
   const visibleItems = [];
   const {
@@ -1491,134 +1580,55 @@ const getVisible = (items, focusedIndex, expanded, level) => {
   return visibleItems;
 };
 
-const Ellipsis = 'Ellipsis';
-
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
-const About = 'About';
-const CheckForUpdates = 'Check For Updates';
-const ClearRecentlyOpened = 'Clear Recently Opened';
-const Edit$1 = 'Edit';
-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 = () => {
-  return i18nString(MoreDot);
-};
-const clearRecentlyOpened = () => {
-  return i18nString(ClearRecentlyOpened);
-};
-
-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 renderMEnus = (oldState, newState) => {
+  const oldMenus = oldState.menus;
+  const newMenus = newState.menus;
+  const oldLength = oldMenus.length;
+  const newLength = newMenus.length;
+  const commonLength = Math.min(oldLength, newLength);
+  const changes = [];
+  for (let i = 0; i < commonLength; i++) {
+    const oldMenu = oldMenus[i];
+    const newMenu = newMenus[i];
+    if (oldMenu !== newMenu) {
+      const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
+      const dom = getMenuVirtualDom(visible).slice(1);
+      changes.push([/* method */'updateMenu', newMenu, /* newLength */newLength, dom]);
     }
-    const isOpen = i === focusedIndex && isMenuOpen;
-    const isFocused = i === focusedIndex;
-    visible.push({
-      ...entry,
-      isOpen,
-      isFocused
-    });
   }
-  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
-    });
+  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]);
+  } else if (difference < 0) {
+    changes.push(['closeMenus', newLength]);
+  }
+  return ['Viewlet.send', newState.uid, /* method */SetMenus, /* changes */changes, newState.uid];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderEntries:
+      return renderEntries;
+    case RenderFocusedIndex:
+      return renderFocusedIndex;
+    case RenderMenus:
+      return renderMEnus;
+    default:
+      throw new Error('unknown renderer');
   }
-  return visible;
 };
 
-const SetFocusedIndex = 'setFocusedIndex';
-const SetMenus = 'setMenus';
-
-const renderTitleBarEntries = {
-  isEqual(oldState, newState) {
-    return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
-  },
-  apply(oldState, newState) {
-    const visibleEntries = getVisibleTitleBarEntries(newState.titleBarEntries, newState.width, newState.focusedIndex, newState.isMenuOpen);
-    const dom = getTitleBarMenuBarVirtualDom(visibleEntries);
-    return ['Viewlet.setDom2', newState.uid, dom];
-  }
-};
-const renderFocusedIndex = {
-  isEqual(oldState, newState) {
-    return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
-  },
-  apply(oldState, newState) {
-    return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */oldState.focusedIndex, /* newfocusedIndex */newState.focusedIndex, /* oldIsMenuOpen */oldState.isMenuOpen, /* newIsMenuOpen */newState.isMenuOpen];
-  }
-};
-const renderMenus = {
-  isEqual(oldState, newState) {
-    return oldState.menus === newState.menus;
-  },
-  apply(oldState, newState) {
-    const oldMenus = oldState.menus;
-    const newMenus = newState.menus;
-    const oldLength = oldMenus.length;
-    const newLength = newMenus.length;
-    const commonLength = Math.min(oldLength, newLength);
-    const changes = [];
-    for (let i = 0; i < commonLength; i++) {
-      const oldMenu = oldMenus[i];
-      const newMenu = newMenus[i];
-      if (oldMenu !== newMenu) {
-        const visible = getVisible(newMenu.items, newMenu.focusedIndex, newMenu.expanded, newMenu.level);
-        const dom = getMenuVirtualDom(visible).slice(1);
-        changes.push([/* method */'updateMenu', newMenu, /* newLength */newLength, dom]);
-      }
-    }
-    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]);
-    } else if (difference < 0) {
-      changes.push(['closeMenus', newLength]);
-    }
-    return ['Viewlet.send', newState.uid, /* method */SetMenus, /* changes */changes, newState.uid];
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    commands.push(fn(oldState, newState));
   }
+  return commands;
 };
-const render = [renderTitleBarEntries, renderFocusedIndex, renderMenus];
 
 const create$1 = () => {
   const states = Object.create(null);
@@ -1645,12 +1655,8 @@ const doRender = async uid => {
     oldState,
     newState
   } = get(uid);
-  const commands = [];
-  for (const item of render) {
-    if (!item.isEqual(oldState, newState)) {
-      commands.push(item.apply(oldState, newState));
-    }
-  }
+  const diffResult = diff(oldState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
 
@@ -2689,7 +2695,7 @@ const renderEventListeners = () => {
     params: ['handleClickToggleMaximize']
   }, {
     name: HandleFocusIn,
-    params: ['handlefocus']
+    params: ['handleFocus']
   }, {
     name: HandleMenuClick,
     params: ['handleMenuClick', 'event.clientX', 'event.clientY']
@@ -2698,7 +2704,7 @@ const renderEventListeners = () => {
     params: ['handleMenuMouseOver', 'event.clientX', 'event.clientY']
   }, {
     name: HandleClick,
-    params: ['handleClick', 'event.button', 'event.clientX', 'event.clientY']
+    params: ['handleClickAt', 'event.button', 'event.clientX', 'event.clientY']
   }, {
     name: HandlePointerOut,
     params: ['handlePointerOut', 'event.clientX', 'event.clientY']
@@ -2712,7 +2718,9 @@ const renderEventListeners = () => {
 };
 
 const saveState = uid => {
-  return {};
+  return {
+    x: 1
+  };
 };
 
 const terminate = () => {
@@ -2828,6 +2836,14 @@ const handleClick = async (state, button, index) => {
   return toggleIndex(state, index);
 };
 
+const handleClickAt = async (state, button, x, y) => {
+  const index = getTitleBarIndexFromPosition(state.titleBarEntries, x - state.x);
+  if (index === -1) {
+    return state;
+  }
+  return handleClick(state, button, index);
+};
+
 // TODO remove this file and merge with whenExpressions
 const TitleBarMenuBar = FocusTitleBarMenuBar;
 
@@ -3242,6 +3258,7 @@ const commandMap = {
   '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),

package/package.json

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