@lvce-editor/main-area-worker 8.6.0 → 8.7.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 = [];
@@ -1744,7 +1750,7 @@ const handleAttach = async command => {
   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
   });
@@ -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 => {
@@ -3044,8 +3050,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 +3181,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 +3485,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);
     }
@@ -3633,6 +3752,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 +4078,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 +4283,13 @@ const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
   }, ...getTabsVirtualDom(group, groupIndex, tabsChildCount), ...actions];
 };
 
-const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
+const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false, direction = 'horizontal') => {
   const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  const style = direction === 'horizontal' ? `width:${group.size}%;` : `height:${group.size}%;`;
   return [{
     childCount: 2,
     className: EditorGroup,
+    style,
     type: Div
   }, ...renderEditorGroupHeader(group, groupIndex, splitButtonEnabled), {
     childCount: 1,
@@ -4162,10 +4298,14 @@ const renderEditorGroup = (group, groupIndex, splitButtonEnabled = false) => {
   }, ...renderEditor(activeTab)];
 };
 
-const renderSash = direction => {
+const renderSash = (direction, sashId) => {
   return {
     childCount: 0,
     className: direction === 'vertical' ? 'SashVertical' : 'SashHorizontal',
+    'data-sashId': sashId,
+    onPointerDown: HandleSashPointerDown,
+    onPointerMove: HandleSashPointerMove,
+    onPointerUp: HandleSashPointerUp,
     type: Div
   };
 };
@@ -4175,9 +4315,12 @@ const getMainAreaVirtualDom = (layout, splitButtonEnabled = false) => {
   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, layout.direction));
   }
   return [{
     childCount: 1,
@@ -4214,6 +4357,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -4265,6 +4410,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 +4483,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 +4520,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 +4552,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 +4571,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.7.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",