@lvce-editor/main-area-worker 9.31.0 → 9.32.1

package/dist/mainAreaWorkerMain.js

@@ -1546,6 +1546,9 @@ const create$3 = rpcId => {
 };
 
 const None$1 = 'none';
+const Tab$1 = 'tab';
+const TabList = 'tablist';
+const ToolBar = 'toolbar';
 
 const Audio = 0;
 const Button$2 = 1;
@@ -1930,17 +1933,72 @@ const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) =>
   return getTitle$1(editorUid);
 };
 
+const getActiveFileUri = state => {
+  const {
+    activeGroupId,
+    groups
+  } = state.layout;
+  const activeGroup = groups.find(group => group.id === activeGroupId);
+  const activeTab = activeGroup?.tabs.find(tab => tab.id === activeGroup.activeTabId);
+  if (!activeTab) {
+    return '';
+  }
+  if (typeof activeTab.uri === 'string') {
+    return activeTab.uri;
+  }
+  const {
+    editorInput
+  } = activeTab;
+  return editorInput && 'uri' in editorInput ? editorInput.uri : '';
+};
+
+const notifyActiveEditorChange = async (oldState, newState) => {
+  const oldUri = getActiveFileUri(oldState);
+  const newUri = getActiveFileUri(newState);
+  if (oldUri === newUri) {
+    return;
+  }
+  try {
+    await invoke('Viewlet.executeViewletCommand', 'Problems', 'handleActiveEditorChange', newUri);
+  } catch (error) {
+    console.warn('Failed to notify Problems view about active editor change', error);
+  }
+};
+
+const withActiveEditorChange = fn => {
+  return async (state, ...args) => {
+    const newState = await fn(state, ...args);
+    await notifyActiveEditorChange(state, newState);
+    return newState;
+  };
+};
+const withActiveEditorChangeAsync = fn => {
+  return async (context, ...args) => {
+    const oldState = context.getState();
+    await fn(context, ...args);
+    const newState = context.getState();
+    await notifyActiveEditorChange(oldState, newState);
+  };
+};
+
+const registry = create$f();
 const {
   get,
   getCommandIds,
   getKeys: getKeys$1,
   registerCommands,
   set,
-  wrapAsyncCommand,
-  wrapGetter,
-  wrapSerialAsyncCommand,
-  wrapSerialCommand
-} = create$f();
+  wrapGetter
+} = registry;
+const wrapAsyncCommand = fn => {
+  return registry.wrapAsyncCommand(withActiveEditorChangeAsync(fn));
+};
+const wrapSerialAsyncCommand = fn => {
+  return registry.wrapSerialAsyncCommand(withActiveEditorChangeAsync(fn));
+};
+const wrapSerialCommand = fn => {
+  return registry.wrapSerialCommand(withActiveEditorChange(fn));
+};
 
 const create$2 = () => {
   return Math.random();
@@ -4718,6 +4776,155 @@ const handleResize = async (state, dimensions) => {
   return allResizeCommands;
 };
 
+const offsetsMatch = (first, second) => {
+  return Math.abs(first - second) < 1e-6;
+};
+const getSashCorner = layout => {
+  const segments = getGroupSegments(layout.groups, layout.direction);
+  if (segments.length !== 2) {
+    return undefined;
+  }
+  const [firstSegment, secondSegment] = segments;
+  if (firstSegment.direction === undefined || secondSegment.direction !== firstSegment.direction || firstSegment.groups.length !== 2 || secondSegment.groups.length !== 2) {
+    return undefined;
+  }
+  const firstSegmentSize = getSegmentSize(firstSegment);
+  const secondSegmentSize = getSegmentSize(secondSegment);
+  const totalSize = firstSegmentSize + secondSegmentSize;
+  if (!firstSegmentSize || !secondSegmentSize || !totalSize) {
+    return undefined;
+  }
+  const firstNestedOffset = firstSegment.groups[0].size / firstSegmentSize * 100;
+  const secondNestedOffset = secondSegment.groups[0].size / secondSegmentSize * 100;
+  if (!offsetsMatch(firstNestedOffset, secondNestedOffset)) {
+    return undefined;
+  }
+  const rootOffset = firstSegmentSize / totalSize * 100;
+  if (layout.direction === Horizontal) {
+    return {
+      leftOffset: rootOffset,
+      topOffset: firstNestedOffset,
+      xAfterGroupIds: secondSegment.groups.map(group => group.id),
+      xBeforeGroupIds: firstSegment.groups.map(group => group.id),
+      yAfterGroupIds: [firstSegment.groups[1].id, secondSegment.groups[1].id],
+      yBeforeGroupIds: [firstSegment.groups[0].id, secondSegment.groups[0].id]
+    };
+  }
+  return {
+    leftOffset: firstNestedOffset,
+    topOffset: rootOffset,
+    xAfterGroupIds: [firstSegment.groups[1].id, secondSegment.groups[1].id],
+    xBeforeGroupIds: [firstSegment.groups[0].id, secondSegment.groups[0].id],
+    yAfterGroupIds: secondSegment.groups.map(group => group.id),
+    yBeforeGroupIds: firstSegment.groups.map(group => group.id)
+  };
+};
+
+const handleSashCornerPointerDown = async (state, clientX, clientY) => {
+  if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+    return state;
+  }
+  const sashCorner = getSashCorner(state.layout);
+  if (!sashCorner) {
+    return state;
+  }
+  return {
+    ...state,
+    sashCornerDrag: {
+      groupSizes: state.layout.groups.map(group => ({
+        id: group.id,
+        size: group.size
+      })),
+      startClientX: clientX,
+      startClientY: clientY,
+      xAfterGroupIds: sashCorner.xAfterGroupIds,
+      xBeforeGroupIds: sashCorner.xBeforeGroupIds,
+      yAfterGroupIds: sashCorner.yAfterGroupIds,
+      yBeforeGroupIds: sashCorner.yBeforeGroupIds
+    }
+  };
+};
+
+const clamp = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+
+const getMinGroupSizePercent = (axisSize, minGroupSizePx) => {
+  if (!axisSize) {
+    return 0;
+  }
+  return minGroupSizePx / axisSize * 100;
+};
+
+const round = value => {
+  return Math.round(value * 100) / 100;
+};
+
+const sumGroupSizes = (groupSizes, groupIds) => {
+  return groupSizes.reduce((total, group) => total + (groupIds.includes(group.id) ? group.size : 0), 0);
+};
+const getBeforeSize = (startSize, deltaPx, axisSize, minSizePx, totalSize) => {
+  let minSize = getMinGroupSizePercent(axisSize, minSizePx);
+  if (2 * minSize > totalSize) {
+    minSize = totalSize / 2;
+  }
+  const deltaSize = deltaPx / axisSize * totalSize;
+  return clamp(startSize + deltaSize, minSize, totalSize - minSize);
+};
+const handleSashCornerPointerMove = async (state, clientX, clientY) => {
+  const {
+    height,
+    sashCornerDrag,
+    width
+  } = state;
+  if (!sashCornerDrag || !width || !height || !Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+    return state;
+  }
+  const {
+    groupSizes,
+    startClientX,
+    startClientY,
+    xBeforeGroupIds,
+    yBeforeGroupIds
+  } = sashCornerDrag;
+  const totalSize = groupSizes.reduce((total, group) => total + group.size, 0);
+  if (!totalSize) {
+    return state;
+  }
+  const xBeforeStartSize = sumGroupSizes(groupSizes, xBeforeGroupIds);
+  const yBeforeStartSize = sumGroupSizes(groupSizes, yBeforeGroupIds);
+  const xBeforeSize = getBeforeSize(xBeforeStartSize, clientX - startClientX, width, state.minGroupWidthPx, totalSize);
+  const yBeforeSize = getBeforeSize(yBeforeStartSize, clientY - startClientY, height, state.minGroupHeightPx, totalSize);
+  const xAfterSize = totalSize - xBeforeSize;
+  const yAfterSize = totalSize - yBeforeSize;
+  const xBeforeGroupIdSet = new Set(xBeforeGroupIds);
+  const yBeforeGroupIdSet = new Set(yBeforeGroupIds);
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      groups: state.layout.groups.map(group => {
+        const xSize = xBeforeGroupIdSet.has(group.id) ? xBeforeSize : xAfterSize;
+        const ySize = yBeforeGroupIdSet.has(group.id) ? yBeforeSize : yAfterSize;
+        return {
+          ...group,
+          size: round(xSize * ySize / totalSize)
+        };
+      })
+    }
+  };
+};
+
+const handleSashCornerPointerUp = async state => {
+  if (!state.sashCornerDrag) {
+    return state;
+  }
+  return {
+    ...state,
+    sashCornerDrag: undefined
+  };
+};
+
 const create = (beforeGroupId, afterGroupId) => {
   return `${beforeGroupId}:${afterGroupId}`;
 };
