@lvce-editor/completion-worker 1.12.0 → 1.14.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
   };
 };
 
@@ -1911,7 +1935,8 @@ const HandleWheel = 'handleWheel';
 const getEventListeners = () => {
   return [{
     name: HandleWheel,
-    params: ['EditorCompletion.handleWheel', 'event.deltaMode', 'event.deltaY']
+    params: ['EditorCompletion.handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
   }];
 };
 
@@ -1939,8 +1964,11 @@ const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
 const EditorCompletionItemHighlight = 'EditorCompletionItemHighlight';
 const FileIcon = 'FileIcon';
 const Label = 'Label';
-const Viewlet = 'Viewlet';
 const ListItems = 'ListItems';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const Viewlet = 'Viewlet';
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -2000,6 +2028,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,
@@ -2090,12 +2124,36 @@ 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: 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,
@@ -2103,12 +2161,23 @@ const getCompletionVirtualDom = visibleItems => {
     ariaLabel: suggest(),
     childCount: 1,
     onWheel: HandleWheel
-  }, ...getCompletionItemsVirtualDom(visibleItems)
-
+  }, ...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;
@@ -2171,11 +2240,15 @@ 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,
@@ -2183,21 +2256,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.12.0",
+  "version": "1.14.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",