@lvce-editor/settings-view 1.20.0 → 1.21.0

package/dist/settingsViewWorkerMain.js

@@ -477,7 +477,8 @@ const splitLines = lines => {
   return lines.split(NewLine);
 };
 const getCurrentStack = () => {
-  const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
 const getNewLineIndex = (string, startIndex = undefined) => {
@@ -748,6 +749,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
 const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
@@ -758,7 +765,7 @@ const getCommand = key => {
 const execute = (command, ...args) => {
   const fn = getCommand(command);
   if (!fn) {
-    throw new Error(`command not found ${command}`);
+    throw new CommandNotFoundError(command);
   }
   return fn(...args);
 };
@@ -933,6 +940,7 @@ const filterByTab = (items, tabs) => {
 const isItemModified = (item, preferences) => {
   return item.id in preferences;
 };
+
 const validateSettings = (items, modifiedSettings, preferences) => {
   return items.map(item => {
     const value = preferences[item.id] ?? item.value;
@@ -1013,6 +1021,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     y,
     width,
     height,
+    deltaY: 0,
+    itemHeight: 100,
     tabs: [],
     items: [],
     searchValue: '',
@@ -1020,11 +1030,18 @@ const create$1 = (id, uri, x, y, width, height) => {
     preferences: {},
     inputSource: 0,
     scrollOffset: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    visibleItems: [],
     filteredItemsCount: 0,
     history: [],
     historyIndex: -1,
     modifiedSettings: {},
-    focusSource: 0
+    focusSource: 0,
+    scrollBarMinHeight: 0,
+    scrollBarThumbHeight: 0,
+    scrollBarThumbTop: 0,
+    highlightsEnabled: false
   };
   set$1(id, state, state);
 };
@@ -1034,7 +1051,7 @@ const isEqual$4 = (oldState, newState) => {
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.filteredItems === newState.filteredItems;
+  return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -1117,7 +1134,7 @@ const P = 50;
 const Ul = 60;
 const Select$1 = 63;
 const Option = 64;
-const Label = 66;
+const Label$1 = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
@@ -1126,7 +1143,7 @@ const VirtualDomElements = {
   H1,
   H3,
   Input,
-  Label,
+  Label: Label$1,
   Option,
   P,
   Select: Select$1,
@@ -1375,6 +1392,88 @@ const handleSettingSelect = (state, name, value, source = User) => {
   return handleSettingUpdate(state, name, value, source);
 };
 
+const clamp = (value, min, max) => {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  if (max < min) {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
+const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scrollBarMinHeight) => {
+  const totalHeight = totalItemCount * itemHeight;
+  const scrollable = Math.max(0, totalHeight - height);
+  const thumbTrack = Math.max(0, height);
+  const thumbHeight = totalHeight > 0 ? Math.max(scrollBarMinHeight, Math.floor(height / Math.max(totalHeight, 1) * height)) : height;
+  const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
+  const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
+  return {
+    thumbHeight,
+    thumbTop
+  };
+};
+
+const computeVisibleItems = (items, height, scrollOffset, itemHeight) => {
+  const safeItemHeight = itemHeight <= 0 ? 1 : itemHeight;
+  const totalItems = items.length;
+  const minLineY = Math.max(0, Math.floor(scrollOffset / safeItemHeight));
+  const itemsPerViewport = Math.max(1, Math.ceil(height / safeItemHeight));
+  const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
+  const visibleItems = items.slice(minLineY, maxLineY);
+  return {
+    visibleItems,
+    minLineY,
+    maxLineY
+  };
+};
+
+const handleWheel = (state, eventDeltaY, inputSource = User) => {
+  const {
+    deltaY: deltaY,
+    filteredItems,
+    height,
+    itemHeight = 1
+  } = state;
+  const itemCount = filteredItems.length;
+  const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
+  const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
+  const total = deltaY + limitedEventDelta;
+  const max = itemCount === 0 ? Number.POSITIVE_INFINITY : Math.max(0, itemCount * itemHeight);
+  const clampedDeltaY = clamp(total, 0, max);
+  const scrollOffset = clampedDeltaY;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  return {
+    ...state,
+    deltaY: clampedDeltaY,
+    scrollOffset,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    inputSource,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
@@ -1475,7 +1574,7 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
 };
 const sendMessagePortToErrorWorker = async (port, rpcId) => {
-  const command = 'HandleMessagePort.handleMessagePort';
+  const command = 'Errors.handleMessagePort';
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
 };
@@ -1674,6 +1773,14 @@ const getAllPreferences = async () => {
   // @ts-ignore
   return invoke$3('Preferences.getAll');
 };
+const showSaveFilePicker = async () => {
+  // @ts-ignore
+  return invoke$3('FilePicker.showSaveFilePicker');
+};
+const getLogsDir = async () => {
+  // @ts-ignore
+  return invoke$3('PlatformPaths.getLogsDir');
+};
 const RendererWorker = {
   __proto__: null,
   activateByEvent,
@@ -1699,6 +1806,7 @@ const RendererWorker = {
   getFolderSize,
   getIcons,
   getKeyBindings,
+  getLogsDir,
   getMarkdownDom,
   getNodeVersion,
   getPreference,
@@ -1745,6 +1853,7 @@ const RendererWorker = {
   showContextMenu,
   showErrorDialog,
   showMessageBox,
+  showSaveFilePicker,
   uninstallExtension,
   unregisterWebViewInterceptor,
   writeClipBoardImage,
@@ -3966,9 +4075,28 @@ const loadContent = async (state, savedState) => {
   const preferences = await getPreferences();
   const modifiedSettings = getModifiedSettings(preferences);
   const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
+  const {
+    height,
+    itemHeight
+  } = state;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
     inputSource: Script,
     items,
     modifiedSettings,
@@ -3977,7 +4105,9 @@ const loadContent = async (state, savedState) => {
     searchValue,
     tabs: newTabs,
     history,
-    historyIndex
+    historyIndex,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -4002,6 +4132,7 @@ const CheckBox = 'CheckBox';
 const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
 const InputBoxError = 'InputBoxError';
+const Label = 'Label';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -4014,6 +4145,7 @@ const SettingsHeader = 'SettingsHeader';
 const SettingsInputWrapper = 'SettingsInputWrapper';
 const SettingsItem = 'SettingsItem';
 const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const SettingsItemHeading = 'SettingsItemHeading';
 const SettingsItems = 'SettingsItems';
 const SettingsMain = 'SettingsMain';
 const SettingsNoResults = 'SettingsNoResults';
@@ -4042,6 +4174,7 @@ const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
 const HandleScroll = 'handleScroll';
+const HandleWheel = 'handleWheel';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
 
@@ -4077,6 +4210,10 @@ const getSettingsInputDom = () => {
     type: VirtualDomElements.Input,
     className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
+    autocomplete: 'off',
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    spellcheck: false,
     childCount: 0,
     name: SettingsSearch,
     onInput: HandleInput,
@@ -4115,6 +4252,24 @@ const getInputId = id => {
   return id.replaceAll('.', '\\.');
 };
 
+const parent = {
+  type: VirtualDomElements.H3,
+  className: SettingsItemHeading,
+  childCount: 1
+};
+const getItemHeadingDom = heading => {
+  return [parent, text(heading)];
+};
+
+const getItemLabelDom = (domId, label) => {
+  return [{
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: Label
+  }, text(label)];
+};
+
 const getItemCheckBoxVirtualDom = item => {
   const {
     heading,
@@ -4130,13 +4285,10 @@ const getItemCheckBoxVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3 + errorChildCount,
+    childCount: 2 + errorChildCount,
     role: AriaRoles.Group,
     'data-modified': modified
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
+  }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
@@ -4148,28 +4300,7 @@ const getItemCheckBoxVirtualDom = item => {
     inputType: 'checkbox',
     name: id,
     onChange: HandleSettingChecked
-  }, {
-    type: VirtualDomElements.Label,
-    childCount: 1,
-    htmlFor: domId
-  }, text(description), ...getErrorMessageDom(errorMessage)];
-};
-
-const parent = {
-  type: VirtualDomElements.H3,
-  childCount: 1
-};
-const getItemHeadingDom = heading => {
-  return [parent, text(heading)];
-};
-
-const getItemLabelDom = (domId, label) => {
-  return [{
-    type: VirtualDomElements.Label,
-    htmlFor: domId,
-    childCount: 1,
-    className: 'Label'
-  }, text(label)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemColorVirtualDom = item => {
@@ -4306,6 +4437,7 @@ const getItemStringVirtualDom = item => {
     hasError,
     errorMessage
   } = item;
+  const domId = getInputId(id);
   const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
   const errorChildCount = hasError ? 1 : 0;
   return [{
@@ -4313,18 +4445,13 @@ const getItemStringVirtualDom = item => {
     className: SettingsItem,
     childCount: 3 + errorChildCount,
     role: AriaRoles.Group
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
     className: inputClassName,
     inputType: 'text',
     placeholder: stringValue(),
     childCount: 0,
+    id: domId,
     name: id,
     onInput: HandleSettingInput
   }, ...getErrorMessageDom(errorMessage)];
@@ -4369,26 +4496,28 @@ const getItemUrlVirtualDom = item => {
   }, ...getErrorMessageDom(errorMessage)];
 };
 
-const getItemVirtualDom = item => {
-  if (item.type === Number$1) {
-    return getItemNumberVirtualDom(item);
-  }
-  if (item.type === Boolean$1) {
-    return getItemCheckBoxVirtualDom(item);
-  }
-  if (item.type === String) {
-    return getItemStringVirtualDom(item);
-  }
-  if (item.type === Enum) {
-    return getItemSelectVirtualDom(item);
-  }
-  if (item.type === Color) {
-    return getItemColorVirtualDom(item);
-  }
-  if (item.type === Url) {
-    return getItemUrlVirtualDom(item);
+const getItemRender = type => {
+  switch (type) {
+    case Number$1:
+      return getItemNumberVirtualDom;
+    case Boolean$1:
+      return getItemCheckBoxVirtualDom;
+    case String:
+      return getItemStringVirtualDom;
+    case Enum:
+      return getItemSelectVirtualDom;
+    case Color:
+      return getItemColorVirtualDom;
+    case Url:
+      return getItemUrlVirtualDom;
+    default:
+      return getItemUnknownVirtualDom;
   }
-  return getItemUnknownVirtualDom();
+};
+
+const getItemVirtualDom = item => {
+  const fn = getItemRender(item.type);
+  return fn(item);
 };
 
 const getSettingsNoResultsDom = searchValue => {
@@ -4590,6 +4719,10 @@ const renderEventListeners = () => {
     name: HandleScroll,
     params: ['handleScroll', 'event.target.scrollTop'],
     passive: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaY'],
+    passive: true
   }, {
     name: HandleSettingSelect,
     params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
@@ -4682,6 +4815,7 @@ const commandMap = {
   'Settings.handleInputBlur': wrapCommand(handleInputBlur),
   'Settings.handleInput': wrapCommand(handleInput),
   'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleWheel': wrapCommand(handleWheel),
   'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
   'Settings.handleSettingInput': wrapCommand(handleSettingInput),
   'Settings.handleInputFocus': wrapCommand(handleInputFocus),

package/package.json

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