@lvce-editor/completion-worker 1.11.0 → 1.13.0

package/dist/completionWorkerMain.js

@@ -1145,7 +1145,7 @@ const isEqual$2 = (oldState, newState) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.focusedIndex === newState.focusedIndex;
+  return oldState.items === newState.items && oldState.focusedIndex === newState.focusedIndex && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY;
 };
 
 const isEqual = (oldState, newState) => {
@@ -1761,6 +1761,28 @@ const getNumberOfVisibleItems = (listHeight, itemHeight) => {
   return Math.ceil(listHeight / itemHeight) + 1;
 };
 
+const getNewOffsets = (itemHeight, finalDeltaY, deltaY, height, headerHeight, value, itemCount) => {
+  const listHeight = height - headerHeight;
+  const newDeltaY = clamp(value, 0, finalDeltaY);
+  if (deltaY === newDeltaY) {
+    return {
+      modified: false,
+      newDeltaY: 0,
+      newMinLineY: 0,
+      newMaxLineY: 0
+    };
+  }
+  // TODO when it only moves by one px, items don't need to be rerendered, only negative margin
+  const minLineY = Math.floor(newDeltaY / itemHeight);
+  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems(listHeight, itemHeight), itemCount - 1);
+  return {
+    newDeltaY: newDeltaY,
+    newMinLineY: minLineY,
+    newMaxLineY: maxLineY,
+    modified: true
+  };
+};
+
 const setDeltaY = (state, value) => {
   object(state);
   number(value);
@@ -1769,21 +1791,23 @@ const setDeltaY = (state, value) => {
     finalDeltaY,
     deltaY,
     height,
-    headerHeight
+    headerHeight,
+    items
   } = state;
-  const listHeight = height - headerHeight;
-  const newDeltaY = clamp(value, 0, finalDeltaY);
-  if (deltaY === newDeltaY) {
+  const {
+    newDeltaY,
+    newMaxLineY,
+    newMinLineY,
+    modified
+  } = getNewOffsets(itemHeight, finalDeltaY, deltaY, height, headerHeight, value, items.length);
+  if (!modified) {
     return state;
   }
-  // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
-  const minLineY = Math.floor(newDeltaY / itemHeight);
-  const maxLineY = minLineY + getNumberOfVisibleItems(listHeight, itemHeight);
   return {
     ...state,
     deltaY: newDeltaY,
-    minLineY,
-    maxLineY
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY
   };
 };
 
@@ -1906,8 +1930,13 @@ const renderContent = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
-const getEventListeners = uid => {
-  return [];
+const HandleWheel = 'handleWheel';
+
+const getEventListeners = () => {
+  return [{
+    name: HandleWheel,
+    params: ['EditorCompletion.handleWheel', 'event.deltaMode', 'event.deltaY']
+  }];
 };
 
 const renderEventListeners = state => {
@@ -1922,6 +1951,10 @@ const renderFocusContext = (oldState, newState) => {
   return [/* method */'Viewlet.setFocusContext', FocusEditorRename];
 };
 
+const None = 'none';
+const Option = 'option';
+const ListBox = 'listbox';
+
 const ColoredMaskIcon = 'ColoredMaskIcon';
 const EditorCompletion = 'EditorCompletion';
 const EditorCompletionItem = 'EditorCompletionItem';
@@ -1930,10 +1963,33 @@ const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
 const EditorCompletionItemHighlight = 'EditorCompletionItemHighlight';
 const FileIcon = 'FileIcon';
 const Label = 'Label';
+const ListItems = 'ListItems';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
 const Viewlet = 'Viewlet';
 
-const None = 'none';
-const Option = 'option';
+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 NoSuggestions = 'No Suggestions';
+const Suggest = 'Suggest';
+
+const noSuggestions = () => {
+  return i18nString(NoSuggestions);
+};
+const suggest = () => {
+  return i18nString(Suggest);
+};
 
 const Div = 4;
 const Span = 8;
@@ -1971,6 +2027,12 @@ const text = data => {
     childCount: 0
   };
 };
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
 
 const label1 = {
   type: Div,
@@ -2041,24 +2103,6 @@ const getCompletionItemVirtualDom = visibleItem => {
   }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
 };
 
-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 NoSuggestions = 'No Suggestions';
-
-const noSuggestions = () => {
-  return i18nString(NoSuggestions);
-};
-
 const parentNode = {
   type: Div,
   childCount: 1
@@ -2079,24 +2123,60 @@ const getCompletionItemsVirtualDom = visibleItems => {
   return dom;
 };
 
-const getCompletionVirtualDom = visibleItems => {
+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(Viewlet, EditorCompletion),
-    id: 'Completions',
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
     childCount: 1
   }, {
     type: Div,
-    className: 'ListItems',
-    role: 'listbox',
-    ariaLabel: 'Suggest',
-    childCount: 1
-  }, ...getCompletionItemsVirtualDom(visibleItems)
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
+const Completions = 'Completions';
 
+const getCompletionVirtualDom = (visibleItems, scrollBarHeight, scrollBarTop) => {
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarTop);
+  const childCount = scrollBarDom.length === 0 ? 1 : 2;
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, EditorCompletion),
+    id: Completions,
+    childCount: childCount
+  }, {
+    type: Div,
+    className: ListItems,
+    role: ListBox,
+    ariaLabel: suggest(),
+    childCount: 1,
+    onWheel: HandleWheel
+  }, ...getCompletionItemsVirtualDom(visibleItems), ...scrollBarDom
   // TODO render scrollbar
   ];
 };
 
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const getScrollBarTop = (height, contentHeight, scrollTop) => {
+  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
+  return scrollBarTop;
+};
+
 const Property = 1;
 const Value = 2;
 const Function = 3;
@@ -2158,11 +2238,16 @@ const getHighlights = item => {
 const getLabel = item => {
   return item.label;
 };
-const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
+
+const getTop = (i, minLineY, itemHeight, relative) => {
+  return (i - minLineY) * itemHeight - relative;
+};
+
+const getVisibleIem = (item, itemHeight, leadingWord, i, minLineY, focusedIndex, relative) => {
   return {
     label: getLabel(item),
     symbolName: getSymbolName(item.kind),
-    top: i * itemHeight,
+    top: getTop(i, minLineY, itemHeight, relative),
     highlights: getHighlights(item),
     focused: i === focusedIndex,
     deprecated: item.flags & Deprecated,
@@ -2170,21 +2255,27 @@ const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
   };
 };
 
-const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
+const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex, deltaY) => {
   const visibleItems = [];
+  const relative = deltaY % itemHeight;
   for (let i = minLineY; i < maxLineY; i++) {
     const filteredItem = filteredItems[i];
-    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
+    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, minLineY, focusedIndex, relative));
   }
   return visibleItems;
 };
 
 const renderItems = (oldState, newState) => {
   const {
-    uid
+    uid,
+    height,
+    deltaY
   } = newState;
-  const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
-  const dom = getCompletionVirtualDom(visibleItems);
+  const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.deltaY);
+  const contentHeight = newState.items.length * newState.itemHeight;
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY);
+  const dom = getCompletionVirtualDom(visibleItems, scrollBarHeight, scrollBarTop);
   return [SetDom2, uid, dom];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/completion-worker",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",