@lvce-editor/panel-worker 1.12.0 → 2.3.0

package/dist/panelWorkerMain.js

@@ -63,7 +63,7 @@ class AssertionError extends Error {
 const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
-const String = 4;
+const String$1 = 4;
 const Boolean$1 = 5;
 const Function = 6;
 const Null = 7;
@@ -75,7 +75,7 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String;
+      return String$1;
     case 'object':
       if (value === null) {
         return Null;
@@ -98,7 +98,7 @@ const object = value => {
 };
 const string = value => {
   const type = getType(value);
-  if (type !== String) {
+  if (type !== String$1) {
     throw new AssertionError('expected value to be of type string');
   }
 };
@@ -145,7 +145,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -299,7 +298,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -492,7 +498,10 @@ const constructError = (message, type, name) => {
   if (ErrorConstructor === Error) {
     const error = new Error(message);
     if (name && name !== 'VError') {
-      error.name = name;
+      Object.defineProperty(error, 'name', {
+        configurable: true,
+        value: name
+      });
     }
     return error;
   }
@@ -509,8 +518,10 @@ const getCurrentStack = () => {
   const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+const getNewLineIndex = (string, startIndex) => {
+  {
+    return string.indexOf(NewLine);
+  }
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
@@ -521,55 +532,91 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const setStack = (error, stack) => {
+  const descriptor = Object.getOwnPropertyDescriptor(error, 'stack');
+  if (descriptor) {
+    if (!descriptor.configurable && !descriptor.writable) {
+      return;
+    }
+    if (!descriptor.configurable && descriptor.writable) {
+      error.stack = stack;
+      return;
+    }
+  }
+  Object.defineProperty(error, 'stack', {
+    configurable: true,
+    value: stack,
+    writable: true
+  });
+};
+const restoreExistingError = (error, currentStack) => {
+  if (typeof error.stack === 'string') {
+    setStack(error, `${error.stack}${NewLine}${currentStack}`);
+  }
+  return error;
+};
+const restoreMethodNotFoundError = (error, currentStack) => {
+  const restoredError = new JsonRpcError(error.message);
+  const parentStack = getParentStack(error);
+  setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
+  return restoredError;
+};
+const restoreStackFromData = (restoredError, error, currentStack) => {
+  if (error.data.stack && error.data.type && error.message) {
+    setStack(restoredError, `${error.data.type}: ${error.message}${NewLine}${error.data.stack}${NewLine}${currentStack}`);
+    return;
+  }
+  if (error.data.stack) {
+    setStack(restoredError, error.data.stack);
+  }
+};
+const applyDataProperties = (restoredError, error) => {
+  restoreStackFromData(restoredError, error, getCurrentStack());
+  if (error.data.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.data.codeFrame;
+  }
+  if (error.data.code) {
+    // @ts-ignore
+    restoredError.code = error.data.code;
+  }
+  if (error.data.type) {
+    // @ts-ignore
+    restoredError.name = error.data.type;
+  }
+};
+const applyDirectProperties = (restoredError, error) => {
+  if (error.stack) {
+    const lowerStack = restoredError.stack || '';
+    const indexNewLine = getNewLineIndex(lowerStack);
+    const parentStack = getParentStack(error);
+    // @ts-ignore
+    setStack(restoredError, `${parentStack}${lowerStack.slice(indexNewLine)}`);
+  }
+  if (error.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.codeFrame;
+  }
+};
+const restoreMessageError = (error, _currentStack) => {
+  const restoredError = constructError(error.message, error.type, error.name);
+  if (error.data) {
+    applyDataProperties(restoredError, error);
+  } else {
+    applyDirectProperties(restoredError, error);
+  }
+  return restoredError;
+};
 const restoreJsonRpcError = error => {
   const currentStack = getCurrentStack();
   if (error && error instanceof Error) {
-    if (typeof error.stack === 'string') {
-      error.stack = error.stack + NewLine + currentStack;
-    }
-    return error;
+    return restoreExistingError(error, currentStack);
   }
   if (error && error.code && error.code === MethodNotFound) {
-    const restoredError = new JsonRpcError(error.message);
-    const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine + currentStack;
-    return restoredError;
+    return restoreMethodNotFoundError(error, currentStack);
   }
   if (error && error.message) {
-    const restoredError = constructError(error.message, error.type, error.name);
-    if (error.data) {
-      if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
-      } else if (error.data.stack) {
-        restoredError.stack = error.data.stack;
-      }
-      if (error.data.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.data.codeFrame;
-      }
-      if (error.data.code) {
-        // @ts-ignore
-        restoredError.code = error.data.code;
-      }
-      if (error.data.type) {
-        // @ts-ignore
-        restoredError.name = error.data.type;
-      }
-    } else {
-      if (error.stack) {
-        const lowerStack = restoredError.stack || '';
-        // @ts-ignore
-        const indexNewLine = getNewLineIndex(lowerStack);
-        const parentStack = getParentStack(error);
-        // @ts-ignore
-        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
-      }
-      if (error.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.codeFrame;
-      }
-    }
-    return restoredError;
+    return restoreMessageError(error);
   }
   if (typeof error === 'string') {
     return new Error(`JsonRpc Error: ${error}`);
@@ -884,21 +931,6 @@ const create$3 = async ({
   return rpc;
 };
 
-const Tab = 'tab';
-const TabList = 'tablist';
-const ToolBar = 'toolbar';
-
-const Button = 1;
-const Div = 4;
-const Text = 12;
-const Reference = 100;
-
-const TargetName = 'event.target.name';
-
-const RendererWorker = 1;
-
-const SetPatches = 'Viewlet.setPatches';
-
 const createMockRpc = ({
   commandMap
 }) => {
@@ -967,6 +999,185 @@ const create$2 = rpcId => {
   };
 };
 
+const Tab = 'tab';
+const TabList = 'tablist';
+const ToolBar = 'toolbar';
+
+const Audio = 0;
+const Button = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
+const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
+const Code = 65;
+const Label = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
+const Reference = 100;
+
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button,
+  Canvas,
+  Circle,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
+const TargetName = 'event.target.name';
+
+const RendererWorker = 1;
+
+const SetPatches = 'Viewlet.setPatches';
+
 const {
   invoke,
   set: set$1
@@ -977,29 +1188,87 @@ const toCommandId = key => {
   return key.slice(dotIndex + 1);
 };
 const create$1 = () => {
+  const commandQueues = new Map();
+  const generations = Object.create(null);
   const states = Object.create(null);
   const commandMapRef = {};
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
+  const createAsyncCommandContext = (uid, generation) => {
+    let latestState = states[uid].newState;
+    return {
+      getState: () => {
+        if (isCurrentGeneration(uid, generation)) {
+          latestState = states[uid].newState;
+        }
+        return latestState;
+      },
+      updateState: async updater => {
+        latestState = await updateState(uid, generation, latestState, updater);
+        return latestState;
+      }
+    };
+  };
+  const enqueueCommand = async (uid, command) => {
+    const previous = commandQueues.get(uid) || Promise.resolve();
+    const run = async () => {
+      try {
+        await previous;
+      } catch {
+        // The previous caller receives its error; later commands must still run.
+      }
+      await command();
+    };
+    const current = run();
+    commandQueues.set(uid, current);
+    try {
+      await current;
+    } finally {
+      if (commandQueues.get(uid) === current) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
   return {
     clear() {
+      commandQueues.clear();
       for (const key of Object.keys(states)) {
         delete states[key];
       }
     },
     diff(uid, modules, numbers) {
       const {
-        newState,
-        oldState
+        oldState,
+        scheduledState
       } = states[uid];
       const diffResult = [];
       for (let i = 0; i < modules.length; i++) {
         const fn = modules[i];
-        if (!fn(oldState, newState)) {
+        if (!fn(oldState, scheduledState)) {
           diffResult.push(numbers[i]);
         }
       }
       return diffResult;
     },
     dispose(uid) {
+      commandQueues.delete(uid);
       delete states[uid];
     },
     get(uid) {
@@ -1011,21 +1280,33 @@ const create$1 = () => {
       return ids;
     },
     getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
+      return Object.keys(states).map(Number);
     },
     registerCommands(commandMap) {
       Object.assign(commandMapRef, commandMap);
     },
-    set(uid, oldState, newState) {
+    set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
+      }
       states[uid] = {
         newState,
-        oldState
+        oldState,
+        scheduledState: scheduledState ?? newState
+      };
+    },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const context = createAsyncCommandContext(uid, generation);
+        await fn(context, ...args);
       };
+      return wrapped;
     },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -1034,6 +1315,9 @@ const create$1 = () => {
         if (oldState === newerState || newState === newerState) {
           return;
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -1041,7 +1325,8 @@ const create$1 = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
       };
       return wrapped;
@@ -1054,6 +1339,89 @@ const create$1 = () => {
         return fn(newState, ...args);
       };
       return wrapped;
+    },
+    wrapLoadContent(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const {
+          newState,
+          oldState
+        } = states[uid];
+        const result = await fn(newState, ...args);
+        const {
+          error,
+          state
+        } = result;
+        if (oldState === state || newState === state) {
+          return {
+            error
+          };
+        }
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...state
+        };
+        states[uid] = {
+          newState: latestNew,
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
+        };
+        return {
+          error
+        };
+      };
+      return wrapped;
+    },
+    wrapSerialAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const context = createAsyncCommandContext(uid, generation);
+          await fn(context, ...args);
+        });
+      };
+      return wrapped;
+    },
+    wrapSerialCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const {
+            newState,
+            oldState
+          } = states[uid];
+          const newerState = await fn(newState, ...args);
+          if (oldState === newerState || newState === newerState) {
+            return;
+          }
+          if (!isCurrentGeneration(uid, generation)) {
+            return;
+          }
+          const latestOld = states[uid];
+          const latestNew = {
+            ...latestOld.newState,
+            ...newerState
+          };
+          states[uid] = {
+            newState: latestNew,
+            oldState: latestOld.oldState,
+            scheduledState: latestNew
+          };
+        });
+      };
+      return wrapped;
     }
   };
 };
