@lvce-editor/explorer-view 5.25.0 → 5.27.0

package/README.md

@@ -1,3 +1,12 @@
 # Explorer View
 
 WebWorker for the explorer view functionality in Lvce Editor.
+
+## Contributing
+
+```sh
+git clone git@github.com:lvce-editor/explorer-view.git &&
+cd explorer-view &&
+npm ci &&
+npm test
+```

package/dist/explorerViewWorkerMain.js

@@ -2260,21 +2260,6 @@ const copyRelativePath = async state => {
   return state;
 };
 
-// TODO optimize this function to return the minimum number
-// of visible items needed, e.g. when not scrolled 5 items with
-// 20px fill 100px but when scrolled 6 items are needed
-const getNumberOfVisibleItems = (listHeight, itemHeight) => {
-  if (listHeight <= 0 || itemHeight <= 0) {
-    return 0;
-  }
-  return Math.ceil(listHeight / itemHeight) + 1;
-};
-
-const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
-  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
-  return maxLineY;
-};
-
 const getIconsCached = (dirents, fileIconCache) => {
   return dirents.map(dirent => fileIconCache[dirent]);
 };
@@ -2359,6 +2344,21 @@ const getFileIcons = async (dirents, fileIconCache) => {
   };
 };
 
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  if (listHeight <= 0 || itemHeight <= 0) {
+    return 0;
+  }
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
+  const maxLineY = minLineY + Math.min(getNumberOfVisibleItems(height, itemHeight), direntsLength);
+  return maxLineY;
+};
+
 const None$4 = 0;
 const Right = 1;
 const Down = 2;
