@lvce-editor/extension-search-view 3.8.0 → 3.9.0

package/dist/extensionSearchViewWorkerMain.js

@@ -1008,6 +1008,10 @@ const viewsAndMoreActions = () => {
   return i18nString(ViewsAndMoreActions);
 };
 
+const None$2 = 0;
+const Input = 1;
+const List$1 = 2;
+
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
@@ -1039,6 +1043,12 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
+const getScrollBarOffset$1 = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY$1 = getScrollBarOffset$1;
+
 const Installed = '@installed';
 const Enabled = '@enabled';
 const Disabled = '@disabled';
@@ -1159,7 +1169,8 @@ const handleInput = async (state, value) => {
       minimumSliderSize,
       height,
       platform,
-      assetDir
+      assetDir,
+      headerHeight
     } = state;
     // TODO cancel ongoing requests
     // TODO handle errors
@@ -1167,16 +1178,17 @@ const handleInput = async (state, value) => {
     if (items.length === 0) {
       return {
         ...state,
-        items,
-        minLineY: 0,
-        deltaY: 0,
         allExtensions,
-        maxLineY: 0,
-        scrollBarHeight: 0,
+        deltaY: 0,
         finalDeltaY: 0,
+        focus: Input,
+        items,
+        maxLineY: 0,
         message: noExtensionsFound(),
-        searchValue: value,
-        placeholder: searchExtensionsInMarketPlace()
+        minLineY: 0,
+        placeholder: searchExtensionsInMarketPlace(),
+        scrollBarHeight: 0,
+        searchValue: value
       };
     }
     const total = items.length;
@@ -1186,18 +1198,20 @@ const handleInput = async (state, value) => {
     const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
     const maxLineY = Math.min(numberOfVisible, total);
     const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
+    const scrollBarY = getScrollBarY$1(0, finalDeltaY, height - headerHeight, scrollBarHeight);
     return {
       ...state,
-      items,
-      minLineY: 0,
-      deltaY: 0,
       allExtensions,
-      maxLineY,
-      scrollBarHeight,
+      deltaY: 0,
       finalDeltaY,
+      items,
+      maxLineY,
       message: '',
-      searchValue: value,
-      placeholder: searchExtensionsInMarketPlace()
+      minLineY: 0,
+      placeholder: searchExtensionsInMarketPlace(),
+      scrollBarHeight,
+      scrollBarY,
+      searchValue: value
     };
 
     // TODO handle out of order responses (a bit complicated)
@@ -1234,10 +1248,14 @@ const create$1 = (id, uri, x, y, width, height, platform, assetDir) => {
     assetDir,
     deltaY: 0,
     finalDeltaY: 0,
+    focus: 0,
+    focused: false,
     focusedIndex: 0,
     handleOffset: 0,
     headerHeight: 41,
     height,
+    inputActions: [],
+    inputSource: 0,
     itemHeight: 72,
     items: [],
     maxLineY: 0,
@@ -1249,44 +1267,33 @@ const create$1 = (id, uri, x, y, width, height, platform, assetDir) => {
     platform,
     scrollBarActive: false,
     scrollBarHeight: 0,
+    scrollBarY: 0,
     searchValue: '',
     size: 0,
+    uid: id,
     width,
     x,
-    y,
-    focused: false,
-    inputSource: 0
+    y
   };
   set$1(id, state, state);
 };
 
-const RenderHeader = 1;
-const RenderItems = 4;
-const RenderScrollBar = 5;
-const RenderMessage = 6;
-const RenderSearchValue = 7;
-
-const diffType$5 = RenderItems;
 const isEqual$5 = (oldState, newState) => {
   return true;
 };
 
-const diffType$4 = RenderHeader;
 const isEqual$4 = (oldState, newState) => {
   return oldState.placeholder === newState.placeholder;
 };
 
-const diffType$3 = RenderItems;
 const isEqual$3 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
 };
 
-const diffType$2 = RenderMessage;
 const isEqual$2 = (oldState, newState) => {
   return oldState.message === newState.message;
 };
 
-const diffType$1 = RenderScrollBar;
 const isEqual$1 = (oldState, newState) => {
   return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length && oldState.scrollBarActive === newState.scrollBarActive;
 };
@@ -1294,13 +1301,19 @@ const isEqual$1 = (oldState, newState) => {
 const User = 1;
 const Script = 2;
 
-const diffType = RenderSearchValue;
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
+const RenderHeader = 1;
+const RenderFocus = 2;
+const RenderItems = 4;
+const RenderScrollBar = 5;
+const RenderMessage = 6;
+const RenderSearchValue = 7;
+
 const modules = [isEqual$1, isEqual$2, isEqual$4, isEqual$3, isEqual$5, isEqual];
-const numbers = [diffType$1, diffType$2, diffType$4, diffType$3, diffType$5, diffType];
+const numbers = [RenderScrollBar, RenderMessage, RenderHeader, RenderItems, RenderFocus, RenderSearchValue];
 
 const diff2 = uid => {
   const {
@@ -1327,32 +1340,53 @@ const dispose = uid => {
 const getNumberOfVisibleItems = (listHeight, itemHeight) => {
   return Math.ceil(listHeight / itemHeight) + 1;
 };
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
 const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  const {
+    finalDeltaY,
+    height,
+    headerHeight,
+    scrollBarHeight
+  } = state;
   const newMaxLineY = Math.min(index + 1, itemsLength);
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
   const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
   const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
+  const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     focusedIndex: index,
     minLineY: newMinLineY,
     maxLineY: newMaxLineY,
     focused: true,
-    deltaY: newDeltaY
+    deltaY: newDeltaY,
+    scrollBarY
   };
 };
 const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const {
+    finalDeltaY,
+    height,
+    headerHeight,
+    scrollBarHeight
+  } = state;
   const newMinLineY = index;
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
   const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
   const newDeltaY = newMinLineY * itemHeight;
+  const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     focusedIndex: index,
     minLineY: newMinLineY,
     maxLineY: newMaxLineY,
     focused: true,
-    deltaY: newDeltaY
+    deltaY: newDeltaY,
+    scrollBarY
   };
 };
 const focusIndex = (state, index) => {
@@ -1487,10 +1521,16 @@ const getActions = () => {
   }];
 };
 
