@lvce-editor/explorer-view 3.18.0 → 3.20.0

package/dist/explorerViewWorkerMain.js

@@ -1372,7 +1372,7 @@ const getWebViewSecret = async key => {
 const setWebViewPort = async (uid, port, origin, portType) => {
   return invokeAndTransfer('WebView.setPort', uid, port, origin, portType);
 };
-const setFocus$1 = key => {
+const setFocus = key => {
   return invoke$2('Focus.setFocus', key);
 };
 const getFileIcon = async options => {
@@ -1632,7 +1632,7 @@ const RendererWorker = {
   setAdditionalFocus,
   setColorTheme,
   setExtensionsSearchValue,
-  setFocus: setFocus$1,
+  setFocus,
   setWebViewPort,
   setWorkspacePath,
   showContextMenu: showContextMenu$1,
@@ -1798,94 +1798,6 @@ const Rename$1 = 3;
 const List = 1;
 const Input$1 = 2;
 
-// TODO optimize this function to return the minimum number
-// of visible items needed, e.g. when not scrolled 5 items with
-// 20px fill 100px but when scrolled 6 items are needed
-const getNumberOfVisibleItems = (listHeight, itemHeight) => {
-  return Math.ceil(listHeight / itemHeight) + 1;
-};
-
-const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
-  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
-  return maxLineY;
-};
-
-const getIconsCached = (dirents, fileIconCache) => {
-  return dirents.map(dirent => fileIconCache[dirent]);
-};
-
-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 getPath = item => {
-  return item.path;
-};
-
-const getPaths = items => {
-  return items.map(getPath);
-};
-
-const getSimpleIconRequestType = direntType => {
-  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
-    return 2;
-  }
-  return 1;
-};
-
-const toSimpleIconRequest = request => {
-  return {
-    name: request.name,
-    type: getSimpleIconRequestType(request.type)
-  };
-};
-
-const requestFileIcons = async requests => {
-  if (requests.length === 0) {
-    return [];
-  }
-  const simpleRequests = requests.map(toSimpleIconRequest);
-  const icons = await invoke$1('IconTheme.getIcons', simpleRequests);
-  return icons;
-};
-
-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 paths = getPaths(dirents);
-  const icons = getIconsCached(paths, newFileIconCache);
-  return {
-    icons,
-    newFileIconCache
-  };
-};
-
 const getFileOperationsNestedPath = (path, root, pathSeparator) => {
   const parts = path.slice(root.length).split(pathSeparator);
   const operations = [];
@@ -2297,10 +2209,6 @@ const validateFileName2 = name => {
 const acceptCreate = async (state, newDirentType) => {
   const {
     editingValue,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
     pathSeparator,
     root,
     focusedIndex,
@@ -2332,22 +2240,13 @@ const acceptCreate = async (state, newDirentType) => {
   const newItems = treeToArray(merged, root);
   const dirents = newItems;
   const newFocusedIndex = getIndex(newItems, absolutePath);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, dirents.length);
-  const visible = dirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
     items: dirents,
     editingIndex: -1,
     focusedIndex: newFocusedIndex,
     editingType: None$5,
-    maxLineY,
-    focus: List,
-    icons,
-    fileIconCache: newFileIconCache
+    focus: List
   };
 };
 
@@ -2402,11 +2301,7 @@ const acceptRename = async state => {
     editingIndex,
     editingValue,
     items,
-    root,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache
+    root
   } = state;
   const editingErrorMessage = validateFileName2(editingValue);
   if (editingErrorMessage) {
@@ -2433,12 +2328,6 @@ const acceptRename = async state => {
   const newTree = updateTree2(tree, update);
   const newDirents = treeToArray(newTree, root);
   const newFocusedIndex = getIndex(newDirents, newUri);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
     editingIndex: -1,
@@ -2449,8 +2338,6 @@ const acceptRename = async state => {
     focused: true,
     focus: List,
     items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
     editingSelectionEnd: 0,
     editingSelectionStart: 0
   };
@@ -2479,14 +2366,9 @@ const isNormalItem = item => {
 const cancelEditCreate = async (state, keepFocus) => {
   const {
     editingIndex,
-    items,
-    fileIconCache
+    items
   } = state;
   const filteredItems = items.filter(isNormalItem);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(filteredItems, fileIconCache);
   return {
     ...state,
     items: filteredItems,
@@ -2496,9 +2378,7 @@ const cancelEditCreate = async (state, keepFocus) => {
     editingValue: '',
     editingErrorMessage: '',
     editingType: None$5,
-    focus: List,
-    icons,
-    fileIconCache: newFileIconCache
+    focus: List
   };
 };
 
@@ -2573,25 +2453,12 @@ const toCollapsedDirent = dirent => {
 
 const collapseAll = async state => {
   const {
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
     items
   } = state;
   const newDirents = items.filter(isTopLevel).map(toCollapsedDirent);
-  const dirents = newDirents;
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, dirents.length);
-  const visible = dirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache
+    items: newDirents
   };
 };
 
@@ -2641,6 +2508,271 @@ const copyRelativePath = async state => {
   return state;
 };
 
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
+  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
+  return maxLineY;
+};
+
+const getIconsCached = (dirents, fileIconCache) => {
+  return dirents.map(dirent => fileIconCache[dirent]);
+};
+
+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 getPath = item => {
+  return item.path;
+};
+
+const getPaths = items => {
+  return items.map(getPath);
+};
+
+const getSimpleIconRequestType = direntType => {
+  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
+    return 2;
+  }
+  return 1;
+};
+
+const toSimpleIconRequest = request => {
+  return {
+    name: request.name,
+    type: getSimpleIconRequestType(request.type)
+  };
+};
+
+const requestFileIcons = async requests => {
+  if (requests.length === 0) {
+    return [];
+  }
+  const simpleRequests = requests.map(toSimpleIconRequest);
+  const icons = await invoke$1('IconTheme.getIcons', simpleRequests);
+  return icons;
+};
+
+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 paths = getPaths(dirents);
+  const icons = getIconsCached(paths, newFileIconCache);
+  return {
+    icons,
+    newFileIconCache
+  };
+};
+
+const None$4 = 0;
+const Right = 1;
+const Down = 2;
+
+const getChevronType = (type, useChevrons) => {
+  if (!useChevrons) {
+    return None$4;
+  }
+  switch (type) {
+    case Directory:
+      return Right;
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return Down;
+    default:
+      return None$4;
+  }
+};
+
+const None$3 = 0;
+const Expanded = 1;
+const Collapsed = 2;
+
+const getExpandedType = type => {
+  switch (type) {
+    case Directory:
+      return Collapsed;
+    case DirectoryExpanding:
+    case DirectoryExpanded:
+      return Expanded;
+    default:
+      return None$3;
+  }
+};
+
+// 0 = 'Button'
+// 1 = 'IconButton'
+// 2 = 'Button IconButton'
+// it could make dom diffing faster, since for classname,
+// once at start, send all classnames to renderer process
+// only numbers are compared. it could also make rendering faster,
+// representing the concatenated strings for example
+// since less data is transferred to renderer process
+// then, components uses numeric classname
+// TODO add option to make classnames numeric
+// when a component uses multiple classnames, it is a new number
+const Actions = 'Actions';
+const Button$2 = 'Button';
+const ButtonNarrow = 'ButtonNarrow';
+const ButtonPrimary = 'ButtonPrimary';
+const ButtonWide = 'ButtonWide';
+const Chevron = 'Chevron';
+const Empty = '';
+const Explorer$1 = 'Explorer';
+const ExplorerDropTarget = 'DropTarget';
+const ExplorerErrorMessage = 'ExplorerErrorMessage';
+const ExplorerInputBox = 'ExplorerInputBox';
+const FileIcon = 'FileIcon';
+const FocusOutline = 'FocusOutline';
+const IconButton = 'IconButton';
+const InputValidationError = 'InputValidationError';
+const Label = 'Label';
+const LabelCut = 'LabelCut';
+const ListItems = 'ListItems';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const TreeItem$1 = 'TreeItem';
+const TreeItemActive = 'TreeItemActive';
+const Viewlet = 'Viewlet';
+const Welcome = 'Welcome';
+const WelcomeMessage = 'WelcomeMessage';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
+  let className = TreeItem$1;
+  className = mergeClassNames(className, `Indent-${depth}`);
+  if (isSelected || isFocused) {
+    className = mergeClassNames(className, TreeItemActive);
+  }
+  if (isDropping) {
+    className = mergeClassNames(className, 'DropTarget');
+  }
+  return className;
+};
+
+const defaultIndent$1 = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent$1}rem`;
+};
+
+// TODO make all of these variable configurable
+const defaultPaddingLeft = 4;
+const defaultIndent = 8;
+
+// TODO make chevron size configurable
+const chevronSize = 22;
+const getTreeItemIndentWithChevron = (depth, chevron) => {
+  // TODO use numeric value here, convert to string value in renderer process
+  const extraSpace = chevron ? 0 : chevronSize;
+  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
+};
+
+const ariaExpandedValues = [undefined, 'true', 'false'];
+const getEditingChevron = direntType => {
+  switch (direntType) {
+    case EditingDirectoryExpanded:
+      return Down;
+    case EditingFolder:
+      return Right;
+    default:
+      return None$4;
+  }
+};
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris = []) => {
+  const visible = [];
+  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
+  let iconIndex = 0;
+  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
+    const item = items[i];
+    let chevron = getChevronType(item.type, useChevrons);
+    const isFocused = i === focusedIndex;
+    const id = isFocused ? 'TreeItemActive' : undefined;
+    const isSelected = item.selected;
+    const isCut = cutItems.includes(item.path);
+    const isDropping = dropTargets.includes(i);
+    const isIgnored = sourceControlIgnoredUris.includes(item.path);
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, item.depth); // TODO compute classname in dom function
+    const expanded = getExpandedType(item.type);
+    const ariaExpanded = ariaExpandedValues[expanded];
+    const isEditing = i === editingIndex;
+    let icon = icons[iconIndex++];
+    if (isEditing) {
+      icon = editingIcon;
+      chevron = getEditingChevron(item.type);
+    }
+    const indent = indentFn(item.depth, chevron);
+    visible.push({
+      ...item,
+      posInSet: item.posInSet ?? i + 1,
+      setSize: item.setSize ?? items.length,
+      isEditing: isEditing,
+      hasEditingError: isEditing && Boolean(editingErrorMessage),
+      icon,
+      indent,
+      ariaExpanded,
+      chevron,
+      id,
+      className,
+      isCut,
+      isIgnored,
+      index: i
+    });
+  }
+  return visible;
+};
+
 const {
   get,
   set,
@@ -2649,6 +2781,50 @@ const {
   getCommandIds,
   wrapGetter
 } = create$2();
+const wrapListItemCommand = fn => {
+  const wrappedCommand = async (id, ...args) => {
+    const {
+      newState
+    } = get(id);
+    const updatedState = await fn(newState, ...args);
+    const {
+      items,
+      minLineY,
+      focusedIndex,
+      editingIndex,
+      editingType,
+      editingValue,
+      editingErrorMessage,
+      useChevrons,
+      dropTargets,
+      editingIcon,
+      cutItems,
+      sourceControlIgnoredUris,
+      height,
+      itemHeight,
+      fileIconCache
+    } = updatedState;
+    const intermediate = get(id);
+    set(id, intermediate.oldState, updatedState);
+    const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
+    const visible = items.slice(minLineY, maxLineY);
+    const {
+      icons,
+      newFileIconCache
+    } = await getFileIcons(visible, fileIconCache);
+    const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
+    const finalState = {
+      ...updatedState,
+      visibleExplorerItems,
+      fileIconCache: newFileIconCache,
+      icons,
+      maxLineY
+    };
+    const intermediate2 = get(id);
+    set(id, intermediate2.oldState, finalState);
+  };
+  return wrappedCommand;
+};
 
 const ListItem = 22;
 
@@ -2702,7 +2878,10 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     isPointerDown: false,
     pointerDownIndex: -1,
     sourceControlIgnoredUris: [],
-    maxIndent: 0
+    maxIndent: 0,
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    visibleExplorerItems: []
   };
   set(uid, state, state);
 };
@@ -2755,14 +2934,17 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     isPointerDown: false,
     pointerDownIndex: -1,
     sourceControlIgnoredUris: [],
-    maxIndent: 0
+    maxIndent: 0,
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    visibleExplorerItems: []
   };
   set(state.uid, state, state);
   return state;
 };
 
 const isEqual$6 = (oldState, newState) => {
-  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive;
+  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive && oldState.maxIndent === newState.maxIndent;
 };
 
 const isEqual$5 = (oldState, newState) => {
@@ -2774,7 +2956,7 @@ const isEqual$4 = (oldState, newState) => {
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.items === 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.editingErrorMessage === newState.editingErrorMessage && oldState.width === newState.width && oldState.focused === newState.focused && oldState.dropTargets === newState.dropTargets && oldState.icons === newState.icons && oldState.cutItems === newState.cutItems;
+  return oldState.items === 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.editingErrorMessage === newState.editingErrorMessage && oldState.width === newState.width && oldState.focused === newState.focused && oldState.dropTargets === newState.dropTargets && oldState.icons === newState.icons && oldState.cutItems === newState.cutItems && oldState.visibleExplorerItems === newState.visibleExplorerItems;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -2823,10 +3005,7 @@ const expandAll = async state => {
   const {
     items,
     focusedIndex,
-    pathSeparator,
-    minLineY,
-    height,
-    itemHeight
+    pathSeparator
   } = state;
   if (focusedIndex === -1) {
     return state;
@@ -2857,18 +3036,9 @@ const expandAll = async state => {
       // await expand(state, dirent.index)
     }
   }
-  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
+    items: newDirents
   };
 };
 
@@ -2916,10 +3086,7 @@ const expandRecursively = async state => {
     items,
     focusedIndex,
     pathSeparator,
-    root,
-    height,
-    itemHeight,
-    minLineY
+    root
   } = state;
   const dirent = focusedIndex < 0 ? {
     type: Directory,
@@ -2938,33 +3105,15 @@ const expandRecursively = async state => {
   if (focusedIndex >= 0) {
     const endIndex = getParentEndIndex(items, focusedIndex);
     const newDirents = [...items.slice(0, startIndex), ...childDirents, ...items.slice(endIndex)];
-    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,
-      maxLineY,
-      icons,
-      fileIconCache: newFileIconCache
+      items: newDirents
     };
   }
   const newDirents = childDirents.slice(1);
-  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,
-    maxLineY,
-    icons,
-    fileIconCache: newFileIconCache
+    items: newDirents
   };
 };
 
@@ -3091,31 +3240,12 @@ const focusPrevious = state => {
       if (items.length === 0) {
         return state;
       }
-      return focusIndex(state, lastIndex(items));
-    case 0:
-      return state;
-    default:
-      return focusIndex(state, focusedIndex - 1);
-  }
-};
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
-};
-
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
+      return focusIndex(state, lastIndex(items));
+    case 0:
+      return state;
+    default:
+      return focusIndex(state, focusedIndex - 1);
+  }
 };
 
 const getKeyBindings = () => {
@@ -3215,7 +3345,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$4 = 0;
+const None$2 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
@@ -3228,13 +3358,13 @@ const menuEntrySeparator = {
 const menuEntryNewFile = {
   id: 'newFile',
   label: newFile$1(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.newFile'
 };
 const menuEntryNewFolder = {
   id: 'newFolder',
   label: newFolder$1(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.newFolder'
 };
 const menuEntryOpenContainingFolder = {
@@ -3246,7 +3376,7 @@ const menuEntryOpenContainingFolder = {
 const menuEntryOpenInIntegratedTerminal = {
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal(),
-  flags: None$4,
+  flags: None$2,
   command: /* TODO */'-1'
 };
 const menuEntryCut = {
@@ -3264,7 +3394,7 @@ const menuEntryCopy = {
 const menuEntryPaste = {
   id: 'paste',
   label: paste(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
@@ -3282,13 +3412,13 @@ const menuEntryCopyRelativePath = {
 const menuEntryRename = {
   id: 'rename',
   label: rename(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.renameDirent'
 };
 const menuEntryDelete = {
   id: 'delete',
   label: deleteItem(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.removeDirent'
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
@@ -3387,16 +3517,16 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     minLineY,
     maxLineY,
     itemHeight,
-    fileIconCache
+    items
   } = state;
   // @ts-ignore
   dirent.type = Directory;
   // @ts-ignore
   dirent.icon = '';
-  const endIndex = getParentEndIndex(state.items, index);
+  const endIndex = getParentEndIndex(items, index);
   const removeCount = endIndex - index - 1;
   // TODO race conditions and side effects are everywhere
-  const newDirents = [...state.items];
+  const newDirents = [...items];
   newDirents.splice(index + 1, removeCount);
   const newTotal = newDirents.length;
   if (newTotal < maxLineY) {
@@ -3404,35 +3534,21 @@ 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(newMinLineY, newMaxLineY);
-    const {
-      icons,
-      newFileIconCache
-    } = await getFileIcons(parts, fileIconCache);
     return {
       ...state,
-      items: newDirents,
-      icons,
-      fileIconCache: newFileIconCache,
-      focusedIndex: index,
+      deltaY,
       focused: keepFocus,
-      minLineY: newMinLineY,
+      focusedIndex: index,
+      items: newDirents,
       maxLineY: newMaxLineY,
-      deltaY
+      minLineY: newMinLineY
     };
   }
-  const parts = newDirents.slice(state.minLineY, state.maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(parts, fileIconCache);
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
+    focused: keepFocus,
     focusedIndex: index,
-    focused: keepFocus
+    items: newDirents
   };
 };
 
@@ -3473,10 +3589,6 @@ const handleArrowRightDirectoryExpanded = (state, dirent) => {
   return state;
 };
 
-const setFocus = key => {
-  return invoke$1('Focus.setFocus', key);
-};
-
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   // @ts-ignore
   dirent.type = DirectoryExpanding;
@@ -3498,27 +3610,14 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   dirent.type = DirectoryExpanded;
   // @ts-ignore
   dirent.icon = '';
-  const {
-    height,
-    itemHeight,
-    minLineY
-  } = state2;
   // 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,
-    newFileIconCache
-  } = await getFileIcons(parts, state.fileIconCache);
-  await setFocus(FocusExplorer);
+
   return {
     ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    focusedIndex: newIndex,
     focused: keepFocus,
-    maxLineY
+    focusedIndex: newIndex,
+    items: newDirents,
+    focus: List
   };
 };
 
@@ -3828,7 +3927,7 @@ const show = async (x, y, id, ...args) => {
   return showContextMenu(x, y, id, ...args);
 };
 
-const Explorer$1 = 4;
+const Explorer = 4;
 
 const handleContextMenuKeyboard = async state => {
   const {
@@ -3840,7 +3939,7 @@ const handleContextMenuKeyboard = async state => {
   } = state;
   const menuX = x;
   const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
-  await show(menuX, menuY, Explorer$1);
+  await show(menuX, menuY, Explorer);
   return state;
 };
 
@@ -3854,7 +3953,7 @@ const handleContextMenuMouseAt = async (state, x, y) => {
     focused: false
   };
   set(state.uid, state, newState);
-  await show(x, y, Explorer$1);
+  await show(x, y, Explorer);
   return state;
 };
 
@@ -4071,12 +4170,8 @@ const sortPathDirentsMap = map => {
 const refresh = async state => {
   const {
     root,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
-    items,
-    focusedIndex
+    focusedIndex,
+    items
   } = state;
   const expandedDirents = getExpandedDirents(items);
   const expandedPaths = getPaths(expandedDirents);
@@ -4084,23 +4179,14 @@ const refresh = async state => {
   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 >= newItems.length) {
     newFocusedIndex = newItems.length - 1;
   }
   return {
     ...state,
-    items: newItems,
-    fileIconCache: newFileIconCache,
-    icons,
-    maxLineY,
-    focusedIndex: newFocusedIndex
+    focusedIndex: newFocusedIndex,
+    items: newItems
   };
 };
 
@@ -4398,8 +4484,10 @@ const handleEscape = async state => {
 };
 
 const handleFocus = async state => {
-  await setFocus(FocusExplorer);
-  return state;
+  return {
+    ...state,
+    focus: List
+  };
 };
 
 const updateIcons = async state => {
@@ -4720,7 +4808,7 @@ const handlePasteCut = async (state, nativeFiles) => {
   };
 };
 
-const None$3 = 'none';
+const None$1 = 'none';
 
 const handlePaste = async state => {
   const nativeFiles = await readNativeFiles();
@@ -4741,16 +4829,15 @@ const handlePaste = async state => {
   // TODO handle error gracefully when copy fails
 
   // If no files to paste, return original state unchanged
-  if (nativeFiles.type === None$3) {
+  if (nativeFiles.type === None$1) {
     return state;
   }
 
   // Use the pasteShouldMove flag to determine whether to cut or copy
   if (state.pasteShouldMove) {
     return handlePasteCut(state, nativeFiles);
-  } else {
-    return handlePasteCopy(state, nativeFiles);
   }
+  return handlePasteCopy(state, nativeFiles);
 };
 
 const handlePointerDown = (state, button, x, y) => {
@@ -4801,18 +4888,11 @@ const setDeltaY = async (state, deltaY) => {
   }
   const minLineY = Math.round(deltaY / itemHeight);
   const maxLineY = minLineY + Math.round(height / itemHeight);
-  const visible = items.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     deltaY,
-    minLineY,
     maxLineY,
-    icons,
-    fileIconCache: newFileIconCache
+    minLineY
   };
 };
 
@@ -4958,9 +5038,6 @@ const getSavedRoot = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
-  const {
-    fileIconCache
-  } = state;
   const {
     useChevrons,
     confirmDelete
@@ -4971,10 +5048,6 @@ const loadContent = async (state, savedState) => {
   const pathSeparator = await getPathSeparator(root); // TODO only load path separator once
   const excluded = getExcluded();
   const restoredDirents = await restoreExpandedState(savedState, root, pathSeparator, excluded);
-  const {
-    itemHeight,
-    height
-  } = state;
   let minLineY = 0;
   if (savedState && typeof savedState.minLineY === 'number') {
     minLineY = savedState.minLineY;
@@ -4983,26 +5056,17 @@ const loadContent = async (state, savedState) => {
   if (savedState && typeof savedState.deltaY === 'number') {
     deltaY = savedState.deltaY;
   }
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, restoredDirents.length);
-  const visible = restoredDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   return {
     ...state,
-    root,
+    confirmDelete,
+    deltaY,
+    excluded,
     items: restoredDirents,
-    icons,
-    fileIconCache: newFileIconCache,
+    maxIndent: 10,
     minLineY,
-    deltaY,
-    maxLineY,
     pathSeparator,
-    excluded,
-    useChevrons,
-    confirmDelete,
-    maxIndent: 10
+    root,
+    useChevrons
   };
 };
 
@@ -5041,8 +5105,6 @@ const initialize = async () => {
   await initializeFileSystemWorker();
 };
 
-const ExplorerEditBox = FocusExplorerEditBox;
-
 const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntType) => {
   // Get existing children or query them if they don't exist
   let existingChildren = items.filter(item => item.depth === depth && item.path.startsWith(parentPath));
@@ -5135,39 +5197,24 @@ const getFittingIndex = (dirents, startIndex) => {
   return -1;
 };
 const newDirent = async (state, editingType) => {
-  // TODO make focus functional instead of side effect
-  await setFocus(ExplorerEditBox);
   // TODO do it like vscode, select position between folders and files
   const {
+    root,
     focusedIndex,
-    items,
-    minLineY,
-    height,
-    itemHeight,
-    fileIconCache,
-    root
+    items
   } = state;
   const index = getFittingIndex(items, focusedIndex);
   const direntType = getNewDirentType(editingType);
   const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
-  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
-  const visible = newDirents.slice(minLineY, maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, fileIconCache);
   const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
   return {
     ...state,
-    items: newDirents,
     editingIndex,
     editingType,
     editingValue: '',
-    focusedIndex: editingIndex,
     focus: Input$1,
-    icons,
-    fileIconCache: newFileIconCache,
-    maxLineY
+    focusedIndex: editingIndex,
+    items: newDirents
   };
 };
 
@@ -5286,7 +5333,7 @@ const getRenameSelectionRange = name => {
 const User = 1;
 const Script = 2;
 
-const renameDirent = state => {
+const renameDirent = async state => {
   const {
     focusedIndex,
     items,
@@ -5316,11 +5363,6 @@ const renameDirent = state => {
   };
 };
 
-const defaultIndent$1 = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
-};
-
 const renderCss = (oldState, newState) => {
   const {
     scrollBarHeight,
@@ -5333,7 +5375,7 @@ const renderCss = (oldState, newState) => {
   for (let i = 0; i < maxIndent; i++) {
     const indent = getTreeItemIndent(i);
     rules.push(`.Indent-${i} {
-  padding-left: ${indent}px;
+  padding-left: ${indent};
 }`);
   }
   const css = rules.join('\n');
@@ -5425,50 +5467,10 @@ const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, inde
   };
 };
 
-const None$2 = 'none';
+const None = 'none';
 const ToolBar = 'toolbar';
 const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
-// 0 = 'Button'
-// 1 = 'IconButton'
-// 2 = 'Button IconButton'
-// it could make dom diffing faster, since for classname,
-// once at start, send all classnames to renderer process
-// only numbers are compared. it could also make rendering faster,
-// representing the concatenated strings for example
-// since less data is transferred to renderer process
-// then, components uses numeric classname
-// TODO add option to make classnames numeric
-// when a component uses multiple classnames, it is a new number
-const Actions = 'Actions';
-const Button$2 = 'Button';
-const ButtonNarrow = 'ButtonNarrow';
-const ButtonPrimary = 'ButtonPrimary';
-const ButtonWide = 'ButtonWide';
-const Chevron = 'Chevron';
-const Empty = '';
-const Explorer = 'Explorer';
-const ExplorerDropTarget = 'DropTarget';
-const ExplorerErrorMessage = 'ExplorerErrorMessage';
-const ExplorerInputBox = 'ExplorerInputBox';
-const FileIcon = 'FileIcon';
-const FocusOutline = 'FocusOutline';
-const IconButton = 'IconButton';
-const InputValidationError = 'InputValidationError';
-const Label = 'Label';
-const LabelCut = 'LabelCut';
-const ListItems = 'ListItems';
-const MaskIconChevronDown = 'MaskIconChevronDown';
-const MaskIconChevronRight = 'MaskIconChevronRight';
-const ScrollBar = 'ScrollBar';
-const ScrollBarSmall = 'ScrollBarSmall';
-const ScrollBarThumb = 'ScrollBarThumb';
-const TreeItem = 'TreeItem';
-const TreeItemActive = 'TreeItemActive';
-const Viewlet = 'Viewlet';
-const Welcome = 'Welcome';
-const WelcomeMessage = 'WelcomeMessage';
+const TreeItem = 'treeitem';
 
 const Button$1 = 1;
 const Div = 4;
@@ -5507,7 +5509,7 @@ const HandleDragStart = 17;
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
+    className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
     childCount: 1
   }, {
@@ -5549,7 +5551,7 @@ const getFileIconVirtualDom = icon => {
     type: Img,
     className: FileIcon,
     src: icon,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };
@@ -5623,7 +5625,7 @@ const getExplorerItemVirtualDom = item => {
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
     type: Div,
-    role: TreeItem$1,
+    role: TreeItem,
     className,
     draggable: true,
     title: path,
@@ -5730,126 +5732,13 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   const parentNode = {
     type: Div,
     childCount,
-    className: mergeClassNames(Viewlet, Explorer),
-    role: None$2
+    className: mergeClassNames(Viewlet, Explorer$1),
+    role: None
   };
   const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets), ...scrollBarDom, ...errorDom];
   return dom;
 };
 
-const None$1 = 0;
-const Right = 1;
-const Down = 2;
-
-const getChevronType = (type, useChevrons) => {
-  if (!useChevrons) {
-    return None$1;
-  }
-  switch (type) {
-    case Directory:
-      return Right;
-    case DirectoryExpanded:
-    case DirectoryExpanding:
-      return Down;
-    default:
-      return None$1;
-  }
-};
-
-const None = 0;
-const Expanded = 1;
-const Collapsed = 2;
-
-const getExpandedType = type => {
-  switch (type) {
-    case Directory:
-      return Collapsed;
-    case DirectoryExpanding:
-    case DirectoryExpanded:
-      return Expanded;
-    default:
-      return None;
-  }
-};
-
-const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
-  let className = TreeItem;
-  className = mergeClassNames(className, `Indent-${depth}`);
-  if (isSelected || isFocused) {
-    className = mergeClassNames(className, TreeItemActive);
-  }
-  if (isDropping) {
-    className = mergeClassNames(className, 'DropTarget');
-  }
-  return className;
-};
-
-// TODO make all of these variable configurable
-const defaultPaddingLeft = 4;
-const defaultIndent = 8;
-
-// TODO make chevron size configurable
-const chevronSize = 22;
-const getTreeItemIndentWithChevron = (depth, chevron) => {
-  // TODO use numeric value here, convert to string value in renderer process
-  const extraSpace = chevron ? 0 : chevronSize;
-  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
-};
-
-const ariaExpandedValues = [undefined, 'true', 'false'];
-const getEditingChevron = direntType => {
-  switch (direntType) {
-    case EditingDirectoryExpanded:
-      return Down;
-    case EditingFolder:
-      return Right;
-    default:
-      return None$1;
-  }
-};
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris = []) => {
-  const visible = [];
-  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
-  let iconIndex = 0;
-  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
-    const item = items[i];
-    let chevron = getChevronType(item.type, useChevrons);
-    const isFocused = i === focusedIndex;
-    const id = isFocused ? 'TreeItemActive' : undefined;
-    const isSelected = item.selected;
-    const isCut = cutItems.includes(item.path);
-    const isDropping = dropTargets.includes(i);
-    const isIgnored = sourceControlIgnoredUris.includes(item.path);
-    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, item.depth); // TODO compute classname in dom function
-    const expanded = getExpandedType(item.type);
-    const ariaExpanded = ariaExpandedValues[expanded];
-    const isEditing = i === editingIndex;
-    let icon = icons[iconIndex++];
-    if (isEditing) {
-      icon = editingIcon;
-      chevron = getEditingChevron(item.type);
-    }
-    const indent = indentFn(item.depth, chevron);
-    visible.push({
-      ...item,
-      posInSet: item.posInSet ?? i + 1,
-      setSize: item.setSize ?? items.length,
-      isEditing: isEditing,
-      hasEditingError: isEditing && Boolean(editingErrorMessage),
-      icon,
-      indent,
-      ariaExpanded,
-      chevron,
-      id,
-      className,
-      isCut,
-      isIgnored,
-      index: i
-    });
-  }
-  return visible;
-};
-
 const renderItems = (oldState, newState) => {
   const {
     cutItems,
@@ -5981,7 +5870,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };
@@ -6367,14 +6256,14 @@ const updateEditingValue = async (state, value, inputSource = User) => {
 };
 
 const commandMap = {
-  'Explorer.acceptEdit': wrapCommand(acceptEdit),
-  'Explorer.cancelEdit': wrapCommand(cancelEdit),
+  'Explorer.acceptEdit': wrapListItemCommand(acceptEdit),
+  'Explorer.cancelEdit': wrapListItemCommand(cancelEdit),
   'Explorer.cancelTypeAhead': wrapCommand(cancelTypeAhead),
-  'Explorer.collapseAll': wrapCommand(collapseAll),
+  'Explorer.collapseAll': wrapListItemCommand(collapseAll),
   'Explorer.copyPath': wrapCommand(copyPath),
   'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
-  'Explorer.expandAll': wrapCommand(expandAll),
-  'Explorer.expandRecursively': wrapCommand(expandRecursively),
+  'Explorer.expandAll': wrapListItemCommand(expandAll),
+  'Explorer.expandRecursively': wrapListItemCommand(expandRecursively),
   'Explorer.focus': wrapCommand(focus),
   'Explorer.focusFirst': wrapCommand(focusFirst),
   'Explorer.focusIndex': wrapCommand(focusIndex),
@@ -6391,7 +6280,7 @@ const commandMap = {
   'Explorer.handleArrowRight': wrapCommand(handleArrowRight),
   'Explorer.handleEscape': wrapCommand(handleEscape),
   'Explorer.handleBlur': wrapCommand(handleBlur),
-  'Explorer.handleClick': wrapCommand(handleClick),
+  'Explorer.handleClick': wrapListItemCommand(handleClick),
   'Explorer.handleClickAt': wrapCommand(handleClickAt),
   'Explorer.handleClickCurrent': wrapCommand(handleClickCurrent),
   'Explorer.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
@@ -6409,25 +6298,25 @@ const commandMap = {
   'Explorer.handleInputClick': wrapCommand(handleInputClick),
   'Explorer.handleInputKeyDown': wrapCommand(handleInputKeyDown),
   'Explorer.handleKeyDown': wrapCommand(handleKeyDown),
-  'Explorer.handlePaste': wrapCommand(handlePaste),
+  'Explorer.handlePaste': wrapListItemCommand(handlePaste),
   'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
   'Explorer.handleUpload': wrapCommand(handleUpload),
   'Explorer.handleWheel': wrapCommand(handleWheel),
-  'Explorer.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
-  'Explorer.loadContent': wrapCommand(loadContent),
-  'Explorer.newFile': wrapCommand(newFile),
-  'Explorer.newFolder': wrapCommand(newFolder),
+  'Explorer.handleWorkspaceChange': wrapListItemCommand(handleWorkspaceChange),
+  'Explorer.loadContent': wrapListItemCommand(loadContent),
+  'Explorer.newFile': wrapListItemCommand(newFile),
+  'Explorer.newFolder': wrapListItemCommand(newFolder),
   'Explorer.openContainingFolder': wrapCommand(openContainingFolder),
-  'Explorer.refresh': wrapCommand(refresh),
-  'Explorer.removeDirent': wrapCommand(removeDirent),
-  'Explorer.renameDirent': wrapCommand(renameDirent),
+  'Explorer.refresh': wrapListItemCommand(refresh),
+  'Explorer.removeDirent': wrapListItemCommand(removeDirent),
+  'Explorer.renameDirent': wrapListItemCommand(renameDirent),
   'Explorer.restoreState': restoreState,
   'Explorer.revealItem': wrapCommand(revealItem),
   'Explorer.selectAll': wrapCommand(selectAll),
   'Explorer.selectDown': wrapCommand(selectDown),
   'Explorer.selectIndices': wrapCommand(setSelectedIndices),
   'Explorer.selectUp': wrapCommand(selectUp),
-  'Explorer.setDeltaY': wrapCommand(setDeltaY),
+  'Explorer.setDeltaY': wrapListItemCommand(setDeltaY),
   'Explorer.setSelectedIndices': wrapCommand(setSelectedIndices),
   'Explorer.toggleIndividualSelection': wrapCommand(toggleIndividualSelection),
   'Explorer.updateEditingValue': wrapCommand(updateEditingValue),

package/package.json

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