@lvce-editor/source-control-worker 3.6.1 → 3.6.2

package/dist/sourceControlWorkerMain.js

@@ -1087,6 +1087,7 @@ const Tree$1 = 'tree';
 const TreeItem$1 = 'treeitem';
 
 const Badge = 'Badge';
+const MaskIcon = 'MaskIcon';
 const SourceControlBadge = 'SourceControlBadge';
 
 const Directory = 3;
@@ -1133,7 +1134,7 @@ const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
-const List = 1;
+const List$1 = 1;
 const Tree = 2;
 
 const FocusSourceControlInput = 24;
@@ -1832,11 +1833,38 @@ const restoreState = savedState => {
 };
 
 const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
-  if (size >= contentSize) {
+  if (size <= 0 || size >= contentSize) {
     return 0;
   }
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
+const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    // clicked at top
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
+  }
+  if (relativeY <= height - halfScrollBarHeight) {
+    // clicked in middle
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight)
+    };
+  }
+  // clicked at bottom
+  return {
+    handleOffset: scrollBarHeight - height + relativeY,
+    percent: 1
+  };
+};
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1951,19 +1979,20 @@ const loadContent = async (state, savedState) => {
   // TODO make preferences async and more functional
   const splitButtonEnabled = await get$1('sourceControl.splitButtonEnabled');
   const badgeCount = await getBadgeCount$1(enabledProviderIds, assetDir, platform);
+  const inputPlaceholder = messageEnterToCommitOnMaster();
+  const inputBoxHeight = await getInputHeight(inputValue, width, inputFontFamily, inputFontSize, inputFontWeight, inputLetterSpacing, inputLineHeight, inputPadding);
+  const headerHeight = getHeaderHeight(inputBoxHeight, sourceControlButtons);
   const total = displayItems.length;
   const contentHeight = total * itemHeight;
-  const listHeight = getListHeight(total, itemHeight, height);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
+  const availableListHeight = Math.max(height - headerHeight, 0);
+  const listHeight = getListHeight(total, itemHeight, availableListHeight);
+  const scrollBarHeight = getScrollBarSize(availableListHeight, contentHeight, minimumSliderSize);
   const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
   const minLineY = 0;
   const maxLineY = Math.min(numberOfVisible, total);
   const newFileIconCache = await getFileIcons(displayItems, fileIconCache);
   const visibleItems = getVisibleSourceControlItems(displayItems, minLineY, maxLineY, actionsCache, newFileIconCache);
   const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
-  const inputPlaceholder = messageEnterToCommitOnMaster();
-  const inputBoxHeight = await getInputHeight(inputValue, width, inputFontFamily, inputFontSize, inputFontWeight, inputLetterSpacing, inputLineHeight, inputPadding);
-  const headerHeight = getHeaderHeight(inputBoxHeight, sourceControlButtons);
   return {
     ...state,
     actionsCache,
@@ -2115,8 +2144,13 @@ const create2 = (id, _uri, x, y, width, height, workspacePath, platform, assetDi
   }, state);
 };
 
+const haveSameIndents = (oldState, newState) => {
+  const oldItems = oldState.visibleItems;
+  const newItems = newState.visibleItems;
+  return oldItems.length === newItems.length && oldItems.every((item, index) => item.indent === newItems[index].indent);
+};
 const isEqual$4 = (oldState, newState) => {
-  return oldState.inputBoxHeight === newState.inputBoxHeight;
+  return oldState.deltaY === newState.deltaY && oldState.finalDeltaY === newState.finalDeltaY && oldState.headerHeight === newState.headerHeight && oldState.height === newState.height && oldState.inputBoxHeight === newState.inputBoxHeight && oldState.itemHeight === newState.itemHeight && oldState.scrollBarHeight === newState.scrollBarHeight && haveSameIndents(oldState, newState);
 };
 
 const isEqual$3 = (oldState, newState) => {
@@ -2124,7 +2158,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.allGroups === newState.allGroups && oldState.deltaY === newState.deltaY && oldState.items === newState.items && oldState.loading === newState.loading && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.sourceControlButtons === newState.sourceControlButtons && oldState.visibleItems === newState.visibleItems;
+  return oldState.allGroups === newState.allGroups && oldState.deltaY === newState.deltaY && oldState.items === newState.items && oldState.loading === newState.loading && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.scrollBarActive === newState.scrollBarActive && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.sourceControlButtons === newState.sourceControlButtons && oldState.visibleItems === newState.visibleItems;
 };
 
 const RenderItems = 4;
