@lvce-editor/explorer-view 7.13.0 → 7.14.0

package/dist/explorerViewWorkerMain.js

@@ -6511,27 +6511,31 @@ const handleResize = (state, dimensions) => {
   };
 };
 
-const handleUpload = async (state, dirents) => {
-  if (state.isReadonly) {
-    return state;
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
+};
+
+const getNewDeltaYPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
   }
-  const {
-    pathSeparator,
-    root
-  } = state;
-  for (const dirent of dirents) {
-    // TODO switch
-    // TODO symlink might not be possible to be copied
-    // TODO create folder if type is 2
-    if (dirent.type !== /* File */1) {
-      continue;
-    }
-    // TODO reading text might be inefficient for binary files
-    // but not sure how else to send them via jsonrpc
-    const content = await dirent.file.text();
-    const absolutePath = [root, dirent.file.name].join(pathSeparator);
-    await writeFile(absolutePath, content);
+  if (relativeY <= height - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
   }
+  return {
+    handleOffset: scrollBarHeight - height + relativeY,
+    percent: 1
+  };
 };
 
 const setDeltaY = async (state, deltaY) => {
@@ -6561,6 +6565,89 @@ const setDeltaY = async (state, deltaY) => {
   };
 };
 
+const handleScrollBarClick = async (state, eventY) => {
+  const {
+    deltaY,
+    height,
+    itemHeight,
+    items,
+    y
+  } = state;
+  const contentHeight = items.length * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const availableTrackHeight = height - scrollBarHeight;
+  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
+    return state;
+  }
+  const relativeY = eventY - y;
+  const currentScrollBarY = deltaY / finalDeltaY * availableTrackHeight;
+  const offsetInThumb = relativeY - currentScrollBarY;
+  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: offsetInThumb,
+      scrollBarActive: true
+    };
+  }
+  const {
+    handleOffset,
+    percent
+  } = getNewDeltaYPercent(height, scrollBarHeight, relativeY);
+  return {
+    ...(await setDeltaY(state, percent * finalDeltaY)),
+    handleOffset,
+    scrollBarActive: true
+  };
+};
+
+const handleScrollBarMove = async (state, eventY) => {
+  const {
+    handleOffset,
+    height,
+    itemHeight,
+    items,
+    scrollBarActive,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
+  }
+  const contentHeight = items.length * itemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const availableTrackHeight = height - scrollBarHeight;
+  if (finalDeltaY === 0 || availableTrackHeight <= 0) {
+    return state;
+  }
+  const relativeY = eventY - y - handleOffset;
+  const percent = relativeY / availableTrackHeight;
+  return setDeltaY(state, percent * finalDeltaY);
+};
+
+const handleUpload = async (state, dirents) => {
+  if (state.isReadonly) {
+    return state;
+  }
+  const {
+    pathSeparator,
+    root
+  } = state;
+  for (const dirent of dirents) {
+    // TODO switch
+    // TODO symlink might not be possible to be copied
+    // TODO create folder if type is 2
+    if (dirent.type !== /* File */1) {
+      continue;
+    }
+    // TODO reading text might be inefficient for binary files
+    // but not sure how else to send them via jsonrpc
+    const content = await dirent.file.text();
+    const absolutePath = [root, dirent.file.name].join(pathSeparator);
+    await writeFile(absolutePath, content);
+  }
+};
+
 const handleWheel = (state, deltaMode, deltaY) => {
   return setDeltaY(state, state.deltaY + deltaY);
 };
@@ -6758,11 +6845,12 @@ const getErrorMessagePosition = (itemHeight, focusedIndex, minLineY, depth, inde
   };
 };
 
-const getScrollBarTop = (height, contentHeight, scrollTop) => {
-  if (contentHeight <= 0 || !Number.isFinite(contentHeight)) {
+const getScrollBarTop = (height, contentHeight, scrollTop, scrollBarHeight) => {
+  const finalScrollTop = contentHeight - height;
+  if (finalScrollTop <= 0 || !Number.isFinite(finalScrollTop)) {
     return 0;
   }
-  const scrollBarTop = Math.round(scrollTop / contentHeight * height);
+  const scrollBarTop = Math.round(scrollTop / finalScrollTop * (height - scrollBarHeight));
   if (!Number.isFinite(scrollBarTop)) {
     return 0;
   }
@@ -6805,8 +6893,8 @@ const renderCss = (oldState, newState) => {
   } = newState;
   const uniqueIndents = getUniqueIndents(visibleExplorerItems);
   const contentHeight = items.length * itemHeight;
-  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY);
   const scrollBarHeight = getScrollBarSize(height, contentHeight, 20);
+  const scrollBarTop = getScrollBarTop(height, contentHeight, deltaY, scrollBarHeight);
   const depth = items[focusedIndex]?.depth || 0;
   const {
     errorMessageWidth,
@@ -6934,6 +7022,9 @@ const HandleKeyDown = 21;
 const HandleListBlur = 11;
 const HandleListFocus = 12;
 const HandlePointerDown = 14;
+const HandleScrollBarMove = 22;
+const HandleScrollBarPointerCaptureLost = 23;
+const HandleScrollBarPointerDown = 24;
 const HandleWheel = 15;
 const HandleDoubleClick = 16;
 
@@ -7174,6 +7265,7 @@ const getScrollBarVirtualDom = scrollBarHeight => {
   return [{
     childCount: 1,
     className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    onPointerDown: HandleScrollBarPointerDown,
     type: Div
   }, scrollBarThumbNode];
 };
@@ -7445,6 +7537,17 @@ const renderEventListeners = () => {
   }, {
     name: HandlePointerDown,
     params: ['handlePointerDown', Button$3, ClientX, ClientY]
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarClick', ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleScrollBarMove, HandleScrollBarPointerCaptureLost]
+  }, {
+    name: HandleScrollBarMove,
+    params: ['handleScrollBarMove', ClientY]
+  }, {
+    name: HandleScrollBarPointerCaptureLost,
+    params: ['handleScrollBarCaptureLost']
   }, {
     name: HandleDoubleClick,
     params: ['handleDoubleClick', ClientX, ClientY]
@@ -7848,6 +7951,9 @@ const commandMap = {
   'Explorer.handlePaste': wrapListItemCommand(handlePaste),
   'Explorer.handlePointerDown': wrapListItemCommand(handlePointerDown),
   'Explorer.handleResize': wrapListItemCommand(handleResize),
+  'Explorer.handleScrollBarCaptureLost': wrapListItemCommand(handleScrollBarCaptureLost),
+  'Explorer.handleScrollBarClick': wrapListItemCommand(handleScrollBarClick),
+  'Explorer.handleScrollBarMove': wrapListItemCommand(handleScrollBarMove),
   'Explorer.handleUpload': wrapListItemCommand(handleUpload),
   'Explorer.handleWheel': wrapListItemCommand(handleWheel),
   'Explorer.handleWorkspaceChange': wrapListItemCommandImmediate(handleWorkspaceChange),

package/package.json

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