@lvce-editor/activity-bar-worker 1.4.0 → 1.6.0

package/README.md

@@ -1,3 +1,3 @@
-# activity-bar-worker
+# Activity Bar Worker
 
-Activity Bar Worker
+> WebWorker for the Activity Bar functionality in Lvce Editor.

package/dist/activityBarWorkerMain.js

@@ -981,7 +981,7 @@ const isEqual$1 = (oldState, newState) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.focusedIndex === newState.focusedIndex;
+  return oldState.focusedIndex === newState.focusedIndex && oldState.activityBarItems === newState.activityBarItems;
 };
 
 const RenderItems = 4;
@@ -1054,6 +1054,11 @@ const focusNone = state => {
   return focusIndex(state, -1);
 };
 
+const Button$1 = 'button';
+const None = 'none';
+const Tab$1 = 'tab';
+const ToolBar = 'toolbar';
+
 const Enter = 3;
 const Space = 9;
 const PageUp = 10;
@@ -1581,12 +1586,125 @@ const handleSideBarViewletChange = (state, id, ...args) => {
   };
 };
 
+const Tab = 1;
+const Button = 1 << 1;
+const Progress = 1 << 2;
+const Enabled = 1 << 3;
+const Selected = 1 << 4;
+const Focused = 1 << 5;
+const MarginTop = 1 << 6;
+
+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);
+};
+
+const Explorer$1 = 'Explorer';
+const Search$2 = 'Search';
+const SourceControl$2 = 'Source Control';
+const RunAndDebug$1 = 'Run and Debug';
+const Extensions$2 = 'Extensions';
+const Settings = 'Settings';
+const ActivityBar$2 = 'Activity Bar';
+
+const explorer = () => {
+  return i18nString(Explorer$1);
+};
+const search = () => {
+  return i18nString(Search$2);
+};
+const sourceControl = () => {
+  return i18nString(SourceControl$2);
+};
+const runAndDebug = () => {
+  return i18nString(RunAndDebug$1);
+};
+const extensions = () => {
+  return i18nString(Extensions$2);
+};
+const settings = () => {
+  return i18nString(Settings);
+};
+const activityBar = () => {
+  return i18nString(ActivityBar$2);
+};
+
+const DebugAlt2 = 'DebugAlt2';
+const Extensions$1 = 'Extensions';
+const Files = 'Files';
+const Search$1 = 'Search';
+const SettingsGear = 'SettingsGear';
+const SourceControl$1 = 'SourceControl';
+
+const Explorer = 'Explorer';
+const Extensions = 'Extensions';
+const RunAndDebug = 'Run And Debug';
+const Search = 'Search';
+const SourceControl = 'Source Control';
+
+const getActivityBarItems = () => {
+  return [
+  // Top
+  {
+    id: Explorer,
+    title: explorer(),
+    icon: Files,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+E'
+  }, {
+    id: Search,
+    title: search(),
+    icon: Search$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+F'
+  }, {
+    id: SourceControl,
+    title: sourceControl(),
+    icon: SourceControl$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+G'
+  }, {
+    id: RunAndDebug,
+    title: runAndDebug(),
+    icon: DebugAlt2,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+D'
+  }, {
+    id: Extensions,
+    title: extensions(),
+    icon: Extensions$1,
+    flags: Tab | Enabled,
+    keyShortcuts: 'Control+Shift+X'
+  },
+  // Bottom
+  {
+    id: 'Settings',
+    title: settings(),
+    icon: SettingsGear,
+    flags: Button | Enabled | MarginTop,
+    keyShortcuts: ''
+  }];
+};
+
 const loadContent = async (state, savedState) => {
+  const items = getActivityBarItems();
   return {
-    ...state
+    ...state,
+    activityBarItems: items
   };
 };
 
