@lvce-editor/main-area-worker 1.6.0 → 1.8.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.
- package/dist/mainAreaWorkerMain.js +60 -11
- package/package.json +1 -1
|
@@ -1255,9 +1255,54 @@ const handleClickCloseTab = (state, groupId, tabId) => {
|
|
|
1255
1255
|
return state;
|
|
1256
1256
|
};
|
|
1257
1257
|
|
|
1258
|
-
const
|
|
1259
|
-
|
|
1260
|
-
|
|
1258
|
+
const selectTab = async (state, groupIndex, index) => {
|
|
1259
|
+
const {
|
|
1260
|
+
layout
|
|
1261
|
+
} = state;
|
|
1262
|
+
const {
|
|
1263
|
+
groups
|
|
1264
|
+
} = layout;
|
|
1265
|
+
|
|
1266
|
+
// Validate indexes
|
|
1267
|
+
if (groupIndex < 0 || groupIndex >= groups.length) {
|
|
1268
|
+
return state;
|
|
1269
|
+
}
|
|
1270
|
+
const group = groups[groupIndex];
|
|
1271
|
+
if (index < 0 || index >= group.tabs.length) {
|
|
1272
|
+
return state;
|
|
1273
|
+
}
|
|
1274
|
+
const tab = group.tabs[index];
|
|
1275
|
+
const groupId = group.id;
|
|
1276
|
+
const tabId = tab.id;
|
|
1277
|
+
|
|
1278
|
+
// Return same state if this group and tab are already active
|
|
1279
|
+
if (layout.activeGroupId === groupId && group.activeTabId === tabId) {
|
|
1280
|
+
return state;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
// Update the groups array with the new active tab and active group
|
|
1284
|
+
const updatedGroups = groups.map((g, i) => ({
|
|
1285
|
+
...g,
|
|
1286
|
+
activeTabId: i === groupIndex ? tabId : g.activeTabId,
|
|
1287
|
+
focused: i === groupIndex
|
|
1288
|
+
}));
|
|
1289
|
+
return {
|
|
1290
|
+
...state,
|
|
1291
|
+
layout: {
|
|
1292
|
+
...layout,
|
|
1293
|
+
activeGroupId: groupId,
|
|
1294
|
+
groups: updatedGroups
|
|
1295
|
+
}
|
|
1296
|
+
};
|
|
1297
|
+
};
|
|
1298
|
+
|
|
1299
|
+
const handleClickTab = async (state, groupIndexRaw, indexRaw) => {
|
|
1300
|
+
if (!groupIndexRaw || !indexRaw) {
|
|
1301
|
+
return state;
|
|
1302
|
+
}
|
|
1303
|
+
const groupIndex = Number.parseInt(groupIndexRaw);
|
|
1304
|
+
const index = Number.parseInt(indexRaw);
|
|
1305
|
+
return selectTab(state, groupIndex, index);
|
|
1261
1306
|
};
|
|
1262
1307
|
|
|
1263
1308
|
const id = 7201;
|
|
@@ -1360,11 +1405,14 @@ const HandleClick = 11;
|
|
|
1360
1405
|
const HandleClickClose = 12;
|
|
1361
1406
|
const HandleClickTab = 13;
|
|
1362
1407
|
|
|
1363
|
-
const renderTab = (tab, isActive) => {
|
|
1408
|
+
const renderTab = (tab, isActive, tabIndex, groupIndex) => {
|
|
1364
1409
|
return [{
|
|
1365
1410
|
childCount: 2,
|
|
1366
|
-
className: isActive ? 'MainTab
|
|
1411
|
+
className: isActive ? 'MainTab MainTabSelected' : 'MainTab',
|
|
1412
|
+
'data-groupIndex': groupIndex,
|
|
1413
|
+
'data-index': tabIndex,
|
|
1367
1414
|
onClick: HandleClickTab,
|
|
1415
|
+
role: 'tab',
|
|
1368
1416
|
type: Div
|
|
1369
1417
|
}, {
|
|
1370
1418
|
childCount: 1,
|
|
@@ -1378,21 +1426,21 @@ const renderTab = (tab, isActive) => {
|
|
|
1378
1426
|
}, text('×')];
|
|
1379
1427
|
};
|
|
1380
1428
|
|
|
1381
|
-
const renderTabBar = group => {
|
|
1429
|
+
const renderTabBar = (group, groupIndex) => {
|
|
1382
1430
|
return [{
|
|
1383
1431
|
childCount: group.tabs.length,
|
|
1384
1432
|
className: 'MainTabs',
|
|
1385
1433
|
type: Div
|
|
1386
|
-
}, ...group.tabs.flatMap(tab => renderTab(tab, tab.id === group.activeTabId))];
|
|
1434
|
+
}, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
|
|
1387
1435
|
};
|
|
1388
1436
|
|
|
1389
|
-
const renderEditorGroup = group => {
|
|
1437
|
+
const renderEditorGroup = (group, groupIndex) => {
|
|
1390
1438
|
const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
|
|
1391
1439
|
return [{
|
|
1392
1440
|
childCount: 2,
|
|
1393
1441
|
className: 'EditorGroup',
|
|
1394
1442
|
type: Div
|
|
1395
|
-
}, ...renderTabBar(group), {
|
|
1443
|
+
}, ...renderTabBar(group, groupIndex), {
|
|
1396
1444
|
childCount: activeTab ? 1 : 1,
|
|
1397
1445
|
className: 'EditorContainer',
|
|
1398
1446
|
type: Div
|
|
@@ -1408,7 +1456,7 @@ const getMainAreaVirtualDom = layout => {
|
|
|
1408
1456
|
childCount: layout.groups.length,
|
|
1409
1457
|
className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
|
|
1410
1458
|
type: Div
|
|
1411
|
-
}, ...layout.groups.flatMap(renderEditorGroup)];
|
|
1459
|
+
}, ...layout.groups.flatMap((group, groupIndex) => renderEditorGroup(group, groupIndex))];
|
|
1412
1460
|
};
|
|
1413
1461
|
|
|
1414
1462
|
const renderItems = (oldState, newState) => {
|
|
@@ -1459,7 +1507,7 @@ const renderEventListeners = () => {
|
|
|
1459
1507
|
name: HandleClickClose,
|
|
1460
1508
|
params: ['handleClickCloseTab', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
|
|
1461
1509
|
}, {
|
|
1462
|
-
name:
|
|
1510
|
+
name: HandleClickTab,
|
|
1463
1511
|
params: ['handleClickTab', 'event.target.dataset.groupIndex', 'event.target.dataset.index']
|
|
1464
1512
|
}];
|
|
1465
1513
|
};
|
|
@@ -1501,6 +1549,7 @@ const commandMap = {
|
|
|
1501
1549
|
'MainArea.renderEventListeners': renderEventListeners,
|
|
1502
1550
|
'MainArea.resize': wrapCommand(resize),
|
|
1503
1551
|
'MainArea.saveState': saveState,
|
|
1552
|
+
'MainArea.selectTab': wrapCommand(selectTab),
|
|
1504
1553
|
'MainArea.terminate': terminate
|
|
1505
1554
|
};
|
|
1506
1555
|
|