@lvce-editor/explorer-view 2.32.0 → 2.33.0

package/dist/explorerViewWorkerMain.js

@@ -356,22 +356,11 @@ class IpcChildWithModuleWorker extends Ipc {
 const wrap$f = global => {
   return new IpcChildWithModuleWorker(global);
 };
-const withResolvers = () => {
-  let _resolve;
-  const promise = new Promise(resolve => {
-    _resolve = resolve;
-  });
-  return {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    resolve: _resolve,
-    promise
-  };
-};
 const waitForFirstMessage = async port => {
   const {
     resolve,
     promise
-  } = withResolvers();
+  } = Promise.withResolvers();
   port.addEventListener('message', resolve, {
     once: true
   });
@@ -442,7 +431,7 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$3 = (id, fn) => {
   callbacks[id] = fn;
 };
 const get$2 = id => {
@@ -461,7 +450,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$3(id, resolve);
   return {
     id,
     promise
@@ -993,6 +982,33 @@ const getPaths = items => {
   return items.map(getPath);
 };
 
+const rpcs = Object.create(null);
+const set$5 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+const RendererWorker$1 = 1;
+const invoke$2 = (method, ...params) => {
+  const rpc = get$1(RendererWorker$1);
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const set$2 = rpc => {
+  set$5(RendererWorker$1, rpc);
+};
+const RendererWorker = {
+  __proto__: null,
+  invoke: invoke$2,
+  set: set$2
+};
+
+const {
+  invoke,
+  set: set$1
+} = RendererWorker;
+
 const DELTA_EDITING = 100;
 
 const BlockDevice = 1;
@@ -1010,37 +1026,26 @@ const EditingFile = File + DELTA_EDITING;
 const EditingFolder = Directory + DELTA_EDITING;
 const EditingDirectoryExpanded = DirectoryExpanded + DELTA_EDITING;
 
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$1 = id => {
-  return rpcs[id];
-};
-
-const invoke = (method, ...params) => {
-  const rpc = get$1(RendererWorker);
-  // @ts-ignore
-  return rpc.invoke(method, ...params);
-};
-
-const getFileIcon = async name => {
-  return invoke('IconTheme.getFileIcon', {
-    name
-  });
+const getSimpleType = direntType => {
+  if (direntType === Directory || direntType === DirectoryExpanded || direntType === EditingDirectoryExpanded || direntType === EditingFolder) {
+    return 2;
+  }
+  return 1;
 };
-
-const getFolderIcon = async name => {
-  return invoke('IconTheme.getFolderIcon', {
-    name
-  });
+const toSimpleIconRequest = request => {
+  return {
+    name: request.name,
+    type: getSimpleType(request.type)
+  };
 };
 
 const requestFileIcons = async requests => {
-  const promises = requests.map(request => request.type === File ? getFileIcon(request.name) : getFolderIcon(request.name));
-  return Promise.all(promises);
+  if (requests.length === 0) {
+    return [];
+  }
+  const simpleRequests = requests.map(toSimpleIconRequest);
+  const icons = await invoke('IconTheme.getIcons', simpleRequests);
+  return icons;
 };
 
 const updateIconCache = (iconCache, missingRequests, newIcons) => {
@@ -4129,11 +4134,6 @@ const renderFocus = (oldState, newState) => {
   return [];
 };
 
-const None$2 = 'none';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
 const Actions = 'Actions';
 const Button$2 = 'Button';
 const ButtonNarrow = 'ButtonNarrow';
@@ -4153,7 +4153,10 @@ const Label = 'Label';
 const ListItems = 'ListItems';
 const MaskIconChevronDown = 'MaskIconChevronDown';
 const MaskIconChevronRight = 'MaskIconChevronRight';
-const TreeItem = 'TreeItem';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const TreeItem$1 = 'TreeItem';
 const TreeItemActive = 'TreeItemActive';
 const Viewlet = 'Viewlet';
 const Welcome = 'Welcome';
@@ -4197,6 +4200,12 @@ const text = data => {
     childCount: 0
   };
 };
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
 
 const Button$1 = 1;
 const Div = 4;
@@ -4204,6 +4213,33 @@ const Input = 6;
 const Img = 17;
 const P = 50;
 
+const getExplorerWelcomeVirtualDom = isWide => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer),
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Div,
+    className: Welcome,
+    childCount: 2
+  }, {
+    type: P,
+    className: WelcomeMessage,
+    childCount: 1
+  }, text(youHaveNotYetOpenedAFolder()), {
+    type: Button$1,
+    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
+    childCount: 1,
+    onClick: HandleClickOpenFolder
+  }, text(openFolder$1())];
+};
+
+const None$2 = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
 const chevronDownVirtualDom = {
   type: Div,
   className: mergeClassNames(Chevron, MaskIconChevronDown),
@@ -4291,7 +4327,7 @@ const getExplorerItemVirtualDom = item => {
   const chevronDom = getChevronVirtualDom(chevron);
   return [{
     type: Div,
-    role: TreeItem$1,
+    role: TreeItem,
     className,
     draggable: true,
     title: path,
@@ -4307,28 +4343,6 @@ const getExplorerItemVirtualDom = item => {
   }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, hasEditingError, name)];
 };
 
-const getExplorerWelcomeVirtualDom = isWide => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, Explorer),
-    tabIndex: 0,
-    childCount: 1
-  }, {
-    type: Div,
-    className: Welcome,
-    childCount: 2
-  }, {
-    type: P,
-    className: WelcomeMessage,
-    childCount: 1
-  }, text(youHaveNotYetOpenedAFolder()), {
-    type: Button$1,
-    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
-    childCount: 1,
-    onClick: HandleClickOpenFolder
-  }, text(openFolder$1())];
-};
-
 const getActiveDescendant = focusedIndex => {
   if (focusedIndex >= 0) {
     return 'TreeItemActive';
@@ -4341,17 +4355,8 @@ const getClassName = (focused, focusedIndex, dropTarget) => {
   const className = mergeClassNames(ListItems, extraClass1, extraClass2);
   return className;
 };
-const parentNode = {
-  type: Div,
-  childCount: 1,
-  className: mergeClassNames(Viewlet, Explorer),
-  role: 'none'
-};
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets) => {
-  if (!root) {
-    return getExplorerWelcomeVirtualDom(isWide);
-  }
-  const dom = [parentNode, {
+const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets) => {
+  const dom = [{
     type: Div,
     className: getClassName(focused, focusedIndex, dropTargets),
     tabIndex: 0,
@@ -4373,6 +4378,50 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
   return dom;
 };
 
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
+  }
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, scrollBarTop);
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    childCount: 1
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
+const parentNode = {
+  type: Div,
+  childCount: 2,
+  className: mergeClassNames(Viewlet, Explorer),
+  role: 'none'
+};
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, scrollTop) => {
+  if (!root) {
+    return getExplorerWelcomeVirtualDom(isWide);
+  }
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarTop);
+  const dom = [parentNode, ...getListItemsVirtualDom(visibleItems, focusedIndex, focused, dropTargets), ...scrollBarDom];
+  return dom;
+};
+
 const None$1 = 0;
 const Right = 1;
 const Down = 2;
@@ -4408,8 +4457,8 @@ const getExpandedType = type => {
   }
 };
 
