@lvce-editor/explorer-view 3.16.0 → 3.18.0

package/dist/explorerViewWorkerMain.js

@@ -1045,6 +1045,90 @@ const createMockRpc = ({
   return mockRpc;
 };
 
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
+const create$2 = () => {
+  const states = Object.create(null);
+  const commandMapRef = {};
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseInt(key);
+      });
+    },
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (newState === newerState) {
+          return;
+        }
+        const latest = states[uid];
+        states[uid] = {
+          oldState: latest.oldState,
+          newState: newerState
+        };
+      };
+      return wrapped;
+    },
+    wrapGetter(fn) {
+      const wrapped = (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        return fn(newState, ...args);
+      };
+      return wrapped;
+    },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        newState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+    }
+  };
+};
+const terminate = () => {
+  globalThis.close();
+};
+
 const CreateFolder$1 = 1;
 const CreateFile$1 = 2;
 const Copy$1 = 3;
@@ -1053,6 +1137,14 @@ const Remove = 5;
 
 const Text = 12;
 
+const Button$3 = 'event.button';
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const CtrlKey = 'event.ctrlKey';
+const DeltaMode = 'event.deltaMode';
+const DeltaY = 'event.deltaY';
+const TargetValue = 'event.target.value';
+
 const Enter = 3;
 const Escape = 8;
 const Space = 9;
@@ -1078,6 +1170,11 @@ const DebugWorker = 55;
 const FileSystemWorker$1 = 209;
 const RendererWorker$1 = 1;
 
+const FocusElementByName = 'Viewlet.focusElementByName';
+const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
+const SetFocusContext = 'Viewlet.setFocusContext';
+
 const FocusExplorer = 13;
 const FocusExplorerEditBox = 14;
 
@@ -1089,7 +1186,7 @@ const get$1 = id => {
   return rpcs[id];
 };
 
-const create$2 = rpcId => {
+const create$1 = rpcId => {
   return {
     // @ts-ignore
     invoke(method, ...params) {
@@ -1118,7 +1215,7 @@ const {
   invokeAndTransfer: invokeAndTransfer$1,
   set: set$4,
   dispose: dispose$1
-} = create$2(FileSystemWorker$1);
+} = create$1(FileSystemWorker$1);
 const remove$1 = async dirent => {
   return invoke$3('FileSystem.remove', dirent);
 };
@@ -1198,7 +1295,7 @@ const {
   invokeAndTransfer,
   set: set$3,
   dispose
-} = create$2(RendererWorker$1);
+} = create$1(RendererWorker$1);
 const searchFileHtml = async uri => {
   return invoke$2('ExtensionHost.searchFileWithHtml', uri);
 };
@@ -2544,87 +2641,6 @@ const copyRelativePath = async state => {
   return state;
 };
 
-const toCommandId = key => {
-  const dotIndex = key.indexOf('.');
-  return key.slice(dotIndex + 1);
-};
-const create$1 = () => {
-  const states = Object.create(null);
-  const commandMapRef = {};
-  return {
-    get(uid) {
-      return states[uid];
-    },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
-      };
-    },
-    dispose(uid) {
-      delete states[uid];
-    },
-    getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
-    },
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
-      }
-    },
-    wrapCommand(fn) {
-      const wrapped = async (uid, ...args) => {
-        const {
-          newState
-        } = states[uid];
-        const newerState = await fn(newState, ...args);
-        if (newState === newerState) {
-          return;
-        }
-        const latest = states[uid];
-        states[uid] = {
-          oldState: latest.oldState,
-          newState: newerState
-        };
-      };
-      return wrapped;
-    },
-    wrapGetter(fn) {
-      const wrapped = (uid, ...args) => {
-        const {
-          newState
-        } = states[uid];
-        return fn(newState, ...args);
-      };
-      return wrapped;
-    },
-    diff(uid, modules, numbers) {
-      const {
-        oldState,
-        newState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
-        }
-      }
-      return diffResult;
-    },
-    getCommandIds() {
-      const keys = Object.keys(commandMapRef);
-      const ids = keys.map(toCommandId);
-      return ids;
-    },
-    registerCommands(commandMap) {
-      Object.assign(commandMapRef, commandMap);
-    }
-  };
-};
-
 const {
   get,
   set,
@@ -2632,7 +2648,7 @@ const {
   registerCommands,
   getCommandIds,
   wrapGetter
-} = create$1();
+} = create$2();
 
 const ListItem = 22;
 
