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

package/dist/mainAreaWorkerMain.js

@@ -87,17 +87,50 @@ const terminate = () => {
   globalThis.close();
 };
 
+const getGroupIndexById = (state, groupId) => {
+  return state.layout.groups.findIndex(group => group.id === groupId);
+};
+
+const redistributeSizesWithRounding = groups => {
+  return groups.map(group => ({
+    ...group,
+    size: Math.round(100 / groups.length)
+  }));
+};
+
+const withGroupsAndActiveGroup = (state, groups, activeGroupId) => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      activeGroupId,
+      groups
+    }
+  };
+};
+
+const withEmptyGroups = state => {
+  return withGroupsAndActiveGroup(state, [], undefined);
+};
+
+const withGroups = (state, groups) => {
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      groups
+    }
+  };
+};
+
 const closeTab = (state, groupId, tabId) => {
-  const {
-    layout
-  } = state;
   const {
     activeGroupId,
     groups
-  } = layout;
+  } = state.layout;
 
   // Find the group to close the tab from
-  const groupIndex = groups.findIndex(g => g.id === groupId);
+  const groupIndex = getGroupIndexById(state, groupId);
   if (groupIndex === -1) {
     return state;
   }
@@ -136,48 +169,23 @@ const closeTab = (state, groupId, tabId) => {
 
     // If there are remaining groups, redistribute sizes
     if (remainingGroups.length > 0) {
-      const redistributedGroups = remainingGroups.map(grp => ({
-        ...grp,
-        size: Math.round(100 / remainingGroups.length)
-      }));
+      const redistributedGroups = redistributeSizesWithRounding(remainingGroups);
       const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0]?.id : activeGroupId;
-      return {
-        ...state,
-        layout: {
-          ...layout,
-          activeGroupId: newActiveGroupId,
-          groups: redistributedGroups
-        }
-      };
+      return withGroupsAndActiveGroup(state, redistributedGroups, newActiveGroupId);
     }
 
     // If no remaining groups, return empty layout
-    return {
-      ...state,
-      layout: {
-        ...layout,
-        activeGroupId: undefined,
-        groups: []
-      }
-    };
+    return withEmptyGroups(state);
   }
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      groups: newGroups
-    }
-  };
+  return withGroups(state, newGroups);
+};
+
+const getFocusedGroup = state => {
+  return state.layout.groups.find(group => group.focused);
 };
 
 const closeActiveEditor = state => {
-  const {
-    layout
-  } = state;
-  const {
-    groups
-  } = layout;
-  const focusedGroup = groups.find(group => group.focused);
+  const focusedGroup = getFocusedGroup(state);
   if (!focusedGroup) {
     return state;
   }
@@ -191,16 +199,12 @@ const closeActiveEditor = state => {
 };
 
 const closeAll$1 = state => {
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: undefined,
-      groups: []
-    }
-  };
+  return withEmptyGroups(state);
 };
 
+const isFocused = group => {
+  return group.focused;
+};
 const closeFocusedTab = state => {
   const {
     layout
@@ -208,7 +212,7 @@ const closeFocusedTab = state => {
   const {
     groups
   } = layout;
-  const focusedGroup = groups.find(group => group.focused);
+  const focusedGroup = groups.find(isFocused);
   if (!focusedGroup) {
     return state;
   }
@@ -264,14 +268,15 @@ const closeOtherTabs = (state, groupId) => {
   };
 };
 
+const getGroupById = (state, groupId) => {
+  return state.layout.groups.find(group => group.id === groupId);
+};
+
 const closeTabsRight = (state, groupId) => {
-  const {
-    layout
-  } = state;
   const {
     groups
-  } = layout;
-  const group = groups.find(g => g.id === groupId);
+  } = state.layout;
+  const group = getGroupById(state, groupId);
   if (!group) {
     return state;
   }
@@ -300,13 +305,7 @@ const closeTabsRight = (state, groupId) => {
     }
     return g;
   });
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      groups: newGroups
-    }
-  };
+  return withGroups(state, newGroups);
 };
 
 const None$1 = 'none';
