@lvce-editor/settings-view 2.2.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: {},
@@ -1146,6 +1147,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     scrollBarThumbTop: 0,
     scrollOffset: 0,
     searchValue: '',
+    sideBarMinWidth: 100,
+    sideBarWidth: 0,
     tabs: [],
     uri,
     visibleItems: [],
@@ -1157,15 +1160,15 @@ const create$1 = (id, uri, x, y, width, height) => {
 };
 
 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) => {
@@ -1176,25 +1179,20 @@ const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
 const RenderSettingValues = 10;
-const RenderScrollOffset = 11;
 const RenderFocusContext = 12;
+const RenderCss = 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];
-const numbers = [RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset, RenderFocus, RenderFocusContext];
+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]);
     }
@@ -1313,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';
@@ -1549,7 +1547,7 @@ const ClassNames = {
   Features,
   FeaturesList,
   FileIcon,
-  Filter,
+  Filter: Filter$1,
   FilterBadge,
   FindWidget,
   FindWidgetFind,
@@ -1731,6 +1729,10 @@ const getName = () => {
   return 'Settings';
 };
 
+const handleClickFilterButton = state => {
+  return state;
+};
+
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -1916,6 +1918,28 @@ const handleInputFocus = state => {
   };
 };
 
+const handleResizerPointerDown = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleResizerPointerMove = (state, eventX, eventY) => {
+  const {
+    minContentWidth,
+    sideBarMinWidth,
+    width
+  } = state;
+  const maxSideBarWidth = width - minContentWidth;
+  const newWidth = Math.max(sideBarMinWidth, Math.min(eventX, maxSideBarWidth));
+  return {
+    ...state,
+    sideBarWidth: newWidth
+  };
+};
+
+const handleResizerPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
 const handleScroll = (state, scrollTop, inputSource = User) => {
   return {
     ...state,
@@ -2063,11 +2087,19 @@ const getModifiedSettings = preferences => {
   return modifiedSettings;
 };
 
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const DeltaY = 'event.deltaY';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
+
 const Script = 2;
 
 const DebugWorker = 55;
 const RendererWorker$1 = 1;
 
+const SetCss = 'Viewlet.setCss';
+
 const rpcs = Object.create(null);
 const set$2 = (id, rpc) => {
   rpcs[id] = rpc;
@@ -2543,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';
@@ -2853,6 +2886,9 @@ const autoUpdatesDescription = () => {
 const clear = () => {
   return i18nString(Clear);
 };
+const filter = () => {
+  return 'Filter';
+};
 const extensionRecommendations = () => {
   return i18nString(ExtensionRecommendations);
 };
@@ -4696,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;
@@ -4712,6 +4755,7 @@ const restoreState = savedState => {
       minLineY: 0,
       scrollOffset: 0,
       searchValue: '',
+      sideBarWidth: 200,
       tabId: ''
     };
   }
@@ -4720,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 {
@@ -4729,6 +4774,7 @@ const restoreState = savedState => {
     minLineY,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabId
   };
 };
@@ -4739,6 +4785,7 @@ const loadContent = async (state, savedState) => {
     historyIndex,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabId
   } = restoreState(savedState);
   const tabs = getTabs();
@@ -4778,11 +4825,41 @@ const loadContent = async (state, savedState) => {
     scrollBarThumbTop: thumbTop,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabs: newTabs,
     visibleItems
   };
 };
 
+const getCss = (sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop) => {
+  const rounded = Math.round(sideBarWidth);
+  return `
+.Settings {
+  --SettingsSideBarWidth: ${rounded}px;
+  --ScrollBarThumbHeight: ${scrollBarThumbHeight}px;
+  --ScrollBarThumbTop: ${scrollBarThumbTop}px;
+}
+.SettingsResizer {
+  background: yellow;
+}
+
+.SettingsSideBar{
+  width: var(--SettingsSideBarWidth);
+}
+`;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    id,
+    scrollBarThumbHeight,
+    scrollBarThumbTop,
+    sideBarWidth
+  } = newState;
+  const css = getCss(sideBarWidth, scrollBarThumbHeight, scrollBarThumbTop);
+  return [SetCss, id, css];
+};
+
 const renderFocus = (oldState, newState) => {
   const {
     id
@@ -4808,6 +4885,8 @@ const Label = 'Label';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
+const Resizer = 'Resizer';
+const ResizerHighlight = 'ResizerHighlight';
 const SearchFieldButton = 'SearchFieldButton';
 const Select = 'Select';
 const Settings = 'Settings';
@@ -4845,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';
@@ -4852,6 +4932,9 @@ const HandleSettingChecked = 'handleSettingChecked';
 const HandleWheel = 'handleWheel';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
+const HandleResizerPointerDown = 'handleResizerPointerDown';
+const HandleResizerPointerMove = 'handleResizerPointerMove';
+const HandleResizerPointerUp = 'handleResizerPointerUp';
 
 const enabledClass = SearchFieldButton;
 const disabledClass = mergeClassNames(enabledClass, 'SearchFieldButtonDisabled');
@@ -4876,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];
 };
 
@@ -4912,6 +5003,19 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
   }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
 };
 