@@ -2685,7 +2701,8 @@ const create2 = (uid, uri, x, y, width, height, args, parentUid, platform = 0) =
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0
   };
   set(uid, state, state);
 };
@@ -2737,12 +2754,17 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     cutItems: [],
     isPointerDown: false,
     pointerDownIndex: -1,
-    sourceControlIgnoredUris: []
+    sourceControlIgnoredUris: [],
+    maxIndent: 0
   };
   set(state.uid, state, state);
   return state;
 };
 
+const isEqual$6 = (oldState, newState) => {
+  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive;
+};
+
 const isEqual$5 = (oldState, newState) => {
   return oldState.isPointerDown || !newState.isPointerDown;
 };
@@ -2765,6 +2787,7 @@ const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderSelection = 9;
 const RenderDragData = 10;
+const RenderCss = 11;
 
 const isEqual$1 = (oldState, newState) => {
   if (newState.focus !== Input$1) {
@@ -2773,8 +2796,8 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.focus === Input$1 && newState.focus === Input$1 && oldState.editingValue === newState.editingValue;
 };
 
-const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5];
-const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData];
+const modules = [isEqual$3, isEqual$4, isEqual$4, isEqual$1, isEqual$2, isEqual$5, isEqual$6];
+const numbers = [RenderItems, RenderFocus, RenderFocusContext, RenderValue, RenderSelection, RenderDragData, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -4978,7 +5001,8 @@ const loadContent = async (state, savedState) => {
     pathSeparator,
     excluded,
     useChevrons,
-    confirmDelete
+    confirmDelete,
+    maxIndent: 10
   };
 };
 
@@ -5292,6 +5316,30 @@ const renameDirent = state => {
   };
 };
 
