@lvce-editor/explorer-view 3.26.0 → 4.0.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,
@@ -2846,7 +2846,7 @@ const wrapListItemCommand = fn => {
     const intermediate = get(id);
     set$1(id, intermediate.oldState, updatedState);
     const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
-    if (items === intermediate.newState.items && minLineY === intermediate.newState.minLineY && editingIcon === intermediate.newState.editingIcon && cutItems === intermediate.newState.cutItems && editingErrorMessage === intermediate.newState.editingErrorMessage) {
+    if (items === intermediate.newState.items && minLineY === intermediate.newState.minLineY && editingIcon === intermediate.newState.editingIcon && cutItems === intermediate.newState.cutItems && editingErrorMessage === intermediate.newState.editingErrorMessage && dropTargets === intermediate.newState.dropTargets) {
       return;
     }
     const visible = items.slice(minLineY, maxLineY);
@@ -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) => {
@@ -3116,8 +3119,9 @@ const getChildDirentsRecursively = async (dirent, pathSeparator) => {
 
 const getParentEndIndex = (dirents, index) => {
   const dirent = dirents[index];
+  const depth = dirent.depth;
   let endIndex = index + 1;
-  while (endIndex < dirents.length && dirents[endIndex].depth > dirent.depth) {
+  while (endIndex < dirents.length && dirents[endIndex].depth > depth) {
     endIndex++;
   }
   return endIndex;
@@ -4078,7 +4082,7 @@ const canBeDroppedInto = dirent => {
 
 const countInRange = (start, end) => {
   const items = [];
-  for (let i = start; i < end; i++) {
+  for (let i = start; i <= end; i++) {
     items.push(i);
   }
   return items;
@@ -5416,22 +5420,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];
 };
 
@@ -5665,7 +5686,6 @@ const getExplorerItemVirtualDom = item => {
     hasEditingError,
     icon,
     id,
-    indent,
     isEditing,
     name,
     path,
@@ -5686,7 +5706,6 @@ const getExplorerItemVirtualDom = item => {
     ariaSetSize: setSize,
     ariaLevel: depth,
     childCount: 2 + chevronDom.length,
-    paddingLeft: indent,
     ariaLabel: name,
     ariaExpanded,
     ariaDescription: '',
@@ -6312,8 +6331,6 @@ const commandMap = {
   'Explorer.focusFirst': wrapListItemCommand(focusFirst),
   'Explorer.focusIndex': wrapListItemCommand(focusIndex),
   'Explorer.focusLast': wrapListItemCommand(focusLast),
-  'Explorer.handleDragStart': wrapListItemCommand(handleDragStart),
-  'Explorer.handleDragOverIndex': wrapListItemCommand(handleDragOverIndex),
   'Explorer.focusNext': wrapListItemCommand(focusNext),
   'Explorer.focusNone': wrapListItemCommand(focusNone),
   'Explorer.focusPrevious': wrapListItemCommand(focusPrevious),
@@ -6322,7 +6339,6 @@ const commandMap = {
   'Explorer.getMouseActions': getMouseActions,
   'Explorer.handleArrowLeft': wrapListItemCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapListItemCommand(handleArrowRight),
-  'Explorer.handleEscape': wrapListItemCommand(handleEscape),
   'Explorer.handleBlur': wrapListItemCommand(handleBlur),
   'Explorer.handleClick': wrapListItemCommand(handleClick),
   'Explorer.handleClickAt': wrapListItemCommand(handleClickAt),
@@ -6335,7 +6351,10 @@ const commandMap = {
   'Explorer.handleCut': wrapListItemCommand(handleCut),
   'Explorer.handleDragLeave': wrapListItemCommand(handleDragLeave),
   'Explorer.handleDragOver': wrapListItemCommand(handleDragOver),
+  'Explorer.handleDragOverIndex': wrapListItemCommand(handleDragOverIndex),
+  'Explorer.handleDragStart': wrapListItemCommand(handleDragStart),
   'Explorer.handleDrop': wrapListItemCommand(handleDrop),
+  'Explorer.handleEscape': wrapListItemCommand(handleEscape),
   'Explorer.handleFocus': wrapListItemCommand(handleFocus),
   'Explorer.handleIconThemeChange': wrapListItemCommand(handleIconThemeChange),
   'Explorer.handleInputBlur': wrapListItemCommand(handleInputBlur),

package/package.json

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