@lvce-editor/title-bar-worker 2.9.0 → 2.10.0

package/dist/titleBarWorkerMain.js

@@ -995,47 +995,224 @@ const terminate = () => {
   globalThis.close();
 };
 
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const DEFAULT_UID = 1;
+const createDefaultState = (uid = DEFAULT_UID) => ({
+  assetDir: '',
+  buttons: [],
+  controlsOverlayEnabled: false,
+  focusedIndex: -1,
+  height: 30,
+  iconWidth: 30,
+  isMenuOpen: false,
+  labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
+  labelFontSize: 13,
+  labelFontWeight: 400,
+  labelLetterSpacing: 0,
+  labelPadding: 8,
+  menus: [],
+  platform: Electron,
+  title: '',
+  titleBarButtons: [],
+  titleBarButtonsEnabled: true,
+  titleBarButtonsWidth: 90,
+  titleBarEntries: [],
+  titleBarHeight: 30,
+  titleBarIconEnabled: true,
+  titleBarIconWidth: 30,
+  titleBarMenuBarEnabled: true,
+  titleBarStyleCustom: true,
+  titleBarTitleEnabled: true,
+  uid,
+  width: 800,
+  x: 0,
+  y: 0
+});
+
+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 Close = 'Close';
+const Edit$1 = 'Edit';
+const File$2 = 'File';
+const Go$1 = 'Go';
+const Help$1 = 'Help';
+const Maximize = 'Maximize';
+const Minimize = 'Minimize';
+const MoreDot = 'More ...';
+const NewTerminal = 'New Terminal';
+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 file = () => {
+  return i18nString(File$2);
+};
+const edit = () => {
+  return i18nString(Edit$1);
+};
+const selection = () => {
+  return i18nString(Selection$1);
+};
+const view = () => {
+  return i18nString(View$1);
+};
+const go = () => {
+  return i18nString(Go$1);
+};
+const run = () => {
+  return i18nString(Run$1);
+};
+const terminal = () => {
+  return i18nString(Terminal$1);
+};
+const help = () => {
+  return i18nString(Help$1);
+};
+const minimize$1 = () => {
+  return i18nString(Minimize);
+};
+const maximize$1 = () => {
+  return i18nString(Maximize);
+};
+const close$1 = () => {
+  return i18nString(Close);
+};
+
+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 getTitleBarButtonsRemote = () => {
+  return [];
+};
+
+const getTitleBarButtonsWeb = () => {
+  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 {
+  get: get$1,
+  set: set$3,
+  getCommandIds,
+  registerCommands,
+  wrapCommand
+} = create$2();
+
+const create3 = (id, uri, x, y, width, height, platform, controlsOverlayEnabled, titleBarStyleCustom) => {
+  const titleBarButtons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const state = {
+    ...createDefaultState(),
+    uid: id,
+    titleBarEntries: [],
+    focusedIndex: -1,
+    isMenuOpen: false,
+    menus: [],
+    labelFontWeight: 400,
+    labelFontSize: 13,
+    labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
+    labelPadding: 8,
+    labelLetterSpacing: 0,
+    titleBarHeight: height,
+    x,
+    y,
+    width,
+    height,
+    iconWidth: 30,
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
+    titleBarButtons
+  };
+  set$3(id, state, state);
+  return state;
+};
+
 const RenderEntries = 1;
 const RenderFocusedIndex = 2;
 const RenderMenus = 3;
 
-const diffType$2 = RenderEntries;
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const diffType$1 = RenderFocusedIndex;
-const isEqual$1 = (oldState, newState) => {
+const diffType$2 = RenderFocusedIndex;
+const isEqual$2 = (oldState, newState) => {
   return oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen;
 };
 
-const diffType = RenderMenus;
-const isEqual = (oldState, newState) => {
+const diffType$1 = RenderMenus;
+const isEqual$1 = (oldState, newState) => {
   return oldState.menus === newState.menus;
 };
 
-const modules = [isEqual$2, isEqual$1, isEqual];
-const numbers = [diffType$2, diffType$1, diffType];
+const modules$1 = [isEqual$3, isEqual$2, isEqual$1];
+const numbers$1 = [RenderEntries, RenderFocusedIndex, RenderMenus];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
+  for (let i = 0; i < modules$1.length; i++) {
+    const fn = modules$1[i];
     if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
+      diffResult.push(numbers$1[i]);
     }
   }
   return diffResult;
 };
 
-const {
-  get: get$1,
-  set: set$3,
-  getCommandIds,
-  registerCommands,
-  wrapCommand
-} = create$2();
-
 const diff2 = uid => {
   const {
     oldState,
@@ -1044,6 +1221,29 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const diffType = RenderEntries;
+const isEqual = (oldState, newState) => {
+  return oldState.titleBarEntries === newState.titleBarEntries && oldState.width === newState.width && oldState.focusedIndex === newState.focusedIndex && oldState.isMenuOpen === newState.isMenuOpen && oldState.assetDir === newState.assetDir && oldState.titleBarIconEnabled === newState.titleBarIconEnabled && oldState.title === newState.title && oldState.titleBarTitleEnabled === newState.titleBarTitleEnabled && oldState.platform === newState.platform && oldState.controlsOverlayEnabled === newState.controlsOverlayEnabled && oldState.titleBarStyleCustom === newState.titleBarStyleCustom && oldState.titleBarButtonsEnabled === newState.titleBarButtonsEnabled && oldState.titleBarButtons === newState.titleBarButtons;
+};
+
+const modules = [isEqual, isEqual$2, isEqual$1];
+const numbers = [diffType, diffType$2, diffType$1];
+
+const diff3 = uid => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
 const Menu$1 = 'menu';
 const MenuBar = 'menubar';
 const MenuItem$1 = 'menuitem';
@@ -1131,18 +1331,6 @@ const getKeyBindings$1 = () => {
   }];
 };
 
-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);
-};
-
 /**
  * @enum {string}
  */