+const defaultIndent$1 = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent$1}rem`;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    scrollBarHeight,
+    uid,
+    maxIndent
+  } = newState;
+  const rules = [`.Explorer {
+  --ScrollBarThumbHeight: ${scrollBarHeight}px;
+`];
+  for (let i = 0; i < maxIndent; i++) {
+    const indent = getTreeItemIndent(i);
+    rules.push(`.Indent-${i} {
+  padding-left: ${indent}px;
+}`);
+  }
+  const css = rules.join('\n');
+  return [SetCss, uid, css];
+};
+
 const getDragLabel = urls => {
   if (urls.length === 1) {
     return getBaseName('/', urls[0]);
@@ -5347,10 +5395,10 @@ const renderFocus = (oldState, newState) => {
     return [];
   }
   if (newState.focus === Input$1) {
-    return ['Viewlet.focusElementByName', ExplorerInput];
+    return [FocusElementByName, ExplorerInput];
   }
   if (newState.focus === List) {
-    return ['Viewlet.focusSelector', '.ListItems'];
+    return [FocusSelector, '.ListItems'];
   }
   // TODO
   // 1. when focused, focus the outer list element
@@ -5360,10 +5408,10 @@ const renderFocus = (oldState, newState) => {
 
 const renderFocusContext = (oldState, newState) => {
   if (newState.focus === Input$1) {
-    return ['Viewlet.setFocusContext', newState.uid, FocusExplorerEditBox];
+    return [SetFocusContext, newState.uid, FocusExplorerEditBox];
   }
   if (newState.focus === List) {
-    return ['Viewlet.setFocusContext', newState.uid, FocusExplorer];
+    return [SetFocusContext, newState.uid, FocusExplorer];
   }
   return [];
 };
@@ -5513,7 +5561,10 @@ const getInputClassName = hasEditingError => {
   return ExplorerInputBox;
 };
 
-const getInputDom = hasEditingError => {
+const getInputDom = (isEditing, hasEditingError) => {
+  if (!isEditing) {
+    return [];
+  }
   const ariaLabel = typeAFileName();
   return [{
     type: Input,
@@ -5536,7 +5587,10 @@ const label = {
   className: Label,
   childCount: 1
 };
-const getLabelDom = (name, isDimmed) => {
+const getLabelDom = (isEditing, name, isDimmed) => {
+  if (isEditing) {
+    return [];
+  }
   if (isDimmed) {
     return [{
       type: Div,
@@ -5547,13 +5601,6 @@ const getLabelDom = (name, isDimmed) => {
   return [label, text(name)];
 };
 
-const getInputOrLabelDom = (isEditing, hasEditingError, name, isCut, isIgnored) => {
-  if (isEditing) {
-    return getInputDom(hasEditingError);
-  }
-  return getLabelDom(name, isCut || isIgnored);
-};
-
 const getExplorerItemVirtualDom = item => {
   const {
     ariaExpanded,
@@ -5590,7 +5637,7 @@ const getExplorerItemVirtualDom = item => {
     ariaDescription: '',
     id,
     'data-index': index
-  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name, isCut, isIgnored)];
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputDom(isEditing, hasEditingError), ...getLabelDom(isEditing, name, isCut || isIgnored)];
 };
 
 const getActiveDescendant = focusedIndex => {
@@ -5725,8 +5772,9 @@ const getExpandedType = type => {
   }
 };
 
-const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
+const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
   let className = TreeItem;
+  className = mergeClassNames(className, `Indent-${depth}`);
   if (isSelected || isFocused) {
     className = mergeClassNames(className, TreeItemActive);
   }
@@ -5736,11 +5784,6 @@ const getTreeItemClassName = (isSelected, isFocused, isDropping) => {
   return className;
 };
 
-const defaultIndent$1 = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
-};
-
 // TODO make all of these variable configurable
 const defaultPaddingLeft = 4;
 const defaultIndent = 8;
@@ -5777,7 +5820,7 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
     const isCut = cutItems.includes(item.path);
     const isDropping = dropTargets.includes(i);
     const isIgnored = sourceControlIgnoredUris.includes(item.path);
-    const className = getTreeItemClassName(isSelected, isFocused, isDropping); // TODO compute classname in dom function
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, item.depth); // TODO compute classname in dom function
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     const isEditing = i === editingIndex;
@@ -5871,6 +5914,8 @@ const getRenderer = diffType => {
       return renderEditingSelection;
     case RenderDragData:
       return renderDragData;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }
@@ -6006,7 +6051,7 @@ const renderEventListeners = () => {
     params: ['handleBlur']
   }, {
     name: HandleClick,
-    params: ['handleClickAt', 'event.defaultPrevented', 'event.button', 'event.ctrlKey', 'event.shiftKey', 'event.clientX', 'event.clientY'],
+    params: ['handleClickAt', 'event.defaultPrevented', Button$3, CtrlKey, 'event.shiftKey', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleInputClick,
@@ -6018,26 +6063,26 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandlePointerDown,
-    params: ['handlePointerDown', 'event.button', 'event.clientX', 'event.clientY']
+    params: ['handlePointerDown', Button$3, ClientX, ClientY]
     // preventDefault: true,
   }, {
     name: HandleEditingInput,
-    params: ['updateEditingValue', 'event.target.value']
+    params: ['updateEditingValue', TargetValue]
   }, {
     name: HandleContextMenu,
-    params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
+    params: ['handleContextMenu', Button$3, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleWheel,
-    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    params: ['handleWheel', DeltaMode, DeltaY],
     passive: true
   }, {
     name: HandleDragOver,
-    params: ['handleDragOver', 'event.clientX', 'event.clientY'],
+    params: ['handleDragOver', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleDrop,
-    params: ['handleDrop', 'event.clientX', 'event.clientY', 'event.dataTransfer.files2', 'event.dataTransfer.files'],
+    params: ['handleDrop', ClientX, ClientY, 'event.dataTransfer.files2', 'event.dataTransfer.files'],
     preventDefault: true
   }, {
     name: HandleDragLeave,
@@ -6279,10 +6324,6 @@ const selectUp = state => {
   };
 };
 
-const terminate = () => {
-  globalThis.close();
-};
-
 const getEditingIcon = async (editingType, value, direntType) => {
   if (editingType === CreateFile) {
     return invoke$1('IconTheme.getFileIcon', {

package/package.json

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