import { useActiveFrontstageDef , useActiveViewport } from "@itwin/appui-react" ; import { WidgetState } from "@itwin/appui-abstract" ; import { ToggleSwitch } from "@itwin/itwinui-react" ; import { ViewFlagProps , ViewFlags } from "@itwin/core-common" ; import * as React from "react" ; import { IModelApp , Viewport } from "@itwin/core-frontend" ; export function useWidgetDef ( id ) { const frontstageDef = useActiveFrontstageDef ( ) ; return frontstageDef ?. findWidgetDef ( id ) ; } export function ToggleCameraItem ( ) { const activeViewport = useActiveViewport ( ) ; const [ cameraOn , setCameraOn ] = React . useState ( activeViewport ?. isCameraOn ) ; React . useEffect ( ( ) => { const handleViewChanged = ( vp ) : void => { setCameraOn ( vp . isCameraOn ) ; } ; return activeViewport ?. onChangeView . addListener ( handleViewChanged ) ; } , [ activeViewport ] ) ; const onToggleCamera = React . useCallback ( async ( ) => { if ( activeViewport ) { await IModelApp . tools . run ( "View.ToggleCamera" , activeViewport ) ; setCameraOn ( activeViewport . isCameraOn ) ; } } , [ activeViewport ] ) ; return ( < ToggleSwitch key = { "toggleCamera" } label = { "Camera" } labelPosition = { "right" } onChange = { onToggleCamera } checked = { cameraOn } / > ) ; } export function ViewFlagItem ( flagName ) { const activeViewport = useActiveViewport ( ) ; const flagValue = React . useCallback ( ( name , vp ? ) => { const props = vp ?. viewFlags . toJSON ( ) ; return ( props && ( props as any ) [ name ] === undefined ? false : ( props as any ) [ name ] ) ; } , [ ] ) ; const [ value , setValue ] = React . useState ( flagValue ( flagName , activeViewport ) ) ; React . useEffect ( ( ) => { const handleViewChanged = ( vp ) : void => { const props = vp . viewFlags . toJSON ( ) ; ( props as any ) [ flagName ] = ( props as any ) [ flagName ] === undefined ? false : ( props as any ) [ flagName ] ; const viewFlags = ViewFlags . fromJSON ( props ) ; vp . viewFlags = viewFlags ; setValue ( ( props as any ) [ flagName ] === undefined ? false : ( props as any ) [ flagName ] ) ; } ; return activeViewport ?. onChangeView . addListener ( handleViewChanged ) ; } , [ activeViewport , flagName ] ) ; const onViewFlagChanged = React . useCallback ( ( e ) => { const checked = e . target . checked ; if ( activeViewport ) { const props = activeViewport . viewFlags . toJSON ( ) ; ( props as any ) [ flagName ] = ( props as any ) [ flagName ] === undefined ? checked : ! ( props as any ) [ flagName ] ; const viewFlags = ViewFlags . fromJSON ( props ) ; activeViewport . viewFlags = viewFlags ; setValue ( ( props as any ) [ flagName ] === undefined ? false : ( props as any ) [ flagName ] ) ; } } , [ activeViewport , flagName ] ) ; const stylizedName = React . useCallback ( ( name ) => { name = name . charAt ( 0 ) . toUpperCase ( ) + name . slice ( 1 ) ; name = name . replace ( /([A-Z])/g , " $1" ) . trim ( ) ; return name ; } , [ ] ) ; return ( < ToggleSwitch key = { flagName } label = { stylizedName ( flagName ) } labelPosition = { "right" } onChange = { onViewFlagChanged } checked = { value } / > ) ; } export function ViewAttributesWidgetComponent ( ) { const widgetDef = useWidgetDef ( "ui-item-provider-test:ViewAttributesWidget" ) ; React . useEffect ( ( ) => { setImmediate ( ( ) => widgetDef ?. setWidgetState ( WidgetState . Floating ) ) ; } , [ widgetDef ] ) ; const items = [ ] ; items . push ( ViewFlagItem ( "acs" ) ) ; items . push ( ToggleCameraItem ( ) ) ; items . push ( ViewFlagItem ( "noConstruct" ) ) ; items . push ( ViewFlagItem ( "hidEdges" ) ) ; items . push ( ViewFlagItem ( "monochrome" ) ) ; items . push ( ViewFlagItem ( "visEdges" ) ) ; items . push ( ViewFlagItem ( "ambientOcclusion" ) ) ; items . push ( ViewFlagItem ( "shadows" ) ) ; items . push ( ViewFlagItem ( "backgroundMap" ) ) ; return ( < div style = { { display : "flex" , flexDirection : "column" , padding : "8px" , overflowY : "auto" } } > { items } < /div>); }