@@ -1196,16 +1384,16 @@ const moveLineDown = () => {
   return i18nString(UiStrings$1.MoveLineDown);
 };
 
-const Edit$1 = 2;
-const File$2 = 5;
-const Go$1 = 6;
-const Help$1 = 7;
+const Edit = 2;
+const File$1 = 5;
+const Go = 6;
+const Help = 7;
 const OpenRecent = 9;
-const Run$1 = 10;
-const Selection$1 = 11;
-const Terminal$1 = 14;
+const Run = 10;
+const Selection = 11;
+const Terminal = 14;
 const TitleBar = 15;
-const View$1 = 16;
+const View = 16;
 
 const Separator = 1;
 const None = 0;
@@ -1223,7 +1411,7 @@ const menuEntrySeparator = {
   command: ''
 };
 
-const id$9 = Edit$1;
+const id$9 = Edit;
 const getMenuEntries$d = () => {
   return [{
     id: 'undo',
@@ -1307,11 +1495,7 @@ const exit = () => {
   return i18nString(UiStrings.Exit);
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-const id$8 = File$2;
+const id$8 = File$1;
 const getMenuEntries$c = platform => {
   const entries = [{
     id: 'newFile',
@@ -1366,7 +1550,7 @@ const MenuEntriesFile = {
   id: id$8
 };
 
-const id$7 = Go$1;
+const id$7 = Go;
 const getMenuEntries$b = () => {
   return [];
 };
@@ -1377,25 +1561,6 @@ const MenuEntriesGo = {
   id: id$7
 };
 
-const About = 'About';
-const CheckForUpdates = 'Check For Updates';
-const ClearRecentlyOpened = 'Clear Recently Opened';
-const Close = 'Close';
-const Edit = 'Edit';
-const File$1 = 'File';
-const Go = 'Go';
-const Help = 'Help';
-const Maximize = 'Maximize';
-const Minimize = 'Minimize';
-const MoreDot = 'More ...';
-const NewTerminal = 'New Terminal';
-const OpenProcessExplorer = 'Open Process Explorer';
-const Run = 'Run';
-const Selection = 'Selection';
-const Terminal = 'Terminal';
-const ToggleDeveloperTools = 'Toggle Developer Tools';
-const View = 'View';
-
 const toggleDeveloperTools = () => {
   return i18nString(ToggleDeveloperTools);
 };
@@ -1416,7 +1581,7 @@ const isAutoUpdateSupported = platform => {
   return false;
 };
 
-const id$6 = Help$1;
+const id$6 = Help;
 const getMenuEntries$a = async platform => {
   const autoUpdateSupported = isAutoUpdateSupported(platform);
   const entries = [];
@@ -1917,7 +2082,7 @@ const MenuEntriesOpenRecent = {
   id: id$5
 };
 
-const id$4 = Run$1;
+const id$4 = Run;
 const getMenuEntries$8 = () => {
   return [];
 };
@@ -1928,7 +2093,7 @@ const MenuEntriesRun = {
   id: id$4
 };
 
-const id$3 = Selection$1;
+const id$3 = Selection;
 const getMenuEntries$7 = () => {
   return [{
     id: 'selectAll',
@@ -1964,7 +2129,7 @@ const MenuEntriesSelection = {
   id: id$3
 };
 
-const id$2 = Terminal$1;
+const id$2 = Terminal;
 const getMenuEntries$6 = () => {
   return [{
     id: 'newTerminal',
@@ -1981,73 +2146,39 @@ const MenuEntriesTerminal = {
   id: id$2
 };
 
-const file = () => {
-  return i18nString(File$1);
-};
-const edit = () => {
-  return i18nString(Edit);
-};
-const selection = () => {
-  return i18nString(Selection);
-};
-const view = () => {
-  return i18nString(View);
-};
-const go = () => {
-  return i18nString(Go);
-};
-const run = () => {
-  return i18nString(Run);
-};
-const terminal = () => {
-  return i18nString(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 [{
-    id: File$2,
+    id: File$1,
     label: file(),
     flags: SubMenu
   }, {
-    id: Edit$1,
+    id: Edit,
     label: edit(),
     flags: SubMenu
   }, {
-    id: Selection$1,
+    id: Selection,
     label: selection(),
     flags: SubMenu
   }, {
-    id: View$1,
+    id: View,
     label: view(),
     flags: SubMenu
   }, {
-    id: Go$1,
+    id: Go,
     label: go(),
     flags: SubMenu
   }, {
-    id: Run$1,
+    id: Run,
     label: run(),
     keyboardShortCut: 'Alt+r',
     flags: SubMenu
   }, {
-    id: Terminal$1,
+    id: Terminal,
     label: terminal(),
     keyboardShortCut: 'Alt+t',
     flags: SubMenu
   }, {
-    id: Help$1,
+    id: Help,
     label: help(),
     keyboardShortCut: 'Alt+h',
     flags: SubMenu
@@ -2056,27 +2187,27 @@ const getMenuEntries$5 = () => {
 
 const getMenuEntries$4 = () => {
   return [{
-    id: File$2,
+    id: File$1,
     label: file(),
     flags: None
   }, {
-    id: Edit$1,
+    id: Edit,
     label: edit(),
     flags: None
   }, {
-    id: Selection$1,
+    id: Selection,
     label: selection(),
     flags: None
   }, {
-    id: View$1,
+    id: View,
     label: view(),
     flags: None
   }, {
-    id: Go$1,
+    id: Go,
     label: go(),
     flags: None
   }, {
-    id: Help$1,
+    id: Help,
     label: help(),
     flags: None
   }];
@@ -2102,7 +2233,7 @@ const MenuEntriesTitleBar = {
   id: id$1
 };
 
-const id = View$1;
+const id = View;
 const getMenuEntries$2 = () => {
   return [];
 };
@@ -2126,53 +2257,6 @@ const getMenuEntries$1 = (id, platform) => {
   return menu.getMenuEntries(platform);
 };
 
-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 getTitleBarButtonsRemote = () => {
-  return [];
-};
-
-const getTitleBarButtonsWeb = () => {
-  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 = 'Menu';
 const MenuItem = 'MenuItem';
@@ -2634,8 +2718,11 @@ const measureTextWidths = (texts, fontWeight, fontSize, fontFamily, letterSpacin
   return widths;
 };
 
+const getLabel = entry => {
+  return entry.label;
+};
 const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, letterSpacing) => {
-  const labels = entries.map(entry => entry.label);
+  const labels = entries.map(getLabel);
   const widths = measureTextWidths(labels, fontWeight, fontSize, fontFamily, letterSpacing);
   const withWidths = [];
   for (let i = 0; i < entries.length; i++) {
@@ -2652,6 +2739,9 @@ const addWidths = (entries, labelPadding, fontWeight, fontSize, fontFamily, lett
 
 const loadContent = async (state, titleBarEntries) => {
   const {
+    platform,
+    controlsOverlayEnabled,
+    titleBarStyleCustom,
     labelFontFamily,
     labelFontSize,
     labelFontWeight,
@@ -2659,9 +2749,13 @@ const loadContent = async (state, titleBarEntries) => {
     labelPadding
   } = state;
   const withWidths = addWidths(titleBarEntries, labelPadding, labelFontWeight, labelFontSize, labelFontFamily, labelLetterSpacing);
+  const buttons = getTitleBarButtons(platform, controlsOverlayEnabled, titleBarStyleCustom);
+  const title = 'test';
   return {
     ...state,
-    titleBarEntries: withWidths
+    titleBarEntries: withWidths,
+    buttons,
+    title
   };
 };
 
@@ -3263,6 +3357,85 @@ const render2 = async (uid, diffResult) => {
   return commands;
 };
 
+const getIcon = assetDir => {
+  return `${assetDir}/icons/icon.svg`;
+};
+
+const getTitleBarVirtualDom = state => {
+  const {
+    titleBarEntries,
+    width,
+    focusedIndex,
+    isMenuOpen,
+    assetDir,
+    title,
+    titleBarButtons
+  } = state;
+  const dom = [];
+
+  // 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;
+};
+
+const renderTitleBar = (oldState, newState) => {
+  const dom = getTitleBarVirtualDom(newState);
+  return ['Viewlet.setDom2', newState.uid, dom];
+};
+
+const getRenderer3 = diffType => {
+  switch (diffType) {
+    case RenderEntries:
+      return renderTitleBar;
+    case RenderFocusedIndex:
+      return renderFocusedIndex;
+    case RenderMenus:
+      return renderMenus;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const render3 = async (uid, diffResult) => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  set$3(uid, newState, newState);
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer3(item);
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
+  }
+  return commands;
+};
+
 const renderEventListeners = () => {
   return [{
     name: HandleClickMinimize,
@@ -3303,34 +3476,6 @@ const saveState = uid => {
   };
 };
 
-const DEFAULT_UID = 1;
-const createDefaultState = (uid = DEFAULT_UID) => ({
-  assetDir: '',
-  focusedIndex: -1,
-  height: 30,
-  iconWidth: 30,
-  isMenuOpen: false,
-  itleBarIconEnabled: true,
-  labelFontFamily: 'system-ui, Ubuntu, Droid Sans, sans-serif',
-  labelFontSize: 13,
-  labelFontWeight: 400,
-  labelLetterSpacing: 0,
-  labelPadding: 8,
-  menus: [],
-  titleBarButtonsEnabled: true,
-  titleBarButtonsWidth: 90,
-  titleBarEntries: [],
-  titleBarHeight: 30,
-  titleBarIconWidth: 30,
-  titleBarMenuBarEnabled: true,
-  titleBarTitleEnabled: true,
-  uid,
-  width: 800,
-  x: 0,
-  y: 0,
-  title: ''
-});
-
 const create = (id, uri, x, y, width, height) => {
   const state = {
     ...createDefaultState(),
@@ -3835,13 +3980,19 @@ const toggleMenu = async state => {
 };
 
 const commandMap = {
+  'TitleBar.create3': create3,
+  'TitleBar.diff3': diff3,
   'TitleBar.getButtonsVirtualDom': getTitleBarButtonsVirtualDom,
   'TitleBar.getIconVirtualDom': getTitleBarIconVirtualDom,
   'TitleBar.getMenuEntries': getMenuEntries$1,
   'TitleBar.getMenuIds': getMenuIds,
   'TitleBar.getTitleVirtualDom': getTitleVirtualDom,
   'TitleBar.handleButtonsClick': handleClick$1,
+  'TitleBar.handleClickClose': wrapCommand(handleClickClose),
+  'TitleBar.handleClickMinimize': wrapCommand(handleClickMinimize),
+  'TitleBar.handleClickToggleMaximize': wrapCommand(handleClickToggleMaximize),
   'TitleBar.handleContextMenu': handleContextMenu,
+  'TitleBar.render3': render3,
   'TitleBar.renderEventListeners': renderEventListeners,
   'TitleBarMenuBar.closeMenu': closeMenu,
   'TitleBarMenuBar.create': create,

package/package.json

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