@lvce-editor/explorer-view 2.33.0 → 2.35.0

package/dist/explorerViewWorkerMain.js

@@ -1378,6 +1378,12 @@ const join = (pathSeparator, ...parts) => {
 const getBaseName = (pathSeparator, path) => {
   return path.slice(path.lastIndexOf(pathSeparator) + 1);
 };
+const join2 = (path, childPath) => {
+  if (path.endsWith('/')) {
+    return `${path}${childPath}`;
+  }
+  return `${path}/${childPath}`;
+};
 
 const acceptRename = async state => {
   const {
@@ -1391,7 +1397,7 @@ const acceptRename = async state => {
     // TODO this does not work with rename of nested file
     const oldAbsolutePath = renamedDirent.path;
     const oldParentPath = dirname(pathSeparator, oldAbsolutePath);
-    const newAbsolutePath = [oldParentPath, editingValue].join(pathSeparator);
+    const newAbsolutePath = join2(oldParentPath, editingValue);
     await rename(oldAbsolutePath, newAbsolutePath);
   } catch (error) {
     console.error(new VError(error, `Failed to rename file`));
@@ -1401,9 +1407,6 @@ const acceptRename = async state => {
     newDirents,
     focusedIndex
   } = computeExplorerRenamedDirent(items, editingIndex, editingValue);
-  //  TODO move focused index
-  // @ts-ignore
-  state.items = newDirents;
   return {
     ...state,
     editingIndex: -1,
@@ -1412,7 +1415,8 @@ const acceptRename = async state => {
     editingIcon: '',
     focusedIndex,
     focused: true,
-    focus: List
+    focus: List,
+    items: newDirents
   };
 };
 
@@ -1432,6 +1436,28 @@ const acceptEdit = async state => {
   }
 };
 
+const isNormalItem = item => {
+  return item.type !== EditingFile && item.type !== EditingFolder;
+};
+
+const cancelEditCreate = (state, keepFocus) => {
+  const {
+    editingIndex,
+    items
+  } = state;
+  const filteredItems = items.filter(isNormalItem);
+  return {
+    ...state,
+    items: filteredItems,
+    focusedIndex: editingIndex,
+    focused: keepFocus,
+    editingIndex: -1,
+    editingValue: '',
+    editingType: None$5,
+    focus: List
+  };
+};
+
 const normalizeDirentType = direntType => {
   if (direntType > DELTA_EDITING) {
     return direntType - DELTA_EDITING;
@@ -1449,33 +1475,17 @@ const getNewDirentsForCancelRename = (items, editingIndex) => {
   return newItems;
 };
 
-const isNormalItem = item => {
-  return item.type !== EditingFile && item.type !== EditingFolder;
-};
-const cancelEdit = state => {
+const cancelEditRename = (state, keepFocus) => {
   const {
     editingIndex,
-    editingType
+    items
   } = state;
-  if (editingType === Rename$1) {
-    const newItems = getNewDirentsForCancelRename(state.items, editingIndex);
-    return {
-      ...state,
-      items: newItems,
-      focusedIndex: editingIndex,
-      focused: true,
-      editingIndex: -1,
-      editingValue: '',
-      editingType: None$5,
-      focus: List
-    };
-  }
-  const filteredItems = state.items.filter(isNormalItem);
+  const newItems = getNewDirentsForCancelRename(items, editingIndex);
   return {
     ...state,
-    items: filteredItems,
+    items: newItems,
     focusedIndex: editingIndex,
-    focused: true,
+    focused: keepFocus,
     editingIndex: -1,
     editingValue: '',
     editingType: None$5,
@@ -1483,6 +1493,20 @@ const cancelEdit = state => {
   };
 };
 
+const cancelEditInternal = (state, keepFocus) => {
+  const {
+    editingType
+  } = state;
+  if (editingType === Rename$1) {
+    return cancelEditRename(state, keepFocus);
+  }
+  return cancelEditCreate(state, keepFocus);
+};
+
+const cancelEdit = state => {
+  return cancelEditInternal(state, true);
+};
+
 const cancelTypeAhead = state => {
   return {
     ...state,
@@ -2033,6 +2057,16 @@ const expandRecursively = async state => {
   };
 };
 
+const focus = state => {
+  if (state.focus) {
+    return state;
+  }
+  return {
+    ...state,
+    focus: List
+  };
+};
+
 const focusIndex = (state, index) => {
   const {
     minLineY,
@@ -2154,7 +2188,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', 'cancelTypeAhead', 'updateEditingValue', 'handleKeyDown', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'handleInputKeyDown', '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;
@@ -2461,7 +2495,7 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     const newMaxLineY = Math.min(maxLineY, newTotal);
     const newMinLineY = newMaxLineY - visibleItems;
     const deltaY = newMinLineY * itemHeight;
-    const parts = newDirents.slice(minLineY, maxLineY);
+    const parts = newDirents.slice(newMinLineY, newMaxLineY);
     const {
       icons,
       newFileIconCache
@@ -2629,15 +2663,9 @@ const handleArrowRight = async state => {
   }
 };
 
-const handleBlur = state => {
+const handleBlur = async state => {
   // TODO when blur event occurs because of context menu, focused index should stay the same
   // but focus outline should be removed
-  const {
-    editingType
-  } = state;
-  if (editingType !== None$5) {
-    return state;
-  }
   return {
     ...state,
     focused: false
@@ -2993,36 +3021,63 @@ const getExpandedDirents = items => {
   return items.filter(isExpanded);
 };
 
-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];
+const getPathDirentsMap = async allPaths => {
+  const pathToDirents = Object.create(null);
+  await Promise.all(allPaths.map(async path => {
+    const dirents = await readDirWithFileTypes(path);
+    pathToDirents[path] = dirents;
+  }));
+  return pathToDirents;
+};
+
+const restoreDirentType = (rawDirentType, path, expandedPaths) => {
+  if (rawDirentType === Directory && expandedPaths.includes(path)) {
+    return DirectoryExpanded;
   }
-  return [item];
+  return rawDirentType;
 };
-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();
+
+const getProtoMapInternal = (root, pathToDirents, expandedPaths, depth) => {
+  if (!(root in pathToDirents)) {
+    return [];
+  }
+  const items = pathToDirents[root] || [];
+  const protoMap = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const path = join2(root, item.name);
+    const displayDirent = {
+      name: item.name,
+      posInSet: i + 1,
+      setSize: items.length,
+      depth,
+      type: restoreDirentType(item.type, path, expandedPaths),
+      path,
+      icon: '',
+      selected: false
+    };
+    const children = getProtoMapInternal(path, pathToDirents, expandedPaths, depth + 1);
+    protoMap.push(displayDirent, ...children);
+  }
+  return protoMap;
+};
+
+const getProtoMap = (root, pathToDirents, expandedPaths) => {
+  return getProtoMapInternal(root, pathToDirents, expandedPaths, 1);
+};
+
+const sortPathDirentsMap = map => {
+  const sortedMap = Object.create(null);
+  for (const [key, value] of Object.entries(map)) {
+    const sorted = sortExplorerItems(value);
+    sortedMap[key] = sorted;
+  }
+  return sortedMap;
 };
 
-// TODO add lots of tests for this
 const refresh = async state => {
   const {
     root,
-    pathSeparator,
     minLineY,
     height,
     itemHeight,
@@ -3030,64 +3085,25 @@ const refresh = async state => {
     items,
     focusedIndex
   } = state;
-
-  // 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 expandedPaths = getPaths(expandedDirents);
+  const allPaths = [root, ...expandedPaths];
+  const pathToDirents = await getPathDirentsMap(allPaths);
+  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
+  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newItems.length);
+  const visible = newItems.slice(minLineY, maxLineY);
   const {
     icons,
     newFileIconCache
   } = await getFileIcons(visible, fileIconCache);
   let newFocusedIndex = focusedIndex;
-  if (focusedIndex >= newDirents.length) {
-    newFocusedIndex = newDirents.length - 1;
+  if (focusedIndex >= newItems.length) {
+    newFocusedIndex = newItems.length - 1;
   }
   return {
     ...state,
-    items: newDirents,
+    items: newItems,
     fileIconCache: newFileIconCache,
     icons,
     maxLineY,
@@ -3155,18 +3171,18 @@ const getFileOperations = (root, uploadTree) => {
   const operations = [];
   const processTree = (tree, currentPath) => {
     for (const [path, value] of Object.entries(tree)) {
-      const fullPath = currentPath ? `${currentPath}/${path}` : path;
+      const fullPath = currentPath ? join2(currentPath, path) : path;
       if (typeof value === 'object') {
         operations.push({
           type: 'createFolder',
-          path: `${root}/${fullPath}`,
+          path: join2(root, fullPath),
           text: ''
         });
         processTree(value, fullPath);
       } else if (typeof value === 'string') {
         operations.push({
           type: 'createFile',
-          path: `${root}/${fullPath}`,
+          path: join2(root, fullPath),
           text: value
         });
       }
@@ -3232,7 +3248,7 @@ const getFileOperationsElectron = async (root, paths, fileHandles) => {
     const path = paths[i];
     operations.push({
       type: 'copy',
-      path: `${root}/${name}`,
+      path: join2(root, name),
       text: '',
       from: path
     });
@@ -3432,14 +3448,25 @@ const handleIconThemeChange = state => {
   return updateIcons(state);
 };
 
-const handleInputBlur = state => {
-  return cancelEdit(state);
+const handleInputBlur = async state => {
+  const {
+    editingErrorMessage,
+    editingValue
+  } = state;
+  if (editingErrorMessage || !editingValue) {
+    return cancelEditInternal(state, false);
+  }
+  return acceptEdit(state);
 };
 
 const handleInputClick = state => {
   return state;
 };
 
+const handleInputKeyDown = (state, key) => {
+  return state;
+};
+
 const filterByFocusWord = (items, focusedIndex, focusWord) => {
   if (items.length === 0) {
     return -1;
@@ -3888,7 +3915,7 @@ const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntTy
     existingChildren = childDirents.map((dirent, index) => ({
       name: dirent.name,
       type: dirent.type,
-      path: `${parentPath}/${dirent.name}`,
+      path: join2(parentPath, dirent.name),
       depth,
       selected: false,
       posInSet: index + 1,
@@ -4185,7 +4212,6 @@ const HandleInputBlur = 'handleInputBlur';
 const HandleInputClick = 'handleInputClick';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
-const HandleListKeyDown = 'handleListKeyDown';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
 
@@ -4372,8 +4398,8 @@ const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets
     onDrop: HandleDrop,
     onFocus: HandleListFocus,
     onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel,
-    onKeyDown: HandleListKeyDown
+    onWheel: HandleWheel
+    // onKeyDown: DomEventListenerFunctions.HandleListKeyDown,
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
@@ -4684,11 +4710,18 @@ const renderEventListeners = () => {
   return [{
     name: HandleInputBlur,
     params: ['handleInputBlur']
-  }, {
-    name: HandleListKeyDown,
-    params: ['handleKeyDown', 'event.key'],
-    preventDefault: true
-  }, {
+  },
+  // {
+  //   name: DomEventListenersFunctions.HandleInputKeyDown,
+  //   params: ['handleInputKeyDown'],
+  //   stopPropagation: true, // TODO find a way to do this without stopPropagation
+  // },
+  // {
+  //   name: DomEventListenersFunctions.HandleListKeyDown,
+  //   params: ['handleKeyDown', 'event.key'],
+  //   preventDefault: true,
+  // },
+  {
     name: HandleListFocus,
     params: ['handleFocus', 'event.isTrusted', 'event.target.className']
   }, {
@@ -5078,7 +5111,12 @@ const getEditingIcon = async (editingType, value, direntType) => {
 };
 
 const updateEditingValue = async (state, value, inputSource = User) => {
-  const editingIcon = await getEditingIcon(state.editingType, value, state.items[state.editingIndex]?.type);
+  const {
+    editingType,
+    items,
+    editingIndex
+  } = state;
+  const editingIcon = await getEditingIcon(editingType, value, items[editingIndex]?.type);
   return {
     ...state,
     editingValue: value,
@@ -5088,14 +5126,14 @@ 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.cancelTypeAhead': wrapCommand(cancelTypeAhead),
   'Explorer.collapseAll': wrapCommand(collapseAll),
   'Explorer.copyPath': wrapCommand(copyPath),
   'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
   'Explorer.expandAll': wrapCommand(expandAll),
   'Explorer.expandRecursively': wrapCommand(expandRecursively),
+  'Explorer.focus': wrapCommand(focus),
   'Explorer.focusFirst': wrapCommand(focusFirst),
   'Explorer.focusIndex': wrapCommand(focusIndex),
   'Explorer.focusLast': wrapCommand(focusLast),
@@ -5123,6 +5161,8 @@ const commandMap = {
   'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
   'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
   'Explorer.handleInputClick': wrapCommand(handleInputClick),
+  'Explorer.handleInputKeyDown': wrapCommand(handleInputKeyDown),
+  'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
   'Explorer.handlePaste': wrapCommand(handlePaste),
   'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
   'Explorer.handleUpload': wrapCommand(handleUpload),

package/package.json

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