@lvce-editor/explorer-view 2.2.0 → 2.4.0

package/dist/explorerViewWorkerMain.js

@@ -1013,6 +1013,7 @@ const get$1 = id => {
 
 const invoke = (method, ...params) => {
   const rpc = get$1(RendererWorker);
+  // @ts-ignore
   return rpc.invoke(method, ...params);
 };
 
@@ -1384,7 +1385,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 = {
@@ -1795,6 +1796,13 @@ const focusFirst = state => {
 const lastIndex = array => {
   return array.length - 1;
 };
+const fromAsync = async asyncIterable => {
+  const children = [];
+  for await (const value of asyncIterable) {
+    children.push(value);
+  }
+  return children;
+};
 
 const focusLast = state => {
   const {
@@ -2567,13 +2575,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)) {
@@ -2614,8 +2624,55 @@ const handleDragOver = (state, x, y) => {
   };
 };
 
+const getChildHandles = async fileHandle => {
+  // @ts-ignore
+  const values = fileHandle.values();
+  const children = await fromAsync(values);
+  return children;
+};
+
+const getFileHandleText = async fileHandle => {
+  const file = await fileHandle.getFile();
+  const text = await file.text();
+  return text;
+};
+
+const isDirectoryHandle = fileHandle => {
+  return fileHandle.kind === 'directory';
+};
+
+const isFileHandle = fileHandle => {
+  return fileHandle.kind === 'file';
+};
+
+const createUploadTree = async (root, fileHandles) => {
+  const uploadTree = Object.create(null);
+  for (const fileHandle of fileHandles) {
+    const name = fileHandle.name;
+    if (isDirectoryHandle(fileHandle)) {
+      const children = await getChildHandles(fileHandle);
+      const childTree = await createUploadTree(name, children);
+      uploadTree[name] = childTree;
+    } else if (isFileHandle(fileHandle)) {
+      const text = await getFileHandleText(fileHandle);
+      uploadTree[name] = text;
+    }
+  }
+  return uploadTree;
+};
+
 const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
-  // TODO send to renderer worker
+  const uploadTree = await createUploadTree(root, fileSystemHandles);
+  console.log({
+    uploadTree
+  });
+
+  // TODO
+  // 1. in electron, use webutils.getPathForFile to see if a path is available
+  // 2. else, walk all files and folders recursively and upload all of them (if there are many, show a progress bar)
+
+  // TODO send file system operations to renderer worker
+  return true;
 };
 
 const mergeDirents$2 = (oldDirents, newDirents) => {
@@ -2635,7 +2692,7 @@ const handleDrop$2 = async (state, files) => {
     pathSeparator,
     items
   } = state;
-  const handled = await uploadFileSystemHandles();
+  const handled = await uploadFileSystemHandles(root, pathSeparator, files);
   if (handled) {
     return state;
   }
@@ -2721,10 +2778,12 @@ const handleDropIntoFolder = async (state, dirent, index, files) => {
     pathSeparator,
     items
   } = state;
+  // @ts-ignore
   for (const file of files) {
     // TODO path basename
-    const baseName = file;
+    const baseName = file.name;
     const to = dirent.path + pathSeparator + baseName;
+    // @ts-ignore
     await copy$1(file, to);
   }
   const childDirents = await getChildDirents(pathSeparator, dirent);
@@ -2747,7 +2806,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;
@@ -2766,15 +2825,27 @@ const handleDropIndex = async (state, index, files) => {
   }
 };
 
-const handleDrop = async (state, x, y, files) => {
+const getDropHandler = index => {
+  switch (index) {
+    case -1:
+      return handleDropRoot;
+    default:
+      return handleDropIndex;
+  }
+};
+
+const getFileHandles = async fileIds => {
+  const files = await invoke('FileSystemHandle.getFileHandles', fileIds);
+  return files;
+};
+
+const handleDrop = async (state, x, y, fileIds) => {
   try {
+    const files = await getFileHandles(fileIds);
     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');
   }
@@ -3345,6 +3416,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';
@@ -3379,6 +3452,7 @@ const HandleListFocus = 'handleListFocus';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
 const HandleDragOver = 'handleDragOver';
+const HandleDrop = 'handleDrop';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -3509,26 +3583,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,
-    onDragOver: HandleDragOver
+    onWheel: HandleWheel
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
@@ -3586,7 +3666,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;
@@ -3597,7 +3677,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({
@@ -3633,7 +3713,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];
 };
 
@@ -3792,7 +3872,12 @@ const renderEventListeners = () => {
     passive: true
   }, {
     name: HandleDragOver,
-    params: ['handleDragOver', 'event.clientX', 'event.clientY']
+    params: ['handleDragOver', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleDrop,
+    params: ['handleDrop', 'event.clientX', 'event.clientY', 'event.dataTransfer.files2'],
+    preventDefault: true
   }];
 };
 

package/package.json

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