@lvce-editor/settings-view 1.13.0 → 1.15.0

package/README.md

@@ -1,3 +1,16 @@
 # Settings View
 
 WebWorker for the Settings View functionality in Lvce Editor.
+
+## Contributing
+
+```sh
+git clone git@github.com:lvce-editor/settings-view.git &&
+cd settings-view &&
+npm ci &&
+npm test
+```
+
+## Gitpod
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/lvce-editor/settings-view)

package/dist/settingsViewWorkerMain.js

@@ -946,6 +946,8 @@ const getFilteredItems = (items, tabs, searchValue = '', preferences = {}) => {
 const User = 1;
 const Script = 2;
 
+const FocusSettingsInput = 2199;
+
 const clear$1 = state => {
   const {
     items,
@@ -956,9 +958,19 @@ const clear$1 = state => {
   const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
   return {
     ...state,
-    searchValue: newSearchValue,
+    filteredItems,
+    focus: FocusSettingsInput,
+    focusSource: Script,
     inputSource: Script,
-    filteredItems
+    searchValue: newSearchValue
+  };
+};
+
+const clearHistory = state => {
+  return {
+    ...state,
+    history: [],
+    historyIndex: -1
   };
 };
 
@@ -991,19 +1003,25 @@ const create$1 = (id, uri, x, y, width, height) => {
     scrollOffset: 0,
     filteredItemsCount: 0,
     history: [],
-    modifiedSettings: {}
+    historyIndex: -1,
+    modifiedSettings: {},
+    focusSource: 0
   };
   set$1(id, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   return oldState.filteredItems === newState.filteredItems;
 };
 
+const isEqual$2 = (oldState, newState) => {
+  return newState.inputSource === User || oldState.scrollOffset === newState.scrollOffset;
+};
+
 const isEqual$1 = (oldState, newState) => {
   return oldState.filteredItems === newState.filteredItems;
 };
@@ -1012,13 +1030,15 @@ const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
 const RenderSettingValues = 10;
+const RenderScrollOffset = 11;
+const RenderFocusContext = 12;
 
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$3, isEqual$2, isEqual, isEqual$1];
-const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues];
+const modules = [isEqual$4, isEqual$3, isEqual, isEqual$1, isEqual$2];
+const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1040,6 +1060,15 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const getKeyBindings = () => {
+  return [];
+};
+
+const getName = () => {
+  // TODO i18n string
+  return 'Settings';
+};
+
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -1080,69 +1109,111 @@ const handleClickTab = (state, name) => {
   };
 };
 
+const addToHistory = (history, value) => {
+  let newHistory = history;
+  let newHistoryIndex = -1;
+  if (value && value.trim() && !history.includes(value)) {
+    newHistory = [...history, value];
+    newHistoryIndex = newHistory.length - 1;
+  } else if (value && value.trim()) {
+    // If value already exists in history, find its index
+    newHistoryIndex = history.indexOf(value);
+  }
+  return {
+    newHistory,
+    newHistoryIndex
+  };
+};
+
 const handleInput = (state, value, inputSource = User) => {
   const {
     items,
     tabs,
-    preferences
+    preferences,
+    history
   } = state;
   const filteredItems = getFilteredItems(items, tabs, value, preferences);
+  const {
+    newHistory,
+    newHistoryIndex
+  } = addToHistory(history, value);
   return {
     ...state,
     searchValue: value,
     filteredItems,
+    history: newHistory,
+    historyIndex: newHistoryIndex,
     inputSource
   };
 };
 
-const handleSettingChecked = (state, name, value) => {
-  const {
-    modifiedSettings,
-    items,
-    tabs,
-    searchValue
-  } = state;
-  const newModifiedSettings = {
-    ...modifiedSettings,
-    [name]: true
+const SearchInput = 1;
+
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: SearchInput
   };
-  const filteredItems = getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+};
 
-  // TODO update value
+const handleScroll = (state, scrollTop, inputSource = User) => {
   return {
     ...state,
-    modifiedSettings: newModifiedSettings,
-    filteredItems
+    scrollOffset: scrollTop,
+    inputSource
   };
 };
 
