@lvce-editor/settings-view 1.14.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
   };
 };
 
@@ -992,7 +1004,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     filteredItemsCount: 0,
     history: [],
     historyIndex: -1,
-    modifiedSettings: {}
+    modifiedSettings: {},
+    focusSource: 0
   };
   set$1(id, state, state);
 };
@@ -1018,6 +1031,7 @@ 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;
@@ -1046,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) {
@@ -1124,6 +1147,15 @@ const handleInput = (state, value, inputSource = User) => {
   };
 };
 
+const SearchInput = 1;
+
+const handleInputFocus = state => {
+  return {
+    ...state,
+    focus: SearchInput
+  };
+};
+
 const handleScroll = (state, scrollTop, inputSource = User) => {
   return {
     ...state,
@@ -1206,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;
@@ -1270,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';
@@ -1542,6 +1576,9 @@ const formatOnSaveDescription = () => {
 const numberValue = () => {
   return i18nString(NumberValue);
 };
+const colorValue = () => {
+  return i18nString(ColorValue);
+};
 const stringValue = () => {
   return i18nString(StringValue);
 };
@@ -3057,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(),
@@ -3335,6 +3379,19 @@ const loadContent = async (state, savedState) => {
   };
 };
 
+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 = {
@@ -3430,6 +3487,7 @@ const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
 const HandleScroll = 'handleScroll';
 const HandleSettingSelect = 'handleSettingSelect';
+const HandleInputFocus = 'handleInputFocus';
 
 const getButtonClassName = hasSearchValue => {
   if (hasSearchValue) {
@@ -3461,7 +3519,8 @@ const getSettingsInputDom = () => {
     placeholder,
     childCount: 0,
     name: SettingsSearch,
-    onInput: HandleInput
+    onInput: HandleInput,
+    onFocus: HandleInputFocus
   }];
 };
 
@@ -3539,6 +3598,37 @@ 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,
@@ -3595,6 +3685,7 @@ const getItemSelectVirtualDom = item => {
     type: VirtualDomElements.Select,
     className: Select,
     childCount: options.length,
+    id: domId,
     name: id,
     onChange: HandleSettingSelect
   }, ...options.flatMap(getOptionDom)];
@@ -3650,6 +3741,9 @@ const getItemVirtualDom = item => {
   if (item.type === Enum) {
     return getItemSelectVirtualDom(item);
   }
+  if (item.type === Color) {
+    return getItemColorVirtualDom(item);
+  }
   return getItemUnknownVirtualDom();
 };
 
@@ -3764,12 +3858,12 @@ const renderScrollOffset = (oldState, newState) => {
   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,
@@ -3796,6 +3890,10 @@ const getRenderer = diffType => {
       return renderSettingValues;
     case RenderScrollOffset:
       return renderScrollOffset;
+    case RenderFocusContext:
+      return renderFocusContext;
+    case RenderFocus:
+      return renderFocus;
     default:
       throw new Error('unknown renderer');
   }
@@ -3847,6 +3945,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleSettingSelect,
     params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleInputFocus,
+    params: ['handleInputFocus']
   }];
 };
 
@@ -3854,7 +3955,8 @@ const saveState = state => {
   const {
     tabs,
     searchValue,
-    scrollOffset
+    scrollOffset,
+    focus
   } = state;
   const selectedTab = getSelectedTabId(tabs);
   return {
@@ -3865,7 +3967,8 @@ const saveState = state => {
     deltaY: 0,
     searchValue,
     selectedTab,
-    scrollOffset
+    scrollOffset,
+    focus
   };
 };
 
@@ -3918,14 +4021,17 @@ const usePreviousSearchValue = state => {
 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,
@@ -3935,7 +4041,8 @@ const commandMap = {
   'Settings.saveState': wrapGetter(saveState),
   'Settings.terminate': terminate,
   'Settings.useNextSearchValue': wrapCommand(useNextSearchValue),
-  'Settings.usePreviousSearchValue': wrapCommand(usePreviousSearchValue)
+  '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.14.0",
+  "version": "1.15.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",