@@ -1078,8 +1446,10 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     childUid: 0,
     currentViewletId: '',
     errorCount: 0,
+    headerHeight: 35,
     height: 0,
     initial: true,
+    maximized: false,
     platform,
     selectedIndex: -1,
     tabs: [],
@@ -1093,20 +1463,25 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   set(uid, state, state);
 };
 
+const isEqual$2 = (oldState, newState) => {
+  return oldState.actionsUid === newState.actionsUid;
+};
+
 const isEqual$1 = (oldState, newState) => {
   return oldState.childUid === newState.childUid;
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.assetDir === newState.assetDir && oldState.initial === newState.initial && oldState.currentViewletId === newState.currentViewletId && oldState.selectedIndex === newState.selectedIndex && oldState.views === newState.views && oldState.childUid === newState.childUid && oldState.actionsUid === newState.actionsUid;
+  return oldState.assetDir === newState.assetDir && oldState.initial === newState.initial && oldState.currentViewletId === newState.currentViewletId && oldState.maximized === newState.maximized && oldState.selectedIndex === newState.selectedIndex && oldState.views === newState.views && oldState.childUid === newState.childUid && oldState.actionsUid === newState.actionsUid;
 };
 
 const RenderItems = 4;
 const RenderIncremental = 11;
 const RenderChildUid = 12;