-const commandIds = ['clearSearchResults', 'closeSuggest', 'focusFirst', 'focusLast', 'focusNext', 'focusNextPage', 'focusPrevious', 'focusPreviousPage', 'handleBlur', 'handleClick', 'handleClickFilter', 'handleContextMenu', 'handleDisable', 'handleFocus', 'handleInput', 'handleInstall', 'handleScrollBarCaptureLost', 'handleScrollBarClick', 'handleScrollBarMove', 'handleScrollBarThumbPointerMove', 'handleUninstall', 'handleWheel', 'openSuggest', 'render', 'saveState', 'scrollDown', 'selectIndex', 'setDeltaY', 'toggleSuggest'];
+const commandMapRef = {};
 
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
 const getCommandIds = () => {
-  return commandIds;
+  const keys = Object.keys(commandMapRef);
+  const ids = keys.map(toCommandId);
+  return ids;
 };
 
 const Enter = 3;
@@ -1582,7 +1622,14 @@ const getMenuEntries = () => {
 };
 
 const handleBlur = state => {
-  return state;
+  return {
+    ...state,
+    focus: None$2
+  };
+};
+
+const getExtensionDetailUri = extensionId => {
+  return `extension-detail://${extensionId}`;
 };
 
 const rpcs = Object.create(null);
@@ -1667,13 +1714,19 @@ const handleClick = async (state, index) => {
   } = state;
   const actualIndex = index + minLineY;
   const extension = items[actualIndex];
-  const uri = `extension-detail://${extension.id}`;
+  const uri = getExtensionDetailUri(extension.id);
   await openUri(uri);
-  return focusIndex(state, actualIndex);
+  const partialNewState = focusIndex(state, actualIndex);
+  const newState = {
+    ...partialNewState,
+    focus: List$1
+  };
+  return newState;
 };
 
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
-  const relativeY = eventY - y + deltaY;
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) => {
+  const relativeDeltaY = deltaY % itemHeight;
+  const relativeY = eventY - y - headerHeight + relativeDeltaY;
   const index = Math.floor(relativeY / itemHeight);
   return index;
 };
@@ -1690,9 +1743,10 @@ const handleClickAt = async (state, eventX, eventY) => {
     x,
     y,
     itemHeight,
-    deltaY
+    deltaY,
+    headerHeight
   } = state;
