@lvce-editor/quick-pick-worker 1.1.0 → 2.1.0

package/dist/quickPickWorkerMain.js

@@ -1,6 +1,3 @@
-const EditorWorker = 99;
-const RendererWorker = 1;
-
 const normalizeLine = line => {
   if (line.startsWith('Error: ')) {
     return line.slice('Error: '.length);
@@ -207,6 +204,21 @@ const create$b = rpcId => {
   };
 };
 
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Text = 12;
+const Img = 17;
+const Reference = 100;
+
+const EditorWorker = 99;
+const RendererWorker = 1;
+
+const SetDom2 = 'Viewlet.setDom2';
+const SetPatches = 'Viewlet.setPatches';
+
+const FocusQuickPickInput = 20;
+
 const {
   invoke: invoke$2,
   set: set$2
@@ -463,6 +475,7 @@ const create$8 = (uid, uri, listItemHeight, x, y, width, height, platform, args,
     cursorOffset: 0,
     height: 300,
     icons: [],
+    initial: true,
     maxVisibleItems: 12,
     picks: [],
     recentPickIds: Object.create(null),
@@ -522,7 +535,7 @@ const isEqual = (oldState, newState) => {
 };
 
 const modules = [isEqual$2, isEqual$1, isEqual, isEqual$3, isEqual$4];
-const numbers = [Height, RenderItems, diffType, RenderFocusedIndex, RenderFocus];
+const numbers = [Height, RenderIncremental, diffType, RenderFocusedIndex, RenderFocus];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -766,11 +779,6 @@ const focusPrevious = state => {
   return focusIndex(state, previousIndex);
 };
 
-const SetDom2 = 'Viewlet.setDom2';
-const SetPatches = 'Viewlet.setPatches';
-
-const FocusQuickPickInput = 20;
-
 const Enter = 3;
 const Escape = 8;
 const PageUp = 10;
@@ -2029,8 +2037,7 @@ const handleBeforeInput = (state, inputType, data, selectionStart, selectionEnd)
 };
 
 const handleBlur = async state => {
-  // TODO fix virtual dom diffing so that input isn't destroyed and loses focus when rerendering
-  // await CloseWidget.closeWidget(state.uid)
+  await closeWidget(state.uid);
   return state;
 };
 
@@ -3160,6 +3167,7 @@ const loadContent = async state => {
     focused: true,
     focusedIndex: 0,
     icons,
+    initial: false,
     inputSource: Script,
     items,
     maxLineY,
@@ -3179,141 +3187,27 @@ const executeCallback = id => {
   fn();
 };
 
-const getVisible$1 = (items, minLineY, maxLineY, icons) => {
-  const range = items.slice(minLineY, maxLineY);
-  const protoVisibleItems = range.map((item, index) => {
-    return {
-      ...item,
-      fileIcon: icons[index]
-    };
-  });
-  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) => {
-  if (highlights.length === 0) {
-    return emptyHighlightSections;
-  }
-  const sections = [];
-  let position = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const highlightStart = highlights[i];
-    const highlightEnd = highlights[i + 1];
-    if (position < highlightStart) {
-      const beforeText = label.slice(position, highlightStart);
-      sections.push({
-        highlighted: false,
-        text: beforeText
-      });
-    }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    sections.push({
-      highlighted: true,
-      text: highlightText
-    });
-    position = highlightEnd;
-  }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    sections.push({
-      highlighted: false,
-      text: afterText
-    });
-  }
-  return sections;
-};
-
-const getVisible = (setSize, protoVisibleItems, minLineY, focusedIndex) => {
-  const visibleItems = protoVisibleItems.map((visibleItem, i) => {
-    const highlights = visibleItem.matches.slice(1);
-    const sections = getHighlightSections(highlights, visibleItem.label);
-    return {
-      ...visibleItem,
-      highlights: sections,
-      isActive: i === focusedIndex,
-      posInSet: minLineY + i + 1,
-      setSize
-    };
-  });
-  return visibleItems;
-};
-
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
-};
-const getScrollBarY = getScrollBarOffset;
-
-const createQuickPickViewModel = (oldState, newState) => {
-  const {
-    cursorOffset,
-    deltaY,
-    finalDeltaY,
-    focused,
-    focusedIndex,
-    headerHeight,
-    height,
-    icons,
-    itemHeight,
-    items,
-    maxLineY,
-    minimumSliderSize,
-    minLineY,
-    uid,
-    value
-  } = newState;
-  const protoVisibleItems = getVisible$1(items, minLineY, maxLineY, icons);
-  const visibleItems = getVisible(items.length, protoVisibleItems, minLineY, focusedIndex);
-  const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
-  const newFocusedIndex = focusedIndex - minLineY;
-  const itemCount = items.length;
-  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 {
-    cursorOffset,
-    focused,
-    height,
-    newFocusedIndex,
-    oldFocusedIndex,
-    scrollBarHeight,
-    scrollBarTop: roundedScrollBarY,
-    uid,
-    value,
-    visibleItems
-  };
-};
-
 const SetCursorOffset = 'setCursorOffset';
 const SetFocusedIndex = 'setFocusedIndex';
 const SetItemsHeight = 'setItemsHeight';
 
