@lvce-editor/explorer-view 1.16.0 → 1.18.0

package/dist/explorerViewWorkerMain.js

@@ -898,7 +898,7 @@ const compareDirent = (direntA, direntB) => {
   return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
 };
 
-const getFileIcon$1 = ({
+const getFileIcon = ({
   name
 }) => {
   return '';
@@ -921,7 +921,7 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
     ...oldDirent,
     name: newName,
     path: oldDirent.path.slice(0, -oldDirent.name.length) + newName,
-    icon: getFileIcon$1({
+    icon: getFileIcon({
       name: newName
     })
   };
@@ -1408,6 +1408,59 @@ const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
   return maxLineY;
 };
 
+const getIconsCached = (dirents, fileIconCache) => {
+  return dirents.map(dirent => fileIconCache[dirent.path]);
+};
+
+const getMissingIconRequests = (dirents, fileIconCache) => {
+  const missingRequests = [];
+  for (const dirent of dirents) {
+    if (!(dirent.path in fileIconCache)) {
+      missingRequests.push({
+        type: dirent.type,
+        name: dirent.name,
+        path: dirent.path
+      });
+    }
+  }
+  return missingRequests;
+};
+
+const requestFileIcons = async requests => {
+  const promises = requests.map(request => request.type === File ? invoke('IconTheme.getFileIcon', {
+    name: request.name
+  }) : invoke('IconTheme.getFolderIcon', {
+    name: request.name
+  }));
+  return Promise.all(promises);
+};
+
+const updateIconCache = (iconCache, missingRequests, newIcons) => {
+  if (missingRequests.length === 0) {
+    return iconCache;
+  }
+  const newFileIconCache = {
+    ...iconCache
+  };
+  for (let i = 0; i < missingRequests.length; i++) {
+    const request = missingRequests[i];
+    const icon = newIcons[i];
+    newFileIconCache[request.path] = icon;
+  }
+  return newFileIconCache;
+};
+
+const getFileIcons = async (dirents, fileIconCache) => {
+  const missingRequests = getMissingIconRequests(dirents, fileIconCache);
+  const newIcons = await requestFileIcons(missingRequests);
+  const newFileIconCache = updateIconCache(fileIconCache, missingRequests, newIcons);
+  const icons = getIconsCached(dirents, newFileIconCache);
+  return {
+    icons,
+    newFileIconCache
+  };
+};
+
 const expandAll = async state => {
   const {
     items,
@@ -1445,9 +1498,16 @@ const expandAll = async state => {
     }
   }
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  const visible = newDirents.slice(minLineY, maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
+    icons,
+    fileIconCache: newFileIconCache,
     maxLineY
   };
 };
@@ -1747,13 +1807,18 @@ const TreeItem$1 = 'treeitem';
 
 const Actions = 'Actions';
 const Button$1 = 'Button';
+const ButtonNarrow = 'ButtonNarrow';
 const ButtonPrimary = 'ButtonPrimary';
+const ButtonWide = 'ButtonWide';
 const Chevron = 'Chevron';
 const Explorer$1 = 'Explorer';
 const FileIcon = 'FileIcon';
+const FocusOutline = 'FocusOutline';
 const IconButton = 'IconButton';
 const InputBox = 'InputBox';
 const Label = 'Label';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
 const TreeItem = 'TreeItem';
 const TreeItemActive = 'TreeItemActive';
 const Viewlet = 'Viewlet';
@@ -1778,13 +1843,13 @@ const P = 50;
 
 const chevronDownVirtualDom = {
   type: Div,
-  className: `${Chevron} MaskIconChevronDown`,
+  className: `${Chevron} ${MaskIconChevronDown}`,
   childCount: 0
 };
 
 const chevronRightVirtualDom = {
   type: Div,
-  className: `${Chevron} MaskIconChevronRight`,
+  className: `${Chevron} ${MaskIconChevronRight}`,
   childCount: 0
 };
 
@@ -1887,19 +1952,20 @@ const getExplorerWelcomeVirtualDom = isWide => {
     childCount: 1
   }, text(youHaveNotYetOpenedAFolder()), {
     type: Button,
-    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? 'ButtonWide' : 'ButtonNarrow'),
+    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
     childCount: 1,
     onClick: handleClickOpenFolder$1
   }, text(openFolder$1())];
 };
 
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
+  const extraClass = focused && focusedIndex === -1 ? FocusOutline : '';
   const dom = [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer$1),
