@lvce-editor/file-search-worker 5.10.0 → 5.11.0

package/dist/fileSearchWorkerMain.js

@@ -940,7 +940,7 @@ const create$1 = ({
     scrollBarActive: false
   };
 };
-const getListHeight = (height, headerHeight) => {
+const getListHeight$1 = (height, headerHeight) => {
   if (headerHeight) {
     return height - headerHeight;
   }
@@ -955,7 +955,7 @@ const setDeltaY = (state, deltaY) => {
     height,
     headerHeight
   } = state;
-  const listHeight = getListHeight(height, headerHeight);
+  const listHeight = getListHeight$1(height, headerHeight);
   const itemsLength = items.length;
   const finalDeltaY = itemsLength * itemHeight - listHeight;
   if (deltaY < 0) {
@@ -1709,6 +1709,23 @@ const getFilterValue = (id, value) => {
   return filterValue;
 };
 
+const getFinalDeltaY = (height, itemHeight, itemsLength) => {
+  const contentHeight = itemsLength * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  return finalDeltaY;
+};
+
+const getListHeight = (itemsLength, itemHeight, maxHeight) => {
+  number(itemsLength);
+  number(itemHeight);
+  number(maxHeight);
+  if (itemsLength === 0) {
+    return itemHeight;
+  }
+  const totalHeight = itemsLength * itemHeight;
+  return Math.min(totalHeight, maxHeight);
+};
+
 const getColorThemeNames = async () => {
   return invoke$1(/* Ajax.getJson */'ColorTheme.getColorThemeNames');
 };
@@ -2279,7 +2296,9 @@ const setValue = async (state, newValue) => {
     value,
     minLineY,
     maxLineY,
-    fileIconCache
+    fileIconCache,
+    itemHeight,
+    height
   } = state;
   if (value === newValue) {
     return state;
@@ -2295,6 +2314,8 @@ const setValue = async (state, newValue) => {
     newFileIconCache,
     icons
   } = await getQuickPickFileIcons(sliced, fileIconCache);
+  const listHeight = getListHeight(items.length, itemHeight, height);
+  const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, items.length);
   return {
     ...state,
     picks: newPicks,
@@ -2303,7 +2324,8 @@ const setValue = async (state, newValue) => {
     inputSource: Script,
     value: newValue,
     icons,
-    fileIconCache: newFileIconCache
+    fileIconCache: newFileIconCache,
+    finalDeltaY
   };
 };
 
@@ -2479,7 +2501,9 @@ const loadContent = async state => {
   const {
     uri,
     args,
-    fileIconCache
+    fileIconCache,
+    itemHeight,
+    height
   } = state;
   const id = getQuickPickProviderId(uri);
   const value = getDefaultValue(id);
@@ -2497,6 +2521,8 @@ const loadContent = async state => {
     newFileIconCache,
     icons
   } = await getQuickPickFileIcons(sliced, fileIconCache);
+  const listHeight = getListHeight(items.length, itemHeight, height);
+  const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, items.length);
   return {
     ...state,
     picks: newPicks,
@@ -2511,7 +2537,8 @@ const loadContent = async state => {
     focused: true,
     fileIconCache: newFileIconCache,
     icons,
-    providerId: id
+    providerId: id,
+    finalDeltaY
   };
 };
 
@@ -2526,6 +2553,13 @@ const getVisible$1 = (items, minLineY, maxLineY, icons) => {
   return protoVisibleItems;
 };
 
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
 const emptyHighlightSections = [];
 
 const getHighlightSections = (highlights, label) => {
@@ -2576,14 +2610,31 @@ const getVisible = (setSize, protoVisibleItems, minLineY, focusedIndex) => {
   return visibleItems;
 };
 
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
+
 const createQuickPickViewModel = (oldState, newState) => {
   const protoVisibleItems = getVisible$1(newState.items, newState.minLineY, newState.maxLineY, newState.icons);
   const visibleItems = getVisible(newState.items.length, protoVisibleItems, newState.minLineY, newState.focusedIndex);
   const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
   const newFocusedIndex = newState.focusedIndex - newState.minLineY;
-  const maxLineY = Math.min(newState.maxLineY, newState.items.length);
-  const itemCount = maxLineY - newState.minLineY;
-  const height = itemCount * newState.itemHeight;
+  const itemCount = newState.items.length;
+  const {
+    itemHeight,
+    deltaY,
+    finalDeltaY,
+    minimumSliderSize,
+    headerHeight,
+    height
+  } = newState;
+  const listHeight = getListHeight(itemCount, itemHeight, height);
+  const contentHeight = itemCount * itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
+  const scrollBarY = getScrollBarY(deltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
+  const roundedScrollBarY = Math.round(scrollBarY);
   return {
     visibleItems,
     value: newState.value,
@@ -2592,7 +2643,9 @@ const createQuickPickViewModel = (oldState, newState) => {
     height,
     oldFocusedIndex,
     newFocusedIndex,
-    uid: newState.uid
+    uid: newState.uid,
+    scrollBarHeight,
+    scrollBarTop: roundedScrollBarY
   };
 };
 
@@ -2626,9 +2679,12 @@ const ListBox = 'listbox';
 const None = 'none';
 const Option = 'option';
 
+const ContainContent = 'ContainContent';
 const FileIcon = 'FileIcon';
 const InputBox = 'InputBox';
 const Label = 'Label';
+const List = 'List';
+const ListItems = 'ListItems';
 const MaskIcon = 'MaskIcon';
 const QuickPick$1 = 'QuickPick';
 const QuickPickHeader = 'QuickPickHeader';
@@ -2637,9 +2693,11 @@ const QuickPickItem = 'QuickPickItem';
 const QuickPickItemActive$1 = 'QuickPickItemActive';
 const QuickPickItemDescription = 'QuickPickItemDescription';
 const QuickPickItemLabel = 'QuickPickItemLabel';
-const QuickPickItems$1 = 'QuickPickItems';
 const QuickPickMaskIcon = 'QuickPickMaskIcon';
 const QuickPickStatus = 'QuickPickStatus';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
 const Viewlet = 'Viewlet';
 
 const HandleWheel = 'handleWheel';
@@ -2810,8 +2868,36 @@ const getQuickPickItemsVirtualDom = visibleItems => {
   return dom;
 };
 
-const getQuickPickVirtualDom = visibleItems => {
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
+  }
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, scrollBarTop);
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    childCount: 1
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
+const getQuickPickVirtualDom = (visibleItems, scrollBarHeight, scrollBarTop) => {
   const quickOpen$1 = quickOpen();
+  const shouldShowScrollbar = scrollBarHeight > 0;
   return [{
     type: Div,
     className: mergeClassNames(Viewlet, QuickPick$1),
@@ -2820,18 +2906,22 @@ const getQuickPickVirtualDom = visibleItems => {
     ariaLabel: quickOpen$1
   }, ...getQuickPickHeaderVirtualDom(), {
     type: Div,
-    className: QuickPickItems$1,
+    className: mergeClassNames(List, ContainContent),
     id: QuickPickItems,
     role: ListBox,
     ariaActivedescendant: QuickPickItemActive,
     onWheel: HandleWheel,
     onPointerDown: HandlePointerDown,
+    childCount: shouldShowScrollbar ? 2 : 1
+  }, {
+    type: Div,
+    className: mergeClassNames(ListItems, ContainContent),
     childCount: visibleItems.length
-  }, ...getQuickPickItemsVirtualDom(visibleItems)];
+  }, ...getQuickPickItemsVirtualDom(visibleItems), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarTop)];
 };
 
 const renderItems = newState => {
-  const dom = getQuickPickVirtualDom(newState.visibleItems);
+  const dom = getQuickPickVirtualDom(newState.visibleItems, newState.scrollBarHeight, newState.scrollBarTop);
   return ['Viewlet.setDom2', dom];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/file-search-worker",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "description": "",
   "keywords": [
     "text-search"