@lvce-editor/settings-view 1.20.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -477,7 +477,8 @@ const splitLines = lines => {
477
477
  return lines.split(NewLine);
478
478
  };
479
479
  const getCurrentStack = () => {
480
- const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
480
+ const stackLinesToSkip = 3;
481
+ const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
481
482
  return currentStack;
482
483
  };
483
484
  const getNewLineIndex = (string, startIndex = undefined) => {
@@ -748,6 +749,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
748
749
  return invokeHelper(ipc, method, params, true);
749
750
  };
750
751
 
752
+ class CommandNotFoundError extends Error {
753
+ constructor(command) {
754
+ super(`Command not found ${command}`);
755
+ this.name = 'CommandNotFoundError';
756
+ }
757
+ }
751
758
  const commands = Object.create(null);
752
759
  const register = commandMap => {
753
760
  Object.assign(commands, commandMap);
@@ -758,7 +765,7 @@ const getCommand = key => {
758
765
  const execute = (command, ...args) => {
759
766
  const fn = getCommand(command);
760
767
  if (!fn) {
761
- throw new Error(`command not found ${command}`);
768
+ throw new CommandNotFoundError(command);
762
769
  }
763
770
  return fn(...args);
764
771
  };
@@ -914,6 +921,33 @@ const terminate = () => {
914
921
  globalThis.close();
915
922
  };
916
923
 
924
+ const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scrollBarMinHeight) => {
925
+ const totalHeight = totalItemCount * itemHeight;
926
+ const scrollable = Math.max(0, totalHeight - height);
927
+ const thumbTrack = Math.max(0, height);
928
+ const thumbHeight = totalHeight > 0 ? Math.max(scrollBarMinHeight, Math.floor(height / Math.max(totalHeight, 1) * height)) : height;
929
+ const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
930
+ const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
931
+ return {
932
+ thumbHeight,
933
+ thumbTop
934
+ };
935
+ };
936
+
937
+ const computeVisibleItems = (items, height, scrollOffset, itemHeight) => {
938
+ const safeItemHeight = itemHeight <= 0 ? 1 : itemHeight;
939
+ const totalItems = items.length;
940
+ const minLineY = Math.max(0, Math.floor(scrollOffset / safeItemHeight));
941
+ const itemsPerViewport = Math.max(1, Math.ceil(height / safeItemHeight));
942
+ const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
943
+ const visibleItems = items.slice(minLineY, maxLineY);
944
+ return {
945
+ visibleItems,
946
+ minLineY,
947
+ maxLineY
948
+ };
949
+ };
950
+
917
951
  const filterBySearch = (items, searchValue) => {
918
952
  if (!searchValue || !searchValue.trim()) {
919
953
  return items;
@@ -933,6 +967,7 @@ const filterByTab = (items, tabs) => {
933
967
  const isItemModified = (item, preferences) => {
934
968
  return item.id in preferences;
935
969
  };
970
+
936
971
  const validateSettings = (items, modifiedSettings, preferences) => {
937
972
  return items.map(item => {
938
973
  const value = preferences[item.id] ?? item.value;
@@ -971,17 +1006,37 @@ const clear$1 = state => {
971
1006
  items,
972
1007
  tabs,
973
1008
  modifiedSettings,
974
- preferences
1009
+ preferences,
1010
+ height,
1011
+ itemHeight,
1012
+ scrollBarMinHeight
975
1013
  } = state;
976
1014
  const newSearchValue = '';
977
1015
  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
1016
+ const nextScrollOffset = 0;
1017
+ const {
1018
+ visibleItems,
1019
+ minLineY,
1020
+ maxLineY
1021
+ } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
1022
+ const {
1023
+ thumbHeight,
1024
+ thumbTop
1025
+ } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
978
1026
  return {
979
1027
  ...state,
980
1028
  filteredItems,
1029
+ visibleItems,
1030
+ minLineY,
1031
+ maxLineY,
1032
+ deltaY: 0,
1033
+ scrollOffset: nextScrollOffset,
981
1034
  focus: FocusSettingsInput,
982
1035
  focusSource: Script,
983
1036
  inputSource: Script,
984
- searchValue: newSearchValue
1037
+ searchValue: newSearchValue,
1038
+ scrollBarThumbHeight: thumbHeight,
1039
+ scrollBarThumbTop: thumbTop
985
1040
  };
986
1041
  };
987
1042
 
@@ -1013,6 +1068,8 @@ const create$1 = (id, uri, x, y, width, height) => {
1013
1068
  y,
1014
1069
  width,
1015
1070
  height,
1071
+ deltaY: 0,
1072
+ itemHeight: 100,
1016
1073
  tabs: [],
1017
1074
  items: [],
1018
1075
  searchValue: '',
@@ -1020,11 +1077,18 @@ const create$1 = (id, uri, x, y, width, height) => {
1020
1077
  preferences: {},
1021
1078
  inputSource: 0,
1022
1079
  scrollOffset: 0,
1080
+ minLineY: 0,
1081
+ maxLineY: 0,
1082
+ visibleItems: [],
1023
1083
  filteredItemsCount: 0,
1024
1084
  history: [],
1025
1085
  historyIndex: -1,
1026
1086
  modifiedSettings: {},
1027
- focusSource: 0
1087
+ focusSource: 0,
1088
+ scrollBarMinHeight: 0,
1089
+ scrollBarThumbHeight: 0,
1090
+ scrollBarThumbTop: 0,
1091
+ highlightsEnabled: false
1028
1092
  };
1029
1093
  set$1(id, state, state);
1030
1094
  };
@@ -1034,15 +1098,15 @@ const isEqual$4 = (oldState, newState) => {
1034
1098
  };
1035
1099
 
1036
1100
  const isEqual$3 = (oldState, newState) => {
1037
- return oldState.filteredItems === newState.filteredItems;
1101
+ return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
1038
1102
  };
1039
1103
 
1040
1104
  const isEqual$2 = (oldState, newState) => {
1041
- return newState.inputSource === User || oldState.scrollOffset === newState.scrollOffset;
1105
+ return true;
1042
1106
  };
1043
1107
 
1044
1108
  const isEqual$1 = (oldState, newState) => {
1045
- return oldState.filteredItems === newState.filteredItems;
1109
+ return oldState.filteredItems === newState.filteredItems && oldState.visibleItems === newState.visibleItems;
1046
1110
  };
1047
1111
 
1048
1112
  const RenderItems = 1;
@@ -1117,7 +1181,7 @@ const P = 50;
1117
1181
  const Ul = 60;
1118
1182
  const Select$1 = 63;
1119
1183
  const Option = 64;
1120
- const Label = 66;
1184
+ const Label$1 = 66;
1121
1185
  const VirtualDomElements = {
1122
1186
  __proto__: null,
1123
1187
  Aside,
@@ -1126,7 +1190,7 @@ const VirtualDomElements = {
1126
1190
  H1,
1127
1191
  H3,
1128
1192
  Input,
1129
- Label,
1193
+ Label: Label$1,
1130
1194
  Option,
1131
1195
  P,
1132
1196
  Select: Select$1,
@@ -1186,14 +1250,34 @@ const handleClickTab = (state, name) => {
1186
1250
  tabs,
1187
1251
  searchValue,
1188
1252
  modifiedSettings,
1189
- preferences
1253
+ preferences,
1254
+ height,
1255
+ itemHeight,
1256
+ scrollOffset
1190
1257
  } = state;
1191
1258
  const updatedTabs = getUpdatedTabs(tabs, name);
1192
1259
  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
1260
+ const {
1261
+ visibleItems,
1262
+ minLineY,
1263
+ maxLineY
1264
+ } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
1265
+ const {
1266
+ scrollBarMinHeight
1267
+ } = state;
1268
+ const {
1269
+ thumbHeight,
1270
+ thumbTop
1271
+ } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
1193
1272
  return {
1194
1273
  ...state,
1195
1274
  tabs: updatedTabs,
1196
- filteredItems
1275
+ filteredItems,
1276
+ visibleItems,
1277
+ minLineY,
1278
+ maxLineY,
1279
+ scrollBarThumbHeight: thumbHeight,
1280
+ scrollBarThumbTop: thumbTop
1197
1281
  };
1198
1282
  };
1199
1283
 
@@ -1264,9 +1348,25 @@ const handleInput = (state, value, inputSource = User) => {
1264
1348
  tabs,
1265
1349
  history,
1266
1350
  modifiedSettings,
1267
- preferences
1351
+ preferences,
1352
+ height,
1353
+ itemHeight
1268
1354
  } = state;
1269
1355
  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
1356
+ // Reset scroll when filter value changes so the user sees results from the top
1357
+ const nextScrollOffset = 0;
1358
+ const {
1359
+ visibleItems,
1360
+ minLineY,
1361
+ maxLineY
1362
+ } = computeVisibleItems(filteredItems, height, nextScrollOffset, itemHeight);
1363
+ const {
1364
+ scrollBarMinHeight
1365
+ } = state;
1366
+ const {
1367
+ thumbHeight,
1368
+ thumbTop
1369
+ } = computeScrollBar(height, filteredItems.length, itemHeight, nextScrollOffset, scrollBarMinHeight);
1270
1370
  const {
1271
1371
  newHistory,
1272
1372
  newHistoryIndex
@@ -1275,9 +1375,16 @@ const handleInput = (state, value, inputSource = User) => {
1275
1375
  ...state,
1276
1376
  searchValue: value,
1277
1377
  filteredItems,
1378
+ visibleItems,
1379
+ minLineY,
1380
+ maxLineY,
1381
+ deltaY: 0,
1382
+ scrollOffset: nextScrollOffset,
1278
1383
  history: newHistory,
1279
1384
  historyIndex: newHistoryIndex,
1280
- inputSource
1385
+ inputSource,
1386
+ scrollBarThumbHeight: thumbHeight,
1387
+ scrollBarThumbTop: thumbTop
1281
1388
  };
1282
1389
  };
1283
1390
 
@@ -1375,6 +1482,64 @@ const handleSettingSelect = (state, name, value, source = User) => {
1375
1482
  return handleSettingUpdate(state, name, value, source);
1376
1483
  };
1377
1484
 
1485
+ const clamp = (value, min, max) => {
1486
+ if (Number.isNaN(value)) {
1487
+ return min;
1488
+ }
1489
+ if (max < min) {
1490
+ return min;
1491
+ }
1492
+ if (value < min) {
1493
+ return min;
1494
+ }
1495
+ if (value > max) {
1496
+ return max;
1497
+ }
1498
+ return value;
1499
+ };
1500
+
1501
+ const handleWheel = (state, eventDeltaY, inputSource = User) => {
1502
+ const {
1503
+ deltaY: deltaY,
1504
+ filteredItems,
1505
+ height,
1506
+ itemHeight = 1
1507
+ } = state;
1508
+ const itemCount = filteredItems.length;
1509
+ const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
1510
+ const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
1511
+ const total = deltaY + limitedEventDelta;
1512
+ // Prevent scrolling beyond the available content height. If content is smaller
1513
+ // than the viewport, the maximum scroll is zero.
1514
+ const totalContentHeight = itemCount * itemHeight;
1515
+ const maxScrollable = Math.max(0, totalContentHeight - height);
1516
+ const clampedDeltaY = clamp(total, 0, maxScrollable);
1517
+ const scrollOffset = clampedDeltaY;
1518
+ const {
1519
+ visibleItems,
1520
+ minLineY,
1521
+ maxLineY
1522
+ } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
1523
+ const {
1524
+ scrollBarMinHeight
1525
+ } = state;
1526
+ const {
1527
+ thumbHeight,
1528
+ thumbTop
1529
+ } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
1530
+ return {
1531
+ ...state,
1532
+ deltaY: clampedDeltaY,
1533
+ scrollOffset,
1534
+ visibleItems,
1535
+ minLineY,
1536
+ maxLineY,
1537
+ inputSource,
1538
+ scrollBarThumbHeight: thumbHeight,
1539
+ scrollBarThumbTop: thumbTop
1540
+ };
1541
+ };
1542
+
1378
1543
  const initialize = async () => {
1379
1544
  // TODO
1380
1545
  };
@@ -1475,7 +1640,7 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
1475
1640
  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
1476
1641
  };
1477
1642
  const sendMessagePortToErrorWorker = async (port, rpcId) => {
1478
- const command = 'HandleMessagePort.handleMessagePort';
1643
+ const command = 'Errors.handleMessagePort';
1479
1644
  // @ts-ignore
1480
1645
  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
1481
1646
  };
@@ -1674,6 +1839,14 @@ const getAllPreferences = async () => {
1674
1839
  // @ts-ignore
1675
1840
  return invoke$3('Preferences.getAll');
1676
1841
  };
1842
+ const showSaveFilePicker = async () => {
1843
+ // @ts-ignore
1844
+ return invoke$3('FilePicker.showSaveFilePicker');
1845
+ };
1846
+ const getLogsDir = async () => {
1847
+ // @ts-ignore
1848
+ return invoke$3('PlatformPaths.getLogsDir');
1849
+ };
1677
1850
  const RendererWorker = {
1678
1851
  __proto__: null,
1679
1852
  activateByEvent,
@@ -1699,6 +1872,7 @@ const RendererWorker = {
1699
1872
  getFolderSize,
1700
1873
  getIcons,
1701
1874
  getKeyBindings,
1875
+ getLogsDir,
1702
1876
  getMarkdownDom,
1703
1877
  getNodeVersion,
1704
1878
  getPreference,
@@ -1745,6 +1919,7 @@ const RendererWorker = {
1745
1919
  showContextMenu,
1746
1920
  showErrorDialog,
1747
1921
  showMessageBox,
1922
+ showSaveFilePicker,
1748
1923
  uninstallExtension,
1749
1924
  unregisterWebViewInterceptor,
1750
1925
  writeClipBoardImage,
@@ -3966,9 +4141,28 @@ const loadContent = async (state, savedState) => {
3966
4141
  const preferences = await getPreferences();
3967
4142
  const modifiedSettings = getModifiedSettings(preferences);
3968
4143
  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
4144
+ const {
4145
+ height,
4146
+ itemHeight
4147
+ } = state;
4148
+ const {
4149
+ visibleItems,
4150
+ minLineY,
4151
+ maxLineY
4152
+ } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
4153
+ const {
4154
+ scrollBarMinHeight
4155
+ } = state;
4156
+ const {
4157
+ thumbHeight,
4158
+ thumbTop
4159
+ } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
3969
4160
  return {
3970
4161
  ...state,
3971
4162
  filteredItems,
4163
+ visibleItems,
4164
+ minLineY,
4165
+ maxLineY,
3972
4166
  inputSource: Script,
3973
4167
  items,
3974
4168
  modifiedSettings,
@@ -3977,7 +4171,9 @@ const loadContent = async (state, savedState) => {
3977
4171
  searchValue,
3978
4172
  tabs: newTabs,
3979
4173
  history,
3980
- historyIndex
4174
+ historyIndex,
4175
+ scrollBarThumbHeight: thumbHeight,
4176
+ scrollBarThumbTop: thumbTop
3981
4177
  };
3982
4178
  };
3983
4179
 
@@ -4002,6 +4198,7 @@ const CheckBox = 'CheckBox';
4002
4198
  const ErrorMessage = 'ErrorMessage';
4003
4199
  const InputBox = 'InputBox';
4004
4200
  const InputBoxError = 'InputBoxError';
4201
+ const Label = 'Label';
4005
4202
  const MaskIcon = 'MaskIcon';
4006
4203
  const MaskIconClearAll = 'MaskIconClearAll';
4007
4204
  const ModifiedIndicator = 'ModifiedIndicator';
@@ -4014,9 +4211,14 @@ const SettingsHeader = 'SettingsHeader';
4014
4211
  const SettingsInputWrapper = 'SettingsInputWrapper';
4015
4212
  const SettingsItem = 'SettingsItem';
4016
4213
  const SettingsItemCheckBox = 'SettingsItemCheckBox';
4214
+ const SettingsItemHeading = 'SettingsItemHeading';
4017
4215
  const SettingsItems = 'SettingsItems';
4216
+ const SettingsItemWrapper = 'SettingsItemWrapper';
4018
4217
  const SettingsMain = 'SettingsMain';
4019
4218
  const SettingsNoResults = 'SettingsNoResults';
4219
+ const SettingsScrollBar = 'ScrollBar';
4220
+ const SettingsScrollBarSmall = 'ScrollBarSmall';
4221
+ const SettingsScrollBarThumb = 'ScrollBarThumb';
4020
4222
  const SettingsSearchInput = 'SettingsSearchInput';
4021
4223
  const SettingsSideBar = 'SettingsSideBar';
4022
4224
  const SettingsTabs = 'SettingsTabs';
@@ -4041,7 +4243,7 @@ const HandleClickTab = 'handleClickTab';
4041
4243
  const HandleInput = 'handleInput';
4042
4244
  const HandleSettingInput = 'handleSettingInput';
4043
4245
  const HandleSettingChecked = 'handleSettingChecked';
4044
- const HandleScroll = 'handleScroll';
4246
+ const HandleWheel = 'handleWheel';
4045
4247
  const HandleSettingSelect = 'handleSettingSelect';
4046
4248
  const HandleInputFocus = 'handleInputFocus';
4047
4249
 
@@ -4077,6 +4279,10 @@ const getSettingsInputDom = () => {
4077
4279
  type: VirtualDomElements.Input,
4078
4280
  className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
4079
4281
  placeholder,
4282
+ autocomplete: 'off',
4283
+ autocorrect: 'off',
4284
+ autocapitalize: 'off',
4285
+ spellcheck: false,
4080
4286
  childCount: 0,
4081
4287
  name: SettingsSearch,
4082
4288
  onInput: HandleInput,
@@ -4100,6 +4306,29 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
4100
4306
  }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
4101
4307
  };
4102
4308
 
4309
+ const getContentHeadingDom = headerText => {
4310
+ return [{
4311
+ type: VirtualDomElements.H1,
4312
+ className: SettingsContentHeading,
4313
+ childCount: 1
4314
+ }, text(headerText)];
4315
+ };
4316
+
4317
+ const parentNode$1 = {
4318
+ type: VirtualDomElements.Div,
4319
+ className: mergeClassNames(SettingsScrollBar, SettingsScrollBarSmall),
4320
+ childCount: 1
4321
+ };
4322
+ const getScrollBarDom = (thumbHeight, thumbTop) => {
4323
+ return [parentNode$1, {
4324
+ type: VirtualDomElements.Div,
4325
+ className: SettingsScrollBarThumb,
4326
+ childCount: 0,
4327
+ height: `${thumbHeight}px`,
4328
+ top: `${thumbTop}px`
4329
+ }];
4330
+ };
4331
+
4103
4332
  const getErrorMessageDom = errorMessage => {
4104
4333
  if (!errorMessage) {
4105
4334
  return [];
@@ -4115,6 +4344,24 @@ const getInputId = id => {
4115
4344
  return id.replaceAll('.', '\\.');
4116
4345
  };
4117
4346
 
4347
+ const parent = {
4348
+ type: VirtualDomElements.H3,
4349
+ className: SettingsItemHeading,
4350
+ childCount: 1
4351
+ };
4352
+ const getItemHeadingDom = heading => {
4353
+ return [parent, text(heading)];
4354
+ };
4355
+
4356
+ const getItemLabelDom = (domId, label) => {
4357
+ return [{
4358
+ type: VirtualDomElements.Label,
4359
+ htmlFor: domId,
4360
+ childCount: 1,
4361
+ className: Label
4362
+ }, text(label)];
4363
+ };
4364
+
4118
4365
  const getItemCheckBoxVirtualDom = item => {
4119
4366
  const {
4120
4367
  heading,
@@ -4130,13 +4377,10 @@ const getItemCheckBoxVirtualDom = item => {
4130
4377
  return [{
4131
4378
  type: VirtualDomElements.Div,
4132
4379
  className: SettingsItem,
4133
- childCount: 3 + errorChildCount,
4380
+ childCount: 2 + errorChildCount,
4134
4381
  role: AriaRoles.Group,
4135
4382
  'data-modified': modified
4136
- }, {
4137
- type: VirtualDomElements.H3,
4138
- childCount: 1
4139
- }, text(heading), {
4383
+ }, ...getItemHeadingDom(heading), {
4140
4384
  type: VirtualDomElements.Div,
4141
4385
  className: SettingsItemCheckBox,
4142
4386
  childCount: 2
@@ -4148,28 +4392,7 @@ const getItemCheckBoxVirtualDom = item => {
4148
4392
  inputType: 'checkbox',
4149
4393
  name: id,
4150
4394
  onChange: HandleSettingChecked
4151
- }, {
4152
- type: VirtualDomElements.Label,
4153
- childCount: 1,
4154
- htmlFor: domId
4155
- }, text(description), ...getErrorMessageDom(errorMessage)];
4156
- };
4157
-
4158
- const parent = {
4159
- type: VirtualDomElements.H3,
4160
- childCount: 1
4161
- };
4162
- const getItemHeadingDom = heading => {
4163
- return [parent, text(heading)];
4164
- };
4165
-
4166
- const getItemLabelDom = (domId, label) => {
4167
- return [{
4168
- type: VirtualDomElements.Label,
4169
- htmlFor: domId,
4170
- childCount: 1,
4171
- className: 'Label'
4172
- }, text(label)];
4395
+ }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
4173
4396
  };
4174
4397
 
4175
4398
  const getItemColorVirtualDom = item => {
@@ -4306,6 +4529,7 @@ const getItemStringVirtualDom = item => {
4306
4529
  hasError,
4307
4530
  errorMessage
4308
4531
  } = item;
4532
+ const domId = getInputId(id);
4309
4533
  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
4310
4534
  const errorChildCount = hasError ? 1 : 0;
4311
4535
  return [{
@@ -4313,18 +4537,13 @@ const getItemStringVirtualDom = item => {
4313
4537
  className: SettingsItem,
4314
4538
  childCount: 3 + errorChildCount,
4315
4539
  role: AriaRoles.Group
4316
- }, {
4317
- type: VirtualDomElements.H3,
4318
- childCount: 1
4319
- }, text(heading), {
4320
- type: VirtualDomElements.P,
4321
- childCount: 1
4322
- }, text(description), {
4540
+ }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
4323
4541
  type: VirtualDomElements.Input,
4324
4542
  className: inputClassName,
4325
4543
  inputType: 'text',
4326
4544
  placeholder: stringValue(),
4327
4545
  childCount: 0,
4546
+ id: domId,
4328
4547
  name: id,
4329
4548
  onInput: HandleSettingInput
4330
4549
  }, ...getErrorMessageDom(errorMessage)];
@@ -4369,26 +4588,28 @@ const getItemUrlVirtualDom = item => {
4369
4588
  }, ...getErrorMessageDom(errorMessage)];
4370
4589
  };
4371
4590
 
4372
- const getItemVirtualDom = item => {
4373
- if (item.type === Number$1) {
4374
- return getItemNumberVirtualDom(item);
4375
- }
4376
- if (item.type === Boolean$1) {
4377
- return getItemCheckBoxVirtualDom(item);
4378
- }
4379
- if (item.type === String) {
4380
- return getItemStringVirtualDom(item);
4381
- }
4382
- if (item.type === Enum) {
4383
- return getItemSelectVirtualDom(item);
4384
- }
4385
- if (item.type === Color) {
4386
- return getItemColorVirtualDom(item);
4387
- }
4388
- if (item.type === Url) {
4389
- return getItemUrlVirtualDom(item);
4591
+ const getItemRender = type => {
4592
+ switch (type) {
4593
+ case Number$1:
4594
+ return getItemNumberVirtualDom;
4595
+ case Boolean$1:
4596
+ return getItemCheckBoxVirtualDom;
4597
+ case String:
4598
+ return getItemStringVirtualDom;
4599
+ case Enum:
4600
+ return getItemSelectVirtualDom;
4601
+ case Color:
4602
+ return getItemColorVirtualDom;
4603
+ case Url:
4604
+ return getItemUrlVirtualDom;
4605
+ default:
4606
+ return getItemUnknownVirtualDom;
4390
4607
  }
4391
- return getItemUnknownVirtualDom();
4608
+ };
4609
+
4610
+ const getItemVirtualDom = item => {
4611
+ const fn = getItemRender(item.type);
4612
+ return fn(item);
4392
4613
  };
4393
4614
 
4394
4615
  const getSettingsNoResultsDom = searchValue => {
@@ -4414,19 +4635,19 @@ const getSettingsItemsDom = (items, searchValue) => {
4414
4635
  }, ...items.flatMap(getItemVirtualDom)];
4415
4636
  };
4416
4637
 
4417
- const getSettingsContentDom = (items, tabs, searchValue) => {
4638
+ const getSettingsContentDom = (visibleItems, tabs, searchValue, thumbHeight, thumbTop) => {
4418
4639
  const selectedTab = tabs.find(tab => tab.selected);
4419
4640
  const headerText = selectedTab ? selectedTab.label : settingsContent();
4420
4641
  return [{
4421
4642
  type: VirtualDomElements.Div,
4422
4643
  className: SettingsContent,
4423
4644
  childCount: 2,
4424
- onScroll: HandleScroll
4425
- }, {
4426
- type: VirtualDomElements.H1,
4427
- className: SettingsContentHeading,
4428
- childCount: 1
4429
- }, text(headerText), ...getSettingsItemsDom(items, searchValue)];
4645
+ onWheel: HandleWheel
4646
+ }, ...getContentHeadingDom(headerText), {
4647
+ type: VirtualDomElements.Div,
4648
+ className: SettingsItemWrapper,
4649
+ childCount: 2
4650
+ }, ...getSettingsItemsDom(visibleItems, searchValue), ...getScrollBarDom(thumbHeight, thumbTop)];
4430
4651
  };
4431
4652
 
4432
4653
  const getTabClassName = tab => {
@@ -4464,27 +4685,31 @@ const getSettingsSideBarDom = tabs => {
4464
4685
  }, ...getSettingsTabsDom(tabs)];
4465
4686
  };
4466
4687
 
4467
- const getSettingsMainDom = (tabs, items, searchValue) => {
4688
+ const getSettingsMainDom = (tabs, visibleItems, totalItemCount, searchValue, thumbHeight, thumbTop) => {
4468
4689
  return [{
4469
4690
  type: VirtualDomElements.Div,
4470
4691
  className: SettingsMain,
4471
4692
  childCount: 2
4472
- }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
4693
+ }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(visibleItems, tabs, searchValue, thumbHeight, thumbTop)];
4473
4694
  };
4474
4695
 
4696
+ const parentNode = {
4697
+ type: VirtualDomElements.Div,
4698
+ childCount: 2,
4699
+ className: mergeClassNames(Viewlet, Settings)
4700
+ };
4475
4701
  const getSettingsDom = state => {
4476
4702
  const {
4477
4703
  tabs,
4478
4704
  filteredItems,
4479
- searchValue
4705
+ visibleItems,
4706
+ searchValue,
4707
+ scrollBarThumbHeight,
4708
+ scrollBarThumbTop
4480
4709
  } = state;
4481
4710
  const hasSearchValue = searchValue.trim().length > 0;
4482
4711
  const filteredItemsCount = filteredItems.length;
4483
- return [{
4484
- type: VirtualDomElements.Div,
4485
- childCount: 2,
4486
- className: mergeClassNames(Viewlet, Settings)
4487
- }, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
4712
+ return [parentNode, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, visibleItems, filteredItemsCount, searchValue, scrollBarThumbHeight, scrollBarThumbTop)];
4488
4713
  };
4489
4714
 
4490
4715
  const renderItems = (oldState, newState) => {
@@ -4586,9 +4811,15 @@ const renderEventListeners = () => {
4586
4811
  }, {
4587
4812
  name: HandleSettingChecked,
4588
4813
  params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
4589
- }, {
4590
- name: HandleScroll,
4591
- params: ['handleScroll', 'event.target.scrollTop'],
4814
+ },
4815
+ // {
4816
+ // name: DomEventListenerFunctions.HandleScroll,
4817
+ // params: ['handleScroll', 'event.target.scrollTop'],
4818
+ // passive: true,
4819
+ // },
4820
+ {
4821
+ name: HandleWheel,
4822
+ params: ['handleWheel', 'event.deltaY'],
4592
4823
  passive: true
4593
4824
  }, {
4594
4825
  name: HandleSettingSelect,
@@ -4682,6 +4913,7 @@ const commandMap = {
4682
4913
  'Settings.handleInputBlur': wrapCommand(handleInputBlur),
4683
4914
  'Settings.handleInput': wrapCommand(handleInput),
4684
4915
  'Settings.handleScroll': wrapCommand(handleScroll),
4916
+ 'Settings.handleWheel': wrapCommand(handleWheel),
4685
4917
  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
4686
4918
  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
4687
4919
  'Settings.handleInputFocus': wrapCommand(handleInputFocus),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lvce-editor/settings-view",
3
- "version": "1.20.0",
3
+ "version": "2.0.0",
4
4
  "description": "Explorer Worker",
5
5
  "repository": {
6
6
  "type": "git",