@lvce-editor/activity-bar-worker 1.25.0 → 1.27.0

package/dist/activityBarWorkerMain.js

@@ -1015,7 +1015,8 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     focused: false,
     focusedIndex: -1,
     scrollBarHeight: 0,
-    width: 0,
+    width,
+    height,
     x,
     y,
     sideBarVisible: false,
@@ -1023,17 +1024,16 @@ const create = (id, uri, x, y, width, height, args, parentUid, platform = 0) =>
     selectedIndex: -1,
     itemHeight: 48,
     updateState: '',
-    updateProgress: 0
+    updateProgress: 0,
+    filteredItems: [],
+    numberOfVisibleItems: 0
   };
   set(id, state, state);
   return state;
 };
 
 const isEqual$2 = (oldState, newState) => {
-  // TODO compute css more optimized
-  // maybe only when items change, and even then not
-  // always, but only when it affects the css
-  return false;
+  return oldState.itemHeight === newState.itemHeight;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1041,7 +1041,7 @@ const isEqual$1 = (oldState, newState) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.focusedIndex === newState.focusedIndex && oldState.activityBarItems === newState.activityBarItems && oldState.updateProgress === newState.updateProgress && oldState.updateState === newState.updateState;
+  return oldState.activityBarItems === newState.activityBarItems && oldState.filteredItems === newState.filteredItems && oldState.focusedIndex === newState.focusedIndex && oldState.updateProgress === newState.updateProgress && oldState.updateState === newState.updateState;
 };
 
 const RenderItems = 4;
@@ -1204,9 +1204,9 @@ const handleClickIndex = async (state, button, index, x, y) => {
     return state;
   }
   const {
-    activityBarItems
+    filteredItems
   } = state;
-  const item = activityBarItems[index];
+  const item = filteredItems[index];
   const viewletId = item.id;
   switch (viewletId) {
     case 'Settings':
@@ -1220,11 +1220,11 @@ const handleClickIndex = async (state, button, index, x, y) => {
 
 const handleClick = async (state, button, eventX, eventY) => {
   const {
-    activityBarItems,
+    filteredItems,
     itemHeight,
     y
   } = state;
-  const index = getIndexFromPosition(y, eventX, eventY, itemHeight, activityBarItems.length);
+  const index = getIndexFromPosition(y, eventX, eventY, itemHeight, filteredItems.length);
   return handleClickIndex(state, button, index, eventX, eventY);
 };
 
@@ -1233,10 +1233,6 @@ const handleContextMenu = async (state, button, x, y) => {
   return state;
 };
 
-const handleResize = state => {
-  return state;
-};
-
 const Tab = 1;
 const Button = 1 << 1;
 const Progress = 1 << 2;
@@ -1245,6 +1241,109 @@ 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 AdditionalViews = 'Additional Views';
+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 additionalViews = () => {
+  return i18nString(AdditionalViews);
+};
+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 Ellipsis = 'Ellipsis';
+
+const getNumberOfVisibleItems = state => {
+  const {
+    height,
+    itemHeight
+  } = state;
+  const numberOfVisibleItemsTop = Math.floor(height / itemHeight);
+  return numberOfVisibleItemsTop;
+};
+
+const getFilteredActivityBarItems = (items, height, itemHeight) => {
+  const numberOfVisibleItems = getNumberOfVisibleItems({
+    height,
+    itemHeight
+  });
+  if (numberOfVisibleItems >= items.length) {
+    return items;
+  }
+  const showMoreItem = {
+    id: 'Additional Views',
+    title: additionalViews(),
+    icon: Ellipsis,
+    flags: Button,
+    keyShortcuts: ''
+  };
+  return [...items.slice(0, numberOfVisibleItems - 2), showMoreItem, items.at(-1)];
+};
+
+const handleResize = (state, dimensions) => {
+  const {
+    activityBarItems,
+    itemHeight
+  } = state;
+  const {
+    x,
+    y,
+    width,
+    height
+  } = dimensions;
+  const filteredItems = getFilteredActivityBarItems(activityBarItems, height, itemHeight);
+  return {
+    ...state,
+    x,
+    y,
+    width,
+    height,
+    filteredItems
+  };
+};
+
 const setFlag = (item, flag, enabled) => {
   return {
     ...item,
@@ -1284,15 +1383,19 @@ const markSelected = (items, selectedIndex) => {
 
 const handleSideBarViewletChange = (state, id, ...args) => {
   const {
-    activityBarItems
+    activityBarItems,
+    height,
+    itemHeight
   } = state;
   const index = findIndex(activityBarItems, id);
   const newActivityBarItems = markSelected(activityBarItems, index);
+  const filteredItems = getFilteredActivityBarItems(newActivityBarItems, height, itemHeight);
   return {
     ...state,
     selectedIndex: index,
     currentViewletId: id,
     activityBarItems: newActivityBarItems,
+    filteredItems,
     sideBarVisible: true
   };
 };
@@ -1324,66 +1427,17 @@ const getNewItems = (items, state) => {
 };
 const handleUpdateStateChange = async (state, config) => {
   const {
-    activityBarItems
+    filteredItems
   } = state;
-  const newItems = getNewItems(activityBarItems, config.state);
+  const newItems = getNewItems(filteredItems, config.state);
   return {
     ...state,
     updateState: config.state,
     updateProgress: config.progress,
-    activityBarItems: newItems
-  };
-};
-
-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];
+    filteredItems: newItems
   };
-  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';
@@ -1435,15 +1489,21 @@ const getActivityBarItems = () => {
 };
 
 const loadContent = async (state, savedState) => {
+  const {
+    itemHeight,
+    height
+  } = state;
   const items = getActivityBarItems();
   const explorerIndex = 0;
   const itemsWithSelected = markSelected(items, explorerIndex);
+  const filteredItems = getFilteredActivityBarItems(itemsWithSelected, height, itemHeight);
   return {
     ...state,
     activityBarItems: itemsWithSelected,
-    sideBarVisible: true,
     currentViewletId: Explorer,
-    selectedIndex: explorerIndex
+    filteredItems,
+    selectedIndex: explorerIndex,
+    sideBarVisible: true
   };
 };
 
@@ -1690,9 +1750,9 @@ const getActivityBarVirtualDom = visibleItems => {
 const renderItems = (oldState, newState) => {
   const {
     uid,
-    activityBarItems
+    filteredItems
   } = newState;
-  const dom = getActivityBarVirtualDom(activityBarItems);
+  const dom = getActivityBarVirtualDom(filteredItems);
   return [SetDom2, uid, dom];
 };
 
@@ -1792,7 +1852,7 @@ const commandMap = {
   'ActivityBar.handleClick': wrapCommand(handleClick),
   'ActivityBar.handleClickIndex': wrapCommand(handleClickIndex),
   'ActivityBar.handleContextMenu': wrapCommand(handleContextMenu),
-  'ActivityBar.handleResize': wrapCommand(handleResize),
+  'ActivityBar.resize': wrapCommand(handleResize),
   'ActivityBar.handleSideBarHidden': wrapCommand(handleSideBarHidden),
   'ActivityBar.handleSideBarViewletChange': wrapCommand(handleSideBarViewletChange),
   'ActivityBar.loadContent': wrapCommand(loadContent),

package/package.json

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