@@ -1693,6 +1692,8 @@ const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
       direction: 'horizontal',
       groups: []
     },
+    maxOpenEditorGroups: Number.POSITIVE_INFINITY,
+    maxOpenEditors: Number.POSITIVE_INFINITY,
     platform,
     splitButtonEnabled: false,
     tabHeight,
@@ -2273,34 +2274,31 @@ const handleClick = async (state, name) => {
   return state;
 };
 
+const redistributeSizesWithRemainder = groups => {
+  const baseSize = Math.floor(100 / groups.length);
+  const remainder = 100 % groups.length;
+  return groups.map((group, index) => ({
+    ...group,
+    size: baseSize + (index === groups.length - 1 ? remainder : 0)
+  }));
+};
+
 const closeEditorGroup$1 = (state, groupId) => {
-  const {
-    layout
-  } = state;
+  if (Number.isNaN(groupId)) {
+    return state;
+  }
   const {
     activeGroupId,
     groups
-  } = layout;
-  const groupIndex = groups.findIndex(group => group.id === groupId);
+  } = state.layout;
+  const groupIndex = getGroupIndexById(state, groupId);
   if (groupIndex === -1 || groups.length <= 1) {
     return state;
   }
   const remainingGroups = groups.filter(group => group.id !== groupId);
-  const baseSize = Math.floor(100 / remainingGroups.length);
-  const remainder = 100 % remainingGroups.length;
-  const redistributedGroups = remainingGroups.map((group, index) => ({
-    ...group,
-    size: baseSize + (index === remainingGroups.length - 1 ? remainder : 0)
-  }));
+  const redistributedGroups = redistributeSizesWithRemainder(remainingGroups);
   const newActiveGroupId = activeGroupId === groupId ? remainingGroups[0].id : activeGroupId;
