/
CustomContent.tsx
142 lines (133 loc) · 5.06 KB
/
CustomContent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import {
BackstageAppButton,
ContentGroup,
ContentGroupProvider,
IModelViewportControl,
StageUsage,
StandardContentToolsUiItemsProvider,
StandardFrontstageProps,
StandardFrontstageProvider,
StandardNavigationToolsUiItemsProvider,
StandardStatusbarUiItemsProvider,
UiFramework,
UiItemsManager,
} from "@itwin/appui-react";
import {
ContentLayoutProps,
StandardContentLayouts,
} from "@itwin/appui-abstract";
import { CustomContentStageUiProvider } from "../providers/CustomContentStageUiProvider";
import { SampleContentControl } from "../content/SampleContentControl";
/**
* The CustomContentGroupProvider class method `provideContentGroup` returns a ContentGroup that displays two content view, one the
* shows and IModel using `UiFramework.getDefaultViewState` and a second content that just display React components. The layout
* used in StandardContentLayouts.twoHorizontalSplit which arrange the iModel view on top and the React content below.
*/
export class CustomContentGroupProvider extends ContentGroupProvider {
public override async contentGroup(): Promise<ContentGroup> {
// copy and then modify standard layout so the content is always shown - note we could have just copied the standard and created a new one in line
const twoHorizontalSplit: ContentLayoutProps = {
...StandardContentLayouts.twoHorizontalSplit,
horizontalSplit: {
...StandardContentLayouts.twoHorizontalSplit.horizontalSplit!,
minSizeBottom: 100,
percentage: 0.8,
},
};
return new ContentGroup({
id: "appui-test-providers:custom-stage-content",
layout: twoHorizontalSplit,
contents: [
{
id: "primaryContent",
classId: IModelViewportControl.id,
applicationData: {
isPrimaryView: true,
viewState: UiFramework.getDefaultViewState,
iModelConnection: UiFramework.getIModelConnection,
featureOptions: {
defaultViewOverlay: {
enableScheduleAnimationViewOverlay: true,
enableAnalysisTimelineViewOverlay: true,
enableSolarTimelineViewOverlay: true,
},
},
},
},
{
id: "ui-test:customContent",
classId: SampleContentControl,
},
],
});
}
}
/**
* This class is used to register a new frontstage that is called 'Custom' which provides custom content along with imodel content.
* Providers are used to provide some tools from standard providers along with a stage-specific provider that
* defines a couple test tool buttons to demonstrate how to use Redux from a package like the one that includes this
* frontstage definition.
*/
export class CustomContentFrontstage {
public static stageId = "appui-test-providers:CustomContent";
private static _contentGroupProvider = new CustomContentGroupProvider();
public static register(localizationNamespace: string) {
const cornerButton = <BackstageAppButton />;
const customStageProps: StandardFrontstageProps = {
id: CustomContentFrontstage.stageId,
version: 1.1,
contentGroupProps: CustomContentFrontstage._contentGroupProvider,
hideNavigationAid: false,
cornerButton,
usage: StageUsage.General,
};
CustomContentFrontstage.registerToolProviders(localizationNamespace);
UiFramework.frontstages.addFrontstageProvider(
new StandardFrontstageProvider(customStageProps)
);
}
private static registerToolProviders(localizationNamespace: string) {
// Provides standard tools for ToolWidget
UiItemsManager.register(
new StandardContentToolsUiItemsProvider({
horizontal: {
clearSelection: true,
clearDisplayOverrides: true,
hide: "group",
isolate: "group",
emphasize: "element",
},
vertical: {
selectElement: true,
},
}),
{
providerId: "customContentTools",
stageIds: [CustomContentFrontstage.stageId],
}
);
/** Provides standard tools for NavigationWidget */
UiItemsManager.register(new StandardNavigationToolsUiItemsProvider(), {
providerId: "customNavigationTools",
stageIds: [CustomContentFrontstage.stageId],
});
/** Provides standard status fields */
UiItemsManager.register(new StandardStatusbarUiItemsProvider(), {
providerId: "customStatusFields",
stageIds: [CustomContentFrontstage.stageId],
});
// register stage specific items provider
UiItemsManager.register(
new CustomContentStageUiProvider(localizationNamespace),
{
providerId: "customStageTools",
stageIds: [CustomContentFrontstage.stageId],
}
);
}
}