@lvce-editor/explorer-view 2.1.0 → 2.3.0

package/dist/explorerViewWorkerMain.js

@@ -1288,7 +1288,41 @@ const ListItem = 22;
 const Slash = '/';
 
 // TODO parentUid might ot be needed
-const create = (id, uri, x, y, width, height, args, parentUid) => {
+const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) => {
+  const state = {
+    uid,
+    parentUid,
+    root: '',
+    items: [],
+    focusedIndex: -1,
+    focused: false,
+    hoverIndex: -1,
+    x,
+    y,
+    width,
+    height,
+    deltaY: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    pathSeparator: Slash,
+    version: 0,
+    editingIndex: -1,
+    itemHeight: ListItem,
+    dropTargets: [],
+    excluded: [],
+    editingValue: '',
+    editingType: None$5,
+    editingIcon: '',
+    fileIconCache: Object.create(null),
+    useChevrons: false,
+    icons: [],
+    platform
+  };
+  set(uid, state, state);
+};
+
+// TODO parentUid might ot be needed
+const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) => {
   const state = {
     uid: id,
     parentUid,
@@ -1315,7 +1349,8 @@ const create = (id, uri, x, y, width, height, args, parentUid) => {
     editingIcon: '',
     fileIconCache: Object.create(null),
     useChevrons: false,
-    icons: []
+    icons: [],
+    platform
   };
   set(state.uid, state, state);
   return state;
@@ -1349,7 +1384,7 @@ const DiffFocus = {
 
 const diffType = RenderItems;
 const isEqual$1 = (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.width === newState.width && oldState.focused === newState.focused;
+  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.width === newState.width && oldState.focused === newState.focused && oldState.dropTargets === newState.dropTargets;
 };
 
 const DiffItems = {
@@ -1802,7 +1837,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleCopy', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'refresh', 'relealItem', 'removeDirent', 'rename', 'renameDirent', 'revealItem', 'scrollDown', 'scrollUp', 'setDeltaY', 'renderEventListeners', 'updateEditingValue', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleCopy', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'refresh', 'revealItem', 'removeDirent', 'rename', 'renameDirent', 'revealItem', 'scrollDown', 'scrollUp', 'setDeltaY', 'renderEventListeners', 'updateEditingValue', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2532,13 +2567,15 @@ const canBeDroppedInto = dirent => {
   }
 };
 
+const dropTargetFull = [-1];
+
 const getNewDropTargets = (state, x, y) => {
   const {
     items
   } = state;
   const index = getIndexFromPosition(state, x, y);
   if (index === -1) {
-    return [-1];
+    return dropTargetFull;
   }
   const item = items[index];
   if (!canBeDroppedInto(item)) {
@@ -2660,7 +2697,7 @@ const getModule = isElectron => {
 };
 const handleDropRoot = async (state, files) => {
   // @ts-ignore
-  const fn = await getModule(state.isElectron);
+  const fn = getModule(state.isElectron);
   return fn(state, files);
 };
 
@@ -2686,6 +2723,7 @@ const handleDropIntoFolder = async (state, dirent, index, files) => {
     pathSeparator,
     items
   } = state;
+  // @ts-ignore
   for (const file of files) {
     // TODO path basename
     const baseName = file;
@@ -2712,7 +2750,7 @@ const handleDropIntoFile = (state, dirent, index, files) => {
   // @ts-ignore
   return handleDropIndex(parentIndex);
 };
-const handleDropIndex = async (state, index, files) => {
+const handleDropIndex = async (state, files, index) => {
   const {
     items
   } = state;
@@ -2731,15 +2769,20 @@ const handleDropIndex = async (state, index, files) => {
   }
 };
 
+const getDropHandler = index => {
+  switch (index) {
+    case -1:
+      return handleDropRoot;
+    default:
+      return handleDropIndex;
+  }
+};
 const handleDrop = async (state, x, y, files) => {
   try {
     const index = getIndexFromPosition(state, x, y);
-    switch (index) {
-      case -1:
-        return await handleDropRoot(state, files);
-      default:
-        return await handleDropIndex(state, index, files);
-    }
+    const fn = getDropHandler(index);
+    const result = await fn(state, files, index);
+    return result;
   } catch (error) {
     throw new VError(error, 'Failed to drop files');
   }
@@ -2806,6 +2849,7 @@ const mergeDirents = (oldDirents, newDirents) => {
 
 // TODO add lots of tests for this
 const updateRoot = async state1 => {
+  // @ts-ignore
   if (state1.disposed) {
     return state1;
   }
@@ -3095,15 +3139,18 @@ const getExcluded = () => {
   }
   return excluded;
 };
-const getSavedRoot$1 = (savedState, workspacePath) => {
+const getSavedRoot = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
+  const {
+    fileIconCache
+  } = state;
   const {
     useChevrons
   } = await getSettings();
   const workspacePath = await getWorkspacePath();
-  const root = getSavedRoot$1(savedState, workspacePath);
+  const root = getSavedRoot(savedState, workspacePath);
   // TODO path separator could be restored from saved state
   const pathSeparator = await getPathSeparator(root); // TODO only load path separator once
   const excluded = getExcluded();
@@ -3124,7 +3171,7 @@ const loadContent = async (state, savedState) => {
   const {
     icons,
     newFileIconCache
-  } = await getFileIcons(restoredDirents, Object.create(null));
+  } = await getFileIcons(restoredDirents, fileIconCache);
   return {
     ...state,
     root,
@@ -3306,6 +3353,8 @@ const ButtonPrimary = 'ButtonPrimary';
 const ButtonWide = 'ButtonWide';
 const Chevron = 'Chevron';
 const Explorer = 'Explorer';
+const Empty = '';
+const ExplorerDropTarget = 'DropTarget';
 const FileIcon = 'FileIcon';
 const FocusOutline = 'FocusOutline';
 const IconButton = 'IconButton';
@@ -3339,6 +3388,8 @@ const HandleListBlur = 'handleListBlur';
 const HandleListFocus = 'handleListFocus';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
+const HandleDragOver = 'handleDragOver';
+const HandleDrop = 'handleDrop';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -3469,25 +3520,32 @@ const getActiveDescendant = focusedIndex => {
   }
   return undefined;
 };
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused) => {
+const getClassName = (focused, focusedIndex, dropTarget) => {
+  const extraClass1 = focused && focusedIndex === -1 ? FocusOutline : Empty;
+  const extraClass2 = dropTarget === dropTargetFull ? ExplorerDropTarget : Empty;
+  const className = mergeClassNames(Viewlet, Explorer, extraClass1, extraClass2);
+  return className;
+};
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
-  const extraClass = focused && focusedIndex === -1 ? FocusOutline : '';
   const dom = [{
     type: Div,
-    className: mergeClassNames(Viewlet, Explorer, extraClass),
+    className: getClassName(focused, focusedIndex, dropTargets),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
     childCount: visibleItems.length,
     ariaActiveDescendant: getActiveDescendant(focusedIndex),
-    onFocus: HandleListFocus,
     onBlur: HandleListBlur,
+    onClick: HandleClick,
     onContextMenu: HandleContextMenu,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
+    onFocus: HandleListFocus,
     onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel,
-    onClick: HandleClick
+    onWheel: HandleWheel
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
@@ -3545,7 +3603,7 @@ const getTreeItemIndentWithChevron = (depth, chevron) => {
 };
 
 const ariaExpandedValues = [undefined, 'true', 'false'];
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons, useChevrons) => {
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons, useChevrons, dropTargets) => {
   const visible = [];
   const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
   let iconIndex = 0;
@@ -3556,7 +3614,7 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     const indent = indentFn(item.depth, chevron);
     const isFocused = i === focusedIndex;
     const id = isFocused ? 'TreeItemActive' : undefined;
-    const className = isFocused ? TreeItem + ' ' + TreeItemActive : TreeItem;
+    const className = isFocused ? mergeClassNames(TreeItem, TreeItemActive) : TreeItem;
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     visible.push({
@@ -3592,7 +3650,7 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
 const renderItems = (oldState, newState) => {
   const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.icons, newState.useChevrons);
   const isWide = newState.width > 450;
-  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused);
+  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -3749,31 +3807,47 @@ const renderEventListeners = () => {
     name: HandleWheel,
     params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
     passive: true
+  }, {
+    name: HandleDragOver,
+    params: ['handleDragOver', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleDrop,
+    params: ['handleDrop', 'event.clientX', 'event.clientY', 'event.dataTransfer.files'],
+    preventDefault: true
   }];
 };
 
-const getSavedRoot = (savedState, workspacePath) => {
-  return workspacePath;
+const getSavedMinLineY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'minLineY' in savedState && typeof savedState.minLineY === 'number') {
+    return savedState.minLineY;
+  }
+  return 0;
+};
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
+    return savedState.deltaY;
+  }
+  return 0;
+};
+const getSavedWorkspacePath = savedState => {
+  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
+    return savedState.workspacePath;
+  }
+  return '';
 };
-
 const restoreState = savedState => {
   if (!savedState) {
     return {
+      root: '',
       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;
-  }
+  const root = getSavedWorkspacePath(savedState);
+  const minLineY = getSavedMinLineY(savedState);
+  const deltaY = getSavedDeltaY(savedState);
   return {
-    ...savedState,
     root,
     minLineY,
     deltaY
@@ -3866,8 +3940,8 @@ const getPathPartsToReveal = (root, pathParts, dirents) => {
   }
   return pathParts;
 };
-const getPathPartChildren = pathPart => {
-  const children = getChildDirents(pathPart.pathSeparator, pathPart);
+const getPathPartChildren = async pathPart => {
+  const children = await getChildDirents(pathPart.pathSeparator, pathPart);
   return children;
 };
 const mergeVisibleWithHiddenItems = (visibleItems, hiddenItems) => {
@@ -4097,13 +4171,13 @@ const commandMap = {
   'Explorer.openContainingFolder': wrapCommand(openContainingFolder),
   'Explorer.removeDirent': wrapCommand(removeDirent),
   'Explorer.renameDirent': wrapCommand(renameDirent),
-  'Explorer.restoreState': wrapCommand(restoreState),
+  'Explorer.restoreState': restoreState,
   'Explorer.revealItem': wrapCommand(revealItem),
   'Explorer.setDeltaY': wrapCommand(setDeltaY),
   'Explorer.updateEditingValue': wrapCommand(updateEditingValue),
   'Explorer.updateIcons': wrapCommand(updateIcons),
   // not wrapped
-  'Explorer.create': create,
+  'Explorer.create2': create2,
   'Explorer.diff2': diff2,
   'Explorer.getKeyBindings': getKeyBindings,
   'Explorer.getMenuEntries': getMenuEntries,
@@ -4111,7 +4185,9 @@ const commandMap = {
   'Explorer.renderActions2': renderActions,
   'Explorer.renderEventListeners': renderEventListeners,
   'Explorer.saveState': saveState,
-  'Explorer.terminate': terminate
+  'Explorer.terminate': terminate,
+  // deprecated
+  'Explorer.create': create
 };
 
 const listen = async () => {

package/package.json

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