Added initial remoteUrl state

So the image will appear if it's set before the remote gadget is spawned.
This commit is contained in:
Joe Ludwig 2021-02-13 10:40:56 -08:00
parent 078f24f6fe
commit 5d747004ab

View file

@ -200,6 +200,13 @@ interface MyGadgetState
remoteUrl: string; remoteUrl: string;
} }
interface MyGadgetRemoteParams
{
remoteUrl: string;
}
const k_ImageGalleryInterface = "image-gallery@1";
class MyGadget extends React.Component< {}, MyGadgetState > class MyGadget extends React.Component< {}, MyGadgetState >
{ {
private addImagePopup: Window = null; private addImagePopup: Window = null;
@ -237,15 +244,51 @@ class MyGadget extends React.Component< {}, MyGadgetState >
} }
} }
@bind
private sendRemoteEvent( event: ImageMenuEvent )
{
if( event.type == ImageMenuEventType.SetImage )
{
this.setState( { remoteUrl: event.url } );
}
this.grabbableRef.current?.sendRemoteEvent( event, true );
}
public componentDidMount()
{
if( AvGadget.instance().isRemote )
{
let params = AvGadget.instance().findInitialInterface( k_ImageGalleryInterface )?.params as MyGadgetRemoteParams;
if( params?.remoteUrl )
{
this.setState( { remoteUrl: params.remoteUrl } );
}
}
}
private renderLocal() private renderLocal()
{ {
let remoteInitLocks: InitialInterfaceLock[] = [];
if( this.state.remoteUrl )
{
remoteInitLocks.push( {
iface: k_ImageGalleryInterface,
receiver: null,
params:
{
remoteUrl: this.state.remoteUrl,
}
} );
}
return ( return (
<div className={ "FullPage" } > <div className={ "FullPage" } >
<div> <div>
<AvStandardGrabbable modelUri={ "models/HandleModel.glb" } <AvStandardGrabbable modelUri={ "models/HandleModel.glb" }
modelScale={ 0.8 } modelScale={ 0.8 }
style={ GrabbableStyle.Gadget } style={ GrabbableStyle.Gadget }
remoteInterfaceLocks={ [] } remoteInterfaceLocks={ remoteInitLocks }
ref={ this.grabbableRef } ref={ this.grabbableRef }
> >
<AvTransform translateY={ 0.21 } > <AvTransform translateY={ 0.21 } >
@ -254,8 +297,7 @@ class MyGadget extends React.Component< {}, MyGadgetState >
</AvStandardGrabbable> </AvStandardGrabbable>
</div> </div>
<ImageMenu ref={ this.imageMenuRef } <ImageMenu ref={ this.imageMenuRef }
sendEventCallback={ ( event: ImageMenuEvent ) => sendEventCallback={ this.sendRemoteEvent }/>
{ this.grabbableRef.current?.sendRemoteEvent( event, true ); } }/>
<button id = "uploadButton" onClick = { () => this.openWindow() }>🗅</button> <button id = "uploadButton" onClick = { () => this.openWindow() }>🗅</button>
</div> ); </div> );
} }