@lvce-editor/explorer-view 1.1.0 → 1.3.0

package/dist/explorerViewWorkerMain.js

@@ -6,17 +6,17 @@ const create$4 = (method, params) => {
     params
   };
 };
-const state = {
+const state$1 = {
   callbacks: Object.create(null)
 };
 const set = (id, fn) => {
-  state.callbacks[id] = fn;
+  state$1.callbacks[id] = fn;
 };
 const get = id => {
-  return state.callbacks[id];
+  return state$1.callbacks[id];
 };
 const remove$1 = id => {
-  delete state.callbacks[id];
+  delete state$1.callbacks[id];
 };
 let id = 0;
 const create$3 = () => {
@@ -339,7 +339,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke = (ipc, method, ...params) => {
+const invoke$1 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer = (ipc, method, ...params) => {
@@ -753,7 +753,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke(ipc, method, ...params);
+      return invoke$1(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
@@ -799,6 +799,16 @@ const WebWorkerRpcClient = {
   create: create$1
 };
 
+const RE_CHARACTERS = /^[a-zA-Z.-]+$/;
+const compareStringNumeric = (a, b) => {
+  if (RE_CHARACTERS.test(a) && RE_CHARACTERS.test(b)) {
+    return a < b ? -1 : 1;
+  }
+  return a.localeCompare(b, 'en', {
+    numeric: true
+  });
+};
+
 const BlockDevice = 1;
 const CharacterDevice = 2;
 const Directory = 3;
@@ -811,6 +821,142 @@ const SymLinkFile = 10;
 const SymLinkFolder = 11;
 const Unknown = 12;
 
+const priorityMapFoldersFirst = {
+  [Directory]: 1,
+  [SymLinkFolder]: 1,
+  [File]: 0,
+  [SymLinkFile]: 0,
+  [Unknown]: 0,
+  [Socket]: 0
+};
+const compareDirentType = (direntA, direntB) => {
+  return priorityMapFoldersFirst[direntB.type] - priorityMapFoldersFirst[direntA.type];
+};
+const compareDirentName = (direntA, direntB) => {
+  return compareStringNumeric(direntA.name, direntB.name);
+};
+const compareDirent = (direntA, direntB) => {
+  return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
+};
+
+const getFileIcon = ({
+  name
+}) => {
+  return '';
+};
+const getIcon = dirent => {
+  return '';
+};
+
+// TODO use posInSet and setSize properties to compute more effectively
+const computeExplorerRenamedDirent = (dirents, index, newName) => {
+  let startIndex = index;
+  let innerEndIndex = index + 1;
+  let insertIndex = -1;
+  let posInSet = -1;
+  const oldDirent = dirents[index];
+  const newDirent = {
+    ...oldDirent,
+    name: newName,
+    path: oldDirent.path.slice(0, -oldDirent.name.length) + newName,
+    icon: getFileIcon({
+      name: newName
+    })
+  };
+  const depth = newDirent.depth;
+  // TODO
+  for (; startIndex >= 0; startIndex--) {
+    const dirent = dirents[startIndex];
+    if (dirent.depth > depth) {
+      continue;
+    }
+    if (dirent.depth < depth) {
+      break;
+    }
+    if (compareDirent(dirent, newDirent) === 1) {
+      insertIndex = startIndex;
+      posInSet = dirent.posInSet;
+      // dirent.posInSet++
+    }
+  }
+  startIndex++;
+  for (; innerEndIndex < dirents.length; innerEndIndex++) {
+    const dirent = dirents[innerEndIndex];
+    if (dirent.depth <= depth) {
+      break;
+    }
+    dirent.path = newDirent.path + dirent.path.slice(oldDirent.path.length);
+  }
+  innerEndIndex--;
+  let endIndex = innerEndIndex + 1;
+  for (; endIndex < dirents.length; endIndex++) {
+    const dirent = dirents[endIndex];
+    if (dirent.depth > depth) {
+      continue;
+    }
+    if (dirent.depth < depth) {
+      break;
+    }
+    if (insertIndex === -1 && compareDirent(dirent, newDirent === -1)) {
+      for (; endIndex < dirents.length; endIndex++) {
+      }
+      insertIndex = endIndex;
+      posInSet = dirent.posInSet + 1;
+    }
+  }
+  endIndex--;
+  for (let j = startIndex; j < index; j++) {
+    const dirent = dirents[j];
+    if (dirent.depth === depth) {
+      dirent.posInSet++;
+    }
+  }
+  for (let j = index; j < endIndex; j++) {
+    const dirent = dirents[j];
+    if (dirent.depth === depth) {
+      dirent.posInSet--;
+    }
+  }
+
+  // for (let j = startIndex; j < index; j++) {
+  //   const dirent = dirents[j]
+  //   dirent.posInSet++
+  // }
+
+  if (insertIndex === -1) {
+    insertIndex = index;
+    return {
+      focusedIndex: index,
+      newDirents: [...dirents.slice(0, index), newDirent, ...dirents.slice(index + 1)]
+    };
+  }
+  newDirent.posInSet = posInSet;
+  const newDirents = [...dirents];
+  if (index < insertIndex) {
+    insertIndex--;
+  }
+  newDirents.splice(index, 1);
+  newDirents.splice(insertIndex, 0, newDirent);
+  return {
+    newDirents,
+    focusedIndex: insertIndex
+  };
+};
+
+const None$2 = 0;
+const CreateFile = 1;
+const CreateFolder = 2;
+const Rename = 3;
+
+const remove = async diren => {};
+const readDirWithFileTypes = async uri => {};
+const getPathSeparator$1 = async root => {};
+const getRealPath = async path => {};
+const stat = async dirent => {};
+const createFile = async uri => {};
+const mkdir = async uri => {};
+const rename$1 = async (oldUri, newUri) => {};
+
 class AssertionError extends Error {
   constructor(message) {
     super(message);
@@ -845,6 +991,12 @@ const object = value => {
     throw new AssertionError('expected value to be of type object');
   }
 };
+const number = value => {
+  const type = getType(value);
+  if (type !== 'number') {
+    throw new AssertionError('expected value to be of type number');
+  }
+};
 const array = value => {
   const type = getType(value);
   if (type !== 'array') {
@@ -858,119 +1010,193 @@ const string = value => {
   }
 };
 
-const ENOENT = 'ENOENT';
-
-const remove = async diren => {};
-const readDirWithFileTypes = async uri => {};
-const getPathSeparator$1 = async root => {};
-const getRealPath = async path => {};
-const stat = async dirent => {};
-
-const getFileIcon = ({
-  name
-}) => {
-  return '';
-};
-const getIcon = dirent => {
-  return '';
-};
-
-const RE_CHARACTERS = /^[a-zA-Z.-]+$/;
-const compareStringNumeric = (a, b) => {
-  if (RE_CHARACTERS.test(a) && RE_CHARACTERS.test(b)) {
-    return a < b ? -1 : 1;
+const dirname = (pathSeparator, path) => {
+  const index = path.lastIndexOf(pathSeparator);
+  if (index === -1) {
+    return path;
   }
-  return a.localeCompare(b, 'en', {
-    numeric: true
-  });
+  return path.slice(0, index);
 };
 
-const priorityMapFoldersFirst = {
-  [Directory]: 1,
-  [SymLinkFolder]: 1,
-  [File]: 0,
-  [SymLinkFile]: 0,
-  [Unknown]: 0,
-  [Socket]: 0
-};
-const compareDirentType = (direntA, direntB) => {
-  return priorityMapFoldersFirst[direntB.type] - priorityMapFoldersFirst[direntA.type];
-};
-const compareDirentName = (direntA, direntB) => {
-  return compareStringNumeric(direntA.name, direntB.name);
-};
-const compareDirent = (direntA, direntB) => {
-  return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
-};
-const sortExplorerItems = rawDirents => {
-  rawDirents.sort(compareDirent);
+const getParentFolder = (dirents, index, root) => {
+  if (index < 0) {
+    return root;
+  }
+  return dirents[index].path;
 };
-
-const toDisplayDirents = (pathSeparator, rawDirents, parentDirent, excluded) => {
-  sortExplorerItems(rawDirents);
-  // TODO figure out whether this uses too much memory (name,path -> redundant, depth could be computed on demand)
-  const toDisplayDirent = (rawDirent, index) => {
-    const path = [parentDirent.path, rawDirent.name].join(pathSeparator);
-    return {
-      name: rawDirent.name,
-      posInSet: index + 1,
-      setSize: rawDirents.length,
-      depth: parentDirent.depth + 1,
-      type: rawDirent.type,
-      path,
-      // TODO storing absolute path might be too costly, could also store relative path here
-      icon: getIcon()
-    };
+const acceptCreate = async (state, newDirentType, createFn) => {
+  const {
+    focusedIndex,
+    editingValue
+  } = state;
+  const newFileName = editingValue;
+  if (!newFileName) {
+    // TODO show error message that file name must not be empty
+    // below input box
+    // await ErrorHandling.showErrorDialog(new Error('file name must not be empty'))
+    return state;
+  }
+  const parentFolder = getParentFolder(state.items, focusedIndex, state.root);
+  const absolutePath = [parentFolder, newFileName].join(state.pathSeparator);
+  // TODO better handle error
+  try {
+    await createFn(absolutePath);
+  } catch (error) {
+    // TODO display error
+    return state;
+  }
+  const parentDirent = focusedIndex >= 0 ? state.items[focusedIndex] : {
+    depth: 0,
+    path: state.root
   };
-  const result = [];
-  let i = 0;
-  for (const rawDirent of rawDirents) {
-    if (excluded.includes(rawDirent.name)) {
-      continue;
+  const depth = parentDirent.depth + 1;
+  const newDirent = {
+    path: absolutePath,
+    posInSet: -1,
+    setSize: 1,
+    depth,
+    name: newFileName,
+    type: newDirentType,
+    icon: ''
+  };
+  newDirent.icon = getIcon();
+  let insertIndex = state.focusedIndex;
+  let deltaPosInSet = 0;
+  let posInSet = 1;
+  let setSize = 1;
+  let i = Math.max(state.focusedIndex, -1) + 1;
+  const {
+    items
+  } = state;
+  // TODO update posinset and setsize of all affected dirents
+  for (; i < items.length; i++) {
+    const dirent = items[i];
+    if (dirent.depth !== depth) {
+      break;
     }
-    result.push(toDisplayDirent(rawDirent, i));
-    i++;
+    const compareResult = compareDirent(dirent, newDirent);
+    if (compareResult === 1) {
+      insertIndex = i - 1;
+      deltaPosInSet = 1 - 1;
+      break;
+    } else {
+      posInSet = dirent.posInSet + 1;
+      setSize = dirent.setSize + 1;
+      insertIndex = i;
+    }
+    dirent.setSize++;
+    dirent.posInSet += deltaPosInSet;
   }
-  return result;
+  newDirent.setSize = setSize;
+  newDirent.posInSet = posInSet;
+  items.splice(insertIndex + 1, 0, newDirent);
+  const newDirents = [...items];
+  const newMaxlineY = Math.max(state.maxLineY, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    editingIndex: -1,
+    focusedIndex: insertIndex + 1,
+    editingType: None$2,
+    maxLineY: newMaxlineY
+  };
 };
-
-const getIndexFromPosition = (state, eventX, eventY) => {
+const acceptRename = async state => {
   const {
-    y,
-    itemHeight,
-    items
+    editingIndex,
+    editingValue,
+    items,
+    pathSeparator
   } = state;
-  const index = Math.floor((eventY - y) / itemHeight);
-  if (index < 0) {
-    return 0;
-  }
-  if (index >= items.length) {
-    return -1;
+  const renamedDirent = items[editingIndex];
+  try {
+    // TODO this does not work with rename of nested file
+    const oldAbsolutePath = renamedDirent.path;
+    const oldParentPath = dirname(pathSeparator, oldAbsolutePath);
+    const newAbsolutePath = [oldParentPath, editingValue].join(pathSeparator);
+    await rename$1(oldAbsolutePath, newAbsolutePath);
+  } catch (error) {
+    // TODO
+    // await ErrorHandling.showErrorDialog(error)
+    return state;
   }
-  return index;
+  const {
+    newDirents,
+    focusedIndex
+  } = computeExplorerRenamedDirent(items, editingIndex, editingValue);
+  //  TODO move focused index
+  state.items = newDirents;
+  return {
+    ...state,
+    editingIndex: -1,
+    editingValue: '',
+    editingType: None$2,
+    editingIcon: '',
+    focusedIndex,
+    focused: true
+  };
 };
-const getParentStartIndex = (dirents, index) => {
-  const dirent = dirents[index];
-  let startIndex = index - 1;
-  while (startIndex >= 0 && dirents[startIndex].depth >= dirent.depth) {
-    startIndex--;
+const acceptEdit = state => {
+  const {
+    editingType
+  } = state;
+  switch (editingType) {
+    case CreateFile:
+      return acceptCreate(state, File, createFile);
+    case CreateFolder:
+      return acceptCreate(state, Directory, mkdir);
+    case Rename:
+      return acceptRename(state);
+    default:
+      return state;
   }
-  return startIndex;
 };
-const getParentEndIndex = (dirents, index) => {
-  const dirent = dirents[index];
-  let endIndex = index + 1;
-  while (endIndex < dirents.length && dirents[endIndex].depth > dirent.depth) {
-    endIndex++;
-  }
-  return endIndex;
+
+const getFocusedDirent$1 = state => {
+  const {
+    focusedIndex,
+    minLineY,
+    items
+  } = state;
+  const dirent = items[focusedIndex + minLineY];
+  return dirent;
 };
+
+const copyPath$1 = async state => {
+  // await Command.execute(RendererWorkerCommandType.ClipBoardWriteText, /* text */ path)
+  return state;
+};
+
+const state = {
+  rpc: undefined
+};
+const invoke = (method, ...params) => {
+  const rpc = state.rpc;
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const setRpc = rpc => {
+  state.rpc = rpc;
+};
+
+const writeText = async text => {
+  await invoke('ClipBoard.writeText', /* text */text);
+};
+
+const copyRelativePath$1 = async state => {
+  const dirent = getFocusedDirent$1(state);
+  const relativePath = dirent.path.slice(1);
+  // TODO handle error
+  await writeText(relativePath);
+  return state;
+};
+
 const isSymbolicLink = dirent => {
   return dirent.type === Symlink;
 };
-const hasSymbolicLinks = rawDirents => {
-  return rawDirents.some(isSymbolicLink);
-};
+
+const ENOENT = 'ENOENT';
+
 const getSymlinkType = type => {
   switch (type) {
     case File:
@@ -981,6 +1207,7 @@ const getSymlinkType = type => {
       return Symlink;
   }
 };
+
 // TODO maybe resolving of symbolic links should happen in shared process?
 // so that there is less code and less work in the frontend
 const resolveSymbolicLink = async (uri, rawDirent) => {
@@ -1018,6 +1245,42 @@ const resolveSymbolicLinks = async (uri, rawDirents) => {
   const resolvedDirents = await Promise.all(promises);
   return resolvedDirents;
 };
+
+const sortExplorerItems = rawDirents => {
+  rawDirents.sort(compareDirent);
+};
+
+const toDisplayDirents = (pathSeparator, rawDirents, parentDirent, excluded) => {
+  sortExplorerItems(rawDirents);
+  // TODO figure out whether this uses too much memory (name,path -> redundant, depth could be computed on demand)
+  const toDisplayDirent = (rawDirent, index) => {
+    const path = [parentDirent.path, rawDirent.name].join(pathSeparator);
+    return {
+      name: rawDirent.name,
+      posInSet: index + 1,
+      setSize: rawDirents.length,
+      depth: parentDirent.depth + 1,
+      type: rawDirent.type,
+      path,
+      // TODO storing absolute path might be too costly, could also store relative path here
+      icon: getIcon()
+    };
+  };
+  const result = [];
+  let i = 0;
+  for (const rawDirent of rawDirents) {
+    if (excluded.includes(rawDirent.name)) {
+      continue;
+    }
+    result.push(toDisplayDirent(rawDirent, i));
+    i++;
+  }
+  return result;
+};
+
+const hasSymbolicLinks = rawDirents => {
+  return rawDirents.some(isSymbolicLink);
+};
 const getChildDirentsRaw = async uri => {
   const rawDirents = await readDirWithFileTypes();
   array(rawDirents);
@@ -1095,6 +1358,85 @@ const expandAll = async state => {
   };
 };
 
+const getParentEndIndex = (dirents, index) => {
+  const dirent = dirents[index];
+  let endIndex = index + 1;
+  while (endIndex < dirents.length && dirents[endIndex].depth > dirent.depth) {
+    endIndex++;
+  }
+  return endIndex;
+};
+
+const makeExpanded = dirent => {
+  if (dirent.type === Directory) {
+    return {
+      ...dirent,
+      type: DirectoryExpanded
+    };
+  }
+  return dirent;
+};
+const expandRecursively = async state => {
+  const {
+    items,
+    focusedIndex,
+    pathSeparator,
+    root,
+    height,
+    itemHeight,
+    minLineY
+  } = state;
+  const dirent = focusedIndex < 0 ? {
+    type: Directory,
+    path: root,
+    depth: 0
+  } : items[focusedIndex];
+  if (dirent.type !== Directory && dirent.type !== DirectoryExpanding && dirent.type !== DirectoryExpanded) {
+    return state;
+  }
+  // TODO this is very inefficient
+  const getChildDirentsRecursively = async dirent => {
+    switch (dirent.type) {
+      case File:
+        return [dirent];
+      case Directory:
+      case DirectoryExpanding:
+      case DirectoryExpanded:
+        const childDirents = await getChildDirents(pathSeparator, dirent);
+        const all = [makeExpanded(dirent)];
+        for (const childDirent of childDirents) {
+          const childAll = await getChildDirentsRecursively(childDirent);
+          all.push(...childAll);
+        }
+        return all;
+      default:
+        return [];
+    }
+  };
+  // TODO race condition: what if folder is being collapse while it is recursively expanding?
+  // TODO race condition: what if folder is being deleted while it is recursively expanding?
+  // TODO race condition: what if a new file/folder is created while the folder is recursively expanding?
+  const childDirents = await getChildDirentsRecursively(dirent);
+  const startIndex = focusedIndex;
+  if (focusedIndex >= 0) {
+    const endIndex = getParentEndIndex(items, focusedIndex);
+    const newDirents = [...items.slice(0, startIndex), ...childDirents, ...items.slice(endIndex)];
+    const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+    return {
+      ...state,
+      items: newDirents,
+      maxLineY
+    };
+  }
+  const newDirents = childDirents.slice(1);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  return {
+    ...state,
+    items: newDirents,
+    maxLineY
+  };
+};
+
 const focusIndex = (state, index) => {
   const {
     minLineY,
@@ -1196,7 +1538,7 @@ const TreeItem$1 = 'treeitem';
 
 const Button$1 = 'Button';
 const ButtonPrimary = 'ButtonPrimary';
-const Explorer = 'Explorer';
+const Explorer$1 = 'Explorer';
 const FileIcon = 'FileIcon';
 const InputBox = 'InputBox';
 const Label = 'Label';
@@ -1249,6 +1591,39 @@ const UiStrings = {
   OpenFolder: 'Open folder',
   NoFolderOpen: 'No Folder Open'
 };
+const newFile = () => {
+  return i18nString(UiStrings.NewFile);
+};
+const newFolder = () => {
+  return i18nString(UiStrings.NewFolder);
+};
+const openContainingFolder$1 = () => {
+  return i18nString(UiStrings.OpenContainingFolder);
+};
+const openInIntegratedTerminal = () => {
+  return i18nString(UiStrings.OpenInIntegratedTerminal);
+};
+const cut = () => {
+  return i18nString(UiStrings.Cut);
+};
+const copy = () => {
+  return i18nString(UiStrings.Copy);
+};
+const paste = () => {
+  return i18nString(UiStrings.Paste);
+};
+const copyPath = () => {
+  return i18nString(UiStrings.CopyPath);
+};
+const copyRelativePath = () => {
+  return i18nString(UiStrings.CopyRelativePath);
+};
+const rename = () => {
+  return i18nString(UiStrings.Rename);
+};
+const deleteItem = () => {
+  return i18nString(UiStrings.Delete);
+};
 const filesExplorer = () => {
   return i18nString(UiStrings.FilesExplorer);
 };
@@ -1413,7 +1788,7 @@ const mergeClassNames = (...classNames) => {
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
+    className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
     childCount: 1
   }, {
@@ -1439,7 +1814,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
   const dom = [];
   dom.push({
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
+    className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
@@ -1553,8 +1928,120 @@ const getKeyBindings = () => {
   }];
 };
 
+const Separator = 1;
 const None = 0;
-const Rename = 3;
+const RestoreFocus = 6;
+
+const menuEntrySeparator = {
+  id: 'separator',
+  label: '',
+  flags: Separator,
+  command: ''
+};
+
+const menuEntryNewFile = {
+  id: 'newFile',
+  label: newFile(),
+  flags: None,
+  command: 'Explorer.newFile'
+};
+const menuEntryNewFolder = {
+  id: 'newFolder',
+  label: newFolder(),
+  flags: None,
+  command: 'Explorer.newFolder'
+};
+const menuEntryOpenContainingFolder = {
+  id: 'openContainingFolder',
+  label: openContainingFolder$1(),
+  flags: RestoreFocus,
+  command: 'Explorer.openContainingFolder'
+};
+const menuEntryOpenInIntegratedTerminal = {
+  id: 'openInIntegratedTerminal',
+  label: openInIntegratedTerminal(),
+  flags: None,
+  command: /* TODO */-1
+};
+const menuEntryCut = {
+  id: 'cut',
+  label: cut(),
+  flags: RestoreFocus,
+  command: /* TODO */-1
+};
+const menuEntryCopy = {
+  id: 'copy',
+  label: copy(),
+  flags: RestoreFocus,
+  command: 'Explorer.handleCopy'
+};
+const menuEntryPaste = {
+  id: 'paste',
+  label: paste(),
+  flags: None,
+  command: 'Explorer.handlePaste'
+};
+const menuEntryCopyPath = {
+  id: 'copyPath',
+  label: copyPath(),
+  flags: RestoreFocus,
+  command: 'Explorer.copyPath'
+};
+const menuEntryCopyRelativePath = {
+  id: 'copyRelativePath',
+  label: copyRelativePath(),
+  flags: RestoreFocus,
+  command: 'Explorer.copyRelativePath'
+};
+const menuEntryRename = {
+  id: 'rename',
+  label: rename(),
+  flags: None,
+  command: 'Explorer.renameDirent'
+};
+const menuEntryDelete = {
+  id: 'delete',
+  label: deleteItem(),
+  flags: None,
+  command: 'Explorer.removeDirent'
+};
+const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
+
+// TODO there are two possible ways of getting the focused dirent of explorer
+// 1. directly access state of explorer (bad because it directly accesses state of another component)
+// 2. expose getFocusedDirent method in explorer (bad because explorer code should not know about for menuEntriesExplorer, which needs that method)
+const getFocusedDirent = explorerState => {
+  if (!explorerState || explorerState.focusedIndex < 0) {
+    return undefined;
+  }
+  return explorerState.items[explorerState.focusedIndex];
+};
+const getMenuEntriesDirectory = () => {
+  return ALL_ENTRIES;
+};
+const getMenuEntriesFile = () => {
+  return [menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
+};
+const getMenuEntriesDefault = () => {
+  return ALL_ENTRIES;
+};
+const getMenuEntriesRoot = () => {
+  return [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath];
+};
+const getMenuEntries = state => {
+  const focusedDirent = getFocusedDirent(state);
+  if (!focusedDirent) {
+    return getMenuEntriesRoot();
+  }
+  switch (focusedDirent.type) {
+    case Directory:
+      return getMenuEntriesDirectory();
+    case File:
+      return getMenuEntriesFile();
+    default:
+      return getMenuEntriesDefault();
+  }
+};
 
 const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue) => {
   const visible = [];
@@ -1576,7 +2063,7 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
       });
     }
   }
-  if (editingType !== None && editingIndex === -1) {
+  if (editingType !== None$2 && editingIndex === -1) {
     visible.push({
       depth: 3,
       posInSet: 1,
@@ -1592,6 +2079,32 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
   return visible;
 };
 
+const getIndexFromPosition = (state, eventX, eventY) => {
+  const {
+    y,
+    itemHeight,
+    items
+  } = state;
+  const index = Math.floor((eventY - y) / itemHeight);
+  if (index < 0) {
+    return 0;
+  }
+  if (index >= items.length) {
+    return -1;
+  }
+  return index;
+};
+
+const getParentStartIndex = (dirents, index) => {
+  const dirent = dirents[index];
+  let startIndex = index - 1;
+  while (startIndex >= 0 && dirents[startIndex].depth >= dirent.depth) {
+    startIndex--;
+  }
+  return startIndex;
+};
+
+const Keyboard = -1;
 const LeftClick = 0;
 
 const openFolder = async () => {
@@ -1651,22 +2164,13 @@ const setDeltaY = (state, deltaY) => {
 const handleWheel = (state, deltaMode, deltaY) => {
   return setDeltaY(state, state.deltaY + deltaY);
 };
-const getFocusedDirent = state => {
-  const {
-    focusedIndex,
-    minLineY,
-    items
-  } = state;
-  const dirent = items[focusedIndex + minLineY];
-  return dirent;
-};
 
 // TODO support multiselection and removing multiple dirents
 const removeDirent = async state => {
   if (state.focusedIndex < 0) {
     return state;
   }
-  const dirent = getFocusedDirent(state);
+  const dirent = getFocusedDirent$1(state);
   const absolutePath = dirent.path;
   try {
     // TODO handle error
@@ -1741,22 +2245,9 @@ const cancelEdit = state => {
     focused: true,
     editingIndex: -1,
     editingValue: '',
-    editingType: None
+    editingType: None$2
   };
 };
-const copyRelativePath = async state => {
-  const dirent = getFocusedDirent(state);
-  // @ts-ignore
-  dirent.path.slice(1);
-  // TODO handle error
-
-  // await Command.execute(RendererWorkerCommandType.ClipBoardWriteText, /* text */ relativePath)
-  return state;
-};
-const copyPath = async state => {
-  // await Command.execute(RendererWorkerCommandType.ClipBoardWriteText, /* text */ path)
-  return state;
-};
 
 // TODO much shared logic with newFolder
 
@@ -1987,7 +2478,7 @@ const handleBlur = state => {
   const {
     editingType
   } = state;
-  if (editingType !== None) {
+  if (editingType !== None$2) {
     return state;
   }
   return {
@@ -2003,6 +2494,59 @@ const handleClickOpenFolder = async state => {
   return state;
 };
 
+const show = async (x, y, id, ...args) => {
+  return invoke('ContextMenu.show', x, y, id, ...args);
+};
+
+const Explorer = 4;
+
+const handleContextMenuKeyboard = async state => {
+  const {
+    focusedIndex,
+    x,
+    y,
+    minLineY,
+    itemHeight
+  } = state;
+  const menuX = x;
+  const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
+  await show(menuX, menuY, Explorer);
+  return state;
+};
+
+const handleContextMenuMouseAt = async (state, x, y) => {
+  number(x);
+  number(y);
+  const focusedIndex = getIndexFromPosition(state, x, y);
+  await show(x, y, Explorer);
+  return {
+    ...state,
+    focusedIndex,
+    focused: false
+  };
+};
+
+const handleContextMenu = (state, button, x, y) => {
+  switch (button) {
+    case Keyboard:
+      return handleContextMenuKeyboard(state);
+    default:
+      return handleContextMenuMouseAt(state, x, y);
+  }
+};
+
+const handlePointerDown = (state, button, x, y) => {
+  const index = getIndexFromPosition(state, x, y);
+  if (button === LeftClick && index === -1) {
+    return {
+      ...state,
+      focused: true,
+      focusedIndex: -1
+    };
+  }
+  return state;
+};
+
 // 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
@@ -2030,11 +2574,11 @@ const getExcluded = () => {
   }
   return excluded;
 };
-const getSavedRoot = (savedState, workspacePath) => {
+const getSavedRoot$1 = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
-  const root = getSavedRoot(savedState, '');
+  const root = getSavedRoot$1(savedState, '');
   // TODO path separator could be restored from saved state
   const pathSeparator = await getPathSeparator(); // TODO only load path separator once
   const excluded = getExcluded();
@@ -2064,17 +2608,93 @@ const loadContent = async (state, savedState) => {
   };
 };
 
+const getContaingingFolder = (root, dirents, focusedIndex, pathSeparator) => {
+  if (focusedIndex < 0) {
+    return root;
+  }
+  const dirent = dirents[focusedIndex];
+  const direntPath = dirent.path;
+  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
+  const path = `${direntParentPath}`;
+  return path;
+};
+const openContainingFolder = async state => {
+  const {
+    focusedIndex,
+    root,
+    items,
+    pathSeparator
+  } = state;
+  const path = getContaingingFolder(root, items, focusedIndex);
+  await invoke('OpenNativeFolder.openNativeFolder', /* path */path);
+  return state;
+};
+
+const getSavedRoot = (savedState, workspacePath) => {
+  return workspacePath;
+};
+const restoreState = savedState => {
+  if (!savedState) {
+    return {
+      minLineY: 0,
+      deltaY: 0
+    };
+  }
+  const root = getSavedRoot(savedState, savedState.workspacePath || '');
+  let minLineY = 0;
+  if (savedState && typeof savedState.minLineY === 'number') {
+    minLineY = savedState.minLineY;
+  }
+  let deltaY = 0;
+  if (savedState && typeof savedState.deltaY === 'number') {
+    deltaY = savedState.deltaY;
+  }
+  return {
+    ...savedState,
+    root,
+    minLineY,
+    deltaY
+  };
+};
+
+const isExpandedDirectory = dirent => {
+  return dirent.type === DirectoryExpanded;
+};
+const getPath = dirent => {
+  return dirent.path;
+};
+const saveState = state => {
+  const {
+    items,
+    root,
+    deltaY,
+    minLineY,
+    maxLineY
+  } = state;
+  const expandedPaths = items.filter(isExpandedDirectory).map(getPath);
+  return {
+    expandedPaths,
+    root,
+    minLineY,
+    maxLineY,
+    deltaY
+  };
+};
+
 const commandMap = {
+  'Explorer.acceptEdit': acceptEdit,
   'Explorer.cancelEdit': cancelEdit,
-  'Explorer.copyPath': copyPath,
-  'Explorer.copyRelativePath': copyRelativePath,
+  'Explorer.copyPath': copyPath$1,
+  'Explorer.copyRelativePath': copyRelativePath$1,
   'Explorer.expandAll': expandAll,
+  'Explorer.expandRecursively': expandRecursively,
   'Explorer.focusFirst': focusFirst,
   'Explorer.focusIndex': focusIndex,
   'Explorer.focusLast': focusLast,
   'Explorer.focusNext': focusNext,
   'Explorer.focusPrevious': focusPrevious,
   'Explorer.getKeyBindings': getKeyBindings,
+  'Explorer.getMenuEntries': getMenuEntries,
   'Explorer.getVirtualDom': getExplorerVirtualDom,
   'Explorer.getVisibleItems': getVisibleExplorerItems,
   'Explorer.handleArrowLeft': handleArrowLeft,
@@ -2084,17 +2704,23 @@ const commandMap = {
   'Explorer.handleClickAt': handleClickAt,
   'Explorer.handleClickCurrentButKeepFocus': handleClickCurrentButKeepFocus,
   'Explorer.handleClickOpenFolder': handleClickOpenFolder,
+  'Explorer.handleContextMenu': handleContextMenu,
   'Explorer.handleIconThemeChange': handleIconThemeChange,
+  'Explorer.handlePointerDown': handlePointerDown,
   'Explorer.handleWheel': handleWheel,
   'Explorer.loadContent': loadContent,
+  'Explorer.openContainingFolder': openContainingFolder,
   'Explorer.removeDirent': removeDirent,
-  'Explorer.renameDirent': renameDirent
+  'Explorer.renameDirent': renameDirent,
+  'Explorer.restoreState': restoreState,
+  'Explorer.saveState': saveState
 };
 
 const listen = async () => {
-  await WebWorkerRpcClient.create({
+  const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
+  setRpc(rpc);
 };
 
 const main = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Explorer Worker",
   "main": "dist/explorerViewWorkerMain.js",
   "type": "module",