@@ -2597,6 +2631,7 @@ const refresh = async state => {
     assetDir,
     enabledProviderIds,
     fileIconCache,
+    headerHeight,
     height,
     iconDefinitions,
     itemHeight,
@@ -2614,8 +2649,9 @@ const refresh = async state => {
   const badgeCount = await getBadgeCount$1(enabledProviderIds, assetDir, platform);
   const total = displayItems.length;
   const contentHeight = total * itemHeight;
-  const listHeight = getListHeight(total, itemHeight, height);
-  const scrollBarHeight = getScrollBarSize(height, contentHeight, minimumSliderSize);
+  const availableListHeight = Math.max(height - headerHeight, 0);
+  const listHeight = getListHeight(total, itemHeight, availableListHeight);
+  const scrollBarHeight = getScrollBarSize(availableListHeight, contentHeight, minimumSliderSize);
   const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
   const minLineY = 0;
   const maxLineY = Math.min(numberOfVisible, total);
@@ -2627,12 +2663,14 @@ const refresh = async state => {
     actionsCache,
     allGroups,
     badgeCount,
+    deltaY: 0,
     enabledProviderIds,
     fileIconCache: newFileIconCache,
     finalDeltaY,
     gitRoot,
     items: displayItems,
     maxLineY,
+    minLineY,
     scrollBarHeight,
     splitButtonEnabled,
     visibleItems
@@ -2727,14 +2765,20 @@ const updateVisibleItems = async (state, expandedGroups) => {
     actionsCache,
     allGroups,
     fileIconCache,
+    headerHeight,
     height,
     iconDefinitions,
-    itemHeight
+    itemHeight,
+    minimumSliderSize
   } = state;
   const displayItems = getDisplayItems(allGroups, expandedGroups, iconDefinitions);
   const badgeCount = allGroups.reduce((sum, group) => sum + group.items.length, 0);
   const total = displayItems.length;
-  const listHeight = getListHeight(total, itemHeight, height);
+  const availableListHeight = Math.max(height - headerHeight, 0);
+  const listHeight = getListHeight(total, itemHeight, availableListHeight);
+  const contentHeight = total * itemHeight;
+  const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
+  const scrollBarHeight = getScrollBarSize(availableListHeight, contentHeight, minimumSliderSize);
   const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
   const minLineY = 0;
   const maxLineY = Math.min(numberOfVisible, total);
@@ -2742,10 +2786,13 @@ const updateVisibleItems = async (state, expandedGroups) => {
   return {
     ...state,
     badgeCount,
+    deltaY: 0,
     expandedGroups,
+    finalDeltaY,
     items: displayItems,
     maxLineY,
     minLineY,
+    scrollBarHeight,
     visibleItems
   };
 };
@@ -2904,18 +2951,10 @@ const handleMouseOverAt = async (state, eventX, eventY) => {
   return handleMouseOver(state, index);
 };
 
-const handleSourceControlButtonClick = async (state, name) => {
-  const button = state.sourceControlButtons.find(button => button.label === name);
-  if (!button) {
-    warn(`[source-control-worker] Source control button not found ${name}`);
-    return state;
-  }
-  await executeCommand(button.command, state.assetDir, state.platform, state.inputValue);
-  const newState = await loadContent(state, {});
+const handleScrollBarCaptureLost = state => {
   return {
-    ...newState,
-    inputMessage: '',
-    inputValue: ''
+    ...state,
+    scrollBarActive: false
   };
 };
 
@@ -2923,12 +2962,13 @@ const setDeltaY = async (state, newDeltaY) => {
   const {
     actionsCache,
     fileIconCache,
+    finalDeltaY,
     headerHeight,
     height,
     itemHeight,
     items
   } = state;
-  const normalizedDeltaY = Math.max(newDeltaY, 0);
+  const normalizedDeltaY = Math.min(Math.max(newDeltaY, 0), finalDeltaY);
   const newMinLineY = Math.floor(normalizedDeltaY / itemHeight);
   const total = items.length;
   const listHeight = height - headerHeight;
@@ -2937,13 +2977,79 @@ const setDeltaY = async (state, newDeltaY) => {
   const visible = getVisibleSourceControlItems(items, newMinLineY, maxLineY, actionsCache, fileIconCache);
   return {
     ...state,
-    deltaY: newDeltaY,
+    deltaY: normalizedDeltaY,
     maxLineY,
     minLineY: newMinLineY,
     visibleItems: visible
   };
 };
 
+const handleScrollBarClick = async (state, eventY) => {
+  const {
+    deltaY,
+    finalDeltaY,
+    headerHeight,
+    height,
+    scrollBarHeight,
+    y
+  } = state;
+  const listHeight = Math.max(height - headerHeight, 0);
+  const relativeY = eventY - y - headerHeight;
+  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, listHeight, scrollBarHeight);
+  const offsetInThumb = relativeY - currentScrollBarY;
+  if (offsetInThumb >= 0 && offsetInThumb < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: offsetInThumb,
+      scrollBarActive: true
+    };
+  }
+  const {
+    handleOffset,
+    percent
+  } = getNewDeltaPercent(listHeight, scrollBarHeight, relativeY);
+  return {
+    ...(await setDeltaY(state, percent * finalDeltaY)),
+    handleOffset,
+    scrollBarActive: true
+  };
+};
+
+const handleScrollBarMove = async (state, eventY) => {
+  const {
+    finalDeltaY,
+    handleOffset,
+    headerHeight,
+    height,
+    scrollBarActive,
+    scrollBarHeight,
+    y
+  } = state;
+  if (!scrollBarActive) {
+    return state;
+  }
+  const listHeight = Math.max(height - headerHeight, 0);
+  const relativeY = eventY - y - headerHeight - handleOffset;
+  const availableTrackHeight = listHeight - scrollBarHeight;
+  const percent = availableTrackHeight <= 0 ? 0 : relativeY / availableTrackHeight;
+  return setDeltaY(state, percent * finalDeltaY);
+};
+
+const handleSourceControlButtonClick = async (state, name) => {
+  const button = state.sourceControlButtons.find(button => button.label === name);
+  if (!button) {
+    warn(`[source-control-worker] Source control button not found ${name}`);
+    return state;
+  }
+  await executeCommand(button.command, state.assetDir, state.platform, state.inputValue);
+  const newState = await loadContent(state, {});
+  return {
+    ...newState,
+    inputMessage: '',
+    inputValue: ''
+  };
+};
+
 const handleWheel = async (state, deltaMode, deltaY) => {
   return setDeltaY(state, state.deltaY + deltaY);
 };
@@ -3053,21 +3159,36 @@ const getUnique = items => {
 
 const renderCss = (oldState, newState) => {
   const {
+    deltaY,
+    finalDeltaY,
+    headerHeight,
+    height,
     id,
     inputBoxHeight,
+    itemHeight,
+    scrollBarHeight,
     visibleItems
   } = newState;
   const indents = visibleItems.map(item => item.indent);
   const uniqueIndents = getUnique(indents);
   const indentRules = uniqueIndents.map(getIndentRule).join('\n');
-  const css = indentRules ? `:root {
+  const listHeight = Math.max(height - headerHeight, 0);
+  const scrollBarY = scrollBarHeight > 0 ? getScrollBarY(deltaY, finalDeltaY, listHeight, scrollBarHeight) : 0;
+  const itemOffset = -(deltaY % itemHeight);
+  const indentCss = indentRules ? `\n${indentRules}\n` : '';
+  const css = `:root {
   --SourceControlInputHeight: ${inputBoxHeight}px;
 }
-${indentRules}
-` : `:root {
-  --SourceControlInputHeight: ${inputBoxHeight}px;
+
+.SourceControl .ScrollBarThumb {
+  height: ${scrollBarHeight}px;
+  translate: 0 ${Math.round(scrollBarY)}px;
+}
+
+.SourceControlItems > .TreeItem:first-child {
+  margin-top: ${itemOffset}px;
 }
-`;
+${indentCss}`;
   return [SetCss, id, css];
 };
 
@@ -3090,9 +3211,14 @@ const IconButton = 'IconButton';
 const InputBox = 'InputBox';
 const Label = 'Label';
 const LabelDetail = 'LabelDetail';
+const List = 'List';
 const Message = 'Message';
 const Progress = 'Progress';
 const ProgressContainer = 'ProgressContainer';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarThumbActive = 'ScrollBarThumbActive';
 const SourceControl = 'SourceControl';
 const SourceControlButton = 'SourceControlButton';
 const SourceControlHeader = 'SourceControlHeader';
@@ -3115,6 +3241,9 @@ const HandleMouseOverAt = 8;
 const HandleWheel = 9;
 const HandleClickAction = 10;
 const HandleClickSourceControlButton = 11;
+const HandleScrollBarMove = 12;
+const HandleScrollBarPointerCaptureLost = 13;
+const HandleScrollBarPointerDown = 14;
 
 const getProgressVirtualDom = () => {
   return [{
@@ -3131,7 +3260,7 @@ const getProgressVirtualDom = () => {
 const getIconVirtualDom = (icon, type = Div) => {
   return {
     childCount: 0,
-    className: `MaskIcon MaskIcon${icon}`,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
     role: None$1,
     type
   };
@@ -3197,6 +3326,22 @@ const getSourceControlHeaderVirtualDom = (inputPlaceholder, inputMessage) => {
   }, ...inputDom];
 };
 
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarActive) => {
+  if (scrollBarHeight <= 0) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    onPointerDown: HandleScrollBarPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: mergeClassNames(ScrollBarThumb, scrollBarActive ? ScrollBarThumbActive : ''),
+    type: Div
+  }];
+};
+
 const className$1 = mergeClassNames(Badge, SourceControlBadge);
 const parentNode = {
   childCount: 1,
@@ -3372,8 +3517,13 @@ const getSourceControlItemVirtualDom = item => {
   }
 };
 
-const getSourceControlListVirtualDom = items => {
+const getSourceControlListVirtualDom = (items, scrollBarHeight, scrollBarActive) => {
+  const scrollBarDom = getScrollBarVirtualDom(scrollBarHeight, scrollBarActive);
   return [{
+    childCount: scrollBarDom.length > 0 ? 2 : 1,
+    className: mergeClassNames(Viewlet, List),
+    type: Div
+  }, {
     childCount: items.length,
     className: SourceControlItems,
     onClick: HandleClickAt,
@@ -3381,18 +3531,18 @@ const getSourceControlListVirtualDom = items => {
     onPointerOver: HandleMouseOverAt,
     role: Tree$1,
     type: Div
-  }, ...items.flatMap(getSourceControlItemVirtualDom)];
+  }, ...items.flatMap(getSourceControlItemVirtualDom), ...scrollBarDom];
 };
 
 const className = mergeClassNames(Viewlet, SourceControl);
-const getSourceControlVirtualDom = (items, buttons, disabled, placeholder, inputMessage, message, loading) => {
+const getSourceControlVirtualDom = (items, buttons, disabled, placeholder, inputMessage, message, loading, scrollBarHeight, scrollBarActive) => {
   const content = message ? [{
     childCount: 1,
     className: Message,
     paddingLeft: '20px',
     paddingRight: '20px',
     type: Div
-  }, text(message)] : [...getSourceControlHeaderVirtualDom(placeholder, inputMessage), ...buttons.flatMap(button => getSourceControlButtonVirtualDom(button, disabled)), ...getSourceControlListVirtualDom(items)];
+  }, text(message)] : [...getSourceControlHeaderVirtualDom(placeholder, inputMessage), ...buttons.flatMap(button => getSourceControlButtonVirtualDom(button, disabled)), ...getSourceControlListVirtualDom(items, scrollBarHeight, scrollBarActive)];
   const progressDom = loading ? getProgressVirtualDom() : [];
   const dom = [{
     ariaBusy: loading,
@@ -3417,6 +3567,8 @@ const renderItems = (oldState, newState) => {
     inputPlaceholder,
     items,
     loading,
+    scrollBarActive,
+    scrollBarHeight,
     sourceControlButtons,
     visibleItems
   } = newState;
@@ -3424,7 +3576,7 @@ const renderItems = (oldState, newState) => {
     return [SetDom2, id, []];
   }
   const unavailableMessage = !loading && enabledProviderIds.length === 0 ? noSourceControlProvider() : '';
-  const dom = getSourceControlVirtualDom(visibleItems, sourceControlButtons, items.length === 0, inputPlaceholder, inputMessage, unavailableMessage, loading);
+  const dom = getSourceControlVirtualDom(visibleItems, sourceControlButtons, items.length === 0, inputPlaceholder, inputMessage, unavailableMessage, loading, scrollBarHeight, scrollBarActive);
   return [SetDom2, id, dom];
 };
 
@@ -3617,6 +3769,17 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickSourceControlButton,
     params: ['handleSourceControlButtonClick', TargetName]
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarClick', ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleScrollBarMove, HandleScrollBarPointerCaptureLost]
+  }, {
+    name: HandleScrollBarMove,
+    params: ['handleScrollBarMove', ClientY]
+  }, {
+    name: HandleScrollBarPointerCaptureLost,
+    params: ['handleScrollBarCaptureLost']
   }];
 };
 
@@ -3660,7 +3823,7 @@ const updateIcons = async state => {
 const viewAsList = state => {
   return {
     ...state,
-    viewMode: List
+    viewMode: List$1
   };
 };
 
@@ -3692,6 +3855,9 @@ const commandMap = {
   'SourceControl.handleMouseOutAt': wrapCommand(handleMouseOutAt),
   'SourceControl.handleMouseOver': wrapCommand(handleMouseOver),
   'SourceControl.handleMouseOverAt': wrapCommand(handleMouseOverAt),
+  'SourceControl.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
+  'SourceControl.handleScrollBarClick': wrapCommand(handleScrollBarClick),
+  'SourceControl.handleScrollBarMove': wrapCommand(handleScrollBarMove),
   'SourceControl.handleSourceControlButtonClick': wrapCommand(handleSourceControlButtonClick),
   'SourceControl.handleWheel': wrapCommand(handleWheel),
   'SourceControl.handleWorkspaceRefresh': wrapCommand(handleWorkspaceRefresh),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/source-control-worker",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "Source Control Worker",
   "keywords": [
     "Lvce Editor"