-const focused = mergeClassNames(TreeItem, TreeItemActive);
-const selected = mergeClassNames(TreeItem, TreeItemActive);
+const focused = mergeClassNames(TreeItem$1, TreeItemActive);
+const selected = mergeClassNames(TreeItem$1, TreeItemActive);
 const getTreeItemClassName = (isSelected, isFocused) => {
   if (isFocused) {
     return focused;
@@ -4417,7 +4466,7 @@ const getTreeItemClassName = (isSelected, isFocused) => {
   if (isSelected) {
     return selected;
   }
-  return TreeItem;
+  return TreeItem$1;
 };
 
 const defaultIndent$1 = 1;
@@ -4488,7 +4537,8 @@ 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.editingErrorMessage, newState.icons, newState.useChevrons, newState.dropTargets, newState.editingIcon);
   const isWide = newState.width > 450;
-  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets);
+  const contentHeight = newState.items.length * newState.itemHeight;
+  const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused, newState.dropTargets, newState.height, contentHeight, newState.deltaY);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -4840,7 +4890,7 @@ const revealItemHidden = async (state, uri) => {
   }
   const pathPartsToReveal = getPathPartsToReveal(root, pathParts, items);
   const pathPartsChildren = await Promise.all(pathPartsToReveal.map(getPathPartChildren));
-  const pathPartsChildrenFlat = pathPartsChildren.flat(1);
+  const pathPartsChildrenFlat = pathPartsChildren.flat();
   const orderedPathParts = orderDirents(pathPartsChildrenFlat);
   const mergedDirents = mergeVisibleWithHiddenItems(items, orderedPathParts);
   const index = getIndex(mergedDirents, uri);
@@ -5112,7 +5162,7 @@ const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$3(RendererWorker, rpc);
+  set$1(rpc);
 };
 
 const main = async () => {

package/package.json

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