@@ -2457,13 +2457,6 @@ const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
-};
-
 const text = data => {
   return {
     childCount: 0,
@@ -2884,7 +2877,7 @@ const wrapListItemCommand = fn => {
     const intermediate = get(id);
     set(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 && dropTargets === intermediate.newState.dropTargets && fileIconCache === intermediate.newState.fileIconCache && decorations === intermediate.newState.decorations) {
+    if (items === intermediate.newState.items && minLineY === intermediate.newState.minLineY && height === intermediate.newState.height && itemHeight === intermediate.newState.itemHeight && editingIcon === intermediate.newState.editingIcon && cutItems === intermediate.newState.cutItems && editingErrorMessage === intermediate.newState.editingErrorMessage && dropTargets === intermediate.newState.dropTargets && fileIconCache === intermediate.newState.fileIconCache && decorations === intermediate.newState.decorations) {
       return;
     }
     const visible = items.slice(minLineY, maxLineY);
@@ -2981,7 +2974,7 @@ const isEqual$6 = (oldState, newState) => {
   // TODO compute css more optimized
   // maybe only when items change, and even then not
   // always, but only when it affects the css
-  return oldState.editingErrorMessage === newState.editingErrorMessage && oldState.errorMessageLeft === newState.errorMessageLeft && oldState.errorMessageTop === newState.errorMessageTop && oldState.maxIndent === newState.maxIndent && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.visibleExplorerItems === newState.visibleExplorerItems && oldState.width === newState.width;
+  return oldState.deltaY === newState.deltaY && oldState.editingErrorMessage === newState.editingErrorMessage && oldState.errorMessageLeft === newState.errorMessageLeft && oldState.errorMessageTop === newState.errorMessageTop && oldState.maxIndent === newState.maxIndent && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.visibleExplorerItems === newState.visibleExplorerItems && oldState.width === newState.width;
 };
 
 const isEqual$5 = (oldState, newState) => {
@@ -4354,6 +4347,9 @@ const getNewDropTargets = (state, index) => {
     return dropTargetFull;
   }
   const item = items[index];
+  if (!item) {
+    return dropTargetFull;
+  }
   if (!canBeDroppedInto(item)) {
     const startIndex = getParentStartIndex(items, index);
     const endIndex = getParentEndIndex(items, index);
@@ -5067,6 +5063,48 @@ const handlePointerDown = (state, button, x, y) => {
   return state;
 };
 
+const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
+  if (size >= contentSize) {
+    return 0;
+  }
+  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
+};
+
+const handleResize = (state, dimensions) => {
+  const {
+    height: rawHeight,
+    width: rawWidth
+  } = dimensions;
+  if (!Number.isFinite(rawHeight) || !Number.isFinite(rawWidth)) {
+    return state;
+  }
+  const height = Math.max(0, rawHeight);
+  const width = Math.max(0, rawWidth);
+  const {
+    deltaY,
+    itemHeight,
+    items
+  } = state;
+  const contentHeight = items.length * itemHeight;
+  const maxDeltaY = Math.max(contentHeight - height, 0);
+  const newDeltaY = Math.min(Math.max(deltaY, 0), maxDeltaY);
+  const minLineY = Math.round(newDeltaY / itemHeight);
+  const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, items.length);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  if (state.height === height && state.width === width && state.deltaY === newDeltaY && state.minLineY === minLineY && state.maxLineY === maxLineY && state.scrollBarHeight === scrollBarHeight) {
+    return state;
+  }
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    height,
+    maxLineY,
+    minLineY,
+    scrollBarHeight,
+    width
+  };
+};
+
 const handleUpload = async (state, dirents) => {
   const {
     pathSeparator,
@@ -5087,6 +5125,9 @@ const handleUpload = async (state, dirents) => {
 };
 
 const setDeltaY = async (state, deltaY) => {
+  if (!Number.isFinite(deltaY)) {
+    return state;
+  }
   const {
     height,
     itemHeight,
@@ -5429,14 +5470,11 @@ const getEditingType = direntType => {
 
 const getNewDirentsForRename = (items, focusedIndex) => {
   const item = items[focusedIndex];
-  const newItems = [...items];
   const editingType = getEditingType(item.type);
-  // TODO avoid mutation
-  newItems[focusedIndex] = {
+  return [...items.slice(0, focusedIndex), {
     ...item,
     type: editingType
-  };
-  return newItems;
+  }, ...items.slice(focusedIndex + 1)];
 };
 
 const getRenameSelectionRange = name => {
@@ -5491,12 +5529,18 @@ const getIndentRule = indent => {
   padding-left: ${indent}px;
 }`;
 };
-const getCss = (scrollBarHeight, uniqueIndents, errorMessageLeft, errorMessageTop, errorMessageWidth) => {
+
+const getCss = (scrollBarHeight, scrollBarTop, uniqueIndents, errorMessageLeft, errorMessageTop, errorMessageWidth) => {
   const rules = [`.Explorer {
   --ScrollBarThumbHeight: ${scrollBarHeight}px;
+  --ScrollBarThumbTop: ${scrollBarTop}px;
   --ErrorMessageTop: ${errorMessageTop}px;
   --ErrorMessageLeft: ${errorMessageLeft}px;
   --ErrorMessageWidth: ${errorMessageWidth}px;
+}
+.Explorer .ScrollBarThumb {
+  height: var(--ScrollBarThumbHeight);
+  translate: 0px var(--ScrollBarThumbTop);
 }`, ...uniqueIndents.map(getIndentRule)];
   const css = rules.join('\n');
   return css;
@@ -5513,6 +5557,17 @@ const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, inde
   };
 };
 
+const getScrollBarTop = (height, contentHeight, scrollTop) => {
+  if (contentHeight <= 0 || !Number.isFinite(contentHeight)) {
+    return 0;
+  }
+  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
+  if (!Number.isFinite(scrollBarTop)) {
+    return 0;
+  }
+  return scrollBarTop;
+};
+
 const getUnique = items => {
   const seens = [];
   for (const item of items) {
@@ -5523,9 +5578,18 @@ const getUnique = items => {
   return seens;
 };
 
+const getIndent = item => item.indent;
+const getUniqueIndents = items => {
+  const indents = items.map(getIndent);
+  const uniqueIndents = getUnique(indents);
+  return uniqueIndents;
+};
+
 const renderCss = (oldState, newState) => {
   const {
+    deltaY,
     focusedIndex,
+    height,
     itemHeight,
     items,
     minLineY,
@@ -5534,8 +5598,9 @@ const renderCss = (oldState, newState) => {
     visibleExplorerItems,
     width
   } = newState;
-  const indents = visibleExplorerItems.map(item => item.indent);
-  const uniqueIndents = getUnique(indents);
+  const uniqueIndents = getUniqueIndents(visibleExplorerItems);
+  const contentHeight = items.length * itemHeight;
+  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY);
   const indent = 8;
   const padding = 10;
   const fileIconWidth = 16;
@@ -5547,7 +5612,7 @@ const renderCss = (oldState, newState) => {
     left,
     top
   } = getErrorMessagePosition(itemHeight, focusedIndex, minLineY, depth, indent, fileIconWidth, padding + defaultPaddingLeft + chevronSpace, width);
-  const css = getCss(scrollBarHeight, uniqueIndents, left, top, errorMessageWidth);
+  const css = getCss(scrollBarHeight, scrollBarTop, uniqueIndents, left, top, errorMessageWidth);
   return [SetCss, uid, css];
 };
 
@@ -5617,11 +5682,14 @@ const renderFocus = (oldState, newState) => {
 };
 
 const renderFocusContext = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
   if (newState.focus === Input$1) {
-    return [SetFocusContext, newState.uid, FocusExplorerEditBox];
+    return [SetFocusContext, uid, FocusExplorerEditBox];
   }
   if (newState.focus === List) {
-    return [SetFocusContext, newState.uid, FocusExplorer];
+    return [SetFocusContext, uid, FocusExplorer];
   }
   return [];
 };
@@ -5839,25 +5907,11 @@ const getListItemsVirtualDom = (visibleItems, focusedIndex, focused, dropTargets
   return dom;
 };
 
-const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
-    return 0;
-  }
-  return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
-};
-
-const getScrollBarTop = (height, contentHeight, scrollTop) => {
-  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
-  return scrollBarTop;
-};
-
-const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+const getScrollBarVirtualDom = scrollBarHeight => {
   const shouldShowScrollbar = scrollBarHeight > 0;
   if (!shouldShowScrollbar) {
     return [];
   }
-  const heightString = px(scrollBarHeight);
-  const translateString = position(0, scrollBarTop);
   return [{
     childCount: 1,
     className: mergeClassNames(ScrollBar, ScrollBarSmall),
@@ -5865,8 +5919,6 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   }, {
     childCount: 0,
     className: ScrollBarThumb,
-    height: heightString,
-    translate: translateString,
     type: Div
   }];
 };
@@ -5881,13 +5933,12 @@ const getChildCount = (scrollBarDomLength, errorDomLength) => {
   }
   return childCount;
 };
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, scrollTop, errorMessage) => {
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, errorMessage) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
   const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
-  const scrollBarTop = getScrollBarTop(height, contentHeight, scrollTop);
-  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarTop);
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight);
   const errorDom = getErrorMessageDom(errorMessage);
   const childCount = getChildCount(scrollBarDom.length, errorDom.length);
   const parentNode = {
@@ -5902,7 +5953,6 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
 
 const renderItems = (oldState, newState) => {
   const {
-    deltaY,
     dropTargets,
     editingErrorMessage,
     focused,
@@ -5916,8 +5966,8 @@ const renderItems = (oldState, newState) => {
   const visibleDirents = newState.visibleExplorerItems;
   const isWide = width > 450;
   const contentHeight = items.length * itemHeight;
-  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, deltaY, editingErrorMessage);
-  return [SetDom2, dom];
+  const dom = getExplorerVirtualDom(visibleDirents, focusedIndex, root, isWide, focused, dropTargets, height, contentHeight, editingErrorMessage);
+  return [SetDom2, newState.uid, dom];
 };
 
 const renderIncremental = (oldState, newState) => {
@@ -6475,6 +6525,7 @@ const commandMap = {
   'Explorer.handleKeyDown': wrapListItemCommand(handleKeyDown),
   'Explorer.handlePaste': wrapListItemCommand(handlePaste),
   'Explorer.handlePointerDown': wrapListItemCommand(handlePointerDown),
+  'Explorer.handleResize': wrapListItemCommand(handleResize),
   'Explorer.handleUpload': wrapListItemCommand(handleUpload),
   'Explorer.handleWheel': wrapListItemCommand(handleWheel),
   'Explorer.handleWorkspaceChange': wrapListItemCommand(handleWorkspaceChange),

package/package.json

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