@lvce-editor/settings-view 2.2.0 → 2.3.0

package/dist/settingsViewWorkerMain.js

@@ -1146,6 +1146,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     scrollBarThumbTop: 0,
     scrollOffset: 0,
     searchValue: '',
+    sideBarMinWidth: 100,
+    sideBarWidth: 0,
     tabs: [],
     uri,
     visibleItems: [],
@@ -1156,6 +1158,10 @@ 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;
 };
@@ -1178,13 +1184,14 @@ 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$3, isEqual, isEqual$1, isEqual$2, isEqual$4, isEqual$4, isEqual$5];
+const numbers = [RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset, RenderFocus, RenderFocusContext, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1916,6 +1923,25 @@ const handleInputFocus = state => {
   };
 };
 
+const handleResizerPointerDown = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleResizerPointerMove = (state, eventX, eventY) => {
+  const {
+    sideBarMinWidth
+  } = state;
+  const newWidth = Math.max(eventX, sideBarMinWidth);
+  return {
+    ...state,
+    sideBarWidth: newWidth
+  };
+};
+
+const handleResizerPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
 const handleScroll = (state, scrollTop, inputSource = User) => {
   return {
     ...state,
@@ -2063,11 +2089,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;
@@ -4778,11 +4812,32 @@ const loadContent = async (state, savedState) => {
     scrollBarThumbTop: thumbTop,
     scrollOffset,
     searchValue,
+    sideBarWidth: 200,
     tabs: newTabs,
     visibleItems
   };
 };
 
+const getCss = sideBarWidth => {
+  return `
+.Settings {
+  --SettingsSideBarWidth: ${sideBarWidth}px;
+}
+.SettingsResizer {
+  color: yellow;
+}
+`;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    id,
+    sideBarWidth
+  } = newState;
+  const css = getCss(sideBarWidth);
+  return [SetCss, id, css];
+};
+
 const renderFocus = (oldState, newState) => {
   const {
     id
@@ -4808,6 +4863,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';
@@ -4852,6 +4909,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');
@@ -4912,6 +4972,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,
@@ -5293,10 +5366,10 @@ const getSettingsSideBarDom = tabs => {
 
 const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
   return [{
-    childCount: 2,
+    childCount: 3,
     className: SettingsMain,
     type: Div
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
+  }, ...getSettingsSideBarDom(tabs), ...getResizerVirtualDom(), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
 };
 
 const parentNode = {
@@ -5361,6 +5434,8 @@ const renderValue = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderFocus:
       return renderFocus;
     case RenderFocusContext:
@@ -5404,19 +5479,19 @@ 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: 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 +5500,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]
   }];
 };
 
@@ -5520,6 +5606,9 @@ const commandMap = {
   '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.3.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.3.0"
+  }
 }