@lvce-editor/settings-view 2.3.0 → 2.4.0

package/dist/settingsViewWorkerMain.js

@@ -1138,6 +1138,7 @@ const create$1 = (id, uri, x, y, width, height) => {
     itemHeight: 100,
     items: [],
     maxLineY: 0,
+    minContentWidth: 300,
     minLineY: 0,
     modifiedSettings: {},
     preferences: {},
@@ -1158,20 +1159,16 @@ const create$1 = (id, uri, x, y, width, height) => {
   set$3(id, state, state);
 };
 
-const isEqual$5 = (oldState, newState) => {
-  return oldState.sideBarWidth === newState.sideBarWidth;
-};
-
 const isEqual$4 = (oldState, newState) => {
-  return oldState.focus === newState.focus;
+  return oldState.sideBarWidth === newState.sideBarWidth && oldState.scrollBarThumbHeight === newState.scrollBarThumbHeight && oldState.scrollBarThumbTop === newState.scrollBarThumbTop;
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
+  return oldState.focus === newState.focus;
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return true;
+  return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1182,7 +1179,6 @@ const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
 const RenderSettingValues = 10;
-const RenderScrollOffset = 11;
 const RenderFocusContext = 12;
 const RenderCss = 13;
 
@@ -1190,18 +1186,13 @@ const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$3, isEqual, isEqual$1, isEqual$2, isEqual$4, isEqual$4, isEqual$5];
-const numbers = [RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset, RenderFocus, RenderFocusContext, RenderCss];
+const modules = [isEqual$2, isEqual, isEqual$1, isEqual$3, isEqual$3, isEqual$4];
+const numbers = [RenderItems, RenderValue, RenderSettingValues, RenderFocus, RenderFocusContext, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
   for (let i = 0; i < modules.length; i++) {
     const fn = modules[i];
-
-    // TODO enable this
-    if (numbers[i] === RenderScrollOffset) {
-      continue;
-    }
     if (!fn(oldState, newState)) {
       diffResult.push(numbers[i]);
     }
@@ -1320,7 +1311,7 @@ const Features = 'Features';
 const FeaturesList = 'FeaturesList';
 const FeatureWebView = 'FeatureWebView';
 const FileIcon = 'FileIcon';
-const Filter = 'Filter';
+const Filter$1 = 'Filter';
 const FilterBadge = 'FilterBadge';
 const FindWidget = 'FindWidget';
 const FindWidgetFind = 'FindWidgetFind';
@@ -1556,7 +1547,7 @@ const ClassNames = {
   Features,
   FeaturesList,
   FileIcon,
-  Filter,
+  Filter: Filter$1,
   FilterBadge,
   FindWidget,
   FindWidgetFind,
@@ -1738,6 +1729,10 @@ const getName = () => {
   return 'Settings';
 };
 
+const handleClickFilterButton = state => {
+  return state;
+};
+
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -1929,9 +1924,12 @@ const handleResizerPointerDown = (state, eventX, eventY) => {
 
 const handleResizerPointerMove = (state, eventX, eventY) => {
   const {
-    sideBarMinWidth
+    minContentWidth,
+    sideBarMinWidth,
+    width
   } = state;
-  const newWidth = Math.max(eventX, sideBarMinWidth);
+  const maxSideBarWidth = width - minContentWidth;
+  const newWidth = Math.max(sideBarMinWidth, Math.min(eventX, maxSideBarWidth));
   return {
     ...state,
     sideBarWidth: newWidth
@@ -2577,6 +2575,7 @@ const getPreferences = async () => {
 const ApplicationsTab = 'applications';
 const Clear$1 = 'Clear';
 const ExtensionsTab = 'extensions';
+const Filter = 'Filter';
 const FeaturesTab = 'features';
 const SecurityTab = 'security';
 const SettingsSearch = 'SettingsSearch';
@@ -2887,6 +2886,9 @@ const autoUpdatesDescription = () => {
 const clear = () => {
   return i18nString(Clear);
 };
+const filter = () => {
+  return 'Filter';
+};
 const extensionRecommendations = () => {
   return i18nString(ExtensionRecommendations);
 };
@@ -4730,6 +4732,13 @@ const getSavedSearchValue = savedState => {
   return '';
 };
 
+const getSavedSideBarWidth = savedState => {
+  if (savedState && typeof savedState === 'object' && 'sideBarWidth' in savedState && typeof savedState.sideBarWidth === 'number') {
+    return savedState.sideBarWidth;
+  }
+  return 200;
+};
+
 const getSavedTabId = savedState => {
   if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
     return savedState.selectedTab;
@@ -4746,6 +4755,7 @@ const restoreState = savedState => {
       minLineY: 0,
       scrollOffset: 0,
       searchValue: '',
+      sideBarWidth: 200,
       tabId: ''
     };
   }
@@ -4754,6 +4764,7 @@ const restoreState = savedState => {
   const tabId = getSavedTabId(savedState);
   const searchValue = getSavedSearchValue(savedState);
   const scrollOffset = getSavedScrollOffset(savedState);
+  const sideBarWidth = getSavedSideBarWidth(savedState);
   const history = getSavedHistory(savedState);
   const historyIndex = getSavedHistoryIndex(savedState, history);
   return {
@@ -4763,6 +4774,7 @@ const restoreState = savedState => {
     minLineY,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabId
   };
 };
@@ -4773,6 +4785,7 @@ const loadContent = async (state, savedState) => {
     historyIndex,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabId
   } = restoreState(savedState);
   const tabs = getTabs();
@@ -4812,19 +4825,26 @@ const loadContent = async (state, savedState) => {
     scrollBarThumbTop: thumbTop,
     scrollOffset,
     searchValue,
-    sideBarWidth: 200,
+    sideBarWidth,
     tabs: newTabs,
     visibleItems
   };
 };
 
-const getCss = sideBarWidth => {
+const getCss = (sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop) => {
+  const rounded = Math.round(sideBarWidth);
   return `
 .Settings {
-  --SettingsSideBarWidth: ${sideBarWidth}px;
+  --SettingsSideBarWidth: ${rounded}px;
+  --ScrollBarThumbHeight: ${scrollBarThumbHeight}px;
+  --ScrollBarThumbTop: ${scrollBarThumbTop}px;
 }
 .SettingsResizer {
-  color: yellow;
+  background: yellow;
+}
+
+.SettingsSideBar{
+  width: var(--SettingsSideBarWidth);
 }
 `;
 };
@@ -4832,9 +4852,11 @@ const getCss = sideBarWidth => {
 const renderCss = (oldState, newState) => {
   const {
     id,
+    scrollBarThumbHeight,
+    scrollBarThumbTop,
     sideBarWidth
   } = newState;
-  const css = getCss(sideBarWidth);
+  const css = getCss(sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop);
   return [SetCss, id, css];
 };
 
@@ -4902,6 +4924,7 @@ const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
 
 // TODo use numeric ids
 const HandleClickClear = 'handleClickClear';
+const HandleClickFilterButton = 'handleClickFilterButton';
 const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
@@ -4936,6 +4959,14 @@ const getSettingsInputButtonsDom = hasSearchValue => {
     name: Clear$1,
     onClick: HandleClickClear,
     type: Button
+  }, {
+    ariaLabel: filter(),
+    childCount: 1,
+    className: SearchFieldButton,
+    disabled: false,
+    name: Filter,
+    onClick: HandleClickFilterButton,
+    type: Button
   }, icon];
 };
 
@@ -4998,12 +5029,10 @@ const parentNode$1 = {
   className: mergeClassNames(SettingsScrollBar, SettingsScrollBarSmall),
   type: Div
 };
-const getScrollBarDom = (thumbHeight, thumbTop) => {
+const getScrollBarDom = () => {
   return [parentNode$1, {
     childCount: 0,
     className: SettingsScrollBarThumb,
-    height: `${thumbHeight}px`,
-    top: `${thumbTop}px`,
     type: Div
   }];
 };
@@ -5314,7 +5343,7 @@ const getSettingsItemsDom = (items, searchValue) => {
   }, ...items.flatMap(getItemVirtualDom)];
 };
 
-const getSettingsContentDom = (visibleItems, tabs, searchValue, thumbHeight, thumbTop) => {
+const getSettingsContentDom = (visibleItems, tabs, searchValue) => {
   const selectedTab = tabs.find(tab => tab.selected);
   const headerText = selectedTab ? selectedTab.label : settingsContent();
   return [{
@@ -5326,7 +5355,7 @@ const getSettingsContentDom = (visibleItems, tabs, searchValue, thumbHeight, thu
     childCount: 2,
     className: SettingsItemWrapper,
     type: Div
-  }, ...getSettingsItemsDom(visibleItems, searchValue), ...getScrollBarDom(thumbHeight, thumbTop)];
+  }, ...getSettingsItemsDom(visibleItems, searchValue), ...getScrollBarDom()];
 };
 
 const getTabClassName = tab => {
@@ -5364,12 +5393,12 @@ const getSettingsSideBarDom = tabs => {
   }, ...getSettingsTabsDom(tabs)];
 };
 
-const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
+const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue) => {
   return [{
     childCount: 3,
     className: SettingsMain,
     type: Div
-  }, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
+  }, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue)];
 };
 
 const parentNode = {
@@ -5380,15 +5409,13 @@ const parentNode = {
 const getSettingsDom = state => {
   const {
     filteredItems,
-    scrollBarThumbHeight,
-    scrollBarThumbTop,
     searchValue,
     tabs,
     visibleItems
   } = state;
   const hasSearchValue = searchValue.trim().length > 0;
   const filteredItemsCount = filteredItems.length;
-  return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, scrollBarThumbHeight, scrollBarThumbTop)];
+  return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -5396,16 +5423,6 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
-const renderScrollOffset = (oldState, newState) => {
-  const {
-    id,
-    scrollOffset
-  } = newState;
-  const selector = '.SettingsContent';
-  const property = 'scrollTop';
-  return ['Viewlet.setProperty', id, selector, property, scrollOffset];
-};
-
 const enabledTypes = [Number$1, String, Color];
 const renderSettingValues = (oldState, newState) => {
   const {
@@ -5442,8 +5459,6 @@ const getRenderer = diffType => {
       return renderFocusContext;
     case RenderItems:
       return renderItems;
-    case RenderScrollOffset:
-      return renderScrollOffset;
     case RenderSettingValues:
       return renderSettingValues;
     case RenderValue:
@@ -5486,6 +5501,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickClear,
     params: ['clear']
+  }, {
+    name: HandleClickFilterButton,
+    params: ['handleClickFilterButton']
   }, {
     name: HandleSettingInput,
     params: ['handleSettingInput', TargetName, TargetValue]
@@ -5529,6 +5547,7 @@ const saveState = state => {
     historyIndex,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabs
   } = state;
   const selectedTab = getSelectedTabId(tabs);
@@ -5541,7 +5560,8 @@ const saveState = state => {
     minLineY: 0,
     scrollOffset,
     searchValue,
-    selectedTab
+    selectedTab,
+    sideBarWidth
   };
 };
 
@@ -5602,6 +5622,7 @@ const commandMap = {
   'Settings.getCommandIds': getCommandIds,
   'Settings.getKeyBindings': getKeyBindings$1,
   'Settings.getName': getName,
+  'Settings.handleClickFilterButton': wrapCommand(handleClickFilterButton),
   'Settings.handleClickTab': wrapCommand(handleClickTab),
   'Settings.handleInput': wrapCommand(handleInput),
   'Settings.handleInputBlur': wrapCommand(handleInputBlur),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,6 @@
   "type": "module",
   "main": "dist/settingsViewWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/constants": "^2.3.0"
+    "@lvce-editor/constants": "^2.4.0"
   }
 }