@lvce-editor/explorer-view 2.24.0 → 2.26.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;
@@ -1000,6 +1004,7 @@ const SymLinkFolder = 11;
 const Unknown = 12;
 const EditingFile = File + DELTA_EDITING;
 const EditingFolder = Directory + DELTA_EDITING;
+const EditingDirectoryExpanded = DirectoryExpanded + DELTA_EDITING;
 
 const RendererWorker = 1;
 
@@ -1418,12 +1423,19 @@ const acceptEdit = async state => {
   }
 };
 
+const normalizeDirentType = direntType => {
+  if (direntType > DELTA_EDITING) {
+    return direntType - DELTA_EDITING;
+  }
+  return direntType;
+};
+
 const getNewDirentsForCancelRename = (items, editingIndex) => {
   const item = items[editingIndex];
   const newItems = [...items];
   newItems[editingIndex] = {
     ...item,
-    type: item.type - DELTA_EDITING
+    type: normalizeDirentType(item.type)
   };
   return newItems;
 };
@@ -1574,7 +1586,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);
 };
@@ -1611,7 +1627,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;
@@ -1621,15 +1641,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;
@@ -1640,8 +1666,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 = [];
@@ -2046,7 +2072,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', '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 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', 'handleInputClick', '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;
@@ -2597,6 +2623,18 @@ const getClickFn = direntType => {
   }
 };
 
+const resetEditing = {
+  editingIndex: -1,
+  editingValue: '',
+  editingType: None$5,
+  editingIcon: '',
+  editingErrorMessage: '',
+  editingSelection: {
+    start: 0,
+    end: 0
+  }
+};
+
 // TODO viewlet should only have create and refresh functions
 // every thing else can be in a separate module <viewlet>.lazy.js
 // and  <viewlet>.ipc.js
@@ -2626,8 +2664,16 @@ const handleClick = async (state, index, keepFocus = false) => {
     console.warn(`[explorer] dirent at index ${actualIndex} not found`, state);
     return state;
   }
-  const clickFn = getClickFn(dirent.type);
-  return clickFn(state, dirent, actualIndex, keepFocus);
+  const normalizedType = normalizeDirentType(dirent.type);
+  const clickFn = getClickFn(normalizedType);
+  const newState = await clickFn(state, dirent, actualIndex, keepFocus);
+  if (newState.editingIndex === -1) {
+    return newState;
+  }
+  return {
+    ...newState,
+    ...resetEditing
+  };
 };
 
 // export const handleBlur=()=>{}
@@ -2687,7 +2733,10 @@ const handleClickAtRangeSelection = async (state, index) => {
   return handleRangeSelection(state, min, max);
 };
 