@@ -4773,21 +4980,6 @@ const handleSashPointerDown = async (state, sashId, clientX, clientY) => {
   };
 };
 
-const clamp = (value, min, max) => {
-  return Math.min(max, Math.max(min, value));
-};
-
-const getMinGroupSizePercent = (axisSize, minGroupSizePx) => {
-  if (!axisSize) {
-    return 0;
-  }
-  return minGroupSizePx / axisSize * 100;
-};
-
-const round = value => {
-  return Math.round(value * 100) / 100;
-};
-
 const handleSashPointerMove = async (state, clientX, clientY) => {
   const {
     height,
@@ -5746,6 +5938,27 @@ const getCss = (layout, width = 0) => {
 }`, `.SashBorderVertical {
   width: 1px;
   height: 100%;
+}`, `.SashCorner {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: all-scroll;
+  transform: translate(-50%, -50%);
+}`, `.SashCorner::after {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background: var(--SashBorder, gray);
+}`, `.SashCorner:hover::after,
+.SashCorner:active::after {
+  background: var(--SashHoverBorder, #3d5252);
 }`, `.EditorGroup {
   min-width: 250px;
   width: var(--EditorGroupWidth, auto);
@@ -5753,6 +5966,13 @@ const getCss = (layout, width = 0) => {
 }`];
   if (layout) {
     rules.push(...getEditorGroupCss(layout), ...getSashCss(layout, width));
+    const sashCorner = getSashCorner(layout);
+    if (sashCorner) {
+      rules.push(`.SashCorner {
+  left: ${sashCorner.leftOffset}%;
+  top: ${sashCorner.topOffset}%;
+}`);
+    }
   }
   const css = rules.join('\n');
   return css;
@@ -6049,6 +6269,9 @@ const HandleSashPointerDown = 16;
 const HandleSashPointerMove = 17;
 const HandleSashPointerUp = 18;
 const HandleDoubleClick = 19;
+const HandleSashCornerPointerDown = 20;
+const HandleSashCornerPointerMove = 21;
+const HandleSashCornerPointerUp = 22;
 
 const renderContent = content => {
   return [{
@@ -6064,7 +6287,7 @@ const renderContent = content => {
 
 const renderError = errorMessage => {
   return [{
-    childCount: 2,
+    childCount: 1,
     className: TextEditorError,
     type: Div
   }, {
@@ -6099,7 +6322,7 @@ const renderLoading = () => {
 const renderViewletReference = tab => {
   return [{
     childCount: 0,
-    type: 100,
+    type: Reference,
     // Reference node type - frontend will append the component at this position
     uid: tab.editorUid
   }];
@@ -6217,7 +6440,7 @@ const renderTab = (tab, isActive, tabIndex, groupIndex) => {
     onContextMenu: HandleTabContextMenu,
     onDblClick: HandleDoubleClick,
     onMouseDown: HandleClickTab,
-    role: 'tab',
+    role: Tab$1,
     title: tab.uriTitle || tab.uri || tab.title,
     type: Div
   }, ...renderTabIcon(tab), {
@@ -6231,7 +6454,7 @@ const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
   return [{
     childCount: tabsChildCount,
     className: MainTabs,
-    role: 'tablist',
+    role: TabList,
     type: Div
   }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
 };
@@ -6270,7 +6493,7 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
   if (splitButtonEnabled) {
     buttons.push({
       childCount: 1,
-      className: EditorGroupActionButton + ' ' + SplitEditorGroupButton,
+      className: mergeClassNames(EditorGroupActionButton, SplitEditorGroupButton),
       'data-action': SplitRight$1,
       'data-groupId': String(group.id),
       name: SplitRight$1,
@@ -6283,7 +6506,7 @@ const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
     childCount: buttons.length / 2,
     // Each button has 2 nodes (button + text)
     className: EditorGroupActions,
-    role: 'toolbar',
+    role: ToolBar,
     type: Div
   }, ...buttons];
 };
@@ -6336,6 +6559,8 @@ const renderWaterMark = groupId => {
   }];
 };
 
+const Focusable = 0;
+
 const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = true) => {
   const closeButtonDom = closeButtonEnabled ? renderEmptyGroupCloseButton(group) : [];
   return [{
@@ -6344,7 +6569,7 @@ const renderEmptyEditorGroup = (group, groupIndex, style, closeButtonEnabled = t
     'data-groupId': String(group.id),
     onContextMenu: HandleContextMenu,
     style,
-    tabIndex: 0,
+    tabIndex: Focusable,
     type: Div
   }, ...closeButtonDom, ...renderWaterMark(group.id)];
 };
@@ -6383,7 +6608,7 @@ const renderSash = (direction, sashId) => {
     className: getSashClassName(direction),
     'data-sashId': sashId,
     onPointerDown: HandleSashPointerDown,
-    role: 'none',
+    role: None$1,
     type: Button$2
   }, {
     childCount: 0,
@@ -6392,6 +6617,16 @@ const renderSash = (direction, sashId) => {
   }];
 };
 
+const renderSashCorner = () => {
+  return {
+    childCount: 0,
+    className: 'SashCorner',
+    onPointerDown: HandleSashCornerPointerDown,
+    role: None$1,
+    type: Button$2
+  };
+};
+
 const renderSingleEditorGroup = (layout, splitButtonEnabled, sizeProperty = 'width') => {
   return [{
     childCount: 1,
@@ -6499,16 +6734,18 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
     childCount,
     children
   } = renderSegmentChildren(direction, groups, splitButtonEnabled);
+  const sashCorner = getSashCorner(layout);
+  const sashCornerChildren = sashCorner ? [renderSashCorner()] : [];
   return [{
     childCount: 1,
     className: Main,
     type: Div
   }, {
-    childCount,
+    childCount: childCount + sashCornerChildren.length,
     className: editorGroupsContainerClassName,
     role: None$1,
     type: Div
-  }, ...children];
+  }, ...children, ...sashCornerChildren];
 };
 
 const renderItems = (oldState, newState) => {
@@ -6616,6 +6853,17 @@ const renderEventListeners = () => {
   }, {
     name: HandleSashPointerUp,
     params: ['handleSashPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleSashCornerPointerDown,
+    params: ['handleSashCornerPointerDown', ClientX, ClientY],
+    preventDefault: true,
+    trackPointerEvents: [HandleSashCornerPointerMove, HandleSashCornerPointerUp]
+  }, {
+    name: HandleSashCornerPointerMove,
+    params: ['handleSashCornerPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleSashCornerPointerUp,
+    params: ['handleSashCornerPointerUp', ClientX, ClientY]
   }];
 };
 
@@ -7199,6 +7447,9 @@ const commandMap = {
   'MainArea.handleModifiedStatusChange': wrapAsyncCommand(handleModifiedStatusChangeWithContext),
   'MainArea.handleResize': wrapGetter(handleResize),
   // TODO would need to have a function that returns newstate as well as commands
+  'MainArea.handleSashCornerPointerDown': wrapSerialCommand(handleSashCornerPointerDown),
+  'MainArea.handleSashCornerPointerMove': wrapSerialCommand(handleSashCornerPointerMove),
+  'MainArea.handleSashCornerPointerUp': wrapSerialCommand(handleSashCornerPointerUp),
   'MainArea.handleSashPointerDown': wrapSerialCommand(handleSashPointerDown),
   'MainArea.handleSashPointerMove': wrapSerialCommand(handleSashPointerMove),
   'MainArea.handleSashPointerUp': wrapSerialCommand(handleSashPointerUp),

package/package.json

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