@lvce-editor/main-area-worker 9.50.0 → 9.51.0

package/dist/mainAreaWorkerMain.js

@@ -1680,8 +1680,11 @@ const VirtualDomElements = {
 const Button$1 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
+const DeltaMode = 'event.deltaMode';
+const DeltaY = 'event.deltaY';
 const DropId = 'event.dropId';
 const EventTargetClassName = 'event.target.className';
+const Key = 'event.key';
 const TargetName = 'event.target.name';
 
 const Tab = 13;
@@ -2825,6 +2828,10 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
   set$1(uid, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.layout === newState.layout && oldState.width === newState.width;
+};
+
 const isEqual$2 = (oldState, newState) => {
   return false;
 };
@@ -2842,12 +2849,13 @@ const RenderCss = 10;
 const RenderIncremental = 11;
 const RenderPendingViewletUpdate = 12;
 const RenderDragData = 13;
+const RenderActiveTabVisibility = 14;
 
 const isPendingViewletUpdateEqual = (oldState, newState) => {
   return newState.pendingViewletUpdate === undefined;
 };
-const modules = [isEqual, isEqual$2, isPendingViewletUpdateEqual, isEqual$1];
-const numbers = [RenderIncremental, RenderCss, RenderPendingViewletUpdate, RenderDragData];
+const modules = [isEqual, isEqual$2, isPendingViewletUpdateEqual, isEqual$1, isEqual$3];
+const numbers = [RenderIncremental, RenderCss, RenderPendingViewletUpdate, RenderDragData, RenderActiveTabVisibility];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -3203,19 +3211,137 @@ const findTabById = (state, tabId) => {
   return undefined;
 };
 
-const getSelectedTabBounds = state => {
+const getSegmentSize = segment => {
+  return segment.groups.reduce((total, group) => total + group.size, 0);
+};
+const getGroupSegments = (groups, parentDirection) => {
+  const segments = [];
+  let index = 0;
+  while (index < groups.length) {
+    const group = groups[index];
+    if (group.direction !== parentDirection) {
+      const startIndex = index;
+      const nestedGroups = [group];
+      const {
+        segmentId
+      } = group;
+      index++;
+      while (index < groups.length && groups[index].direction === group.direction && groups[index].segmentId === segmentId) {
+        nestedGroups.push(groups[index]);
+        index++;
+      }
+      segments.push({
+        direction: nestedGroups.length === 1 ? undefined : group.direction,
+        groups: nestedGroups,
+        startIndex
+      });
+      continue;
+    }
+    segments.push({
+      direction: undefined,
+      groups: [group],
+      startIndex: index
+    });
+    index++;
+  }
+  return segments;
+};
+
+const getChildBounds = (bounds, direction, offset, size) => {
+  if (direction === Horizontal) {
+    return {
+      height: bounds.height,
+      width: bounds.width * size,
+      x: bounds.x + bounds.width * offset,
+      y: bounds.y
+    };
+  }
+  return {
+    height: bounds.height * size,
+    width: bounds.width,
+    x: bounds.x,
+    y: bounds.y + bounds.height * offset
+  };
+};
+const getEditorGroupBoundsFromRoot = (layout, rootBounds) => {
   const {
+    direction,
+    groups
+  } = layout;
+  const segments = getGroupSegments(groups, direction);
+  const result = [];
+  let segmentOffset = 0;
+  for (const segment of segments) {
+    const segmentSize = getSegmentSize(segment);
+    const segmentBounds = getChildBounds(rootBounds, direction, segmentOffset / 100, segmentSize / 100);
+    segmentOffset += segmentSize;
+    if (segment.direction === undefined) {
+      result.push({
+        ...segmentBounds,
+        group: segment.groups[0]
+      });
+      continue;
+    }
+    let groupOffset = 0;
+    for (const group of segment.groups) {
+      const groupBounds = getChildBounds(segmentBounds, segment.direction, groupOffset / segmentSize, group.size / segmentSize);
+      groupOffset += group.size;
+      result.push({
+        ...groupBounds,
+        group
+      });
+    }
+  }
+  return result;
+};
+const getEditorGroupBounds = (layout, width, height) => {
+  return getEditorGroupBoundsFromRoot(layout, {
     height,
+    width,
+    x: 0,
+    y: 0
+  });
+};
+const getEditorGroupContentBounds = (layout, bounds, tabHeight) => {
+  return getEditorGroupBoundsFromRoot(layout, bounds).map(({
+    group,
+    ...groupBounds
+  }) => ({
+    ...groupBounds,
+    groupId: group.id,
+    height: groupBounds.height - tabHeight,
+    y: groupBounds.y + tabHeight
+  }));
+};
+
+const getSelectedTabBounds = (state, groupId = state.layout.activeGroupId) => {
+  const {
+    height,
+    layout,
     tabHeight,
     width,
     x,
     y
   } = state;
-  return {
-    height: height - tabHeight,
+  const bounds = getEditorGroupContentBounds(layout, {
+    height,
     width,
     x,
-    y: y + tabHeight
+    y
+  }, tabHeight).find(item => item.groupId === groupId);
+  if (!bounds) {
+    return {
+      height: height - tabHeight,
+      width,
+      x,
+      y: y + tabHeight
+    };
+  }
+  return {
+    height: bounds.height,
+    width: bounds.width,
+    x: bounds.x,
+    y: bounds.y
   };
 };
 
@@ -3301,7 +3427,7 @@ const maybeCreateViewletForSelectedTab = async (state, newState, groupIndex, ind
   if (!viewletModuleId) {
     return undefined;
   }
-  const bounds = getSelectedTabBounds(newState);
+  const bounds = getSelectedTabBounds(newState, newState.layout.groups[groupIndex].id);
   let stateWithViewlet = createViewletForTab(newState, tabId);
   set$1(uid, state, stateWithViewlet);
   if (switchCommands.length > 0) {
@@ -4131,12 +4257,8 @@ const openInputWithContext = async (context, options) => {
       await context.updateState(() => unsupportedState);
       return;
     }
-    const bounds = {
-      height: stateAfterModuleId.height - stateAfterModuleId.tabHeight,
-      width: stateAfterModuleId.width,
-      x: stateAfterModuleId.x,
-      y: stateAfterModuleId.y + stateAfterModuleId.tabHeight
-    };
+    const tabLocation = findTabById(stateAfterModuleId, tabId);
+    const bounds = getSelectedTabBounds(stateAfterModuleId, tabLocation?.groupId);
     const stateWithViewlet = createViewletForTab(stateAfterModuleId, tabId, viewletModuleId, bounds);
     let intermediateState = stateWithViewlet;
     const {
@@ -4468,42 +4590,6 @@ const retryOpen = async state => {
   return openUri(state, tab.uri);
 };
 
-const getSegmentSize = segment => {
-  return segment.groups.reduce((total, group) => total + group.size, 0);
-};
-const getGroupSegments = (groups, parentDirection) => {
-  const segments = [];
-  let index = 0;
-  while (index < groups.length) {
-    const group = groups[index];
-    if (group.direction !== parentDirection) {
-      const startIndex = index;
-      const nestedGroups = [group];
-      const {
-        segmentId
-      } = group;
-      index++;
-      while (index < groups.length && groups[index].direction === group.direction && groups[index].segmentId === segmentId) {
-        nestedGroups.push(groups[index]);
-        index++;
-      }
-      segments.push({
-        direction: nestedGroups.length === 1 ? undefined : group.direction,
-        groups: nestedGroups,
-        startIndex
-      });
-      continue;
-    }
-    segments.push({
-      direction: undefined,
-      groups: [group],
-      startIndex: index
-    });
-    index++;
-  }
-  return segments;
-};
-
 const rebalanceGroupSizes = groups => {
   const groupCount = groups.length;
   if (groupCount === 0) {
@@ -4768,7 +4854,6 @@ const show2 = async (uid, menuId, x, y, args) => {
 };
 
 const NoGroupId = -1;
-const RendererWorkerForwardDelay$1 = 50;
 const handleContextMenu = async (state, rawGroupId, x, y) => {
   const {
     uid
@@ -4782,15 +4867,6 @@ const handleContextMenu = async (state, rawGroupId, x, y) => {
   if (Number.isNaN(groupId)) {
     return state;
   }
-  if (isConnected()) {
-    setTimeout(() => {
-      void show2(uid, Main$1, x, y, {
-        groupId,
-        menuId: Main$1
-      });
-    }, RendererWorkerForwardDelay$1);
-    return state;
-  }
   await show2(uid, Main$1, x, y, {
     groupId,
     menuId: Main$1
@@ -4906,6 +4982,12 @@ const getSplitDirection = (x, y, width, height) => {
 const isNotEmpty = group => {
   return !group.isEmpty;
 };
+const getContentOffsetY = (targetIsEmpty, hasOpenEditor, tabHeight) => {
+  if (targetIsEmpty !== undefined) {
+    return targetIsEmpty ? 0 : tabHeight;
+  }
+  return hasOpenEditor ? tabHeight : 0;
+};
 const getDragOverlay = (state, eventX, eventY) => {
   const {
     height,
@@ -4918,17 +5000,33 @@ const getDragOverlay = (state, eventX, eventY) => {
   const {
     groups
   } = layout;
+  const relativeEventX = Math.min(Math.max(eventX - x, 0), width);
+  const relativeEventY = Math.min(Math.max(eventY - y, 0), height);
+  const groupBounds = getEditorGroupBounds(layout, width, height);
+  const target = groupBounds.find(bounds => {
+    return relativeEventX >= bounds.x && relativeEventX <= bounds.x + bounds.width && relativeEventY >= bounds.y && relativeEventY <= bounds.y + bounds.height;
+  });
   const hasOpenEditor = groups.some(isNotEmpty);
-  const contentY = hasOpenEditor ? tabHeight : 0;
-  const contentHeight = Math.max(0, height - contentY);
-  const relativeX = eventX - x;
-  const relativeY = eventY - y - contentY;
-  const splitDirection = getSplitDirection(relativeX, relativeY, width, contentHeight);
-  return getOverlay(0, contentY, width, contentHeight, splitDirection);
+  const targetX = target?.x ?? 0;
+  const targetY = target?.y ?? 0;
+  const targetWidth = target?.width ?? width;
+  const targetHeight = target?.height ?? height;
+  const contentOffsetY = getContentOffsetY(target?.group.isEmpty, hasOpenEditor, tabHeight);
+  const contentY = targetY + contentOffsetY;
+  const contentHeight = Math.max(0, targetHeight - contentOffsetY);
+  const relativeX = relativeEventX - targetX;
+  const relativeY = relativeEventY - contentY;
+  const splitDirection = getSplitDirection(relativeX, relativeY, targetWidth, contentHeight);
+  return {
+    ...getOverlay(targetX, contentY, targetWidth, contentHeight, splitDirection),
+    ...(target && {
+      targetGroupId: target.group.id
+    })
+  };
 };
 
 const isDragOverlayEqual = (oldOverlay, newOverlay) => {
-  return oldOverlay?.x === newOverlay?.x && oldOverlay?.y === newOverlay?.y && oldOverlay?.width === newOverlay?.width && oldOverlay?.height === newOverlay?.height && oldOverlay?.splitDirection === newOverlay?.splitDirection;
+  return oldOverlay?.x === newOverlay?.x && oldOverlay?.y === newOverlay?.y && oldOverlay?.width === newOverlay?.width && oldOverlay?.height === newOverlay?.height && oldOverlay?.splitDirection === newOverlay?.splitDirection && oldOverlay?.targetGroupId === newOverlay?.targetGroupId;
 };
 
 const handleDragOver = (state, eventX, eventY) => {
@@ -5105,27 +5203,29 @@ const splitUp$1 = (state, groupId) => {
   return splitEditorGroup$1(state, resolvedGroupId, 'up');
 };
 
-const splitForDrop = (state, splitDirection) => {
+const splitForDrop = (state, splitDirection, targetGroupId) => {
   switch (splitDirection) {
     case Down:
-      return splitDown$1(state);
+      return splitDown$1(state, targetGroupId);
     case Left:
-      return splitLeft$1(state);
+      return splitLeft$1(state, targetGroupId);
     case Right:
-      return splitRight$1(state);
+      return splitRight$1(state, targetGroupId);
     case Up:
-      return splitUp$1(state);
+      return splitUp$1(state, targetGroupId);
     default:
       return state;
   }
 };
 
-const applyDropAction = async (context, action, splitDirection) => {
+const applyDropAction = async (context, action, splitDirection, targetGroupId) => {
   switch (action.command) {
     case 'openFiles':
       {
         if (action.uris.length > 0 && splitDirection !== None) {
-          await context.updateState(state => splitForDrop(state, splitDirection));
+          await context.updateState(state => splitForDrop(state, splitDirection, targetGroupId));
+        } else if (action.uris.length > 0 && targetGroupId !== undefined) {
+          await context.updateState(state => focusEditorGroup(state, targetGroupId));
         }
         await openUrisWithContext(context, action.uris, splitDirection === None);
         break;
@@ -5164,7 +5264,10 @@ const getDropAction = async uris => {
 };
 
 const handleDrop = async (context, dropIdOrItemIds) => {
-  const splitDirection = context.getState().dragOverlay?.splitDirection ?? None;
+  const {
+    splitDirection = None,
+    targetGroupId
+  } = context.getState().dragOverlay ?? {};
   await context.updateState(handleDragLeave);
   const {
     platform
@@ -5180,7 +5283,7 @@ const handleDrop = async (context, dropIdOrItemIds) => {
     uris = droppedUris;
   }
   const actions = await getDropAction(uris);
-  await applyDropAction(context, actions, splitDirection);
+  await applyDropAction(context, actions, splitDirection, targetGroupId);
 };
 
 const EditorGroupHeader = 'EditorGroupHeader';
@@ -5290,14 +5393,7 @@ const newFile = async state => {
     uri: 'untitled:///1'
   };
   const stateWithNewTab = openTab(newState, targetGroupId, newTab);
-
-  // Calculate bounds: use main area bounds minus tab height
-  const bounds = {
-    height: stateWithNewTab.height - stateWithNewTab.tabHeight,
-    width: stateWithNewTab.width,
-    x: stateWithNewTab.x,
-    y: stateWithNewTab.y + stateWithNewTab.tabHeight
-  };
+  const bounds = getSelectedTabBounds(stateWithNewTab, targetGroupId);
   const viewletModuleId = EditorText;
   const stateWithViewlet = createViewletForTab(stateWithNewTab, tabId);
   let intermediateState = stateWithViewlet;
@@ -5402,8 +5498,6 @@ const handleIconThemeChange = async state => {
   };
 };
 
-const RendererWorkerCallbackDelay = 50;
-const commandsWithDeferredRender = new Set(['handleContextMenu', 'handleTabContextMenu']);
 const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcessFallback = true) => {
   const executeViewletCommand = async (uid, command, ...args) => {
     const fn = viewletCommandMap[`MainArea.${command}`];
@@ -5411,12 +5505,6 @@ const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcessFa
       throw new TypeError(`Viewlet command not found: ${command}`);
     }
     await fn(uid, ...args);
-    if (commandsWithDeferredRender.has(command)) {
-      setTimeout(() => {
-        void invoke$1('Viewlet.requestRender', uid);
-      }, RendererWorkerCallbackDelay);
-      return;
-    }
     await invoke$1('Viewlet.requestRender', uid);
   };
   const rpc = await create$8({
@@ -5472,13 +5560,6 @@ const resizeChild = async (editorUid, dimensions) => {
   }
 };
 const handleResize = async (state, dimensions) => {
-  const {
-    height,
-    width,
-    x,
-    y
-  } = dimensions;
-
   // Resize all editor children to their new bounds
   const {
     layout,
@@ -5487,20 +5568,24 @@ const handleResize = async (state, dimensions) => {
   const {
     groups
   } = layout;
-  const contentHeight = height - tabHeight;
+  const groupBounds = getEditorGroupContentBounds(layout, dimensions, tabHeight);
   const resizePromises = [];
-  const tabs = groups.flatMap(group => group.tabs);
-  for (const tab of tabs) {
-    if (tab.editorUid === -1) {
+  for (const group of groups) {
+    const bounds = groupBounds.find(item => item.groupId === group.id);
+    if (!bounds) {
       continue;
     }
-    const resizePromise = resizeChild(tab.editorUid, {
-      height: contentHeight,
-      width,
-      x,
-      y: y + tabHeight
-    });
-    resizePromises.push(resizePromise);
+    const dimensions = {
+      height: bounds.height,
+      width: bounds.width,
+      x: bounds.x,
+      y: bounds.y
+    };
+    for (const tab of group.tabs) {
+      if (tab.editorUid !== -1) {
+        resizePromises.push(resizeChild(tab.editorUid, dimensions));
+      }
+    }
   }
   const resizeCommands = await Promise.all(resizePromises);
   return resizeCommands.flat();
@@ -5801,7 +5886,6 @@ const handleSashPointerUp = async state => {
   };
 };
 
-const RendererWorkerForwardDelay = 50;
 const handleTabContextMenu = async (state, button, x, y, groupIndexRaw = '', tabIndexRaw = '') => {
   number(x);
   number(y);
@@ -5816,15 +5900,6 @@ const handleTabContextMenu = async (state, button, x, y, groupIndexRaw = '', tab
     groupId: group.id,
     tabId: tab.id
   } : {};
-  if (isConnected()) {
-    setTimeout(() => {
-      void show2(uid, Tab, x, y, {
-        menuId: Tab,
-        ...target
-      });
-    }, RendererWorkerForwardDelay);
-    return state;
-  }
   await show2(uid, Tab, x, y, {
     menuId: Tab,
     ...target
@@ -5832,6 +5907,77 @@ const handleTabContextMenu = async (state, button, x, y, groupIndexRaw = '', tab
   return state;
 };
 
+const getFocusIndex = (key, index, tabCount) => {
+  switch (key) {
+    case 'ArrowLeft':
+      return (index + tabCount - 1) % tabCount;
+    case 'ArrowRight':
+      return (index + 1) % tabCount;
+    case 'End':
+      return tabCount - 1;
+    case 'Home':
+      return 0;
+    default:
+      return -1;
+  }
+};
+const focusTab = async (state, groupIndex, index) => {
+  const selector = `.${MainTab}[data-group-index="${groupIndex}"][data-index="${index}"]`;
+  if (isConnected()) {
+    await invoke('Viewlet.focusSelector', state.uid, selector);
+  } else {
+    await invoke$1('Viewlet.focusSelector', state.uid, selector);
+  }
+};
+const handleTabKeyDown = async (state, groupIndexRaw, indexRaw, key) => {
+  if (!groupIndexRaw || !indexRaw) {
+    return state;
+  }
+  const groupIndex = Number.parseInt(groupIndexRaw);
+  const index = Number.parseInt(indexRaw);
+  const group = state.layout.groups[groupIndex];
+  if (!group || index < 0 || index >= group.tabs.length) {
+    return state;
+  }
+  if ([' ', 'Enter', 'Space'].includes(key)) {
+    return selectTab(state, groupIndex, index);
+  }
+  const focusIndex = getFocusIndex(key, index, group.tabs.length);
+  if (focusIndex === -1) {
+    return state;
+  }
+  await focusTab(state, groupIndex, focusIndex);
+  return state;
+};
+
+const getPixelDelta = (state, deltaMode, deltaY) => {
+  switch (deltaMode) {
+    case 1:
+      return deltaY * 16;
+    case 2:
+      return deltaY * state.width;
+    default:
+      return deltaY;
+  }
+};
+const handleTabsWheel = async (state, groupIndexRaw, deltaMode, deltaY) => {
+  if (!groupIndexRaw || deltaY === 0) {
+    return state;
+  }
+  const groupIndex = Number.parseInt(groupIndexRaw);
+  if (!state.layout.groups[groupIndex]) {
+    return state;
+  }
+  const selector = `.${MainTabs}[data-group-index="${groupIndex}"]`;
+  const pixelDelta = getPixelDelta(state, deltaMode, deltaY);
+  if (isConnected()) {
+    await invoke('Viewlet.scrollSelectorBy', state.uid, selector, pixelDelta);
+  } else {
+    await invoke$1('Viewlet.scrollSelectorBy', state.uid, selector, pixelDelta);
+  }
+  return state;
+};
+
 const handleUriChange = async (state, oldUri, newUri) => {
   const {
     homeDirUri,
@@ -6003,7 +6149,10 @@ const tryRestoreLayout = savedState => {
   return normalizedLayout;
 };
 
-const createViewlets = async (layout, viewletModuleIds, bounds) => {
+const createViewlets = async (state, viewletModuleIds) => {
+  const {
+    layout
+  } = state;
   const {
     groups
   } = layout;
@@ -6014,7 +6163,8 @@ const createViewlets = async (layout, viewletModuleIds, bounds) => {
     if (activeTab && viewletModuleIds[activeTab.id]) {
       const editorUid = activeTab.editorUid === -1 ? create$2() : activeTab.editorUid;
       editorUids[activeTab.id] = editorUid;
-      const title = await createViewlet(viewletModuleIds[activeTab.id], editorUid, activeTab.id, bounds, activeTab.uri);
+      const bounds = getSelectedTabBounds(state, group.id);
+      const title = await createViewlet(viewletModuleIds[activeTab.id], editorUid, activeTab.id, bounds, activeTab.uri || '');
       if (title) {
         titles[activeTab.id] = title;
       }
@@ -6088,19 +6238,10 @@ const updateTabs = (state, editorUids) => {
 };
 
 const restoreAndCreateEditors = async (state, restoredLayout) => {
-  const {
-    tabHeight
-  } = state;
   let newState = {
     ...state,
     layout: restoredLayout
   };
-  const bounds = {
-    height: newState.height - tabHeight,
-    width: newState.width,
-    x: newState.x,
-    y: newState.y + tabHeight
-  };
 
   // Get viewlet module IDs for all active tabs
   const viewletModuleIds = await getViewletModuleIds(newState.layout);
@@ -6109,7 +6250,7 @@ const restoreAndCreateEditors = async (state, restoredLayout) => {
   const {
     editorUids,
     titles
-  } = await createViewlets(newState.layout, viewletModuleIds, bounds);
+  } = await createViewlets(newState, viewletModuleIds);
 
   // Update tabs with editor UIDs
   newState = updateTabs(newState, editorUids);
@@ -6119,6 +6260,7 @@ const restoreAndCreateEditors = async (state, restoredLayout) => {
     const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
     if (activeTab && viewletModuleIds[activeTab.id]) {
       const editorUid = editorUids[activeTab.id];
+      getSelectedTabBounds(newState, group.id);
       newState = createViewletForTab(newState, activeTab.id);
       newState = handleViewletReady(newState, editorUid, titles[activeTab.id]);
     }
@@ -6642,6 +6784,24 @@ const refresh = state => {
   };
 };
 
+const renderActiveTabVisibility = (oldState, newState) => {
+  const {
+    activeGroupId,
+    groups
+  } = newState.layout;
+  const groupIndex = groups.findIndex(group => group.id === activeGroupId);
+  if (groupIndex === -1) {
+    return [];
+  }
+  const group = groups[groupIndex];
+  const tabIndex = group.tabs.findIndex(tab => tab.id === group.activeTabId);
+  if (tabIndex === -1) {
+    return [];
+  }
+  const selector = `.${MainTab}[data-group-index="${groupIndex}"][data-index="${tabIndex}"]`;
+  return ['Viewlet.scrollSelectorIntoView', newState.uid, selector];
+};
+
 const getDragOverlayCss = dragOverlay => {
   if (!dragOverlay) {
     return [];
@@ -7115,6 +7275,8 @@ const HandleDrop = 25;
 const HandleDragStart = 26;
 const HandleDragEnd = 27;
 const HandleTabMouseUp = 28;
+const HandleTabKeyDown = 29;
+const HandleTabsWheel = 30;
 
 const dragOverlayVirtualDom = {
   childCount: 0,
@@ -7343,9 +7505,11 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     onDblClick: HandleDoubleClick,
     onDragEnd: HandleDragEnd,
     onDragStart: HandleDragStart,
+    onKeyDown: HandleTabKeyDown,
     onMouseDown: HandleClickTab,
     onMouseUp: HandleTabMouseUp,
     role: Tab$1,
+    tabIndex: isActive ? 0 : -1,
     title: tab.uriTitle || tab.uri || tab.title,
     type: Div
   }, ...renderTabIcon(tab), tabTitleNode, text(tab.title), ...closeButtonNodes];
@@ -7355,6 +7519,8 @@ const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
   return [{
     childCount: tabsChildCount,
     className: MainTabs,
+    'data-groupIndex': groupIndex,
+    onWheel: HandleTabsWheel,
     role: TabList,
     type: Div
   }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
@@ -7715,6 +7881,8 @@ const renderPendingViewletUpdate = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderActiveTabVisibility:
+      return renderActiveTabVisibility;
     case RenderCss:
       return renderCss;
     case RenderDragData:
@@ -7767,10 +7935,17 @@ const renderEventListeners = () => {
     params: ['handleClick', TargetName]
   }, {
     name: HandleClickClose,
-    params: ['handleClickCloseTab', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
+    params: ['handleClickCloseTab', 'event.currentTarget.dataset.groupIndex', 'event.currentTarget.dataset.index'],
+    stopPropagation: true
   }, {
     name: HandleClickTab,
-    params: ['handleClickTab', 'event.target.dataset.groupIndex', 'event.target.dataset.index', Button$1]
+    params: ['handleClickTab', 'event.currentTarget.dataset.groupIndex', 'event.currentTarget.dataset.index', Button$1]
+  }, {
+    name: HandleTabKeyDown,
+    params: ['handleTabKeyDown', 'event.currentTarget.dataset.groupIndex', 'event.currentTarget.dataset.index', Key]
+  }, {
+    name: HandleTabsWheel,
+    params: ['handleTabsWheel', 'event.currentTarget.dataset.groupIndex', DeltaMode, DeltaY]
   }, {
     name: HandleDoubleClick,
     params: ['handleDoubleClick', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
@@ -7910,12 +8085,7 @@ const reopenEditorWith = async (context, preferredEditorId) => {
     errorMessage: undefined,
     loadingState: undefined
   });
-  const bounds = {
-    height: resetState.height - resetState.tabHeight,
-    width: resetState.width,
-    x: resetState.x,
-    y: resetState.y + resetState.tabHeight
-  };
+  const bounds = getSelectedTabBounds(resetState, latestTab.groupId);
   const stateWithViewlet = createViewletForTab(resetState, initialTab.id);
   await context.updateState(() => stateWithViewlet);
   const tabWithViewlet = findTabById(stateWithViewlet, initialTab.id);
@@ -8375,7 +8545,9 @@ const commandMap = {
   'MainArea.handleSashPointerMove': wrapSerialCommand(handleSashPointerMove),
   'MainArea.handleSashPointerUp': wrapSerialCommand(handleSashPointerUp),
   'MainArea.handleTabContextMenu': wrapSerialCommand(handleTabContextMenu),
+  'MainArea.handleTabKeyDown': wrapSerialCommand(handleTabKeyDown),
   'MainArea.handleTabMouseUp': wrapSerialCommand(resetPointerDown),
+  'MainArea.handleTabsWheel': wrapSerialCommand(handleTabsWheel),
   'MainArea.handleTestWorkerMessagePort': handleTestWorkerMessagePort,
   'MainArea.handleUriChange': wrapSerialCommand(handleUriChange),
   'MainArea.handleWorkspaceChange': wrapSerialCommand(handleWorkspaceChange),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/main-area-worker",
-  "version": "9.50.0",
+  "version": "9.51.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",