-const handleSettingInput = (state, name, value, inputSource = User) => {
-  // TODO update value
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
+  if (oldModifiedSetings === newModifiedSettings) {
+    return oldFilteredItems;
+  }
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+};
+
+const getNewModifiedSettings = (modifiedSettings, name) => {
+  if (name in modifiedSettings) {
+    return modifiedSettings;
+  }
+  return {
+    ...modifiedSettings,
+    [name]: true
+  };
+};
+
+const handleSettingUpdate = (state, name, value, inputSource) => {
   const {
     modifiedSettings,
     items,
     tabs,
-    searchValue
+    searchValue,
+    preferences,
+    filteredItems
   } = state;
-  const newModifiedSettings = {
-    ...modifiedSettings,
-    [name]: true
+  const newModifiedSettings = getNewModifiedSettings(modifiedSettings, name);
+  const newPreferences = {
+    ...preferences,
+    [name]: value
   };
-
-  // TODO don't need to update items if it was already modified
-  const filteredItems = getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
   return {
     ...state,
     inputSource,
-    filteredItems
+    filteredItems: newFilteredItems,
+    preferences: newPreferences
   };
 };
 
-const handleSettingSelect = (state, name, value) => {
-  // TODO update value
-  return {
-    ...state
-  };
+const handleSettingChecked = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
+};
+
+const handleSettingInput = (state, name, value, inputSource = User) => {
+  return handleSettingUpdate(state, name, value, inputSource);
+};
+
+const handleSettingSelect = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
 };
 
 const initialize = async () => {
@@ -1167,6 +1238,7 @@ const Enum = 1;
 const String = 2;
 const Boolean$1 = 3;
 const Number$1 = 5;
+const Color = 6;
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1231,6 +1303,7 @@ const CursorBlinking = 'Cursor Blinking';
 const CursorBlinkingDescription = 'Controls how the cursor should blink';
 const CursorStyle = 'Cursor Style';
 const CursorStyleDescription = 'Controls the cursor style';
+const ColorValue = 'Color value';
 const CursorWidth = 'Cursor Width';
 const CursorWidthDescription = 'Controls the width of the cursor';
 const TabSize = 'Tab Size';
@@ -1503,6 +1576,9 @@ const formatOnSaveDescription = () => {
 const numberValue = () => {
   return i18nString(NumberValue);
 };
+const colorValue = () => {
+  return i18nString(ColorValue);
+};
 const stringValue = () => {
   return i18nString(StringValue);
 };
@@ -3018,6 +3094,13 @@ const getSettingItems = async () => {
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
+  }, {
+    id: 'Editor.background',
+    heading: 'Editor background',
+    description: 'Editor background color',
+    type: Color,
+    value: '#567567',
+    category: TextEditorTab
   }, {
     id: 'showUnused',
     heading: showUnused(),
@@ -3231,6 +3314,12 @@ const getSavedTabId = savedState => {
   }
   return '';
 };
+const getSavedScrollOffset = savedState => {
+  if (savedState && typeof savedState === 'object' && 'scrollOffset' in savedState && typeof savedState.scrollOffset === 'number') {
+    return savedState.scrollOffset;
+  }
+  return 0;
+};
 const restoreState = savedState => {
   if (!savedState) {
     return {
@@ -3238,7 +3327,8 @@ const restoreState = savedState => {
       minLineY: 0,
       deltaY: 0,
       tabId: '',
-      searchValue: ''
+      searchValue: '',
+      scrollOffset: 0
     };
   }
   const root = getSavedWorkspacePath(savedState);
@@ -3246,12 +3336,14 @@ const restoreState = savedState => {
   const deltaY = getSavedDeltaY(savedState);
   const tabId = getSavedTabId(savedState);
   const searchValue = getSavedSearchValue(savedState);
+  const scrollOffset = getSavedScrollOffset(savedState);
   return {
     root,
     minLineY,
     deltaY,
     tabId,
-    searchValue
+    searchValue,
+    scrollOffset
   };
 };
 
@@ -3265,7 +3357,8 @@ const getModifiedSettings = preferences => {
 const loadContent = async (state, savedState) => {
   const {
     searchValue,
-    tabId
+    tabId,
+    scrollOffset
   } = restoreState(savedState);
   const tabs = getTabs();
   const newTabs = getUpdatedTabs(tabs, tabId);
@@ -3280,11 +3373,25 @@ const loadContent = async (state, savedState) => {
     items,
     modifiedSettings,
     preferences,
+    scrollOffset,
     searchValue,
     tabs: newTabs
   };
 };
 
+const renderFocus = (oldState, newState) => {
+  const {
+    id
+  } = newState;
+  const selector = `[name="${SettingsSearch}"]`;
+  return ['Viewlet.focusSelector', id, selector];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const focusKey = FocusSettingsInput;
+  return ['Viewlet.setFocusContext', focusKey];
+};
+
 const Tab$1 = 'tab';
 const TabList = 'tablist';
 const AriaRoles = {
@@ -3378,7 +3485,9 @@ const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
+const HandleScroll = 'handleScroll';
 const HandleSettingSelect = 'handleSettingSelect';
+const HandleInputFocus = 'handleInputFocus';
 
 const getButtonClassName = hasSearchValue => {
   if (hasSearchValue) {
@@ -3410,7 +3519,8 @@ const getSettingsInputDom = () => {
     placeholder,
     childCount: 0,
     name: SettingsSearch,
-    onInput: HandleInput
+    onInput: HandleInput,
+    onFocus: HandleInputFocus
   }];
 };
 
@@ -3449,7 +3559,7 @@ const getItemCheckBoxVirtualDom = item => {
     className: SettingsItem,
     childCount: 3,
     role: 'group',
-    dataModified: isModified
+    'data-modified': isModified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3488,18 +3598,52 @@ const getItemLabelDom = (domId, label) => {
   }, text(label)];
 };
 
+const getItemColorVirtualDom = item => {
+  const {
+    heading,
+    description,
+    id,
+    modified
+  } = item;
+  const domId = getInputId(id);
+  const isModified = modified || false;
+  return [{
+    type: VirtualDomElements.Div,
+    className: SettingsItem,
+    childCount: 3,
+    role: 'group',
+    'data-modified': isModified
+  }, ...getItemHeadingDom(heading), {
+    type: VirtualDomElements.Div,
+    className: SettingsItemCheckBox,
+    childCount: 2
+  }, {
+    type: VirtualDomElements.Input,
+    className: mergeClassNames('ColorInput'),
+    inputType: 'color',
+    placeholder: colorValue(),
+    childCount: 0,
+    id: domId,
+    name: id,
+    onInput: HandleSettingInput
+  }, ...getItemLabelDom(domId, description)];
+};
+
 const getItemNumberVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    modified
   } = item;
   const domId = getInputId(id);
+  const isModified = modified || false;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 3,
-    role: 'group'
+    role: 'group',
+    'data-modified': isModified
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
     className: InputBox,
@@ -3541,6 +3685,7 @@ const getItemSelectVirtualDom = item => {
     type: VirtualDomElements.Select,
     className: Select,
     childCount: options.length,
+    id: domId,
     name: id,
     onChange: HandleSettingSelect
   }, ...options.flatMap(getOptionDom)];
@@ -3596,6 +3741,9 @@ const getItemVirtualDom = item => {
   if (item.type === Enum) {
     return getItemSelectVirtualDom(item);
   }
+  if (item.type === Color) {
+    return getItemColorVirtualDom(item);
+  }
   return getItemUnknownVirtualDom();
 };
 
@@ -3628,7 +3776,8 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsContent,
-    childCount: 2
+    childCount: 2,
+    onScroll: HandleScroll
   }, {
     type: VirtualDomElements.H1,
     className: SettingsContentHeading,
@@ -3699,12 +3848,22 @@ 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 {
     filteredItems,
     id
   } = newState;
-  const enabledTypes = [Number$1, String];
   const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
   const inputValues = numericSettings.map(item => ({
     name: item.id,
@@ -3729,6 +3888,12 @@ const getRenderer = diffType => {
       return renderValue;
     case RenderSettingValues:
       return renderSettingValues;
+    case RenderScrollOffset:
+      return renderScrollOffset;
+    case RenderFocusContext:
+      return renderFocusContext;
+    case RenderFocus:
+      return renderFocus;
     default:
       throw new Error('unknown renderer');
   }
@@ -3773,16 +3938,25 @@ const renderEventListeners = () => {
   }, {
     name: HandleSettingChecked,
     params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleScroll,
+    params: ['handleScroll', 'event.target.scrollTop'],
+    passive: true
   }, {
     name: HandleSettingSelect,
     params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleInputFocus,
+    params: ['handleInputFocus']
   }];
 };
 
 const saveState = state => {
   const {
     tabs,
-    searchValue
+    searchValue,
+    scrollOffset,
+    focus
   } = state;
   const selectedTab = getSelectedTabId(tabs);
   return {
@@ -3792,15 +3966,73 @@ const saveState = state => {
     maxLineY: 0,
     deltaY: 0,
     searchValue,
-    selectedTab
+    selectedTab,
+    scrollOffset,
+    focus
+  };
+};
+
+const useNextSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    preferences
+  } = state;
+  if (history.length === 0 || historyIndex >= history.length - 1) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex + 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
+  };
+};
+
+const usePreviousSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    preferences
+  } = state;
+  if (history.length === 0 || historyIndex <= 0) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex - 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
   };
 };
 
 const commandMap = {
   'Initialize.initialize': initialize,
+  'Settings.clear': wrapCommand(clear$1),
+  'Settings.clearHistory': wrapCommand(clearHistory),
   'Settings.create': create$1,
   'Settings.diff2': diff2,
+  'Settings.getName': getName,
   'Settings.getCommandIds': getCommandIds,
+  'Settings.handleClickTab': wrapCommand(handleClickTab),
+  'Settings.handleInput': wrapCommand(handleInput),
+  'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
+  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
+  'Settings.handleInputFocus': wrapCommand(handleInputFocus),
+  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect),
   'Settings.loadContent': wrapCommand(loadContent),
   'Settings.render2': render2,
   'Settings.renderActions': renderActions,
@@ -3808,12 +4040,9 @@ const commandMap = {
   'Settings.restoreState': restoreState,
   'Settings.saveState': wrapGetter(saveState),
   'Settings.terminate': terminate,
-  'Settings.handleClickTab': wrapCommand(handleClickTab),
-  'Settings.clear': wrapCommand(clear$1),
-  'Settings.handleInput': wrapCommand(handleInput),
-  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
-  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
-  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect)
+  'Settings.useNextSearchValue': wrapCommand(useNextSearchValue),
+  'Settings.usePreviousSearchValue': wrapCommand(usePreviousSearchValue),
+  'Settings.getKeyBindings': getKeyBindings
 };
 
 const rpcs = Object.create(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",