@lvce-editor/explorer-view 2.22.0 → 2.24.0

package/dist/explorerViewWorkerMain.js

@@ -985,6 +985,8 @@ const getPath = dirent => {
   return dirent.path;
 };
 
+const DELTA_EDITING = 100;
+
 const BlockDevice = 1;
 const CharacterDevice = 2;
 const Directory = 3;
@@ -996,6 +998,8 @@ const Symlink = 9;
 const SymLinkFile = 10;
 const SymLinkFolder = 11;
 const Unknown = 12;
+const EditingFile = File + DELTA_EDITING;
+const EditingFolder = Directory + DELTA_EDITING;
 
 const RendererWorker = 1;
 
@@ -1013,12 +1017,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);
 };
 
@@ -1156,7 +1168,7 @@ const getNewDirentsAccept = async (state, newDirentType, createFn) => {
   newDirent.posInSet = posInSet;
   // @ts-ignore
   items.splice(insertIndex + 1, 0, newDirent);
-  const newDirents = [...items];
+  const newDirents = [...items].filter(item => item.type !== EditingFile && item.type !== EditingFolder);
   return {
     dirents: newDirents,
     newFocusedIndex: insertIndex + 1
@@ -1406,12 +1418,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,
@@ -1977,6 +2018,16 @@ const focusNext = state => {
   return focusIndex(state, focusedIndex + 1);
 };
 
+const focusNone = state => {
+  const {
+    focusedIndex
+  } = state;
+  if (focusedIndex === -1) {
+    return state;
+  }
+  return focusIndex(state, -1);
+};
+
 const focusPrevious = state => {
   const {
     focusedIndex,
@@ -1995,7 +2046,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'setSelectedIndices', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'updateEditingValue', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'updateEditingValue', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2079,7 +2130,7 @@ const getKeyBindings = () => {
     when: FocusExplorer
   }, {
     key: F2,
-    command: 'Explorer.rename',
+    command: 'Explorer.renameDirent',
     when: FocusExplorer
   }, {
     key: Escape,
@@ -3187,6 +3238,10 @@ const handleIconThemeChange = state => {
   return updateIcons(state);
 };
 
+const handleInputBlur = state => {
+  return cancelEdit(state);
+};
+
 // TODO add lots of tests for this
 const updateRoot = async state1 => {
   // @ts-ignore
@@ -3540,28 +3595,118 @@ const handleWorkspaceChange = async state => {
 
 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));
+  if (existingChildren.length === 0) {
+    const childDirents = await readDirWithFileTypes(parentPath);
+    existingChildren = childDirents.map((dirent, index) => ({
+      name: dirent.name,
+      type: dirent.type,
+      path: `${parentPath}/${dirent.name}`,
+      depth,
+      selected: false,
+      posInSet: index + 1,
+      setSize: childDirents.length,
+      icon: ''
+    }));
+  }
+  const updatedChildren = existingChildren.map((child, index) => ({
+    ...child,
+    posInSet: index + 1,
+    setSize: existingChildren.length + 2
+  }));
+  const newDirent = {
+    name: '',
+    type: direntType,
+    path: parentPath,
+    depth,
+    selected: false,
+    posInSet: updatedChildren.length + 1,
+    setSize: existingChildren.length + 2,
+    icon: ''
+  };
+  const allChildDirents = [...updatedChildren, newDirent];
+  return allChildDirents;
+};
+
+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;
+  }
+  const parentPath = focusedItem.path;
+  const depth = focusedItem.depth + 1;
+  const updatedChildren = await getNewChildDirentsForNewDirent(items, depth, parentPath, type);
+
+  // Create new array with updated items
+  const parentIndex = focusedIndex;
+  const itemsBeforeParent = items.slice(0, parentIndex);
+  const itemsAfterChildren = items.slice(parentIndex + updatedChildren.length);
+  const updatedParent = {
+    ...items[parentIndex],
+    setSize: (items[parentIndex]?.setSize || 0) + 1
+  };
+  return [...itemsBeforeParent, updatedParent, ...updatedChildren, ...itemsAfterChildren];
+};
+
+const getNewDirentType = editingType => {
+  switch (editingType) {
+    case CreateFile:
+      return EditingFile;
+    case CreateFolder:
+      return EditingFolder;
+    default:
+      return File;
+  }
+};
+
 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 {
     focusedIndex,
-    items
+    items,
+    minLineY,
+    height,
+    itemHeight,
+    fileIconCache,
+    root
   } = state;
-  if (focusedIndex >= 0) {
-    const dirent = items[focusedIndex];
-    if (dirent.type === Directory) {
-      // TODO handle error
-      // @ts-ignore
-      await handleClickDirectory(state, dirent);
-    }
-  }
+  const direntType = getNewDirentType(editingType);
+  const newDirents = await getNewDirentsForNewDirent(items, focusedIndex, 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,
-    editingIndex: focusedIndex,
+    items: newDirents,
+    editingIndex,
     editingType,
     editingValue: '',
-    focus: Input$1
+    focusedIndex: editingIndex,
+    focus: Input$1,
+    icons,
+    fileIconCache: newFileIconCache,
+    maxLineY
   };
 };
 
@@ -3665,6 +3810,17 @@ 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;
 
@@ -3673,9 +3829,14 @@ const renameDirent = state => {
     focusedIndex,
     items
   } = 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,
@@ -3756,14 +3917,15 @@ const WelcomeMessage = 'WelcomeMessage';
 const HandleClick = 'handleClick';
 const HandleClickOpenFolder = 'handleClickOpenFolder';
 const HandleContextMenu = 'handleContextMenu';
+const HandleDragLeave = 'handleDragLeave';
+const HandleDragOver = 'handleDragOver';
+const HandleDrop = 'handleDrop';
 const HandleEditingInput = 'handleEditingInput';
+const HandleInputBlur = 'handleInputBlur';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
-const HandleDragOver = 'handleDragOver';
-const HandleDrop = 'handleDrop';
-const HandleDragLeave = 'handleDragLeave';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -3822,6 +3984,7 @@ const getInputDom = hasEditingError => {
     className: getClassName$2(hasEditingError),
     id: 'ExplorerInput',
     onInput: HandleEditingInput,
+    onBlur: HandleInputBlur,
     childCount: 0,
     name: ExplorerInput
   }];