+const RenderActionsUid = 13;
 
-const modules = [isEqual, isEqual$1];
-const numbers = [RenderIncremental, RenderChildUid];
+const modules = [isEqual, isEqual$1, isEqual$2];
+const numbers = [RenderIncremental, RenderChildUid, RenderActionsUid];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1137,6 +1512,26 @@ const handleClickMaximize = async state => {
   await invoke('Layout.maximizePanel');
   return state;
 };
+const handleClickUnmaximize = async state => {
+  await invoke('Layout.unmaximizePanel');
+  return state;
+};
+
+const handlePanelLayoutChanged = (state, change) => {
+  const {
+    maximized: currentMaximized
+  } = state;
+  const {
+    maximized
+  } = change;
+  if (currentMaximized === maximized) {
+    return state;
+  }
+  return {
+    ...state,
+    maximized
+  };
+};
 
 const handleBlur = async state => {
   return state;
@@ -1170,26 +1565,33 @@ const getSavedViewletId = savedState => {
   return Problems;
 };
 
-const createViewlet = async (viewletModuleId, editorUid, tabId, bounds, uri) => {
-  await invoke('Layout.createViewlet', viewletModuleId, editorUid, tabId, bounds, uri);
+const createViewlet = async (viewletModuleId, editorUid, tabId, actionsUid, bounds, uri) => {
+  await invoke('Layout.createPanelViewlet', viewletModuleId, editorUid, tabId, actionsUid, bounds, uri);
 };
 
 const getContentDimensions = dimensions => {
   return {
-    height: dimensions.height - 35,
+    height: dimensions.height - dimensions.headerHeight,
     width: dimensions.width,
     x: dimensions.x,
-    y: dimensions.y + 35
+    y: dimensions.y + dimensions.headerHeight
   };
 };
 
+const getUid = () => {
+  return Math.random();
+};
+
 const openViewlet = async (state, id, focus = false) => {
+  const {
+    views
+  } = state;
   const childDimensions = getContentDimensions(state);
-  const childUid = Math.random();
-  const tabId = Math.random();
-  const actionsUid = Math.random();
-  const index = state.views.indexOf(id);
-  await createViewlet(id, childUid, tabId, childDimensions, '');
+  const childUid = getUid();
+  const tabId = getUid();
+  const actionsUid = getUid();
+  const index = views.indexOf(id);
+  await createViewlet(id, childUid, tabId, actionsUid, childDimensions, '');
   return {
     ...state,
     actionsUid,
@@ -1219,7 +1621,7 @@ const selectIndex = async (state, index) => {
 };
 
 const selectRaw = async (state, rawIndex) => {
-  return selectIndex(state, Number.parseInt(rawIndex, 10));
+  return selectIndex(state, Number(rawIndex));
 };
 
 const setBadgeCount = (state, id, count) => {
@@ -1236,16 +1638,28 @@ const setBadgeCount = (state, id, count) => {
 };
 
 const toggleView = async (state, name) => {
-  const index = state.views.indexOf(name);
+  const {
+    currentViewletId,
+    views
+  } = state;
+  const index = views.indexOf(name);
   if (index === -1) {
     return state;
   }
-  if (name === state.currentViewletId) {
+  if (name === currentViewletId) {
     return state;
   }
   return selectIndex(state, index);
 };
 
+const renderActionsUid = (oldState, newState) => {
+  const oldActionsUid = oldState.actionsUid;
+  if (oldActionsUid <= 0 || oldActionsUid === newState.actionsUid) {
+    return [];
+  }
+  return ['Viewlet.dispose', oldActionsUid];
+};
+
 // TODO also need to dispose child when panel becomes hidden
 const renderChildUid = (oldState, newState) => {
   const oldChildUid = oldState.childUid;
@@ -1267,6 +1681,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -1338,21 +1754,18 @@ const getChildrenWithCount = (nodes, startIndex, childCount) => {
 };
 
 const compareNodes = (oldNode, newNode) => {
-  const patches = [];
   // Check if node type changed - return null to signal incompatible nodes
   // (caller should handle this with a Replace operation)
   if (oldNode.type !== newNode.type) {
     return null;
   }
+  const patches = [];
   // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
+  if (oldNode.type === Reference && oldNode.uid !== newNode.uid) {
+    patches.push({
+      type: SetReferenceNodeUid,
+      uid: newNode.uid
+    });
   }
   // Handle text nodes
   if (oldNode.type === Text && newNode.type === Text) {
@@ -1365,8 +1778,8 @@ const compareNodes = (oldNode, newNode) => {
     return patches;
   }
   // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
+  const oldKeys = getKeys(oldNode).filter(key => oldNode.type !== Reference || key !== 'uid');
+  const newKeys = getKeys(newNode).filter(key => newNode.type !== Reference || key !== 'uid');
   // Check for attribute changes
   for (const key of newKeys) {
     if (oldNode[key] !== newNode[key]) {
@@ -1379,7 +1792,7 @@ const compareNodes = (oldNode, newNode) => {
   }
   // Check for removed attributes
   for (const key of oldKeys) {
-    if (!(key in newNode)) {
+    if (!Object.hasOwn(newNode, key)) {
       patches.push({
         type: RemoveAttribute,
         key
@@ -1397,11 +1810,78 @@ const treeToArray = node => {
   return result;
 };
 
+const navigateToChild = (patches, currentChildIndex, index) => {
+  if (currentChildIndex === -1) {
+    patches.push({
+      type: NavigateChild,
+      index
+    });
+    return index;
+  }
+  if (currentChildIndex !== index) {
+    patches.push({
+      type: NavigateSibling,
+      index
+    });
+  }
+  return index;
+};
+const navigateToParent = (patches, currentChildIndex) => {
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+  }
+  return -1;
+};
+const addTree = (newNode, patches) => {
+  patches.push({
+    type: Add,
+    nodes: treeToArray(newNode)
+  });
+};
+const replaceTree = (newNode, patches) => {
+  patches.push({
+    type: Replace,
+    nodes: treeToArray(newNode)
+  });
+};
+const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+    replaceTree(newNode, patches);
+    return nextChildIndex;
+  }
+  const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+    return currentChildIndex;
+  }
+  const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+  return nextChildIndex;
+};
+const diffRootNode = (oldNode, newNode, patches) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    replaceTree(newNode, patches);
+    return;
+  }
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (oldNode.children.length > 0 || newNode.children.length > 0) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+};
 const diffChildren = (oldChildren, newChildren, patches) => {
   const maxLength = Math.max(oldChildren.length, newChildren.length);
-  // Track where we are: -1 means at parent, >= 0 means at child index
   let currentChildIndex = -1;
-  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
   const indicesToRemove = [];
   for (let i = 0; i < maxLength; i++) {
     const oldNode = oldChildren[i];
@@ -1410,89 +1890,17 @@ const diffChildren = (oldChildren, newChildren, patches) => {
       continue;
     }
     if (!oldNode) {
-      // Add new node - we should be at the parent
-      if (currentChildIndex >= 0) {
-        // Navigate back to parent
-        patches.push({
-          type: NavigateParent
-        });
-        currentChildIndex = -1;
-      }
-      // Flatten the entire subtree so renderInternal can handle it
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Add,
-        nodes: flatNodes
-      });
-    } else if (newNode) {
-      // Compare nodes to see if we need any patches
-      const nodePatches = compareNodes(oldNode.node, newNode.node);
-      // If nodePatches is null, the node types are incompatible - need to replace
-      if (nodePatches === null) {
-        // Navigate to this child
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Replace the entire subtree
-        const flatNodes = treeToArray(newNode);
-        patches.push({
-          type: Replace,
-          nodes: flatNodes
-        });
-        // After replace, we're at the new element (same position)
-        continue;
-      }
-      // Check if we need to recurse into children
-      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-      // Only navigate to this element if we need to do something
-      if (nodePatches.length > 0 || hasChildrenToCompare) {
-        // Navigate to this child if not already there
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Apply node patches (these apply to the current element, not children)
-        if (nodePatches.length > 0) {
-          patches.push(...nodePatches);
-        }
-        // Compare children recursively
-        if (hasChildrenToCompare) {
-          diffChildren(oldNode.children, newNode.children, patches);
-        }
-      }
-    } else {
-      // Remove old node - collect the index for later removal
+      currentChildIndex = navigateToParent(patches, currentChildIndex);
+      addTree(newNode, patches);
+      continue;
+    }
+    if (!newNode) {
       indicesToRemove.push(i);
+      continue;
     }
+    currentChildIndex = diffExistingChild(oldNode, newNode, patches, currentChildIndex, i);
   }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
-    currentChildIndex = -1;
-  }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
+  navigateToParent(patches, currentChildIndex);
   for (let j = indicesToRemove.length - 1; j >= 0; j--) {
     patches.push({
       type: RemoveChild,
@@ -1501,47 +1909,22 @@ const diffChildren = (oldChildren, newChildren, patches) => {
   }
 };
 const diffTrees = (oldTree, newTree, patches, path) => {
-  // At the root level (path.length === 0), we're already AT the element
-  // So we compare the root node directly, then compare its children
   if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    const oldNode = oldTree[0];
-    const newNode = newTree[0];
-    // Compare root nodes
-    const nodePatches = compareNodes(oldNode.node, newNode.node);
-    // If nodePatches is null, the root node types are incompatible - need to replace
-    if (nodePatches === null) {
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Replace,
-        nodes: flatNodes
-      });
-      return;
-    }
-    if (nodePatches.length > 0) {
-      patches.push(...nodePatches);
-    }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
-    }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
+    diffRootNode(oldTree[0], newTree[0], patches);
+    return;
   }
+  diffChildren(oldTree, newTree, patches);
 };
 
 const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
+  while (patches.length > 0) {
+    const patch = patches.at(-1);
     if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
       break;
     }
+    patches.pop();
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  return patches;
 };
 
 const diffTree = (oldNodes, newNodes) => {
@@ -1566,17 +1949,19 @@ const IconButton = 'IconButton';
 const MaskIcon = 'MaskIcon';
 const MaskIconChevronUp = 'MaskIconChevronUp';
 const MaskIconClose = 'MaskIconClose';
+const MaskIconRestore = 'MaskIconRestore';
 const Actions = 'Actions';
 
+const emptyActionsNode = {
+  childCount: 0,
+  className: Actions,
+  role: ToolBar,
+  type: Div
+};
 const getActionsDom = newState => {
   const actions = newState.actionsUid || -1;
-  if (actions === -1 || Map) {
-    return [{
-      childCount: 0,
-      className: Actions,
-      role: ToolBar,
-      type: Div
-    }];
+  if (actions <= 0) {
+    return [emptyActionsNode];
   }
   return [{
     type: Reference,
@@ -1586,47 +1971,59 @@ const getActionsDom = newState => {
 
 const HandleClickClose = 'handleClickClose';
 const HandleClickMaximize = 'handleClickMaximize';
+const HandleClickUnmaximize = 'handleClickUnmaximize';
 const HandleClickSelectTab = 'HandleClickSelectTab';
 const HandleClickTab = 'HandleClickTab';
 
 const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
     return key;
   }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
 };
 
 const Maximize = 'Maximize';
+const Unmaximize = 'Unmaximize';
 const Close = 'Close';
 
 const maximize = () => {
   return i18nString(Maximize);
 };
+const unmaximize = () => {
+  return i18nString(Unmaximize);
+};
 const close = () => {
   return i18nString(Close);
 };
 
-const getGlobalActionsDom = () => {
-  return [{
-    childCount: 2,
-    className: PanelToolBar,
-    role: ToolBar,
-    type: Div
-  }, {
-    ariaLabel: maximize(),
+const panelToolBarNode = {
+  childCount: 2,
+  className: PanelToolBar,
+  role: ToolBar,
+  type: Div
+};
+const getGlobalActionsDom = state => {
+  const {
+    maximized
+  } = state;
+  const maximizeLabel = maximized ? unmaximize() : maximize();
+  const maximizeOnClick = maximized ? HandleClickUnmaximize : HandleClickMaximize;
+  const maximizeIcon = maximized ? MaskIconRestore : MaskIconChevronUp;
+  return [panelToolBarNode, {
+    ariaLabel: maximizeLabel,
     childCount: 1,
     className: IconButton,
-    onClick: HandleClickMaximize,
-    title: maximize(),
+    onClick: maximizeOnClick,
+    title: maximizeLabel,
     type: Button
   }, {
     childCount: 0,
-    className: mergeClassNames(MaskIcon, MaskIconChevronUp),
+    className: mergeClassNames(MaskIcon, maximizeIcon),
     type: Div
   }, {
     ariaLabel: close(),
@@ -1642,14 +2039,19 @@ const getGlobalActionsDom = () => {
   }];
 };
 
+const selectedClass = mergeClassNames(PanelTab, PanelTabSelected);
 const getTabClassName = isSelected => {
-  let className = PanelTab;
   if (isSelected) {
-    className += ' ' + PanelTabSelected;
+    return selectedClass;
   }
-  return className;
+  return PanelTab;
 };
 
+const badgeNode = {
+  childCount: 1,
+  className: Badge,
+  type: Div
+};
 const createPanelTab = (tab, badgeCount, isSelected) => {
   const label = tab;
   const className = getTabClassName(isSelected);
@@ -1665,11 +2067,8 @@ const createPanelTab = (tab, badgeCount, isSelected) => {
   };
   const dom = [tabDom, text(label)];
   if (badgeCount) {
-    dom.push({
-      childCount: 1,
-      className: Badge,
-      type: Div
-    }, text(' ' + badgeCount));
+    const badgeCountText = ` ${badgeCount}`;
+    dom.push(badgeNode, text(badgeCountText));
   }
   return dom;
 };
@@ -1685,29 +2084,31 @@ const getPanelTabsVirtualDom = (tabs, selectedIndex, badgeCounts) => {
   return dom;
 };
 
+const panelHeaderNode = {
+  childCount: 3,
+  className: PanelHeader,
+  type: Div
+};
 const getPanelHeaderDom = newState => {
   const tabsDom = getPanelTabsVirtualDom(newState.views, newState.selectedIndex, newState.badgeCounts);
-  return [{
-    childCount: 3,
-    className: PanelHeader,
-    type: Div
-  }, {
+  return [panelHeaderNode, {
     childCount: newState.views.length,
     className: PanelTabs,
     role: TabList,
     type: Div
-  }, ...tabsDom, ...getActionsDom(newState), ...getGlobalActionsDom()];
+  }, ...tabsDom, ...getActionsDom(newState), ...getGlobalActionsDom(newState)];
 };
 
+const panelNode = {
+  childCount: 2,
+  className: Panel,
+  type: Div
+};
 const getPanelDom = newState => {
   const {
     childUid
   } = newState;
-  return [{
-    childCount: 2,
-    className: Panel,
-    type: Div
-  }, ...getPanelHeaderDom(newState), {
+  return [panelNode, ...getPanelHeaderDom(newState), {
     type: Reference,
     uid: childUid
   }];
@@ -1733,6 +2134,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderActionsUid:
+      return renderActionsUid;
     case RenderChildUid:
       return renderChildUid;
     case RenderIncremental:
@@ -1770,6 +2173,9 @@ const renderEventListeners = () => {
   return [{
     name: HandleClickMaximize,
     params: ['handleClickMaximize']
+  }, {
+    name: HandleClickUnmaximize,
+    params: ['handleClickUnmaximize']
   }, {
     name: HandleClickClose,
     params: ['handleClickClose']
@@ -1817,7 +2223,10 @@ const selectName = async (state, name) => {
   if (!name) {
     return state;
   }
-  const index = state.views.indexOf(name);
+  const {
+    views
+  } = state;
+  const index = views.indexOf(name);
   if (index === -1) {
     return state;
   }
@@ -1831,7 +2240,9 @@ const commandMap = {
   'Panel.handleBlur': wrapCommand(handleBlur),
   'Panel.handleClickClose': wrapCommand(handleClickClose),
   'Panel.handleClickMaximize': wrapCommand(handleClickMaximize),
+  'Panel.handleClickUnmaximize': wrapCommand(handleClickUnmaximize),
   'Panel.handleFilterInput': wrapCommand(handleFilterInput),
+  'Panel.handlePanelLayoutChanged': wrapCommand(handlePanelLayoutChanged),
   'Panel.loadContent': wrapCommand(loadContent),
   'Panel.openViewlet': wrapCommand(openViewlet),
   'Panel.render2': render2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/panel-worker",
-  "version": "1.12.0",
+  "version": "2.3.0",
   "description": "Panel Worker",
   "repository": {
     "type": "git",
@@ -9,8 +9,5 @@
   "license": "MIT",
   "author": "Lvce Editor",
   "type": "module",
-  "main": "dist/panelWorkerMain.js",
-  "dependencies": {
-    "@lvce-editor/virtual-dom-worker": "^8.3.0"
-  }
+  "main": "dist/panelWorkerMain.js"
 }