@lvce-editor/explorer-view 5.26.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

@@ -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) => {
@@ -5070,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,
@@ -5494,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;
@@ -5516,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) {
@@ -5535,7 +5587,9 @@ const getUniqueIndents = items => {
 
 const renderCss = (oldState, newState) => {
   const {
+    deltaY,
     focusedIndex,
+    height,
     itemHeight,
     items,
     minLineY,
@@ -5545,6 +5599,8 @@ const renderCss = (oldState, newState) => {
     width
   } = newState;
   const uniqueIndents = getUniqueIndents(visibleExplorerItems);
+  const contentHeight = items.length * itemHeight;
+  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY);
   const indent = 8;
   const padding = 10;
   const fileIconWidth = 16;
@@ -5556,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];
 };
 
@@ -5626,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 [];
 };
@@ -5848,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),
@@ -5874,8 +5919,6 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   }, {
     childCount: 0,
     className: ScrollBarThumb,
-    height: heightString,
-    translate: translateString,
     type: Div
   }];
 };
@@ -5890,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 = {
@@ -5911,7 +5953,6 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused
 
 const renderItems = (oldState, newState) => {
   const {
-    deltaY,
     dropTargets,
     editingErrorMessage,
     focused,
@@ -5925,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) => {
@@ -6484,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.26.0",
+  "version": "5.27.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",