@lvce-editor/panel-worker 1.2.0 → 1.3.0

package/dist/panelWorkerMain.js

@@ -653,7 +653,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$8 = (message, result) => {
+const create$7 = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -662,7 +662,7 @@ const create$8 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$8(message, resultProperty);
+  return create$7(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -756,7 +756,7 @@ const handleJsonRpcMessage = async (...args) => {
 
 const Two = '2.0';
 
-const create$7 = (method, params) => {
+const create$6 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -764,7 +764,7 @@ const create$7 = (method, params) => {
   };
 };
 
-const create$6 = (id, method, params) => {
+const create$5 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -775,12 +775,12 @@ const create$6 = (id, method, params) => {
 };
 
 let id = 0;
-const create$5 = () => {
+const create$4 = () => {
   return ++id;
 };
 
 const registerPromise = map => {
-  const id = create$5();
+  const id = create$4();
   const {
     promise,
     resolve
@@ -798,7 +798,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$6(id, method, params);
+  const message = create$5(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -834,7 +834,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$7(method, params);
+      const message = create$6(method, params);
       ipc.send(message);
     }
   };
@@ -874,7 +874,7 @@ const listen$1 = async (module, options) => {
   return ipc;
 };
 
-const create$4 = async ({
+const create$3 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -885,6 +885,9 @@ const create$4 = async ({
   return rpc;
 };
 
+const Tab = 'tab';
+
+const Button = 1;
 const Div = 4;
 const Text = 12;
 const Reference = 100;
@@ -926,7 +929,7 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$3 = rpcId => {
+const create$2 = rpcId => {
   return {
     async dispose() {
       const rpc = get$1(rpcId);
@@ -965,13 +968,13 @@ const create$3 = rpcId => {
 const {
   invoke,
   set: set$1
-} = create$3(RendererWorker);
+} = create$2(RendererWorker);
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$2 = () => {
+const create$1 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
@@ -1063,9 +1066,9 @@ const {
   set,
   wrapCommand,
   wrapGetter
-} = create$2();
+} = create$1();
 
-const create$1 = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
     actionsUid: 0,
     assetDir,
@@ -1117,6 +1120,10 @@ const diff2 = uid => {
   return result;
 };
 
+const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) => {
+  await invoke('Layout.createViewlet', viewletModuleId, editorUid, tabId, bounds, uri);
+};
+
 const DebugConsole = 'Debug Console';
 const Output = 'Output';
 const Problems = 'Problems';
@@ -1127,12 +1134,6 @@ const getPanelViews = () => {
   return views;
 };
 
-let idCounter = 0;
-const create = () => {
-  idCounter++;
-  return idCounter;
-};
-
 const getSavedViewletId = savedState => {
   if (savedState && savedState.currentViewletId) {
     return savedState.currentViewletId || Problems;
@@ -1175,48 +1176,25 @@ const getContentDimensions = dimensions => {
     y: dimensions.y + 35
   };
 };
+
+// TODO
+// export const getChildren = (state) => {
+//   const { currentViewletId } = state
+//   return [
+//     {
+//       id: currentViewletId,
+//       ...getContentDimensions(state),
+//     },
+//   ]
+// }
+
 const openViewlet = async (state, id, focus = false) => {
   const childDimensions = getContentDimensions(state);
-  const {
-    uid
-  } = state;
-  const childUid = create();
-  const commands = await ViewletManager.load({
-    append: false,
-    args: [],
-    focus,
-    getModule: ViewletModule.load,
-    height: childDimensions.height,
-    id,
-    parentUid: uid,
-    setBounds: false,
-    shouldRenderEvents: false,
-    show: false,
-    type: 0,
-    uid: childUid,
-    // @ts-ignore
-    uri: '',
-    width: childDimensions.width,
-    x: childDimensions.x,
-    y: childDimensions.y
-  }, false, true);
-  let actionsDom = [];
-  let actionsUid = -1;
-  if (commands) {
-    const actionsDomIndex = commands.findIndex(command => command[2] === 'setActionsDom');
-    if (actionsDomIndex !== -1) {
-      const actionDomEntry = commands[actionsDomIndex]?.[3];
-      if (Array.isArray(actionDomEntry)) {
-        actionsDom = actionDomEntry;
-      }
-      commands.splice(actionsDomIndex, 1);
-    }
-    const eventsIndex = commands.findIndex(command => command[0] === 'Viewlet.registerEventListeners');
-    const events = eventsIndex === -1 ? [] : commands[eventsIndex]?.[2];
-    actionsUid = create();
-    commands.push(['Viewlet.createFunctionalRoot', id, actionsUid, true], ['Viewlet.registerEventListeners', actionsUid, events], ['Viewlet.setDom2', actionsUid, actionsDom], ['Viewlet.setUid', actionsUid, childUid]);
-    await RendererProcess.invoke('Viewlet.sendMultiple', commands);
-  }
+  const childUid = Math.random();
+  const tabId = 1234;
+  // TODO get the actions uid somehow
+  const actionsUid = Math.random();
+  await createViewlet(id, childUid, tabId, childDimensions, '');
   return {
     ...state,
     actionsUid,
@@ -1225,7 +1203,7 @@ const openViewlet = async (state, id, focus = false) => {
   };
 };
 const handleClickClose = async state => {
-  await Command.execute('Layout.hidePanel');
+  await invoke('Layout.hidePanel');
   return state;
 };
 const handleClickMaximize = async state => {
@@ -1260,10 +1238,18 @@ const handleFilterInput = async (state, value) => {
     currentViewletId
   } = state;
   const fullCommand = `${currentViewletId}.handleFilterInput`;
-  await Command.execute(fullCommand, value);
+  await invoke(fullCommand, value);
   return state;
 };
 
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
+
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -1552,15 +1538,121 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
-const getStatusBarVirtualDom = () => {
-  const dom = [{
+const getActionsDom = newState => {
+  const actions = newState.actionsUid || -1;
+  if (actions === -1) {
+    return [{
+      childCount: 0,
+      className: 'Actions',
+      role: 'toolbar',
+      type: Div
+    }];
+  }
+  return [{
+    type: Reference,
+    uid: actions
+  }];
+};
+
+const HandleClickClose = 'handleClickClose';
+const HandleClickMaximize = 'handleClickMaximize';
+const HandleClickSelectTab = 'HandleClickSelectTab';
+
+const getGlobalActionsDom = () => {
+  return [{
+    childCount: 2,
+    className: 'PanelToolBar',
+    role: 'toolbar',
+    type: Div
+  }, {
+    ariaLabel: 'Maximize',
+    childCount: 1,
+    className: 'IconButton',
+    onClick: HandleClickMaximize,
+    titleM: 'Maximize',
+    type: Button
+  }, {
     childCount: 0,
-    className: 'Panel',
+    className: 'MaskIcon MaskIconChevronUp',
+    type: Div
+  }, {
+    ariaLabel: 'Close',
+    childCount: 1,
+    className: 'IconButton',
+    onClick: HandleClickClose,
+    titleM: 'Close',
+    type: Button
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconClose',
     type: Div
   }];
+};
+
+const Badge = 'Badge';
+const PanelTab = 'PanelTab';
+const PanelTabSelected = 'PanelTabSelected';
+
+const createPanelTab = (tab, badgeCount, isSelected, index) => {
+  const label = tab;
+  let className = PanelTab;
+  if (isSelected) {
+    className += ' ' + PanelTabSelected;
+  }
+  const childCount = badgeCount ? 2 : 1;
+  const tabDom = {
+    ariaSelected: isSelected,
+    childCount,
+    className,
+    'data-index': index,
+    onClick: HandleClickSelectTab,
+    role: Tab,
+    type: Div
+  };
+  const dom = [tabDom, text(label)];
+  if (badgeCount) {
+    dom.push({
+      childCount: 1,
+      className: Badge,
+      type: Div
+    }, text(' ' + badgeCount));
+  }
+  return dom;
+};
+const getPanelTabsVirtualDom = (tabs, selectedIndex, badgeCounts) => {
+  const dom = [];
+  for (let i = 0; i < tabs.length; i++) {
+    const isSelected = i === selectedIndex;
+    const tab = tabs[i];
+    const badgeCount = badgeCounts[tab] || 0;
+    dom.push(...createPanelTab(tab, badgeCount, isSelected, i));
+  }
   return dom;
 };
 
+const getPanelDom = newState => {
+  const {
+    childUid
+  } = newState;
+  const tabsDom = getPanelTabsVirtualDom(newState.views, newState.selectedIndex, newState.badgeCounts);
+  return [{
+    childCount: 2,
+    className: 'Panel',
+    type: Div
+  }, {
+    childCount: 3,
+    className: 'PanelHeader',
+    type: Div
+  }, {
+    childCount: newState.views.length,
+    className: 'PanelTabs',
+    type: Div
+  }, ...tabsDom, ...getActionsDom(newState), ...getGlobalActionsDom(), {
+    type: Reference,
+    uid: childUid
+  }];
+};
+
 const renderItems = (oldState, newState) => {
   const {
     initial,
@@ -1569,7 +1661,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getStatusBarVirtualDom();
+  const dom = getPanelDom(newState);
   return [SetDom2, uid, dom];
 };
 
@@ -1613,10 +1705,6 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
-const HandleClickClose = 'handleClickClose';
-const HandleClickMaximize = 'handleClickMaximize';
-const HandleClickSelectTab = 'HandleClickSelectTab';
-
 const renderEventListeners = () => {
   return [{
     name: HandleClickMaximize,
@@ -1631,6 +1719,9 @@ const renderEventListeners = () => {
 };
 
 const resize = async (state, dimensions) => {
+  const {
+    childUid
+  } = state;
   // TODO
   const currentViewletInstance = {};
   const newState = {
@@ -1643,9 +1734,7 @@ const resize = async (state, dimensions) => {
     };
   }
   // @ts-ignore
-  const currentViewletUid = currentViewletInstance.state.uid;
-  // @ts-ignore
-  await invoke('Viewlet.resize', currentViewletUid, dimensions);
+  await invoke('Viewlet.resize', childUid, dimensions);
   return {
     ...newState
   };
@@ -1661,7 +1750,7 @@ const saveState = state => {
 };
 
 const commandMap = {
-  'Panel.create': create$1,
+  'Panel.create': create,
   'Panel.diff2': diff2,
   'Panel.getCommandIds': getCommandIds,
   'Panel.handleClickClose': wrapCommand(handleClickClose),
@@ -1682,7 +1771,7 @@ const commandMap = {
 
 const listen = async () => {
   registerCommands(commandMap);
-  const rpc = await create$4({
+  const rpc = await create$3({
     commandMap: commandMap
   });
   set$1(rpc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/panel-worker",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Panel Worker",
   "repository": {
     "type": "git",