@lvce-editor/main-area-worker 8.12.0 → 8.13.0

package/dist/mainAreaWorkerMain.js

@@ -273,9 +273,12 @@ const getGroupById = (state, groupId) => {
 };
 
 const closeTabsRight = (state, groupId) => {
+  const {
+    layout
+  } = state;
   const {
     groups
-  } = state.layout;
+  } = layout;
   const group = getGroupById(state, groupId);
   if (!group) {
     return state;
@@ -1707,7 +1710,7 @@ const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.width === newState.width && oldState.height === newState.height;
+  return false;
 };
 
 const isEqual = (oldState, newState) => {
@@ -2287,10 +2290,13 @@ const closeEditorGroup$1 = (state, groupId) => {
   if (Number.isNaN(groupId)) {
     return state;
   }
+  const {
+    layout
+  } = state;
   const {
     activeGroupId,
     groups
-  } = state.layout;
+  } = layout;
   const groupIndex = getGroupIndexById(state, groupId);
   if (groupIndex === -1 || groups.length <= 1) {
     return state;
@@ -2912,13 +2918,20 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
 };
 
 const handleClickAction = async (state, action, rawGroupId) => {
+  const {
+    layout
+  } = state;
+  const {
+    activeGroupId,
+    groups
+  } = layout;
   if (!action) {
     return state;
   }
-  if (state.layout.activeGroupId === undefined) {
+  if (activeGroupId === undefined) {
     return state;
   }
-  const activeGroup = getActiveGroup(state.layout.groups, state.layout.activeGroupId);
+  const activeGroup = getActiveGroup(groups, activeGroupId);
   if (!activeGroup) {
     return state;
   }
@@ -3249,16 +3262,27 @@ const handleSashPointerDown = async (state, sashId, clientX, clientY) => {
   };
 };
 
-const MIN_GROUP_SIZE = 10;
+const MIN_GROUP_WIDTH_PX = 250;
 const clamp = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
 const round = value => {
   return Math.round(value * 100) / 100;
 };
+const getMinGroupSizePercent = axisSize => {
+  if (!axisSize) {
+    return 10;
+  }
+  const minPercent = MIN_GROUP_WIDTH_PX / axisSize * 100;
+  // Ensure minimum is at least 10%, matching the CSS 250px constraint on typical widths
+  return Math.max(minPercent, 10);
+};
 const handleSashPointerMove = async (state, clientX, clientY) => {
   const {
-    sashDrag
+    height,
+    layout,
+    sashDrag,
+    width
   } = state;
   if (!sashDrag) {
     return state;
@@ -3266,16 +3290,26 @@ const handleSashPointerMove = async (state, clientX, clientY) => {
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
-  const axisSize = state.layout.direction === 'horizontal' ? state.width : state.height;
+  const {
+    direction,
+    groups
+  } = layout;
+  const axisSize = direction === 'horizontal' ? width : height;
   if (!axisSize) {
     return state;
   }
-  const deltaPx = state.layout.direction === 'horizontal' ? clientX - sashDrag.startClientX : clientY - sashDrag.startClientY;
+  const deltaPx = direction === 'horizontal' ? clientX - sashDrag.startClientX : clientY - sashDrag.startClientY;
   const deltaPercent = deltaPx / axisSize * 100;
   const totalResizableSize = sashDrag.beforeSize + sashDrag.afterSize;
-  const beforeSize = clamp(sashDrag.beforeSize + deltaPercent, MIN_GROUP_SIZE, totalResizableSize - MIN_GROUP_SIZE);
+  let minGroupSize = getMinGroupSizePercent(axisSize);
+
+  // If the minimum size makes it impossible to fit two groups, relax the constraint
+  if (2 * minGroupSize > totalResizableSize) {
+    minGroupSize = totalResizableSize / 2;
+  }
+  const beforeSize = clamp(sashDrag.beforeSize + deltaPercent, minGroupSize, totalResizableSize - minGroupSize);
   const afterSize = totalResizableSize - beforeSize;
-  const groups = state.layout.groups.map(group => {
+  const newGroups = groups.map(group => {
     if (group.id === sashDrag.beforeGroupId) {
       return {
         ...group,
@@ -3293,8 +3327,8 @@ const handleSashPointerMove = async (state, clientX, clientY) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
-      groups
+      ...layout,
+      groups: newGroups
     }
   };
 };
@@ -3514,7 +3548,10 @@ const createViewlets = async (layout, viewletModuleIds, bounds) => {
 const getViewletModuleIds = async layout => {
   const viewletModuleIds = {};
   for (const group of layout.groups) {
-    const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+    const {
+      tabs
+    } = group;
+    const activeTab = tabs.find(tab => tab.id === group.activeTabId);
     if (activeTab && activeTab.uri) {
       const viewletModuleId = await getViewletModuleId(activeTab.uri);
       if (viewletModuleId) {
@@ -3789,26 +3826,9 @@ 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;
+  overflow: auto;
+}`, `.EditorGroup {
+  min-width: 250px;
 }`];
   const css = rules.join('\n');
   return css;
@@ -4350,13 +4370,25 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
   }, text('✕')];
 };
 
-const renderEmptyEditorGroup = (group, groupIndex, style) => {
+const renderWaterMark = () => {
   return [{
     childCount: 1,
+    className: 'WaterMarkWrapper',
+    type: Div
+  }, {
+    childCount: 0,
+    className: 'WaterMark',
+    type: Div
+  }];
+};
+
+const renderEmptyEditorGroup = (group, groupIndex, style) => {
+  return [{
+    childCount: 2,
     className: EditorGroup,
     style,
     type: Div
-  }, ...renderEmptyGroupCloseButton(group)];
+  }, ...renderEmptyGroupCloseButton(group), ...renderWaterMark()];
 };
 
 const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width') => {
@@ -4379,10 +4411,13 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
   }, ...renderEditor(activeTab)];
 };
 
+const getSashClassName = direction => {
+  return direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal';
+};
 const renderSash = (direction, sashId, style) => {
   return [{
     childCount: 0,
-    className: direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal',
+    className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     style,
@@ -4412,6 +4447,7 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   const directionClassName = isSplit ? direction === 'horizontal' ? EditorGroupsVertical : EditorGroupsHorizontal : '';
   const editorGroupsContainerClassName = directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
   let sashOffset = 0;
+  let childCount = 0;
   for (let i = 0; i < groups.length; i++) {
     sashOffset += groups[i].size;
     if (i > 0) {
@@ -4421,15 +4457,17 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
       const sashId = create(beforeGroupId, afterGroupId);
       const style = direction === 'horizontal' ? `left:${sashOffset - groups[i].size}%;` : `top:${sashOffset - groups[i].size}%;`;
       children.push(...renderSash(direction, sashId, style));
+      childCount++;
     }
     children.push(...renderEditorGroup(groups[i], i, splitButtonEnabled, sizeProperty));
+    childCount++;
   }
   return [{
     childCount: 1,
     className: Main,
     type: Div
   }, {
-    childCount: children.length,
+    childCount,
     className: editorGroupsContainerClassName,
     role: None$1,
     type: Div

package/package.json

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