@lvce-editor/explorer-view 2.23.0 → 2.25.0

package/dist/explorerViewWorkerMain.js

@@ -894,6 +894,7 @@ const OpenInIntegratedTerminal = 'Open in integrated Terminal';
 const Paste = 'Paste';
 const RefreshExplorer = 'Refresh Explorer';
 const Rename = 'Rename';
+const TypeAFileName = 'Type file name. Press Enter to confirm or Escape to cancel.'; // TODO use keybinding
 const YouHaveNotYetOpenedAFolder = 'You have not yet opened a folder';
 
 const newFile$1 = () => {
@@ -947,6 +948,9 @@ const openFolder$1 = () => {
 const fileOrFolderNameMustBeProvided = () => {
   return i18nString(FileOrFolderNameMustBeProvider);
 };
+const typeAFileName = () => {
+  return i18nString(TypeAFileName);
+};
 
 const List = 1;
 const Input$1 = 2;
@@ -985,6 +989,8 @@ const getPath = dirent => {
   return dirent.path;
 };
 
+const DELTA_EDITING = 100;
+
 const BlockDevice = 1;
 const CharacterDevice = 2;
 const Directory = 3;
@@ -996,8 +1002,8 @@ const Symlink = 9;
 const SymLinkFile = 10;
 const SymLinkFolder = 11;
 const Unknown = 12;
-const EditingFile = 13;
-const EditingFolder = 14;
+const EditingFile = File + DELTA_EDITING;
+const EditingFolder = Directory + DELTA_EDITING;
 
 const RendererWorker = 1;
 
@@ -1015,12 +1021,20 @@ const invoke = (method, ...params) => {
   return rpc.invoke(method, ...params);
 };
 
+const getFileIcon = async name => {
+  return invoke('IconTheme.getFileIcon', {
+    name
+  });
+};
+
+const getFolderIcon = async name => {
+  return invoke('IconTheme.getFolderIcon', {
+    name
+  });
+};
+
 const requestFileIcons = async requests => {
-  const promises = requests.map(request => request.type === File ? invoke('IconTheme.getFileIcon', {
-    name: request.name
-  }) : invoke('IconTheme.getFolderIcon', {
-    name: request.name
-  }));
+  const promises = requests.map(request => request.type === File ? getFileIcon(request.name) : getFolderIcon(request.name));
   return Promise.all(promises);
 };
 
@@ -1408,12 +1422,41 @@ const acceptEdit = async state => {
   }
 };
 
+const getNewDirentsForCancelRename = (items, editingIndex) => {
+  const item = items[editingIndex];
+  const newItems = [...items];
+  newItems[editingIndex] = {
+    ...item,
+    type: item.type - DELTA_EDITING
+  };
+  return newItems;
+};
+
+const isNormalItem = item => {
+  return item.type !== EditingFile && item.type !== EditingFolder;
+};
 const cancelEdit = state => {
   const {
-    editingIndex
+    editingIndex,
+    editingType
   } = state;
+  if (editingType === Rename$1) {
+    const newItems = getNewDirentsForCancelRename(state.items, editingIndex);
+    return {
+      ...state,
+      items: newItems,
+      focusedIndex: editingIndex,
+      focused: true,
+      editingIndex: -1,
+      editingValue: '',
+      editingType: None$5,
+      focus: List
+    };
+  }
+  const filteredItems = state.items.filter(isNormalItem);
   return {
     ...state,
+    items: filteredItems,
     focusedIndex: editingIndex,
     focused: true,
     editingIndex: -1,
@@ -1535,7 +1578,11 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     platform,
     focus: 0,
     editingErrorMessage: '',
-    inputSource: 0
+    inputSource: 0,
+    editingSelection: {
+      start: 0,
+      end: 0
+    }
   };
   set(uid, state, state);
 };
@@ -1572,7 +1619,11 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     platform,
     focus: 0,
     editingErrorMessage: '',
-    inputSource: 0
+    inputSource: 0,
+    editingSelection: {
+      start: 0,
+      end: 0
+    }
   };
   set(state.uid, state, state);
   return state;
@@ -1582,15 +1633,21 @@ const RenderItems = 4;
 const RenderFocus = 6;
 const RenderFocusContext = 7;
 const RenderValue = 8;
+const RenderSelection = 9;
 