@@ -4002,13 +4165,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;
@@ -4017,12 +4179,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,
@@ -4031,29 +4198,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];
@@ -4193,8 +4342,8 @@ const renderActions = uid => {
 
 const renderEventListeners = () => {
   return [{
-    name: HandleListBlur,
-    params: ['handleBlur']
+    name: HandleInputBlur,
+    params: ['handleInputBlur']
   }, {
     name: HandleListFocus,
     params: ['handleFocus', 'event.isTrusted', 'event.target.className']
@@ -4555,18 +4704,25 @@ const terminate = () => {
 };
 
 const getEditingIcon = async (editingType, value) => {
-  if (editingType === File) {
+  if (editingType === CreateFile) {
+    return invoke('IconTheme.getFileIcon', {
+      name: value
+    });
+  }
+  // TODO need renamefile and renamefolder type
+  if (editingType === Rename$1) {
     return invoke('IconTheme.getFileIcon', {
       name: value
     });
   }
-  if (editingType === Directory) {
+  if (editingType === CreateFolder) {
     return invoke('IconTheme.getFolderIcon', {
       name: value
     });
   }
   return '';
 };
+
 const updateEditingValue = async (state, value, inputSource = User) => {
   const editingIcon = await getEditingIcon(state.editingType, value);
   return {
@@ -4592,10 +4748,10 @@ const wrapCommand = fn => {
 };
 
 const commandMap = {
-  'Explorer.getMenuEntries2': getMenuEntries2,
   'Explorer.acceptEdit': wrapCommand(acceptEdit),
   'Explorer.cancelEdit': wrapCommand(cancelEdit),
   'Explorer.collapseAll': wrapCommand(collapseAll),
+  'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
   'Explorer.copyPath': wrapCommand(copyPath),
   'Explorer.copyRelativePath': wrapCommand(copyRelativePath),
   'Explorer.expandAll': wrapCommand(expandAll),
@@ -4604,21 +4760,20 @@ const commandMap = {
   'Explorer.focusIndex': wrapCommand(focusIndex),
   'Explorer.focusLast': wrapCommand(focusLast),
   'Explorer.focusNext': wrapCommand(focusNext),
+  'Explorer.focusNone': wrapCommand(focusNone),
   'Explorer.focusPrevious': wrapCommand(focusPrevious),
   'Explorer.getCommandIds': getCommandIds,
+  'Explorer.getMenuEntries2': getMenuEntries2,
+  'Explorer.getMouseActions': getMouseActions,
   'Explorer.handleArrowLeft': wrapCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapCommand(handleArrowRight),
   'Explorer.handleBlur': wrapCommand(handleBlur),
-  'Explorer.selectUp': wrapCommand(selectUp),
-  'Explorer.selectDown': wrapCommand(selectDown),
-  'Explorer.selectAll': wrapCommand(selectAll),
   'Explorer.handleClick': wrapCommand(handleClick),
   'Explorer.handleClickAt': wrapCommand(handleClickAt),
   'Explorer.handleClickCurrent': wrapCommand(handleClickCurrent),
   'Explorer.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
   'Explorer.handleClickOpenFolder': wrapCommand(handleClickOpenFolder),
   'Explorer.handleContextMenu': wrapCommand(handleContextMenu),
-  'Explorer.getMouseActions': getMouseActions,
   'Explorer.handleContextMenuKeyboard': wrapCommand(handleContextMenuKeyboard),
   'Explorer.handleCopy': wrapCommand(handleCopy),
   'Explorer.handleDragLeave': wrapCommand(handleDragLeave),
@@ -4640,10 +4795,13 @@ const commandMap = {
   'Explorer.renameDirent': wrapCommand(renameDirent),
   'Explorer.restoreState': restoreState,
   'Explorer.revealItem': wrapCommand(revealItem),
+  'Explorer.selectAll': wrapCommand(selectAll),
+  'Explorer.selectDown': wrapCommand(selectDown),
+  'Explorer.selectUp': wrapCommand(selectUp),
   'Explorer.setDeltaY': wrapCommand(setDeltaY),
+  'Explorer.setSelectedIndices': wrapCommand(setSelectedIndices),
   'Explorer.updateEditingValue': wrapCommand(updateEditingValue),
   'Explorer.updateIcons': wrapCommand(updateIcons),
-  'Explorer.setSelectedIndices': wrapCommand(setSelectedIndices),
   // not wrapped
   'Explorer.create2': create2,
   'Explorer.diff2': diff2,

package/package.json

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