@lvce-editor/settings-view 2.29.0 → 2.29.1

package/dist/settingsViewWorkerMain.js

@@ -1379,10 +1379,13 @@ const terminate = () => {
 };
 
 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 safeHeight = Math.max(0, height);
+  const safeItemHeight = Math.max(0, itemHeight);
+  const totalHeight = totalItemCount * safeItemHeight;
+  const scrollable = Math.max(0, totalHeight - safeHeight);
+  const thumbTrack = safeHeight;
+  const proportionalThumbHeight = totalHeight > 0 ? Math.floor(safeHeight / Math.max(totalHeight, 1) * safeHeight) : safeHeight;
+  const thumbHeight = totalHeight > 0 ? Math.min(safeHeight, Math.max(scrollBarMinHeight, proportionalThumbHeight)) : safeHeight;
   const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
   const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
   return {
@@ -1394,8 +1397,9 @@ const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scro
 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 safeHeight = Math.max(0, height);
+  const minLineY = Math.max(0, Math.floor(Math.max(0, scrollOffset) / safeItemHeight));
+  const itemsPerViewport = Math.max(1, Math.ceil(safeHeight / safeItemHeight) + 1);
   const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
   const visibleItems = items.slice(minLineY, maxLineY);
   return {
@@ -1476,6 +1480,13 @@ const getFilteredItems = (items, tabs, searchValue, modifiedSettings, preference
   return parsedQuery.modified ? validated.filter(item => item.modified) : validated;
 };
 
+// The worker receives the height of the complete settings view. Account for
+// the search header, content padding, and content heading before measuring rows.
+const settingsContentChromeHeight = 114;
+const getSettingsViewportHeight = height => {
+  return Math.max(0, height - settingsContentChromeHeight);
+};
+
 const User = 1;
 const Script = 2;
 
@@ -1491,6 +1502,7 @@ const clear$1 = state => {
     scrollBarMinHeight,
     tabs
   } = state;
+  const viewportHeight = getSettingsViewportHeight(height);
   const newSearchValue = '';
   const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   const nextScrollOffset = 0;
@@ -1498,11 +1510,11 @@ const clear$1 = state => {
     maxLineY,
     minLineY,
     visibleItems
-  } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
+  } = computeVisibleItems(filteredItems, viewportHeight, nextScrollOffset, itemHeight);
   const {
     thumbHeight,
     thumbTop
-  } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
+  } = computeScrollBar(viewportHeight, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   return {
     ...state,
     deltaY: 0,
@@ -1578,7 +1590,7 @@ const create$1 = (id, uri, x, y, width, height) => {
 };
 
 const isEqual$4 = (oldState, newState) => {
-  return oldState.sideBarWidth === newState.sideBarWidth && oldState.scrollBarThumbHeight === newState.scrollBarThumbHeight && oldState.scrollBarThumbTop === newState.scrollBarThumbTop;
+  return oldState.sideBarWidth === newState.sideBarWidth && oldState.filteredItems.length === newState.filteredItems.length && oldState.itemHeight === newState.itemHeight && oldState.scrollOffset === newState.scrollOffset && oldState.scrollBarThumbHeight === newState.scrollBarThumbHeight && oldState.scrollBarThumbTop === newState.scrollBarThumbTop;
 };
 
 const isEqual$3 = (oldState, newState) => {
@@ -1698,6 +1710,7 @@ const handleInput = (state, value, inputSource = User) => {
     preferences,
     tabs
   } = state;
+  const viewportHeight = getSettingsViewportHeight(height);
   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;
@@ -1705,14 +1718,14 @@ const handleInput = (state, value, inputSource = User) => {
     maxLineY,
     minLineY,
     visibleItems
-  } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
+  } = computeVisibleItems(filteredItems, viewportHeight, nextScrollOffset, itemHeight);
   const {
     scrollBarMinHeight
   } = state;
   const {
     thumbHeight,
     thumbTop
-  } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
+  } = computeScrollBar(viewportHeight, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   const {
     newHistory,
     newHistoryIndex
@@ -2762,20 +2775,23 @@ const handleClickTab = (state, name = '') => {
     searchValue,
     tabs
   } = state;
+  const viewportHeight = getSettingsViewportHeight(height);
   const updatedTabs = getUpdatedTabs(tabs, name);
   const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
+  const maxScrollable = Math.max(0, filteredItems.length * itemHeight - viewportHeight);
+  const nextScrollOffset = Math.min(Math.max(0, scrollOffset), maxScrollable);
   const {
     maxLineY,
     minLineY,
     visibleItems
-  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  } = computeVisibleItems(filteredItems, viewportHeight, nextScrollOffset, itemHeight);
   const {
     scrollBarMinHeight
   } = state;
   const {
     thumbHeight,
     thumbTop
-  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  } = computeScrollBar(viewportHeight, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
@@ -2783,6 +2799,7 @@ const handleClickTab = (state, name = '') => {
     minLineY,
     scrollBarThumbHeight: thumbHeight,
     scrollBarThumbTop: thumbTop,
+    scrollOffset: nextScrollOffset,
     tabs: updatedTabs,
     visibleItems
   };
@@ -2990,6 +3007,7 @@ const handleWheel = (state, eventDeltaY, inputSource = User) => {
     height,
     itemHeight = 1
   } = state;
+  const viewportHeight = getSettingsViewportHeight(height);
   const itemCount = filteredItems.length;
   const stepLimit = itemCount === 0 ? 10 : Infinity;
   const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
@@ -2997,21 +3015,21 @@ const handleWheel = (state, eventDeltaY, inputSource = User) => {
   // 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 maxScrollable = Math.max(0, totalContentHeight - viewportHeight);
   const clampedDeltaY = clamp(total, 0, maxScrollable);
   const scrollOffset = clampedDeltaY;
   const {
     maxLineY,
     minLineY,
     visibleItems
-  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  } = computeVisibleItems(filteredItems, viewportHeight, scrollOffset, itemHeight);
   const {
     scrollBarMinHeight
   } = state;
   const {
     thumbHeight,
     thumbTop
-  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  } = computeScrollBar(viewportHeight, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
   return {
     ...state,
     deltaY: clampedDeltaY,
@@ -3194,18 +3212,21 @@ const loadContent = async (state, savedState) => {
     height,
     itemHeight
   } = state;
+  const viewportHeight = getSettingsViewportHeight(height);
+  const maxScrollable = Math.max(0, filteredItems.length * itemHeight - viewportHeight);
+  const nextScrollOffset = Math.min(Math.max(0, scrollOffset), maxScrollable);
   const {
     maxLineY,
     minLineY,
     visibleItems
-  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  } = computeVisibleItems(filteredItems, viewportHeight, nextScrollOffset, itemHeight);
   const {
     scrollBarMinHeight
   } = state;
   const {
     thumbHeight,
     thumbTop
-  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  } = computeScrollBar(viewportHeight, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
@@ -3220,7 +3241,7 @@ const loadContent = async (state, savedState) => {
     schemaErrors,
     scrollBarThumbHeight: thumbHeight,
     scrollBarThumbTop: thumbTop,
-    scrollOffset,
+    scrollOffset: nextScrollOffset,
     searchValue,
     sideBarWidth,
     tabs: newTabs,
@@ -3228,13 +3249,17 @@ const loadContent = async (state, savedState) => {
   };
 };
 
-const getCss = (sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop) => {
+const getCss = (sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop, itemHeight, totalItemCount, scrollOffset) => {
   const rounded = Math.round(sideBarWidth);
+  const settingsLayoutCss = typeof itemHeight === 'number' && typeof totalItemCount === 'number' && typeof scrollOffset === 'number' ? `
+  --SettingsItemHeight: ${itemHeight}px;
+  --SettingsItemsHeight: ${itemHeight * totalItemCount}px;
+  --SettingsItemsTranslateY: ${-scrollOffset}px;` : '';
   return `
 .Settings {
   --SettingsSideBarWidth: ${rounded}px;
   --ScrollBarThumbHeight: ${scrollBarThumbHeight}px;
-  --ScrollBarThumbTop: ${scrollBarThumbTop}px;
+  --ScrollBarThumbTop: ${scrollBarThumbTop}px;${settingsLayoutCss}
 }
 
 .SettingsSideBar{
@@ -3245,12 +3270,15 @@ const getCss = (sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop) => {
 
 const renderCss = (oldState, newState) => {
   const {
+    filteredItems,
     id,
+    itemHeight,
     scrollBarThumbHeight,
     scrollBarThumbTop,
+    scrollOffset,
     sideBarWidth
   } = newState;
-  const css = getCss(sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop);
+  const css = getCss(sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop, itemHeight, filteredItems.length, scrollOffset);
   return [SetCss, id, css];
 };
 
@@ -3298,6 +3326,7 @@ const SettingsItem = 'SettingsItem';
 const SettingsItemCheckBox = 'SettingsItemCheckBox';
 const SettingsItemHeading = 'SettingsItemHeading';
 const SettingsItems = 'SettingsItems';
+const SettingsItemsSpacer = 'SettingsItemsSpacer';
 const SettingsItemWrapper = 'SettingsItemWrapper';
 const SettingsMain = 'SettingsMain';
 const SettingsNoResults = 'SettingsNoResults';
@@ -3833,7 +3862,7 @@ const getItemVirtualDom = (item, preferences) => {
   return fn(item, preferences);
 };
 
-const settingsItemsNode = {
+const settingsItemsNode$1 = {
   childCount: 1,
   className: SettingsItems,
   onContextMenu: HandleContextMenu,
@@ -3845,19 +3874,47 @@ const noResultsNode = {
   type: P
 };
 const getSettingsNoResultsDom = searchValue => {
-  return [settingsItemsNode, noResultsNode, text(noSettingsMatching(searchValue))];
+  return [settingsItemsNode$1, noResultsNode, text(noSettingsMatching(searchValue))];
+};
+
+const getSpacerDom = height => {
+  return [{
+    childCount: 0,
+    className: SettingsItemsSpacer,
+    height: `${height}px;`,
+    type: Div
+  }];
 };
 
-const getSettingsItemsDom = (items, searchValue, preferences = {}) => {
+const settingsItemsNode = {
+  childCount: 0,
+  className: SettingsItems,
+  onContextMenu: HandleContextMenu,
+  type: Div
+};
+const getSettingsItemsChildren = (items, preferences, topSpacerHeight, bottomSpacerHeight) => {
+  const children = items.flatMap(item => getItemVirtualDom(item, preferences));
+  if (topSpacerHeight !== 0) {
+    children.unshift(...getSpacerDom(topSpacerHeight));
+  }
+  if (bottomSpacerHeight !== 0) {
+    children.push(...getSpacerDom(bottomSpacerHeight));
+  }
+  return children;
+};
+const getSettingsItemsDom = (items, searchValue, preferences = {}, topSpacerHeight = 0, bottomSpacerHeight = 0) => {
   if (items.length === 0 && searchValue && searchValue.trim()) {
     return getSettingsNoResultsDom(searchValue);
   }
+  if (items.length === 0) {
+    return [settingsItemsNode];
+  }
+  const hasVirtualSpacers = topSpacerHeight !== 0 || bottomSpacerHeight !== 0;
+  const childCount = items.length + (hasVirtualSpacers ? 2 : 0);
   return [{
-    childCount: items.length,
-    className: SettingsItems,
-    onContextMenu: HandleContextMenu,
-    type: Div
-  }, ...items.flatMap(item => getItemVirtualDom(item, preferences))];
+    ...settingsItemsNode,
+    childCount
+  }, ...getSettingsItemsChildren(items, preferences, topSpacerHeight, bottomSpacerHeight)];
 };
 
 const settingsContentNode = {
@@ -3871,10 +3928,10 @@ const settingsItemWrapperNode = {
   className: SettingsItemWrapper,
   type: Div
 };
-const getSettingsContentDom = (visibleItems, tabs, searchValue, showScrollBar, schemaErrors = [], preferences = {}) => {
+const getSettingsContentDom = (visibleItems, tabs, searchValue, showScrollBar, schemaErrors = [], preferences = {}, topSpacerHeight = 0, bottomSpacerHeight = 0) => {
   const selectedTab = tabs.find(tab => tab.selected);
   const headerText = selectedTab ? selectedTab.label : settingsContent();
-  return [settingsContentNode, ...getContentHeadingDom(headerText), settingsItemWrapperNode, ...(selectedTab?.id === SchemaErrorsTab ? getSchemaErrorsDom(schemaErrors) : getSettingsItemsDom(visibleItems, searchValue, preferences)), ...getScrollBarDom(showScrollBar)];
+  return [settingsContentNode, ...getContentHeadingDom(headerText), settingsItemWrapperNode, ...(selectedTab?.id === SchemaErrorsTab ? getSchemaErrorsDom(schemaErrors) : getSettingsItemsDom(visibleItems, searchValue, preferences, topSpacerHeight, bottomSpacerHeight)), ...getScrollBarDom(showScrollBar)];
 };
 
 const selectedTabClassName = mergeClassNames(Tab, TabSelected);
@@ -3919,10 +3976,11 @@ const settingsMainNode = {
   className: SettingsMain,
   type: Div
 };
-const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, height, itemHeight, schemaErrors = [], preferences = {}) => {
+const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, height, itemHeight, minLineY, maxLineY, schemaErrors = [], preferences = {}) => {
+  const viewportHeight = getSettingsViewportHeight(height);
   const totalHeight = totalItemCount * itemHeight;
-  const showScrollBar = totalHeight > height;
-  return [settingsMainNode, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue, showScrollBar, schemaErrors, preferences)];
+  const showScrollBar = totalHeight > viewportHeight;
+  return [settingsMainNode, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue, showScrollBar, schemaErrors, preferences, minLineY * itemHeight, Math.max(0, totalHeight - maxLineY * itemHeight))];
 };
 
 const parentNode = {
@@ -3951,7 +4009,11 @@ const getSettingsDom = state => {
   const hasSearchValue = searchValue.trim().length > 0;
   const filteredSchemaErrors = getFilteredSchemaErrors(schemaErrors, searchValue);
   const filteredItemsCount = getFilteredItemsCount(isSchemaErrorsTab, filteredSchemaErrors.length, filteredItems.length);
-  const mainDom = getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, height, itemHeight, filteredSchemaErrors, preferences);
+  const {
+    maxLineY,
+    minLineY
+  } = state;
+  const mainDom = getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, height, itemHeight, minLineY, maxLineY, filteredSchemaErrors, preferences);
   return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...mainDom];
 };
 

package/package.json

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