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

package/dist/mainAreaWorkerMain.js

@@ -88,7 +88,13 @@ const terminate = () => {
 };
 
 const getGroupIndexById = (state, groupId) => {
-  return state.layout.groups.findIndex(group => group.id === groupId);
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  return groups.findIndex(group => group.id === groupId);
 };
 
 const redistributeSizesWithRounding = groups => {
@@ -181,7 +187,13 @@ const closeTab = (state, groupId, tabId) => {
 };
 
 const getFocusedGroup = state => {
-  return state.layout.groups.find(group => group.focused);
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  return groups.find(group => group.focused);
 };
 
 const closeActiveEditor = state => {
@@ -273,9 +285,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;
@@ -1666,6 +1681,7 @@ const copyPath$1 = async (state, path) => {
 
 const copyRelativePath$1 = async (state, path) => {
   string(path);
+  // TODO use clipboard worker
   const relativePath = await invoke('Workspace.pathBaseName', path);
   await invoke('ClipBoard.writeText', relativePath);
   return state;
@@ -1707,7 +1723,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 +2303,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;
@@ -2338,6 +2357,11 @@ const handleClickTogglePreview = async state => {
   return state;
 };
 
+const CloseGroup = 'close-group';
+const RetryOpen = 'retry-open';
+const SplitRight = 'split-right';
+const TogglePreview$1 = 'toggle-preview';
+
 const getBasename$1 = uri => {
   const lastSlashIndex = uri.lastIndexOf('/');
   if (lastSlashIndex === -1) {
@@ -2376,6 +2400,7 @@ const createEmptyGroup = (state, uri, requestId) => {
     icon: '',
     id: tabId,
     isDirty: false,
+    isPreview: false,
     language: '',
     loadingState: 'loading',
     title,
@@ -2400,8 +2425,12 @@ const createEmptyGroup = (state, uri, requestId) => {
 };
 
 const openTab = (state, groupId, tab) => {
-  const newTab = 'id' in tab && tab.id !== undefined ? tab : {
+  const normalizedTab = {
     ...tab,
+    isPreview: tab.isPreview ?? false
+  };
+  const newTab = 'id' in normalizedTab && normalizedTab.id !== undefined ? normalizedTab : {
+    ...normalizedTab,
     id: create$1()
   };
   const {
@@ -2459,6 +2488,7 @@ const ensureActiveGroup = (state, uri) => {
       icon: '',
       id: tabId,
       isDirty: false,
+      isPreview: false,
       language: '',
       loadingState: 'loading',
       title,
@@ -2912,28 +2942,35 @@ 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;
   }
   switch (action) {
-    case 'close-group':
+    case CloseGroup:
       if (rawGroupId) {
         const groupId = Number.parseInt(rawGroupId, 10);
         return closeEditorGroup$1(state, groupId);
       }
       return state;
-    case 'retry-open':
+    case RetryOpen:
       return retryOpen(state);
-    case 'split-right':
+    case SplitRight:
       return splitEditorGroup$1(state, activeGroup.id, Right);
-    case 'toggle-preview':
+    case TogglePreview$1:
       return handleClickTogglePreview(state);
     default:
       return state;
@@ -3072,6 +3109,7 @@ const newFile = async state => {
     icon: '',
     id: tabId,
     isDirty: false,
+    isPreview: false,
     language: 'plaintext',
     loadingState: 'loading',
     title: 'Untitled',
@@ -3249,16 +3287,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 +3315,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 +3352,8 @@ const handleSashPointerMove = async (state, clientX, clientY) => {
   return {
     ...state,
     layout: {
-      ...state.layout,
-      groups
+      ...layout,
+      groups: newGroups
     }
   };
 };
@@ -3408,10 +3467,13 @@ const handleUriChange = async (state, oldUri, newUri) => {
 };
 
 const handleWorkspaceChange = state => {
+  const {
+    layout
+  } = state;
   return {
     ...state,
     layout: {
-      ...state.layout,
+      ...layout,
       activeGroupId: undefined,
       groups: []
     }
@@ -3441,7 +3503,7 @@ const initialize = async () => {
 };
 
 const isValidTab = tab => {
-  return tab && typeof tab.id === 'number' && typeof tab.title === 'string' && typeof tab.isDirty === 'boolean' && typeof tab.editorUid === 'number' && typeof tab.icon === 'string' && (tab.editorType === 'text' || tab.editorType === 'custom');
+  return tab && typeof tab.id === 'number' && typeof tab.title === 'string' && typeof tab.isDirty === 'boolean' && typeof tab.isPreview === 'boolean' && typeof tab.editorUid === 'number' && typeof tab.icon === 'string' && (tab.editorType === 'text' || tab.editorType === 'custom');
 };
 
 const isValidEditorGroup = group => {
@@ -3478,23 +3540,31 @@ const tryRestoreLayout = savedState => {
   const {
     layout
   } = savedState;
-  if (!isValidMainAreaLayout(layout)) {
+  if (!layout || typeof layout !== 'object') {
+    return undefined;
+  }
+  const rawLayout = layout;
+  if (!Array.isArray(rawLayout.groups)) {
     return undefined;
   }
 
   // Normalize all tabs to have editorUid: -1 so SelectTab will create viewlets
   // Mark all restored tabs as not dirty
   const normalizedLayout = {
-    ...layout,
-    groups: layout.groups.map(group => ({
+    ...rawLayout,
+    groups: rawLayout.groups.map(group => ({
       ...group,
-      tabs: group.tabs.map(tab => ({
+      tabs: Array.isArray(group?.tabs) ? group.tabs.map(tab => ({
         ...tab,
         editorUid: -1,
-        isDirty: false
-      }))
+        isDirty: false,
+        isPreview: typeof tab?.isPreview === 'boolean' ? tab.isPreview : false
+      })) : []
     }))
   };
+  if (!isValidMainAreaLayout(normalizedLayout)) {
+    return undefined;
+  }
   return normalizedLayout;
 };
 
@@ -3514,7 +3584,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) {
@@ -3780,6 +3853,28 @@ const getMenuEntries = async (state, props) => {
   }
 };
 
+const openUris = async (state, uris) => {
+  if (uris.length === 0) {
+    return state;
+  }
+  if (uris.length === 1) {
+    return openUri(state, uris[0]);
+  }
+  let currentState = await openUri(state, uris[0]);
+  const firstTab = findTabByUri(currentState, uris[0]);
+  for (const uri of uris.slice(1)) {
+    const existingTab = findTabByUri(currentState, uri);
+    if (existingTab) {
+      continue;
+    }
+    currentState = ensureActiveGroup(currentState, uri);
+  }
+  if (!firstTab) {
+    return currentState;
+  }
+  return switchTab(currentState, firstTab.groupId, firstTab.tab.id);
+};
+
 const refresh = state => {
   return {
     ...state
@@ -3789,26 +3884,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;
@@ -4149,7 +4227,8 @@ const renderError = errorMessage => {
   }, text(`Error: ${errorMessage}`), {
     childCount: 1,
     className: `${Button} ${ButtonSecondary}`,
-    'data-action': 'retry-open',
+    'data-action': RetryOpen,
+    name: RetryOpen,
     onClick: HandleClickAction,
     type: Button$2
   }, text('Retry')];
@@ -4293,9 +4372,9 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
       ariaLabel: 'Preview',
       childCount: 1,
       className: IconButton,
-      'data-action': 'toggle-preview',
+      'data-action': TogglePreview$1,
       'data-groupId': String(group.id),
-      name: 'toggle-preview',
+      name: TogglePreview$1,
       onClick: HandleClickAction,
       title: togglePreview(),
       type: Button$2
@@ -4309,8 +4388,9 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
     buttons.push({
       childCount: 1,
       className: EditorGroupActionButton + ' ' + SplitEditorGroupButton,
-      'data-action': 'split-right',
+      'data-action': SplitRight,
       'data-groupId': String(group.id),
+      name: SplitRight,
       onClick: HandleClickAction,
       title: splitEditorGroup(),
       type: Button$2
@@ -4343,20 +4423,32 @@ const renderEmptyGroupCloseButton = (group, groupIndex) => {
     childCount: 1,
     className: EmptyGroupCloseButton,
     'data-groupId': String(group.id),
-    name: 'close-group',
+    name: CloseGroup,
     onClick: HandleClickAction,
     title: closeEditorGroup(),
     type: Button$2
   }, 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 +4471,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 +4507,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 +4517,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
@@ -4685,6 +4783,7 @@ const commandMap = {
   'MainArea.loadContent': wrapCommand(loadContent),
   'MainArea.newFile': wrapCommand(newFile),
   'MainArea.openUri': wrapCommand(openUri),
+  'MainArea.openUris': wrapCommand(openUris),
   'MainArea.refresh': wrapCommand(refresh),
   'MainArea.render2': render2,
   'MainArea.renderEventListeners': renderEventListeners,

package/package.json

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