@lvce-editor/explorer-view 2.61.0 → 2.63.0

package/dist/explorerViewWorkerMain.js

@@ -2021,7 +2021,8 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     scrollBarHeight: 0,
     confirmPaste: false,
     pasteShouldMove: false,
-    cutItems: []
+    cutItems: [],
+    isPointerDown: false
   };
   set(uid, state, state);
 };
@@ -2070,7 +2071,8 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     scrollBarHeight: 0,
     confirmPaste: false,
     pasteShouldMove: false,
-    cutItems: []
+    cutItems: [],
+    isPointerDown: false
   };
   set(state.uid, state, state);
   return state;
@@ -2081,6 +2083,7 @@ const RenderFocus = 6;
 const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderSelection = 9;
+const RenderDragData = 10;
 
 const diffType$3 = RenderFocus;
 const isEqual$4 = (oldState, newState) => {
@@ -2408,7 +2411,7 @@ const focusPrevious = state => {
   }
 };
 
-const commandIds = ['acceptEdit', 'cancelEdit', 'cancelTypeAhead', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'handleCut', 'selectIndices', 'toggleIndividualSelection', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleDragLeave', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleInputKeyDown', 'handleKeyDown', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'updateEditingValue', 'updateIcons'];
+const commandIds = ['acceptEdit', 'cancelEdit', 'cancelTypeAhead', 'collapseAll', 'copyPath', 'copyRelativePath', 'dispose', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'getMenuEntries2', 'getMouseActions', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleContextMenuKeyboard', 'handleCopy', 'handleCut', 'handleDragLeave', 'handleDragOver', 'handleDragStart', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleInputBlur', 'handleInputClick', 'handleInputKeyDown', 'handleKeyDown', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'removeDirent', 'rename', 'renameDirent', 'renderEventListeners', 'revealItem', 'revealItem', 'scrollDown', 'scrollUp', 'selectAll', 'selectDown', 'selectIndices', 'selectUp', 'setDeltaY', 'setSelectedIndices', 'toggleIndividualSelection', 'updateEditingValue', 'updateIcons'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -2927,9 +2930,19 @@ const handleArrowRight = async state => {
 const handleBlur = async state => {
   // TODO when blur event occurs because of context menu, focused index should stay the same
   // but focus outline should be removed
+  const {
+    items
+  } = state;
+  const newItems = items.map(item => {
+    return {
+      ...item,
+      selected: false
+    };
+  });
   return {
     ...state,
-    focused: false
+    focused: false,
+    items: newItems
   };
 };
 
@@ -3260,14 +3273,6 @@ const handleCut = async state => {
 
 const handleDragLeave = state => {
   return state;
-  // const { dropTargets } = state
-  // if (dropTargets.length === 0) {
-  //   return state
-  // }
-  // return {
-  //   ...state,
-  //   dropTargets: [],
-  // }
 };
 
 const canBeDroppedInto = dirent => {
@@ -3333,6 +3338,10 @@ const handleDragOver = (state, x, y) => {
   };
 };
 
+const handleDragStart = state => {
+  return state;
+};
+
 const isExpanded = item => {
   return item.type === DirectoryExpanded || item.type === DirectoryExpanding;
 };
@@ -3649,8 +3658,7 @@ const handleDropIntoFile = (state, dirent, index, fileHandles, files, paths) =>
   if (parentIndex === -1) {
     return handleDropRoot(state, fileHandles, files, paths);
   }
-  // @ts-ignore
-  return handleDropIndex(parentIndex);
+  return handleDropIndex(state, fileHandles, files, paths, parentIndex);
 };
 const handleDropIndex = async (state, fileHandles, files, paths, index) => {
   const {
@@ -4077,7 +4085,10 @@ const handlePointerDown = (state, button, x, y) => {
       focus: List
     };
   }
-  return state;
+  return {
+    ...state,
+    focusedIndex: index
+  };
 };
 
 const handleUpload = async (state, dirents) => {
@@ -4611,6 +4622,38 @@ const renameDirent = state => {
   };
 };
 
+const getDragLabel = urls => {
+  if (urls.length === 1) {
+    return urls[0];
+  }
+  return `${urls.length}`;
+};
+const getDragData = urls => {
+  const data = urls.join('\n');
+  // TODO send selected urls
+  const dragData = [{
+    type: 'text/plain',
+    data
+  }, {
+    type: 'text/uri-list',
+    data
+  }];
+  // @ts-ignore
+  dragData.label = getDragLabel(urls);
+  return dragData;
+};
+
+const renderDragData = (oldState, newState) => {
+  const {
+    items,
+    focusedIndex
+  } = newState;
+  const selected = items.filter((item, index) => item.selected || index === focusedIndex);
+  const urls = selected.map(item => item.path);
+  const dragData = getDragData(urls);
+  return ['Viewlet.setDragData', newState.uid, dragData];
+};
+
 const ExplorerInput = 'ExplorerInput';
 
 const renderEditingSelection = (oldState, newState) => {
@@ -4734,6 +4777,7 @@ const HandleListBlur = 11;
 const HandleListFocus = 12;
 const HandlePointerDown = 14;
 const HandleWheel = 15;
+const HandleDragStart = 17;
 
 const getExplorerWelcomeVirtualDom = isWide => {
   return [{
@@ -4847,7 +4891,8 @@ const getExplorerItemVirtualDom = item => {
     path,
     setSize,
     posInSet,
-    isCut
+    isCut,
+    index
   } = item;
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
@@ -4864,7 +4909,8 @@ const getExplorerItemVirtualDom = item => {
     ariaLabel: name,
     ariaExpanded,
     ariaDescription: '',
-    id
+    id,
+    'data-index': index
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name, isCut)];
 };
 
@@ -4999,16 +5045,15 @@ const getExpandedType = type => {
   }
 };
 
-const focused = mergeClassNames(TreeItem, TreeItemActive);
-const selected = mergeClassNames(TreeItem, TreeItemActive);
-const getTreeItemClassName = (isSelected, isFocused) => {
-  if (isFocused) {
-    return focused;
+const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
+  let className = TreeItem;
+  if (isSelected || isFocused) {
+    className = mergeClassNames(className, TreeItemActive);
   }
-  if (isSelected) {
-    return selected;
+  if (isDropping) {
+    className = mergeClassNames(className, 'DropTarget');
   }
-  return TreeItem;
+  return className;
 };
 
 const defaultIndent$1 = 1;
@@ -5050,7 +5095,8 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     const id = isFocused ? 'TreeItemActive' : undefined;
     const isSelected = item.selected;
     const isCut = cutItems.includes(item.path);
-    const className = getTreeItemClassName(isSelected, isFocused); // TODO compute classname in dom function
+    const isDropping = dropTargets.includes(i);
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping); // TODO compute classname in dom function
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     const isEditing = i === editingIndex;
@@ -5072,7 +5118,8 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
       chevron,
       id,
       className,
-      isCut
+      isCut,
+      index: i
     });
   }
   return visible;
@@ -5080,25 +5127,25 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
 
 const renderItems = (oldState, newState) => {
   const {
-    items,
-    minLineY,
-    maxLineY,
-    focusedIndex,
+    cutItems,
+    deltaY,
+    dropTargets,
+    editingErrorMessage,
+    editingIcon,
     editingIndex,
     editingType,
     editingValue,
-    editingErrorMessage,
+    focused,
+    focusedIndex,
+    height,
     icons,
-    useChevrons,
-    dropTargets,
-    editingIcon,
     itemHeight,
-    width,
+    items,
+    maxLineY,
+    minLineY,
     root,
-    deltaY,
-    focused,
-    height,
-    cutItems
+    useChevrons,
+    width
   } = newState;
   const visibleDirents = getVisibleExplorerItems(items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, editingErrorMessage, icons, useChevrons, dropTargets, editingIcon, cutItems);
   const isWide = width > 450;
@@ -5139,6 +5186,8 @@ const getRenderer = diffType => {
       return renderValue;
     case RenderSelection:
       return renderEditingSelection;
+    case RenderDragData:
+      return renderDragData;
     default:
       throw new Error('unknown renderer');
   }
@@ -5286,8 +5335,8 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandlePointerDown,
-    params: ['handlePointerDown', 'event.button', 'event.clientX', 'event.clientY'],
-    preventDefault: true
+    params: ['handlePointerDown', 'event.button', 'event.clientX', 'event.clientY']
+    // preventDefault: true,
   }, {
     name: HandleEditingInput,
     params: ['updateEditingValue', 'event.target.value']
@@ -5310,6 +5359,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleDragLeave,
     params: ['handleDragLeave']
+  }, {
+    name: HandleDragStart,
+    params: ['handleDragStart'],
+    // @ts-ignore
+    dragInfo: [{
+      type: 'text/plain',
+      data: 'https://example.com'
+    }],
+    dragEffect: 'copyMove'
   }];
 };
 
@@ -5606,6 +5664,7 @@ const commandMap = {
   'Explorer.focusFirst': wrapCommand(focusFirst),
   'Explorer.focusIndex': wrapCommand(focusIndex),
   'Explorer.focusLast': wrapCommand(focusLast),
+  'Explorer.handleDragStart': wrapCommand(handleDragStart),
   'Explorer.focusNext': wrapCommand(focusNext),
   'Explorer.focusNone': wrapCommand(focusNone),
   'Explorer.focusPrevious': wrapCommand(focusPrevious),

package/package.json

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