@lvce-editor/explorer-view 3.17.0 → 3.19.0

package/dist/explorerViewWorkerMain.js

@@ -1137,13 +1137,13 @@ const Remove = 5;
 
 const Text = 12;
 
-const TargetValue = 'event.target.value';
+const Button$3 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
-const Button$3 = 'event.button';
+const CtrlKey = 'event.ctrlKey';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
-const CtrlKey = 'event.ctrlKey';
+const TargetValue = 'event.target.value';
 
 const Enter = 3;
 const Escape = 8;
@@ -1172,6 +1172,7 @@ const RendererWorker$1 = 1;
 
 const FocusElementByName = 'Viewlet.focusElementByName';
 const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
 const SetFocusContext = 'Viewlet.setFocusContext';
 
 const FocusExplorer = 13;
@@ -2640,6 +2641,183 @@ const copyRelativePath = async state => {
   return state;
 };
 
+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,
@@ -2700,7 +2878,11 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0,
+    errorMessageLeft: 0,
+    errorMessageTop: 0,
+    visibleExplorerItems: []
   };
   set(uid, state, state);
 };
@@ -2752,12 +2934,20 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    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 && oldState.maxIndent === newState.maxIndent;
+};
+
 const isEqual$5 = (oldState, newState) => {
   return oldState.isPointerDown || !newState.isPointerDown;
 };
@@ -2767,7 +2957,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) => {
@@ -2780,6 +2970,7 @@ const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderSelection = 9;
 const RenderDragData = 10;
+const RenderCss = 11;
 
 const isEqual$1 = (oldState, newState) => {
   if (newState.focus !== Input$1) {
@@ -2788,8 +2979,8 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.focus === Input$1 && newState.focus === Input$1 && oldState.editingValue === newState.editingValue;
 };
 
-const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5];
-const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData];
+const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5, isEqual$6];
+const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -3091,25 +3282,6 @@ const focusPrevious = state => {
   }
 };
 