-const renderCursorOffset = newState => {
+const renderCursorOffset = (_oldState, newState) => {
   return ['Viewlet.send', newState.uid, /* method */SetCursorOffset, /* cursorOffset */newState.cursorOffset];
 };
 
 const QuickPickInput = 'QuickPickInput';
 
-const renderFocus = newState => {
+const renderFocus = (_oldState, _newState) => {
   return ['Viewlet.focusElementByName', QuickPickInput];
 };
 
-const renderFocusedIndex = newState => {
-  return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */newState.oldFocusedIndex, /* newFocusedIndex */newState.newFocusedIndex];
+const renderFocusedIndex = (oldState, newState) => {
+  const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
+  const newFocusedIndex = newState.focusedIndex - newState.minLineY;
+  return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */oldFocusedIndex, /* newFocusedIndex */newFocusedIndex];
 };
 
-const renderHeight = newState => {
+const renderHeight = (_oldState, newState) => {
   const {
     height,
     uid
@@ -3324,13 +3218,6 @@ const renderHeight = newState => {
   return ['Viewlet.send', uid, /* method */SetItemsHeight, /* height */height];
 };
 
-const Div = 4;
-const Input = 6;
-const Span = 8;
-const Text = 12;
-const Img = 17;
-const Reference = 100;
-
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -3638,6 +3525,122 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const getVisible$1 = (items, minLineY, maxLineY, icons) => {
+  const range = items.slice(minLineY, maxLineY);
+  const protoVisibleItems = range.map((item, index) => {
+    return {
+      ...item,
+      fileIcon: icons[index]
+    };
+  });
+  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) => {
+  if (highlights.length === 0) {
+    return emptyHighlightSections;
+  }
+  const sections = [];
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      sections.push({
+        highlighted: false,
+        text: beforeText
+      });
+    }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    sections.push({
+      highlighted: true,
+      text: highlightText
+    });
+    position = highlightEnd;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    sections.push({
+      highlighted: false,
+      text: afterText
+    });
+  }
+  return sections;
+};
+
+const getVisible = (setSize, protoVisibleItems, minLineY, focusedIndex) => {
+  const visibleItems = protoVisibleItems.map((visibleItem, i) => {
+    const highlights = visibleItem.matches.slice(1);
+    const sections = getHighlightSections(highlights, visibleItem.label);
+    return {
+      ...visibleItem,
+      highlights: sections,
+      isActive: i === focusedIndex,
+      posInSet: minLineY + i + 1,
+      setSize
+    };
+  });
+  return visibleItems;
+};
+
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
+
+const createQuickPickViewModel = (oldState, newState) => {
+  const {
+    cursorOffset,
+    deltaY,
+    finalDeltaY,
+    focused,
+    focusedIndex,
+    headerHeight,
+    height,
+    icons,
+    itemHeight,
+    items,
+    maxLineY,
+    minimumSliderSize,
+    minLineY,
+    uid,
+    value
+  } = newState;
+  const protoVisibleItems = getVisible$1(items, minLineY, maxLineY, icons);
+  const visibleItems = getVisible(items.length, protoVisibleItems, minLineY, focusedIndex);
+  const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
+  const newFocusedIndex = focusedIndex - minLineY;
+  const itemCount = items.length;
+  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 {
+    cursorOffset,
+    focused,
+    height,
+    newFocusedIndex,
+    oldFocusedIndex,
+    scrollBarHeight,
+    scrollBarTop: roundedScrollBarY,
+    uid,
+    value,
+    visibleItems
+  };
+};
+
 const ComboBox = 'combobox';
 const ListBox = 'listbox';
 const None = 'none';
@@ -3858,24 +3861,31 @@ const getQuickPickVirtualDom = (visibleItems, scrollBarHeight, scrollBarTop) =>
   }, ...getQuickPickItemsVirtualDom(visibleItems), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarTop)];
 };
 
-const renderItems = newState => {
+const renderItemsDom = state => {
+  const viewModel = createQuickPickViewModel(state, state);
   const {
     scrollBarHeight,
     scrollBarTop,
     visibleItems
-  } = newState;
-  const dom = getQuickPickVirtualDom(visibleItems, scrollBarHeight, scrollBarTop);
+  } = viewModel;
+  return getQuickPickVirtualDom(visibleItems, scrollBarHeight, scrollBarTop);
+};
+const renderItems = (_oldState, newState) => {
+  const dom = renderItemsDom(newState);
   return [SetDom2, dom];
 };
 
-const renderIncremental = newState => {
-  const oldDom = renderItems(newState)[1]; // TODO
-  const newDom = renderItems(newState)[1];
+const renderIncremental = (oldState, newState) => {
+  const oldDom = renderItemsDom(oldState);
+  const newDom = renderItemsDom(newState);
+  if (oldState.initial) {
+    return [SetDom2, newDom];
+  }
   const patches = diffTree(oldDom, newDom);
   return [SetPatches, newState.uid, patches];
 };
 
-const renderValue = newState => {
+const renderValue = (_oldState, newState) => {
   return ['Viewlet.setValueByName', QuickPickInput, /* value */newState.value];
 };
 
@@ -3902,7 +3912,6 @@ const getRenderer = diffType => {
 
 const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
-  const viewModel = createQuickPickViewModel(oldState, newState);
   for (const item of diffResult) {
     if (item === Height) {
       continue;
@@ -3911,7 +3920,7 @@ const applyRender = (oldState, newState, diffResult) => {
       continue;
     }
     const fn = getRenderer(item);
-    commands.push(fn(viewModel));
+    commands.push(fn(oldState, newState));
   }
   return commands;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/quick-pick-worker",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/quick-pick-worker.git"
@@ -8,8 +8,5 @@
   "license": "MIT",
   "author": "Lvce Editor",
   "type": "module",
-  "main": "dist/quickPickWorkerMain.js",
-  "dependencies": {
-    "@lvce-editor/constants": "^4.0.0"
-  }
+  "main": "dist/quickPickWorkerMain.js"
 }