@lvce-editor/main-area-worker 5.11.0 → 5.12.0

package/dist/mainAreaWorkerMain.js

@@ -1541,12 +1541,24 @@ const closeTab = (state, groupId, tabId) => {
     activeGroupId,
     groups
   } = layout;
-  const newGroups = groups.map(group => {
-    if (group.id === groupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        const tabIndex = group.tabs.findIndex(tab => tab.id === tabId);
+
+  // Find the group to close the tab from
+  const groupIndex = groups.findIndex(g => g.id === groupId);
+  if (groupIndex === -1) {
+    return state;
+  }
+  const group = groups[groupIndex];
+  // Check if the tab exists in the group
+  const tabWasRemoved = group.tabs.some(tab => tab.id === tabId);
+  if (!tabWasRemoved) {
+    return state;
+  }
+  const newGroups = groups.map(grp => {
+    if (grp.id === groupId) {
+      const newTabs = grp.tabs.filter(tab => tab.id !== tabId);
+      let newActiveTabId = grp.activeTabId;
+      if (grp.activeTabId === tabId) {
+        const tabIndex = grp.tabs.findIndex(tab => tab.id === tabId);
         if (newTabs.length > 0) {
           newActiveTabId = newTabs[Math.min(tabIndex, newTabs.length - 1)].id;
         } else {
@@ -1554,29 +1566,43 @@ const closeTab = (state, groupId, tabId) => {
         }
       }
       return {
-        ...group,
+        ...grp,
         activeTabId: newActiveTabId,
         tabs: newTabs
       };
     }
-    return group;
+    return grp;
   });
 
-  // If the group has no tabs left and there are other groups, remove the group
-  const groupWithNoTabs = newGroups.find(group => group.id === groupId && group.tabs.length === 0);
-  if (groupWithNoTabs && newGroups.length > 1) {
+  // If the group has no tabs left after closing, remove the group
+  const groupIsNowEmpty = newGroups[groupIndex].tabs.length === 0;
+  if (groupIsNowEmpty) {
     const remainingGroups = newGroups.filter(group => group.id !== groupId);
-    const redistributedGroups = remainingGroups.map(group => ({
-      ...group,
-      size: Math.round(100 / remainingGroups.length)
-    }));
-    const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
+
+    // If there are remaining groups, redistribute sizes
+    if (remainingGroups.length > 0) {
+      const redistributedGroups = remainingGroups.map(grp => ({
+        ...grp,
+        size: Math.round(100 / remainingGroups.length)
+      }));
+      const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
+      return {
+        ...state,
+        layout: {
+          ...layout,
+          activeGroupId: newActiveGroupId,
+          groups: redistributedGroups
+        }
+      };
+    }
+
+    // If no remaining groups, return empty layout
     return {
       ...state,
       layout: {
         ...layout,
-        activeGroupId: newActiveGroupId,
-        groups: redistributedGroups
+        activeGroupId: undefined,
+        groups: []
       }
     };
   }
@@ -1671,6 +1697,73 @@ const handleClick = async (state, name) => {
   return state;
 };
 
+const getActiveGroup = (groups, activeGroupId) => {
+  return groups.find(g => g.id === activeGroupId);
+};
+
+const Right = 'right';
+
+const splitEditorGroup$1 = (state, groupId, direction) => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const sourceGroup = groups.find(group => group.id === groupId);
+  if (!sourceGroup) {
+    return state;
+  }
+  const newGroupId = create$1();
+  const isHorizontalSplit = direction === Right;
+  const newLayoutDirection = isHorizontalSplit ? 'horizontal' : 'vertical';
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        focused: false,
+        size: 50
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    activeTabId: undefined,
+    focused: true,
+    id: newGroupId,
+    size: 50,
+    tabs: []
+  };
+  let reorderedGroups;
+  {
+    reorderedGroups = [...updatedGroups, newGroup];
+  }
+  return {
+    ...state,
+    layout: {
+      activeGroupId: newGroupId,
+      direction: newLayoutDirection,
+      groups: reorderedGroups
+    }
+  };
+};
+
+const handleClickAction = async (state, action) => {
+  if (!action) {
+    return state;
+  }
+  const activeGroup = getActiveGroup(state.layout.groups, state.layout.activeGroupId);
+  if (!activeGroup) {
+    return state;
+  }
+  switch (action) {
+    case 'split-right':
+      return splitEditorGroup$1(state, activeGroup.id, Right);
+    default:
+      return state;
+  }
+};
+
 const handleClickCloseTab = (state, rawGroupIndex, rawIndex) => {
   if (!rawGroupIndex || !rawIndex) {
     return state;
@@ -3099,23 +3192,6 @@ const HandleClickClose = 12;
 const HandleClickTab = 13;
 const HandleTabContextMenu = 14;
 
-const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
-  return [{
-    childCount: 1,
-    className: 'EditorGroupActions',
-    role: 'toolbar',
-    type: Div
-  }, {
-    childCount: 1,
-    className: 'EditorGroupActionButton SplitEditorGroupButton',
-    'data-action': 'split-right',
-    'data-groupId': String(group.id),
-    onClick: HandleClickAction,
-    title: splitEditorGroup(),
-    type: Button
-  }, text('split')];
-};
-
 const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   return [{
     'aria-selected': isActive,
@@ -3153,36 +3229,60 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
   }];
 };
 
+const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
+  return [{
+    childCount: tabsChildCount,
+    className: 'MainTabs',
+    role: 'tablist',
+    type: Div
+  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
+};
+
+const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
+  if (!splitButtonEnabled) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: 'EditorGroupActions',
+    role: 'toolbar',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'EditorGroupActionButton SplitEditorGroupButton',
+    'data-action': 'split-right',
+    'data-groupId': String(group.id),
+    onClick: HandleClickAction,
+    title: splitEditorGroup(),
+    type: Button
+  }, text('split')];
+};
+
 const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
   const tabsChildCount = group.tabs.length;
-  const actions = renderEditorGroupActions(group);
+  const actions = renderEditorGroupActions(group, groupIndex, splitButtonEnabled);
   return [{
-    childCount: 2,
+    childCount: actions.length > 0 ? 2 : 1,
     className: 'EditorGroupHeader',
     role: 'none',
     type: Div
-  }, {
-    childCount: tabsChildCount,
-    className: 'MainTabs',
-    role: 'tablist',
-    type: Div
-  }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex)), ...actions];
+  }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
 