+    className: mergeClassNames(Viewlet, Explorer$1, extraClass),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
@@ -2239,23 +2305,8 @@ const handleBlur = state => {
   };
 };
 
-const getFileIcon = dirent => {
-  if (dirent.type === File) {
-    return invoke('IconTheme.getFileIcon', {
-      name: dirent.name
-    });
-  }
-  return invoke('IconTheme.getFolderIcon', {
-    name: dirent.name
-  });
-};
-const getFileIcons = async dirents => {
-  const promises = dirents.map(getFileIcon);
-  const icons = await Promise.all(promises);
-  return icons;
-};
-
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
+  // @ts-ignore
   dirent.type = DirectoryExpanding;
   // TODO handle error
   const dirents = await getChildDirents(state.pathSeparator, dirent);
@@ -2271,7 +2322,9 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   }
   const newDirents = [...state2.items];
   newDirents.splice(newIndex + 1, 0, ...dirents);
+  // @ts-ignore
   dirent.type = DirectoryExpanded;
+  // @ts-ignore
   dirent.icon = getIcon();
   const {
     height,
@@ -2281,11 +2334,15 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   // TODO when focused index has changed while expanding, don't update it
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
   const parts = newDirents.slice(minLineY, maxLineY);
-  const icons = await getFileIcons(parts);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(parts, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: newIndex,
     focused: keepFocus,
     maxLineY
@@ -2296,9 +2353,12 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
   const {
     minLineY,
     maxLineY,
-    itemHeight
+    itemHeight,
+    fileIconCache
   } = state;
+  // @ts-ignore
   dirent.type = Directory;
+  // @ts-ignore
   dirent.icon = getIcon();
   const endIndex = getParentEndIndex(state.items, index);
   const removeCount = endIndex - index - 1;
@@ -2312,11 +2372,15 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
     const newMinLineY = newMaxLineY - visibleItems;
     const deltaY = newMinLineY * itemHeight;
     const parts = newDirents.slice(minLineY, maxLineY);
-    const icons = await getFileIcons(parts);
+    const {
+      icons,
+      newFileIconCache
+    } = await getFileIcons(parts, fileIconCache);
     return {
       ...state,
       items: newDirents,
       icons,
+      fileIconCache: newFileIconCache,
       focusedIndex: index,
       focused: keepFocus,
       minLineY: newMinLineY,
@@ -2325,18 +2389,24 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
     };
   }
   const parts = newDirents.slice(state.minLineY, state.maxLineY);
-  const icons = await getFileIcons(parts);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(parts, fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: index,
     focused: keepFocus
   };
 };
 
 const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) => {
+  // @ts-ignore
   dirent.type = Directory;
+  // @ts-ignore
   dirent.icon = getIcon();
   return {
     ...state,
@@ -2345,8 +2415,12 @@ const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) =>
   };
 };
 
