@lvce-editor/static-server 0.58.0 → 0.58.2

package/static/{9cec02d → 38a6439}/packages/settings-view/dist/settingsViewWorkerMain.js

@@ -477,7 +477,8 @@ const splitLines = lines => {
   return lines.split(NewLine);
 };
 const getCurrentStack = () => {
-  const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
 const getNewLineIndex = (string, startIndex = undefined) => {
@@ -748,6 +749,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
 const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
@@ -758,7 +765,7 @@ const getCommand = key => {
 const execute = (command, ...args) => {
   const fn = getCommand(command);
   if (!fn) {
-    throw new Error(`command not found ${command}`);
+    throw new CommandNotFoundError(command);
   }
   return fn(...args);
 };
@@ -914,6 +921,33 @@ const terminate = () => {
   globalThis.close();
 };
 
+const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scrollBarMinHeight) => {
+  const totalHeight = totalItemCount * itemHeight;
+  const scrollable = Math.max(0, totalHeight - height);
+  const thumbTrack = Math.max(0, height);
+  const thumbHeight = totalHeight > 0 ? Math.max(scrollBarMinHeight, Math.floor(height / Math.max(totalHeight, 1) * height)) : height;
+  const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
+  const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
+  return {
+    thumbHeight,
+    thumbTop
+  };
+};
+
+const computeVisibleItems = (items, height, scrollOffset, itemHeight) => {
+  const safeItemHeight = itemHeight <= 0 ? 1 : itemHeight;
+  const totalItems = items.length;
+  const minLineY = Math.max(0, Math.floor(scrollOffset / safeItemHeight));
+  const itemsPerViewport = Math.max(1, Math.ceil(height / safeItemHeight));
+  const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
+  const visibleItems = items.slice(minLineY, maxLineY);
+  return {
+    visibleItems,
+    minLineY,
+    maxLineY
+  };
+};
+
 const filterBySearch = (items, searchValue) => {
   if (!searchValue || !searchValue.trim()) {
     return items;
@@ -933,6 +967,7 @@ const filterByTab = (items, tabs) => {
 const isItemModified = (item, preferences) => {
   return item.id in preferences;
 };
+
 const validateSettings = (items, modifiedSettings, preferences) => {
   return items.map(item => {
     const value = preferences[item.id] ?? item.value;
@@ -971,17 +1006,37 @@ const clear$1 = state => {
     items,
     tabs,
     modifiedSettings,
-    preferences
+    preferences,
+    height,
+    itemHeight,
+    scrollBarMinHeight
   } = state;
   const newSearchValue = '';
   const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
+  const nextScrollOffset = 0;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    deltaY: 0,
+    scrollOffset: nextScrollOffset,
     focus: FocusSettingsInput,
     focusSource: Script,
     inputSource: Script,
-    searchValue: newSearchValue
+    searchValue: newSearchValue,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -1013,6 +1068,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     y,
     width,
     height,
+    deltaY: 0,
+    itemHeight: 100,
     tabs: [],
     items: [],
     searchValue: '',
@@ -1020,11 +1077,18 @@ const create$1 = (id, uri, x, y, width, height) => {
     preferences: {},
     inputSource: 0,
     scrollOffset: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    visibleItems: [],
     filteredItemsCount: 0,
     history: [],
     historyIndex: -1,
     modifiedSettings: {},
-    focusSource: 0
+    focusSource: 0,
+    scrollBarMinHeight: 0,
+    scrollBarThumbHeight: 0,
+    scrollBarThumbTop: 0,
+    highlightsEnabled: false
   };
   set$1(id, state, state);
 };
@@ -1034,15 +1098,15 @@ const isEqual$4 = (oldState, newState) => {
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.filteredItems === newState.filteredItems;
+  return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return newState.inputSource === User || oldState.scrollOffset === newState.scrollOffset;
+  return true;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.filteredItems === newState.filteredItems;
+  return oldState.filteredItems === newState.filteredItems && oldState.visibleItems === newState.visibleItems;
 };
 
 const RenderItems = 1;
@@ -1117,7 +1181,7 @@ const P = 50;
 const Ul = 60;
 const Select$1 = 63;
 const Option = 64;
-const Label = 66;
+const Label$1 = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
@@ -1126,7 +1190,7 @@ const VirtualDomElements = {
   H1,
   H3,
   Input,
-  Label,
+  Label: Label$1,
   Option,
   P,
   Select: Select$1,
@@ -1186,14 +1250,34 @@ const handleClickTab = (state, name) => {
     tabs,
     searchValue,
     modifiedSettings,
-    preferences
+    preferences,
+    height,
+    itemHeight,
+    scrollOffset
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
   const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
   return {
     ...state,
     tabs: updatedTabs,
-    filteredItems
+    filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -1264,9 +1348,25 @@ const handleInput = (state, value, inputSource = User) => {
     tabs,
     history,
     modifiedSettings,
-    preferences
+    preferences,
+    height,
+    itemHeight
   } = state;
   const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
+  // Reset scroll when filter value changes so the user sees results from the top
+  const nextScrollOffset = 0;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   const {
     newHistory,
     newHistoryIndex
@@ -1275,9 +1375,16 @@ const handleInput = (state, value, inputSource = User) => {
     ...state,
     searchValue: value,
     filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    deltaY: 0,
+    scrollOffset: nextScrollOffset,
     history: newHistory,
     historyIndex: newHistoryIndex,
-    inputSource
+    inputSource,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -1375,6 +1482,64 @@ const handleSettingSelect = (state, name, value, source = User) => {
   return handleSettingUpdate(state, name, value, source);
 };
 
+const clamp = (value, min, max) => {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  if (max < min) {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
+const handleWheel = (state, eventDeltaY, inputSource = User) => {
+  const {
+    deltaY: deltaY,
+    filteredItems,
+    height,
+    itemHeight = 1
+  } = state;
+  const itemCount = filteredItems.length;
+  const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
+  const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
+  const total = deltaY + limitedEventDelta;
+  // Prevent scrolling beyond the available content height. If content is smaller
+  // than the viewport, the maximum scroll is zero.
+  const totalContentHeight = itemCount * itemHeight;
+  const maxScrollable = Math.max(0, totalContentHeight - height);
+  const clampedDeltaY = clamp(total, 0, maxScrollable);
+  const scrollOffset = clampedDeltaY;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  return {
+    ...state,
+    deltaY: clampedDeltaY,
+    scrollOffset,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    inputSource,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
@@ -1475,7 +1640,7 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
 };
 const sendMessagePortToErrorWorker = async (port, rpcId) => {
-  const command = 'HandleMessagePort.handleMessagePort';
+  const command = 'Errors.handleMessagePort';
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
 };
@@ -1674,6 +1839,14 @@ const getAllPreferences = async () => {
   // @ts-ignore
   return invoke$3('Preferences.getAll');
 };
+const showSaveFilePicker = async () => {
+  // @ts-ignore
+  return invoke$3('FilePicker.showSaveFilePicker');
+};
+const getLogsDir = async () => {
+  // @ts-ignore
+  return invoke$3('PlatformPaths.getLogsDir');
+};
 const RendererWorker = {
   __proto__: null,
   activateByEvent,
@@ -1699,6 +1872,7 @@ const RendererWorker = {
   getFolderSize,
   getIcons,
   getKeyBindings,
+  getLogsDir,
   getMarkdownDom,
   getNodeVersion,
   getPreference,
@@ -1745,6 +1919,7 @@ const RendererWorker = {
   showContextMenu,
   showErrorDialog,
   showMessageBox,
+  showSaveFilePicker,
   uninstallExtension,
   unregisterWebViewInterceptor,
   writeClipBoardImage,
@@ -3966,9 +4141,28 @@ const loadContent = async (state, savedState) => {
   const preferences = await getPreferences();
   const modifiedSettings = getModifiedSettings(preferences);
   const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
+  const {
+    height,
+    itemHeight
+  } = state;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
     inputSource: Script,
     items,
     modifiedSettings,
@@ -3977,7 +4171,9 @@ const loadContent = async (state, savedState) => {
     searchValue,
     tabs: newTabs,
     history,
-    historyIndex
+    historyIndex,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -4002,6 +4198,7 @@ const CheckBox = 'CheckBox';
 const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
 const InputBoxError = 'InputBoxError';
+const Label = 'Label';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -4014,9 +4211,14 @@ const SettingsHeader = 'SettingsHeader';
 const SettingsInputWrapper = 'SettingsInputWrapper';
 const SettingsItem = 'SettingsItem';
 const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const SettingsItemHeading = 'SettingsItemHeading';
 const SettingsItems = 'SettingsItems';
+const SettingsItemWrapper = 'SettingsItemWrapper';
 const SettingsMain = 'SettingsMain';
 const SettingsNoResults = 'SettingsNoResults';
+const SettingsScrollBar = 'ScrollBar';
+const SettingsScrollBarSmall = 'ScrollBarSmall';
+const SettingsScrollBarThumb = 'ScrollBarThumb';
 const SettingsSearchInput = 'SettingsSearchInput';
 const SettingsSideBar = 'SettingsSideBar';
 const SettingsTabs = 'SettingsTabs';
@@ -4041,7 +4243,7 @@ const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
-const HandleScroll = 'handleScroll';
+const HandleWheel = 'handleWheel';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
 
@@ -4077,6 +4279,10 @@ const getSettingsInputDom = () => {
     type: VirtualDomElements.Input,
     className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
+    autocomplete: 'off',
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    spellcheck: false,
     childCount: 0,
     name: SettingsSearch,
     onInput: HandleInput,
@@ -4100,6 +4306,29 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
   }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
 };
 
+const getContentHeadingDom = headerText => {
+  return [{
+    type: VirtualDomElements.H1,
+    className: SettingsContentHeading,
+    childCount: 1
+  }, text(headerText)];
+};
+
+const parentNode$1 = {
+  type: VirtualDomElements.Div,
+  className: mergeClassNames(SettingsScrollBar, SettingsScrollBarSmall),
+  childCount: 1
+};
+const getScrollBarDom = (thumbHeight, thumbTop) => {
+  return [parentNode$1, {
+    type: VirtualDomElements.Div,
+    className: SettingsScrollBarThumb,
+    childCount: 0,
+    height: `${thumbHeight}px`,
+    top: `${thumbTop}px`
+  }];
+};
+
 const getErrorMessageDom = errorMessage => {
   if (!errorMessage) {
     return [];
@@ -4115,6 +4344,24 @@ const getInputId = id => {
   return id.replaceAll('.', '\\.');
 };
 
+const parent = {
+  type: VirtualDomElements.H3,
+  className: SettingsItemHeading,
+  childCount: 1
+};
+const getItemHeadingDom = heading => {
+  return [parent, text(heading)];
+};
+
+const getItemLabelDom = (domId, label) => {
+  return [{
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: Label
+  }, text(label)];
+};
+
 const getItemCheckBoxVirtualDom = item => {
   const {
     heading,
@@ -4130,13 +4377,10 @@ const getItemCheckBoxVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3 + errorChildCount,
+    childCount: 2 + errorChildCount,
     role: AriaRoles.Group,
     'data-modified': modified
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
+  }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
@@ -4148,28 +4392,7 @@ const getItemCheckBoxVirtualDom = item => {
     inputType: 'checkbox',
     name: id,
     onChange: HandleSettingChecked
-  }, {
-    type: VirtualDomElements.Label,
-    childCount: 1,
-    htmlFor: domId
-  }, text(description), ...getErrorMessageDom(errorMessage)];
-};
-
-const parent = {
-  type: VirtualDomElements.H3,
-  childCount: 1
-};
-const getItemHeadingDom = heading => {
-  return [parent, text(heading)];
-};
-
-const getItemLabelDom = (domId, label) => {
-  return [{
-    type: VirtualDomElements.Label,
-    htmlFor: domId,
-    childCount: 1,
-    className: 'Label'
-  }, text(label)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemColorVirtualDom = item => {
@@ -4306,6 +4529,7 @@ const getItemStringVirtualDom = item => {
     hasError,
     errorMessage
   } = item;
+  const domId = getInputId(id);
   const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
   const errorChildCount = hasError ? 1 : 0;
   return [{
@@ -4313,18 +4537,13 @@ const getItemStringVirtualDom = item => {
     className: SettingsItem,
     childCount: 3 + errorChildCount,
     role: AriaRoles.Group
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
     className: inputClassName,
     inputType: 'text',
     placeholder: stringValue(),
     childCount: 0,
+    id: domId,
     name: id,
     onInput: HandleSettingInput
   }, ...getErrorMessageDom(errorMessage)];
@@ -4369,26 +4588,28 @@ const getItemUrlVirtualDom = item => {
   }, ...getErrorMessageDom(errorMessage)];
 };
 
-const getItemVirtualDom = item => {
-  if (item.type === Number$1) {
-    return getItemNumberVirtualDom(item);
-  }
-  if (item.type === Boolean$1) {
-    return getItemCheckBoxVirtualDom(item);
-  }
-  if (item.type === String) {
-    return getItemStringVirtualDom(item);
-  }
-  if (item.type === Enum) {
-    return getItemSelectVirtualDom(item);
-  }
-  if (item.type === Color) {
-    return getItemColorVirtualDom(item);
-  }
-  if (item.type === Url) {
-    return getItemUrlVirtualDom(item);
+const getItemRender = type => {
+  switch (type) {
+    case Number$1:
+      return getItemNumberVirtualDom;
+    case Boolean$1:
+      return getItemCheckBoxVirtualDom;
+    case String:
+      return getItemStringVirtualDom;
+    case Enum:
+      return getItemSelectVirtualDom;
+    case Color:
+      return getItemColorVirtualDom;
+    case Url:
+      return getItemUrlVirtualDom;
+    default:
+      return getItemUnknownVirtualDom;
   }
-  return getItemUnknownVirtualDom();
+};
+
+const getItemVirtualDom = item => {
+  const fn = getItemRender(item.type);
+  return fn(item);
 };
 
 const getSettingsNoResultsDom = searchValue => {
@@ -4414,19 +4635,19 @@ const getSettingsItemsDom = (items, searchValue) => {
   }, ...items.flatMap(getItemVirtualDom)];
 };
 
-const getSettingsContentDom = (items, tabs, searchValue) => {
+const getSettingsContentDom = (visibleItems, tabs, searchValue, thumbHeight, thumbTop) => {
   const selectedTab = tabs.find(tab => tab.selected);
   const headerText = selectedTab ? selectedTab.label : settingsContent();
   return [{
     type: VirtualDomElements.Div,
     className: SettingsContent,
     childCount: 2,
-    onScroll: HandleScroll
-  }, {
-    type: VirtualDomElements.H1,
-    className: SettingsContentHeading,
-    childCount: 1
-  }, text(headerText), ...getSettingsItemsDom(items, searchValue)];
+    onWheel: HandleWheel
+  }, ...getContentHeadingDom(headerText), {
+    type: VirtualDomElements.Div,
+    className: SettingsItemWrapper,
+    childCount: 2
+  }, ...getSettingsItemsDom(visibleItems, searchValue), ...getScrollBarDom(thumbHeight, thumbTop)];
 };
 
 const getTabClassName = tab => {
@@ -4464,27 +4685,31 @@ const getSettingsSideBarDom = tabs => {
   }, ...getSettingsTabsDom(tabs)];
 };
 
-const getSettingsMainDom = (tabs, items, searchValue) => {
+const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsMain,
     childCount: 2
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
 };
 
+const parentNode = {
+  type: VirtualDomElements.Div,
+  childCount: 2,
+  className: mergeClassNames(Viewlet, Settings)
+};
 const getSettingsDom = state => {
   const {
     tabs,
     filteredItems,
-    searchValue
+    visibleItems,
+    searchValue,
+    scrollBarThumbHeight,
+    scrollBarThumbTop
   } = state;
   const hasSearchValue = searchValue.trim().length > 0;
   const filteredItemsCount = filteredItems.length;
-  return [{
-    type: VirtualDomElements.Div,
-    childCount: 2,
-    className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
+  return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, scrollBarThumbHeight, scrollBarThumbTop)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -4586,9 +4811,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleSettingChecked,
     params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
-  }, {
-    name: HandleScroll,
-    params: ['handleScroll', 'event.target.scrollTop'],
+  },
+  // {
+  //   name: DomEventListenerFunctions.HandleScroll,
+  //   params: ['handleScroll', 'event.target.scrollTop'],
+  //   passive: true,
+  // },
+  {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaY'],
     passive: true
   }, {
     name: HandleSettingSelect,
@@ -4682,6 +4913,7 @@ const commandMap = {
   'Settings.handleInputBlur': wrapCommand(handleInputBlur),
   'Settings.handleInput': wrapCommand(handleInput),
   'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleWheel': wrapCommand(handleWheel),
   'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
   'Settings.handleSettingInput': wrapCommand(handleSettingInput),
   'Settings.handleInputFocus': wrapCommand(handleInputFocus),