-const renderEditorGroup = (group, groupIndex) => {
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
   return [{
     childCount: 2,
     className: 'EditorGroup',
     type: Div
-  }, ...renderEditorGroupHeader(group, groupIndex), {
+  }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), {
     childCount: activeTab ? 1 : 1,
     className: 'EditorContainer',
     type: Div
   }, ...renderEditor(activeTab)];
 };
 
-const getMainAreaVirtualDom = layout => {
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   return [{
     childCount: 1,
     className: 'Main',
@@ -3190,16 +3290,18 @@ const getMainAreaVirtualDom = layout => {
   }, {
     childCount: layout.groups.length,
     className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
+    role: 'none',
     type: Div
-  }, ...layout.groups.flatMap((group, groupIndex) => renderEditorGroup(group, groupIndex))];
+  }, ...layout.groups.flatMap((group, groupIndex) => renderEditorGroup(group, groupIndex, splitButtonEnabled))];
 };
 
 const renderItems = (oldState, newState) => {
   const {
     layout,
+    splitButtonEnabled,
     uid
   } = newState;
-  const dom = getMainAreaVirtualDom(layout);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled);
   return [SetDom2, uid, dom];
 };
 
@@ -3326,6 +3428,7 @@ const commandMap = {
   'MainArea.getMenuEntries': wrapGetter(getMenuEntries),
   'MainArea.getMenuIds': getMenuIds,
   'MainArea.handleClick': wrapCommand(handleClick),
+  'MainArea.handleClickAction': wrapCommand(handleClickAction),
   'MainArea.handleClickCloseTab': wrapCommand(handleClickCloseTab),
   'MainArea.handleClickTab': wrapCommand(handleClickTab),
   'MainArea.handleTabContextMenu': wrapCommand(handleTabContextMenu),

package/package.json

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