@lvce-editor/explorer-view 5.8.0 → 5.10.0

package/dist/explorerViewWorkerMain.js

@@ -1059,6 +1059,7 @@ const DeltaY = 'event.deltaY';
 const EventTargetClassName = 'event.target.className';
 const IsTrusted = 'event.isTrusted';
 const ShiftKey = 'event.shiftKey';
+const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
 const Enter = 3;
@@ -1839,8 +1840,8 @@ const FileOrFolderAlreadyExists = 'A file or folder **{PH1}** already exists at
 const FileOrFolderNameMustBeProvider = 'A file or folder name must be provided.';
 const FileCannotStartWithBackSlash = 'A file or folder name cannot start with a backslash.';
 const FilesExplorer = 'Files Explorer';
-const NewFile$1 = 'New File...';
-const NewFolder$1 = 'New Folder...';
+const NewFile$2 = 'New File...';
+const NewFolder$2 = 'New Folder...';
 const OpenContainingFolder = 'Open Containing Folder';
 const OpenFolder$1 = 'Open folder';
 const OpenInIntegratedTerminal = 'Open in integrated Terminal';
@@ -1852,10 +1853,10 @@ const TypeAFileName = 'Type file name. Press Enter to confirm or Escape to cance
 const YouHaveNotYetOpenedAFolder = 'You have not yet opened a folder';
 
 const newFile$1 = () => {
-  return i18nString(NewFile$1);
+  return i18nString(NewFile$2);
 };
 const newFolder$1 = () => {
-  return i18nString(NewFolder$1);
+  return i18nString(NewFolder$2);
 };
 const openContainingFolder$1 = () => {
   return i18nString(OpenContainingFolder);
@@ -3438,6 +3439,239 @@ const handleBlur = async state => {
   };
 };
 