+const getResizerVirtualDom = () => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(Resizer, 'SettingsResizer'),
+    onPointerDown: HandleResizerPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: ResizerHighlight,
+    type: Div
+  }];
+};
+
 const getContentHeadingDom = headerText => {
   return [{
     childCount: 1,
@@ -4925,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
   }];
 };
@@ -5241,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 [{
@@ -5253,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 => {
@@ -5291,12 +5393,12 @@ const getSettingsSideBarDom = tabs => {
   }, ...getSettingsTabsDom(tabs)];
 };
 
-const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
+const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue) => {
   return [{
-    childCount: 2,
+    childCount: 3,
     className: SettingsMain,
     type: Div
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
+  }, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue)];
 };
 
 const parentNode = {
@@ -5307,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) => {
@@ -5323,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 {
@@ -5361,14 +5451,14 @@ const renderValue = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderFocus:
       return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
     case RenderItems:
       return renderItems;
-    case RenderScrollOffset:
-      return renderScrollOffset;
     case RenderSettingValues:
       return renderSettingValues;
     case RenderValue:
@@ -5404,19 +5494,22 @@ const renderActions = () => {
 const renderEventListeners = () => {
   return [{
     name: HandleClickTab,
-    params: ['handleClickTab', 'event.target.name']
+    params: ['handleClickTab', TargetName]
   }, {
     name: HandleInput,
-    params: ['handleInput', 'event.target.value']
+    params: ['handleInput', TargetValue]
   }, {
     name: HandleClickClear,
     params: ['clear']
+  }, {
+    name: HandleClickFilterButton,
+    params: ['handleClickFilterButton']
   }, {
     name: HandleSettingInput,
-    params: ['handleSettingInput', 'event.target.name', 'event.target.value']
+    params: ['handleSettingInput', TargetName, TargetValue]
   }, {
     name: HandleSettingChecked,
-    params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
+    params: ['handleSettingChecked', TargetName, TargetValue]
   },
   // {
   //   name: DomEventListenerFunctions.HandleScroll,
@@ -5425,14 +5518,25 @@ const renderEventListeners = () => {
   // },
   {
     name: HandleWheel,
-    params: ['handleWheel', 'event.deltaY'],
+    params: ['handleWheel', DeltaY],
     passive: true
   }, {
     name: HandleSettingSelect,
-    params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
+    params: ['handleSettingSelect', TargetName, TargetValue]
   }, {
     name: HandleInputFocus,
     params: ['handleInputFocus']
+  }, {
+    name: HandleResizerPointerDown,
+    params: ['handleResizerPointerDown', ClientX, ClientY],
+    // @ts-ignore
+    trackPointerEvents: [HandleResizerPointerMove, HandleResizerPointerUp]
+  }, {
+    name: HandleResizerPointerMove,
+    params: ['handleResizerPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleResizerPointerUp,
+    params: ['handleResizerPointerUp', ClientX, ClientY]
   }];
 };
 
@@ -5443,6 +5547,7 @@ const saveState = state => {
     historyIndex,
     scrollOffset,
     searchValue,
+    sideBarWidth,
     tabs
   } = state;
   const selectedTab = getSelectedTabId(tabs);
@@ -5455,7 +5560,8 @@ const saveState = state => {
     minLineY: 0,
     scrollOffset,
     searchValue,
-    selectedTab
+    selectedTab,
+    sideBarWidth
   };
 };
 
@@ -5516,10 +5622,14 @@ 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),
   'Settings.handleInputFocus': wrapCommand(handleInputFocus),
+  'Settings.handleResizerPointerDown': wrapCommand(handleResizerPointerDown),
+  'Settings.handleResizerPointerMove': wrapCommand(handleResizerPointerMove),
+  'Settings.handleResizerPointerUp': wrapCommand(handleResizerPointerUp),
   'Settings.handleScroll': wrapCommand(handleScroll),
   'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
   'Settings.handleSettingInput': wrapCommand(handleSettingInput),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",
@@ -9,5 +9,8 @@
   "license": "MIT",
   "author": "Lvce Editor",
   "type": "module",
-  "main": "dist/settingsViewWorkerMain.js"
+  "main": "dist/settingsViewWorkerMain.js",
+  "dependencies": {
+    "@lvce-editor/constants": "^2.4.0"
+  }
 }