@lvce-editor/panel-worker 1.1.0 → 1.3.0

package/dist/panelWorkerMain.js

@@ -54,6 +54,55 @@ class VError extends Error {
   }
 }
 
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const Object$1 = 1;
+const Number$1 = 2;
+const Array$1 = 3;
+const String = 4;
+const Boolean = 5;
+const Function = 6;
+const Null = 7;
+const Unknown = 8;
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return Number$1;
+    case 'function':
+      return Function;
+    case 'string':
+      return String;
+    case 'object':
+      if (value === null) {
+        return Null;
+      }
+      if (Array.isArray(value)) {
+        return Array$1;
+      }
+      return Object$1;
+    case 'boolean':
+      return Boolean;
+    default:
+      return Unknown;
+  }
+};
+const object = value => {
+  const type = getType(value);
+  if (type !== Object$1) {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
+const string = value => {
+  const type = getType(value);
+  if (type !== String) {
+    throw new AssertionError('expected value to be of type string');
+  }
+};
+
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -604,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,
@@ -613,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 {
@@ -707,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,
@@ -715,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,
@@ -726,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
@@ -749,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 {
@@ -785,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);
     }
   };
@@ -825,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
@@ -836,6 +885,9 @@ const create$4 = async ({
   return rpc;
 };
 
+const Tab = 'tab';
+
+const Button = 1;
 const Div = 4;
 const Text = 12;
 const Reference = 100;
@@ -877,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);
@@ -916,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 {
@@ -1014,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,
@@ -1068,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';
@@ -1078,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;
@@ -1100,6 +1150,18 @@ const loadContent = (state, savedState) => {
   };
   return openViewlet(loaded, savedViewletId);
 };
+const setBadgeCount = (state, id, count) => {
+  const {
+    badgeCounts
+  } = state;
+  return {
+    ...state,
+    badgeCounts: {
+      ...badgeCounts,
+      [id]: count
+    }
+  };
+};
 
 // export const contentLoaded = (state) => {
 //   const commands = []
@@ -1114,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,
@@ -1163,6 +1202,53 @@ const openViewlet = async (state, id, focus = false) => {
     currentViewletId: id
   };
 };
+const handleClickClose = async state => {
+  await invoke('Layout.hidePanel');
+  return state;
+};
+const handleClickMaximize = async state => {
+  // TODO
+  return state;
+};
+const selectIndex = async (state, index) => {
+  await openViewlet(state, state.views[index]);
+  return {
+    ...state,
+    selectedIndex: index
+  };
+};
+const selectRaw = async (state, rawIndex) => {
+  return selectIndex(state, Number.parseInt(rawIndex, 10));
+};
+const toggleView = async (state, name) => {
+  const index = state.views.indexOf(name);
+  if (index === -1) {
+    return state;
+  }
+  if (name === state.currentViewletId) {
+    // await Command.execute('Layout.hidePanel') // TODO
+    return state;
+  }
+  return selectIndex(state, index);
+};
+const handleFilterInput = async (state, value) => {
+  object(state);
+  string(value);
+  const {
+    currentViewletId
+  } = state;
+  const fullCommand = `${currentViewletId}.handleFilterInput`;
+  await invoke(fullCommand, value);
+  return state;
+};
+
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
 
 const SetText = 1;
 const Replace = 2;
@@ -1452,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,
@@ -1469,7 +1661,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getStatusBarVirtualDom();
+  const dom = getPanelDom(newState);
   return [SetDom2, uid, dom];
 };
 
@@ -1513,10 +1705,6 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
-const HandleClickClose = 'handleClickClose';
-const HandleClickMaximize = 'handleClickMaximize';
-const HandleClickSelectTab = 'HandleClickSelectTab';
-
 const renderEventListeners = () => {
   return [{
     name: HandleClickMaximize,
@@ -1531,6 +1719,9 @@ const renderEventListeners = () => {
 };
 
 const resize = async (state, dimensions) => {
+  const {
+    childUid
+  } = state;
   // TODO
   const currentViewletInstance = {};
   const newState = {
@@ -1543,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
   };
@@ -1561,20 +1750,28 @@ const saveState = state => {
 };
 
 const commandMap = {
-  'StatusBar.create': create$1,
-  'StatusBar.diff2': diff2,
-  'StatusBar.getCommandIds': getCommandIds,
-  'StatusBar.loadContent': wrapCommand(loadContent),
-  'StatusBar.render2': render2,
-  'StatusBar.renderEventListeners': renderEventListeners,
-  'StatusBar.resize': wrapCommand(resize),
-  'StatusBar.saveState': wrapGetter(saveState),
-  'StatusBar.terminate': terminate
+  'Panel.create': create,
+  'Panel.diff2': diff2,
+  'Panel.getCommandIds': getCommandIds,
+  'Panel.handleClickClose': wrapCommand(handleClickClose),
+  'Panel.handleClickMaximize': wrapCommand(handleClickMaximize),
+  'Panel.handleFilterInput': wrapCommand(handleFilterInput),
+  'Panel.loadContent': wrapCommand(loadContent),
+  'Panel.openViewlet': wrapCommand(openViewlet),
+  'Panel.render2': render2,
+  'Panel.renderEventListeners': renderEventListeners,
+  'Panel.resize': wrapCommand(resize),
+  'Panel.saveState': wrapGetter(saveState),
+  'Panel.selectIndex': wrapCommand(selectIndex),
+  'Panel.selectIndexRaw': wrapCommand(selectRaw),
+  'Panel.setBadgeCount': wrapCommand(setBadgeCount),
+  'Panel.terminate': terminate,
+  'Panel.toggleView': wrapCommand(toggleView)
 };
 
 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.1.0",
+  "version": "1.3.0",
   "description": "Panel Worker",
   "repository": {
     "type": "git",