@lvce-editor/main-area-worker 8.7.0 → 8.9.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);
 };
@@ -3754,6 +3761,27 @@ const refresh = state => {
 
 const getCss = () => {
   const rules = [`.MainArea {
+}`, `.editor-groups-container {
+  position: relative;
+}`, `.Sash {
+  position: absolute;
+  z-index: 1;
+}`, `.SashVertical {
+  top: 0;
+  bottom: 0;
+  width: 0;
+  cursor: col-resize;
+}`, `.SashVertical:hover {
+  width: 4px;
+  margin-left: -2px;
+}`, `.SashHorizontal {
+  left: 0;
+  right: 0;
+  height: 0;
+  cursor: row-resize;
+}`, `.SashHorizontal:hover {
+  height: 4px;
+  margin-top: -2px;
 }`];
   const css = rules.join('\n');
   return css;
@@ -4283,9 +4311,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-groupId': String(group.id),
+    name: 'close-group',
+    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,
@@ -4298,29 +4352,44 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, direct
   }, ...renderEditor(activeTab)];
 };
 
-const renderSash = (direction, sashId) => {
+const renderSash = (direction, sashId, style) => {
   return {
     childCount: 0,
-    className: direction === 'vertical' ? 'SashVertical' : 'SashHorizontal',
+    className: direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal',
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     onPointerMove: HandleSashPointerMove,
     onPointerUp: HandleSashPointerUp,
+    style,
     type: Div
   };
 };
 
 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;
+  let sashOffset = 0;
   for (let i = 0; i < layout.groups.length; i++) {
+    sashOffset += layout.groups[i].size;
     if (i > 0) {
       // Insert sash between groups
       const beforeGroupId = layout.groups[i - 1].id;
       const afterGroupId = layout.groups[i].id;
       const sashId = create(beforeGroupId, afterGroupId);
-      children.push(renderSash(layout.direction, sashId));
+      const style = layout.direction === 'horizontal' ? `left:${sashOffset - layout.groups[i].size}%;` : `top:${sashOffset - layout.groups[i].size}%;`;
+      children.push(renderSash(layout.direction, sashId, style));
     }
-    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, layout.direction));
+    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, sizeProperty));
   }
   return [{
     childCount: 1,
@@ -4328,7 +4397,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.9.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",