@lvce-editor/explorer-view 3.27.0 → 4.1.0

package/dist/explorerViewWorkerMain.js

@@ -2730,9 +2730,9 @@ const text = data => {
   };
 };
 
-const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, depth) => {
+const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, indent) => {
   let className = TreeItem$1;
-  className = mergeClassNames(className, `Indent-${depth}`);
+  className = mergeClassNames(className, `Indent-${indent}`);
   if (isSelected || isFocused) {
     className = mergeClassNames(className, TreeItemActive);
   }
@@ -2742,9 +2742,9 @@ const getTreeItemClassName = (isSelected, isFocused, isDropping, useChevrons, de
   return className;
 };
 
-const defaultIndent$1 = 1;
+const defaultIndent$1 = 12;
 const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
+  return depth * defaultIndent$1;
 };
 
 // TODO make all of these variable configurable
@@ -2756,7 +2756,7 @@ const chevronSize = 22;
 const getTreeItemIndentWithChevron = (depth, chevron) => {
   // TODO use numeric value here, convert to string value in renderer process
   const extraSpace = chevron ? 0 : chevronSize;
-  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
+  return depth * defaultIndent + extraSpace + defaultPaddingLeft;
 };
 
 const ariaExpandedValues = [undefined, 'true', 'false'];
@@ -2783,7 +2783,8 @@ 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, useChevrons, item.depth); // TODO compute classname in dom function
+    const indent = indentFn(item.depth, chevron);
+    const className = getTreeItemClassName(isSelected, isFocused, isDropping, useChevrons, indent);
     const expanded = getExpandedType(item.type);
     const ariaExpanded = ariaExpandedValues[expanded];
     const isEditing = i === editingIndex;
@@ -2792,7 +2793,6 @@ const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editin
       icon = editingIcon;
       chevron = getEditingChevron(item.type);
     }
-    const indent = indentFn(item.depth, chevron);
     visible.push({
       ...item,
       posInSet: item.posInSet ?? i + 1,
@@ -2986,7 +2986,10 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
 };
 
 const isEqual$6 = (oldState, newState) => {
-  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive && oldState.maxIndent === newState.maxIndent;
+  // TODO compute css more optimized
+  // maybe only when items change, and even then not
+  // always, but only when it affects the css
+  return oldState.scrollBarHeight === newState.scrollBarHeight && oldState.scrollBarActive === newState.scrollBarActive && oldState.maxIndent === newState.maxIndent && oldState.visibleExplorerItems === newState.visibleExplorerItems;
 };
 
 const isEqual$5 = (oldState, newState) => {
@@ -3972,6 +3975,22 @@ const show = async (x, y, id, ...args) => {
 
 const Explorer = 4;
 
+const handleContextMenuAtIndex = async (state, index, x, y) => {
+  number(x);
+  number(y);
+  const {
+    uid
+  } = state;
+  const newState = {
+    ...state,
+    focusedIndex: index,
+    focused: false
+  };
+  set$1(uid, state, newState);
+  await show(x, y, Explorer);
+  return newState;
+};
+
 const handleContextMenuKeyboard = async state => {
   const {
     focusedIndex,
@@ -3982,22 +4001,14 @@ const handleContextMenuKeyboard = async state => {
   } = state;
   const menuX = x;
   const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
-  await show(menuX, menuY, Explorer);
-  return state;
+  return handleContextMenuAtIndex(state, focusedIndex, menuX, menuY);
 };
 
 const handleContextMenuMouseAt = async (state, x, y) => {
   number(x);
   number(y);
   const focusedIndex = getIndexFromPosition(state, x, y);
-  const newState = {
-    ...state,
-    focusedIndex,
-    focused: false
-  };
-  set$1(state.uid, state, newState);
-  await show(x, y, Explorer);
-  return state;
+  return handleContextMenuAtIndex(state, focusedIndex, x, y);
 };
 
 const getContextMenuHandler = button => {
@@ -5417,22 +5428,39 @@ const renameDirent = async state => {
   };
 };
 
-const renderCss = (oldState, newState) => {
-  const {
-    scrollBarHeight,
-    uid,
-    maxIndent
-  } = newState;
+const getCss = (scrollBarHeight, uniqueIndents) => {
+  // TODO each visible item should have an indent property
   const rules = [`.Explorer {
   --ScrollBarThumbHeight: ${scrollBarHeight}px;
-`];
-  for (let i = 0; i < maxIndent; i++) {
-    const indent = getTreeItemIndent(i);
-    rules.push(`.Indent-${i} {
-  padding-left: ${indent};
+}`];
+  for (const item of uniqueIndents) {
+    rules.push(`.Indent-${item} {
+  padding-left: ${item}px;
 }`);
   }
   const css = rules.join('\n');
+  return css;
+};
+
+const getUnique = items => {
+  const seens = [];
+  for (const item of items) {
+    if (!seens.includes(item)) {
+      seens.push(item);
+    }
+  }
+  return seens;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    scrollBarHeight,
+    uid,
+    visibleExplorerItems
+  } = newState;
+  const indents = visibleExplorerItems.map(item => item.indent);
+  const uniqueIndents = getUnique(indents);
+  const css = getCss(scrollBarHeight, uniqueIndents);
   return [SetCss, uid, css];
 };
 
@@ -5666,7 +5694,6 @@ const getExplorerItemVirtualDom = item => {
     hasEditingError,
     icon,
     id,
-    indent,
     isEditing,
     name,
     path,
@@ -5687,7 +5714,6 @@ const getExplorerItemVirtualDom = item => {
     ariaSetSize: setSize,
     ariaLevel: depth,
     childCount: 2 + chevronDom.length,
-    paddingLeft: indent,
     ariaLabel: name,
     ariaExpanded,
     ariaDescription: '',

package/package.json

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