@lvce-editor/main-area-worker 9.8.0 → 9.9.0

package/dist/mainAreaWorkerMain.js

@@ -2479,6 +2479,14 @@ const RetryOpen = 'retry-open';
 const SplitRight$1 = 'split-right';
 const TogglePreview$1 = 'toggle-preview';
 
+const parseRawGroupId = rawGroupId => {
+  if (!rawGroupId) {
+    return undefined;
+  }
+  const groupId = Number.parseFloat(rawGroupId);
+  return Number.isNaN(groupId) ? undefined : groupId;
+};
+
 const getBasename$1 = uri => {
   const lastSlashIndex = uri.lastIndexOf('/');
   if (lastSlashIndex === -1) {
@@ -3128,6 +3136,39 @@ const retryOpen = async state => {
   return openUri(state, tab.uri);
 };
 
+const getSegmentSize = segment => {
+  return segment.groups.reduce((total, group) => total + group.size, 0);
+};
+const getGroupSegments = (groups, parentDirection) => {
+  const segments = [];
+  let index = 0;
+  while (index < groups.length) {
+    const group = groups[index];
+    if (group.direction !== undefined && group.direction !== parentDirection) {
+      const startIndex = index;
+      const nestedGroups = [group];
+      index++;
+      while (index < groups.length && groups[index].direction === group.direction) {
+        nestedGroups.push(groups[index]);
+        index++;
+      }
+      segments.push({
+        direction: group.direction,
+        groups: nestedGroups,
+        startIndex
+      });
+      continue;
+    }
+    segments.push({
+      direction: undefined,
+      groups: [group],
+      startIndex: index
+    });
+    index++;
+  }
+  return segments;
+};
+
 const rebalanceGroupSizes = groups => {
   const groupCount = groups.length;
   if (groupCount === 0) {
@@ -3141,6 +3182,111 @@ const rebalanceGroupSizes = groups => {
     size: index === groupCount - 1 ? lastSize : evenSize
   }));
 };
+const isTrailingSplit = direction => {
+  return direction === Right || direction === 'down';
+};
+const getSplitLayoutDirection = direction => {
+  return direction === Left || direction === Right ? Horizontal : Vertical;
+};
+const createNextState = (state, activeGroupId, groups) => {
+  return {
+    ...state,
+    layout: {
+      activeGroupId,
+      direction: state.layout.direction,
+      groups
+    }
+  };
+};
+const splitOnlyGroup = (state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        direction: undefined,
+        focused: false,
+        size: 50
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: undefined,
+    size: 50
+  };
+  const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : [newGroup, ...updatedGroups];
+  return {
+    ...state,
+    layout: {
+      activeGroupId: newGroupId,
+      direction: splitLayoutDirection,
+      groups: reorderedGroups
+    }
+  };
+};
+const splitWithinMatchingNestedDirection = (state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const sourceIndex = groups.findIndex(group => group.id === groupId);
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        focused: false,
+        size: Number((group.size / 2).toFixed(6))
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: splitLayoutDirection,
+    size: Number((sourceGroup.size / 2).toFixed(6))
+  };
+  const insertIndex = isTrailingSplit(direction) ? sourceIndex + 1 : sourceIndex;
+  const reorderedGroups = [...updatedGroups.slice(0, insertIndex), newGroup, ...updatedGroups.slice(insertIndex)];
+  return createNextState(state, newGroupId, reorderedGroups);
+};
+const splitStandaloneSourceIntoNestedDirection = (state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup) => {
+  const sourceIndex = groups.findIndex(group => group.id === groupId);
+  const halfSize = Number((sourceGroup.size / 2).toFixed(6));
+  const updatedSourceGroup = {
+    ...sourceGroup,
+    direction: splitLayoutDirection,
+    focused: false,
+    size: halfSize
+  };
+  const newGroup = {
+    ...baseNewGroup,
+    direction: splitLayoutDirection,
+    size: Number((sourceGroup.size - halfSize).toFixed(6))
+  };
+  const replacementGroups = isTrailingSplit(direction) ? [updatedSourceGroup, newGroup] : [newGroup, updatedSourceGroup];
+  const reorderedGroups = [...groups.slice(0, sourceIndex), ...replacementGroups, ...groups.slice(sourceIndex + 1)];
+  return createNextState(state, newGroupId, reorderedGroups);
+};
+const splitAtRootLevel = (state, groups, groupId, newGroupId, direction, baseNewGroup) => {
+  const updatedGroups = groups.map(group => {
+    if (group.id === groupId) {
+      return {
+        ...group,
+        direction: undefined,
+        focused: false,
+        size: 50
+      };
+    }
+    return group;
+  });
+  const newGroup = {
+    ...baseNewGroup,
+    direction: undefined,
+    size: 50
+  };
+  const reorderedGroups = isTrailingSplit(direction) ? [...updatedGroups, newGroup] : (() => {
+    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
+    return [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
+  })();
+  return createNextState(state, newGroupId, rebalanceGroupSizes(reorderedGroups));
+};
 const splitEditorGroup$1 = (state, groupId, direction) => {
   const {
     layout
@@ -3153,42 +3299,30 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
     return state;
   }
   const newGroupId = create$1();
-  const isHorizontalSplit = direction === Left || 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 = {
+  const splitLayoutDirection = getSplitLayoutDirection(direction);
+  const baseNewGroup = {
     activeTabId: undefined,
     focused: true,
     id: newGroupId,
     isEmpty: true,
-    size: 50,
+    size: sourceGroup.size / 2,
     tabs: []
   };
-  let reorderedGroups;
-  if (direction === Right || direction === 'down') {
-    reorderedGroups = [...updatedGroups, newGroup];
-  } else {
-    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
-    reorderedGroups = [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
+  if (groups.length === 1) {
+    return splitOnlyGroup(state, groups, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
   }
-  const resizedGroups = rebalanceGroupSizes(reorderedGroups);
-  return {
-    ...state,
-    layout: {
-      activeGroupId: newGroupId,
-      direction: newLayoutDirection,
-      groups: resizedGroups
-    }
-  };
+  if (sourceGroup.direction === splitLayoutDirection) {
+    return splitWithinMatchingNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
+  }
+  if (splitLayoutDirection !== layout.direction && sourceGroup.direction === undefined) {
+    return splitStandaloneSourceIntoNestedDirection(state, groups, sourceGroup, groupId, newGroupId, direction, splitLayoutDirection, baseNewGroup);
+  }
+  const segments = getGroupSegments(groups, layout.direction);
+  const hasNestedSegments = segments.some(segment => segment.direction !== undefined);
+  if (splitLayoutDirection === layout.direction && !hasNestedSegments) {
+    return splitAtRootLevel(state, groups, groupId, newGroupId, direction, baseNewGroup);
+  }
+  return createNextState(state, newGroupId, groups);
 };
 
 const handleClickAction = async (state, action, rawGroupId) => {
@@ -3211,11 +3345,13 @@ const handleClickAction = async (state, action, rawGroupId) => {
   }
   switch (action) {
     case CloseGroup:
-      if (rawGroupId) {
-        const groupId = Number.parseInt(rawGroupId, 10);
+      {
+        const groupId = parseRawGroupId(rawGroupId);
+        if (groupId === undefined) {
+          return state;
+        }
         return closeEditorGroup$1(state, groupId);
       }
-      return state;
     case RetryOpen:
       return retryOpen(state);
     case SplitRight$1:
@@ -4394,26 +4530,70 @@ const getEditorGroupCss = layout => {
   });
 };
 
-const getSashCss = layout => {
+const MIN_GROUP_WIDTH_PX = 250;
+const getSashOffset = (layout, groupIndex, width) => {
+  const {
+    direction,
+    groups
+  } = layout;
+  const percentOffset = groups.slice(0, groupIndex).reduce((total, group) => total + group.size, 0);
+  if (direction !== Horizontal || !width || !Number.isFinite(width)) {
+    return `${percentOffset}%`;
+  }
+  const effectiveGroupSizes = groups.map(group => Math.max(group.size / 100 * width, MIN_GROUP_WIDTH_PX));
+  const hasOverflowingGroups = effectiveGroupSizes.some((size, index) => size !== groups[index].size / 100 * width);
+  if (!hasOverflowingGroups) {
+    return `${percentOffset}%`;
+  }
+  const pixelOffset = effectiveGroupSizes.slice(0, groupIndex).reduce((total, size) => total + size, 0);
+  return `${pixelOffset}px`;
+};
+
+const escapeCssAttributeValue = value => {
+  return value.replaceAll('\\', '\\\\').replaceAll('"', '\\"');
+};
+const getSashCss = (layout, width = 0) => {
   if (layout.groups.length <= 1) {
     return [];
   }
-  const sashPositionVariable = layout.direction === Horizontal ? '--SashLeft' : '--SashTop';
   const rules = [];
-  let sashOffset = 0;
-  for (let i = 1; i < layout.groups.length; i++) {
-    sashOffset += layout.groups[i - 1].size;
-    const beforeGroupId = layout.groups[i - 1].id;
-    const afterGroupId = layout.groups[i].id;
+  const segments = getGroupSegments(layout.groups, layout.direction);
+  const sashPositionProperty = layout.direction === Horizontal ? 'left' : 'top';
+  let segmentOffset = 0;
+  for (let i = 1; i < segments.length; i++) {
+    segmentOffset += getSegmentSize(segments[i - 1]);
+    const beforeGroupId = segments[i - 1].groups.at(-1)?.id || 0;
+    const afterGroupId = segments[i].groups[0].id;
     const sashId = create(beforeGroupId, afterGroupId);
-    rules.push(`.Sash[data-sashId="${sashId}"] {
-  ${sashPositionVariable}: ${sashOffset}%;
+    const escapedSashId = escapeCssAttributeValue(sashId);
+    const sashOffset = segments.some(segment => segment.direction !== undefined) || layout.direction !== Horizontal || !width ? `${segmentOffset}%` : getSashOffset(layout, i, width);
+    rules.push(`[data-sashId="${escapedSashId}"] {
+  ${sashPositionProperty}: ${sashOffset};
+}`);
+  }
+  for (const segment of segments) {
+    if (segment.direction === undefined || segment.groups.length <= 1) {
+      continue;
+    }
+    const nestedProperty = segment.direction === Horizontal ? 'left' : 'top';
+    const segmentSize = getSegmentSize(segment);
+    let nestedOffset = 0;
+    for (let i = 1; i < segment.groups.length; i++) {
+      nestedOffset += segment.groups[i - 1].size;
+      const beforeGroupId = segment.groups[i - 1].id;
+      const afterGroupId = segment.groups[i].id;
+      const sashId = create(beforeGroupId, afterGroupId);
+      const escapedSashId = escapeCssAttributeValue(sashId);
+      const relativeOffset = Number((nestedOffset / segmentSize * 100).toFixed(6));
+      rules.push(`[data-sashId="${escapedSashId}"] {
+  ${nestedProperty}: ${relativeOffset}%;
 }`);
+    }
   }
   return rules;
 };
 
-const getCss = layout => {
+const getCss = (layout, width = 0) => {
   const rules = [`.MainArea {
 }`, `.editor-groups-container {
   overflow: auto;
@@ -4421,20 +4601,16 @@ const getCss = layout => {
   min-width: 250px;
   width: var(--EditorGroupWidth, auto);
   /*height: var(--EditorGroupHeight, auto);*/
-}`, `.MainArea .SashVertical {
-  left: var(--SashLeft);
-}`, `.MainArea .SashHorizontal {
-  top: var(--SashTop);
 }`];
   if (layout) {
-    rules.push(...getEditorGroupCss(layout), ...getSashCss(layout));
+    rules.push(...getEditorGroupCss(layout), ...getSashCss(layout, width));
   }
   const css = rules.join('\n');
   return css;
 };
 
 const renderCss = (oldState, newState) => {
-  const css = getCss(newState.layout);
+  const css = getCss(newState.layout, newState.width);
   return [SetCss, newState.uid, css];
 };
 
@@ -4748,25 +4924,6 @@ const HandleSashPointerDown = 16;
 const HandleSashPointerMove = 17;
 const HandleSashPointerUp = 18;
 
-const MIN_GROUP_WIDTH_PX = 250;
-const getSashOffset = (layout, groupIndex, width) => {
-  const {
-    direction,
-    groups
-  } = layout;
-  const percentOffset = groups.slice(0, groupIndex).reduce((total, group) => total + group.size, 0);
-  if (direction !== Horizontal || !width || !Number.isFinite(width)) {
-    return `${percentOffset}%`;
-  }
-  const effectiveGroupSizes = groups.map(group => Math.max(group.size / 100 * width, MIN_GROUP_WIDTH_PX));
-  const hasOverflowingGroups = effectiveGroupSizes.some((size, index) => size !== groups[index].size / 100 * width);
-  if (!hasOverflowingGroups) {
-    return `${percentOffset}%`;
-  }
-  const pixelOffset = effectiveGroupSizes.slice(0, groupIndex).reduce((total, size) => total + size, 0);
-  return `${pixelOffset}px`;
-};
-
 const renderContent = content => {
   return [{
     childCount: 1,
@@ -5002,7 +5159,11 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
-  }, text('✕')];
+  }, {
+    childCount: 0,
+    className: MaskIconClose,
+    type: Div
+  }];
 };
 
 const renderWaterMark = groupId => {
@@ -5056,14 +5217,13 @@ const getSashClassName = direction => {
   return direction === Horizontal ? 'Sash SashVertical' : 'Sash SashHorizontal';
 };
 
-const renderSash = (direction, sashId, style) => {
+const renderSash = (direction, sashId) => {
   return [{
     childCount: 1,
     className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     role: 'none',
-    style,
     type: Button$2
   }, {
     childCount: 0,
@@ -5086,19 +5246,81 @@ const getDirectionClassName = (direction, isSplit) => {
   }
   return direction === Horizontal ? EditorGroupsVertical : EditorGroupsHorizontal;
 };
-const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, width = 0) => {
+const getContainerClassName = (direction, childCount) => {
+  const directionClassName = getDirectionClassName(direction, childCount > 1);
+  return directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
+};
+const getSizeProperty = direction => {
+  return direction === Vertical ? 'height' : 'width';
+};
+const renderSegmentChildren = (direction, groups, splitButtonEnabled) => {
+  const segments = getGroupSegments(groups, direction);
+  const children = [];
+  let childCount = 0;
+  const sizeProperty = getSizeProperty(direction);
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i];
+    if (i > 0) {
+      const previousSegment = segments[i - 1];
+      const beforeGroupId = previousSegment.groups.at(-1)?.id || 0;
+      const afterGroupId = segment.groups[0].id;
+      const sashId = create(beforeGroupId, afterGroupId);
+      children.push(...renderSash(direction, sashId));
+      childCount++;
+    }
+    if (segment.direction === undefined) {
+      children.push(...renderEditorGroup(segment.groups[0], segment.startIndex, splitButtonEnabled, sizeProperty));
+      childCount++;
+      continue;
+    }
+    const nestedDirection = segment.direction;
+    const nestedSizeProperty = getSizeProperty(nestedDirection);
+    const nestedChildCount = segment.groups.length + segment.groups.length - 1;
+    const nestedChildren = [];
+    let nestedCount = 0;
+    const segmentSize = getSegmentSize(segment);
+    for (let j = 0; j < segment.groups.length; j++) {
+      if (j > 0) {
+        const beforeGroupId = segment.groups[j - 1].id;
+        const afterGroupId = segment.groups[j].id;
+        const sashId = create(beforeGroupId, afterGroupId);
+        nestedChildren.push(...renderSash(nestedDirection, sashId));
+        nestedCount++;
+      }
+      const group = segment.groups[j];
+      const normalizedSize = Number((group.size / segmentSize * 100).toFixed(6));
+      nestedChildren.push(...renderEditorGroup({
+        ...group,
+        size: normalizedSize
+      }, segment.startIndex + j, splitButtonEnabled, nestedSizeProperty));
+      nestedCount++;
+    }
+    children.push({
+      childCount: nestedChildCount,
+      className: getContainerClassName(nestedDirection, segment.groups.length),
+      role: None$1,
+      style: `${sizeProperty}:${segmentSize}%;`,
+      type: Div
+    });
+    children.push(...nestedChildren);
+    childCount++;
+    childCount += nestedCount;
+  }
+  return {
+    childCount,
+    children
+  };
+};
+const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   const {
     direction,
     groups
   } = layout;
-  const sizeProperty = direction === Vertical ? 'height' : 'width';
+  const sizeProperty = getSizeProperty(direction);
   if (groups.length === 1) {
     return renderSingleEditorGroup(layout, splitButtonEnabled, sizeProperty);
   }
-  const children = [];
-  const isSplit = groups.length > 1;
-  const directionClassName = getDirectionClassName(direction, isSplit);
-  const editorGroupsContainerClassName = directionClassName ? `${EDITOR_GROUPS_CONTAINER} ${directionClassName}` : EDITOR_GROUPS_CONTAINER;
+  const editorGroupsContainerClassName = getContainerClassName(direction, groups.length);
   if (groups.length === 0) {
     return [{
       childCount: 1,
@@ -5113,22 +5335,10 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false, width = 0) =>
       type: Div
     }];
   }
-  let childCount = 0;
-  for (let i = 0; i < groups.length; i++) {
-    if (i > 0) {
-      // Insert sash between groups
-      const beforeGroupId = groups[i - 1].id;
-      const afterGroupId = groups[i].id;
-      const sashId = create(beforeGroupId, afterGroupId);
-      const offset = getSashOffset(layout, i, width);
-      const style = direction === Horizontal ? `left:${offset};` : `top:${offset};`;
-      children.push(...renderSash(direction, sashId, style));
-      childCount++;
-    }
-    const editorGroupDom = renderEditorGroup(groups[i], i, splitButtonEnabled, sizeProperty);
-    children.push(...editorGroupDom);
-    childCount++;
-  }
+  const {
+    childCount,
+    children
+  } = renderSegmentChildren(direction, groups, splitButtonEnabled);
   return [{
     childCount: 1,
     className: Main,
@@ -5146,13 +5356,12 @@ const renderItems = (oldState, newState) => {
     initial,
     layout,
     splitButtonEnabled,
-    uid,
-    width
+    uid
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled, width);
+  const dom = getMainAreaVirtualDom(layout, splitButtonEnabled);
   return [SetDom2, uid, dom];
 };
 

package/package.json

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