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

package/dist/mainAreaWorkerMain.js

@@ -335,6 +335,7 @@ const ExtensionHostWorker = 44;
 const IconThemeWorker = 7009;
 const RendererWorker = 1;
 
+const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
@@ -1486,7 +1487,7 @@ const create$j = async ({
   send
 }) => {
   return createSharedLazyRpc(() => {
-    return create$3({
+    return create$3$1({
       commandMap,
       isMessagePortOpen,
       send
@@ -1514,7 +1515,7 @@ const create$5 = async ({
   messagePort.start();
   return rpc;
 };
-const create$3 = async ({
+const create$3$1 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -1532,7 +1533,7 @@ const create$3 = async ({
 };
 const TransferMessagePortRpcParent = {
   __proto__: null,
-  create: create$3
+  create: create$3$1
 };
 const create$2$1 = async ({
   commandMap
@@ -1580,7 +1581,7 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$2 = rpcId => {
+const create$3 = rpcId => {
   return {
     async dispose() {
       const rpc = get$1(rpcId);
@@ -1618,16 +1619,16 @@ const create$2 = rpcId => {
 
 const {
   set: set$4
-} = create$2(ClipBoardWorker);
+} = create$3(ClipBoardWorker);
 
 const {
   set: set$3
-} = create$2(ExtensionHostWorker);
+} = create$3(ExtensionHostWorker);
 
 const {
   invoke: invoke$1,
   set: set$2
-} = create$2(IconThemeWorker);
+} = create$3(IconThemeWorker);
 const getIcons = async iconRequests => {
   // @ts-ignore
   return invoke$1('IconTheme.getIcons', iconRequests);
@@ -1637,7 +1638,7 @@ const {
   invoke,
   invokeAndTransfer,
   set: set$1
-} = create$2(RendererWorker);
+} = create$3(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
@@ -1680,7 +1681,7 @@ const {
   wrapGetter
 } = create$6();
 
-const create$1 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight = 35) => {
+const create$2 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight = 35) => {
   const state = {
     assetDir,
     fileIconCache: {},
@@ -1704,15 +1705,20 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir, tabHeight =
   set(uid, state, state);
 };
 
+const isEqual$1 = (oldState, newState) => {
+  return oldState.width === newState.width && oldState.height === newState.height;
+};
+
 const isEqual = (oldState, newState) => {
   return oldState.layout === newState.layout;
 };
 
 const RenderItems = 4;
+const RenderCss = 10;
 const RenderIncremental = 11;
 
-const modules = [isEqual];
-const numbers = [RenderIncremental];
+const modules = [isEqual, isEqual$1];
+const numbers = [RenderIncremental, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1740,11 +1746,11 @@ const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) =>
 
 const handleAttach = async command => {
   // TODO find a better way to append editors
-  const parentNodeSelector = '.editor-groups-container';
+  const parentNodeSelector = '.editor-groups-container, .EditorGroup';
   await invoke('Layout.attachViewlet', parentNodeSelector, command.instanceId);
 };
 
-const create = () => {
+const create$1 = () => {
   return Math.random();
 };
 
@@ -1821,7 +1827,7 @@ const loadTabContentAsync = async (tabId, path, requestId, getLatestState) => {
     }
 
     // Assign editorUid if tab doesn't have one yet
-    const editorUid = latestTab.editorUid === -1 ? create() : latestTab.editorUid;
+    const editorUid = latestTab.editorUid === -1 ? create$1() : latestTab.editorUid;
     return updateTab(latestState, tabId, {
       editorUid,
       errorMessage: undefined,
@@ -1861,7 +1867,7 @@ const createViewletForTab = (state, tabId, viewletModuleId, bounds) => {
   if (tab.editorUid !== -1 || tab.loadingState === 'loading' || tab.loadingState === 'loaded') {
     return state;
   }
-  const editorUid = create();
+  const editorUid = create$1();
   const newState = updateTab(state, tabId, {
     editorUid
   });
@@ -2267,7 +2273,7 @@ const handleClick = async (state, name) => {
   return state;
 };
 
-const closeEditorGroup = (state, groupId) => {
+const closeEditorGroup$1 = (state, groupId) => {
   const {
     layout
   } = state;
@@ -2361,10 +2367,10 @@ const createEmptyGroup = (state, uri, requestId) => {
   const {
     groups
   } = layout;
-  const groupId = create();
+  const groupId = create$1();
   const title = getLabel(uri);
-  const tabId = create();
-  const editorUid = create();
+  const tabId = create$1();
+  const editorUid = create$1();
   const newTab = {
     editorType: 'text',
     editorUid,
@@ -2398,7 +2404,7 @@ const createEmptyGroup = (state, uri, requestId) => {
 const openTab = (state, groupId, tab) => {
   const newTab = 'id' in tab && tab.id !== undefined ? tab : {
     ...tab,
-    id: create()
+    id: create$1()
   };
   const {
     layout
@@ -2446,8 +2452,8 @@ const ensureActiveGroup = (state, uri) => {
   if (activeGroup) {
     // Create a new tab with the URI in the active group
     const title = getLabel(uri);
-    const tabId = create();
-    const editorUid = create();
+    const tabId = create$1();
+    const editorUid = create$1();
     const newTab = {
       editorType: 'text',
       editorUid,
@@ -2855,7 +2861,7 @@ const splitEditorGroup$1 = (state, groupId, direction) => {
   if (!sourceGroup) {
     return state;
   }
-  const newGroupId = create();
+  const newGroupId = create$1();
   const isHorizontalSplit = direction === Left || direction === Right;
   const newLayoutDirection = isHorizontalSplit ? 'horizontal' : 'vertical';
   const updatedGroups = groups.map(group => {
@@ -2909,7 +2915,7 @@ const handleClickAction = async (state, action, rawGroupId) => {
       if (rawGroupId) {
         const groupId = Number.parseInt(rawGroupId, 10);
         if (!Number.isNaN(groupId)) {
-          return closeEditorGroup(state, groupId);
+          return closeEditorGroup$1(state, groupId);
         }
       }
       return state;
@@ -2966,7 +2972,10 @@ const handleDoubleClick = async state => {
 };
 
 const EditorGroupHeader = 'EditorGroupHeader';
+const EmptyGroupCloseButton = 'EmptyGroupCloseButton';
 const EditorGroup = 'EditorGroup';
+const EditorGroupsHorizontal = 'EditorGroupsHorizontal';
+const EditorGroupsVertical = 'EditorGroupsVertical';
 const EditorContainer = 'EditorContainer';
 const EditorGroupActions = 'EditorGroupActions';
 const EditorGroupActionButton = 'EditorGroupActionButton';
@@ -3044,8 +3053,8 @@ const newFile = async state => {
   getActiveTabId(newState);
 
   // Create a new empty tab
-  const tabId = create();
-  const editorUid = create();
+  const tabId = create$1();
+  const editorUid = create$1();
   const newTab = {
     editorType: 'text',
     editorUid,
@@ -3175,6 +3184,119 @@ const handleResize = async (state, dimensions) => {
   return allResizeCommands;
 };
 
+const create = (beforeGroupId, afterGroupId) => {
+  return `${beforeGroupId}:${afterGroupId}`;
+};
+const parse = sashId => {
+  if (!sashId) {
+    return undefined;
+  }
+  const [beforeRaw, afterRaw] = sashId.split(':');
+  if (!beforeRaw || !afterRaw) {
+    return undefined;
+  }
+  const beforeGroupId = Number.parseInt(beforeRaw, 10);
+  const afterGroupId = Number.parseInt(afterRaw, 10);
+  if (!Number.isFinite(beforeGroupId) || !Number.isFinite(afterGroupId)) {
+    return undefined;
+  }
+  return {
+    afterGroupId,
+    beforeGroupId
+  };
+};
+
+const handleSashPointerDown = async (state, sashId, clientXRaw, clientYRaw) => {
+  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);
+  if (!beforeGroup || !afterGroup) {
+    return state;
+  }
+  const clientX = Number.parseFloat(clientXRaw);
+  const clientY = Number.parseFloat(clientYRaw);
+  if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+    return state;
+  }
+  return {
+    ...state,
+    sashDrag: {
+      afterGroupId: parsed.afterGroupId,
+      afterSize: afterGroup.size,
+      beforeGroupId: parsed.beforeGroupId,
+      beforeSize: beforeGroup.size,
+      sashId,
+      startClientX: clientX,
+      startClientY: clientY
+    }
+  };
+};
+
+const MIN_GROUP_SIZE = 10;
+const clamp = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+const round = value => {
+  return Math.round(value * 100) / 100;
+};
+const handleSashPointerMove = async (state, clientXRaw, clientYRaw) => {
+  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;
+  }
+  const axisSize = state.layout.direction === 'horizontal' ? state.width : state.height;
+  if (!axisSize) {
+    return state;
+  }
+  const deltaPx = state.layout.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);
+  const afterSize = totalResizableSize - beforeSize;
+  const groups = state.layout.groups.map(group => {
+    if (group.id === sashDrag.beforeGroupId) {
+      return {
+        ...group,
+        size: round(beforeSize)
+      };
+    }
+    if (group.id === sashDrag.afterGroupId) {
+      return {
+        ...group,
+        size: round(afterSize)
+      };
+    }
+    return group;
+  });
+  return {
+    ...state,
+    layout: {
+      ...state.layout,
+      groups
+    }
+  };
+};
+
+const handleSashPointerUp = async state => {
+  if (!state.sashDrag) {
+    return state;
+  }
+  return {
+    ...state,
+    sashDrag: undefined
+  };
+};
+
 const show2 = async (uid, menuId, x, y, args) => {
   await showContextMenu2(uid, menuId, x, y, args);
 };
@@ -3366,7 +3488,7 @@ const createViewlets = async (layout, viewletModuleIds, bounds) => {
   for (const group of layout.groups) {
     const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
     if (activeTab && viewletModuleIds[activeTab.id]) {
-      const editorUid = activeTab.editorUid === -1 ? create() : activeTab.editorUid;
+      const editorUid = activeTab.editorUid === -1 ? create$1() : activeTab.editorUid;
       editorUids[activeTab.id] = editorUid;
       await createViewlet(viewletModuleIds[activeTab.id], editorUid, activeTab.id, bounds, activeTab.uri);
     }
@@ -3500,6 +3622,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 };
 
 const Close = 'Close';
+const CloseEditorGroup = 'Close Editor Group';
 const CloseAll = 'Close All';
 const CloseOthers = 'Close Others';
 const CloseToTheRight = 'Close To The Right';
@@ -3516,6 +3639,9 @@ const splitEditorGroup = () => {
 const close = () => {
   return i18nString(Close);
 };
+const closeEditorGroup = () => {
+  return i18nString(CloseEditorGroup);
+};
 const closeOthers = () => {
   return i18nString(CloseOthers);
 };
@@ -3633,6 +3759,18 @@ const refresh = state => {
   };
 };
 
+const getCss = () => {
+  const rules = [`.MainArea {
+}`];
+  const css = rules.join('\n');
+  return css;
+};
+
+const renderCss = (oldState, newState) => {
+  const css = getCss();
+  return [SetCss, newState.uid, css];
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -3947,6 +4085,9 @@ const HandleClickClose = 12;
 const HandleClickTab = 13;
 const HandleTabContextMenu = 14;
 const HandleHeaderDoubleClick = 15;
+const HandleSashPointerDown = 16;
+const HandleSashPointerMove = 17;
+const HandleSashPointerUp = 18;
 
 const renderError = errorMessage => {
   return [{
@@ -4149,11 +4290,39 @@ const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
   }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
 
-const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
+const renderEmptyGroupCloseButton = (group, groupIndex) => {
+  return [{
+    childCount: 1,
+    className: EmptyGroupCloseButton,
+    'data-action': 'close-group',
+    'data-groupId': String(group.id),
+    onClick: HandleClickAction,
+    title: closeEditorGroup(),
+    type: Button$2
+  }, text('✕')];
+};
+
+const renderEmptyEditorGroup = (group, groupIndex, style) => {
+  return [{
+    childCount: 1,
+    className: EditorGroup,
+    style,
+    type: Div
+  }, ...renderEmptyGroupCloseButton(group)];
+};
+
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, sizeProperty = 'width') => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  const style = `${sizeProperty}:${group.size}%;`;
+  const hasTabs = group.tabs.length > 0;
+  const hasEmptyGroupCloseButton = !hasTabs;
+  if (hasEmptyGroupCloseButton) {
+    return renderEmptyEditorGroup(group, groupIndex, style);
+  }
   return [{
     childCount: 2,
     className: EditorGroup,
+    style,
     type: Div
   }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), {
     childCount: 1,
@@ -4162,22 +4331,40 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
   }, ...renderEditor(activeTab)];
 };
 
-const renderSash = direction => {
+const renderSash = (direction, sashId) => {
   return {
     childCount: 0,
-    className: direction === 'vertical' ? 'SashVertical' : 'SashHorizontal',
+    className: direction === 'horizontal' ? 'SashVertical' : 'SashHorizontal',
+    'data-sashId': sashId,
+    onPointerDown: HandleSashPointerDown,
+    onPointerMove: HandleSashPointerMove,
+    onPointerUp: HandleSashPointerUp,
     type: Div
   };
 };
 
 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)];
+  }
   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++) {
     if (i > 0) {
       // Insert sash between groups
-      children.push(renderSash(layout.direction));
+      const beforeGroupId = layout.groups[i - 1].id;
+      const afterGroupId = layout.groups[i].id;
+      const sashId = create(beforeGroupId, afterGroupId);
+      children.push(renderSash(layout.direction, sashId));
     }
-    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled));
+    children.push(...renderEditorGroup(layout.groups[i], i, splitButtonEnabled, sizeProperty));
   }
   return [{
     childCount: 1,
@@ -4185,7 +4372,7 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
     type: Div
   }, {
     childCount: children.length,
-    className: EDITOR_GROUPS_CONTAINER,
+    className: editorGroupsContainerClassName,
     role: None$1,
     type: Div
   }, ...children];
@@ -4214,6 +4401,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -4265,6 +4454,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleHeaderDoubleClick,
     params: ['handleHeaderDoubleClick', EventTargetClassName, 'event.target.dataset.groupId']
+  }, {
+    name: HandleSashPointerDown,
+    params: ['handleSashPointerDown', 'event.target.dataset.sashId', ClientX, ClientY]
+  }, {
+    name: HandleSashPointerMove,
+    params: ['handleSashPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleSashPointerUp,
+    params: ['handleSashPointerUp', ClientX, ClientY]
   }];
 };
 
@@ -4329,7 +4527,7 @@ const splitDown = (state, groupId) => {
 
   // If there are no groups, create an initial empty group first
   if (groups.length === 0) {
-    const initialGroupId = create();
+    const initialGroupId = create$1();
     const initialGroup = {
       activeTabId: undefined,
       focused: true,
@@ -4366,7 +4564,7 @@ const splitRight = (state, groupId) => {
 
   // If there are no groups, create an initial empty group first
   if (groups.length === 0) {
-    const initialGroupId = create();
+    const initialGroupId = create$1();
     const initialGroup = {
       activeTabId: undefined,
       focused: true,
@@ -4398,7 +4596,7 @@ const commandMap = {
   'MainArea.closeTabsRight': wrapCommand(closeTabsRight),
   'MainArea.copyPath': wrapCommand(copyPath$1),
   'MainArea.copyRelativePath': wrapCommand(copyRelativePath$1),
-  'MainArea.create': create$1,
+  'MainArea.create': create$2,
   'MainArea.diff2': diff2,
   'MainArea.focusNext': wrapCommand(focusNextTab),
   'MainArea.focusNextTab': wrapCommand(focusNextTab),
@@ -4417,6 +4615,9 @@ const commandMap = {
   'MainArea.handleModifiedStatusChange': wrapCommand(handleModifiedStatusChange),
   'MainArea.handleResize': wrapGetter(handleResize),
   // TODO would need to have a function that returns newstate as well as commands
+  'MainArea.handleSashPointerDown': wrapCommand(handleSashPointerDown),
+  'MainArea.handleSashPointerMove': wrapCommand(handleSashPointerMove),
+  'MainArea.handleSashPointerUp': wrapCommand(handleSashPointerUp),
   'MainArea.handleTabContextMenu': wrapCommand(handleTabContextMenu),
   'MainArea.handleUriChange': wrapCommand(handleUriChange),
   'MainArea.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),

package/package.json

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