-const diffType$2 = RenderFocus;
-const isEqual$3 = (oldState, newState) => {
+const diffType$3 = RenderFocus;
+const isEqual$4 = (oldState, newState) => {
   return oldState.focused === newState.focused && oldState.focus === newState.focus;
 };
 
-const diffType$1 = RenderItems;
+const diffType$2 = RenderItems;
+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;
+};
+
+const diffType$1 = RenderSelection;
 const isEqual$2 = (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;
+  return oldState.editingSelection.start === newState.editingSelection.start && oldState.editingSelection.end === newState.editingSelection.end;
 };
 
 const diffType = RenderValue;
@@ -1601,8 +1658,8 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.focus === Input$1 && newState.focus === Input$1 && oldState.editingValue === newState.editingValue;
 };
 
-const modules = [isEqual$2, isEqual$3, isEqual$3, isEqual$1];
-const numbers = [diffType$1, diffType$2, RenderFocusContext, diffType];
+const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2];
+const numbers = [diffType$2, diffType$3, RenderFocusContext, diffType, diffType$1];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -3580,7 +3637,7 @@ const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntTy
   const newDirent = {
     name: '',
     type: direntType,
-    path: '',
+    path: parentPath,
     depth,
     selected: false,
     posInSet: updatedChildren.length + 1,
@@ -3591,7 +3648,20 @@ const getNewChildDirentsForNewDirent = async (items, depth, parentPath, direntTy
   return allChildDirents;
 };
 
-const getNewDirentsForNewDirent = async (items, focusedIndex, type) => {
+const getNewDirentsForNewDirent = async (items, focusedIndex, type, root) => {
+  if (items.length === 0 || focusedIndex === -1) {
+    const newDirent = {
+      name: '',
+      type,
+      path: root,
+      depth: 0,
+      selected: false,
+      posInSet: 1,
+      setSize: 1,
+      icon: ''
+    };
+    return [...items, newDirent];
+  }
   const focusedItem = items[focusedIndex];
   if (!focusedItem) {
     return items;
@@ -3632,10 +3702,11 @@ const newDirent = async (state, editingType) => {
     minLineY,
     height,
     itemHeight,
-    fileIconCache
+    fileIconCache,
+    root
   } = state;
   const direntType = getNewDirentType(editingType);
-  const newDirents = await getNewDirentsForNewDirent(items, focusedIndex, direntType);
+  const newDirents = await getNewDirentsForNewDirent(items, focusedIndex, direntType, root);
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
   const visible = newDirents.slice(minLineY, maxLineY);
   const {
@@ -3649,6 +3720,7 @@ const newDirent = async (state, editingType) => {
     editingIndex,
     editingType,
     editingValue: '',
+    focusedIndex: editingIndex,
     focus: Input$1,
     icons,
     fileIconCache: newFileIconCache,
@@ -3756,25 +3828,52 @@ const removeDirent = async state => {
   };
 };
 
+const getNewDirentsForRename = (items, focusedIndex) => {
+  const item = items[focusedIndex];
+  const newItems = [...items];
+  const editingType = item.type === File ? EditingFile : EditingFolder;
+  newItems[focusedIndex] = {
+    ...item,
+    type: editingType
+  };
+  return newItems;
+};
+
 const User = 1;
 const Script = 2;
 
 const renameDirent = state => {
   const {
     focusedIndex,
-    items
+    items,
+    icons,
+    minLineY
   } = state;
+  if (items.length === 0) {
+    return state;
+  }
   const item = items[focusedIndex];
+  const newItems = getNewDirentsForRename(items, focusedIndex);
   return {
     ...state,
+    items: newItems,
     editingIndex: focusedIndex,
     editingType: Rename$1,
     editingValue: item.name,
+    editingIcon: icons[focusedIndex - minLineY],
+    editingSelection: {
+      start: 0,
+      end: item.name.length
+    },
     focus: Input$1,
     inputSource: Script
   };
 };
 
+const renderEditingSelection = (oldState, newState) => {
+  return ['Viewlet.setSelection', newState.editingSelection];
+};
+
 const ExplorerInput = 'ExplorerInput';
 
 const renderFocus$1 = (oldState, newState) => {
@@ -3909,6 +4008,7 @@ const getClassName$2 = hasEditingError => {
   return InputBox;
 };
 const getInputDom = hasEditingError => {
+  const ariaLabel = typeAFileName();
   return [{
     type: Input,
     className: getClassName$2(hasEditingError),
@@ -3916,7 +4016,11 @@ const getInputDom = hasEditingError => {
     onInput: HandleEditingInput,
     onBlur: HandleInputBlur,
     childCount: 0,
-    name: ExplorerInput
+    name: ExplorerInput,
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    spellcheck: 'false',
+    ariaLabel: ariaLabel
   }];
 };
 
@@ -4095,13 +4199,12 @@ const getClassName = (isSelected, isFocused) => {
   }
   return TreeItem;
 };
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets) => {
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon) => {
   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];
-    const icon = icons[iconIndex++];
     const chevron = getChevronType(item.type, useChevrons);
     const indent = indentFn(item.depth, chevron);
     const isFocused = i === focusedIndex;
@@ -4110,12 +4213,17 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     const className = getClassName(isSelected, isFocused);
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
-
-    // @ts-ignore
+    const isEditing = i === editingIndex;
+    let icon = icons[iconIndex++];
+    if (isEditing) {
+      icon = editingIcon;
+    }
     visible.push({
       ...item,
-      isEditing: i === editingIndex,
-      hasEditingError: i === editingIndex && Boolean(editingErrorMessage),
+      posInSet: item.posInSet ?? i + 1,
+      setSize: item.setSize ?? items.length,
+      isEditing: isEditing,
+      hasEditingError: isEditing && Boolean(editingErrorMessage),
       icon,
       indent,
       ariaExpanded,
@@ -4124,29 +4232,11 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
       className
     });
   }
-  if (editingType !== None$5 && editingIndex === -1) {
-    visible.push({
-      depth: 3,
-      posInSet: 1,
-      setSize: 1,
-      icon: '',
-      name: 'new',
-      path: '/test/new',
-      isEditing: true,
-      hasEditingError: Boolean(editingErrorMessage),
-      indent: '',
-      ariaExpanded: undefined,
-      chevron: 0,
-      id: undefined,
-      className: TreeItem,
-      selected: false
-    });
-  }
   return visible;
 };
 
 const renderItems = (oldState, newState) => {
-  const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.editingErrorMessage, newState.icons, newState.useChevrons);
+  const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.editingErrorMessage, newState.icons, newState.useChevrons, newState.dropTargets, newState.editingIcon);
   const isWide = newState.width > 450;
   const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets);
   return ['Viewlet.setDom2', dom];
@@ -4172,6 +4262,8 @@ const getRenderer = diffType => {
       return renderFocus;
     case RenderValue:
       return renderValue;
+    case RenderSelection:
+      return renderEditingSelection;
     default:
       throw new Error('unknown renderer');
   }
@@ -4180,6 +4272,10 @@ const getRenderer = diffType => {
 const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
   for (const item of diffResult) {
+    if (item === RenderSelection) {
+      // TODO support this in the future
+      continue;
+    }
     const fn = getRenderer(item);
     const result = fn(oldState, newState);
     if (result.length > 0) {
@@ -4647,21 +4743,34 @@ const terminate = () => {
   globalThis.close();
 };
 
-const getEditingIcon = async (editingType, value) => {
-  if (editingType === File) {
+const getEditingIcon = async (editingType, value, direntType) => {
+  if (editingType === CreateFile) {
     return invoke('IconTheme.getFileIcon', {
       name: value
     });
   }
-  if (editingType === Directory) {
+  if (editingType === Rename$1) {
+    if (direntType === File || direntType === EditingFile) {
+      return invoke('IconTheme.getFileIcon', {
+        name: value
+      });
+    }
+    if (direntType === Directory || direntType === EditingFolder) {
+      return invoke('IconTheme.getFolderIcon', {
+        name: value
+      });
+    }
+  }
+  if (editingType === CreateFolder) {
     return invoke('IconTheme.getFolderIcon', {
       name: value
     });
   }
   return '';
 };
+
 const updateEditingValue = async (state, value, inputSource = User) => {
-  const editingIcon = await getEditingIcon(state.editingType, value);
+  const editingIcon = await getEditingIcon(state.editingType, value, state.items[state.editingIndex]?.type);
   return {
     ...state,
     editingValue: value,

package/package.json

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