-  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight);
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
   return selectIndex(state, index);
 };
 
@@ -1779,12 +1833,6 @@ const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   };
 };
 
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
-};
-const getScrollBarY = getScrollBarOffset;
-
 const clamp = (num, min, max) => {
   number(num);
   number(min);
@@ -1800,7 +1848,9 @@ const setDeltaY = (state, value) => {
     finalDeltaY,
     deltaY,
     height,
-    headerHeight
+    headerHeight,
+    items,
+    minimumSliderSize
   } = state;
   const listHeight = height - headerHeight;
   const newDeltaY = clamp(value, 0, finalDeltaY);
@@ -1810,11 +1860,16 @@ const setDeltaY = (state, value) => {
   // 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$1(listHeight, itemHeight);
+  const total = items.length;
+  const contentHeight = total * itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
+  const scrollBarY = getScrollBarY$1(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     deltaY: newDeltaY,
     minLineY,
-    maxLineY
+    maxLineY,
+    scrollBarY
   };
 };
 
@@ -1829,7 +1884,7 @@ const handleScrollBarClick = (state, eventY) => {
   } = state;
   const contentHeight = height - headerHeight;
   const relativeY = eventY - y - headerHeight;
-  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const currentScrollBarY = getScrollBarY$1(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
   const diff = relativeY - currentScrollBarY;
   if (diff >= 0 && diff < scrollBarHeight) {
     return {
@@ -1901,6 +1956,36 @@ const getAllExtensions = platform => {
   return getAllExtensions$1(platform);
 };
 
+const HandleClearSearchResults = 'handleClearSearchResults';
+const HandleClickFilter = 'handleClickFilter';
+const HandleContextMenu = 'handleContextMenu';
+const HandleExtensionsInput = 'handleExtensionsInput';
+const HandleFocus = 'handleFocus';
+const HandlePointerDown = 'handlePointerDown';
+const HandleScrollBarMove = 'handleScrollBarMove';
+const HandleScrollBarPointerCaptureLost = 'handleScrollBarPointerCaptureLost';
+const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
+const HandleTouchStart = 'handleTouchStart';
+const HandleWheel = 'handleWheel';
+
+const getInputActions = newState => {
+  const clearEnabled = newState.searchValue.length > 0;
+  const actions = [{
+    onClick: HandleClearSearchResults,
+    icon: `MaskIcon${ClearAll}`,
+    title: clearExtensionSearchResults(),
+    type: Button$1,
+    enabled: clearEnabled
+  }, {
+    icon: `MaskIcon${Filter}`,
+    title: filter(),
+    type: Button$1,
+    onClick: HandleClickFilter,
+    enabled: true
+  }];
+  return actions;
+};
+
 const Small = 1;
 const Normal = 2;
 const Large = 3;
@@ -2018,37 +2103,46 @@ const getSavedValue = savedState => {
   }
   return '';
 };
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number' && !Number.isNaN(savedState.deltaY)) {
+    return savedState.deltaY;
+  }
+  return 0;
+};
 
 const restoreState = savedState => {
   const searchValue = getSavedValue(savedState);
+  const savedDeltaY = getSavedDeltaY(savedState);
   return {
-    searchValue
+    searchValue,
+    deltaY: savedDeltaY
   };
 };
 
-const loadContent = async (uid, savedState) => {
-  const {
-    newState
-  } = get$1(uid);
+const loadContent = async (state, savedState) => {
   const {
     width,
     platform,
     assetDir
-  } = newState;
+  } = state;
   const {
-    searchValue
+    searchValue,
+    deltaY
   } = restoreState(savedState);
   // TODO just get local extensions on demand (not when query string is already different)
   const allExtensions = await getAllExtensions(platform);
   const size = getViewletSize(width);
   const normalized = normalizeExtension(allExtensions, platform, assetDir);
+  const inputActions = getInputActions(state);
   const updatedState = await handleInput({
-    ...newState,
+    ...state,
     allExtensions: normalized,
     size,
-    inputSource: Script
+    inputSource: Script,
+    inputActions,
+    deltaY
   }, searchValue);
-  set$1(uid, newState, updatedState);
+  return updatedState;
 };
 
 const openSuggest = state => {
@@ -2078,14 +2172,6 @@ const SearchFieldButtons = 'SearchFieldButtons';
 const SearchFieldContainer = 'SearchFieldContainer';
 const SearchFieldDisabled = 'SearchFieldDisabled';
 
-const HandleContextMenu = 'handleContextMenu';
-const HandlePointerDown = 'handlePointerDown';
-const HandleTouchStart = 'handleTouchStart';
-const HandleWheel = 'handleWheel';
-const HandleExtensionsInput = 'handleExtensionsInput';
-const HandleClearSearchResults = 'handleClearSearchResults';
-const HandleClickFilter = 'handleClickFilter';
-
 const List = 'list';
 const ListItem = 'listitem';
 const None = 'none';
@@ -2179,24 +2265,6 @@ const getExtensionHeaderVirtualDom = (placeholder, actions) => {
   return [parentNode, ...getSearchFieldVirtualDom('extensions', placeholder, HandleExtensionsInput, actions, [])];
 };
 
-const getInputActions = newState => {
-  const clearEnabled = newState.searchValue.length > 0;
-  const actions = [{
-    onClick: HandleClearSearchResults,
-    icon: `MaskIcon${ClearAll}`,
-    title: clearExtensionSearchResults(),
-    type: Button$1,
-    enabled: clearEnabled
-  }, {
-    icon: `MaskIcon${Filter}`,
-    title: filter(),
-    type: Button$1,
-    onClick: HandleClickFilter,
-    enabled: true
-  }];
-  return actions;
-};
-
 const renderHeader = newState => {
   const actions = getInputActions(newState);
   const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
@@ -2367,7 +2435,7 @@ const renderScrollBar = newState => {
   const total = newState.items.length;
   const contentHeight = total * newState.itemHeight;
   const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, newState.minimumSliderSize);
-  const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
+  const scrollBarY = getScrollBarY$1(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
   const roundedScrollBarY = Math.round(scrollBarY);
   const heightString = px(scrollBarHeight);
   const translateString = position(0, roundedScrollBarY);
@@ -2478,19 +2546,37 @@ const renderEventListeners = () => {
     name: HandleContextMenu,
     params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
     preventDefault: true
+  }, {
+    name: HandlePointerDown,
+    params: ['handleClickAt', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarClick', 'event.clientY'],
+    preventDefault: true,
+    trackPointerEvents: [HandleScrollBarMove, HandleScrollBarPointerCaptureLost]
+  }, {
+    name: HandleScrollBarMove,
+    params: ['handleScrollBarMove', 'event.clientY']
+  }, {
+    name: HandleScrollBarPointerCaptureLost,
+    params: ['handleScrollBarCaptureLost']
   }, {
     name: HandleWheel,
     params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
     passive: true
   }, {
     name: HandleExtensionsInput,
-    params: ['handleExtensionsInput', 'event.target.value', User]
+    params: ['handleInput', 'event.target.value', User]
   }, {
     name: HandleClearSearchResults,
     params: ['clearSearchResults']
   }, {
     name: HandleClickFilter,
     params: ['handleClickFilter']
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
   }];
 };
 
@@ -2499,10 +2585,12 @@ const saveState = uid => {
     newState
   } = get$1(uid);
   const {
-    searchValue
+    searchValue,
+    deltaY
   } = newState;
   return {
-    searchValue
+    searchValue,
+    deltaY
   };
 };
 
@@ -2553,7 +2641,7 @@ const commandMap = {
   'SearchExtensions.handleScrollBarThumbPointerMove': wrapCommand(handleScrollBarMove),
   'SearchExtensions.handleUninstall': wrapCommand(handleUninstall),
   'SearchExtensions.handleWheel': wrapCommand(handleWheel),
-  'SearchExtensions.loadContent': loadContent,
+  'SearchExtensions.loadContent': wrapCommand(loadContent),
   'SearchExtensions.openSuggest': wrapCommand(openSuggest),
   'SearchExtensions.render3': render3,
   'SearchExtensions.renderActions': renderActions,
@@ -2569,8 +2657,9 @@ const commandMap = {
 };
 
 const listen = async () => {
+  Object.assign(commandMapRef, commandMap);
   const rpc = await WebWorkerRpcClient.create({
-    commandMap: commandMap
+    commandMap: commandMapRef
   });
   set(rpc);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Extension Search View Worker",
   "license": "MIT",
   "author": "Lvce Editor",