-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 getKeyBindings = () => {
   return [{
     key: Shift | UpArrow,
@@ -3207,7 +3379,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$4 = 0;
+const None$2 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
@@ -3220,13 +3392,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 = {
@@ -3238,7 +3410,7 @@ const menuEntryOpenContainingFolder = {
 const menuEntryOpenInIntegratedTerminal = {
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal(),
-  flags: None$4,
+  flags: None$2,
   command: /* TODO */'-1'
 };
 const menuEntryCut = {
@@ -3256,7 +3428,7 @@ const menuEntryCopy = {
 const menuEntryPaste = {
   id: 'paste',
   label: paste(),
-  flags: None$4,
+  flags: None$2,
   command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
@@ -3274,13 +3446,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];
@@ -3379,16 +3551,27 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
     minLineY,
     maxLineY,
     itemHeight,
-    fileIconCache
+    fileIconCache,
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingIndex,
+    editingType,
+    editingValue,
+    focusedIndex,
+    useChevrons,
+    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) {
@@ -3401,30 +3584,34 @@ const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) =>
       icons,
       newFileIconCache
     } = await getFileIcons(parts, fileIconCache);
+    const visibleExplorerItems = getVisibleExplorerItems(newDirents, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
     return {
       ...state,
-      items: newDirents,
-      icons,
+      deltaY,
       fileIconCache: newFileIconCache,
-      focusedIndex: index,
       focused: keepFocus,
-      minLineY: newMinLineY,
+      focusedIndex: index,
+      icons,
+      items: newDirents,
       maxLineY: newMaxLineY,
-      deltaY
+      minLineY: newMinLineY,
+      visibleExplorerItems
     };
   }
-  const parts = newDirents.slice(state.minLineY, state.maxLineY);
+  const parts = newDirents.slice(minLineY, maxLineY);
   const {
     icons,
     newFileIconCache
   } = await getFileIcons(parts, fileIconCache);
+  const visibleExplorerItems = getVisibleExplorerItems(newDirents, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
   return {
     ...state,
-    items: newDirents,
-    icons,
     fileIconCache: newFileIconCache,
+    focused: keepFocus,
     focusedIndex: index,
-    focused: keepFocus
+    icons,
+    items: newDirents,
+    visibleExplorerItems
   };
 };
 
@@ -3470,6 +3657,18 @@ const setFocus = key => {
 };
 
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
+  const {
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingIndex,
+    editingType,
+    editingValue,
+    focusedIndex,
+    useChevrons
+  } = state;
   // @ts-ignore
   dirent.type = DirectoryExpanding;
   // TODO handle error
@@ -3502,15 +3701,19 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
     icons,
     newFileIconCache
   } = await getFileIcons(parts, state.fileIconCache);
+  const visibleExplorerItems = getVisibleExplorerItems(newDirents, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
+
+  // TODO use functional focus rendering
   await setFocus(FocusExplorer);
   return {
     ...state,
-    items: newDirents,
-    icons,
     fileIconCache: newFileIconCache,
-    focusedIndex: newIndex,
     focused: keepFocus,
-    maxLineY
+    focusedIndex: newIndex,
+    icons,
+    items: newDirents,
+    maxLineY,
+    visibleExplorerItems
   };
 };
 
@@ -3820,7 +4023,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 {
@@ -3832,7 +4035,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;
 };
 
@@ -3846,7 +4049,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;
 };
 
@@ -4067,8 +4270,17 @@ const refresh = async state => {
     height,
     itemHeight,
     fileIconCache,
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingIndex,
+    editingType,
+    editingValue,
+    focusedIndex,
     items,
-    focusedIndex
+    useChevrons
   } = state;
   const expandedDirents = getExpandedDirents(items);
   const expandedPaths = getPaths(expandedDirents);
@@ -4086,13 +4298,15 @@ const refresh = async state => {
   if (focusedIndex >= newItems.length) {
     newFocusedIndex = newItems.length - 1;
   }
+  const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
   return {
     ...state,
-    items: newItems,
     fileIconCache: newFileIconCache,
+    focusedIndex: newFocusedIndex,
     icons,
+    items: newItems,
     maxLineY,
-    focusedIndex: newFocusedIndex
+    visibleExplorerItems
   };
 };
 
@@ -4712,7 +4926,7 @@ const handlePasteCut = async (state, nativeFiles) => {
   };
 };
 
-const None$3 = 'none';
+const None$1 = 'none';
 
 const handlePaste = async state => {
   const nativeFiles = await readNativeFiles();
@@ -4733,7 +4947,7 @@ 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;
   }
 
@@ -4780,7 +4994,17 @@ const handleUpload = async (state, dirents) => {
 const setDeltaY = async (state, deltaY) => {
   const {
     itemHeight,
+    useChevrons,
     height,
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingIndex,
+    editingType,
+    editingValue,
+    focusedIndex,
     items
   } = state;
   if (deltaY < 0) {
@@ -4798,13 +5022,15 @@ const setDeltaY = async (state, deltaY) => {
     icons,
     newFileIconCache
   } = await getFileIcons(visible, state.fileIconCache);
+  const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
   return {
     ...state,
     deltaY,
-    minLineY,
-    maxLineY,
+    fileIconCache: newFileIconCache,
     icons,
-    fileIconCache: newFileIconCache
+    maxLineY,
+    minLineY,
+    visibleExplorerItems
   };
 };
 
@@ -4951,7 +5177,16 @@ const getSavedRoot = (savedState, workspacePath) => {
 };
 const loadContent = async (state, savedState) => {
   const {
-    fileIconCache
+    fileIconCache,
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingIndex,
+    editingType,
+    editingValue,
+    focusedIndex
   } = state;
   const {
     useChevrons,
@@ -4981,19 +5216,22 @@ const loadContent = async (state, savedState) => {
     icons,
     newFileIconCache
   } = await getFileIcons(visible, fileIconCache);
+  const visibleExplorerItems = getVisibleExplorerItems(restoredDirents, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
   return {
     ...state,
-    root,
-    items: restoredDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    minLineY,
+    confirmDelete,
     deltaY,
+    excluded,
+    fileIconCache: newFileIconCache,
+    icons,
+    items: restoredDirents,
+    maxIndent: 10,
     maxLineY,
+    minLineY,
     pathSeparator,
-    excluded,
+    root,
     useChevrons,
-    confirmDelete
+    visibleExplorerItems
   };
 };
 
@@ -5130,13 +5368,20 @@ const newDirent = async (state, editingType) => {
   await setFocus(ExplorerEditBox);
   // TODO do it like vscode, select position between folders and files
   const {
-    focusedIndex,
-    items,
     minLineY,
     height,
     itemHeight,
+    root,
     fileIconCache,
-    root
+    cutItems,
+    sourceControlIgnoredUris,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
+    editingValue,
+    focusedIndex,
+    items,
+    useChevrons
   } = state;
   const index = getFittingIndex(items, focusedIndex);
   const direntType = getNewDirentType(editingType);
@@ -5148,17 +5393,19 @@ const newDirent = async (state, editingType) => {
     newFileIconCache
   } = await getFileIcons(visible, fileIconCache);
   const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
+  const visibleExplorerItems = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems, sourceControlIgnoredUris);
   return {
     ...state,
-    items: newDirents,
     editingIndex,
     editingType,
     editingValue: '',
-    focusedIndex: editingIndex,
+    fileIconCache: newFileIconCache,
     focus: Input$1,
+    focusedIndex: editingIndex,
     icons,
-    fileIconCache: newFileIconCache,
-    maxLineY
+    items: newDirents,
+    maxLineY,
+    visibleExplorerItems
   };
 };
 
@@ -5307,6 +5554,25 @@ const renameDirent = state => {
   };
 };
 
+const renderCss = (oldState, newState) => {
+  const {
+    scrollBarHeight,
+    uid,
+    maxIndent
+  } = newState;
+  const rules = [`.Explorer {
+  --ScrollBarThumbHeight: ${scrollBarHeight}px;
+`];
+  for (let i = 0; i < maxIndent; i++) {
+    const indent = getTreeItemIndent(i);
+    rules.push(`.Indent-${i} {
+  padding-left: ${indent};
+}`);
+  }
+  const css = rules.join('\n');
+  return [SetCss, uid, css];
+};
+
 const getDragLabel = urls => {
   if (urls.length === 1) {
     return getBaseName('/', urls[0]);
@@ -5392,50 +5658,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;
@@ -5474,7 +5700,7 @@ const HandleDragStart = 17;
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
+    className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
     childCount: 1
   }, {
@@ -5516,7 +5742,7 @@ const getFileIconVirtualDom = icon => {
     type: Img,
     className: FileIcon,
     src: icon,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };
@@ -5528,7 +5754,10 @@ const getInputClassName = hasEditingError => {
   return ExplorerInputBox;
 };
 
-const getInputDom = hasEditingError => {
+const getInputDom = (isEditing, hasEditingError) => {
+  if (!isEditing) {
+    return [];
+  }
   const ariaLabel = typeAFileName();
   return [{
     type: Input,
@@ -5551,7 +5780,10 @@ const label = {
   className: Label,
   childCount: 1
 };
-const getLabelDom = (name, isDimmed) => {
+const getLabelDom = (isEditing, name, isDimmed) => {
+  if (isEditing) {
+    return [];
+  }
   if (isDimmed) {
     return [{
       type: Div,
@@ -5562,13 +5794,6 @@ const getLabelDom = (name, isDimmed) => {
   return [label, text(name)];
 };
 
-const getInputOrLabelDom = (isEditing, hasEditingError, name, isCut, isIgnored) => {
-  if (isEditing) {
-    return getInputDom(hasEditingError);
-  }
-  return getLabelDom(name, isCut || isIgnored);
-};
-
 const getExplorerItemVirtualDom = item => {
   const {
     ariaExpanded,
@@ -5591,7 +5816,7 @@ const getExplorerItemVirtualDom = item => {
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
     type: Div,
-    role: TreeItem$1,
+    role: TreeItem,
     className,
     draggable: true,
     title: path,
@@ -5605,7 +5830,7 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id,
     'data-index': index
-  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name, isCut, isIgnored)];
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputDom(isEditing, hasEditingError), ...getLabelDom(isEditing, name, isCut || isIgnored)];
 };
 
 const getActiveDescendant = focusedIndex => {
@@ -5698,130 +5923,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) => {
-  let className = TreeItem;
-  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$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); // 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,
@@ -5886,6 +5994,8 @@ const getRenderer = diffType => {
       return renderEditingSelection;
     case RenderDragData:
       return renderDragData;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }
@@ -5951,7 +6061,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$2,
+    role: None,
     childCount: 0
   };
 };

package/package.json

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