Select classifier:
-
+ className="classification-dialog-select" value={currentClassifier} options={classifiers} onChange={_onClassifierChange} onHide={() => { }} onShow={() => { }} />
Margin:
Outside Display:
-
+ options={_outsideDisplayEntries} value={outsideDisplayKeyState} onChange={_onOutsideDisplayChange} onHide={() => { }} onShow={() => { }} />
Inside Display:
-
+ options={_insideDisplayEntries} value={insideDisplayKeyState} onChange={_onInsideDisplayChange} onHide={() => { }} onShow={() => { }} />
@@ -178,7 +184,7 @@ export class ClassifierWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () =>
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/classifier-sample/readme.md b/src/frontend-samples/classifier-sample/readme.md
index 8148529eb..32fadddd3 100644
--- a/src/frontend-samples/classifier-sample/readme.md
+++ b/src/frontend-samples/classifier-sample/readme.md
@@ -14,16 +14,15 @@ The purpose of this sample is to demonstrate the following:
## Description
-Reality models derived from either photogrammetry or point cloud scanning provide an important representation of the physical state of a digital twin. They are however inherently monolithic, a single reality model will represent many digital twin components. Spatial classification provides a method to spatially partition a reality model by superimposing it with a spatial model. Reality model geometry within the boundaries of the spatial model components behave much like the components themselves.
+Reality models derived from either photogrammetry or point cloud scanning provide an important representation of the physical state of a digital twin. They are however inherently monolithic, a single reality model will represent many digital twin components. Spatial classification provides a method to spatially partition a reality model by superimposing it with a spatial model. Reality model geometry within the boundaries of the spatial model components behave much like the components themselves.
Classification controls not only the reality model display but the way the reality models are selected. When a reality model is classified the classified geometry is selected rather than the entire model and the properties from the classifier are automatically associated to that portion of the reality model. This is an important feature. To demonstrate the use of GIS data within a reality model this sample uses a reality model of Philadelphia and GIS data representing the building footprints, commercial corridors, arterial streets, and light poles. All sourced from ([OpenDataPhilly](https://www.opendataphilly.org/dataset/)).
[`ClassifierApp`](./ClassifierApp.tsx) has the necessary static methods for interacting with classifier related portions of the iModel.js API.
First the reality model must be attached to the viewport. There is more info about interacting with reality models in the [reality model sample](../reality-data-sample/readme.md).
-Next the list of available classifiers are queried in `getAvailableClassifierListForViewport`. This is done querying for available [SpatialModelState](https://www.itwinjs.org/v2/reference/imodeljs-frontend/modelstate/spatialmodelstate/)s in the iModel. The results are then sorted and filtered for demonstration purposes.
-
-Finally, the classifier needs to be formed and attached to the view. The classifier needs to be formed as a [SpatialClassifier](https://www.itwinjs.org/v2/reference/imodeljs-common/displaystyles/spatialclassifier/) object. It can then be added to [ContextRealityModelProps.classifiers](https://www.itwinjs.org/v2/reference/imodeljs-common/displaystyles/contextrealitymodelprops/#classifiers) and reattached to the viewport.
+Next the list of available classifiers are queried in `getAvailableClassifierListForViewport`. This is done querying for available [SpatialModelState](https://www.itwinjs.org/reference/core-frontend/modelstate/spatialmodelstate/)s in the iModel. The results are then sorted and filtered for demonstration purposes.
+Finally, the classifier needs to be formed and attached to the view. The classifier needs to be formed as a [SpatialClassifier](https://www.itwinjs.org/reference/core-common/displaystyles/spatialclassifier/) object. It can then be added to [ContextRealityModelProps.classifiers](https://www.itwinjs.org/reference/core-common/displaystyles/contextrealitymodelprops/#classifiers) and reattached to the viewport.
Additionally, this sample features a property data provider. This shows basic properties of selected elements. For more info on property data providers and property formatting see [property formatting sample](../property-formatting-sample/readme.md).
diff --git a/src/frontend-samples/classifier-sample/sampleSpec.ts b/src/frontend-samples/classifier-sample/sampleSpec.ts
index da222dacf..9d0f84756 100644
--- a/src/frontend-samples/classifier-sample/sampleSpec.ts
+++ b/src/frontend-samples/classifier-sample/sampleSpec.ts
@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { SampleSpec } from "SampleSpec";
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
export function getClassifierSpec(): SampleSpec {
return ({
diff --git a/src/frontend-samples/component-gallery/badge-sample/Badge.tsx b/src/frontend-samples/component-gallery/badge-sample/Badge.tsx
index 6f1b3d579..c663c7488 100644
--- a/src/frontend-samples/component-gallery/badge-sample/Badge.tsx
+++ b/src/frontend-samples/component-gallery/badge-sample/Badge.tsx
@@ -3,11 +3,10 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { BetaBadge, NewBadge } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Badge, ThemeProvider } from "@itwin/itwinui-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -17,8 +16,12 @@ export default class BadgeList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getBadgeData(): UIComponentExampleProps[] {
return [
- createComponentExample("BetaBadge", undefined,
),
- createComponentExample("NewBadge", undefined,
),
+ createComponentExample("Basic Badge", undefined,
Basic Badge),
+ createComponentExample("Long Label Badge", undefined,
Long label that gets truncated),
+ createComponentExample("Success Badge", undefined,
Success),
+ createComponentExample("Error Badge", undefined,
Error),
+ createComponentExample("Informational Badge", undefined,
Informational),
+ createComponentExample("Warning Badge", undefined,
Warning),
];
}
@@ -27,6 +30,7 @@ export default class BadgeList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/button-sample/Button.tsx b/src/frontend-samples/component-gallery/button-sample/Button.tsx
index 80b1cd836..c34f6caf3 100644
--- a/src/frontend-samples/component-gallery/button-sample/Button.tsx
+++ b/src/frontend-samples/component-gallery/button-sample/Button.tsx
@@ -3,11 +3,12 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { Button, ButtonSize, ButtonType, UnderlinedButton } from "@bentley/ui-core";
+import { UnderlinedButton } from "@itwin/core-react";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Button, ThemeProvider } from "@itwin/itwinui-react";
+import { SvgAdd } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,14 +20,11 @@ export default class ButtonList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getButtonData(): UIComponentExampleProps[] {
return [
- createComponentExample("Basic Button", "Primary Button",
),
- createComponentExample("Disabled Button", "Button with disabled prop",
),
- createComponentExample("Blue Button", "Button with ButtonType.Blue",
),
- createComponentExample("Hollow Button", "Button with ButtonType.Hollow",
),
- createComponentExample("Large Basic Button", "Primary Button with size={ButtonSize.Large}",
),
- createComponentExample("Large Disabled Button", "Button with disabled and size={ButtonSize.Large} props",
),
- createComponentExample("Large Blue Button", "Button with ButtonType.Blue and size={ButtonSize.Large}",
),
- createComponentExample("Large Hollow Button", "Button with ButtonType.Hollow and size={ButtonSize.Large}",
),
+ createComponentExample("Call to Action Button", "Button to prompt user input",
),
+ createComponentExample("High Visibility Button", "Button to get attention",
),
+ createComponentExample("Default Button", "Button for general use",
),
+ createComponentExample("Button with Icon", "Button that displays an icon",
} styleType="high-visibility">New),
+ createComponentExample("Button as Link", "Button that acts as a link",
),
createComponentExample("Underlined Button", "UnderlinedButton component",
Underlined Button),
];
}
@@ -36,6 +34,7 @@ export default class ButtonList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/checklistbox-sample/CheckListBox.tsx b/src/frontend-samples/component-gallery/checklistbox-sample/CheckListBox.tsx
index 421e4e711..3ae776d9a 100644
--- a/src/frontend-samples/component-gallery/checklistbox-sample/CheckListBox.tsx
+++ b/src/frontend-samples/component-gallery/checklistbox-sample/CheckListBox.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { CheckListBox, CheckListBoxItem, CheckListBoxSeparator } from "@bentley/ui-core";
+import { CheckListBox, CheckListBoxItem, CheckListBoxSeparator } from "@itwin/core-react";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Checkbox, InputGroup, ThemeProvider } from "@itwin/itwinui-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,6 +19,33 @@ export default class CheckListBoxList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getCheckListBoxData(): UIComponentExampleProps[] {
return [
+ createComponentExample("Default Checkbox", undefined,
),
+ createComponentExample("Disabled Checkbox", undefined,
),
+ createComponentExample("Indeterminate Checkbox", undefined,
),
+ createComponentExample("Postive Checkbox", undefined,
),
+ createComponentExample("Warning Checkbox", undefined,
),
+ createComponentExample("Negative Checkbox", undefined,
),
+ createComponentExample("Loading Checkbox", undefined,
),
+ createComponentExample("Visibility Checkbox", undefined,
),
+ createComponentExample("Checkbox Group", undefined,
+
+
+
+
+ ),
createComponentExample("CheckListBox", undefined,
@@ -40,7 +67,8 @@ export default class CheckListBoxList extends React.Component<{}> {
public render() {
return (
<>
-
+
+
);
diff --git a/src/frontend-samples/component-gallery/checklistbox-sample/readme.md b/src/frontend-samples/component-gallery/checklistbox-sample/readme.md
index b51664d8c..afde6e83a 100644
--- a/src/frontend-samples/component-gallery/checklistbox-sample/readme.md
+++ b/src/frontend-samples/component-gallery/checklistbox-sample/readme.md
@@ -1,4 +1,4 @@
-# Checklist Box Sample
+# Checkbox Sample
Copyright © Bentley Systems, Incorporated. All rights reserved.
@@ -6,10 +6,10 @@ The UI Component Samples demonstrate a variety of user interface components that
## Purpose
-The purpose of this sample is to show off the different styles of checklist boxes that are available to you when constructing iModel.js applications.
+The purpose of this sample is to show off the different styles of checkboxes that are available to you when constructing iModel.js applications.
## Description
Many iModel.js applications will want to utilize visual components beyond just the imodel. Whether it be for user interaction or displaying helpful information in a meaningful way, the UI Components will surely be able to enhance your application!
-Checklist Boxes are a great way to display several textual options for a user to select. You can also place a separator between your options if they are better represented as part of broader categories.
+Checkboxes are a great way to display several textual options for a user to select. You can also place a separator between your options if they are better represented as part of broader categories.
diff --git a/src/frontend-samples/component-gallery/checklistbox-sample/sampleSpec.ts b/src/frontend-samples/component-gallery/checklistbox-sample/sampleSpec.ts
index 4f2ca442e..ee62f4c05 100644
--- a/src/frontend-samples/component-gallery/checklistbox-sample/sampleSpec.ts
+++ b/src/frontend-samples/component-gallery/checklistbox-sample/sampleSpec.ts
@@ -8,10 +8,10 @@ import { SampleSpec } from "SampleSpec";
// Provides the information about the sample, passing no iModels since this sample does not utilize any
export function getCheckListBoxSpec(): SampleSpec {
return ({
- name: "checklistbox-sample",
- label: "UI-CheckListBoxes",
+ name: "checkbox-sample",
+ label: "UI-CheckBoxes",
image: "ui-checklistbox-thumbnail.png",
- description: "#Component #sample showing different #styles of #checklistboxes.",
+ description: "#Component #sample showing different #styles of #checkboxes.",
readme: async () => import("!!raw-loader!./readme.md"),
iModelList: [],
files: () => [
diff --git a/src/frontend-samples/component-gallery/expandable-list-sample/ExpandableList.tsx b/src/frontend-samples/component-gallery/expandable-list-sample/ExpandableList.tsx
index 7853f49e4..825c7771b 100644
--- a/src/frontend-samples/component-gallery/expandable-list-sample/ExpandableList.tsx
+++ b/src/frontend-samples/component-gallery/expandable-list-sample/ExpandableList.tsx
@@ -3,12 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { ExpandableBlock, ExpandableList } from "@bentley/ui-core";
-import { SampleExpandableBlock } from "./SampleExpandableBlock";
+import { ExpandableList } from "@itwin/core-react";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { ExpandableBlock, ThemeProvider } from "@itwin/itwinui-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -20,18 +19,49 @@ export default class ExpandableListList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getExpandableListData(): UIComponentExampleProps[] {
return [
+ createComponentExample("Basic Expandable Block", undefined,
+
+ Content in block!
+ ),
+ createComponentExample("Small Expandable Block", undefined,
+
+ Content in block!
+ ),
+ createComponentExample("Status Block", undefined,
+
+ Content in block!
+ ),
+ createComponentExample("Caption Block", undefined,
+
+ Content in block!
+ ),
createComponentExample("ExpandableList", "ExpandableList with one ExpandableBlock",
- { }}>
+ { }}>
Hello World!
-
+
),
createComponentExample("ExpandableList w/ singleExpandOnly", "ExpandableList with singleExpandOnly prop",
- { }}>
+ { }}>
Hello World 1
- { }}>
+ { }}>
Hello World 2
),
@@ -43,6 +73,7 @@ export default class ExpandableListList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/expandable-list-sample/SampleExpandableBlock.tsx b/src/frontend-samples/component-gallery/expandable-list-sample/SampleExpandableBlock.tsx
deleted file mode 100644
index e2907c521..000000000
--- a/src/frontend-samples/component-gallery/expandable-list-sample/SampleExpandableBlock.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* 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 { ExpandableBlock, ExpandableBlockProps } from "@bentley/ui-core";
-
-/** Sample component using ExpandableBlock with an expanded state */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const SampleExpandableBlock: React.FC = (props: ExpandableBlockProps) => {
- const [expanded, setExpanded] = React.useState(true);
-
- // Inverts the expandable block's current state
- const handleClick = (event: React.MouseEvent): void => {
- setExpanded(!expanded);
-
- props.onClick && props.onClick(event);
- };
-
- return (
-
- );
-};
diff --git a/src/frontend-samples/component-gallery/expandable-list-sample/sampleSpec.ts b/src/frontend-samples/component-gallery/expandable-list-sample/sampleSpec.ts
index e3bcd0478..b2054f30c 100644
--- a/src/frontend-samples/component-gallery/expandable-list-sample/sampleSpec.ts
+++ b/src/frontend-samples/component-gallery/expandable-list-sample/sampleSpec.ts
@@ -16,7 +16,6 @@ export function getExpandableListSpec(): SampleSpec {
readme: async () => import("!!raw-loader!./readme.md"),
files: () => [
import("!editor-file-loader!./ExpandableList?entry=true"),
- import("!editor-file-loader!./SampleExpandableBlock"),
],
type: "ExpandableList.tsx",
});
diff --git a/src/frontend-samples/component-gallery/inputs-sample/Inputs.tsx b/src/frontend-samples/component-gallery/inputs-sample/Inputs.tsx
index b0ba221d4..ea416de47 100644
--- a/src/frontend-samples/component-gallery/inputs-sample/Inputs.tsx
+++ b/src/frontend-samples/component-gallery/inputs-sample/Inputs.tsx
@@ -3,12 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { Checkbox, Icon, IconInput, Input, LabeledInput, LabeledSelect, LabeledTextarea, NumericInput, Radio, Select, Textarea } from "@bentley/ui-core";
-import { SampleImageCheckBox } from "./SampleImageCheckBox";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { IconButton, Input, LabeledInput, LabeledSelect, LabeledTextarea, Radio, Select, Textarea, ThemeProvider } from "@itwin/itwinui-react";
+import { SvgCamera, SvgCloseSmall, SvgSmileyHappy, SvgSmileyNeutral, SvgSmileySad } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -22,26 +21,285 @@ export default class InputsList extends React.Component<{}> {
return [
createComponentExample("Basic Input", "Input with placeholder", ),
createComponentExample("Disabled Input", "Input with disabled prop", ),
+ createComponentExample("Small Input", "Input with small size prop", ),
- createComponentExample("Check Box", "Basic Check Box", ),
- createComponentExample("Disabled Check Box", "Check Box with disabled prop", ),
+ createComponentExample("Labeled Input", "Input with a Label", ),
+ createComponentExample("Labeled Input with Message", "Input with a Label and a Message", ),
+ createComponentExample("Disabled Labeled Input", "Input with a Label with disabled prop", ),
+ createComponentExample("Postive Labeled Input", "Input with a postive status", ),
+ createComponentExample("Warning Labeled Input", "Input with a warning status", ),
+ createComponentExample("Negative Labeled Input", "Input with a negative status", ),
+ createComponentExample("Labeled Input with Custom Icon", "Input with an svgIcon prop", } />),
+ createComponentExample("Inline Labeled Input", "Input with an inline displayStyle", ),
+ createComponentExample("Hybrid Layout Labeled Input with Button", "Input with a Label and a Message", } />),
- createComponentExample("Radio Button", "Basic Radio Button", ),
- createComponentExample("Disabled Radio Button", "Radio Button with disabled prop", ),
+ createComponentExample("Labeled Select", "Select Element with a Label", ),
+ createComponentExample("Positive Labeled Select", "Select Element with a Label and positive status", ),
+ createComponentExample("Warning Labeled Select", "Select Element with a Label and warning status", ),
+ createComponentExample("Negative Labeled Select", "Select Element with a Label and negative status", ),
+ createComponentExample("Labeled Select with Custom Icon", "Select Element with a Label and custom icon", } label={"This is a label"} placeholder={"Placeholder Text"} message={"This is a message"} options={[{ label: "Option 1", value: 1 }, { label: "Option 2", value: 2 }, { label: "Option 3", value: 3 }, { label: "Option 4", value: 4 }]} />),
- createComponentExample("Basic Select", "Basic Select component", ),
- createComponentExample("Disabled Select", "Select with disabled prop", ),
- createComponentExample("Placeholder Select", "Select with placeholder prop", ),
+ createComponentExample("Labeled Textarea", "Textarea with a label", ),
+ createComponentExample("Disabled Labeled Textarea", "Disabled textarea with a label", ),
+ createComponentExample("Inline Labeled Textarea", "Textarea with a label and inline displayStyle", ),
+ createComponentExample("Positive Labeled Textarea", "Textarea with a label and positive status", ),
+ createComponentExample("Warning Labeled Textarea", "Textarea with a label and warning status", ),
+ createComponentExample("Negative Labeled Textarea", "Textarea with a label and negative status", ),
+ createComponentExample("Labeled Textarea with Custom Icon", "Textarea with a label and svgIcon prop", } displayStyle="default" label="Textarea Label" message="Display Message" placeholder="This is a textarea" />),
+
+ createComponentExample("Radio", "Radio Input", ),
+ createComponentExample("Disabled Radio", "Radio Input with disabled prop", ),
+ createComponentExample("Positive Radio", "Radio Input with positive status", ),
+ createComponentExample("Warning Radio", "Radio Input with warning status", ),
+ createComponentExample("Negative Radio", "Radio Input with negative status", ),
+
+ createComponentExample("Basic Select", "Basic Select component",
+ ,
+ ),
+ createComponentExample("Disabled Select", "Select with disabled prop",
+ ,
+ ),
+ createComponentExample("Disabled Select with Selected Value", "Select with disabled prop and a selected value",
+ ,
+ ),
+ createComponentExample("Many Items Select", "Select component containing many elements",
+ ,
+ ),
+ createComponentExample("Select with Sublabels", "Select with elements that possess sublabels",
+ ,
+ ),
+ createComponentExample("Select with Truncated Middle Text", "Select long text that is truncated",
+ ,
+ ),
+ createComponentExample("Select with Icons", "Select with Icons included with option elements",
+ ,
+ label: "Happy",
+ value: "happy",
+ },
+ {
+ icon: ,
+ label: "Neutral",
+ value: "neutral",
+ },
+ {
+ icon: ,
+ label: "Sad",
+ value: "sad",
+ },
+ ]}
+ placeholder="How are you today?"
+ />,
+ ),
+ createComponentExample("Select with Selected Element", "Select with a selected value",
+ ,
+ ),
createComponentExample("Basic Textarea", "Textarea with placeholder", ),
createComponentExample("Disabled Textarea", "Textarea with disabled prop", ),
-
- createComponentExample("Numeric Input", "Numeric Input component", ),
- createComponentExample("Icon Input", "Icon Input component", } containerClassName="uicore-full-width" />),
- createComponentExample("Labeled Input", "Labeled Input component", ),
- createComponentExample("Labeled Textarea", "Labeled Textarea component", ),
- createComponentExample("Labeled Select", "Labeled Select component", ),
- createComponentExample("Image Checkbox", "ImageCheckbox with WebFonts", ),
];
}
@@ -50,6 +308,7 @@ export default class InputsList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/inputs-sample/SampleImageCheckBox.tsx b/src/frontend-samples/component-gallery/inputs-sample/SampleImageCheckBox.tsx
index 192a0016a..15178705f 100644
--- a/src/frontend-samples/component-gallery/inputs-sample/SampleImageCheckBox.tsx
+++ b/src/frontend-samples/component-gallery/inputs-sample/SampleImageCheckBox.tsx
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import { ImageCheckBox, ImageCheckBoxProps } from "@bentley/ui-core";
+import { ImageCheckBox, ImageCheckBoxProps } from "@itwin/core-react";
/** Sample component using ImageCheckBox with a checked state */
// eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/src/frontend-samples/component-gallery/loading-sample/Loading.tsx b/src/frontend-samples/component-gallery/loading-sample/Loading.tsx
index 9677e3315..eeebe4a0a 100644
--- a/src/frontend-samples/component-gallery/loading-sample/Loading.tsx
+++ b/src/frontend-samples/component-gallery/loading-sample/Loading.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { LoadingPrompt, LoadingSpinner, LoadingStatus, Spinner, SpinnerSize } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { ProgressLinear, ProgressRadial, ThemeProvider } from "@itwin/itwinui-react";
+import { SvgStatusErrorHollow, SvgStatusSuccessHollow } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,24 +19,47 @@ export default class LoadingList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getLoadingData(): UIComponentExampleProps[] {
return [
- createComponentExample("Small Spinner", undefined, ),
- createComponentExample("Medium Spinner", undefined, ),
- createComponentExample("Large Spinner", undefined, ),
- createComponentExample("XLarge Spinner", undefined, ),
- createComponentExample("Small LoadingSpinner", undefined, ),
- createComponentExample("Medium LoadingSpinner", undefined, ),
- createComponentExample("Large LoadingSpinner", undefined, ),
- createComponentExample("XLarge LoadingSpinner", undefined, ),
- createComponentExample("LoadingStatus", undefined, ),
- createComponentExample("Basic LoadingPrompt", undefined, ),
- createComponentExample("LoadingPrompt with message", undefined, ),
- createComponentExample("Determinate LoadingPrompt", undefined, ),
- createComponentExample("Determinate LoadingPrompt with percent", undefined,
- ),
- createComponentExample("Determinate LoadingPrompt with cancel", undefined,
- ),
- createComponentExample("Determinate LoadingPrompt with status", undefined,
- ),
+ createComponentExample("Animated Determinate ProgressLinear", undefined, ),
+ createComponentExample("Indeterminate ProgressLinear", undefined, ),
+ createComponentExample("Labeled Center ProgressLinear", undefined, ),
+ createComponentExample("Labeled Left/Right ProgressLinear", undefined, ),
+ createComponentExample("Negative ProgressLinear", undefined, ,
+ ]}
+ status="negative"
+ value={45}
+ />),
+ createComponentExample("Positive ProgressLinear", undefined, ,
+ ]}
+ status="positive"
+ value={100}
+ />),
+ createComponentExample("Determinate ProgressRadial", undefined, ),
+ createComponentExample("Indeterminate ProgressRadial", undefined, ),
+ createComponentExample("Positive ProgressRadial", undefined, ),
+ createComponentExample("Negative ProgressRadial", undefined, ),
+ createComponentExample("Content ProgressRadial", undefined, 50),
+
];
}
@@ -45,6 +68,7 @@ export default class LoadingList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/search-box-sample/SearchBox.tsx b/src/frontend-samples/component-gallery/search-box-sample/SearchBox.tsx
index f9249105c..a736b1945 100644
--- a/src/frontend-samples/component-gallery/search-box-sample/SearchBox.tsx
+++ b/src/frontend-samples/component-gallery/search-box-sample/SearchBox.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { SearchBox } from "@bentley/ui-core";
+import { SearchBox } from "@itwin/core-react";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { ThemeProvider } from "@itwin/itwinui-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -30,6 +30,7 @@ export default class SearchBoxList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/slider-sample/Slider.tsx b/src/frontend-samples/component-gallery/slider-sample/Slider.tsx
index 450a7bc1e..1f5a17972 100644
--- a/src/frontend-samples/component-gallery/slider-sample/Slider.tsx
+++ b/src/frontend-samples/component-gallery/slider-sample/Slider.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { Icon, Slider } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Slider, ThemeProvider } from "@itwin/itwinui-react";
+import { SvgSmileyHappy, SvgSmileySad } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -20,26 +20,98 @@ export default class SliderList extends React.Component<{}> {
public static getSliderData(): UIComponentExampleProps[] {
return [
createComponentExample("Slider", "Basic Slider",
- ),
- createComponentExample("Slider w/ tooltipBelow", "Slider with Tooltip Below",
- ),
- createComponentExample("Slider w/ min/max", "Slider with showMinMax prop",
- ),
- createComponentExample("Slider w/ min/max images", "Slider with minImage and maxImage props",
- } maxImage={} />),
- createComponentExample("Slider w/ tick marks", "Slider with showTicks and getTickCount props",
- 10} />),
- createComponentExample("Slider w/ multiple values", "Slider with array of values",
- 10} />),
- createComponentExample("Slider multiple values tooltipBelow", "Slider with multiple values & tooltip below",
- 10} />),
- createComponentExample("Slider w/ tick labels", "Slider with showTickLabels prop",
- 10} />),
+ ),
+ createComponentExample("Range Slider", "Slider with supporting range selection",
+ ),
+ createComponentExample("Multi-Thumb Slider", "Multi-Thumb Slider that allows Crossing",
+ ),
+ createComponentExample("Slider w/ min/max images", "Slider with minLabel and maxLabel props",
+ }
+ minLabel={}
+ railContainerProps={{
+ style: {
+ margin: "0 8px",
+ },
+ }}
+ thumbMode="inhibit-crossing"
+ trackDisplayMode="auto"
+ values={[
+ 50,
+ ]}
+ />),
+ createComponentExample("Disabled Slider", "Slider with disabled prop",
+ ),
+ createComponentExample("Custom Tooltip Slider", "Slider with a customized ToolTip",
+ < Slider
+ style={{ width: "100%" }}
+ max={60}
+ min={0}
+ thumbMode="inhibit-crossing"
+ tickLabels={
+ [
+ "0",
+ "20",
+ "40",
+ "60",
+ ]}
+ trackDisplayMode="auto"
+ tooltipProps={function noRefCheck(_index: number, value: number) { return { content: `$${value}.00` }; }}
+ values={
+ [
+ 20,
+ ]}
+ />),
+ createComponentExample("Decimal Increment Slider", "Slider with Decimal Increment",
+ ),
];
}
@@ -48,6 +120,7 @@ export default class SliderList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/split-button-sample/SplitButton.tsx b/src/frontend-samples/component-gallery/split-button-sample/SplitButton.tsx
index 7263eb398..eda49b173 100644
--- a/src/frontend-samples/component-gallery/split-button-sample/SplitButton.tsx
+++ b/src/frontend-samples/component-gallery/split-button-sample/SplitButton.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { ContextMenuItem, SplitButton } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { MenuItem, SplitButton, ThemeProvider } from "@itwin/itwinui-react";
+import { SvgPlaceholder } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -17,22 +17,24 @@ export const createComponentExample = (title: string, description: string | unde
export default class SplitButtonList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
- private static get splitButtonMenuItems(): React.ReactNode[] {
+
+ public static splitButtonMenuItems = () => {
return [
- Item 1,
- Item 2,
- Item 3,
+ }>Item 1,
+ }>Item 2,
+ }>Item 3,
];
- }
+ };
+
public static getSplitButtonData(): UIComponentExampleProps[] {
return [
createComponentExample("Basic SplitButton", "Basic SplitButton",
- { }}>
- {this.splitButtonMenuItems.map((node) => node)}
+ { }}>
+ Default
),
createComponentExample("SplitButton with border", "SplitButton with drawBorder prop",
- { }}>
- {this.splitButtonMenuItems.map((node) => node)}
+ } onClick={() => { }}>
+ Split Button
),
];
}
@@ -42,6 +44,7 @@ export default class SplitButtonList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/tabs-sample/Tabs.tsx b/src/frontend-samples/component-gallery/tabs-sample/Tabs.tsx
index 2a70361ba..2b72556d3 100644
--- a/src/frontend-samples/component-gallery/tabs-sample/Tabs.tsx
+++ b/src/frontend-samples/component-gallery/tabs-sample/Tabs.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { HorizontalTabs, VerticalTabs } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { HorizontalTabs, Tab, ThemeProvider, VerticalTabs } from "@itwin/itwinui-react";
+import { SvgStar } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,10 +19,12 @@ export default class TabsList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getTabsData(): UIComponentExampleProps[] {
return [
- createComponentExample("Horizontal Tabs", undefined, ),
- createComponentExample("Green Horizontal Tabs", "with green prop", ),
- createComponentExample("Vertical Tabs", undefined, ),
- createComponentExample("Green Vertical Tabs", "with green prop", ),
+ createComponentExample("Horizontal Tabs", undefined, ),
+ createComponentExample("Green Horizontal Tabs", undefined, ),
+ createComponentExample("Borderless Tabs", undefined, ),
+ createComponentExample("Pill Tabs", undefined, } />, } />, } />]} />),
+ createComponentExample("Sublabel and Icon Tabs", undefined, } sublabel="Sublabel0" />, } sublabel="Sublabel1" />]} />),
+ createComponentExample("Vertical Tabs", undefined, ),
];
}
@@ -31,6 +33,7 @@ export default class TabsList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/text-sample/Text.tsx b/src/frontend-samples/component-gallery/text-sample/Text.tsx
index 3387bbef9..bdd581f91 100644
--- a/src/frontend-samples/component-gallery/text-sample/Text.tsx
+++ b/src/frontend-samples/component-gallery/text-sample/Text.tsx
@@ -3,11 +3,10 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { BlockText, BodyText, DisabledText, Headline, LeadingText, MutedText, SmallText, Subheading, Title } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Anchor, Blockquote, Body, Code, Headline, Kbd, Label, Leading, Small, Subheading, Text, ThemeProvider, Title } from "@itwin/itwinui-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,15 +18,55 @@ export default class TextList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getTextData(): UIComponentExampleProps[] {
return [
- createComponentExample("BodyText", undefined, This is Body Text),
- createComponentExample("BlockText", undefined, This is Block Text),
- createComponentExample("DisabledText", undefined, This is Disabled Text),
- createComponentExample("Headline", undefined, This is Headline Text),
- createComponentExample("LeadingText", undefined, This is Leading Text),
- createComponentExample("MutedText", undefined, This is Muted Text),
- createComponentExample("SmallText", undefined, This is Small Text),
- createComponentExample("Subheading", undefined, This is Subheading Text),
- createComponentExample("Title", undefined, This is Title Text),
+ createComponentExample("Anchor", undefined, www.example.com),
+ createComponentExample("Blockquote", undefined, This is a quote
),
+ createComponentExample("Blockquote with Footer", undefined, — Greg Bentley,{" "}NasdaqListed}
+ >
+
+ For 36 years we have served engineers with our software, passionately believing that better performing and more resilient infrastructure is essential to improve the quality of life for people everywhere, sustain our environment, and grow our economies.
+
+
),
+ createComponentExample("Body", undefined, I'm a Body),
+ createComponentExample("Muted Body", undefined, I'm a Body),
+ createComponentExample("Skeleton Body", undefined, I'm a Body),
+ createComponentExample("Code Segment", undefined,
+ The {" "}
+
+ push()
+
+ {" "}method adds one or more elements to the end of an array and returns the new length of the array.
+
),
+ createComponentExample("Headline", undefined, I'm a Headline),
+ createComponentExample("Keyboard Key", undefined, A),
+ createComponentExample("Predefined Keyboard Key", undefined, ↵ Enter),
+ createComponentExample("Label", undefined,
+
+
),
+ createComponentExample("Inline Label", undefined,
+
+
),
+ createComponentExample("Leading", undefined, I'm a Leading),
+ createComponentExample("Muted Leading", undefined, I'm a Leading),
+ createComponentExample("Small", undefined, I'm a Small),
+ createComponentExample("Muted Small", undefined, I'm a Small),
+ createComponentExample("Subheading", undefined, I'm a Subheading),
+ createComponentExample("Muted Subheading", undefined, I'm a Subheading),
+ createComponentExample("Text", undefined, I'm a Text),
+ createComponentExample("Polymorphic Text", undefined, I'm a headline text rendered as an h4 element!),
+ createComponentExample("Skeleton Text", undefined, I'm a Text),
+
+ createComponentExample("Title", undefined, I'm a Title),
+ createComponentExample("Muted Title", undefined, I'm a Title),
];
}
@@ -36,6 +75,7 @@ export default class TextList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/tiles-sample/Tiles.tsx b/src/frontend-samples/component-gallery/tiles-sample/Tiles.tsx
index e8f5ca5f2..558602fc7 100644
--- a/src/frontend-samples/component-gallery/tiles-sample/Tiles.tsx
+++ b/src/frontend-samples/component-gallery/tiles-sample/Tiles.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { FeaturedTile, MinimalFeaturedTile, MinimalTile, Tile } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { Badge, MenuItem, Tag, TagContainer, ThemeProvider, Tile, UserIcon } from "@itwin/itwinui-react";
+import { SvgFolder, SvgImodelHollow, SvgTag } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,22 +19,54 @@ export default class TilesList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getTilesData(): UIComponentExampleProps[] {
return [
- createComponentExample("Normal Tile", undefined,
-
- Link 1
- Link 2
- ),
- createComponentExample("Featured Tile", undefined,
-
- Link 1
- Link 2
- ),
- createComponentExample("Minimal Tile", undefined, ),
- createComponentExample("Featured Minimal Tile", undefined, ),
- createComponentExample("Tile stepNum={0}", undefined, ),
- createComponentExample("Tile stepNum={6}", undefined, ),
- createComponentExample("Tile stepNum={9}", undefined, ),
- createComponentExample("Tile stepNum={15}", undefined, ),
+ createComponentExample("Basic Tile", undefined,
+ Badge}
+ description="National stadium in Singapore. Features landscape details and a metro station. This is the largest sample iModel."
+ metadata={<>tag 1tag 2}
+ moreOptions={[
+ ,
+ ,
+ ]}
+ name="Stadium"
+ thumbnail="https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png"
+ variant="default"
+ />),
+ createComponentExample("Condensed Tile", undefined,
+
+ Item 1,
+ ,
+ ]}
+ name="Condensed"
+ thumbnail={}
+ variant="default"
+ />),
+ createComponentExample("Folder Tile", undefined,
+ Folder metadata}
+ moreOptions={[
+ ,
+ ,
+ ]}
+ name="Folder name"
+ thumbnail={}
+ variant="folder"
+ />),
+ createComponentExample("User Icon Tile", undefined,
+ Badge}
+ description="User description"
+ moreOptions={[
+ ,
+ ,
+ ]}
+ name="Some User"
+ thumbnail={} size="large" status="online" title="Terry Rivers" />}
+ variant="default"
+ />),
];
}
@@ -43,6 +75,7 @@ export default class TilesList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/component-gallery/toggle-sample/Toggle.tsx b/src/frontend-samples/component-gallery/toggle-sample/Toggle.tsx
index f46ef2930..9e79fa92d 100644
--- a/src/frontend-samples/component-gallery/toggle-sample/Toggle.tsx
+++ b/src/frontend-samples/component-gallery/toggle-sample/Toggle.tsx
@@ -3,11 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "common/samples-common.scss";
import "common/UIComponents/index.scss";
import { UIComponentContainer, UIComponentExampleProps } from "common/UIComponents/UIComponentContainer";
-import { LabeledToggle, Toggle, ToggleButtonType } from "@bentley/ui-core";
import { ControlPane } from "common/ControlPane/ControlPane";
+import { ThemeProvider, ToggleSwitch } from "@itwin/itwinui-react";
+import { SvgCheckmark } from "@itwin/itwinui-icons-react";
// Creates an instance of ComponentExampleProps that can be used in the ComponentContainer
export const createComponentExample = (title: string, description: string | undefined, content: React.ReactNode): UIComponentExampleProps => {
@@ -19,12 +19,12 @@ export default class ToggleList extends React.Component<{}> {
// Combines several instances of ComponentExampleProps to be passed into the ComponentContainer
public static getToggleData(): UIComponentExampleProps[] {
return [
- createComponentExample("Basic Toggle", undefined, ),
- createComponentExample("Primary Toggle", "Toggle with buttonType={ToggleButtonType.Primary}", ),
- createComponentExample("Large Toggle", "Toggle with large={true}", ),
- createComponentExample("Square Toggle", "Toggle with rounded={false}", ),
- createComponentExample("Toggle with Checkmark", "Toggle with showCheckmark prop", ),
- createComponentExample("LabeledToggle", undefined, ),
+ createComponentExample("Default ToggleSwitch", undefined, ),
+ createComponentExample("Disabled Checked ToggleSwitch", undefined, ),
+ createComponentExample("Disabled Unchecked ToggleSwitch", undefined, ),
+ createComponentExample("Right Labeled ToggleSwitch", undefined, ),
+ createComponentExample("Left Labeled ToggleSwitch", undefined, ),
+ createComponentExample("ToggleSwitch with Icon", undefined, } />),
];
}
@@ -33,6 +33,7 @@ export default class ToggleList extends React.Component<{}> {
public render() {
return (
<>
+
diff --git a/src/frontend-samples/cross-probing-sample/CrossProbingApi.ts b/src/frontend-samples/cross-probing-sample/CrossProbingApi.ts
index fab62a32a..b1db448b5 100644
--- a/src/frontend-samples/cross-probing-sample/CrossProbingApi.ts
+++ b/src/frontend-samples/cross-probing-sample/CrossProbingApi.ts
@@ -3,9 +3,8 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import "common/samples-common.scss";
-import { IModelApp, IModelConnection, SelectionSetEvent, SelectionSetEventType, ViewCreator2d, Viewport } from "@bentley/imodeljs-frontend";
-import { ColorDef } from "@bentley/imodeljs-common";
+import { IModelApp, IModelConnection, SelectionSetEvent, SelectionSetEventType, ViewCreator2d, Viewport } from "@itwin/core-frontend";
+import { ColorDef } from "@itwin/core-common";
/** This sample showcases how to implement cross-probing between 3D and 2D elements.
* At startup, it fetches all 2D/3D connections in the iModel and and maps them into an array.
@@ -14,12 +13,18 @@ import { ColorDef } from "@bentley/imodeljs-common";
* The target element is then zoomed into.
*/
+export interface CrossProbingElement {
+ physElementId: string;
+ drawElementId: string;
+ drawModelId: string;
+}
+
export default class CrossProbingApi {
// keep track of last element selected (to avoid double clicks).
private static lastElementSelected: string | undefined;
// array to keep track of all 3D/2D connections.
- private static elementMap?: any[];
+ private static elementMap?: CrossProbingElement[];
// add listener to capture element selection events.
public static addElementSelectionListener(imodel: IModelConnection) {
@@ -43,7 +48,7 @@ export default class CrossProbingApi {
// if source is 3D, look for any target 2D elements.
if (sourceVp?.view.is3d()) {
- targetLink = CrossProbingApi.elementMap!.filter((link: any) => link.physElementId === sourceElementId);
+ targetLink = CrossProbingApi.elementMap!.filter((link) => link.physElementId === sourceElementId);
if (targetLink.length > 0) {
const targetElement = targetLink[0].drawElementId;
const targetModel = await ev.set.iModel.models.getProps(targetLink[0].drawModelId);
@@ -81,7 +86,9 @@ export default class CrossProbingApi {
// helper function to get 3D viewport.
private static _get3DViewport(): Viewport {
let vp3d;
- IModelApp.viewManager.forEachViewport((vp) => (vp.view.is3d()) ? vp3d = vp : null);
+ for (const vp of IModelApp.viewManager) {
+ vp.view.is3d() ? vp3d = vp : null;
+ }
if (!vp3d) throw new Error("No viewport with 3D model found!");
return vp3d;
}
@@ -89,7 +96,9 @@ export default class CrossProbingApi {
// helper function to get 2D viewport.
private static _get2DViewport(): Viewport {
let vp2d;
- IModelApp.viewManager.forEachViewport((vp) => (vp.view.is2d()) ? vp2d = vp : null);
+ for (const vp of IModelApp.viewManager) {
+ vp.view.is2d() ? vp2d = vp : null;
+ }
if (!vp2d) throw new Error("No viewport with 2D model found!");
return vp2d;
}
@@ -104,7 +113,13 @@ export default class CrossProbingApi {
ON physToFunc.TargetECInstanceId = drawToFunc.TargetECInstanceId
JOIN Bis.DrawingGraphic drawing
ON drawToFunc.SourceECInstanceId = drawing.ECInstanceId`;
- CrossProbingApi.elementMap = await this._executeQuery(imodel, elementMapQuery);
+
+ const queryResult: string[] = await this._executeQuery(imodel, elementMapQuery);
+ CrossProbingApi.elementMap = queryResult.map(([physElementId, drawElementId, drawModelId]) => ({
+ physElementId,
+ drawElementId,
+ drawModelId,
+ }));
}
private static _executeQuery = async (imodel: IModelConnection, query: string) => {
diff --git a/src/frontend-samples/cross-probing-sample/CrossProbingApp.tsx b/src/frontend-samples/cross-probing-sample/CrossProbingApp.tsx
index 4b4281422..f91a568c5 100644
--- a/src/frontend-samples/cross-probing-sample/CrossProbingApp.tsx
+++ b/src/frontend-samples/cross-probing-sample/CrossProbingApp.tsx
@@ -2,36 +2,39 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import React, { useState } from "react";
-import { IModelConnection, ViewCreator2d, ViewState } from "@bentley/imodeljs-frontend";
-import { ColorDef } from "@bentley/imodeljs-common";
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
+import React, { useCallback, useState } from "react";
+import { IModelConnection, ViewCreator2d, ViewState } from "@itwin/core-frontend";
+import { ColorDef } from "@itwin/core-common";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
import { Viewer, ViewerFrontstage } from "@itwin/web-viewer-react";
import CrossProbingApi from "./CrossProbingApi";
-import { CrossProbingFrontstage } from "./CrossProbingFrontstageProvider";
+import { CrossProbingFrontstageProvider } from "./CrossProbingFrontstageProvider";
const CrossProbingApp: React.FunctionComponent = () => {
- const [frontStages, setFrontstages] = useState([]);
+ const [frontStages, setFrontStages] = useState([]);
const sampleIModelInfo = useSampleWidget("Click on an element in either of the views to zoom to corresponding element in the other view.", [SampleIModels.BayTown]);
- // When iModel is ready, initialize element selection listener and assign initial 2D view.
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- CrossProbingApi.addElementSelectionListener(iModelConnection);
- await CrossProbingApi.loadElementMap(iModelConnection);
- const [viewState2d, viewState3d] = await Promise.all([getFirst2DView(iModelConnection), ViewSetup.getDefaultView(iModelConnection)]);
- if (frontStages.length === 0)
- setFrontstages([{ provider: new CrossProbingFrontstage(viewState3d, viewState2d), default: true }]);
- };
-
// Get first 2D view in iModel.
- const getFirst2DView = async (imodel: IModelConnection): Promise => {
+ const getFirst2DView = useCallback(async (imodel: IModelConnection): Promise => {
const viewCreator = new ViewCreator2d(imodel);
const models = await imodel.models.queryProps({ from: "BisCore.GeometricModel2d" });
if (models.length === 0)
throw new Error("No 2D models found in iModel.");
return viewCreator.createViewForModel(models[0].id!, { bgColor: ColorDef.black });
- };
+ }, []);
+
+ // When iModel is ready, initialize element selection listener and assign initial 2D view.
+ const oniModelConnected = useCallback(async (iModelConnection: IModelConnection) => {
+ // Add a listen to track what we are clicking
+ CrossProbingApi.addElementSelectionListener(iModelConnection);
+ // Cache the elements
+ await CrossProbingApi.loadElementMap(iModelConnection);
+ // Grab the proper viewstates
+ const [viewState2d, viewState3d] = await Promise.all([getFirst2DView(iModelConnection), ViewSetup.getDefaultView(iModelConnection)]);
+ // update our frontstage
+ setFrontStages([{ provider: new CrossProbingFrontstageProvider(iModelConnection, viewState3d, viewState2d), default: true }]);
+ }, [getFirst2DView]);
/** The sample's render method */
return (
@@ -39,11 +42,13 @@ const CrossProbingApp: React.FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
diff --git a/src/frontend-samples/cross-probing-sample/CrossProbingFrontstageProvider.tsx b/src/frontend-samples/cross-probing-sample/CrossProbingFrontstageProvider.tsx
index fa913915d..6bae10610 100644
--- a/src/frontend-samples/cross-probing-sample/CrossProbingFrontstageProvider.tsx
+++ b/src/frontend-samples/cross-probing-sample/CrossProbingFrontstageProvider.tsx
@@ -3,35 +3,32 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { ViewState } from "@bentley/imodeljs-frontend";
-import { BasicNavigationWidget, ContentGroup, ContentLayoutDef, CoreTools, Frontstage, FrontstageProps, FrontstageProvider, IModelViewportControl, StagePanel, UiFramework, Widget, Zone } from "@bentley/ui-framework";
+import { IModelConnection, ViewState } from "@itwin/core-frontend";
+import { BasicNavigationWidget, ContentGroup, CoreTools, Frontstage, FrontstageProps, FrontstageProvider, IModelViewportControl, StagePanel, Widget, Zone } from "@itwin/appui-react";
import React from "react";
-export class CrossProbingFrontstage extends FrontstageProvider {
+export class CrossProbingFrontstageProvider extends FrontstageProvider {
// constants
+ public id = "CrossProbingFrontstage";
public static MAIN_CONTENT_ID = "CrossProbingFrontstage";
public static DEFAULT_NAVIGATION_WIDGET_KEY = "DefaultNavigationWidget";
public static DEFAULT_MANIPULATION_WIDGET_KEY = "DefaultNavigationWidget";
- // Content layout for content views
- private _contentLayoutDef: ContentLayoutDef;
// Content group for all layouts
private _contentGroup: ContentGroup;
- constructor(viewState3d: ViewState, viewState2d: ViewState) {
+ constructor(connection: IModelConnection, viewState3d: ViewState, viewState2d: ViewState) {
super();
- this._contentLayoutDef = new ContentLayoutDef({
- id: "TwoHalvesHorizontal",
- priority: 60,
- horizontalSplit: { percentage: 0.50, top: 0, bottom: 1 },
- });
-
- const connection = UiFramework.getIModelConnection();
-
// Create the content group.
this._contentGroup = new ContentGroup({
+ id: "CrossProbingContentGroup",
+ layout: {
+ id: "TwoHalvesHorizontal",
+ horizontalSplit: { id: "TwoHalvesHorizontalSplit", percentage: 0.50, top: 0, bottom: 1 },
+ },
contents: [
{
+ id: "3dViewportControl",
classId: IModelViewportControl,
applicationData: {
viewState: viewState3d,
@@ -39,6 +36,7 @@ export class CrossProbingFrontstage extends FrontstageProvider {
},
},
{
+ id: "2dViewportControl",
classId: IModelViewportControl,
applicationData: {
viewState: viewState2d,
@@ -53,15 +51,14 @@ export class CrossProbingFrontstage extends FrontstageProvider {
public get frontstage(): React.ReactElement {
return (
}
/>,
@@ -72,7 +69,7 @@ export class CrossProbingFrontstage extends FrontstageProvider {
}
/>,
diff --git a/src/frontend-samples/cross-probing-sample/sampleSpec.ts b/src/frontend-samples/cross-probing-sample/sampleSpec.ts
index ef13da59a..d4b6700cb 100644
--- a/src/frontend-samples/cross-probing-sample/sampleSpec.ts
+++ b/src/frontend-samples/cross-probing-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getCrossProbingSpec(): SampleSpec {
diff --git a/src/frontend-samples/display-styles-sample/DisplayStylesApi.tsx b/src/frontend-samples/display-styles-sample/DisplayStylesApi.tsx
index 218c58282..4282904b5 100644
--- a/src/frontend-samples/display-styles-sample/DisplayStylesApi.tsx
+++ b/src/frontend-samples/display-styles-sample/DisplayStylesApi.tsx
@@ -3,9 +3,8 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { DisplayStyle3dSettingsProps } from "@bentley/imodeljs-common";
-import { Viewport } from "@bentley/imodeljs-frontend";
-import "common/samples-common.scss";
+import { DisplayStyle3dSettingsProps } from "@itwin/core-common";
+import { Viewport } from "@itwin/core-frontend";
export default class DisplayStylesApp {
/** Overrides the current display styles using the viewport API. */
diff --git a/src/frontend-samples/display-styles-sample/DisplayStylesApp.tsx b/src/frontend-samples/display-styles-sample/DisplayStylesApp.tsx
index 484e146e3..85464d6d1 100644
--- a/src/frontend-samples/display-styles-sample/DisplayStylesApp.tsx
+++ b/src/frontend-samples/display-styles-sample/DisplayStylesApp.tsx
@@ -2,25 +2,21 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
import { DisplayStylesWidgetProvider } from "./DisplayStylesWidget";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
+import { IModelConnection } from "@itwin/core-frontend";
import "./DisplayStyles.scss";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
-import { useSampleWidget } from "@itwinjs-sandbox/hooks/useSampleWidget";
const uiProviders = [new DisplayStylesWidgetProvider()];
const DisplayStylesApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the drop down below to change the display style. Edit the \"Custom\" style in \"Style.ts\" and re-run the sample to see the changes.", [SampleIModels.Villa, SampleIModels.House, SampleIModels.MetroStation, SampleIModels.BayTown, SampleIModels.Stadium]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -29,11 +25,12 @@ const DisplayStylesApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
{
const viewport = useActiveViewport();
- const [activePresetIndex, setActivePresetIndex] = React.useState(DEFAULT_STYLE_INDEX);
+ const [activePreset, setActivePreset] = React.useState("Sun-dappled");
const [mergeState, setMergeState] = React.useState(false);
useEffect(() => {
if (viewport) {
- let style = displayStyles[activePresetIndex];
+ DisplayStylesApp.applyDisplayStyle(viewport, displayStyles.Default);
+
+ let style = displayStyles[activePreset];
DisplayStylesApp.applyDisplayStyle(viewport, style);
if (mergeState) {
- style = displayStyles[CUSTOM_STYLE_INDEX];
+ style = displayStyles.Custom;
DisplayStylesApp.applyDisplayStyle(viewport, style);
}
}
- }, [activePresetIndex, mergeState, viewport]);
+ }, [activePreset, mergeState, viewport]);
// Called by the control and will update the active display style.
- const _onChange = (event: React.ChangeEvent) => {
- const index = Number.parseInt(event.target.value, 10);
- setActivePresetIndex(index);
+ const _onChange = (value: DisplayStyleName) => {
+ setActivePreset(value);
};
// Called by the control and updates wether to also apply the Custom display style.
- const _onToggle = (isOn: boolean) => {
- setMergeState(isOn);
+ const _onToggle = (event: ChangeEvent) => {
+ setMergeState(event.target.checked);
};
const toggleTooltip = "Toggling on will apply the \"Custom\" style in \"Styles.ts\" after the selected style is applied.";
- const options = Object.assign({}, displayStyles.map((style) => style.name));
+ const options: SelectOption[] = useMemo(() =>
+ Object.keys(displayStyles)
+ .map((key) => ({
+ value: key as DisplayStyleName,
+ label: key,
+ })), []);
+
return (
<>
Select Style:
-
+ value={activePreset} onChange={_onChange} style={{ width: "fit-content" }} options={options} onHide={() => { }} onShow={() => { }} />
Merge with Custom:
-
+
@@ -73,7 +76,7 @@ export class DisplayStylesWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/display-styles-sample/README.md b/src/frontend-samples/display-styles-sample/README.md
index 7abbd0d97..0f38c5017 100644
--- a/src/frontend-samples/display-styles-sample/README.md
+++ b/src/frontend-samples/display-styles-sample/README.md
@@ -13,7 +13,7 @@ The purpose of this sample is to demonstrate the following:
## Description
-To set a display style, call `viewport.overrideDisplayStyle` and hand it the [DisplayStyleSettingsProps](https://www.itwinjs.org/v2/reference/imodeljs-common/displaystyles/displaystylesettingsprops/). In this sample, [`DisplayStyle3DSettingsProps](https://www.itwinjs.org/v2/reference/imodeljs-common/displaystyles/displaystyle3dsettingsprops/) are used to provided more options. It is also suggested to save and load the styles in json format.
+To set a display style, call `viewport.overrideDisplayStyle` and hand it the [DisplayStyleSettingsProps](https://www.itwinjs.org/reference/core-common/displaystyles/displaystylesettingsprops/). In this sample, [`DisplayStyle3DSettingsProps](https://www.itwinjs.org/reference/core-common/displaystyles/displaystyle3dsettingsprops/) are used to provided more options. It is also suggested to save and load the styles in json format.
Only the features specified by the style will be changed. This can be seen with the "Custom" style you can create. Use the "Merge with Custom" toggle to apply both the custom style and the specified style.
diff --git a/src/frontend-samples/display-styles-sample/Styles.ts b/src/frontend-samples/display-styles-sample/Styles.ts
index 0794ef9df..c0aefcd0e 100644
--- a/src/frontend-samples/display-styles-sample/Styles.ts
+++ b/src/frontend-samples/display-styles-sample/Styles.ts
@@ -2,15 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import {
- DisplayStyle3dSettingsProps,
- RenderMode,
- SkyBoxProps,
- ThematicDisplayMode,
- ThematicGradientColorScheme,
- ThematicGradientMode,
- ViewFlagProps,
-} from "@bentley/imodeljs-common";
+import { DisplayStyle3dSettingsProps, RenderMode, SkyBoxProps, ThematicDisplayMode, ThematicGradientColorScheme, ThematicGradientMode, ViewFlagProps } from "@itwin/core-common";
const renderingStyleViewFlags: ViewFlagProps = {
noConstruct: true,
@@ -28,329 +20,331 @@ const renderingStyleViewFlags: ViewFlagProps = {
const defaultSkyBox: SkyBoxProps = { display: true, twoColor: false, groundColor: 9741199, nadirColor: 5464143, skyColor: 16764303, zenithColor: 16741686 };
-export interface DisplayStyle extends DisplayStyle3dSettingsProps {
- name: string;
-}
+export type DisplayStyleName =
+ "Custom" | "Default" | "Illustration"
+ | "Chalk" | "Sun-dappled" | "Comic Book"
+ | "Outdoorsy" | "Schematic" | "Soft"
+ | "Moonlit" | "Thematic: Height" | "Thematic: Slope"
+ | "Gloss" | "Architectural" | "Architectural: Monochrome";
-export const displayStyles: DisplayStyle[] = [{
- name: "Custom",
- // Edit your style here and re-run the sample.
+export const displayStyles: Record = {
+ "Custom": {
+ // Edit your style here and re-run the sample.
- // To get you started
- environment: {
- sky: {
- display: true, twoColor: true, nadirColor: 3880, skyColor: 16764303,
+ // To get you started
+ environment: {
+ sky: {
+ display: true, twoColor: true, nadirColor: 3880, skyColor: 16764303,
+ },
+ ground: {
+ display: false,
+ },
},
- ground: {
- display: false,
- },
- },
-}, {
- name: "Default",
- environment: {
- sky: defaultSkyBox,
- ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
- },
- viewflags: renderingStyleViewFlags,
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
- },
-}, {
- name: "Illustration",
- environment: {},
- backgroundColor: 10921638,
- viewflags: { ...renderingStyleViewFlags, noCameraLights: true, noSourceLights: true, noSolarLight: true, visEdges: true },
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
},
- hline: {
- visible: { ovrColor: true, color: 0, pattern: 0, width: 1 },
- hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
- transThreshold: 1,
- },
-}, {
- name: "Chalk",
- ao:
- {
- bias: 0.25,
- zLengthCap: 0.0025,
- maxDistance: 100,
- intensity: 1,
- texelStepSize: 1,
- blurDelta: 1,
- blurSigma: 2,
- blurTexelStepSize: 1,
+ "Default": {
+ environment: {
+ sky: defaultSkyBox,
+ ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
+ },
+ viewflags: renderingStyleViewFlags,
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
+ },
},
- viewflags:
- {
- ...renderingStyleViewFlags,
- monochrome: true,
+ "Illustration": {
+ environment: {},
+ backgroundColor: 10921638,
+ viewflags: { ...renderingStyleViewFlags, noCameraLights: true, noSourceLights: true, noSolarLight: true, visEdges: true },
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
+ },
+ hline: {
+ visible: { ovrColor: true, color: 0, pattern: 0, width: 1 },
+ hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
+ transThreshold: 1,
+ },
},
- backgroundColor: 16777215,
- monochromeColor: 14475225,
- monochromeMode: 0,
- environment: { sky: { display: false }, ground: { display: false } },
- hline:
- {
- visible:
+ "Chalk": {
+ ao:
{
- ovrColor: true,
- color: 8421504,
- pattern: -1,
- width: 0,
+ bias: 0.25,
+ zLengthCap: 0.0025,
+ maxDistance: 100,
+ intensity: 1,
+ texelStepSize: 1,
+ blurDelta: 1,
+ blurSigma: 2,
+ blurTexelStepSize: 1,
},
- hidden:
+ viewflags:
{
- ovrColor: false,
- color: 16777215,
- pattern: 3435973836,
- width: 0,
+ ...renderingStyleViewFlags,
+ monochrome: true,
},
- transThreshold: 1,
- },
- solarShadows: { color: 16776960 },
- lights:
- {
- solar:
+ backgroundColor: 16777215,
+ monochromeColor: 14475225,
+ monochromeMode: 0,
+ environment: { sky: { display: false }, ground: { display: false } },
+ hline:
{
- direction: [-0.37150030963375785, 0.46257080595080885, -0.8049942667025903],
- alwaysEnabled: true,
+ visible:
+ {
+ ovrColor: true,
+ color: 8421504,
+ pattern: -1,
+ width: 0,
+ },
+ hidden:
+ {
+ ovrColor: false,
+ color: 16777215,
+ pattern: 3435973836,
+ width: 0,
+ },
+ transThreshold: 1,
},
- ambient: { intensity: 0.3 },
- specularIntensity: 0.2,
- },
-}, {
- name: "Sun-dappled",
- environment: {
- sky: defaultSkyBox,
- ground: { display: false },
- },
- viewflags: { ...renderingStyleViewFlags, shadows: true },
- solarShadows: { color: 0x524f44 },
- lights: {
- solar: { direction: [0.9391245716329828, 0.10165764029437066, -0.3281931795832247] },
- hemisphere: { intensity: 0.2 },
- portrait: { intensity: 0 },
- },
-}, {
- name: "Comic Book",
- backgroundColor: 0xFFFFFF,
- environment: { sky: { display: false }, ground: { display: false } },
- viewflags: { ...renderingStyleViewFlags, noWeight: false, visEdges: true },
- hline: {
- visible: { ovrColor: true, color: 0, pattern: 0, width: 3 },
- transThreshold: 1,
- },
- lights: {
- solar: { direction: [0.7623, 0.0505, -0.6453], intensity: 1.95, alwaysEnabled: true },
- ambient: { intensity: 0.2 },
- portrait: { intensity: 0 },
- specularIntensity: 0,
- numCels: 2,
- },
-}, {
- name: "Outdoorsy",
- environment: {
- sky: defaultSkyBox,
- ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
- },
- viewflags: renderingStyleViewFlags,
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 1.05 },
- ambient: { intensity: 0.25 },
- hemisphere: {
- upperColor: { r: 206, g: 233, b: 255 },
- intensity: 0.5,
- },
- portrait: { intensity: 0 },
- },
-}, {
- name: "Schematic",
- environment: {},
- backgroundColor: 16777215,
- viewflags: { ...renderingStyleViewFlags, visEdges: true },
- lights: {
- solar: { direction: [0, -0.6178171353958787, -0.7863218089378106], intensity: 1.95, alwaysEnabled: true },
- ambient: { intensity: 0.65 },
- portrait: { intensity: 0 },
- specularIntensity: 0,
- },
- hline: {
- visible: { ovrColor: true, color: 0, pattern: 0, width: 1 },
- hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
- transThreshold: 1,
- },
-}, {
- name: "Soft",
- environment: {
- sky: defaultSkyBox,
- ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
- },
- viewflags: { ...renderingStyleViewFlags, ambientOcclusion: true },
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 0 },
- ambient: { intensity: 0.75 },
- hemisphere: { intensity: 0.3 },
- portrait: { intensity: 0.5 },
- specularIntensity: 0.4,
- },
- ao: { bias: 0.25, zLengthCap: 0.0025, maxDistance: 100, intensity: 1, texelStepSize: 1, blurDelta: 1.5, blurSigma: 2, blurTexelStepSize: 1 },
-}, {
- name: "Moonlit",
- environment: {
- sky: { display: true, groundColor: 2435876, zenithColor: 0, nadirColor: 3880, skyColor: 3481088 },
- ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
- },
- viewflags: { ...renderingStyleViewFlags, visEdges: true },
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 3, alwaysEnabled: true },
- ambient: { intensity: 0.05 },
- hemisphere: { lowerColor: { r: 83, g: 100, b: 87 } },
- portrait: { intensity: 0 },
- specularIntensity: 0,
- },
- monochromeMode: 0,
- hline: {
- visible: { ovrColor: true, color: 0, pattern: -1, width: 0 },
- hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
- transThreshold: 1,
- },
- monochromeColor: 7897479,
-}, {
- name: "Thematic: Height",
- viewflags: { ...renderingStyleViewFlags, thematicDisplay: true },
- thematic: {
- axis: [0, 0, 1],
- gradientSettings: { mode: ThematicGradientMode.SteppedWithDelimiter },
- },
- lights: {},
-}, {
- name: "Thematic: Slope",
- viewflags: { ...renderingStyleViewFlags, thematicDisplay: true },
- thematic: {
- displayMode: ThematicDisplayMode.Slope,
- range: [0, 90],
- axis: [0, 0, 1],
- gradientSettings: {
- mode: ThematicGradientMode.Smooth,
- colorScheme: ThematicGradientColorScheme.Custom,
- customKeys: [
- { value: 0, color: 0x404040 },
- { value: 1, color: 0xffffff },
- ],
+ solarShadows: { color: 16776960 },
+ lights:
+ {
+ solar:
+ {
+ direction: [-0.37150030963375785, 0.46257080595080885, -0.8049942667025903],
+ alwaysEnabled: true,
+ },
+ ambient: { intensity: 0.3 },
+ specularIntensity: 0.2,
},
},
- lights: {},
-}, {
- name: "Gloss",
- environment: {
- sky: defaultSkyBox,
- ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
- },
- viewflags: { ...renderingStyleViewFlags, visEdges: true },
- lights: {
- solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
- specularIntensity: 4.15,
- },
- hline: {
- visible: { ovrColor: true, color: 8026756, pattern: 0, width: 1 },
- hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
- transThreshold: 1,
- },
-},
-{
- name: "Architectural",
- ao: {
- bias: 0.25,
- blurDelta: 1,
- blurSigma: 2,
- blurTexelStepSize: 1,
- intensity: 1,
- maxDistance: 100,
- texelStepSize: 1,
- zLengthCap: 0.0025,
+ "Sun-dappled": {
+ environment: {
+ sky: defaultSkyBox,
+ ground: { display: false },
+ },
+ viewflags: { ...renderingStyleViewFlags, shadows: true },
+ solarShadows: { color: 0x524f44 },
+ lights: {
+ solar: { direction: [0.9391245716329828, 0.10165764029437066, -0.3281931795832247] },
+ hemisphere: { intensity: 0.2 },
+ portrait: { intensity: 0 },
+ },
},
- backgroundColor: 16777215,
- environment: {
- ground: { aboveColor: 25600, belowColor: 2179941, display: false, elevation: -0.01 },
- sky: { display: true, groundColor: 8228728, nadirColor: 13428479, skyColor: 16764303, twoColor: true, zenithColor: 16765341 },
+ "Comic Book": {
+ backgroundColor: 0xFFFFFF,
+ environment: { sky: { display: false }, ground: { display: false } },
+ viewflags: { ...renderingStyleViewFlags, noWeight: false, visEdges: true },
+ hline: {
+ visible: { ovrColor: true, color: 0, pattern: 0, width: 3 },
+ transThreshold: 1,
+ },
+ lights: {
+ solar: { direction: [0.7623, 0.0505, -0.6453], intensity: 1.95, alwaysEnabled: true },
+ ambient: { intensity: 0.2 },
+ portrait: { intensity: 0 },
+ specularIntensity: 0,
+ numCels: 2,
+ },
},
- hline: {
- hidden: { color: 16777215, ovrColor: false, pattern: 3435973836, width: 0 },
- transThreshold: 1,
- visible: { color: 6118749, ovrColor: true, pattern: 0, width: 1 },
+ "Outdoorsy": {
+ environment: {
+ sky: defaultSkyBox,
+ ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
+ },
+ viewflags: renderingStyleViewFlags,
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 1.05 },
+ ambient: { intensity: 0.25 },
+ hemisphere: {
+ upperColor: { r: 206, g: 233, b: 255 },
+ intensity: 0.5,
+ },
+ portrait: { intensity: 0 },
+ },
},
- lights: {
- ambient: { color: { b: 244, g: 244, r: 244 }, intensity: 0.35 },
- hemisphere: {
- lowerColor: { b: 204, g: 230, r: 255 },
- upperColor: { b: 255, g: 209, r: 157 },
- },
- portrait: { intensity: 0 },
- solar: { alwaysEnabled: true, direction: [0.886852, 0.083601, -0.454427], intensity: 1.95 },
- specularIntensity: 0,
+ "Schematic": {
+ environment: {},
+ backgroundColor: 16777215,
+ viewflags: { ...renderingStyleViewFlags, visEdges: true },
+ lights: {
+ solar: { direction: [0, -0.6178171353958787, -0.7863218089378106], intensity: 1.95, alwaysEnabled: true },
+ ambient: { intensity: 0.65 },
+ portrait: { intensity: 0 },
+ specularIntensity: 0,
+ },
+ hline: {
+ visible: { ovrColor: true, color: 0, pattern: 0, width: 1 },
+ hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
+ transThreshold: 1,
+ },
},
- monochromeColor: 16777215,
- monochromeMode: 1,
- viewflags: {
- ...renderingStyleViewFlags,
- visEdges: true,
+ "Soft": {
+ environment: {
+ sky: defaultSkyBox,
+ ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
+ },
+ viewflags: { ...renderingStyleViewFlags, ambientOcclusion: true },
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 0 },
+ ambient: { intensity: 0.75 },
+ hemisphere: { intensity: 0.3 },
+ portrait: { intensity: 0.5 },
+ specularIntensity: 0.4,
+ },
+ ao: { bias: 0.25, zLengthCap: 0.0025, maxDistance: 100, intensity: 1, texelStepSize: 1, blurDelta: 1.5, blurSigma: 2, blurTexelStepSize: 1 },
},
-},
-{
- name: "Architectural: Monochrome",
- viewflags: {
- ...renderingStyleViewFlags,
- visEdges: true,
- monochrome: true,
- ambientOcclusion: true,
+ "Moonlit": {
+ environment: {
+ sky: { display: true, groundColor: 2435876, zenithColor: 0, nadirColor: 3880, skyColor: 3481088 },
+ ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
+ },
+ viewflags: { ...renderingStyleViewFlags, visEdges: true },
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828], intensity: 3, alwaysEnabled: true },
+ ambient: { intensity: 0.05 },
+ hemisphere: { lowerColor: { r: 83, g: 100, b: 87 } },
+ portrait: { intensity: 0 },
+ specularIntensity: 0,
+ },
+ monochromeMode: 0,
+ hline: {
+ visible: { ovrColor: true, color: 0, pattern: -1, width: 0 },
+ hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
+ transThreshold: 1,
+ },
+ monochromeColor: 7897479,
},
- monochromeColor: 14475225,
- monochromeMode: 0,
- environment: {
- sky: { display: true, twoColor: true, nadirColor: 13428479, skyColor: 16764303 },
- ground: { display: false },
+ "Thematic: Height": {
+ viewflags: { ...renderingStyleViewFlags, thematicDisplay: true },
+ thematic: {
+ axis: [0, 0, 1],
+ gradientSettings: { mode: ThematicGradientMode.SteppedWithDelimiter },
+ },
+ lights: {},
+ },
+ "Thematic: Slope": {
+ viewflags: { ...renderingStyleViewFlags, thematicDisplay: true },
+ thematic: {
+ displayMode: ThematicDisplayMode.Slope,
+ range: [0, 90],
+ axis: [0, 0, 1],
+ gradientSettings: {
+ mode: ThematicGradientMode.Smooth,
+ colorScheme: ThematicGradientColorScheme.Custom,
+ customKeys: [
+ { value: 0, color: 0x404040 },
+ { value: 1, color: 0xffffff },
+ ],
+ },
+ },
+ lights: {},
},
- hline: {
- visible: {
- ovrColor: true,
- color: 6118749,
- pattern: 0,
- width: 1,
- },
- hidden: {
- ovrColor: false,
- color: 16777215,
- pattern: 3435973836,
- width: 0,
- },
- transThreshold: 1,
+ "Gloss": {
+ environment: {
+ sky: defaultSkyBox,
+ ground: { display: false, elevation: -0.01, aboveColor: 32768, belowColor: 1262987 },
+ },
+ viewflags: { ...renderingStyleViewFlags, visEdges: true },
+ lights: {
+ solar: { direction: [-0.9833878378071199, -0.18098510351728977, 0.013883542698953828] },
+ specularIntensity: 4.15,
+ },
+ hline: {
+ visible: { ovrColor: true, color: 8026756, pattern: 0, width: 1 },
+ hidden: { ovrColor: false, color: 16777215, pattern: 3435973836, width: 0 },
+ transThreshold: 1,
+ },
},
- ao: {
- bias: 0.25,
- zLengthCap: 0.02315,
- maxDistance: 100,
- intensity: 0.3,
- texelStepSize: 1,
- blurDelta: 1,
- blurSigma: 2,
- blurTexelStepSize: 1,
+ "Architectural": {
+ ao: {
+ bias: 0.25,
+ blurDelta: 1,
+ blurSigma: 2,
+ blurTexelStepSize: 1,
+ intensity: 1,
+ maxDistance: 100,
+ texelStepSize: 1,
+ zLengthCap: 0.0025,
+ },
+ backgroundColor: 16777215,
+ environment: {
+ ground: { aboveColor: 25600, belowColor: 2179941, display: false, elevation: -0.01 },
+ sky: { display: true, groundColor: 8228728, nadirColor: 13428479, skyColor: 16764303, twoColor: true, zenithColor: 16765341 },
+ },
+ hline: {
+ hidden: { color: 16777215, ovrColor: false, pattern: 3435973836, width: 0 },
+ transThreshold: 1,
+ visible: { color: 6118749, ovrColor: true, pattern: 0, width: 1 },
+ },
+ lights: {
+ ambient: { color: { b: 244, g: 244, r: 244 }, intensity: 0.35 },
+ hemisphere: {
+ lowerColor: { b: 204, g: 230, r: 255 },
+ upperColor: { b: 255, g: 209, r: 157 },
+ },
+ portrait: { intensity: 0 },
+ solar: { alwaysEnabled: true, direction: [0.886852, 0.083601, -0.454427], intensity: 1.95 },
+ specularIntensity: 0,
+ },
+ monochromeColor: 16777215,
+ monochromeMode: 1,
+ viewflags: {
+ ...renderingStyleViewFlags,
+ visEdges: true,
+ },
},
- lights: {
- solar: {
- direction: [0.8868521744639655, 0.08360117539208102, -0.4544271824193604],
- intensity: 0,
- alwaysEnabled: true,
- },
- ambient: { color: { r: 255, g: 255, b: 255 } },
- hemisphere: {
- upperColor: { r: 242, g: 233, b: 213 },
- lowerColor: { r: 213, g: 225, b: 235 },
- intensity: 0.6,
- },
- portrait: {
- intensity: 1.9,
- },
- specularIntensity: 0,
+ "Architectural: Monochrome": {
+ viewflags: {
+ ...renderingStyleViewFlags,
+ visEdges: true,
+ monochrome: true,
+ ambientOcclusion: true,
+ },
+ monochromeColor: 14475225,
+ monochromeMode: 0,
+ environment: {
+ sky: { display: true, twoColor: true, nadirColor: 13428479, skyColor: 16764303 },
+ ground: { display: false },
+ },
+ hline: {
+ visible: {
+ ovrColor: true,
+ color: 6118749,
+ pattern: 0,
+ width: 1,
+ },
+ hidden: {
+ ovrColor: false,
+ color: 16777215,
+ pattern: 3435973836,
+ width: 0,
+ },
+ transThreshold: 1,
+ },
+ ao: {
+ bias: 0.25,
+ zLengthCap: 0.02315,
+ maxDistance: 100,
+ intensity: 0.3,
+ texelStepSize: 1,
+ blurDelta: 1,
+ blurSigma: 2,
+ blurTexelStepSize: 1,
+ },
+ lights: {
+ solar: {
+ direction: [0.8868521744639655, 0.08360117539208102, -0.4544271824193604],
+ intensity: 0,
+ alwaysEnabled: true,
+ },
+ ambient: { color: { r: 255, g: 255, b: 255 } },
+ hemisphere: {
+ upperColor: { r: 242, g: 233, b: 213 },
+ lowerColor: { r: 213, g: 225, b: 235 },
+ intensity: 0.6,
+ },
+ portrait: {
+ intensity: 1.9,
+ },
+ specularIntensity: 0,
+ },
},
-}];
+};
diff --git a/src/frontend-samples/display-styles-sample/sampleSpec.ts b/src/frontend-samples/display-styles-sample/sampleSpec.ts
index c16a8b6e7..9eb8a9f97 100644
--- a/src/frontend-samples/display-styles-sample/sampleSpec.ts
+++ b/src/frontend-samples/display-styles-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getDisplayStylesSpec(): SampleSpec {
diff --git a/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApi.tsx b/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApi.tsx
index 927b53a3a..41e3ba810 100644
--- a/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApi.tsx
+++ b/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApi.tsx
@@ -2,9 +2,8 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import "common/samples-common.scss";
-import { EmphasizeElements, FeatureOverrideType, ScreenViewport } from "@bentley/imodeljs-frontend";
-import { ColorDef } from "@bentley/imodeljs-common";
+import { EmphasizeElements, ScreenViewport } from "@itwin/core-frontend";
+import { ColorDef, FeatureOverrideType } from "@itwin/core-common";
// START API
export class EmphasizeElementsApi {
diff --git a/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApp.tsx b/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApp.tsx
index a9917e2d8..3c3e8e83a 100644
--- a/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApp.tsx
+++ b/src/frontend-samples/emphasize-elements-sample/EmphasizeElementsApp.tsx
@@ -3,22 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
+import { IModelConnection } from "@itwin/core-frontend";
import { EmphasizeElementsWidgetProvider } from "./EmphasizeElementsWidget";
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, ViewSetup } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
-import { useSampleWidget } from "@itwinjs-sandbox/hooks/useSampleWidget";
const uiProviders = [new EmphasizeElementsWidgetProvider()];
const EmphasizeElementsApp: React.FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Select one or more elements. Click one of the Apply buttons.", [SampleIModels.RetailBuilding, SampleIModels.MetroStation, SampleIModels.BayTown, SampleIModels.House, SampleIModels.Stadium]);
- const [viewportOptions, setViewportOptions] = React.useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -28,11 +24,12 @@ const EmphasizeElementsApp: React.FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
{
};
// END ON_CLICK_CLEAR
- const _onToggleEmphasis = (wantEmphasis: boolean) => {
- setWantEmphasisState(wantEmphasis);
+ const _onToggleEmphasis = (event: ChangeEvent) => {
+ setWantEmphasisState(event.target.checked);
};
return (
@@ -133,21 +134,21 @@ export const EmphasizeElementsWidget: React.FunctionComponent = () => {
Emphasize
-
-
-
+
+
+
Hide
-
-
+
+
Isolate
-
-
+
+
Override
-
-
+
+
@@ -168,7 +169,7 @@ export class EmphasizeElementsWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/emphasize-elements-sample/sampleSpec.ts b/src/frontend-samples/emphasize-elements-sample/sampleSpec.ts
index 2670a5b0d..860ba3c5b 100644
--- a/src/frontend-samples/emphasize-elements-sample/sampleSpec.ts
+++ b/src/frontend-samples/emphasize-elements-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { getViewportOnlySpec } from "frontend-samples/viewport-only-sample/sampleSpec";
import { SampleSpec } from "SampleSpec";
diff --git a/src/frontend-samples/emphasize-elements-sample/walkthru.md b/src/frontend-samples/emphasize-elements-sample/walkthru.md
index 7a4c0337d..5b86c9639 100644
--- a/src/frontend-samples/emphasize-elements-sample/walkthru.md
+++ b/src/frontend-samples/emphasize-elements-sample/walkthru.md
@@ -1,6 +1,6 @@
# Emphasize Elements
-This sample uses the [`EmphasizeElements`](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/emphasizeelements/) class to apply various display effects to an individual or small group of elements.
+This sample uses the [`EmphasizeElements`](https://www.itwinjs.org/reference/core-frontend/rendering/emphasizeelements/) class to apply various display effects to an individual or small group of elements.
This sample shows how to apply four different effects:
@@ -14,18 +14,22 @@ For the sample, we first require that the elements be selected by the user and t
[_metadata_:annotation]:- "API"
# Emphasize
+
[_metadata_:minor]:- "true"
[_metadata_:annotation]:- "EMPHASIZE"
# Hide
+
[_metadata_:minor]:- "true"
[_metadata_:annotation]:- "HIDE"
# Isolate
+
[_metadata_:minor]:- "true"
[_metadata_:annotation]:- "ISOLATE"
# Override
+
[_metadata_:minor]:- "true"
[_metadata_:annotation]:- "OVERRIDE"
diff --git a/src/frontend-samples/explode-sample/ExplodeApi.ts b/src/frontend-samples/explode-sample/ExplodeApi.ts
index 20c579f48..9bf4eb5fd 100644
--- a/src/frontend-samples/explode-sample/ExplodeApi.ts
+++ b/src/frontend-samples/explode-sample/ExplodeApi.ts
@@ -3,8 +3,8 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { IModelTileRpcInterface, TileVersionInfo } from "@bentley/imodeljs-common";
-import { Animator, EmphasizeElements, FeatureOverrideProvider, FeatureSymbology, IModelApp, IModelConnection, ScreenViewport, TiledGraphicsProvider, TileTreeReference, ViewChangeOptions, Viewport } from "@bentley/imodeljs-frontend";
+import { IModelTileRpcInterface, TileVersionInfo } from "@itwin/core-common";
+import { Animator, EmphasizeElements, FeatureOverrideProvider, FeatureSymbology, IModelApp, IModelConnection, ScreenViewport, TiledGraphicsProvider, TileTreeReference, ViewChangeOptions, Viewport } from "@itwin/core-frontend";
import { ExplodeTreeReference, TreeDataListener } from "./ExplodeTile";
export interface ExplodeObject {
@@ -28,7 +28,7 @@ export default class ExplodeApi {
const elementIds: string[] = [];
for await (const row of iModel.query(selectElementsInCategories))
- elementIds.push(row.id);
+ elementIds.push(row[0]);
return elementIds;
}
@@ -47,7 +47,7 @@ export default class ExplodeApi {
/** Uses the EmphasizeElements API to isolate the elements related to the ids given. */
public static isolateElements(vp: Viewport, elementIds: string[]) {
const emph = EmphasizeElements.getOrCreate(vp);
- emph.isolateElements(elementIds, vp);
+ emph.isolateElements(elementIds, vp, true);
}
/** Uses the EmphasizeElements API to clear all isolated and emphasized. */
public static clearIsolate(vp: Viewport) {
@@ -63,7 +63,7 @@ export default class ExplodeApi {
};
// Move the view into a good viewing angle.
- IModelApp.tools.run("View.Standard", vp, 7 /* isoRight */);
+ void IModelApp.tools.run("View.Standard", vp, 7 /* isoRight */);
// Gets the volume from the tile tree once it has been calculated.
let volume = ExplodeTreeReference.getTreeRange(objectName);
@@ -122,6 +122,18 @@ export class ExplodeProvider implements TiledGraphicsProvider, FeatureOverridePr
return provider;
}
+ public explodeTileTreeRef: ExplodeTreeReference;
+
+ public constructor(public vp: Viewport) {
+ this.explodeTileTreeRef = new ExplodeTreeReference(this.vp.iModel);
+ const removeListener = ExplodeTreeReference.onTreeDataUpdated.addListener((name, _, elementIdsDidUpdate) => {
+ const currentTree = this.explodeTileTreeRef.id;
+ if (currentTree.name === name && elementIdsDidUpdate)
+ this.invalidate();
+ });
+ ExplodeApi.cleanUpCallbacks.push(removeListener); // This will insure the listener is removed before swapping samples.
+ }
+
/** Updates the TileTree with the elements and explode scaling. */
public setData(name: string, elementIds: string[], explodeScaling: number) {
this.explodeTileTreeRef.explodeScaling = explodeScaling;
@@ -145,16 +157,6 @@ export class ExplodeProvider implements TiledGraphicsProvider, FeatureOverridePr
this.vp.setFeatureOverrideProviderChanged();
}
- public constructor(public vp: Viewport) {
- const removeListener = ExplodeTreeReference.onTreeDataUpdated.addListener((name, _, elementIdsDidUpdate) => {
- const currentTree = this.explodeTileTreeRef.id;
- if (currentTree.name === name && elementIdsDidUpdate)
- this.invalidate();
- });
- ExplodeApi.cleanUpCallbacks.push(removeListener); // This will insure the listener is removed before swapping samples.
- }
- public explodeTileTreeRef = new ExplodeTreeReference(this.vp.iModel);
-
/** Required by the FeatureOverrideProvider. Insures the static elements are not drawn. */
public addFeatureOverrides(overrides: FeatureSymbology.Overrides, _vp: Viewport): void {
const ids = ExplodeTreeReference.getTreeReadyIds(this.explodeTileTreeRef.id.name);
diff --git a/src/frontend-samples/explode-sample/ExplodeApp.tsx b/src/frontend-samples/explode-sample/ExplodeApp.tsx
index 6d46a4cfa..801d51e48 100644
--- a/src/frontend-samples/explode-sample/ExplodeApp.tsx
+++ b/src/frontend-samples/explode-sample/ExplodeApp.tsx
@@ -2,22 +2,19 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
+import { IModelConnection } from "@itwin/core-frontend";
import { ExplodeWidgetProvider } from "./ExplodeWidget";
const uiProviders = [new ExplodeWidgetProvider()];
const ExplodeApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the 'Explode' button to watch the object separate. Change objects using the drop down menu.", [SampleIModels.House]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -26,11 +23,12 @@ const ExplodeApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
Element Tile -> Graphics Tile
}
/** The overrides that should be applied to the view's [ViewFlags]($common) when this tile tree is drawn. Can be overridden by individual [[TileTreeReference]]s. */
- public get viewFlagOverrides(): ViewFlagOverrides {
- return new ViewFlagOverrides();
+ public get viewFlagOverrides(): {} {
+ return {};
}
/** True if this tile tree has no bounds - e.g., a tile tree representing a globe is unbounded. */
public get isContentUnbounded(): boolean {
@@ -602,7 +602,7 @@ export class ExplodedGraphicsTile extends Tile {
// Creates a new set of graphics transformed by the matrix create by the updated explode scaling. The appearanceProvider ensures the elements are drawn;
args.graphics.add(args.context.createGraphicBranch(branch, this._explodeTransform, { appearanceProvider: this.rootTile.appearanceProvider }));
- // Line is required for the debugging tile ranges feature. Very useful for debugging, but unused by the sample.
+ // Line is required for the debugging tile ranges feature. Very useful for debugging, but unused by the sample. See [Viewport.debugBoundingBoxes]
const rangeGfx = this.getRangeGraphic(args.context);
if (undefined !== rangeGfx)
args.graphics.add(rangeGfx);
diff --git a/src/frontend-samples/explode-sample/ExplodeWidget.tsx b/src/frontend-samples/explode-sample/ExplodeWidget.tsx
index 27beda1b1..e493c64e1 100644
--- a/src/frontend-samples/explode-sample/ExplodeWidget.tsx
+++ b/src/frontend-samples/explode-sample/ExplodeWidget.tsx
@@ -3,13 +3,14 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { useEffect } from "react";
-import { useActiveIModelConnection, useActiveViewport } from "@bentley/ui-framework";
-import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@bentley/ui-abstract";
-import { Button, Select, Slider, Toggle } from "@bentley/ui-core";
+import { useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
+import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@itwin/appui-abstract";
import ExplodeApi, { ExplodeObject, ExplodeProvider } from "./ExplodeApi";
-import { Animator, IModelApp, IModelConnection } from "@bentley/imodeljs-frontend";
+import { Animator, IModelApp, IModelConnection } from "@itwin/core-frontend";
+import { Button, Select, Slider, ToggleSwitch } from "@itwin/itwinui-react";
import "./Explode.scss";
+/** List of objects that can be exploded. The 'elementIds' will be populate during start up. */
const _objects: ExplodeObject[] = [
{
name: "Exterior",
@@ -40,10 +41,10 @@ const ExplodeWidget: React.FunctionComponent = () => {
ExplodeApi.cleanUpCallbacks = [];
return () => {
- IModelApp.viewManager.forEachViewport((vp) => {
+ for (const vp of IModelApp.viewManager) {
ExplodeApi.clearIsolate(vp);
ExplodeProvider.getOrCreate(vp).drop();
- });
+ }
ExplodeApi.cleanUpCallbacks.forEach((func) => func());
};
}, []);
@@ -61,23 +62,28 @@ const ExplodeWidget: React.FunctionComponent = () => {
}
}, [iModelConnection]);
+ // useEffect(() => { console.debug("hook2"); }, [explodeFactor]);
+
/** Causes the exploded view */
useEffect(() => {
if (viewport) {
+ // The API has a 'current' state because this animate function cannot be tied to a useState variable or it will become stale.
+ // The simplest solution was to introduce a static variable in the API but this could be kept in an object instead.
ExplodeApi.explodeAttributes.current = explodeFactor;
ExplodeApi.refSetData(viewport, object.name, object.elementIds, explodeFactor);
}
- }, [explodeFactor, object.elementIds, object.name, viewport]);
-
+ }, [explodeFactor, object, viewport]);
+ //
useEffect(() => {
if (viewport) {
- ExplodeApi.clearIsolate(viewport);
if (isolate) {
ExplodeApi.isolateElements(viewport, object.elementIds);
ExplodeApi.zoomToObject(viewport, object.name);
+ } else {
+ ExplodeApi.clearIsolate(viewport);
}
}
- }, [object.name, isolate, viewport, object.elementIds]);
+ }, [object, isolate, viewport]);
/** Populates the element ids of objects defined by category codes. */
const populateObjects = async (iModel: IModelConnection): Promise => {
@@ -112,9 +118,7 @@ const ExplodeWidget: React.FunctionComponent = () => {
if (explode ? newFactor > goal : newFactor < goal)
newFactor = goal;
- // The API has a 'current' state because this animate function cannot be tied to a useState variable or it will become stale.
- // The simplest solution was to introduce a static variable in the API but this could be kept in an object instead.
- ExplodeApi.explodeAttributes.current = newFactor;
+ // Update the Explode Factor
setExplodeFactor(newFactor);
return false;
@@ -128,10 +132,8 @@ const ExplodeWidget: React.FunctionComponent = () => {
};
/** Methods that support the UI control interactions. */
- const onObjectChanged = (event: React.ChangeEvent) => {
- const objectChanged = _objects.find((o) => o.name === event.target.value);
- if (objectChanged)
- setObject(objectChanged);
+ const onObjectChanged = (value: ExplodeObject) => {
+ setObject(value);
};
const onZoomButton = () => {
@@ -157,7 +159,7 @@ const ExplodeWidget: React.FunctionComponent = () => {
const min = ExplodeApi.explodeAttributes.min;
const step = ExplodeApi.explodeAttributes.step;
- const objectEntries = _objects.map((o) => o.name);
+ const objectEntries = _objects.map((o) => ({ value: o, label: o.name }));
const animationText = isAnimated ? "Pause" : ((min + max) / 2 >= explodeFactor ? "Explode" : "Collapse");
// Display drawing and sheet options in separate sections.
@@ -165,16 +167,16 @@ const ExplodeWidget: React.FunctionComponent = () => {
-
+
- setExplodeFactor(values[0])} disabled={isAnimated} />
+ setExplodeFactor(values[0])} onUpdate={(values) => setExplodeFactor(values[0])} disabled={isAnimated} />
-
-
+ value={object} options={objectEntries} onChange={onObjectChanged} style={{ width: "fit-content" }} disabled={isAnimated || isPopulatingObjects} onHide={() => { }} onShow={() => { }} />
+
- setIsolate(checked)} disabled={isAnimated} />
+ setIsolate(e.target.checked)} disabled={isAnimated} />
);
@@ -193,7 +195,7 @@ export class ExplodeWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/explode-sample/readme.md b/src/frontend-samples/explode-sample/readme.md
index 0477968d6..84ae4897b 100644
--- a/src/frontend-samples/explode-sample/readme.md
+++ b/src/frontend-samples/explode-sample/readme.md
@@ -9,27 +9,27 @@ This sample shows how to create an exploded view effect in the viewport.
The main purpose is to give an example of how to create the exploded view effect. To achieve this, it also shows how to:
* Request specific elements and tiles from the backend.
-* Work with [Transforms](https://www.itwinjs.org/v2/learning/geometry/transform/).
+* Work with [Transforms](https://www.itwinjs.org/learning/geometry/transform/).
* Render customized graphics using a TileTree.
-* Add a simple [Animator](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/animator/) to a viewport.
+* Add a simple [Animator](https://www.itwinjs.org/reference/core-frontend/views/animator/) to a viewport.
* NOT as an example of generalized animation.
## Description
-To create the exploded view effect, we request specific element graphics from the backend and draw them with a translation in order to move them apart. Most of this is handled by the [TileTree](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiletree/) and [Tile](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tile/) APIs, and communicated through a [TiledGraphicsProvider](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/tiledgraphicsprovider/) and [TileTreeReference](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiletreereference/). I am omitting most of the logic about the tile hierarchy. See the inline comments and documentation for more information.
+To create the exploded view effect, we request specific element graphics from the backend and draw them with a translation in order to move them apart. Most of this is handled by the [TileTree](https://www.itwinjs.org/reference/core-frontend/tiles/tiletree/) and [Tile](https://www.itwinjs.org/reference/core-frontend/tiles/tile/) APIs, and communicated through a [TiledGraphicsProvider](https://www.itwinjs.org/reference/core-frontend/views/tiledgraphicsprovider/) and [TileTreeReference](https://www.itwinjs.org/reference/core-frontend/tiles/tiletreereference/). I am omitting most of the logic about the tile hierarchy. See the inline comments and documentation for more information.
-1. The first goal is to load graphics content. This is mostly handled by the [TileTree](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiletree/) logic and our custom [Tile](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tile/) objects. Our graphics tiles use the [IModelTileRpcInterface](https://www.itwinjs.org/v2/reference/imodeljs-common/rpcinterface/imodeltilerpcinterface/).requestElementGraphics via the [TileAdmin](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/TileAdmin.ts) to request graphics from the backend and read it using a [ImdlReader](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/ImdlReader.ts). The request requires a tolerance (how detailed the element's geometry is). This is calculated in the element tile based on the tile's distance from the camera. We add our tile tree to the viewport by using the [TiledGraphicsProvider.forEachTileTreeRef](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/tiledgraphicsprovider/) method.
+1. The first goal is to load graphics content. This is mostly handled by the [TileTree](https://www.itwinjs.org/reference/core-frontend/tiles/tiletree/?term=tiletree) logic and our custom [Tile](https://www.itwinjs.org/reference/core-frontend/tiles/tile/) objects. Our graphics tiles use the [IModelTileRpcInterface](https://www.itwinjs.org/reference/core-common/rpcinterface/imodeltilerpcinterface/).requestElementGraphics via the [TileAdmin](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/TileAdmin.ts) to request graphics from the backend and read it using a [ImdlReader](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/ImdlReader.ts). The request requires a tolerance (how detailed the element's geometry is). This is calculated in the element tile based on the tile's distance from the camera. We add our tile tree to the viewport by using the [TiledGraphicsProvider.forEachTileTreeRef](https://www.itwinjs.org/reference/core-frontend/views/tiledgraphicsprovider/) method.
-2. The second goal is to displace the elements based on the explode scaling. While loading the tile tree, we query the backend for the origin and the element-space bounding box of each element using the [iModelConnection.query](https://www.itwinjs.org/v2/reference/imodeljs-frontend/imodelconnection/imodelconnection/query/). We create transform into world space using the [Placement3d](https://www.itwinjs.org/v2/reference/imodeljs-common/geometry/placement3d/) API with the element's origin and apply (multiply) it by the queried bounding box. This moves the bounding box from element space to world space. In our root tile, we then combine each bounding box using the [Range3d.extendRange](https://www.itwinjs.org/v2/reference/geometry-core/cartesiangeometry/range3d/) method. In each graphics tile, we create a vector by subtracting the center of each element's bounding box from the center of the box combining them all. This vector is the direction the element should be displaced. This is then scaled by the explode scaling and used to create a translation transform using the [Transform](https://www.itwinjs.org/v2/reference/geometry-core/cartesiangeometry/transform/) API.
+2. The second goal is to displace the elements based on the explode scaling. While loading the tile tree, we query the backend for the origin and the element-space bounding box of each element using the [iModelConnection.query](https://www.itwinjs.org/reference/core-frontend/imodelconnection/imodelconnection/query/). We create transform into world space using the [Placement3d](https://www.itwinjs.org/reference/core-common/geometry/placement3d/) API with the element's origin and apply (multiply) it by the queried bounding box. This moves the bounding box from element space to world space. In our root tile, we then combine each bounding box using the [Range3d.extendRange](https://www.itwinjs.org/reference/core-geometry/cartesiangeometry/range3d/) method. In each graphics tile, we create a vector by subtracting the center of each element's bounding box from the center of the box combining them all. This vector is the direction the element should be displaced. This is then scaled by the explode scaling and used to create a translation transform using the [Transform](https://www.itwinjs.org/reference/core-geometry/cartesiangeometry/transform/) API.
-3. The third goal is to draw the graphics displaced by the previously calculated transform. This is done by overriding the [Tile.drawGraphics](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tile/) method of our graphics tile. Create a new [GraphicsBranch](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/graphicbranch/) using [RenderContext](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/rendercontext/).createGraphicBranch and pass in the translation and an argument. These graphics are drawn in the [TileTree.draw](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiledrawargs/) by the [TileDrawArgs](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiledrawargs/).drawGraphics method. Note: here that the [TileDrawArgs](https://www.itwinjs.org/v2/reference/imodeljs-frontend/tiles/tiledrawargs/) used have been extended to include the scaling for the translation matrix.
+3. The third goal is to draw the graphics displaced by the previously calculated transform. This is done by overriding the [Tile.drawGraphics](https://www.itwinjs.org/reference/core-frontend/tiles/tile/?term=drawgr#drawgraphics) method of our graphics tile. Create a new [GraphicsBranch](https://www.itwinjs.org/reference/core-frontend/rendering/graphicbranch/) using [RenderContext](https://www.itwinjs.org/reference/core-frontend/rendering/rendercontext/).createGraphicBranch and pass in the translation and an argument. These graphics are drawn in the [TileTree.draw](https://www.itwinjs.org/reference/core-frontend/tiles/tiledrawargs/) by the [TileDrawArgs](https://www.itwinjs.org/reference/core-frontend/tiles/tiledrawargs/).drawGraphics method. Note: here that the [TileDrawArgs](https://www.itwinjs.org/reference/core-frontend/tiles/tiledrawargs/) used have been extended to include the scaling for the translation matrix.
-4. Now that the modified elements are being drawn, the old, static elements need to be hidden. This is done with two parts working together. First, a [FeatureOverrideProvider](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/viewport/featureoverrideprovider/) added to the viewport monitors the modified elements. Once they have tile content loaded, the ElementIds are marked to never be drawn using the [FeatureOverride.setNeverDrawnSet](https://www.itwinjs.org/v2/reference/imodeljs-common/rendering/featureoverrides/) method. The second part is a [FeatureAppearanceProvider](https://www.itwinjs.org/v2/reference/imodeljs-common/rendering/featureappearanceprovider/) being applied in the previously mentioned call to [RenderContext](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/rendercontext/).createGraphicBranch. This provider ensures the elements relative to our tile tree are drawn by return a default [FeatureAppearance](https://www.itwinjs.org/v2/reference/imodeljs-common/rendering/featureappearance/) for our modified elements.
+4. Now that the modified elements are being drawn, the old, static elements need to be hidden. This is done with two parts working together. First, a [FeatureOverrideProvider](https://www.itwinjs.org/reference/core-frontend/views/featureoverrideprovider/) added to the view monitors the modified elements. Once they have tile content loaded, the ElementIds are marked to never be drawn using the [FeatureOverride.setNeverDrawnSet](https://www.itwinjs.org/reference/core-common/rendering/featureoverrides/) method. The second part is a [FeatureAppearanceProvider](https://www.itwinjs.org/reference/core-common/rendering/featureappearanceprovider/) being applied in the previously mentioned call to [RenderContext](https://www.itwinjs.org/reference/core-frontend/rendering/rendercontext/).createGraphicBranch. This provider ensures the elements relative to our tile tree are drawn by return a default [FeatureAppearance](https://www.itwinjs.org/reference/core-common/rendering/featureappearance/) for our modified elements.
-5. The [EmphasizeElements](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/emphasizeelements/) API is used to Isolate the objects in the sample. For more information see the [Emphasize Elements Sample](https://www.itwinjs.org/v2/sample-showcase/?group=Viewer+Features&sample=emphasize-elements-sample) of that topic.
+5. The [EmphasizeElements](https://www.itwinjs.org/reference/core-frontend/rendering/emphasizeelements/) API is used to Isolate the objects in the sample. For more information see the [Emphasize Elements Sample](https://www.itwinjs.org/sample-showcase/?group=Viewer+Features&sample=emphasize-elements-sample) of that topic.
Notes:
-* Many of the APIs used in this sample are still in beta and alpha, especially those related to the tiles. Please check the latest documentation for changes before adapting for your own purposes.
-* Much of this logic is based on the [DynamicIModelTile](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/DynamicIModelTile.ts) of iModel.js.
+* Some of the APIs related to the tiles are marked as Internal. Please check the latest documentation for changes before adapting for your purposes.
+* Much of this logic is based on the [DynamicIModelTile](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/tile/DynamicIModelTile.ts) of iTwinjs core.
* The workflow used in this sample does not scale. While doing this with a low number of elements works well, the performance can quickly fall off when affecting hundreds of elements.
diff --git a/src/frontend-samples/explode-sample/sampleSpec.ts b/src/frontend-samples/explode-sample/sampleSpec.ts
index 31b1a7462..26c5c5d29 100644
--- a/src/frontend-samples/explode-sample/sampleSpec.ts
+++ b/src/frontend-samples/explode-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getExplodeSpec(): SampleSpec {
diff --git a/src/frontend-samples/fire-decoration-sample/FireDecoration.scss b/src/frontend-samples/fire-decoration-sample/FireDecoration.scss
index 694488089..a336ed450 100644
--- a/src/frontend-samples/fire-decoration-sample/FireDecoration.scss
+++ b/src/frontend-samples/fire-decoration-sample/FireDecoration.scss
@@ -5,6 +5,9 @@
.sample-options {
color: var(--buic-foreground-body);
padding: 8px;
+ >* {
+ margin-bottom: 1em;
+ }
}
.sample-options-2col {
diff --git a/src/frontend-samples/fire-decoration-sample/FireDecorationApi.ts b/src/frontend-samples/fire-decoration-sample/FireDecorationApi.ts
index 799abf461..30e719299 100644
--- a/src/frontend-samples/fire-decoration-sample/FireDecorationApi.ts
+++ b/src/frontend-samples/fire-decoration-sample/FireDecorationApi.ts
@@ -2,26 +2,22 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { Id64String } from "@bentley/bentleyjs-core";
-import { Point3d, Range1d, Range2d, Range3d, Vector3d, XYAndZ } from "@bentley/geometry-core";
-import "@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css";
-import { Placement3d, RenderTexture } from "@bentley/imodeljs-common";
-import { Decorator, imageElementFromUrl, IModelApp, IModelConnection, ScreenViewport, Viewport } from "@bentley/imodeljs-frontend";
-import { I18NNamespace } from "@bentley/imodeljs-i18n";
-import "common/samples-common.scss";
+import { Id64String } from "@itwin/core-bentley";
+import { Point3d, Range1d, Range2d, Range3d, Vector3d, XYAndZ } from "@itwin/core-geometry";
+import { Placement3d, QueryRowFormat, RenderTexture, TextureTransparency } from "@itwin/core-common";
+import { Decorator, imageElementFromUrl, IModelApp, IModelConnection, ScreenViewport, Viewport } from "@itwin/core-frontend";
import { EmitterHighlighter, FireEmitter, FireParams } from "./FireDecorator";
import { PlacementTool } from "./PlacementTool";
/** This class implements the interaction between the sample and the iModel.js API. No user interface. */
export default class FireDecorationApi {
- private static _sampleNamespace: I18NNamespace;
private static _highlighter?: EmitterHighlighter;
private static _dropListeners: VoidFunction[] = [];
/** Registers tools used by sample. */
public static initTools() {
- this._sampleNamespace = IModelApp.i18n.registerNamespace("fire-i18n-namespace");
- PlacementTool.register(this._sampleNamespace);
+ void IModelApp.localization.registerNamespace("fire-i18n-namespace");
+ PlacementTool.register("fire-i18n-namespace");
}
/** Using a decorator, sets a box around the specified emitter. Pass undefined as an argument to clear highlighting. */
@@ -56,7 +52,7 @@ export default class FireDecorationApi {
/** Runs the Placement Tool which will run the callback function passing the point the user confirms. */
public static startPlacementTool(confirmedPointCallBack: (point: Point3d, viewport: Viewport) => void) {
- IModelApp.tools.run(PlacementTool.toolId, confirmedPointCallBack);
+ void IModelApp.tools.run(PlacementTool.toolId, confirmedPointCallBack);
}
/** Returns the next available transient id using the IModelConnection API. */
@@ -86,10 +82,11 @@ export default class FireDecorationApi {
/** Allocates memory and creates a RenderTexture from a given URL. */
public static async allocateTextureFromUrl(url: string): Promise {
// Note: the caller takes ownership of the textures, and disposes of those resources when they are no longer needed.
- const isOwned = true;
- const params = new RenderTexture.Params(undefined, undefined, isOwned);
const fireImage = await imageElementFromUrl(url);
- return IModelApp.renderSystem.createTextureFromImage(fireImage, true, undefined, params);
+ return IModelApp.renderSystem.createTexture({
+ ownership: "external",
+ image: { source: fireImage, transparency: TextureTransparency.Mixed },
+ });
}
/** Attempts to create a new fire emitter. */
@@ -123,10 +120,10 @@ export default class FireDecorationApi {
/** Queries the backend for the elements that will act as targets for the demo on the Villa iModel. */
public static async queryElements(iModel: IModelConnection, elementsIds: string[]): Promise> {
- const query = `Select Origin,Yaw,Pitch,Roll,BBoxLow,BBoxHigh FROM BisCore:GeometricElement3d WHERE ECInstanceID IN (${elementsIds.join(",")})`;
+ const query = `Select Origin,Yaw,Pitch,Roll,BBoxLow,BBoxHigh FROM BisCore:GeometricElement3d WHERE ECInstanceId IN (${elementsIds.join(",")})`;
const data: Array<{ origin: Point3d, bBox: Range3d }> = [];
- for await (const row of iModel.query(query)) {
+ for await (const row of iModel.query(query, undefined, { rowFormat: QueryRowFormat.UseJsPropertyNames })) {
const element = (row as { origin: XYAndZ, pitch: number, roll: number, yaw: number, bBoxLow: XYAndZ, bBoxHigh: XYAndZ });
const bBoxModelSpace = Range3d.create(Point3d.fromJSON(element.bBoxLow), Point3d.fromJSON(element.bBoxHigh));
diff --git a/src/frontend-samples/fire-decoration-sample/FireDecorationApp.tsx b/src/frontend-samples/fire-decoration-sample/FireDecorationApp.tsx
index 0759a6b90..8e44b8ea6 100644
--- a/src/frontend-samples/fire-decoration-sample/FireDecorationApp.tsx
+++ b/src/frontend-samples/fire-decoration-sample/FireDecorationApp.tsx
@@ -2,22 +2,19 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
import { FireDecorationWidgetProvider } from "./FireDecorationWidget";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
+import { IModelConnection } from "@itwin/core-frontend";
const uiProviders = [new FireDecorationWidgetProvider()];
const FireDecorationApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the 'Place' button to create a new fire particle emitter. After placing, use the controls to configure the new emitter.", [SampleIModels.Villa]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -26,11 +23,12 @@ const FireDecorationApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
{
};
const noEmitterSelected = selectedEmitterState === undefined;
+ const emitterOptions = Array.from(FireDecorationApi.predefinedParams.keys()).map((key) => ({ value: key, label: key }));
// Display drawing and sheet options in separate sections.
return (
-
-
-
-
Place New Emitter
+ <>
+
+
Place New Emitter
+
+
+
-
-
+
+ Use the "Place" button to create a new fire particle emitter. After placing, use the controls to configure the new emitter.
+
+
+
Configure Active Emitter
+
+
+ setFireState({ ...fireState, particleNumScale: values[0] })} />
+
+ setFireState({ ...fireState, height: values[0] })} />
+
+ {/* The UI of this sample assumes effectRange is a square. */}
+ setFireState({ ...fireState, effectRange: createSquareRange2d(values[0]) })} />
+ setFireState({ ...fireState, enableSmoke: event.target.checked })} />
+ setFireState({ ...fireState, isOverlay: event.target.checked })} />
+
+
+
-
-
-
-
-
-
- Configure Selected Emitter
-
-
-
- setFireState({ ...fireState, particleNumScale: values[0] })} />
-
- setFireState({ ...fireState, height: values[0] })} />
-
- {/* The UI of this sample assumes effectRange is a square. */}
- setFireState({ ...fireState, effectRange: createSquareRange2d(values[0]) })} />
-
- setFireState({ ...fireState, enableSmoke: checked })} />
-
- setFireState({ ...fireState, isOverlay: checked })} />
-
-
-
-
-
-
+
);
};
@@ -198,7 +192,7 @@ export class FireDecorationWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () =>
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/fire-decoration-sample/FireDecorator.ts b/src/frontend-samples/fire-decoration-sample/FireDecorator.ts
index 4c8ad72a1..4e765da87 100644
--- a/src/frontend-samples/fire-decoration-sample/FireDecorator.ts
+++ b/src/frontend-samples/fire-decoration-sample/FireDecorator.ts
@@ -2,10 +2,10 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { dispose } from "@bentley/bentleyjs-core";
-import { Point3d, Range1d, Range2d, Range3d, Transform, Vector3d, XAndY } from "@bentley/geometry-core";
-import { ColorDef, RenderTexture } from "@bentley/imodeljs-common";
-import { DecorateContext, Decorator, GraphicType, HitDetail, ParticleCollectionBuilder, ParticleProps, Viewport } from "@bentley/imodeljs-frontend";
+import { dispose } from "@itwin/core-bentley";
+import { Point3d, Range1d, Range2d, Range3d, Transform, Vector3d, XAndY } from "@itwin/core-geometry";
+import { ColorDef, RenderTexture } from "@itwin/core-common";
+import { DecorateContext, Decorator, GraphicType, HitDetail, ParticleCollectionBuilder, ParticleProps, Viewport } from "@itwin/core-frontend";
import FireDecorationApi from "./FireDecorationApi";
/** Generate integer in [min, max]. */
@@ -131,7 +131,7 @@ export class FireEmitter implements Decorator {
/** Creates a new fire particle decorator at the given world position. */
public static async create(viewport: Viewport, source: Point3d, params: FireParams): Promise
{
- if (!await FireEmitter.tryTextures())
+ if (!(await FireEmitter.tryTextures()))
return undefined;
// A transient id is needed for interacting with the mouse (tool tips).
diff --git a/src/frontend-samples/fire-decoration-sample/PlacementTool.ts b/src/frontend-samples/fire-decoration-sample/PlacementTool.ts
index 3e0fe5269..35e0715b4 100644
--- a/src/frontend-samples/fire-decoration-sample/PlacementTool.ts
+++ b/src/frontend-samples/fire-decoration-sample/PlacementTool.ts
@@ -2,8 +2,8 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { Point3d } from "@bentley/geometry-core";
-import { BeButtonEvent, EventHandled, IModelApp, PrimitiveTool, Viewport } from "@bentley/imodeljs-frontend";
+import { Point3d } from "@itwin/core-geometry";
+import { BeButtonEvent, EventHandled, IModelApp, PrimitiveTool, Viewport } from "@itwin/core-frontend";
/** This class defines the user's interaction while interacting with the model and fire emitter.
* While it is active, the tool handles events from the user, notably mouse clicks in the viewport.
@@ -22,12 +22,12 @@ export class PlacementTool extends PrimitiveTool {
public isCompatibleViewport(vp: Viewport | undefined, isSelectedViewChange: boolean): boolean { return (super.isCompatibleViewport(vp, isSelectedViewChange) && undefined !== vp && vp.view.isSpatialView()); }
public isValidLocation(_ev: BeButtonEvent, _isButtonEvent: boolean): boolean { return true; } // Allow snapping to terrain, etc. outside project extents.
public requireWriteableTarget(): boolean { return false; } // Tool doesn't modify the imodel.
- public onPostInstall() { super.onPostInstall(); IModelApp.accuSnap.enableSnap(true); }
- public onRestartTool(): void { this.exitTool(); }
+ public async onPostInstall() { await super.onPostInstall(); IModelApp.accuSnap.enableSnap(true); }
+ public async onRestartTool(): Promise { return this.exitTool(); }
// A reset button is the secondary action button, ex. right mouse button.
public async onResetButtonUp(_ev: BeButtonEvent): Promise {
- this.onReinitialize(); // Calls onRestartTool to exit
+ void this.onReinitialize(); // Calls onRestartTool to exit
return EventHandled.No;
}
@@ -39,7 +39,7 @@ export class PlacementTool extends PrimitiveTool {
// ev.point is the current world coordinate point adjusted for snap and locks
this._placementCallback(ev.point, ev.viewport);
- this.onReinitialize(); // Calls onRestartTool to exit
+ void this.onReinitialize(); // Calls onRestartTool to exit
return EventHandled.No;
}
}
diff --git a/src/frontend-samples/fire-decoration-sample/README.md b/src/frontend-samples/fire-decoration-sample/README.md
index 61f6b85cb..b4cc0ef74 100644
--- a/src/frontend-samples/fire-decoration-sample/README.md
+++ b/src/frontend-samples/fire-decoration-sample/README.md
@@ -9,7 +9,7 @@ This sample shows how to create a particle effect using fire as an example.
The purpose of this sample is to demonstrate the following:
* Creating a decorator and rendering it in the active view.
-* Working with particle effects using the [ParticleCollectionBuilder](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/particlecollectionbuilder) API.
+* Working with particle effects using the [ParticleCollectionBuilder](https://www.itwinjs.org/reference/core-frontend/rendering/particlecollectionbuilder) API.
* Adding a tool tip to a particle decorator.
* Visualizing (NOT simulating) fire in an iModel.
@@ -17,13 +17,13 @@ The purpose of this sample is to demonstrate the following:
This sample provides an example of a particle effect in world space (as opposed to view space). The sample provides features to place and configure fire particle emitters. Each emitter is initially configured based on preset parameters defined in [FireDecorationApp.tsx](./FireDecorationApp.tsx). Select which preset is used with the dropdown menu. This sample does not demonstrate a way to configure an emitter after it has been deselected.
-For a basic decorator, the [Decorator](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/decorator/) interface is implemented. The decorate method adds the [RenderGraphics](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/rendergraphic/) to the given [DecorateContext](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/decoratecontext). Once the decorator is created, pass it to the [ViewManager.addDecorator](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/viewmanager/adddecorator/) method to have it rendered in all active views. This sample is specifically for working with particle effects. For examples of other decorators, see [Heatmap Decorator Sample](../heatmap-decorator-sample/readme.md) and this sample's [HighlightEmitter](./FireDecorator.ts). For another sample using particles in a decorator, see [Particle Effect (Snow & Rain)](../snow-rain-sample/README.md).
+For a basic decorator, the [Decorator](https://www.itwinjs.org/reference/core-frontend/views/decorator/) interface is implemented. The decorate method adds the [RenderGraphics](https://www.itwinjs.org/reference/core-frontend/rendering/rendergraphic/) to the given [DecorateContext](https://www.itwinjs.org/reference/core-frontend/rendering/decoratecontext). Once the decorator is created, pass it to the [ViewManager.addDecorator](https://www.itwinjs.org/reference/core-frontend/views/viewmanager/adddecorator/) method to have it rendered in all active views. This sample is specifically for working with particle effects. For examples of other decorators, see [Heatmap Decorator Sample](../heatmap-decorator-sample/readme.md) and this sample's [HighlightEmitter](./FireDecorator.ts). For another sample using particles in a decorator, see [Particle Effect (Snow & Rain)](../snow-rain-sample/README.md).
-Inside the decorate method, [ParticleCollectionBuilder.create](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/particlecollectionbuilder/particlecollectionbuilder.create/) is called to create a builder for the particles. Each particle is added to this builder and implements the [ParticleProps](https://www.itwinjs.org/v2/reference/imodeljs-frontend/rendering/particleprops/) interface. For efficient memory usage, the textures used by the decorator are shared and are disposed of when not in use.
+Inside the decorate method, [ParticleCollectionBuilder.create](https://www.itwinjs.org/reference/core-frontend/rendering/particlecollectionbuilder/particlecollectionbuilder.create/) is called to create a builder for the particles. Each particle is added to this builder and implements the [ParticleProps](https://www.itwinjs.org/reference/core-frontend/rendering/particleprops/?term=partic) interface. For efficient memory usage, the textures used by the decorator are shared and are disposed of when not in use.
-For this sample, each particle is updated before being rendered. All updates are scaled by a time delta to smooth any inconsistent times between updates. To ensure the decorators are always rendered by the viewport, an event listener is added to the [Viewport.onRender](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/viewport/) event that invalidates the decorators. This will force them to re-render with each frame.
+For this sample, each particle is updated before being rendered. All updates are scaled by a time delta to smooth any inconsistent times between updates. To ensure the decorators are always rendered by the viewport, an event listener is added to the [Viewport.onRender](https://www.itwinjs.org/reference/core-frontend/views/viewport/?term=onrender#onrender) event that invalidates the decorators. This will force them to re-render with each frame.
-The tooltip is created by assigning a [transient id](https://www.itwinjs.org/v2/reference/imodeljs-frontend/imodelconnection/imodelconnection/) from the iModel to the particle builder. This allows for locating within the iModel. [testDecoratorHit](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/decorator/testdecorationhit/) confirms that the given unique id belongs to the emitter, and [getDecoratorToolTip](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/decorator/getdecorationtooltip/) returns an HTML element used as the tooltip.
+The tooltip is created by assigning a [transient id](https://www.itwinjs.org/reference/core-frontend/imodelconnection/imodelconnection/?term=transientids#transientids) from the iModel to the particle builder. This allows for locating within the iModel. [testDecoratorHit](https://www.itwinjs.org/reference/core-frontend/views/decorator/testdecorationhit/) confirms that the given unique id belongs to the emitter, and [getDecoratorToolTip](https://www.itwinjs.org/reference/core-frontend/views/decorator/getdecorationtooltip/) returns an HTML element used as the tooltip.
Notes:
diff --git a/public/particle-gradient-flame.png b/src/frontend-samples/fire-decoration-sample/public/particle-gradient-flame.png
similarity index 100%
rename from public/particle-gradient-flame.png
rename to src/frontend-samples/fire-decoration-sample/public/particle-gradient-flame.png
diff --git a/public/particle-gradient-smoke.png b/src/frontend-samples/fire-decoration-sample/public/particle-gradient-smoke.png
similarity index 100%
rename from public/particle-gradient-smoke.png
rename to src/frontend-samples/fire-decoration-sample/public/particle-gradient-smoke.png
diff --git a/src/frontend-samples/fire-decoration-sample/sampleSpec.ts b/src/frontend-samples/fire-decoration-sample/sampleSpec.ts
index c70965d04..bec27da79 100644
--- a/src/frontend-samples/fire-decoration-sample/sampleSpec.ts
+++ b/src/frontend-samples/fire-decoration-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getParticleFireSampleSpec(): SampleSpec {
@@ -21,6 +21,8 @@ export function getParticleFireSampleSpec(): SampleSpec {
import("!editor-file-loader!./FireDecorator"),
import("!editor-file-loader!./PlacementTool"),
import("!editor-file-loader!./FireDecoration.scss"),
+ import("!editor-file-loader!./public/particle-gradient-flame.png?public=true"),
+ import("!editor-file-loader!./public/particle-gradient-smoke.png?public=true"),
],
type: "FireDecorationApp.tsx",
});
diff --git a/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApi.ts b/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApi.ts
index 9fa0efcca..f90d92bc0 100644
--- a/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApi.ts
+++ b/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { Angle, Arc3d, LineString3d, Loop, Point3d, Point3dArray, Transform } from "@bentley/geometry-core";
+import { Angle, Arc3d, LineString3d, Loop, Point3d, Point3dArray, Transform } from "@itwin/core-geometry";
export default class Transformations2dApi {
diff --git a/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApp.tsx b/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApp.tsx
index 65a5e7357..4d18c7d36 100644
--- a/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApp.tsx
+++ b/src/frontend-samples/geometry-samples/2d-transformations-sample/2dTransformationsApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
import { Transformations2dWidgetProvider } from "./2dTransformationsWidget";
const uiProviders = [new Transformations2dWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-10, -10, 0, 10, 10, 10),
};
const viewState: BlankConnectionViewState = {
@@ -38,8 +38,8 @@ const Transformations2dApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/2d-transformations-sample/readme.md b/src/frontend-samples/geometry-samples/2d-transformations-sample/readme.md
index 2b5ab5cf1..c01f55a51 100644
--- a/src/frontend-samples/geometry-samples/2d-transformations-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/2d-transformations-sample/readme.md
@@ -13,6 +13,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-This sample demonstrates how to create 2d shapes using [LineString3d](https://www.itwinjs.org/v2/reference/geometry-core/curve/linestring3d/), [Arc3d](https://www.itwinjs.org/v2/reference/geometry-core/curve/arc3d/). Transformations are applied using the methods [CurveCollection.TryTransformInPlace](https://www.itwinjs.org/v2/reference/geometry-core/curve/curvecollection/#trytransforminplace) and [GeometryQuery.TryTranslateInPlace](https://www.itwinjs.org/v2/reference/geometry-core/curve/geometryquery/#trytranslateinplace).
+This sample demonstrates how to create 2d shapes using [LineString3d](https://www.imodeljs.org/reference/core-geometry/curve/linestring3d/), [Arc3d](https://www.imodeljs.org/reference/core-geometry/curve/arc3d/). Transformations are applied using the methods [CurveCollection.TryTransformInPlace](https://www.imodeljs.org/reference/core-geometry/curve/curvecollection/#trytransforminplace) and [GeometryQuery.TryTranslateInPlace](https://www.imodeljs.org/reference/core-geometry/curve/geometryquery/#trytranslateinplace).
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApi.ts b/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApi.ts
index 08c12a376..51fb47ed5 100644
--- a/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApi.ts
+++ b/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { Angle, Arc3d, LinearSweep, LineString3d, Path, Point3d, PolyfaceBuilder, Ray3d, RotationalSweep, RuledSweep, StrokeOptions, Vector3d } from "@bentley/geometry-core";
+import { Angle, Arc3d, LinearSweep, LineString3d, Path, Point3d, PolyfaceBuilder, Ray3d, RotationalSweep, RuledSweep, StrokeOptions, Vector3d } from "@itwin/core-geometry";
export default class Advanced3dApi {
diff --git a/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApp.tsx b/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApp.tsx
index 8861222eb..f8f9d645f 100644
--- a/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApp.tsx
+++ b/src/frontend-samples/geometry-samples/advanced-3d-sample/Advanced3dApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d, Vector3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d, Vector3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
import { Advanced3dWidgetProvider } from "./Advanced3dWidget";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
const uiProviders = [new Advanced3dWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-15, -15, -15, 15, 15, 15),
};
const viewState: BlankConnectionViewState = {
@@ -43,8 +43,8 @@ const Advanced3dApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/advanced-3d-sample/readme.md b/src/frontend-samples/geometry-samples/advanced-3d-sample/readme.md
index 526aa2dd9..7f7527f07 100644
--- a/src/frontend-samples/geometry-samples/advanced-3d-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/advanced-3d-sample/readme.md
@@ -13,6 +13,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-This sample demonstrates how to create 3d forms using [PolyfaceBuilder](https://www.itwinjs.org/v2/reference/geometry-core/polyface/polyfacebuilder/).
+This sample demonstrates how to create 3d forms using [PolyfaceBuilder](https://www.imodeljs.org/reference/core-geometry/polyface/polyfacebuilder/).
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApi.tsx b/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApi.tsx
index c9aee8d36..663426f44 100644
--- a/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApi.tsx
+++ b/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApi.tsx
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { CurvePrimitive, Point3d } from "@bentley/geometry-core";
+import { CurvePrimitive, Point3d } from "@itwin/core-geometry";
export default class ClosestPointOnCurveApi {
diff --git a/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApp.tsx b/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApp.tsx
index d70a0783e..a0414691f 100644
--- a/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApp.tsx
+++ b/src/frontend-samples/geometry-samples/closest-point-curve-sample/ClosestPointOnCurveApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
import { ClosestPointOnCurveWidgetProvider } from "./ClosestPointOnCurveWidget";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
const uiProviders = [new ClosestPointOnCurveWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-30, -30, -30, 30, 30, 30),
};
const viewState: BlankConnectionViewState = {
@@ -38,8 +38,8 @@ const ClosestPointOnCurveApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
{
IModelApp.viewManager.addDecorator(decorator);
setDecoratorState(decorator);
- const sampleNamespace = IModelApp.i18n.registerNamespace("camera-i18n-namespace");
- MovePointTool.register(sampleNamespace);
+ void IModelApp.localization.registerNamespace("camera-i18n-namespace");
+ MovePointTool.register("camera-i18n-namespace");
}
calculateSpacePoint({ x: -10, y: 10 });
@@ -166,7 +166,7 @@ export class ClosestPointOnCurveWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/closest-point-curve-sample/InteractivePointMarker.ts b/src/frontend-samples/geometry-samples/closest-point-curve-sample/InteractivePointMarker.ts
index 044729018..f87ec1b4b 100644
--- a/src/frontend-samples/geometry-samples/closest-point-curve-sample/InteractivePointMarker.ts
+++ b/src/frontend-samples/geometry-samples/closest-point-curve-sample/InteractivePointMarker.ts
@@ -2,9 +2,9 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { ColorDef } from "@bentley/imodeljs-common";
-import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@bentley/imodeljs-frontend";
-import { Point3d, XAndY } from "@bentley/geometry-core";
+import { ColorDef } from "@itwin/core-common";
+import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@itwin/core-frontend";
+import { Point3d, XAndY } from "@itwin/core-geometry";
export class InteractivePointMarker extends Marker {
private _color: ColorDef;
@@ -36,7 +36,7 @@ export class InteractivePointMarker extends Marker {
public onMouseButton(ev: BeButtonEvent) {
if (BeButton.Data === ev.button && ev.isDown) {
this._canPick = false;
- IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
+ void IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
return true;
}
return false;
@@ -82,7 +82,7 @@ export class MovePointTool extends InputCollector {
public async onDataButtonDown(ev: BeButtonEvent) {
this._setPointFunc(ev.point);
this._toolCompleteFunc();
- this.exitTool();
+ void this.exitTool();
return EventHandled.Yes;
}
diff --git a/src/frontend-samples/geometry-samples/closest-point-curve-sample/SampleCurveFactory.ts b/src/frontend-samples/geometry-samples/closest-point-curve-sample/SampleCurveFactory.ts
index 7266d5940..8c4064793 100644
--- a/src/frontend-samples/geometry-samples/closest-point-curve-sample/SampleCurveFactory.ts
+++ b/src/frontend-samples/geometry-samples/closest-point-curve-sample/SampleCurveFactory.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AngleSweep, Arc3d, CurveChainWithDistanceIndex, CurveFactory, LineString3d, Point3d } from "@bentley/geometry-core";
+import { AngleSweep, Arc3d, CurveChainWithDistanceIndex, CurveFactory, LineString3d, Point3d } from "@itwin/core-geometry";
export class SampleCurveFactory {
diff --git a/src/frontend-samples/geometry-samples/closest-point-curve-sample/readme.md b/src/frontend-samples/geometry-samples/closest-point-curve-sample/readme.md
index 85f56e02f..453fda4bd 100644
--- a/src/frontend-samples/geometry-samples/closest-point-curve-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/closest-point-curve-sample/readme.md
@@ -13,6 +13,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-This sample uses the [CurveFactory](https://www.itwinjs.org/v2/reference/geometry-core/curve/curvefactory/) class to create curve chains and then shows a simple method to calculate a point on the chain.
+This sample uses the [CurveFactory](https://www.itwinjs.org/reference/core-geometry/curve/curvefactory/) class to create curve chains and then shows a simple method to calculate a point on the chain.
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApi.ts b/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApi.ts
index de1d4e628..22495082b 100644
--- a/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApi.ts
+++ b/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { CurvePrimitive, Point3d } from "@bentley/geometry-core";
+import { CurvePrimitive, Point3d } from "@itwin/core-geometry";
export default class CurveFractionApi {
diff --git a/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApp.tsx b/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApp.tsx
index 7e1969d73..da049c189 100644
--- a/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApp.tsx
+++ b/src/frontend-samples/geometry-samples/curve-fraction/CurveFractionApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
import { CurveFractionWidgetProvider } from "./CurveFractionWidget";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
const uiProviders = [new CurveFractionWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-35, -35, -35, 35, 35, 35),
};
const viewState: BlankConnectionViewState = {
@@ -38,8 +38,8 @@ const CurveFractionApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
{
IModelApp.viewManager.addDecorator(decorator);
setDecoratorState(decorator);
- const sampleNamespace = IModelApp.i18n.registerNamespace("camera-i18n-namespace");
- MovePointTool.register(sampleNamespace);
+ void IModelApp.localization.registerNamespace("camera-i18n-namespace");
+ MovePointTool.register("camera-i18n-namespace");
}
return (() => {
@@ -178,7 +178,7 @@ export class CurveFractionWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/curve-fraction/InteractivePointMarker.ts b/src/frontend-samples/geometry-samples/curve-fraction/InteractivePointMarker.ts
index 044729018..f87ec1b4b 100644
--- a/src/frontend-samples/geometry-samples/curve-fraction/InteractivePointMarker.ts
+++ b/src/frontend-samples/geometry-samples/curve-fraction/InteractivePointMarker.ts
@@ -2,9 +2,9 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { ColorDef } from "@bentley/imodeljs-common";
-import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@bentley/imodeljs-frontend";
-import { Point3d, XAndY } from "@bentley/geometry-core";
+import { ColorDef } from "@itwin/core-common";
+import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@itwin/core-frontend";
+import { Point3d, XAndY } from "@itwin/core-geometry";
export class InteractivePointMarker extends Marker {
private _color: ColorDef;
@@ -36,7 +36,7 @@ export class InteractivePointMarker extends Marker {
public onMouseButton(ev: BeButtonEvent) {
if (BeButton.Data === ev.button && ev.isDown) {
this._canPick = false;
- IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
+ void IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
return true;
}
return false;
@@ -82,7 +82,7 @@ export class MovePointTool extends InputCollector {
public async onDataButtonDown(ev: BeButtonEvent) {
this._setPointFunc(ev.point);
this._toolCompleteFunc();
- this.exitTool();
+ void this.exitTool();
return EventHandled.Yes;
}
diff --git a/src/frontend-samples/geometry-samples/curve-fraction/SampleCurveFactory.ts b/src/frontend-samples/geometry-samples/curve-fraction/SampleCurveFactory.ts
index be56f231d..cf8a02511 100644
--- a/src/frontend-samples/geometry-samples/curve-fraction/SampleCurveFactory.ts
+++ b/src/frontend-samples/geometry-samples/curve-fraction/SampleCurveFactory.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AngleSweep, Arc3d, LineSegment3d, LineString3d, Point3d } from "@bentley/geometry-core";
+import { AngleSweep, Arc3d, LineSegment3d, LineString3d, Point3d } from "@itwin/core-geometry";
export class SampleCurveFactory {
diff --git a/src/frontend-samples/geometry-samples/curve-fraction/readme.md b/src/frontend-samples/geometry-samples/curve-fraction/readme.md
index 52af4a826..bcf388704 100644
--- a/src/frontend-samples/geometry-samples/curve-fraction/readme.md
+++ b/src/frontend-samples/geometry-samples/curve-fraction/readme.md
@@ -9,11 +9,11 @@ This sample demonstrates the relationship between fractions and points on a curv
The purpose of this sample is to demonstrate the following:
* Create various curve primitives including line segment, arc, and line string.
-* Starting with a fraction value between 0 and 1, compute both a point and a derivative along each curve using [CurvePrimitive.fractionToPointAndDerivative](https://www.itwinjs.org/v2/reference/geometry-core/curve/curveprimitive/fractiontopointandderivative/).
-* Starting with a mouse point, compute the fraction value of the closest point on the curve using [CurvePrimitive.closestPoint](https://www.itwinjs.org/v2/reference/geometry-core/curve/curveprimitive/closestpoint/)
+* Starting with a fraction value between 0 and 1, compute both a point and a derivative along each curve using [CurvePrimitive.fractionToPointAndDerivative](https://www.itwinjs.org/reference/core-geometry/curve/curveprimitive/fractiontopointandderivative/).
+* Starting with a mouse point, compute the fraction value of the closest point on the curve using [CurvePrimitive.closestPoint](https://www.itwinjs.org/reference/core-geometry/curve/curveprimitive/closestpoint/)
## Description
This sample creates various curve primitives and then shows how to compute point and derivative information along each curve. For a given fraction value between 0 and 1, the sample draws both a) a green circle representing the point and b) a green arrow representing the derivative at that point. The length of the arrow is proportional to the magnitude of the derivative.
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApi.ts b/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApi.ts
index 0fc5c685c..44596ed6e 100644
--- a/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApi.ts
+++ b/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { Angle, AngleSweep, Arc3d, Box, Cone, Point3d, Range3d, Sphere, TorusPipe } from "@bentley/geometry-core";
+import { Angle, AngleSweep, Arc3d, Box, Cone, Point3d, Range3d, Sphere, TorusPipe } from "@itwin/core-geometry";
export default class Simple3dApi {
diff --git a/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApp.tsx b/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApp.tsx
index 3cd88d018..0dd8bfe82 100644
--- a/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApp.tsx
+++ b/src/frontend-samples/geometry-samples/simple-3d-sample/Simple3dApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d, Vector3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d, Vector3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
import { Simple3dWidgetProvider } from "./Simple3dWidget";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
const uiProviders = [new Simple3dWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-15, -15, -15, 15, 15, 15),
};
const viewState: BlankConnectionViewState = {
@@ -43,8 +43,8 @@ const Simple3dApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
{
@@ -128,7 +128,7 @@ export class Simple3dWidgetProvider implements UiItemsProvider {
getWidgetContent: () => {
return ;
},
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/simple-3d-sample/readme.md b/src/frontend-samples/geometry-samples/simple-3d-sample/readme.md
index 4d18032f2..15117f99e 100644
--- a/src/frontend-samples/geometry-samples/simple-3d-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/simple-3d-sample/readme.md
@@ -12,6 +12,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-This sample demonstrates how to create 3d primitives using [Box](https://www.itwinjs.org/v2/reference/geometry-core/solid/box/), [Cone](https://www.itwinjs.org/v2/reference/geometry-core/solid/cone/), [Sphere](https://www.itwinjs.org/v2/reference/geometry-core/solid/sphere/), and [TorusPipe](https://www.itwinjs.org/v2/reference/geometry-core/solid/toruspipe/).
+This sample demonstrates how to create 3d primitives using [Box](https://www.imodeljs.org/reference/core-geometry/solid/box/), [Cone](https://www.imodeljs.org/reference/core-geometry/solid/cone/), [Sphere](https://www.imodeljs.org/reference/core-geometry/solid/sphere/), and [TorusPipe](https://www.imodeljs.org/reference/core-geometry/solid/toruspipe/).
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApi.ts b/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApi.ts
index d30d06f86..ef8e2fce3 100644
--- a/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApi.ts
+++ b/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { LineString3d, Loop, Point3d } from "@bentley/geometry-core";
+import { LineString3d, Loop, Point3d } from "@itwin/core-geometry";
export default class SimpleAnimatedApi {
diff --git a/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApp.tsx b/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApp.tsx
index 0958a0a51..b12a5e3b9 100644
--- a/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApp.tsx
+++ b/src/frontend-samples/geometry-samples/simple-animated-sample/SimpleAnimatedApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
import { SimpleAnimatedWidgetProvider } from "./SimpleAnimatedWidget";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
const uiProviders = [new SimpleAnimatedWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-150, -150, 0, 1150, 1150, 0),
};
const viewState: BlankConnectionViewState = {
@@ -38,8 +38,8 @@ const SimpleAnimatedApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/simple-animated-sample/readme.md b/src/frontend-samples/geometry-samples/simple-animated-sample/readme.md
index 575756e94..bbdbbfc95 100644
--- a/src/frontend-samples/geometry-samples/simple-animated-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/simple-animated-sample/readme.md
@@ -12,6 +12,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-Implementing the famous Conway's Game of Life, this sample shows how to animate a view decoration by calling [ViewManager.invalidateDecorationsAllViews](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/viewmanager/) on a timer.
+Implementing the famous Conway's Game of Life, this sample shows how to animate a view decoration by calling [ViewManager.invalidateDecorationsAllViews](https://www.imodeljs.org/reference/core-frontend/views/viewmanager/?term=invalidatedecorationsallviews#invalidatedecorationsallviews) on a timer.
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/geometry-samples/simple-line-sample/InteractivePointMarker.ts b/src/frontend-samples/geometry-samples/simple-line-sample/InteractivePointMarker.ts
index 044729018..f87ec1b4b 100644
--- a/src/frontend-samples/geometry-samples/simple-line-sample/InteractivePointMarker.ts
+++ b/src/frontend-samples/geometry-samples/simple-line-sample/InteractivePointMarker.ts
@@ -2,9 +2,9 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { ColorDef } from "@bentley/imodeljs-common";
-import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@bentley/imodeljs-frontend";
-import { Point3d, XAndY } from "@bentley/geometry-core";
+import { ColorDef } from "@itwin/core-common";
+import { BeButton, BeButtonEvent, EventHandled, IModelApp, InputCollector, Marker } from "@itwin/core-frontend";
+import { Point3d, XAndY } from "@itwin/core-geometry";
export class InteractivePointMarker extends Marker {
private _color: ColorDef;
@@ -36,7 +36,7 @@ export class InteractivePointMarker extends Marker {
public onMouseButton(ev: BeButtonEvent) {
if (BeButton.Data === ev.button && ev.isDown) {
this._canPick = false;
- IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
+ void IModelApp.tools.run(MovePointTool.toolId, this.worldLocation, this._setPointFunc, () => { this._canPick = true; });
return true;
}
return false;
@@ -82,7 +82,7 @@ export class MovePointTool extends InputCollector {
public async onDataButtonDown(ev: BeButtonEvent) {
this._setPointFunc(ev.point);
this._toolCompleteFunc();
- this.exitTool();
+ void this.exitTool();
return EventHandled.Yes;
}
diff --git a/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApi.ts b/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApi.ts
index 84e45eb4e..a2d165e5a 100644
--- a/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApi.ts
+++ b/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { LineSegment3d, Point3d } from "@bentley/geometry-core";
+import { LineSegment3d, Point3d } from "@itwin/core-geometry";
export default class SimpleLineApi {
diff --git a/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApp.tsx b/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApp.tsx
index 0de250eb7..c73e285da 100644
--- a/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApp.tsx
+++ b/src/frontend-samples/geometry-samples/simple-line-sample/SimpleLineApp.tsx
@@ -3,18 +3,18 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent } from "react";
-import { Range3d } from "@bentley/geometry-core";
-import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@bentley/imodeljs-frontend";
+import { Range3d } from "@itwin/core-geometry";
+import { BlankConnectionProps, IModelApp, ScreenViewport, StandardViewId } from "@itwin/core-frontend";
import { BlankConnectionViewState, BlankViewer } from "@itwin/web-viewer-react";
-import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwinjs-sandbox";
-import { Cartographic, ColorDef, RenderMode } from "@bentley/imodeljs-common";
+import { AuthorizationClient, default3DSandboxUi, useSampleWidget } from "@itwin/sandbox";
+import { Cartographic, ColorDef, RenderMode } from "@itwin/core-common";
import { SimpleLineWidgetProvider } from "./SimpleLineWidget";
const uiProviders = [new SimpleLineWidgetProvider()];
const connection: BlankConnectionProps = {
name: "GeometryConnection",
- location: Cartographic.fromDegrees(0, 0, 0),
+ location: Cartographic.fromDegrees({ longitude: 0, latitude: 0, height: 0 }),
extents: new Range3d(-35, -35, 0, 35, 35, 35),
};
const viewState: BlankConnectionViewState = {
@@ -38,8 +38,8 @@ const SimpleLineApp: FunctionComponent = () => {
<>
{ /** Viewport to display the iModel */}
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/geometry-samples/simple-line-sample/readme.md b/src/frontend-samples/geometry-samples/simple-line-sample/readme.md
index 4f1b848e3..a61b6e475 100644
--- a/src/frontend-samples/geometry-samples/simple-line-sample/readme.md
+++ b/src/frontend-samples/geometry-samples/simple-line-sample/readme.md
@@ -13,6 +13,6 @@ The purpose of this sample is to demonstrate the following:
## Description
-This sample demonstrates how to use [LineSegment3d.create](https://www.itwinjs.org/v2/reference/geometry-core/curve/linesegment3d/createstatic/) and [LineSegment3d](https://www.itwinjs.org/v2/reference/geometry-core/curve/linesegment3d/).fractionToPoint.
+This sample demonstrates how to use [LineSegment3d.create](https://www.imodeljs.org/reference/core-geometry/curve/linesegment3d/createstatic/) and [LineSegment3d](https://www.imodeljs.org/reference/core-geometry/curve/linesegment3d/).fractionToPoint.
-This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/v2/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/v2/learning/frontend/viewdecorations/).
+This geometry sample, like the others, uses a [BlankConnection](https://www.itwinjs.org/learning/frontend/blankconnection/) to create a viewport without connecting to an iModel. It displays geometry in the viewport using [view decorations](https://www.itwinjs.org/learning/frontend/viewdecorations/).
diff --git a/src/frontend-samples/global-display-sample/GlobalDisplayApi.ts b/src/frontend-samples/global-display-sample/GlobalDisplayApi.ts
index 1e7cb60e2..8fef71ce2 100644
--- a/src/frontend-samples/global-display-sample/GlobalDisplayApi.ts
+++ b/src/frontend-samples/global-display-sample/GlobalDisplayApi.ts
@@ -2,8 +2,8 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { DisplayStyle3dProps, SpatialViewDefinitionProps } from "@bentley/imodeljs-common";
-import { BingLocationProvider, IModelConnection, queryTerrainElevationOffset, ScreenViewport, SpatialViewState } from "@bentley/imodeljs-frontend";
+import { DisplayStyle3dProps, SpatialViewDefinitionProps } from "@itwin/core-common";
+import { BingLocationProvider, IModelConnection, queryTerrainElevationOffset, ScreenViewport, SpatialViewState } from "@itwin/core-frontend";
export class GlobalDisplayApi {
private static _locationProvider?: BingLocationProvider;
@@ -36,9 +36,9 @@ export class GlobalDisplayApi {
public static readonly getInitialView = async (imodel: IModelConnection) => {
const viewDefinitionProps: SpatialViewDefinitionProps = {
- angles: { pitch: 36.514347, roll: -152.059851, yaw: -7.099313 },
+ angles: { pitch: 50.8124, roll: -148.9326, yaw: -10.772199999999998 },
camera: {
- eye: [-244543.511666, -6035326.371241, -4314115.010887],
+ eye: [-267736.22852162836, -6028003.076610586, -4300825.034757155],
focusDist: 3784.058586,
lens: 45.95389,
},
@@ -53,7 +53,7 @@ export class GlobalDisplayApi {
isPrivate: false,
model: "0x28",
modelSelectorId: "0x823",
- origin: [-247935.19536, -6032887.237023, -4312920.822367],
+ origin: [-270133.97909030726, -6026215.184655556, -4301536.141411391],
};
const displayStyleProps: DisplayStyle3dProps = {
diff --git a/src/frontend-samples/global-display-sample/GlobalDisplayApp.tsx b/src/frontend-samples/global-display-sample/GlobalDisplayApp.tsx
index 975348886..93fdd8ffe 100644
--- a/src/frontend-samples/global-display-sample/GlobalDisplayApp.tsx
+++ b/src/frontend-samples/global-display-sample/GlobalDisplayApp.tsx
@@ -2,47 +2,48 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import React, { FunctionComponent, useState } from "react";
-import { IModelApp, IModelConnection, ScreenViewport } from "@bentley/imodeljs-frontend";
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget } from "@itwinjs-sandbox";
+import React, { FunctionComponent } from "react";
+import { IModelApp, IModelConnection, ScreenViewport } from "@itwin/core-frontend";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, tileAdminOptions, useSampleWidget } from "@itwin/sandbox";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelViewportControlOptions, MessageRenderer } from "@bentley/ui-framework";
import { GlobalDisplayWidgetProvider } from "./GlobalDisplayWidget";
import { GlobalDisplayApi } from "./GlobalDisplayApi";
+import { MessageRenderer } from "@itwin/core-react";
const uiProviders = [new GlobalDisplayWidgetProvider()];
const GlobalDisplayApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Using the Global Display Controls Widget, type in the name of a location (e.g., \"Mount Everest\", \"White House\", your own address, etc), then click the button to travel there.", [SampleIModels.MetroStation]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
IModelApp.viewManager.onViewOpen.addOnce((viewport: ScreenViewport) => {
// The grid just gets in the way - turn it off.
- viewport.view.viewFlags.grid = false;
+ viewport.viewFlags = viewport.view.viewFlags.with("grid", false);
// We're not interested in seeing the contents of the iModel, only the global data.
if (viewport.view.isSpatialView())
viewport.view.modelSelector.models.clear();
});
- const viewState = await GlobalDisplayApi.getInitialView(iModelConnection);
- setViewportOptions({ viewState });
+
+ return await GlobalDisplayApi.getInitialView(iModelConnection);
};
return (
<>
-
+
{ /* Viewport to display the iModel */}
{sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
}
diff --git a/src/frontend-samples/global-display-sample/GlobalDisplayWidget.tsx b/src/frontend-samples/global-display-sample/GlobalDisplayWidget.tsx
index 59396f588..879ccdb6a 100644
--- a/src/frontend-samples/global-display-sample/GlobalDisplayWidget.tsx
+++ b/src/frontend-samples/global-display-sample/GlobalDisplayWidget.tsx
@@ -3,12 +3,12 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { FunctionComponent, useEffect, useState } from "react";
-import { IModelApp, NotifyMessageDetails, OutputMessagePriority } from "@bentley/imodeljs-frontend";
-import { Button, Input, Toggle } from "@bentley/ui-core";
+import { IModelApp, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
+import { AbstractWidgetProps, SpecialKey, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@itwin/appui-abstract";
+import { useActiveViewport } from "@itwin/appui-react";
+import { BackgroundMapType } from "@itwin/core-common";
+import { Button, Input, ToggleSwitch } from "@itwin/itwinui-react";
import { GlobalDisplayApi } from "./GlobalDisplayApi";
-import { AbstractWidgetProps, SpecialKey, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@bentley/ui-abstract";
-import { useActiveViewport } from "@bentley/ui-framework";
-import { BackgroundMapType } from "@bentley/imodeljs-common";
import "./GlobalDisplay.scss";
const GlobalDisplayWidget: FunctionComponent = () => {
@@ -28,10 +28,8 @@ const GlobalDisplayWidget: FunctionComponent = () => {
if (viewport) {
viewport.changeBackgroundMapProps({
applyTerrain: terrain,
- providerData: {
- mapType: mapLabels ? BackgroundMapType.Hybrid : BackgroundMapType.Aerial,
- },
});
+ viewport.changeBackgroundMapProvider({ type: mapLabels ? BackgroundMapType.Hybrid : BackgroundMapType.Aerial });
}
}, [viewport, terrain, mapLabels]);
@@ -43,9 +41,7 @@ const GlobalDisplayWidget: FunctionComponent = () => {
useEffect(() => {
if (viewport) {
- const viewFlags = viewport.viewFlags.clone();
- viewFlags.visibleEdges = buildingEdges;
- viewport.viewFlags = viewFlags;
+ viewport.viewFlags = viewport.viewFlags.with("visibleEdges", buildingEdges);
}
}, [viewport, buildingEdges]);
@@ -60,7 +56,7 @@ const GlobalDisplayWidget: FunctionComponent = () => {
}
};
- const _onKeyPress = (e: KeyboardEvent) => {
+ const _onKeyPress = (e: React.KeyboardEvent) => {
if (e.key === SpecialKey.Enter || e.key === SpecialKey.Return) {
_travelToDestination()
.catch((error) => {
@@ -74,15 +70,15 @@ const GlobalDisplayWidget: FunctionComponent = () => {
Terrain
-
+ setTerrain(!terrain)} />
Map Labels
-
+ setMapLabels(!mapLabels)} />
Buildings
-
+ setBuildings(!buildings)} />
Building Edges
-
+ setBuildingEdges} disabled={!buildings} />
Destination
- setDestination(e.currentTarget.value)} nativeKeyHandler={_onKeyPress} />
+ setDestination(e.currentTarget.value)} onKeyPress={_onKeyPress} />
@@ -104,7 +100,7 @@ export class GlobalDisplayWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () =>
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/global-display-sample/README.md b/src/frontend-samples/global-display-sample/README.md
index 1e48ef469..d201676a6 100644
--- a/src/frontend-samples/global-display-sample/README.md
+++ b/src/frontend-samples/global-display-sample/README.md
@@ -16,8 +16,8 @@ This sample illustrates how to:
## Description
-The terrain and map imagery type are controlled using [Viewport.changeBackgroundMapProps](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/viewport/changebackgroundmapprops). When terrain is enabled, the satellite map imagery provided by Bing Maps is projected on 3d terrain meshes provided by Cesium World Terrain. When terrain is disabled, the map is projected onto the smooth surface of the globe.
+The terrain and map imagery type are controlled using [Viewport.changeBackgroundMapProps](https://www.itwinjs.org/reference/core-frontend/views/viewport/changebackgroundmapprops). When terrain is enabled, the satellite map imagery provided by Bing Maps is projected on 3d terrain meshes provided by Cesium World Terrain. When terrain is disabled, the map is projected onto the smooth surface of the globe.
-The display of the buildings is controlled using [Viewport.displayStyle.setOSMBuildingDisplay](https://www.itwinjs.org/v2/reference/imodeljs-frontend/views/displaystylestate/setosmbuildingdisplay/). Hovering the mouse over a building will produce a tooltip containing various information such as the address, type of building, etc. The edges of the buildings are toggled by changing the `visibleEdges` property of the viewport's [ViewFlags](https://www.itwinjs.org/v2/reference/imodeljs-common/displaystyles/viewflags).
+The display of the buildings is controlled using [Viewport.displayStyle.setOSMBuildingDisplay](https://www.itwinjs.org/reference/core-frontend/views/displaystylestate/setosmbuildingdisplay/). Hovering the mouse over a building will produce a tooltip containing various information such as the address, type of building, etc. The edges of the buildings are toggled by changing the `visibleEdges` property of the viewport's [ViewFlags](https://www.itwinjs.org/reference/core-common/displaystyles/viewflags).
Converting the text typed into the "destination" box into a cartographic location involves first obtaining the latitude and longitude from a [BingLocationProvider](https://github.com/imodeljs/imodeljs/blob/master/core/frontend/src/BingLocation.ts), then using `queryTerrainElevationOffset` to determine the ground height at that point. The travel animation is invoked using `Viewport.animateFlyoverToGlobalLocation`.
diff --git a/src/frontend-samples/global-display-sample/sampleSpec.ts b/src/frontend-samples/global-display-sample/sampleSpec.ts
index b01d6c32d..bc486fca4 100644
--- a/src/frontend-samples/global-display-sample/sampleSpec.ts
+++ b/src/frontend-samples/global-display-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getGlobalDisplaySpec(): SampleSpec {
diff --git a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecorator.ts b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecorator.ts
index 2e1d9e03a..ea504767c 100644
--- a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecorator.ts
+++ b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecorator.ts
@@ -2,13 +2,10 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { DecorateContext, Decorator, GraphicBranch, GraphicType, IModelApp, RenderGraphic } from "@bentley/imodeljs-frontend";
-import { Geometry, Point3d, Range2d, Range3d, Transform } from "@bentley/geometry-core";
-import {
- ColorDef, ColorDefProps, Gradient, GraphicParams, ImageBuffer, ImageBufferFormat, RenderMaterial, RenderTexture, TextureMapping,
- ThematicGradientColorScheme, ThematicGradientMode, ThematicGradientSettings,
-} from "@bentley/imodeljs-common";
-import { dispose } from "@bentley/bentleyjs-core";
+import { DecorateContext, Decorator, GraphicBranch, GraphicType, IModelApp, RenderGraphic, TextureImage } from "@itwin/core-frontend";
+import { Geometry, Point3d, Range2d, Range3d, Transform } from "@itwin/core-geometry";
+import { ColorDef, ColorDefProps, Gradient, GraphicParams, ImageBuffer, ImageBufferFormat, RenderMaterial, RenderTexture, TextureMapping, TextureTransparency, ThematicGradientColorScheme, ThematicGradientMode, ThematicGradientSettings } from "@itwin/core-common";
+import { dispose } from "@itwin/core-bentley";
/** This file contains the code that implements the heatmap decorator including
* logic which generates the graphics of the heatmap.
@@ -130,11 +127,11 @@ export default class HeatmapDecorator implements Decorator {
private _spreadFactor: number; // 1 = narrow, 10 = default, 100 = wide
private _graphics?: RenderGraphic; // Cached graphics that can be reused from one frame to another.
- constructor(points: Point3d[], range: Range2d, spreadFactor: number, height: number) {
- this._height = height;
- this._points = points;
- this._range = HeatmapDecorator._computeSquareRange(range);
- this._spreadFactor = spreadFactor;
+ constructor() {
+ this._height = 0;
+ this._points = [];
+ this._range = Range3d.createNull();
+ this._spreadFactor = 0;
}
/** When the inputs change we have to throw away the current graphics. Also tell the
@@ -171,6 +168,14 @@ export default class HeatmapDecorator implements Decorator {
return squareRange;
}
+ public setRange(range: Range2d) {
+ this._range = HeatmapDecorator._computeSquareRange(range);
+ }
+
+ public setHeight(height: number) {
+ this._height = height;
+ }
+
/* Change the heatmap points */
public setPoints(points: Point3d[]) {
this._points = points;
@@ -260,8 +265,8 @@ export default class HeatmapDecorator implements Decorator {
return undefined;
/* Step 3: Convert the image buffer to a texture */
- const textureParams = new RenderTexture.Params(undefined, RenderTexture.Type.Normal, false);
- const texture = IModelApp.renderSystem.createTextureFromImageBuffer(imageBuffer, context.viewport.iModel, textureParams);
+ const image: TextureImage = { source: imageBuffer, transparency: TextureTransparency.Translucent };
+ const texture = IModelApp.renderSystem.createTexture({ type: RenderTexture.Type.Normal, image });
if (undefined === texture)
return undefined;
diff --git a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApi.ts b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApi.ts
index 58a9e21b7..94d347a4d 100644
--- a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApi.ts
+++ b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApi.ts
@@ -2,32 +2,21 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import "common/samples-common.scss";
-import { IModelApp } from "@bentley/imodeljs-frontend";
-import { Point3d, Range2d } from "@bentley/geometry-core";
+import { IModelApp } from "@itwin/core-frontend";
import HeatmapDecorator from "./HeatmapDecorator";
export default class HeatmapDecoratorApi {
- public static decorator?: HeatmapDecorator;
- public static addedDecorator = false;
- public static setupDecorator(points: Point3d[], range: Range2d, spreadFactor: number, height: number) {
- if(undefined === HeatmapDecoratorApi.decorator)
- HeatmapDecoratorApi.decorator = new HeatmapDecorator(points, range, spreadFactor, height);
+ public static setupDecorator() {
+ return new HeatmapDecorator();
}
- public static enableDecorations() {
- if (!HeatmapDecoratorApi.addedDecorator && HeatmapDecoratorApi.decorator) {
- IModelApp.viewManager.addDecorator(HeatmapDecoratorApi.decorator);
- HeatmapDecoratorApi.addedDecorator = true;
- }
+ public static enableDecorations(decorator: HeatmapDecorator) {
+ if (!IModelApp.viewManager.decorators.includes(decorator))
+ IModelApp.viewManager.addDecorator(decorator);
}
- public static disableDecorations() {
- if (undefined === HeatmapDecoratorApi.decorator)
- return;
-
- IModelApp.viewManager.dropDecorator(HeatmapDecoratorApi.decorator);
- HeatmapDecoratorApi.addedDecorator = false;
+ public static disableDecorations(decorator: HeatmapDecorator) {
+ IModelApp.viewManager.dropDecorator(decorator);
}
}
diff --git a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApp.tsx b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApp.tsx
index 51174678f..c1fb8b070 100644
--- a/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApp.tsx
+++ b/src/frontend-samples/heatmap-decorator-sample/HeatmapDecoratorApp.tsx
@@ -2,44 +2,35 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
import { HeatmapDecoratorWidgetProvider } from "./HeatmapDecoratorWidget";
-import { IModelConnection, StandardViewId } from "@bentley/imodeljs-frontend";
-import { ColorDef } from "@bentley/imodeljs-common";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
-import { useSampleWidget } from "@itwinjs-sandbox/hooks/useSampleWidget";
+import { IModelConnection, StandardViewId } from "@itwin/core-frontend";
+import { ColorDef } from "@itwin/core-common";
const uiProviders = [new HeatmapDecoratorWidgetProvider()];
const HeatmapDecoratorApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the options below to control the heatmap visualization.");
- const [viewportOptions, setViewportOptions] = useState
();
- const _oniModelReady = (iModelConnection: IModelConnection) => {
- ViewSetup.getDefaultView(iModelConnection)
- .then((viewState) => {
- if (viewState.is3d()) {
- // To make the heatmap look better, lock the view to a top orientation with camera turned off.
- viewState.setAllow3dManipulations(false);
- viewState.turnCameraOff();
- viewState.setStandardRotation(StandardViewId.Top);
- }
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ const viewState = await ViewSetup.getDefaultView(iModelConnection);
+ if (viewState.is3d()) {
+ // To make the heatmap look better, lock the view to a top orientation with camera turned off.
+ viewState.setAllow3dManipulations(false);
+ viewState.turnCameraOff();
+ viewState.setStandardRotation(StandardViewId.Top);
+ }
- const range = viewState.computeFitRange();
- const aspect = ViewSetup.getAspectRatio();
+ const range = viewState.computeFitRange();
+ const aspect = ViewSetup.getAspectRatio();
- viewState.lookAtVolume(range, aspect);
+ viewState.lookAtVolume(range, aspect);
- // The heatmap looks better against a white background.
- viewState.displayStyle.backgroundColor = ColorDef.white;
- setViewportOptions({ viewState });
- })
- .catch((error) => {
- // eslint-disable-next-line no-console
- console.error(error);
- });
+ // The heatmap looks better against a white background.
+ viewState.displayStyle.backgroundColor = ColorDef.white;
+ return viewState;
};
/** The sample's render method */
@@ -48,11 +39,12 @@ const HeatmapDecoratorApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
{
@@ -18,69 +19,82 @@ export const HeatmapDecoratorWidget: React.FunctionComponent = () => {
const [spreadFactorState, setSpreadFactorState] = React.useState(10);
const [pointsState, setPointsState] = React.useState([]);
const [rangeState, setRangeState] = React.useState(Range2d.createNull());
+ const [heightState, setHeightState] = React.useState(0);
+ const heatmapDecorator = React.useRef();
useEffect(() => {
- if (viewport) {
+ heatmapDecorator.current = HeatmapDecoratorApi.setupDecorator();
+ }, []);
+
+ const viewInit = useCallback((vp: ScreenViewport) => {
- // Grab range of the contents of the view. We'll use this to size the heatmap.
- const range3d = viewport.view.computeFitRange();
- const range = Range2d.createFrom(range3d);
+ // Grab range of the contents of the view. We'll use this to position the random markers.
+ const range3d = vp.view.computeFitRange();
+ const range = Range2d.createFrom(range3d);
- // We'll draw the heatmap as an overlay in the center of the view's Z extents.
- const height = range3d.high.interpolate(0.5, range3d.low).z;
+ // We'll draw the heatmap as an overlay in the center of the view's Z extents.
+ const height = range3d.high.interpolate(0.5, range3d.low).z;
- HeatmapDecoratorApi.disableDecorations();
- HeatmapDecoratorApi.decorator = undefined;
- HeatmapDecoratorApi.setupDecorator(pointsState, range, spreadFactorState, height);
- if (showDecoratorState) {
- HeatmapDecoratorApi.enableDecorations();
- }
+ setRangeState(range);
+ setHeightState(height);
+ }, []);
- setRangeState(range);
+ /** When the images are loaded, initalize the MarkerPin */
+ useEffect(() => {
+ if (viewport) {
+ viewInit(viewport);
}
+ }, [viewInit, viewport]);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [viewport]);
+ useEffect(() => {
+ heatmapDecorator.current && heatmapDecorator.current.setHeight(heightState);
+ }, [heightState]);
+
+ useEffect(() => {
+ heatmapDecorator.current && heatmapDecorator.current.setRange(rangeState);
+ }, [rangeState]);
// Effect when the points get updated
useEffect(() => {
- if (HeatmapDecoratorApi.decorator)
- HeatmapDecoratorApi.decorator.setPoints(pointsState);
+ heatmapDecorator.current && heatmapDecorator.current.setPoints(pointsState);
}, [pointsState]);
useEffect(() => {
- if (HeatmapDecoratorApi.decorator)
- HeatmapDecoratorApi.decorator.setSpreadFactor(spreadFactorState);
+ heatmapDecorator.current && heatmapDecorator.current.setSpreadFactor(spreadFactorState);
}, [spreadFactorState]);
useEffect(() => {
- if (showDecoratorState)
- HeatmapDecoratorApi.enableDecorations();
- else
- HeatmapDecoratorApi.disableDecorations();
+ if (heatmapDecorator.current) {
+ if (showDecoratorState)
+ HeatmapDecoratorApi.enableDecorations(heatmapDecorator.current);
+ else
+ HeatmapDecoratorApi.disableDecorations(heatmapDecorator.current);
+ }
}, [showDecoratorState]);
- const _onPointsChanged = (p: Point3d[]) => {
+ const _onPointsChanged = useCallback((p: Point3d[]) => {
setPointsState(p);
- };
+ }, []);
- const _onChangeSpreadFactor = (values: readonly number[]) => {
+ const onChangeSpreadFactor = (values: readonly number[]) => {
setSpreadFactorState(values[0]);
};
- const _onChangeShowHeatmap = (checked: boolean) => {
- setShowDecoratorState(checked);
- };
+ const onChangeShowHeatmap = useCallback((ev: ChangeEvent) => {
+ setShowDecoratorState(ev.target.checked);
+ }, []);
+
+ const sliderValues = useMemo(() => [spreadFactorState], [spreadFactorState]);
return (
<>
Show Heatmap
-
-
+
+
Spread Factor
-
+
@@ -100,7 +114,7 @@ export class HeatmapDecoratorWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () => ,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/hypermodeling-sample/HyperModeling.scss b/src/frontend-samples/hypermodeling-sample/HyperModeling.scss
index 519e92863..cc8c44557 100644
--- a/src/frontend-samples/hypermodeling-sample/HyperModeling.scss
+++ b/src/frontend-samples/hypermodeling-sample/HyperModeling.scss
@@ -3,14 +3,14 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
.sample-options {
- color: var(--buic-foreground-body);
+ color: white;
padding: 8px;
}
-.sample-options-3col-even {
+.sample-options-2col {
display: grid;
row-gap: 8px;
column-gap: 8px;
- grid-template-columns: 1fr 1fr 1fr;
+ grid-template-columns: 1fr 2fr;
align-items: center;
}
\ No newline at end of file
diff --git a/src/frontend-samples/hypermodeling-sample/HyperModelingApi.ts b/src/frontend-samples/hypermodeling-sample/HyperModelingApi.ts
index c6d3e9d97..ad7f2bb68 100644
--- a/src/frontend-samples/hypermodeling-sample/HyperModelingApi.ts
+++ b/src/frontend-samples/hypermodeling-sample/HyperModelingApi.ts
@@ -2,9 +2,9 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { BeEvent, Id64String } from "@bentley/bentleyjs-core";
-import { ScreenViewport, ViewState } from "@bentley/imodeljs-frontend";
-import { HyperModeling, HyperModelingDecorator, SectionMarker, SectionMarkerConfig, SectionMarkerHandler } from "@bentley/hypermodeling-frontend";
+import { BeEvent, Id64String } from "@itwin/core-bentley";
+import { ScreenViewport, ViewState } from "@itwin/core-frontend";
+import { HyperModeling, HyperModelingDecorator, SectionMarker, SectionMarkerConfig, SectionMarkerHandler } from "@itwin/hypermodeling-frontend";
/** Dispatches an event when the selected section marker changes. */
class MarkerHandler extends SectionMarkerHandler {
@@ -90,7 +90,7 @@ export default class HyperModelingApi {
return false;
const promise = "drawing" === which ? decorator.openSection(marker) : decorator.openSheet(marker);
- if (!await promise)
+ if (!(await promise))
return false;
await HyperModeling.startOrStop(viewport, false);
diff --git a/src/frontend-samples/hypermodeling-sample/HyperModelingApp.tsx b/src/frontend-samples/hypermodeling-sample/HyperModelingApp.tsx
index bcccd551e..fbbd1389f 100644
--- a/src/frontend-samples/hypermodeling-sample/HyperModelingApp.tsx
+++ b/src/frontend-samples/hypermodeling-sample/HyperModelingApp.tsx
@@ -2,11 +2,10 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import React, { FunctionComponent, useCallback, useState } from "react";
-import { AuthorizationClient, default2DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
+import React, { FunctionComponent, useCallback } from "react";
+import { AuthorizationClient, default2DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelConnection, ScreenViewport } from "@bentley/imodeljs-frontend";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
+import { IModelConnection, ScreenViewport } from "@itwin/core-frontend";
import { HyperModelingWidgetProvider } from "./HyperModelingWidget";
import HyperModelingApi from "./HyperModelingApi";
@@ -14,11 +13,9 @@ const uiProviders = [new HyperModelingWidgetProvider()];
const HyperModelingApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Using the Hyper-Modeling controls, enable or disable 2D graphics. Use the buttons to view a 2D sheet or drawing, or select a new marker to view a new section.", [SampleIModels.House]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
const _onIModelInit = useCallback(() => {
@@ -37,12 +34,13 @@ const HyperModelingApp: FunctionComponent = () => {
{sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
diff --git a/src/frontend-samples/hypermodeling-sample/HyperModelingWidget.tsx b/src/frontend-samples/hypermodeling-sample/HyperModelingWidget.tsx
index 53ccc323f..7325413d8 100644
--- a/src/frontend-samples/hypermodeling-sample/HyperModelingWidget.tsx
+++ b/src/frontend-samples/hypermodeling-sample/HyperModelingWidget.tsx
@@ -2,14 +2,14 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import React, { useCallback, useEffect } from "react";
-import { SectionMarker } from "@bentley/hypermodeling-frontend";
-import { Button, Toggle } from "@bentley/ui-core";
-import { ViewState } from "@bentley/imodeljs-frontend";
+import React, { ChangeEvent, useCallback, useEffect } from "react";
+import { SectionMarker } from "@itwin/hypermodeling-frontend";
+import { ViewState } from "@itwin/core-frontend";
import HyperModelingApi from "./HyperModelingApi";
-import { assert, Id64String } from "@bentley/bentleyjs-core";
-import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@bentley/ui-abstract";
-import { useActiveViewport } from "@bentley/ui-framework";
+import { assert, Id64String } from "@itwin/core-bentley";
+import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@itwin/appui-abstract";
+import { useActiveViewport } from "@itwin/appui-react";
+import { Button, ToggleSwitch } from "@itwin/itwinui-react";
import "./HyperModeling.scss";
interface Previous {
@@ -75,10 +75,11 @@ export const HyperModelingWidget: React.FunctionComponent = () => {
setPrevious({ view, markerId: marker.state.id });
}, [viewport]);
- const onToggle2dGraphics = useCallback((toggle: boolean) => {
+ const onToggle2dGraphics = useCallback((event: ChangeEvent) => {
if (viewport) {
- HyperModelingApi.toggle2dGraphics(toggle);
- setToggle2dGraphics(toggle);
+ const checked = event.target.checked;
+ HyperModelingApi.toggle2dGraphics(checked);
+ setToggle2dGraphics(checked);
}
}, [viewport]);
@@ -93,19 +94,21 @@ export const HyperModelingWidget: React.FunctionComponent = () => {
return (
{(previous) && (
-
-
-
+
+ 3D View:
+
)}
{(!previous) && (
-
-
Display 2d graphics
-
-
-
-
-
+
+ Display 2D graphics:
+
+ Section Drawing:
+
+ Sheet View:
+
+ New Marker:
+
)}
@@ -125,7 +128,7 @@ export class HyperModelingWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () =>
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/hypermodeling-sample/sampleSpec.ts b/src/frontend-samples/hypermodeling-sample/sampleSpec.ts
index ddd372e62..3a20660a7 100644
--- a/src/frontend-samples/hypermodeling-sample/sampleSpec.ts
+++ b/src/frontend-samples/hypermodeling-sample/sampleSpec.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getHyperModelingSpec(): SampleSpec {
diff --git a/src/frontend-samples/image-export/ImageExportApi.ts b/src/frontend-samples/image-export/ImageExportApi.ts
index eab3a1c15..a0b10d379 100644
--- a/src/frontend-samples/image-export/ImageExportApi.ts
+++ b/src/frontend-samples/image-export/ImageExportApi.ts
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { IModelApp } from "@bentley/imodeljs-frontend";
+import { IModelApp } from "@itwin/core-frontend";
export class ImageExportApi {
diff --git a/src/frontend-samples/image-export/ImageExportApp.tsx b/src/frontend-samples/image-export/ImageExportApp.tsx
index f01c51ab4..16410cbf3 100644
--- a/src/frontend-samples/image-export/ImageExportApp.tsx
+++ b/src/frontend-samples/image-export/ImageExportApp.tsx
@@ -2,22 +2,19 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import React, { FunctionComponent, useState } from "react";
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
+import React, { FunctionComponent } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
+import { IModelConnection } from "@itwin/core-frontend";
import { ImageExportWidgetProvider } from "./ImageExportWidget";
const uiProviders = [new ImageExportWidgetProvider()];
const ImageExportApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use Image Export Controls Widget to export current viewport as an image.", [SampleIModels.House, SampleIModels.MetroStation]);
- const [viewportOptions, setViewportOptions] = useState
();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -26,11 +23,12 @@ const ImageExportApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/iot-alert-sample/IotAlertApi.tsx b/src/frontend-samples/iot-alert-sample/IotAlertApi.tsx
index ec2f163f0..6e6428b2d 100644
--- a/src/frontend-samples/iot-alert-sample/IotAlertApi.tsx
+++ b/src/frontend-samples/iot-alert-sample/IotAlertApi.tsx
@@ -3,13 +3,11 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
-import "@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css";
-import "common/samples-common.scss";
-import { EmphasizeElements, FeatureOverrideType, IModelApp, OutputMessagePriority, ViewChangeOptions } from "@bentley/imodeljs-frontend";
-import { ColorDef } from "@bentley/imodeljs-common";
-import { ReactMessage, UnderlinedButton } from "@bentley/ui-core";
-import { Id64String } from "@bentley/bentleyjs-core";
-import { MessageManager, ReactNotifyMessageDetails } from "@bentley/ui-framework";
+import { EmphasizeElements, IModelApp, OutputMessagePriority, ViewChangeOptions } from "@itwin/core-frontend";
+import { ColorDef, FeatureOverrideType } from "@itwin/core-common";
+import { ReactMessage, UnderlinedButton } from "@itwin/core-react";
+import { Id64String } from "@itwin/core-bentley";
+import { MessageManager, ReactNotifyMessageDetails } from "@itwin/appui-react";
export default class IotAlertApi {
public static showAlertNotification(selectedElement: string, elementNameIdMap: Map) {
diff --git a/src/frontend-samples/iot-alert-sample/IotAlertApp.tsx b/src/frontend-samples/iot-alert-sample/IotAlertApp.tsx
index 0e7a04de9..3efad1c43 100644
--- a/src/frontend-samples/iot-alert-sample/IotAlertApp.tsx
+++ b/src/frontend-samples/iot-alert-sample/IotAlertApp.tsx
@@ -2,37 +2,37 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
-import { IModelViewportControlOptions, MessageRenderer } from "@bentley/ui-framework";
+import { IModelConnection } from "@itwin/core-frontend";
import { IotAlertWidgetProvider } from "./IotAlertWidget";
const uiProviders = [new IotAlertWidgetProvider()];
const IotAlertApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the controls below to change the iModel.", [SampleIModels.BayTown]);
- const [viewportOptions, setViewportOptions] = useState();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
return (
<>
-
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
diff --git a/src/frontend-samples/iot-alert-sample/IotAlertWidget.tsx b/src/frontend-samples/iot-alert-sample/IotAlertWidget.tsx
index 12ff2c89a..1f552258c 100644
--- a/src/frontend-samples/iot-alert-sample/IotAlertWidget.tsx
+++ b/src/frontend-samples/iot-alert-sample/IotAlertWidget.tsx
@@ -4,22 +4,24 @@
*--------------------------------------------------------------------------------------------*/
import React, { useEffect } from "react";
-import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@bentley/ui-abstract";
-import { Button, Select, UnderlinedButton } from "@bentley/ui-core";
+import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@itwin/appui-abstract";
+import { UnderlinedButton } from "@itwin/core-react";
import IotAlertApi, { BlinkingEffect } from "./IotAlertApi";
-import { Id64String } from "@bentley/bentleyjs-core";
-import { MessageManager, useActiveIModelConnection } from "@bentley/ui-framework";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
+import { Id64String } from "@itwin/core-bentley";
+import { MessageManager, useActiveIModelConnection } from "@itwin/appui-react";
+import { IModelConnection } from "@itwin/core-frontend";
import "./IotAlert.scss";
+import { Button, Select } from "@itwin/itwinui-react";
const IotAlertWidget: React.FunctionComponent = () => {
const iModelConnection = useActiveIModelConnection();
const [wantEmphasisState, setWantEmphasisState] = React.useState(false);
+ const [categoryState, setCategoryState] = React.useState("");
const [elementsMapState, setElementsMapState] = React.useState>(new Map());
const [elementNameIdMapState, setElementNameIdMapState] = React.useState>(new Map());
- const [elementsState, setElementsState] = React.useState([]);
- const [selectedElementState, setSelectedElementState] = React.useState("");
- const [blinkingElementsState, setBlinkingElementsState] = React.useState([]);
+ const [elementsState, setElementsState] = React.useState<{ label: string, value: string }[]>([]);
+ const [selectedElementState, setSelectedElementState] = React.useState<{ label: string, value: string }>({ label: "", value: "" });
+ const [blinkingElementsState, setBlinkingElementsState] = React.useState<{ label: string, value: string }[]>([]);
useEffect(() => {
if (!iModelConnection)
@@ -33,14 +35,10 @@ const IotAlertWidget: React.FunctionComponent = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [iModelConnection]);
- const createBlinkingElementIdSet = (blinkingElements: string[], elementNameIdMap: Map) => {
+ const createBlinkingElementIdSet = (blinkingElements: { value: string, label: string }[]) => {
const ids = new Set();
- for (const [key, value] of elementNameIdMap) {
- for (const element of blinkingElements) {
- if (key === element) {
- ids.add(value);
- }
- }
+ for (const element of blinkingElements) {
+ ids.add(element.value);
}
return ids;
};
@@ -52,7 +50,7 @@ const IotAlertWidget: React.FunctionComponent = () => {
return elementNames;
}
for (const element of classElements) {
- elementNames.push(element.userLabel);
+ elementNames.push({ value: element[0], label: element[1] });
}
return elementNames;
};
@@ -61,7 +59,7 @@ const IotAlertWidget: React.FunctionComponent = () => {
MessageManager.clearMessages();
setBlinkingElementsState([]);
setWantEmphasisState(false);
- const ids = createBlinkingElementIdSet([], elementNameIdMapState);
+ const ids = createBlinkingElementIdSet([]);
BlinkingEffect.stopBlinking(ids);
};
@@ -70,8 +68,8 @@ const IotAlertWidget: React.FunctionComponent = () => {
tempSet.push(selectedElementState);
setBlinkingElementsState(tempSet);
setWantEmphasisState(true);
- IotAlertApi.showAlertNotification(selectedElementState, elementNameIdMapState);
- const ids = createBlinkingElementIdSet(tempSet, elementNameIdMapState);
+ IotAlertApi.showAlertNotification(selectedElementState.label, elementNameIdMapState);
+ const ids = createBlinkingElementIdSet(tempSet);
BlinkingEffect.doBlink(ids);
};
@@ -84,18 +82,19 @@ const IotAlertWidget: React.FunctionComponent = () => {
return rows;
};
- const _classList = ["SHELL_AND_TUBE_HEAT_EXCHANGER_PAR", "VERTICAL_VESSEL_PAR", "PLATE_TYPE_HEAT_EXCHANGER", "REBOILER_PAR"];
+ const _classList = [{ label: "SHELL_AND_TUBE_HEAT_EXCHANGER_PAR", value: "SHELL_AND_TUBE_HEAT_EXCHANGER_PAR" }, { label: "VERTICAL_VESSEL_PAR", value: "VERTICAL_VESSEL_PAR" }, { label: "PLATE_TYPE_HEAT_EXCHANGER", value: "PLATE_TYPE_HEAT_EXCHANGER" }, { label: "REBOILER_PAR", value: "REBOILER_PAR" }];
const init = async (imodel: IModelConnection) => {
const classElementsMap = new Map();
for (const className of _classList) {
- const fullClassName = `ProcessPhysical.${className}`;
+ const fullClassName = `ProcessPhysical.${className.value}`;
const elements = await fetchElements(imodel, fullClassName);
- classElementsMap.set(className, elements);
+ classElementsMap.set(className.value, elements);
}
- const elementNames = _getElementsFromClass(_classList[0], classElementsMap);
+ const elementNames = _getElementsFromClass(_classList[0].value, classElementsMap);
const nameIdMap = _populateNameIdMap(classElementsMap);
setSelectedElementState(elementNames[0]);
+ setCategoryState(_classList[0].value);
setElementsState(elementNames);
setElementNameIdMapState(nameIdMap);
setElementsMapState(classElementsMap);
@@ -104,34 +103,39 @@ const IotAlertWidget: React.FunctionComponent = () => {
const _populateNameIdMap = (elementsMap: Map) => {
const nameIdMap = new Map();
for (const className of _classList) {
- const classElements: any = elementsMap.get(className);
+ const classElements: any = elementsMap.get(className.value);
if (classElements === undefined) {
continue;
}
for (const element of classElements) {
- nameIdMap.set(element.userLabel, element.id);
+ nameIdMap.set(element[1], element[0]);
}
}
return nameIdMap;
};
- const _onClassChange = (e: any) => {
- const className = e.target.value;
+ const _onClassChange = (className: string) => {
const elementNames = _getElementsFromClass(className, elementsMapState);
setElementsState(elementNames);
+ setCategoryState(className);
setSelectedElementState(elementNames[0]);
};
- const _onElementChange = (e: any) => {
- const pickedElement = e.target.value;
- setSelectedElementState(pickedElement);
+ const _onElementChange = (pickedElement: string) => {
+ for (const [key, id] of elementNameIdMapState.entries()) {
+ if (id === pickedElement) {
+ setSelectedElementState({ label: key, value: id });
+ break;
+ }
+ }
+
};
const _removeTag = (i: any) => {
const newTags = blinkingElementsState;
- newTags.splice(i, 1);
+ newTags.splice(i.label, 1);
setBlinkingElementsState(newTags);
- const ids = createBlinkingElementIdSet(newTags, elementNameIdMapState);
+ const ids = createBlinkingElementIdSet(newTags);
BlinkingEffect.stopBlinking(ids);
if (blinkingElementsState.length === 0) {
setWantEmphasisState(false);
@@ -144,8 +148,8 @@ const IotAlertWidget: React.FunctionComponent = () => {
return "";
return blinkingElementsState.map((tag, i) => (
-
- IotAlertApi._zoomToElements(tag, elementNameIdMapState)}>{tag}
+
+ IotAlertApi._zoomToElements(tag.label, elementNameIdMapState)}>{tag.label}
));
@@ -159,9 +163,9 @@ const IotAlertWidget: React.FunctionComponent = () => {
Pick class
-
+
value={categoryState} options={_classList} onChange={_onClassChange} disabled={!iModelConnection} onShow={() => { }} onHide={() => { }} />
Pick element
-
+ value={selectedElementState.value} options={elementsState} onChange={_onElementChange} disabled={!iModelConnection} onShow={() => { }} onHide={() => { }} />
Alert
@@ -195,7 +199,7 @@ export class IotAlertWidgetProvider implements UiItemsProvider {
defaultState: WidgetState.Floating,
// eslint-disable-next-line react/display-name
getWidgetContent: () =>
,
- }
+ },
);
}
return widgets;
diff --git a/src/frontend-samples/iot-alert-sample/sampleSpec.ts b/src/frontend-samples/iot-alert-sample/sampleSpec.ts
index 5aacd0360..3499ca692 100644
--- a/src/frontend-samples/iot-alert-sample/sampleSpec.ts
+++ b/src/frontend-samples/iot-alert-sample/sampleSpec.ts
@@ -3,7 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { SampleIModels } from "@itwinjs-sandbox/SampleIModels";
+import { SampleIModels } from "@itwin/sandbox/SampleIModels";
import { SampleSpec } from "SampleSpec";
export function getIotAlertSpec(): SampleSpec {
diff --git a/src/frontend-samples/issues-sample/Issues.scss b/src/frontend-samples/issues-sample/Issues.scss
index bd0c5e2df..1f1a22fad 100644
--- a/src/frontend-samples/issues-sample/Issues.scss
+++ b/src/frontend-samples/issues-sample/Issues.scss
@@ -2,7 +2,7 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-@import "~@bentley/ui-core/lib/ui-core/index";
+@import "~@itwin/core-react/lib/esm/core-react/index";
.sample-options {
color: var(--buic-foreground-body);
diff --git a/src/frontend-samples/issues-sample/IssuesApi.ts b/src/frontend-samples/issues-sample/IssuesApi.ts
index 128ffff78..545d6455c 100644
--- a/src/frontend-samples/issues-sample/IssuesApi.ts
+++ b/src/frontend-samples/issues-sample/IssuesApi.ts
@@ -2,12 +2,11 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import "@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css";
-import { IModelApp, IModelConnection } from "@bentley/imodeljs-frontend";
+import { IModelApp, IModelConnection } from "@itwin/core-frontend";
import { MarkerData, MarkerPinDecorator } from "frontend-samples/marker-pin-sample/MarkerPinDecorator";
-import { Point3d } from "@bentley/geometry-core";
-import { Presentation } from "@bentley/presentation-frontend";
-import { InstanceKey, KeySet, KeySetJSON, LabelDefinition } from "@bentley/presentation-common";
+import { Point3d } from "@itwin/core-geometry";
+import { Presentation } from "@itwin/presentation-frontend";
+import { InstanceKey, KeySet, KeySetJSON, LabelDefinition } from "@itwin/presentation-common";
import { IssueGet } from "./IssuesClient";
export interface LabelWithId extends LabelDefinition {
diff --git a/src/frontend-samples/issues-sample/IssuesApp.tsx b/src/frontend-samples/issues-sample/IssuesApp.tsx
index cd3bc3b2d..5bab50471 100644
--- a/src/frontend-samples/issues-sample/IssuesApp.tsx
+++ b/src/frontend-samples/issues-sample/IssuesApp.tsx
@@ -2,22 +2,19 @@
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
-import { AuthorizationClient, default3DSandboxUi, SampleIModels, useSampleWidget, ViewSetup } from "@itwinjs-sandbox";
-import React, { FunctionComponent, useState } from "react";
+import { AuthorizationClient, default3DSandboxUi, mapLayerOptions, SampleIModels, useSampleWidget, ViewSetup } from "@itwin/sandbox";
+import React, { FunctionComponent } from "react";
import { Viewer } from "@itwin/web-viewer-react";
-import { IModelConnection } from "@bentley/imodeljs-frontend";
-import { IModelViewportControlOptions } from "@bentley/ui-framework";
+import { IModelConnection } from "@itwin/core-frontend";
import { IssuesWidgetProvider } from "./IssuesWidget";
const uiProviders = [new IssuesWidgetProvider()];
const IssuesApp: FunctionComponent = () => {
const sampleIModelInfo = useSampleWidget("Use the Issue Selector widget to view Issues information", [SampleIModels.MetroStation]);
- const [viewportOptions, setViewportOptions] = useState
();
- const _oniModelReady = async (iModelConnection: IModelConnection) => {
- const viewState = await ViewSetup.getDefaultView(iModelConnection);
- setViewportOptions({ viewState });
+ const _initialViewstate = async (iModelConnection: IModelConnection) => {
+ return ViewSetup.getDefaultView(iModelConnection);
};
/** The sample's render method */
@@ -26,11 +23,12 @@ const IssuesApp: FunctionComponent = () => {
{ /** Viewport to display the iModel */}
{sampleIModelInfo?.iModelName && sampleIModelInfo?.contextId && sampleIModelInfo?.iModelId &&
(url: string, options?: RequestInit): Promise {
+ return fetch(url, options)
+ .then(async (response) => {
+ if (!response.ok) {
+ throw new Error(response.statusText);
+ }
+ return response.json() as Promise;
+ })
+ .catch((error) => {
+ // eslint-disable-next-line no-console
+ console.error(error);
+ return undefined;
+ });
+}
+export default class IssuesClient {
public static async getProjectIssues(projectId: string, type?: string, state?: string): Promise {
- var url = `https://api.bentley.com/issues/?projectId=${projectId}`;
- if(type)
- url += `&type=${type}`
-
- if(state)
- url += `&state=${state}`
-
+ let url = `https://api.bentley.com/issues/?projectId=${projectId}`;
+ if (type)
+ url += `&type=${type}`;
+
+ if (state)
+ url += `&state=${state}`;
+
+ const accessToken = await IssuesClient.getAccessToken();
const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes),
+ Authorization: accessToken,
},
};
- return request(await IssuesClient.getRequestContext(), url, options)
- .then((resp: Response): IssuesList | undefined => {
- if (resp.body === undefined) return undefined;
- return resp.body;
- }).catch((_reason: any) => {
- return undefined;
- });
+ return fetchApi(url, options);
}
public static async getIssueDetails(id: string): Promise {
const url = `https://api.bentley.com/issues/${id}`;
+ const accessToken = await IssuesClient.getAccessToken();
const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes),
+ Authorization: accessToken,
},
};
- return request(await IssuesClient.getRequestContext(), url, options)
- .then((resp: Response): IssueDetailsGet | undefined => {
- if (resp.body === undefined) return undefined;
- return resp.body;
- }).catch((_reason: any) => {
- return undefined;
- });
+ return fetchApi(url, options);
}
public static async getIssueAttachments(id: string): Promise {
const url = `https://api.bentley.com/issues/${id}/attachments`;
+ const accessToken = await IssuesClient.getAccessToken();
const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes),
+ Authorization: accessToken,
},
};
- return request(await IssuesClient.getRequestContext(), url, options)
- .then((resp: Response): AttachmentMetadataList | undefined => {
- if (resp.body === undefined) return undefined;
- return resp.body;
- }).catch((_reason: any) => {
- return undefined;
- });
+ return fetchApi(url, options);
}
public static async getAttachmentById(id: string, attachmentId: string): Promise {
const url = `https://api.bentley.com/issues/${id}/attachments/${attachmentId}`;
- return fetch(url, {
+ const accessToken = await IssuesClient.getAccessToken();
+ const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes)!,
+ Authorization: accessToken,
},
- }).then(async (response) => {
- return await response.blob().then((data) => {
- if (response.ok) {
- return data
- } else {
- return undefined;
- }
+ };
+
+ return fetch(url, options)
+ .then(async (response) => {
+ if (!response.ok)
+ throw new Error(response.statusText);
+ return response.blob();
})
- });
+ .catch((error) => {
+ // eslint-disable-next-line no-console
+ console.error(error);
+ return undefined;
+ });
}
public static async getIssueComments(id: string): Promise {
const url = `https://api.bentley.com/issues/${id}/comments`;
+ const accessToken = await IssuesClient.getAccessToken();
const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes),
+ Authorization: accessToken,
},
};
- return request(await IssuesClient.getRequestContext(), url, options)
- .then((resp: Response): CommentsListPreferReturnMinimal | undefined => {
- if (resp.body === undefined) return undefined;
- return resp.body;
- }).catch((_reason: any) => {
- return undefined;
- });
+ return fetchApi(url, options);
}
public static async getIssueAuditTrail(id: string): Promise {
const url = `https://api.bentley.com/issues/${id}/auditTrailEntries`;
+ const accessToken = await IssuesClient.getAccessToken();
const options = {
method: "GET",
headers: {
- Authorization: (await IssuesClient.getAccessToken())?.toTokenString(IncludePrefix.Yes),
+ Authorization: accessToken,
},
};
- return request(await IssuesClient.getRequestContext(), url, options)
- .then((resp: Response): AuditTrail | undefined => {
- if (resp.body === undefined) return undefined;
- return resp.body;
- }).catch((_reason: any) => {
- return undefined;
- });
+ return fetchApi(url, options);
}
private static async getAccessToken() {
- try {
- return (IModelApp.authorizationClient as AuthorizationClient).getAccessToken();
- } catch (e) {
- return undefined;
- }
- }
+ if (!IModelApp.authorizationClient)
+ throw new Error("AuthorizationClient is not defined. Most likely IModelApp.startup was not called yet.");
- private static async getRequestContext() {
- if (!IssuesClient._requestContext) {
- IssuesClient._requestContext = await AuthorizedFrontendRequestContext.create();
- }
- return IssuesClient._requestContext;
+ return IModelApp.authorizationClient.getAccessToken();
}
}
diff --git a/src/frontend-samples/issues-sample/IssuesWidget.tsx b/src/frontend-samples/issues-sample/IssuesWidget.tsx
index faddc5c20..e0837487e 100644
--- a/src/frontend-samples/issues-sample/IssuesWidget.tsx
+++ b/src/frontend-samples/issues-sample/IssuesWidget.tsx
@@ -3,22 +3,21 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useActiveIModelConnection, useActiveViewport } from "@bentley/ui-framework";
-import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@bentley/ui-abstract";
-import { HorizontalTabs, Select, Spinner, SpinnerSize } from "@bentley/ui-core";
-import { Angle, Point3d, Vector3d } from "@bentley/geometry-core";
-import { Body, IconButton, Leading, Subheading, Table, Tile } from "@itwin/itwinui-react";
+import { useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
+import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider, WidgetState } from "@itwin/appui-abstract";
+import { Angle, Point3d, Vector3d } from "@itwin/core-geometry";
+import { Alert, Body, HorizontalTabs, IconButton, LabeledSelect, Leading, ProgressRadial, SelectOption, Subheading, Tab, Table, Tile } from "@itwin/itwinui-react";
import IssuesClient, { AttachmentMetadataGet, AuditTrailEntryGet, CommentGetPreferReturnMinimal, IssueDetailsGet, IssueGet } from "./IssuesClient";
import IssuesApi, { LabelWithId } from "./IssuesApi";
-import "./Issues.scss";
import { MarkerPinDecorator } from "frontend-samples/marker-pin-sample/MarkerPinDecorator";
+import "./Issues.scss";
const thumbnails: Map = new Map();
const IssuesWidget: React.FunctionComponent = () => {
const iModelConnection = useActiveIModelConnection();
- const [contextId, setContextId] = useState();
const viewport = useActiveViewport();
+ const [contextId, setContextId] = useState();
/** All issues */
const allIssues = useRef([]);
/** The issues currently being displayed */
@@ -39,9 +38,9 @@ const IssuesWidget: React.FunctionComponent = () => {
/** The active tab when the issue is being shown, -1 for none */
const [activeTab, setActiveTab] = useState(0);
/** The State filter. */
- const [stateFilter, setStateFilter] = useState("All");
+ const [issueState, setIssueState] = useState("all");
/** The type filter. */
- const [typeFilter, setTypeFilter] = useState("All");
+ const [issueFilter, setIssueType] = useState("all");
/** The decorator used for displaying issue markers */
const [issueDecorator] = React.useState(() => {
return IssuesApi.setupDecorator();
@@ -56,17 +55,16 @@ const IssuesWidget: React.FunctionComponent = () => {
}, [issueDecorator]);
useEffect(() => {
- if (iModelConnection && contextId !== iModelConnection.contextId) {
- setContextId(iModelConnection.contextId);
- }
- }, [contextId, iModelConnection]);
+ if (iModelConnection && iModelConnection.iTwinId)
+ setContextId(iModelConnection.iTwinId);
+ }, [iModelConnection, iModelConnection?.iTwinId]);
/** When iModel is loaded, get issue details */
useEffect(() => {
(async () => {
if (contextId) {
- const type = typeFilter !== "All" ? typeFilter : undefined;
- const state = stateFilter !== "All" ? stateFilter : undefined;
+ const type = issueFilter !== "all" ? issueFilter : undefined;
+ const state = issueState !== "all" ? issueState : undefined;
const issuesResp = await IssuesClient.getProjectIssues(contextId, type, state);
const oldIssues: IssueGet[] = [];
@@ -100,7 +98,7 @@ const IssuesWidget: React.FunctionComponent = () => {
// eslint-disable-next-line no-console
console.error(error);
});
- }, [contextId, stateFilter, typeFilter]);
+ }, [contextId, issueState, issueFilter]);
/** Set the preview Images on issue load */
useEffect(() => {
@@ -133,7 +131,7 @@ const IssuesWidget: React.FunctionComponent = () => {
const directionVector = Point3d.fromJSON(cameraView.direction);
const fov = Angle.degreesToRadians(cameraView.fieldOfView!);
const targetPoint = eyePoint.plus(directionVector);
- view3d.lookAtUsingLensAngle(eyePoint, targetPoint, upVector, Angle.createRadians(fov));
+ view3d.lookAt({ eyePoint, targetPoint, upVector, lensAngle: Angle.createRadians(fov) });
viewport.synchWithView();
}
}
@@ -339,7 +337,7 @@ const IssuesWidget: React.FunctionComponent = () => {
{ prop: "Created By", val: currentIssue?.createdBy },
{ prop: "Assignees", val: currentIssue?.assignees?.reduce((currentString, nextAssignee) => `${currentString} ${nextAssignee.displayName},`, "").slice(0, -1) },
];
- return ();
+ return ();
};
const issueLinkedElements = () => {
@@ -367,7 +365,7 @@ const IssuesWidget: React.FunctionComponent = () => {
if (metaData.length === 0)
return (No attachments.);
else if (attachments === undefined)
- return (
);
+ return ();
/** Loop through the dates and put them together in chunks */
return attachments.map((attachment, index) => {
@@ -435,7 +433,7 @@ const IssuesWidget: React.FunctionComponent = () => {
const auditTrail = issueAuditTrails[currentIssue!.displayName!];
if (comments === undefined || auditTrail === undefined)
- return (
);
+ return ();
else if (comments.length === 0 && auditTrail.length === 0)
return (No content.);
@@ -491,30 +489,68 @@ const IssuesWidget: React.FunctionComponent = () => {
));
};
- const filterTypes = ["All", "Clash", "Closeout", "Data Quality", "Field Data"];
+ const issueTypes: SelectOption[] = [
+ { value: "all", label: "All" },
+ { value: "Clash", label: "Clash" },
+ { value: "Closeout", label: "Closeout" },
+ { value: "Fata Quality", label: "Data Quality" },
+ { value: "Field Data", label: "Field Data" },
+ ];
+
+ const issueStates: SelectOption[] = [
+ { value: "all", label: "All" },
+ { value: "Closed", label: "Closed" },
+ { value: "Open", label: "Open" },
+ { value: "Draft", label: "Draft" },
+ ];
+
+ const getTabContent = () => {
+ switch (activeTab) {
+ case 0:
+ return (
+ {issueSummaryContent()}
+ {issueLinkedElements()}
+
);
+ case 1:
+ return (
+
+ {issueAttachmentsContent()}
+
);
+ case 2:
+ return (
+
+ {issueAuditTrailContent()}
+
);
+ default:
+ return (<>);
+ }
+ };
return (
<>
-