@lvce-editor/explorer-view 2.28.0 → 2.30.0

package/dist/explorerViewWorkerMain.js

@@ -985,8 +985,8 @@ const getMissingIconRequests = (dirents, fileIconCache) => {
   return missingRequests;
 };
 
-const getPath = dirent => {
-  return dirent.path;
+const getPath = item => {
+  return item.path;
 };
 
 const DELTA_EDITING = 100;
@@ -1474,6 +1474,13 @@ const cancelEdit = state => {
   };
 };
 
+const cancelTypeAhead = state => {
+  return {
+    ...state,
+    focusWord: ''
+  };
+};
+
 const isTopLevel$1 = dirent => {
   return dirent.depth === 1;
 };
@@ -1580,6 +1587,20 @@ const create$1 = () => {
         };
       };
       return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
     }
   };
 };
@@ -1630,7 +1651,9 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     editingSelection: {
       start: 0,
       end: 0
-    }
+    },
+    focusWord: '',
+    focusWordTimeout: 800
   };
   set(uid, state, state);
 };
@@ -1671,7 +1694,9 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     editingSelection: {
       start: 0,
       end: 0
-    }
+    },
+    focusWord: '',
+    focusWordTimeout: 800
   };
   set(state.uid, state, state);
   return state;
@@ -1999,7 +2024,7 @@ const focusIndex = (state, index) => {
   } = state;
   const newItems = items.map((item, i) => ({
     ...item,
-    selected: i === index ? true : false
+    selected: i === index ? false : false
   }));
   if (index < minLineY) {
     if (index < 0) {
@@ -2112,7 +2137,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'updateEditingValue', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'cancelTypeAhead', 'updateEditingValue', 'handleKeyDown', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2943,23 +2968,41 @@ const handleDragOver = (state, x, y) => {
   };
 };
 
-const getTopLevelDirents = (root, pathSeparator, excluded) => {
-  if (!root) {
-    return [];
-  }
-  return getChildDirents(pathSeparator, {
-    depth: 0,
-    path: root,
-    type: Directory
-  }, excluded);
+const isExpanded = item => {
+  return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
 };
 
-const mergeDirents$2 = (oldDirents, newDirents) => {
-  const merged = [];
-  for (const newDirent of newDirents) {
-    merged.push(newDirent);
+const getExpandedDirents = items => {
+  return items.filter(isExpanded);
+};
+
+const getPaths = items => {
+  return items.map(getPath);
+};
+
+const refreshChildDirent = async (folder, dirent, pathSeparator, expandedFolders) => {
+  const path = folder.path.endsWith(pathSeparator) ? `${folder.path}${dirent.name}` : `${folder.path}${pathSeparator}${dirent.name}`;
+  const isExpandedFolder = expandedFolders.includes(path);
+  const type = dirent.type === 'directory' ? isExpandedFolder ? DirectoryExpanded : Directory : File;
+  const item = {
+    name: dirent.name,
+    type,
+    path,
+    depth: folder.depth + 1,
+    selected: false
+  };
+  if (isExpandedFolder) {
+    const nestedItems = await refreshChildDirents(item, pathSeparator, expandedFolders);
+    return [item, ...nestedItems];
   }
-  return merged;
+  return [item];
+};
+const refreshChildDirents = async (folder, pathSeparator, expandedFolders) => {
+  const childDirents = await readDirWithFileTypes(folder.path);
+  const childItems = await Promise.all(childDirents.map(async dirent => {
+    return refreshChildDirent(folder, dirent, pathSeparator, expandedFolders);
+  }));
+  return childItems.flat();
 };
 
 // TODO add lots of tests for this
@@ -2970,24 +3013,73 @@ const refresh = async state => {
     minLineY,
     height,
     itemHeight,
-    fileIconCache
+    fileIconCache,
+    items,
+    focusedIndex
   } = state;
-  const topLevelDirents = await getTopLevelDirents(root, pathSeparator, []);
-  const newDirents = mergeDirents$2(state.items, topLevelDirents);
+
+  // Get all expanded folders
+  const expandedDirents = getExpandedDirents(items);
+  const expandedFolders = getPaths(expandedDirents);
+
+  // Get top level dirents
+  const topLevelDirents = await readDirWithFileTypes(root);
+  const newDirents = topLevelDirents.map(dirent => ({
+    name: dirent.name,
+    type: dirent.type === 'directory' ? Directory : File,
+    path: root.endsWith(pathSeparator) ? `${root}${dirent.name}` : `${root}${pathSeparator}${dirent.name}`,
+    depth: 0,
+    selected: false
+  }));
+
+  // Process expanded folders in parallel
+  const expandedFolderResults = await Promise.all(expandedFolders.map(async folderPath => {
+    const folderIndex = newDirents.findIndex(item => item.path === folderPath);
+    if (folderIndex !== -1) {
+      const folder = newDirents[folderIndex];
+      if (folder.type === Directory) {
+        const childItems = await refreshChildDirents(folder, pathSeparator, expandedFolders);
+        // @ts-ignore
+        folder.type = DirectoryExpanded;
+        return {
+          folderIndex,
+          childItems
+        };
+      }
+    }
+    return null;
+  }));
+
+  // Insert child items in the correct order
+  let offset = 0;
+  for (const result of expandedFolderResults) {
+    if (result) {
+      const {
+        folderIndex,
+        childItems
+      } = result;
+      newDirents.splice(folderIndex + 1 + offset, 0, ...childItems);
+      offset += childItems.length;
+    }
+  }
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
   const visible = newDirents.slice(minLineY, maxLineY);
   const {
     icons,
     newFileIconCache
   } = await getFileIcons(visible, fileIconCache);
-  const state3 = {
+  let newFocusedIndex = focusedIndex;
+  if (focusedIndex >= newDirents.length) {
+    newFocusedIndex = newDirents.length - 1;
+  }
+  return {
     ...state,
     items: newDirents,
     fileIconCache: newFileIconCache,
     icons,
-    maxLineY
+    maxLineY,
+    focusedIndex: newFocusedIndex
   };
-  return state3;
 };
 
 const applyOperation = operation => {
@@ -3084,7 +3176,7 @@ const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) =
   return true;
 };
 
-const mergeDirents$1 = (oldDirents, newDirents) => {
+const mergeDirents$2 = (oldDirents, newDirents) => {
   return newDirents;
 };
 const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
@@ -3092,7 +3184,7 @@ const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
     path: root,
     depth: 0
   });
-  const mergedDirents = mergeDirents$1(dirents, childDirents);
+  const mergedDirents = mergeDirents$2(dirents, childDirents);
   return mergedDirents;
 };
 const handleDrop$2 = async (state, fileHandles, files) => {
@@ -3141,7 +3233,7 @@ const copyFilesElectron = async (root, pathSeparator, fileHandles, files, paths)
   await applyFileOperations(operations);
 };
 
-const mergeDirents = (oldDirents, newDirents) => {
+const mergeDirents$1 = (oldDirents, newDirents) => {
   return newDirents;
 };
 const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
@@ -3149,7 +3241,7 @@ const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
     path: root,
     depth: 0
   });
