@lvce-editor/main-area-worker 9.33.2 → 9.33.3

package/dist/mainAreaWorkerMain.js

@@ -1503,6 +1503,10 @@ const Main$1 = 24;
 const Separator = 1;
 const None$1 = 0;
 
+const Add$1 = 6;
+const NavigateChild$1 = 7;
+const NavigateParent$1 = 8;
+
 const Electron = 2;
 
 const ClipBoardWorker = 3400;
@@ -3801,6 +3805,7 @@ const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getL
     layout
   } = state;
   const {
+    direction,
     groups
   } = layout;
   const groupId = create$2();
@@ -3823,6 +3828,7 @@ const createEmptyGroup$1 = (state, uri, requestId, preview = false, title = getL
   };
   const newGroup = {
     activeTabId: newTab.id,
+    direction,
     focused: true,
     id: groupId,
     isEmpty: false,
@@ -4340,7 +4346,7 @@ const getGroupSegments = (groups, parentDirection) => {
   let index = 0;
   while (index < groups.length) {
     const group = groups[index];
-    if (group.direction !== undefined && group.direction !== parentDirection) {
+    if (group.direction !== parentDirection) {
       const startIndex = index;
       const nestedGroups = [group];
       const {
@@ -4408,7 +4414,7 @@ const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayo
     if (group.id === groupId) {
       return {
         ...group,
-        direction: undefined,
+        direction: splitLayoutDirection,
         focused: false,
         size: 50
       };
@@ -4417,7 +4423,7 @@ const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayo
   });
   const newGroup = {
     ...baseNewGroup,
-    direction: undefined,
+    direction: splitLayoutDirection,
     size: 50
   };
   const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : [newGroup, ...updatedGroups];
@@ -4478,7 +4484,7 @@ const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNew
     if (group.id === groupId) {
       return {
         ...group,
-        direction: undefined,
+        direction: state.layout.direction,
         focused: false,
         size: 50
       };
@@ -4487,7 +4493,7 @@ const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNew
   });
   const newGroup = {
     ...baseNewGroup,
-    direction: undefined,
+    direction: state.layout.direction,
     size: 50
   };
   const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : (() => {
@@ -4512,6 +4518,7 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
   const splitLayoutDirection = getSplitLayoutDirection(direction);
   const baseNewGroup = {
     activeTabId: undefined,
+    direction: sourceGroup.direction,
     focused: true,
     id: newGroupId,
     isEmpty: true,
@@ -4521,10 +4528,10 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
   if (groups.length === 1) {
     return splitOnlyGroup(state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  if (sourceGroup.direction === splitLayoutDirection) {
+  if (sourceGroup.direction !== layoutDirection && sourceGroup.direction === splitLayoutDirection) {
     return splitWithinMatchingNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  if (splitLayoutDirection !== layoutDirection && sourceGroup.direction === undefined) {
+  if (splitLayoutDirection !== layoutDirection && sourceGroup.direction === layoutDirection) {
     return splitStandaloneSourceIntoNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
   const segments = getGroupSegments(groups, layoutDirection);
@@ -5489,7 +5496,7 @@ const isValidTab = tab => {
 };
 
 const isValidEditorGroup = group => {
-  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && (group.direction === undefined || isLayoutDirection(group.direction)) && typeof group.focused === 'boolean' && (group.segmentId === undefined || typeof group.segmentId === 'number') && typeof group.size === 'number' && group.size > 0 && typeof group.isEmpty === 'boolean';
+  return group && typeof group.id === 'number' && Array.isArray(group.tabs) && group.tabs.every(isValidTab) && (group.activeTabId === undefined || typeof group.activeTabId === 'number') && isLayoutDirection(group.direction) && typeof group.focused === 'boolean' && (group.segmentId === undefined || typeof group.segmentId === 'number') && typeof group.size === 'number' && group.size > 0 && typeof group.isEmpty === 'boolean';
 };
 
 const isValidMainAreaLayout = layout => {
@@ -5523,6 +5530,12 @@ const normalizeRestoredTab = tab => {
     isPreview: typeof tab?.isPreview === 'boolean' ? tab.isPreview : false
   };
 };
+const normalizeGroupDirection = (group, layoutDirection) => {
+  if (!group || typeof group !== 'object' || !Object.hasOwn(group, 'direction')) {
+    return layoutDirection;
+  }
+  return normalizeLayoutDirection(group.direction);
+};
 const tryRestoreLayout = savedState => {
   if (savedState === undefined || savedState === null) {
     return undefined;
@@ -5554,12 +5567,10 @@ const tryRestoreLayout = savedState => {
     ...rawLayout,
     direction: layoutDirection,
     groups: rawLayout.groups.map(group => {
-      const groupDirection = normalizeLayoutDirection(group?.direction);
+      const groupDirection = normalizeGroupDirection(group, layoutDirection);
       return {
         ...group,
-        ...(groupDirection !== undefined && {
-          direction: groupDirection
-        }),
+        direction: groupDirection,
         tabs: Array.isArray(group?.tabs) ? group.tabs.map(normalizeRestoredTab) : []
       };
     })
@@ -6185,13 +6196,17 @@ const getDragOverlayCss = dragOverlay => {
     y
   } = dragOverlay;
   return [`.DragOverlay {
-  left: ${x}px;
-  top: ${y}px;
-  width: ${width}px;
-  height: ${height}px;
+  --DragOverlayLeft: ${x}px;
+  --DragOverlayTop: ${y}px;
+  --DragOverlayWidth: ${width}px;
+  --DragOverlayHeight: ${height}px;
 }`];
 };
 
+const getEditorGroupClassName = groupId => {
+  return `EditorGroup-${groupId}`;
+};
+
 const getEditorGroupCss = layout => {
   const {
     direction,
@@ -6199,7 +6214,7 @@ const getEditorGroupCss = layout => {
   } = layout;
   const groupSizeVariable = direction === Vertical ? '--EditorGroupHeight' : '--EditorGroupWidth';
   return groups.map(group => {
-    return `.EditorGroup[data-groupId="${group.id}"] {
+    return `.${getEditorGroupClassName(group.id)} {
   ${groupSizeVariable}: ${group.size}%;
 }`;
   });
@@ -6924,7 +6939,7 @@ const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = t
   const closeButtonDom = closeButtonEnabled ? renderEmptyGroupCloseButton(group) : [];
   return [{
     childCount: closeButtonEnabled ? 2 : 1,
-    className: EditorGroupEmpty,
+    className: mergeClassNames(EditorGroupEmpty, getEditorGroupClassName(group.id)),
     'data-groupId': String(group.id),
     onContextMenu: HandleContextMenu,
     style,
@@ -6948,7 +6963,7 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
   }
   return [{
     childCount: 2,
-    className: EditorGroup,
+    className: mergeClassNames(EditorGroup, getEditorGroupClassName(group.id)),
     'data-groupId': String(group.id),
     style,
     type: Div
@@ -7025,10 +7040,10 @@ const addDragOverlay = (dom, dragOverlay) => {
   if (!dragOverlay) {
     return dom;
   }
-  return [dom[0], {
-    ...dom[1],
-    childCount: dom[1].childCount + 1
-  }, ...dom.slice(2), getDragOverlayVirtualDom()];
+  return [{
+    ...dom[0],
+    childCount: dom[0].childCount + 1
+  }, dom[1], ...dom.slice(2), getDragOverlayVirtualDom()];
 };
 const getSizeProperty = direction => {
   return direction === Vertical ? 'height' : 'width';
@@ -7140,10 +7155,21 @@ const renderItems = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
+const avoidRootReplacement = patches => {
+  if (patches.length !== 1 || patches[0].type !== Add$1 || patches[0].nodes?.length !== 1 || patches[0].nodes[0].className !== DragOverlay) {
+    return patches;
+  }
+  return [{
+    index: 0,
+    type: NavigateChild$1
+  }, {
+    type: NavigateParent$1
+  }, ...patches];
+};
 const renderIncremental = (oldState, newState) => {
   const oldDom = renderItems(oldState, oldState)[2];
   const newDom = renderItems(newState, newState)[2];
-  const patches = diffTree(oldDom, newDom);
+  const patches = avoidRootReplacement(diffTree(oldDom, newDom));
   return [SetPatches, newState.uid, patches];
 };
 
@@ -7472,9 +7498,10 @@ const saveState = state => {
 const flipDirection = direction => {
   return direction === Horizontal ? Vertical : Horizontal;
 };
-const createEmptyGroup = () => {
+const createEmptyGroup = direction => {
   return {
     activeTabId: undefined,
+    direction,
     focused: false,
     id: create$2(),
     isEmpty: true,
@@ -7505,9 +7532,9 @@ const mergeGroups = (target, groups, activeGroupId) => {
     tabs
   };
 };
-const getGroupsForSlotCount = (groups, slotCount, activeGroupId) => {
+const getGroupsForSlotCount = (groups, slotCount, activeGroupId, direction) => {
   if (slotCount === 1) {
-    const firstGroup = groups[0] ?? createEmptyGroup();
+    const firstGroup = groups[0] ?? createEmptyGroup(direction);
     return [mergeGroups(firstGroup, groups.slice(1), activeGroupId)];
   }
   if (groups.length === slotCount) {
@@ -7516,7 +7543,7 @@ const getGroupsForSlotCount = (groups, slotCount, activeGroupId) => {
   if (groups.length < slotCount) {
     const missingGroups = Array.from({
       length: slotCount - groups.length
-    }, createEmptyGroup);
+    }, () => createEmptyGroup(direction));
     return [...groups, ...missingGroups];
   }
   const retainedGroups = groups.slice(0, slotCount);
@@ -7535,7 +7562,7 @@ const setEditorLayout = (state, direction, slots) => {
     activeGroupId,
     groups: currentGroups
   } = layout;
-  const groups = getGroupsForSlotCount(currentGroups, slots.length, activeGroupId);
+  const groups = getGroupsForSlotCount(currentGroups, slots.length, activeGroupId, direction);
   const originalActiveIndex = currentGroups.findIndex(group => group.id === activeGroupId);
   const activeIndex = originalActiveIndex >= slots.length ? slots.length - 1 : getActiveGroupIndex(groups, activeGroupId);
   const nextGroups = groups.map((group, index) => {
@@ -7573,45 +7600,56 @@ const flipLayout = state => {
       direction: flipDirection(direction),
       groups: groups.map(group => ({
         ...group,
-        direction: group.direction === undefined ? undefined : flipDirection(group.direction)
+        direction: flipDirection(group.direction)
       }))
     }
   };
 };
 const setEditorLayoutSingle = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 100
   }]);
 };
 const setEditorLayoutTwoColumns = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 50
   }, {
+    direction: Horizontal,
     size: 50
   }]);
 };
 const setEditorLayoutThreeColumns = state => {
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 33.333333
   }, {
+    direction: Horizontal,
     size: 33.333333
   }, {
+    direction: Horizontal,
     size: 33.333334
   }]);
 };
 const setEditorLayoutTwoRows = state => {
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 50
   }, {
+    direction: Vertical,
     size: 50
   }]);
 };
 const setEditorLayoutThreeRows = state => {
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 33.333333
   }, {
+    direction: Vertical,
     size: 33.333333
   }, {
+    direction: Vertical,
     size: 33.333334
   }]);
 };
@@ -7639,6 +7677,7 @@ const setEditorLayoutGrid = state => {
 const setEditorLayoutTwoRowsRight = state => {
   const segmentId = create$2();
   return setEditorLayout(state, Horizontal, [{
+    direction: Horizontal,
     size: 50
   }, {
     direction: Vertical,
@@ -7653,6 +7692,7 @@ const setEditorLayoutTwoRowsRight = state => {
 const setEditorLayoutTwoColumnsBottom = state => {
   const segmentId = create$2();
   return setEditorLayout(state, Vertical, [{
+    direction: Vertical,
     size: 50
   }, {
     direction: Horizontal,
@@ -7671,6 +7711,7 @@ const splitDown = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
 
@@ -7679,6 +7720,7 @@ const splitDown = (state, groupId) => {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7708,12 +7750,14 @@ const splitLeft = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
   if (groups.length === 0) {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7740,6 +7784,7 @@ const splitRight = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
 
@@ -7748,6 +7793,7 @@ const splitRight = (state, groupId) => {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,
@@ -7774,12 +7820,14 @@ const splitUp = (state, groupId) => {
   } = state;
   const {
     activeGroupId,
+    direction,
     groups
   } = layout;
   if (groups.length === 0) {
     const initialGroupId = create$2();
     const initialGroup = {
       activeTabId: undefined,
+      direction,
       focused: true,
       id: initialGroupId,
       isEmpty: true,

package/package.json

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