@lvce-editor/status-bar-worker 3.33.0 → 3.34.0

package/dist/statusBarWorkerMain.js

@@ -412,6 +412,7 @@ const Polyline = 88;
 const Rect = 89;
 const Svg = 90;
 const Use = 91;
+const Progress = 92;
 const Reference = 100;
 
 const VirtualDomElements = {
@@ -473,6 +474,7 @@ const VirtualDomElements = {
   Polygon,
   Polyline,
   Pre,
+  Progress,
   Quote,
   Rect,
   Reference,
@@ -813,6 +815,22 @@ const getIconVirtualDom = (element, name) => {
     type: Div
   }];
 };
+const getProgressVirtualDom = (element, name) => {
+  const node = {
+    ariaLabel: element.ariaLabel,
+    className: 'StatusBarItemProgress',
+    max: element.max,
+    name,
+    type: Progress
+  };
+  if (element.value !== undefined) {
+    return [{
+      ...node,
+      value: element.value
+    }];
+  }
+  return [node];
+};
 const getStatusBarItemElementVirtualDom = (element, name) => {
   if (element.type === 'text') {
     return getTextVirtualDom(element, name);
@@ -820,6 +838,9 @@ const getStatusBarItemElementVirtualDom = (element, name) => {
   if (element.type === 'icon') {
     return getIconVirtualDom(element, name);
   }
+  if (element.type === 'progress') {
+    return getProgressVirtualDom(element, name);
+  }
   return [];
 };
 
@@ -870,16 +891,21 @@ const getStatusBarItemsRightDom = statusBarItemsRight => {
   return getStatusBarItemsVirtualDom(statusBarItemsRight, StatusBarItemsRight);
 };
 
+const Focusable = 0;
+
 const getChildCount = rightCount => {
   return rightCount > 0 ? 2 : 1;
 };
 const getStatusBarVirtualDom = (statusBarItemsLeft, statusBarItemsRight) => {
   const dom = [{
+    ariaLive: 'off',
+    ariaRoleDescription: 'Status Bar',
     childCount: getChildCount(statusBarItemsRight.length),
     className: 'StatusBar',
     onClick: HandleClick,
     onContextMenu: HandleContextMenu,
     role: Status,
+    tabIndex: Focusable,
     type: Div
   }, ...getStatusBarItemsLeftDom(statusBarItemsLeft), ...getStatusBarItemsRightDom(statusBarItemsRight)];
   return dom;
@@ -2510,6 +2536,7 @@ const fontSize = 12;
 const fontFamily = 'system-ui, Ubuntu, Droid Sans, sans-serif';
 const itemPaddingAndMargin = 16;
 const iconWidth = 20;
+const progressWidth = 69;
 const horizontalGroupPadding = 14;
 const measuredWidths = new WeakMap();
 const fallbackTextWidth = 150;
@@ -2523,6 +2550,16 @@ const measureTextWidths = async values => {
     return values.map(() => fallbackTextWidth);
   }
 };
+const getElementWidth = (element, textWidths, textIndex) => {
+  switch (element.type) {
+    case 'icon':
+      return iconWidth;
+    case 'progress':
+      return progressWidth;
+    case 'text':
+      return textWidths[textIndex];
+  }
+};
 const getItemWidths = async items => {
   const unmeasuredItems = [...new Set(items.filter(item => !measuredWidths.has(item)))];
   const textElements = unmeasuredItems.flatMap(item => item.elements.filter(element => element.type === 'text'));
@@ -2531,10 +2568,8 @@ const getItemWidths = async items => {
   for (const item of unmeasuredItems) {
     let itemWidth = itemPaddingAndMargin;
     for (const element of item.elements) {
-      if (element.type === 'icon') {
-        itemWidth += iconWidth;
-      } else {
-        itemWidth += textWidths[textIndex];
+      itemWidth += getElementWidth(element, textWidths, textIndex);
+      if (element.type === 'text') {
         textIndex++;
       }
     }
@@ -3077,6 +3112,50 @@ const handleProblemsSummaryChange = (state, summary) => {
   };
 };
 
+const itemName = 'update-progress';
+const handleUpdateProgress = (state, progress) => {
+  const {
+    statusBarItemsLeft
+  } = state;
+  const updatedStatusBarItems = statusBarItemsLeft.filter(item => item.name !== itemName);
+  if (progress === null) {
+    return {
+      ...state,
+      statusBarItemsLeft: updatedStatusBarItems
+    };
+  }
+  const value = progress === undefined ? undefined : Math.max(0, Math.min(1, progress));
+  const percentage = value === undefined ? undefined : Math.round(value * 100);
+  const ariaLabel = percentage === undefined ? 'Update download progress' : `Update download progress ${percentage}%`;
+  const progressElement = {
+    ariaLabel: 'Update download progress',
+    max: 1,
+    type: 'progress'
+  };
+  const elements = [{
+    type: 'text',
+    value: 'Update'
+  }];
+  if (value === undefined) {
+    elements.push(progressElement);
+  } else {
+    elements.push({
+      ...progressElement,
+      value
+    });
+  }
+  const item = {
+    ariaLabel,
+    elements,
+    name: itemName,
+    tooltip: ariaLabel
+  };
+  return {
+    ...state,
+    statusBarItemsLeft: [...updatedStatusBarItems, item]
+  };
+};
+
 const handleWorkspaceChange = async state => {
   const {
     assetDir,
@@ -3290,6 +3369,7 @@ const commandMap = {
   'StatusBar.handleMessagePort': handleDirectMessagePort,
   'StatusBar.handleNotificationCountChanged': wrapCommand(handleNotificationCountChanged),
   'StatusBar.handleProblemsSummaryChange': wrapCommand(handleProblemsSummaryChange),
+  'StatusBar.handleUpdateProgress': wrapCommand(handleUpdateProgress),
   'StatusBar.handleWorkspaceChange': handleWorkspaceChangeAndRefresh,
   'StatusBar.initialize': initialize,
   'StatusBar.itemLeftUpdate': wrapCommand(itemLeftUpdate),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/status-bar-worker",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "Status Bar Worker",
   "repository": {
     "type": "git",