-  const mergedDirents = mergeDirents(dirents, childDirents);
+  const mergedDirents = mergeDirents$1(dirents, childDirents);
   return mergedDirents;
 };
 const handleDrop$1 = async (state, fileHandles, files, paths) => {
@@ -3335,6 +3427,92 @@ const handleInputClick = state => {
   return state;
 };
 
+const filterByFocusWord = (items, focusedIndex, focusWord) => {
+  if (items.length === 0) {
+    return -1;
+  }
+  const matches = [];
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].toLowerCase().includes(focusWord)) {
+      matches.push(i);
+    }
+  }
+  if (matches.length === 0) {
+    return -1;
+  }
+
+  // Find the next match after the current focus
+  let nextIndex = matches.findIndex(index => index > focusedIndex);
+  if (nextIndex === -1) {
+    // If no match found after current focus, wrap around to the first match
+    nextIndex = 0;
+  }
+  return matches[nextIndex];
+};
+
+const RE_ASCII = /^[a-z]$/;
+const isAscii = key => {
+  return RE_ASCII.test(key);
+};
+
+let timeout;
+const handleKeyDown = (state, key) => {
+  const {
+    focusWord,
+    items,
+    focusedIndex,
+    focusWordTimeout
+  } = state;
+  if (focusWord && key === '') {
+    return cancelTypeAhead(state);
+  }
+  if (!isAscii(key)) {
+    return state;
+  }
+  const newFocusWord = focusWord + key.toLowerCase();
+  const itemNames = items.map(item => item.name);
+  const matchingIndex = filterByFocusWord(itemNames, focusedIndex, newFocusWord);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+
+  // @ts-ignore
+  // eslint-disable-next-line  @typescript-eslint/no-misused-promises
+  timeout = setTimeout(async () => {
+    await invoke('Explorer.cancelTypeAhead');
+  }, focusWordTimeout);
+  if (matchingIndex === -1) {
+    return {
+      ...state,
+      focusWord: newFocusWord
+    };
+  }
+  return {
+    ...state,
+    focusWord: newFocusWord,
+    focusedIndex: matchingIndex
+  };
+};
+
+const getTopLevelDirents = (root, pathSeparator, excluded) => {
+  if (!root) {
+    return [];
+  }
+  return getChildDirents(pathSeparator, {
+    depth: 0,
+    path: root,
+    type: Directory
+  }, excluded);
+};
+
+const mergeDirents = (oldDirents, newDirents) => {
+  const merged = [];
+  for (const newDirent of newDirents) {
+    merged.push(newDirent);
+  }
+  return merged;
+};
+
 // TODO add lots of tests for this
 const updateRoot = async state1 => {
   // @ts-ignore
@@ -3349,7 +3527,7 @@ const updateRoot = async state1 => {
   // if (state2.disposed || state2.root !== state1.root) {
   //   return state2
   // }
-  const newDirents = mergeDirents$2(state1.items, topLevelDirents);
+  const newDirents = mergeDirents(state1.items, topLevelDirents);
   const state3 = {
     ...state1,
     items: newDirents
@@ -3837,70 +4015,35 @@ const openContainingFolder = async state => {
   return state;
 };
 
-// TODO support multiselection and removing multiple dirents
-const removeDirent = async state => {
-  if (state.focusedIndex < 0) {
-    return state;
-  }
-  const dirent = getFocusedDirent$1(state);
-  if (!dirent) {
-    return state;
-  }
-  const absolutePath = dirent.path;
-  try {
-    // TODO handle error
-    await remove(absolutePath);
-  } catch {
-    // TODO vscode shows error as alert (no stacktrace) and retry button
-    // maybe should show alert as well, but where to put stacktrace?
-    // on web should probably show notification (dialog)
-    // ErrorHandling.handleError(error)
-    // await ErrorHandling.showErrorDialog(error)
-    return state;
-  }
-  // TODO avoid state mutation
-  // @ts-ignore
-  const newVersion = ++state.version;
-  // TODO race condition
-  // const newState = await loadContent(state:any)
-  // @ts-ignore
-  if (state.version !== newVersion || state.disposed) {
-    return state;
-  }
-  // TODO is it possible to make this more functional instead of mutating state?
-  // maybe every function returns a new state?
-  const index = state.items.indexOf(dirent);
-  let deleteEnd = index + 1;
-  for (; deleteEnd < state.items.length; deleteEnd++) {
-    if (state.items[deleteEnd].depth <= dirent.depth) {
-      break;
+const getSelectedItems = (items, focusedIndex) => {
+  const dirent = items[focusedIndex];
+  const selectedItems = items.filter(item => item.selected || item === dirent);
+  return selectedItems;
+};
+
+const removePaths = async paths => {
+  for (const item of paths) {
+    try {
+      await remove(item);
+    } catch {
+      // ignore
     }
   }
-  const deleteCount = deleteEnd - index;
-  const newDirents = [...state.items];
-  newDirents.splice(index, deleteCount);
-  let indexToFocus = -1;
-  if (newDirents.length === 0) {
-    indexToFocus = -1;
-  } else if (index < state.focusedIndex) {
-    indexToFocus = state.focusedIndex - 1;
-  } else if (index === state.focusedIndex) {
-    indexToFocus = Math.max(state.focusedIndex - 1, 0);
-  } else {
-    indexToFocus = Math.max(state.focusedIndex - 1, 0);
-  }
-  const visible = newDirents.slice(state.minLineY, state.maxLineY);
+};
+
+const removeDirent = async state => {
   const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
-  return {
-    ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    focusedIndex: indexToFocus
-  };
+    items,
+    focusedIndex
+  } = state;
+  const selectedItems = getSelectedItems(items, focusedIndex);
+  if (selectedItems.length === 0) {
+    return state;
+  }
+  const toRemove = getPaths(selectedItems);
+  await removePaths(toRemove);
+  const newState = await refresh(state);
+  return newState;
 };
 
 const getNewDirentsForRename = (items, focusedIndex) => {
@@ -4030,6 +4173,7 @@ const HandleInputBlur = 'handleInputBlur';
 const HandleInputClick = 'handleInputClick';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
+const HandleListKeyDown = 'handleListKeyDown';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
 
@@ -4214,7 +4358,8 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
     onDrop: HandleDrop,
     onFocus: HandleListFocus,
     onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel
+    onWheel: HandleWheel,
+    onKeyDown: HandleListKeyDown
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
@@ -4480,6 +4625,10 @@ const renderEventListeners = () => {
   return [{
     name: HandleInputBlur,
     params: ['handleInputBlur']
+  }, {
+    name: HandleListKeyDown,
+    params: ['handleKeyDown', 'event.key'],
+    preventDefault: true
   }, {
     name: HandleListFocus,
     params: ['handleFocus', 'event.isTrusted', 'event.target.className']
@@ -4880,6 +5029,8 @@ const updateEditingValue = async (state, value, inputSource = User) => {
 
 const commandMap = {
   'Explorer.acceptEdit': wrapCommand(acceptEdit),
+  'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
+  'Explorer.cancelTypeAhead': wrapCommand(cancelTypeAhead),
   'Explorer.cancelEdit': wrapCommand(cancelEdit),
   'Explorer.collapseAll': wrapCommand(collapseAll),
   'Explorer.copyPath': wrapCommand(copyPath),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "2.28.0",
+  "version": "2.30.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",