Skip to content

Commit efdbc5a

Browse files
hackerishackeris
committed
fix multiple tabs
1 parent 3a18844 commit efdbc5a

File tree

5 files changed

+43
-56
lines changed

5 files changed

+43
-56
lines changed

‎entry/src/main/ets/model/TermController.ets‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,14 @@ function stringToArrayBuffer(str: string, encoding: buffer.BufferEncoding = 'utf
1616
return buf.buffer;
1717
}
1818

19-
let termId = 0
20-
2119
export class TermController {
2220
webviewController: webview.WebviewController
2321
id: number
2422
close: () => void
2523

26-
constructor(close: () => void) {
24+
constructor(id: number, close: () => void) {
25+
this.id = id;
2726
this.webviewController = new webview.WebviewController()
28-
this.id = ++termId;
2927
this.close = close;
3028
}
3129

‎entry/src/main/ets/model/TermModel.ets‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { TermWebView } from "../pages/TermWebView"
22
import { TermController } from "./TermController"
33

4+
let termId = 0
5+
46
export class TermModel {
57
controller: TermController
68
view: TermWebView
79
id: number
8-
9-
constructor(close: () => void) {
10-
this.controller = new TermController(close)
11-
this.id = this.controller.id
10+
11+
constructor(close: (id: number) => void) {
12+
this.id = ++termId
13+
this.controller = new TermController(this.id, () => close(this.id))
1214
this.view = new TermWebView(this.controller)
1315
}
1416
}

‎entry/src/main/ets/pages/Index.ets‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
11
import { webview } from '@kit.ArkWeb';
22
import { FULL_PERCENT } from '../model/TabStyle';
33
import { TabSheets } from './TabSheetComponent';
4-
import { TermController } from '../model/TermController';
4+
import { TermModel } from '../model/TermModel';
55
import { common } from '@kit.AbilityKit';
66

77
@Entry
88
@Component
99
struct Index {
10-
@State tabArray: Array<TermController> = [new TermController(() => this.closeTab(0))];
10+
@State tabArray: Array<TermModel> = [new TermModel(id => this.closeTabAndTerm(id))];
1111
@State focusIndex: number = 0;
1212
private controller: TabsController = new TabsController();
1313

1414
aboutToAppear(): void {
1515
webview.WebviewController.setWebDebuggingAccess(true)
1616
}
1717

18-
closeTab(index: number): void {
18+
closeTabAndTerm(id: number): void {
19+
20+
let index = this.tabArray.findIndex(it => it.id === id)
21+
1922
if (this.tabArray.length > 1) {
2023

2124
let newArray = Array.from(this.tabArray)
2225

2326
const removed = newArray.splice(index, 1)[0];
24-
removed.shutdown()
27+
removed.controller.shutdown()
2528

2629
this.tabArray = newArray;
2730
if (this.tabArray[index] === undefined) {
2831
this.focusIndex = index - 1;
29-
} else if (this.tabArray[index] !== undefined && this.focusIndex !== index) {
32+
} else if (this.tabArray[index] !== undefined
33+
&& this.focusIndex !== index) {
3034
this.focusIndex -= 1;
3135
}
36+
37+
focusControl.requestFocus('tabs')
3238
} else {
3339
(this.getUIContext().getHostContext() as common.UIAbilityContext)?.terminateSelf()
3440
}
@@ -39,7 +45,7 @@ struct Index {
3945
TabSheets({
4046
tabArray: $tabArray,
4147
focusIndex: $focusIndex,
42-
closeTab: this.closeTab,
48+
closeTabAndTerm: id => this.closeTabAndTerm(id),
4349
controller: this.controller
4450
})
4551

@@ -48,39 +54,19 @@ struct Index {
4854
.backgroundColor($r('sys.color.ohos_id_color_subheading_separator_dark'))
4955

5056
Tabs({ barPosition: BarPosition.Start, index: this.focusIndex, controller: this.controller }) {
51-
ForEach(this.tabArray, (item: TermController, index: number) => {
57+
ForEach(this.tabArray, (item: TermModel, index: number) => {
5258
TabContent() {
5359
Column() {
54-
Web({
55-
src: $rawfile('term.html'),
56-
controller: item.webviewController
57-
})
58-
.javaScriptProxy({
59-
object: item,
60-
name: 'native',
61-
methodList: ['sendInput', 'resize', 'load'],
62-
controller: item.webviewController,
63-
asyncMethodList: [],
64-
permission: `{
65-
"javascriptProxyPermission": {
66-
"urlPermissionList": [
67-
{
68-
"scheme": "resource",
69-
"host": "rawfile",
70-
"port": "",
71-
"path": ""
72-
}
73-
]
74-
}
75-
}`
76-
})
77-
.backgroundColor('#000')
78-
.height(FULL_PERCENT)
60+
NodeContainer(item.view)
61+
.id('term-node-' + item.id)
62+
.width('100%')
63+
.height('100%')
7964
}
8065
.height(FULL_PERCENT)
8166
}
82-
}, (item: TermController) => 'term-' + item.id.toString())
67+
}, (item: TermModel) => 'term-' + item.id.toString())
8368
}
69+
.id('tabs')
8470
.scrollable(false)
8571
.barHeight(0)
8672
.onChange((index: number) => {

‎entry/src/main/ets/pages/TabSheetComponent.ets‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { FULL_PERCENT, STYLE_CONFIGURATION } from '../model/TabStyle';
2-
import { TermController } from '../model/TermController';
2+
import { TermModel } from '../model/TermModel';
33

44
@Component
55
export struct TabSheets {
6-
@Link tabArray: Array<TermController>;
6+
@Link tabArray: Array<TermModel>;
77
@Link @Watch('onFocusIndexChange') focusIndex: number;
88
@State middleIndex: number = this.focusIndex;
9-
@Require closeTab: (index: number) => void
9+
@Require closeTabAndTerm: (id: number) => void
1010
@Require controller: TabsController
1111

1212
onFocusIndexChange() {
@@ -15,7 +15,7 @@ export struct TabSheets {
1515

1616
build() {
1717
Row({ space: STYLE_CONFIGURATION.TAB_BAR_ITEM_GUTTER }) {
18-
ForEach(this.tabArray, (item: TermController, index: number) => {
18+
ForEach(this.tabArray, (item: TermModel, index: number) => {
1919
Row({ space: STYLE_CONFIGURATION.TAB_BAR_CONTENT_GUTTER }) {
2020
Text($r('app.string.newSheet'))
2121
.textOverflow({ overflow: TextOverflow.Clip })
@@ -26,7 +26,7 @@ export struct TabSheets {
2626
.width(STYLE_CONFIGURATION.ICON_SIZE)
2727
.aspectRatio(1)
2828
.onClick(() => {
29-
this.closeTab(index)
29+
this.closeTabAndTerm(item.id)
3030
})
3131
}
3232
}
@@ -53,18 +53,16 @@ export struct TabSheets {
5353
.lineCap(LineCapStyle.Round)
5454
}
5555
}
56-
}, (item: TermController) => 'tab-' + item.id.toString())
56+
}, (item: TermModel) => 'tab-' + item.id.toString())
5757

5858
Image($r('app.media.ic_public_add_filled'))
5959
.width(STYLE_CONFIGURATION.ICON_SIZE)
6060
.aspectRatio(1)
6161
.onClick(() => {
6262
if (this.tabArray.length < 6) {
6363

64-
const next = this.tabArray.length;
65-
6664
const newArray = Array.from(this.tabArray)
67-
newArray.push(new TermController(() => this.closeTab(next)));
65+
newArray.push(new TermModel(this.closeTabAndTerm));
6866

6967
const newTabIndex: number = newArray.length - 1;
7068

‎entry/src/main/ets/pages/TermWebView.ets‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,25 @@ function buildWebView(item: TermController) {
3232
}
3333

3434
export class TermWebView extends NodeController {
35-
private textNode: BuilderNode<[TermController]> | null = null;
36-
private webviewController: TermController
35+
private webNode: BuilderNode<[TermController]> | null = null;
36+
private state: TermController
3737

3838
constructor(webviewController: TermController) {
3939
super();
40-
this.webviewController = webviewController;
40+
this.state = webviewController;
4141
}
4242

4343
makeNode(context: UIContext): FrameNode | null {
44+
if (this.webNode != null) {
45+
return this.webNode.getFrameNode()
46+
}
4447
// Creating a BuilderNode instance
45-
this.textNode = new BuilderNode(context);
48+
this.webNode = new BuilderNode(context);
4649
// Set the selfIdealSize property
4750
// this.textNode = new BuilderNode(context, {selfIdealSize: {width: 100, height :100}});
4851
// Build the component tree using the build method
49-
this.textNode.build(wrapBuilder<[TermController]>(buildWebView), this.webviewController);
52+
this.webNode.build(wrapBuilder<[TermController]>(buildWebView), this.state);
5053
// Returns the node to be displayed
51-
return this.textNode.getFrameNode();
54+
return this.webNode.getFrameNode();
5255
}
5356
}

0 commit comments

Comments
 (0)