-  return {
-    ...state,
-    layout: {
-      ...layout,
-      activeGroupId: newActiveGroupId,
-      groups: redistributedGroups
-    }
-  };
+  return withGroupsAndActiveGroup(state, redistributedGroups, newActiveGroupId);
 };
 
 const getActiveGroup = (groups, activeGroupId) => {
@@ -2914,9 +2912,7 @@ const handleClickAction = async (state, action, rawGroupId) => {
     case 'close-group':
       if (rawGroupId) {
         const groupId = Number.parseInt(rawGroupId, 10);
-        if (!Number.isNaN(groupId)) {
-          return closeEditorGroup$1(state, groupId);
-        }
+        return closeEditorGroup$1(state, groupId);
       }
       return state;
     case 'retry-open':
@@ -3206,18 +3202,22 @@ const parse = sashId => {
   };
 };
 
-const handleSashPointerDown = async (state, sashId, clientXRaw, clientYRaw) => {
+const handleSashPointerDown = async (state, sashId, clientX, clientY) => {
   const parsed = parse(sashId);
   if (!parsed) {
     return state;
   }
-  const beforeGroup = state.layout.groups.find(group => group.id === parsed.beforeGroupId);
-  const afterGroup = state.layout.groups.find(group => group.id === parsed.afterGroupId);
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const beforeGroup = groups.find(group => group.id === parsed.beforeGroupId);
+  const afterGroup = groups.find(group => group.id === parsed.afterGroupId);
   if (!beforeGroup || !afterGroup) {
     return state;
   }
-  const clientX = Number.parseFloat(clientXRaw);
-  const clientY = Number.parseFloat(clientYRaw);
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
@@ -3242,15 +3242,13 @@ const clamp = (value, min, max) => {
 const round = value => {
   return Math.round(value * 100) / 100;
 };
-const handleSashPointerMove = async (state, clientXRaw, clientYRaw) => {
+const handleSashPointerMove = async (state, clientX, clientY) => {
   const {
     sashDrag
   } = state;
   if (!sashDrag) {
     return state;
   }
-  const clientX = Number.parseFloat(clientXRaw);
-  const clientY = Number.parseFloat(clientYRaw);
   if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
     return state;
   }
@@ -3288,7 +3286,10 @@ const handleSashPointerMove = async (state, clientXRaw, clientYRaw) => {
 };
 
 const handleSashPointerUp = async state => {
-  if (!state.sashDrag) {
+  const {
+    sashDrag
+  } = state;
+  if (!sashDrag) {
     return state;
   }
   return {
@@ -3511,14 +3512,26 @@ const getViewletModuleIds = async layout => {
 };
 
 const updateTabs = (state, editorUids) => {
-  const updatedGroups = state.layout.groups.map(group => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const updatedGroups = groups.map(group => {
+    const {
+      tabs
+    } = group;
     return {
       ...group,
-      tabs: group.tabs.map(tab => {
-        if (editorUids[tab.id]) {
+      tabs: tabs.map(tab => {
+        const {
+          id
+        } = tab;
+        if (editorUids[id]) {
           return {
             ...tab,
-            editorUid: editorUids[tab.id]
+            editorUid: editorUids[id]
           };
         }
         return tab;
@@ -3528,7 +3541,7 @@ const updateTabs = (state, editorUids) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       groups: updatedGroups
     }
   };
@@ -3761,6 +3774,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;
@@ -4294,8 +4328,8 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
   return [{
     childCount: 1,
     className: EmptyGroupCloseButton,
-    'data-action': 'close-group',
     'data-groupId': String(group.id),
+    name: 'close-group',
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
@@ -4331,40 +4365,51 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizePr
   }, ...renderEditor(activeTab)];
 };
 
-const renderSash = (direction, sashId) => {
-  return {
+const renderSash = (direction, sashId, style) => {
+  return [{
     childCount: 0,
-    className: direction === 'horizontal' ? 'SashVertical' : 'SashHorizontal',
+    className: direction === 'horizontal' ? 'Sash SashVertical' : 'Sash SashHorizontal',
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
     onPointerMove: HandleSashPointerMove,
     onPointerUp: HandleSashPointerUp,
+    style,
     type: Div
-  };
+  }];
+};
+
+const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty) => {
+  return [{
+    childCount: 1,
+    className: Main,
+    type: Div
+  }, ...renderEditorGroup(layout.groups[0], 0, splitButtonEnabled, sizeProperty)];
 };
 
 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)];
+    return renderSingleEditorGroup(layout, 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++) {
+  let sashOffset = 0;
+  const {
+    groups
+  } = layout;
+  for (let i = 0; i < groups.length; i++) {
+    sashOffset += groups[i].size;
     if (i > 0) {
       // Insert sash between groups
-      const beforeGroupId = layout.groups[i - 1].id;
-      const afterGroupId = layout.groups[i].id;
+      const beforeGroupId = groups[i - 1].id;
+      const afterGroupId = groups[i].id;
       const sashId = create(beforeGroupId, afterGroupId);
-      children.push(renderSash(layout.direction, sashId));
+      const style = layout.direction === 'horizontal' ? `left:${sashOffset - groups[i].size}%;` : `top:${sashOffset - layout.groups[i].size}%;`;
+      children.push(...renderSash(layout.direction, sashId, style));
     }
-    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, sizeProperty));
+    children.push(...renderEditorGroup(groups[i], i, splitButtonEnabled, sizeProperty));
   }
   return [{
     childCount: 1,
@@ -4456,7 +4501,9 @@ const renderEventListeners = () => {
     params: ['handleHeaderDoubleClick', EventTargetClassName, 'event.target.dataset.groupId']
   }, {
     name: HandleSashPointerDown,
-    params: ['handleSashPointerDown', 'event.target.dataset.sashId', ClientX, ClientY]
+    params: ['handleSashPointerDown', 'event.target.dataset.sashId', ClientX, ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleSashPointerMove, HandleSashPointerUp]
   }, {
     name: HandleSashPointerMove,
     params: ['handleSashPointerMove', ClientX, ClientY]

package/package.json

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