-const handleClickAt = async (state, button, ctrlKey, shiftKey, x, y) => {
+const handleClickAt = async (state, defaultPrevented, button, ctrlKey, shiftKey, x, y) => {
+  if (defaultPrevented) {
+    return state;
+  }
   if (button !== LeftClick) {
     return state;
   }
@@ -3242,6 +3291,10 @@ const handleInputBlur = state => {
   return cancelEdit(state);
 };
 
+const handleInputClick = state => {
+  return state;
+};
+
 // TODO add lots of tests for this
 const updateRoot = async state1 => {
   // @ts-ignore
@@ -3827,7 +3880,9 @@ const Script = 2;
 const renameDirent = state => {
   const {
     focusedIndex,
-    items
+    items,
+    icons,
+    minLineY
   } = state;
   if (items.length === 0) {
     return state;
@@ -3840,11 +3895,20 @@ const renameDirent = state => {
     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) => {
@@ -3892,6 +3956,7 @@ const FocusOutline = 'FocusOutline';
 const ListItems = 'ListItems';
 const IconButton = 'IconButton';
 const InputBox = 'InputBox';
+const ExplorerInputBox = 'ExplorerInputBox';
 const InputValidationError = 'InputValidationError';
 const Label = 'Label';
 const MaskIconChevronDown = 'MaskIconChevronDown';
@@ -3922,6 +3987,7 @@ const HandleDragOver = 'handleDragOver';
 const HandleDrop = 'handleDrop';
 const HandleEditingInput = 'handleEditingInput';
 const HandleInputBlur = 'handleInputBlur';
+const HandleInputClick = 'handleInputClick';
 const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
 const HandlePointerDown = 'handlePointerDown';
@@ -3972,21 +4038,28 @@ const getFileIconVirtualDom = icon => {
   };
 };
 
-const getClassName$2 = hasEditingError => {
+const getInputClassName = hasEditingError => {
   if (hasEditingError) {
-    return mergeClassNames(InputBox, InputValidationError);
+    return mergeClassNames(InputBox, ExplorerInputBox, InputValidationError);
   }
-  return InputBox;
+  return mergeClassNames(InputBox, ExplorerInputBox);
 };
+
 const getInputDom = hasEditingError => {
+  const ariaLabel = typeAFileName();
   return [{
     type: Input,
-    className: getClassName$2(hasEditingError),
+    ariaLabel: ariaLabel,
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: getInputClassName(hasEditingError),
     id: 'ExplorerInput',
-    onInput: HandleEditingInput,
+    name: ExplorerInput,
     onBlur: HandleInputBlur,
-    childCount: 0,
-    name: ExplorerInput
+    onClick: HandleInputClick,
+    onInput: HandleEditingInput,
+    spellcheck: 'false'
   }];
 };
 
@@ -3995,31 +4068,35 @@ const label = {
   className: Label,
   childCount: 1
 };
+const getLabelDom = name => {
+  return [label, text(name)];
+};
+
 const getInputOrLabelDom = (isEditing, hasEditingError, name) => {
   if (isEditing) {
     return getInputDom(hasEditingError);
   }
-  return [label, text(name)];
+  return getLabelDom(name);
 };
 
 const getExplorerItemVirtualDom = item => {
   const {
-    posInSet,
-    setSize,
-    icon,
-    name,
-    path,
-    depth,
-    indent,
+    ariaExpanded,
     chevron,
-    id,
     className,
+    depth,
+    hasEditingError,
+    icon,
+    id,
+    indent,
     isEditing,
-    ariaExpanded,
-    hasEditingError
+    name,
+    path,
+    setSize,
+    posInSet
   } = item;
   const chevronDom = getChevronVirtualDom(chevron);
-  const dom = [{
+  return [{
     type: Div,
     role: TreeItem$1,
     className,
@@ -4035,7 +4112,6 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name)];
-  return dom;
 };
 
 const getExplorerWelcomeVirtualDom = isWide => {
@@ -4066,7 +4142,7 @@ const getActiveDescendant = focusedIndex => {
   }
   return undefined;
 };
-const getClassName$1 = (focused, focusedIndex, dropTarget) => {
+const getClassName = (focused, focusedIndex, dropTarget) => {
   const extraClass1 = focused && focusedIndex === -1 ? FocusOutline : Empty;
   const extraClass2 = dropTarget === dropTargetFull ? ExplorerDropTarget : Empty;
   const className = mergeClassNames(ListItems, extraClass1, extraClass2);
@@ -4084,7 +4160,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   }
   const dom = [parentNode, {
     type: Div,
-    className: getClassName$1(focused, focusedIndex, dropTargets),
+    className: getClassName(focused, focusedIndex, dropTargets),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
@@ -4138,6 +4214,18 @@ const getExpandedType = type => {
   }
 };
 
+const focused = mergeClassNames(TreeItem, TreeItemActive);
+const selected = mergeClassNames(TreeItem, TreeItemActive);
+const getTreeItemClassName = (isSelected, isFocused) => {
+  if (isFocused) {
+    return focused;
+  }
+  if (isSelected) {
+    return selected;
+  }
+  return TreeItem;
+};
+
 const defaultIndent$1 = 1;
 const getTreeItemIndent = depth => {
   return `${depth * defaultIndent$1}rem`;
@@ -4156,14 +4244,15 @@ const getTreeItemIndentWithChevron = (depth, chevron) => {
 };
 
 const ariaExpandedValues = [undefined, 'true', 'false'];
-const getClassName = (isSelected, isFocused) => {
-  if (isFocused) {
-    return mergeClassNames(TreeItem, TreeItemActive);
-  }
-  if (isSelected) {
-    return mergeClassNames(TreeItem, TreeItemActive);
+const getEditingChevron = direntType => {
+  switch (direntType) {
+    case EditingDirectoryExpanded:
+      return Down;
+    case EditingFolder:
+      return Right;
+    default:
+      return None$1;
   }
-  return TreeItem;
 };
 const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon) => {
   const visible = [];
@@ -4171,19 +4260,20 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
   let iconIndex = 0;
   for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
     const item = items[i];
-    const chevron = getChevronType(item.type, useChevrons);
-    const indent = indentFn(item.depth, chevron);
+    let chevron = getChevronType(item.type, useChevrons);
     const isFocused = i === focusedIndex;
     const id = isFocused ? 'TreeItemActive' : undefined;
     const isSelected = item.selected;
-    const className = getClassName(isSelected, isFocused);
+    const className = getTreeItemClassName(isSelected, isFocused);
     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,
@@ -4228,6 +4318,8 @@ const getRenderer = diffType => {
       return renderFocus;
     case RenderValue:
       return renderValue;
+    case RenderSelection:
+      return renderEditingSelection;
     default:
       throw new Error('unknown renderer');
   }
@@ -4236,6 +4328,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) {
@@ -4352,7 +4448,11 @@ const renderEventListeners = () => {
     params: ['handleBlur']
   }, {
     name: HandleClick,
-    params: ['handleClickAt', 'event.button', 'event.ctrlKey', 'event.shiftKey', 'event.clientX', 'event.clientY'],
+    params: ['handleClickAt', 'event.defaultPrevented', 'event.button', 'event.ctrlKey', 'event.shiftKey', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleInputClick,
+    params: ['handleInputClick'],
     preventDefault: true
   }, {
     name: HandleClickOpenFolder,
@@ -4703,17 +4803,23 @@ const terminate = () => {
   globalThis.close();
 };
 
-const getEditingIcon = async (editingType, value) => {
+const getEditingIcon = async (editingType, value, direntType) => {
   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 (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', {
@@ -4724,7 +4830,7 @@ const getEditingIcon = async (editingType, value) => {
 };
 
 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,
@@ -4751,7 +4857,6 @@ const commandMap = {
   '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),
@@ -4781,6 +4886,8 @@ const commandMap = {
   'Explorer.handleDrop': wrapCommand(handleDrop),
   'Explorer.handleFocus': wrapCommand(handleFocus),
   'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
+  'Explorer.handleInputBlur': wrapCommand(handleInputBlur),
+  'Explorer.handleInputClick': wrapCommand(handleInputClick),
   'Explorer.handlePaste': wrapCommand(handlePaste),
   'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
   'Explorer.handleUpload': wrapCommand(handleUpload),

package/package.json

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