+const openUri = async (uri, focus) => {
+  await invoke(/* Main.openAbsolutePath */'Main.openUri', /* absolutePath */uri, /* focus */focus);
+};
+
 const handleClickFile$1 = async (state, dirent, index, keepFocus = false) => {
-  await invoke(/* Main.openAbsolutePath */'Main.openUri', /* absolutePath */dirent.path, /* focus */!keepFocus);
+  await openUri(dirent.path, !keepFocus);
   return {
     ...state,
     focusedIndex: index,
@@ -2924,6 +2998,15 @@ const handleDrop = async (state, x, y, files) => {
   }
 };
 
+const setFocus = key => {
+  return invoke('Focus.setFocus', key);
+};
+
+const handleFocus = async state => {
+  await setFocus(FocusExplorer);
+  return state;
+};
+
 const updateIcon = dirent => {
   return {
     ...dirent,
@@ -3233,12 +3316,16 @@ const loadContent = async (state, savedState) => {
     deltaY = savedState.deltaY;
   }
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, restoredDirents.length);
-  const icons = await getFileIcons(restoredDirents);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(restoredDirents, Object.create(null));
   return {
     ...state,
     root,
     items: restoredDirents,
     icons,
+    fileIconCache: newFileIconCache,
     minLineY,
     deltaY,
     maxLineY,
@@ -3258,10 +3345,6 @@ const handleWorkspaceChange = async state => {
   return newState;
 };
 
-const setFocus = key => {
-  return invoke('Focus.setFocus', key);
-};
-
 const ExplorerEditBox = FocusExplorerEditBox;
 
 const newDirent = async (state, editingType) => {
@@ -3369,15 +3452,15 @@ const removeDirent = async state => {
     indexToFocus = Math.max(state.focusedIndex - 1, 0);
   }
   const visible = newDirents.slice(state.minLineY, state.maxLineY);
-  const icons = await getFileIcons(visible);
-  console.log({
-    icons
-  });
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
-    // @ts-ignore
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: indexToFocus
   };
 };
@@ -3399,21 +3482,22 @@ const renameDirent = state => {
 
 const renderItems = {
   isEqual(oldState, newState) {
-    return JSON.stringify(oldState.items) === JSON.stringify(newState.items) && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.width === newState.width;
+    return JSON.stringify(oldState.items) === JSON.stringify(newState.items) && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.width === newState.width && oldState.focused === newState.focused;
   },
   apply(oldState, newState) {
     const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.icons, newState.useChevrons);
     const isWide = newState.width > 450;
-    const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide);
+    const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused);
     return ['Viewlet.setDom2', dom];
   }
 };
 
-// const renderFocusedIndex = {
-//   isEqual(oldState:any, newState:any) {
+// TODO add virtual dom diffing so that focus is not lost when updating dom
+// const renderFocus = {
+//   isEqual(oldState: any, newState: any) {
 //     return oldState.focusedIndex === newState.focusedIndex && oldState.focused === newState.focused && oldState.minLineY === newState.minLineY
 //   },
-//   apply(oldState:any, newState:any) {
+//   apply(oldState: any, newState: any) {
 //     const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY
 //     const newFocusedIndex = newState.focusedIndex - newState.minLineY
 //     return [/* method */ 'setFocusedIndex', /* oldindex */ oldFocusedIndex, /* newIndex */ newFocusedIndex, /* focused */ newState.focused]
@@ -3796,8 +3880,12 @@ const setDeltaY = (state, deltaY) => {
   };
 };
 
+const terminate = () => {
+  globalThis.close();
+};
+
 const updateEditingValue = (state, value) => {
-  const editingIcon = getFileIcon$1({
+  const editingIcon = getFileIcon({
     name: value
   });
   return {
@@ -3836,6 +3924,7 @@ const commandMap = {
   'Explorer.handleCopy': handleCopy,
   'Explorer.handleDragOver': handleDragOver,
   'Explorer.handleDrop': handleDrop,
+  'Explorer.handleFocus': handleFocus,
   'Explorer.handleIconThemeChange': handleIconThemeChange,
   'Explorer.handlePaste': handlePaste,
   'Explorer.handlePointerDown': handlePointerDown,
@@ -3854,6 +3943,7 @@ const commandMap = {
   'Explorer.revealItem': revealItem,
   'Explorer.saveState': saveState,
   'Explorer.setDeltaY': setDeltaY,
+  'Explorer.terminate': terminate,
   'Explorer.updateEditingValue': updateEditingValue,
   'Explorer.updateIcons': updateIcons
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Explorer Worker",
   "main": "dist/explorerViewWorkerMain.js",
   "type": "module",