+const renderCss = (oldState, newState) => {
+  return [];
+};
+
 const renderFocusContext = (oldState, newState) => {
   if (newState.focus === List) {
     return [SetFocusContext, newState.uid, FocusExplorer];
@@ -1594,8 +1712,150 @@ const renderFocusContext = (oldState, newState) => {
   return [];
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const Vertical = 'vertical';
+
+const ActivityBar$1 = 'ActivityBar';
+const ActivityBarItem = 'ActivityBarItem';
+const ActivityBarItemNested = 'ActivityBarItemNested';
+const ActivityBarItemSelected = 'ActivityBarItemSelected';
+const Badge = 'Badge';
+const BadgeContent = 'BadgeContent';
+const FocusOutline = 'FocusOutline';
+const Icon = 'Icon';
+const MarginTopAuto = 'MarginTopAuto';
+const Viewlet = 'Viewlet';
+
+const HandleBlur = 'handleBlur';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFocus = 'handleFocus';
+const HandleMouseDown = 'handleMouseDown';
+
+const ActivityBar = 'ActivityBar';
+
+const Div = 4;
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: None,
+    childCount: 0
+  };
+};
+
+const getAriaSelected = (isTab, isSelected) => {
+  if (!isTab) {
+    return undefined;
+  }
+  return Boolean(isSelected);
+};
+const createActivityBarItem = item => {
+  const {
+    flags,
+    title,
+    icon
+  } = item;
+  const isTab = flags & Tab;
+  const isSelected = flags & Selected;
+  const isFocused = flags & Focused;
+  const isProgress = flags & Progress;
+  const role = isTab ? Tab$1 : Button$1;
+  const ariaSelected = getAriaSelected(isTab, isSelected);
+  const marginTop = flags & MarginTop;
+  let className = ActivityBarItem;
+  if (isFocused) {
+    className += ' ' + FocusOutline;
+  }
+  if (marginTop) {
+    className += ' ' + MarginTopAuto;
+  }
+  if (isSelected) {
+    className += ' ' + ActivityBarItemSelected;
+    return [{
+      type: Div,
+      className,
+      ariaLabel: '',
+      title,
+      role,
+      ariaSelected,
+      childCount: 1
+    }, getIconVirtualDom(icon)];
+  }
+
+  // TODO support progress on selected activity bar item
+  if (isProgress) {
+    className += ' ' + ActivityBarItemNested;
+    return [{
+      type: Div,
+      className,
+      ariaLabel: '',
+      title,
+      role,
+      ariaSelected,
+      childCount: 2
+    }, {
+      type: Div,
+      className: Icon,
+      role: None,
+      childCount: 0,
+      maskImage: icon
+    }, {
+      type: Div,
+      className: Badge,
+      childCount: 1
+    }, {
+      type: Div,
+      className: BadgeContent,
+      childCount: 1
+    }, {
+      type: Div,
+      className: Icon,
+      maskImage: 'Progress'
+    }];
+  }
+  return [{
+    type: Div,
+    className: `${className} Icon${icon}`,
+    ariaLabel: '',
+    title,
+    role,
+    ariaSelected,
+    childCount: 0
+  }];
+};
+const getVirtualDom = visibleItems => {
+  const dom = visibleItems.flatMap(createActivityBarItem);
+  return dom;
+};
+
+const getActivityBarVirtualDom = visibleItems => {
+  return [{
+    type: Div,
+    id: ActivityBar,
+    className: mergeClassNames(Viewlet, ActivityBar$1),
+    role: ToolBar,
+    ariaRoleDescription: activityBar(),
+    ariaOrientation: Vertical,
+    tabIndex: 0,
+    onMouseDown: HandleMouseDown,
+    onContextMenu: HandleContextMenu,
+    onFocus: HandleFocus,
+    onBlur: HandleBlur,
+    childCount: visibleItems.length
+  }, ...getVirtualDom(visibleItems)];
+};
+
 const renderItems = (oldState, newState) => {
-  return [SetDom2, []];
+  const {
+    uid,
+    activityBarItems
+  } = newState;
+  const dom = getActivityBarVirtualDom(activityBarItems);
+  return [SetDom2, uid, dom];
 };
 
 const getRenderer = diffType => {
@@ -1604,6 +1864,10 @@ const getRenderer = diffType => {
       return renderItems;
     case RenderFocusContext:
       return renderFocusContext;
+    case RenderFocus:
+      return renderFocusContext;
+    case RenderCss:
+      return renderCss;
     default:
       throw new Error('unknown renderer');
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/activity-bar-worker",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",