@lvce-editor/main-area-worker 8.7.0 → 8.8.0

package/dist/mainAreaWorkerMain.js

@@ -1746,7 +1746,7 @@ const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) =>
 
 const handleAttach = async command => {
   // TODO find a better way to append editors
-  const parentNodeSelector = '.editor-groups-container';
+  const parentNodeSelector = '.editor-groups-container, .EditorGroup';
   await invoke('Layout.attachViewlet', parentNodeSelector, command.instanceId);
 };
 
@@ -2273,7 +2273,7 @@ const handleClick = async (state, name) => {
   return state;
 };
 
-const closeEditorGroup = (state, groupId) => {
+const closeEditorGroup$1 = (state, groupId) => {
   const {
     layout
   } = state;
@@ -2915,7 +2915,7 @@ const handleClickAction = async (state, action, rawGroupId) => {
       if (rawGroupId) {
         const groupId = Number.parseInt(rawGroupId, 10);
         if (!Number.isNaN(groupId)) {
-          return closeEditorGroup(state, groupId);
+          return closeEditorGroup$1(state, groupId);
         }
       }
       return state;
@@ -2972,7 +2972,10 @@ const handleDoubleClick = async state => {
 };
 
 const EditorGroupHeader = 'EditorGroupHeader';
+const EmptyGroupCloseButton = 'EmptyGroupCloseButton';
 const EditorGroup = 'EditorGroup';
+const EditorGroupsHorizontal = 'EditorGroupsHorizontal';
+const EditorGroupsVertical = 'EditorGroupsVertical';
 const EditorContainer = 'EditorContainer';
 const EditorGroupActions = 'EditorGroupActions';
 const EditorGroupActionButton = 'EditorGroupActionButton';
@@ -3619,6 +3622,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const Close = 'Close';
+const CloseEditorGroup = 'Close Editor Group';
 const CloseAll = 'Close All';
 const CloseOthers = 'Close Others';
 const CloseToTheRight = 'Close To The Right';
@@ -3635,6 +3639,9 @@ const splitEditorGroup = () => {
 const close = () => {
   return i18nString(Close);
 };
+const closeEditorGroup = () => {
+  return i18nString(CloseEditorGroup);
+};
 const closeOthers = () => {
   return i18nString(CloseOthers);
 };
@@ -4283,9 +4290,35 @@ const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
   }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
 
-const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, direction = 'horizontal') => {
+const renderEmptyGroupCloseButton = (group, groupIndex) => {
+  return [{
+    childCount: 1,
+    className: EmptyGroupCloseButton,
+    'data-action': 'close-group',
+    'data-groupId': String(group.id),
+    onClick: HandleClickAction,
+    title: closeEditorGroup(),
+    type: Button$2
+  }, text('✕')];
+};
+
+const renderEmptyEditorGroup = (group, groupIndex, style) => {
+  return [{
+    childCount: 1,
+    className: EditorGroup,
+    style,
+    type: Div
+  }, ...renderEmptyGroupCloseButton(group)];
+};
+
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width') => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
-  const style = direction === 'horizontal' ? `width:${group.size}%;` : `height:${group.size}%;`;
+  const style = `${sizeProperty}:${group.size}%;`;
+  const hasTabs = group.tabs.length > 0;
+  const hasEmptyGroupCloseButton = !hasTabs;
+  if (hasEmptyGroupCloseButton) {
+    return renderEmptyEditorGroup(group, groupIndex, style);
+  }
   return [{
     childCount: 2,
     className: EditorGroup,
@@ -4301,7 +4334,7 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, direct
 const renderSash = (direction, sashId) => {
   return {
     childCount: 0,
-    className: direction === 'vertical' ? 'SashVertical' : 'SashHorizontal',
+    className: direction === 'horizontal' ? 'SashVertical' : 'SashHorizontal',
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     onPointerMove: HandleSashPointerMove,
@@ -4311,7 +4344,18 @@ const renderSash = (direction, sashId) => {
 };
 
 const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
+  const sizeProperty = layout.direction === 'vertical' ? 'height' : 'width';
+  if (layout.groups.length === 1) {
+    return [{
+      childCount: 1,
+      className: Main,
+      type: Div
+    }, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty)];
+  }
   const children = [];
+  const isSplit = layout.groups.length > 1;
+  const directionClassName = isSplit ? layout.direction === 'horizontal' ? EditorGroupsVertical : EditorGroupsHorizontal : '';
+  const editorGroupsContainerClassName = directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
   for (let i = 0; i < layout.groups.length; i++) {
     if (i > 0) {
       // Insert sash between groups
@@ -4320,7 +4364,7 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
       const sashId = create(beforeGroupId, afterGroupId);
       children.push(renderSash(layout.direction, sashId));
     }
-    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, layout.direction));
+    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, sizeProperty));
   }
   return [{
     childCount: 1,
@@ -4328,7 +4372,7 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
     type: Div
   }, {
     childCount: children.length,
-    className: EDITOR_GROUPS_CONTAINER,
+    className: editorGroupsContainerClassName,
     role: None$1,
     type: Div
   }, ...children];

package/package.json

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