@lvce-editor/settings-view 1.21.0 → 2.0.0

package/dist/settingsViewWorkerMain.js

@@ -921,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;
@@ -979,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
   };
 };
 
@@ -1055,11 +1102,11 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 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;
@@ -1203,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
   };
 };
 
@@ -1281,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
@@ -1292,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
   };
 };
 
@@ -1408,33 +1498,6 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-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 handleWheel = (state, eventDeltaY, inputSource = User) => {
   const {
     deltaY: deltaY,
@@ -1446,8 +1509,11 @@ const handleWheel = (state, eventDeltaY, inputSource = User) => {
   const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
   const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
   const total = deltaY + limitedEventDelta;
-  const max = itemCount === 0 ? Number.POSITIVE_INFINITY : Math.max(0, itemCount * itemHeight);
-  const clampedDeltaY = clamp(total, 0, max);
+  // 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,
@@ -4147,8 +4213,12 @@ 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';
@@ -4173,7 +4243,6 @@ const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
-const HandleScroll = 'handleScroll';
 const HandleWheel = 'handleWheel';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
@@ -4237,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 [];
@@ -4543,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 => {
@@ -4593,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) => {
@@ -4715,11 +4811,13 @@ const renderEventListeners = () => {
   }, {
     name: HandleSettingChecked,
     params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
-  }, {
-    name: HandleScroll,
-    params: ['handleScroll', 'event.target.scrollTop'],
-    passive: true
-  }, {
+  },
+  // {
+  //   name: DomEventListenerFunctions.HandleScroll,
+  //   params: ['handleScroll', 'event.target.scrollTop'],
+  //   passive: true,
+  // },
+  {
     name: HandleWheel,
     params: ['handleWheel', 'event.deltaY'],
     passive: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.21.0",
+  "version": "2.0.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",