+const CollapseAll$1 = 'CollapseAll';
+const ExplorerInput = 'ExplorerInput';
+const NewFile$1 = 'NewFile';
+const NewFolder$1 = 'NewFolder';
+const OpenFolder = 'OpenFolder';
+const Refresh$1 = 'Refresh';
+
+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) => ({
+      depth,
+      icon: '',
+      name: dirent.name,
+      path: join2(parentPath, dirent.name),
+      posInSet: index + 1,
+      selected: false,
+      setSize: childDirents.length,
+      type: dirent.type
+    }));
+  }
+  const updatedChildren = existingChildren.map((child, index) => ({
+    ...child,
+    posInSet: index + 1,
+    setSize: existingChildren.length + 2
+  }));
+  const newDirent = {
+    depth,
+    icon: '',
+    name: '',
+    path: parentPath,
+    posInSet: updatedChildren.length + 1,
+    selected: false,
+    setSize: existingChildren.length + 2,
+    type: direntType
+  };
+  const allChildDirents = [...updatedChildren, newDirent];
+  return allChildDirents;
+};
+
+const getNewDirentsForNewDirent = async (items, focusedIndex, type, root) => {
+  if (items.length === 0 || focusedIndex === -1) {
+    const newDirent = {
+      depth: 0,
+      icon: '',
+      name: '',
+      path: root,
+      posInSet: 1,
+      selected: false,
+      setSize: 1,
+      type
+    };
+    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 isFolder = direntType => {
+  return direntType === Directory || direntType === DirectoryExpanded || direntType === SymLinkFolder;
+};
+const getFittingIndex = (dirents, startIndex) => {
+  for (let i = startIndex; i >= 0; i--) {
+    const dirent = dirents[i];
+    if (isFolder(dirent.type)) {
+      return i;
+    }
+  }
+  return -1;
+};
+const newDirent = async (state, editingType) => {
+  // TODO do it like vscode, select position between folders and files
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const index = getFittingIndex(items, focusedIndex);
+  const direntType = getNewDirentType(editingType);
+  const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
+  const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
+  return {
+    ...state,
+    editingIndex,
+    editingType,
+    editingValue: '',
+    focus: Input$1,
+    focusedIndex: editingIndex,
+    items: newDirents
+  };
+};
+
+// TODO much shared logic with newFolder
+const newFile = state => {
+  return newDirent(state, CreateFile);
+};
+
+const newFolder = state => {
+  return newDirent(state, CreateFolder);
+};
+
+const isExpanded = item => {
+  return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
+};
+
+const getExpandedDirents = items => {
+  return items.filter(isExpanded);
+};
+
+const getPathDirentsMap = async allPaths => {
+  const pathToDirents = Object.create(null);
+  await Promise.all(allPaths.map(async path => {
+    try {
+      const dirents = await readDirWithFileTypes(path);
+      pathToDirents[path] = dirents;
+    } catch {
+      // ignore
+    }
+  }));
+  return pathToDirents;
+};
+
+const restoreDirentType = (rawDirentType, path, expandedPaths) => {
+  if (rawDirentType === Directory && expandedPaths.includes(path)) {
+    return DirectoryExpanded;
+  }
+  return rawDirentType;
+};
+
+const getProtoMapInternal = (root, pathToDirents, expandedPaths, depth) => {
+  if (!(root in pathToDirents)) {
+    return [];
+  }
+  const items = pathToDirents[root] || [];
+  const protoMap = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const path = join2(root, item.name);
+    const displayDirent = {
+      depth,
+      icon: '',
+      name: item.name,
+      path,
+      posInSet: i + 1,
+      selected: false,
+      setSize: items.length,
+      type: restoreDirentType(item.type, path, expandedPaths)
+    };
+    const children = getProtoMapInternal(path, pathToDirents, expandedPaths, depth + 1);
+    protoMap.push(displayDirent, ...children);
+  }
+  return protoMap;
+};
+
+const getProtoMap = (root, pathToDirents, expandedPaths) => {
+  return getProtoMapInternal(root, pathToDirents, expandedPaths, 1);
+};
+
+const sortPathDirentsMap = map => {
+  const sortedMap = Object.create(null);
+  for (const [key, value] of Object.entries(map)) {
+    const sorted = sortExplorerItems(value);
+    sortedMap[key] = sorted;
+  }
+  return sortedMap;
+};
+
+const refresh = async state => {
+  const {
+    focusedIndex,
+    items,
+    root
+  } = state;
+  const expandedDirents = getExpandedDirents(items);
+  const expandedPaths = getPaths(expandedDirents);
+  const allPaths = [root, ...expandedPaths];
+  const pathToDirents = await getPathDirentsMap(allPaths);
+  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
+  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
+  let newFocusedIndex = focusedIndex;
+  if (focusedIndex >= newItems.length) {
+    newFocusedIndex = newItems.length - 1;
+  }
+  return {
+    ...state,
+    focusedIndex: newFocusedIndex,
+    items: newItems
+  };
+};
+
+const handleButtonClick = async (state, name) => {
+  switch (name) {
+    case CollapseAll$1:
+      return collapseAll(state);
+    case NewFile$1:
+      return newFile(state);
+    case NewFolder$1:
+      return newFolder(state);
+    case Refresh$1:
+      return refresh(state);
+    default:
+      return state;
+  }
+};
+
 class ExplorerError extends Error {
   constructor(message) {
     super(message);
@@ -3528,13 +3762,12 @@ const resetEditing = {
 
 const handleClick = async (state, index, keepFocus = false) => {
   const {
-    items,
-    minLineY
+    items
   } = state;
   if (index === -1) {
     return focusIndex(state, -1);
   }
-  const actualIndex = index + minLineY;
+  const actualIndex = index;
   const dirent = items[actualIndex];
   if (!dirent) {
     console.warn(`[explorer] dirent at index ${actualIndex} not found`, state);
@@ -3563,6 +3796,7 @@ const getIndexFromPosition = (state, eventX, eventY) => {
   const {
     itemHeight,
     items,
+    minLineY,
     y
   } = state;
   const index = Math.floor((eventY - y) / itemHeight);
@@ -3572,7 +3806,7 @@ const getIndexFromPosition = (state, eventX, eventY) => {
   if (index >= items.length) {
     return -1;
   }
-  return index;
+  return index + minLineY;
 };
 
 /**
@@ -3636,7 +3870,7 @@ const handleClickAt = async (state, defaultPrevented, button, ctrlKey, shiftKey,
     return state;
   }
   const index = getIndexFromPosition(state, eventX, eventY);
-  if (index === -1) {
+  if (index === -1 || index >= state.items.length) {
     return {
       ...state,
       focused: true,
@@ -3866,95 +4100,6 @@ const handleDragStart = state => {
   return state;
 };
 
-const isExpanded = item => {
-  return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
-};
-
-const getExpandedDirents = items => {
-  return items.filter(isExpanded);
-};
-
-const getPathDirentsMap = async allPaths => {
-  const pathToDirents = Object.create(null);
-  await Promise.all(allPaths.map(async path => {
-    try {
-      const dirents = await readDirWithFileTypes(path);
-      pathToDirents[path] = dirents;
-    } catch {
-      // ignore
-    }
-  }));
-  return pathToDirents;
-};
-
-const restoreDirentType = (rawDirentType, path, expandedPaths) => {
-  if (rawDirentType === Directory && expandedPaths.includes(path)) {
-    return DirectoryExpanded;
-  }
-  return rawDirentType;
-};
-
-const getProtoMapInternal = (root, pathToDirents, expandedPaths, depth) => {
-  if (!(root in pathToDirents)) {
-    return [];
-  }
-  const items = pathToDirents[root] || [];
-  const protoMap = [];
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    const path = join2(root, item.name);
-    const displayDirent = {
-      depth,
-      icon: '',
-      name: item.name,
-      path,
-      posInSet: i + 1,
-      selected: false,
-      setSize: items.length,
-      type: restoreDirentType(item.type, path, expandedPaths)
-    };
-    const children = getProtoMapInternal(path, pathToDirents, expandedPaths, depth + 1);
-    protoMap.push(displayDirent, ...children);
-  }
-  return protoMap;
-};
-
-const getProtoMap = (root, pathToDirents, expandedPaths) => {
-  return getProtoMapInternal(root, pathToDirents, expandedPaths, 1);
-};
-
-const sortPathDirentsMap = map => {
-  const sortedMap = Object.create(null);
-  for (const [key, value] of Object.entries(map)) {
-    const sorted = sortExplorerItems(value);
-    sortedMap[key] = sorted;
-  }
-  return sortedMap;
-};
-
-const refresh = async state => {
-  const {
-    focusedIndex,
-    items,
-    root
-  } = state;
-  const expandedDirents = getExpandedDirents(items);
-  const expandedPaths = getPaths(expandedDirents);
-  const allPaths = [root, ...expandedPaths];
-  const pathToDirents = await getPathDirentsMap(allPaths);
-  const sortedPathDirents = sortPathDirentsMap(pathToDirents);
-  const newItems = getProtoMap(root, sortedPathDirents, expandedPaths);
-  let newFocusedIndex = focusedIndex;
-  if (focusedIndex >= newItems.length) {
-    newFocusedIndex = newItems.length - 1;
-  }
-  return {
-    ...state,
-    focusedIndex: newFocusedIndex,
-    items: newItems
-  };
-};
-
 const getChildHandles = async fileHandle => {
   // @ts-ignore
   const values = fileHandle.values();
@@ -4959,128 +5104,6 @@ const initialize = async () => {
   await Promise.all([initializeFileSystemWorker(), initializeIconThemeWorker(), initializeSourceControlWorker()]);
 };
 
-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) => ({
-      depth,
-      icon: '',
-      name: dirent.name,
-      path: join2(parentPath, dirent.name),
-      posInSet: index + 1,
-      selected: false,
-      setSize: childDirents.length,
-      type: dirent.type
-    }));
-  }
-  const updatedChildren = existingChildren.map((child, index) => ({
-    ...child,
-    posInSet: index + 1,
-    setSize: existingChildren.length + 2
-  }));
-  const newDirent = {
-    depth,
-    icon: '',
-    name: '',
-    path: parentPath,
-    posInSet: updatedChildren.length + 1,
-    selected: false,
-    setSize: existingChildren.length + 2,
-    type: direntType
-  };
-  const allChildDirents = [...updatedChildren, newDirent];
-  return allChildDirents;
-};
-
-const getNewDirentsForNewDirent = async (items, focusedIndex, type, root) => {
-  if (items.length === 0 || focusedIndex === -1) {
-    const newDirent = {
-      depth: 0,
-      icon: '',
-      name: '',
-      path: root,
-      posInSet: 1,
-      selected: false,
-      setSize: 1,
-      type
-    };
-    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 isFolder = direntType => {
-  return direntType === Directory || direntType === DirectoryExpanded || direntType === SymLinkFolder;
-};
-const getFittingIndex = (dirents, startIndex) => {
-  for (let i = startIndex; i >= 0; i--) {
-    const dirent = dirents[i];
-    if (isFolder(dirent.type)) {
-      return i;
-    }
-  }
-  return -1;
-};
-const newDirent = async (state, editingType) => {
-  // TODO do it like vscode, select position between folders and files
-  const {
-    focusedIndex,
-    items,
-    root
-  } = state;
-  const index = getFittingIndex(items, focusedIndex);
-  const direntType = getNewDirentType(editingType);
-  const newDirents = await getNewDirentsForNewDirent(items, index, direntType, root);
-  const editingIndex = newDirents.findIndex(item => item.type === EditingFile || item.type === EditingFolder);
-  return {
-    ...state,
-    editingIndex,
-    editingType,
-    editingValue: '',
-    focus: Input$1,
-    focusedIndex: editingIndex,
-    items: newDirents
-  };
-};
-
-// TODO much shared logic with newFolder
-const newFile = state => {
-  return newDirent(state, CreateFile);
-};
-
-const newFolder = state => {
-  return newDirent(state, CreateFolder);
-};
-
 const getContainingFolder = (root, dirents, focusedIndex, pathSeparator) => {
   if (focusedIndex < 0) {
     return root;
@@ -5325,9 +5348,6 @@ const renderDragData = (oldState, newState) => {
   return ['Viewlet.setDragData', newState.uid, dragData];
 };
 
-const ExplorerInput = 'ExplorerInput';
-const OpenFolder = 'OpenFolder';
-
 const renderEditingSelection = (oldState, newState) => {
   const {
     editingSelectionEnd,
@@ -5385,11 +5405,14 @@ const getErrorMessageDom = errorMessage => {
   }, text(errorMessage)];
 };
 
+const HandleButtonClick = 18;
 const HandleClick = 1;
 const HandleClickOpenFolder = 2;
 const HandleContextMenu = 3;
+const HandleDragEnd = 19;
 const HandleDragLeave = 4;
 const HandleDragOver = 5;
+const HandleDragStart = 17;
 const HandleDrop = 6;
 const HandleEditingInput = 7;
 const HandleInputBlur = 8;
@@ -5398,7 +5421,6 @@ const HandleListBlur = 11;
 const HandleListFocus = 12;
 const HandlePointerDown = 14;
 const HandleWheel = 15;
-const HandleDragStart = 17;
 
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
@@ -5556,6 +5578,7 @@ const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets
     onBlur: HandleListBlur,
     onClick: HandleClick,
     onContextMenu: HandleContextMenu,
+    onDragEnd: HandleDragEnd,
     onDragLeave: HandleDragLeave,
     onDragOver: HandleDragOver,
     onDragStart: HandleDragStart,
@@ -5720,21 +5743,25 @@ const getActions = root => {
     command: 'newFile',
     icon: NewFile,
     id: newFile$1(),
+    name: NewFile$1,
     type: Button
   }, {
     command: 'newFolder',
     icon: NewFolder,
     id: newFolder$1(),
+    name: NewFolder$1,
     type: Button
   }, {
     command: 'refresh',
     icon: Refresh,
     id: refresh$1(),
+    name: Refresh$1,
     type: Button
   }, {
     command: 'collapseAll',
     icon: CollapseAll,
     id: collapseAll$1(),
+    name: CollapseAll$1,
     type: Button
   }];
 };
@@ -5750,14 +5777,14 @@ const getIconVirtualDom = (icon, type = Div) => {
 
 const getActionButtonVirtualDom = action => {
   const {
-    command,
     icon,
-    id
+    id,
+    name
   } = action;
   return [{
     childCount: 1,
     className: IconButton,
-    'data-command': command,
+    name,
     title: id,
     type: Button$1
   }, getIconVirtualDom(icon || '')];
@@ -5776,6 +5803,7 @@ const getActionsVirtualDom = actions => {
   return [{
     childCount: actions.length,
     className: Actions,
+    onClick: HandleButtonClick,
     role: ToolBar,
     type: Div
   }, ...actions.flatMap(getActionVirtualDom)];
@@ -5837,6 +5865,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleDragLeave,
     params: ['handleDragLeave']
+  }, {
+    name: HandleButtonClick,
+    params: ['handleButtonClick', TargetName]
+  }, {
+    name: HandleDragEnd,
+    params: ['handleDragEnd']
   }, {
     // @ts-ignore
     dragEffect: 'copyMove',
@@ -6157,6 +6191,7 @@ const commandMap = {
   'Explorer.handleArrowLeft': wrapListItemCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapListItemCommand(handleArrowRight),
   'Explorer.handleBlur': wrapListItemCommand(handleBlur),
+  'Explorer.handleButtonClick': wrapListItemCommand(handleButtonClick),
   'Explorer.handleClick': wrapListItemCommand(handleClick),
   'Explorer.handleClickAt': wrapListItemCommand(handleClickAt),
   'Explorer.handleClickCurrent': wrapListItemCommand(handleClickCurrent),

package/package.json

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