@lvce-editor/explorer-view 2.2.0 → 2.3.0

package/dist/explorerViewWorkerMain.js

@@ -1384,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 = {
@@ -2567,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)) {
@@ -2721,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;
@@ -2747,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;
@@ -2766,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');
   }
@@ -3345,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';
@@ -3379,6 +3389,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 +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,
-    onDragOver: HandleDragOver
+    onWheel: HandleWheel
   }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
@@ -3586,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;
@@ -3597,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({
@@ -3633,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];
 };
 
@@ -3792,7 +3809,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.files'],
+    preventDefault: true
   }];
 };
 

package/package.json

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