@lvce-editor/main-area-worker 9.50.1 → 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) {
@@ -4822,60 +4908,6 @@ const handleDragLeave = state => {
   };
 };
 
-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 getEditorGroupBounds = (layout, width, height) => {
-  const {
-    direction,
-    groups
-  } = layout;
-  const segments = getGroupSegments(groups, direction);
-  const rootBounds = {
-    height,
-    width,
-    x: 0,
-    y: 0
-  };
-  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 None = 0;
 const Up = 1;
 const Down = 2;
@@ -5361,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;
@@ -5535,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,
@@ -5550,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();
@@ -5885,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,
@@ -6056,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;
@@ -6067,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;
       }
@@ -6141,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);
@@ -6162,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);
@@ -6172,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]);
     }
@@ -6695,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 [];
@@ -7168,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,
@@ -7396,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];
@@ -7408,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))];
@@ -7768,6 +7881,8 @@ const renderPendingViewletUpdate = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderActiveTabVisibility:
+      return renderActiveTabVisibility;
     case RenderCss:
       return renderCss;
     case RenderDragData:
@@ -7820,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']
@@ -7963,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);
@@ -8428,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.1",
+  "version": "9.51.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",