@lvce-editor/explorer-view 1.16.0 → 1.17.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,17 @@ 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 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 +1842,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,7 +1951,7 @@ 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())];
@@ -2239,22 +2303,6 @@ 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) => {
   dirent.type = DirectoryExpanding;
   // TODO handle error
@@ -2281,11 +2329,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
@@ -2312,11 +2364,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, state.fileIconCache);
     return {
       ...state,
       items: newDirents,
       icons,
+      fileIconCache: newFileIconCache,
       focusedIndex: index,
       focused: keepFocus,
       minLineY: newMinLineY,
@@ -2325,11 +2381,15 @@ 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, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: index,
     focused: keepFocus
   };
@@ -3233,12 +3293,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,
@@ -3369,15 +3433,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
   };
 };
@@ -3797,7 +3861,7 @@ const setDeltaY = (state, deltaY) => {
 };
 
 const updateEditingValue = (state, value) => {
-  const editingIcon = getFileIcon$1({
+  const editingIcon = getFileIcon({
     name: value
   });
   return {

package/package.json

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