Added add image popup
* Replaced window.open with a blank window and the populated that with an ImageAdder react component. * Switched the image list to be part of ImageMenu's state so it can be dynamic. * Added a little form to that component that lets the user enter a URL. When they hit "submit", add that to the image menu.
This commit is contained in:
Joe Ludwig
parent
0872b84779
commit
fbcf23c69a
1 changed files with 102 additions and 16 deletions
118
src/main.tsx
118
src/main.tsx
|
|
@ -25,24 +25,43 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
class ImageMenu extends React.Component< {}, {}> //class for the whole menu, basically just renders MenuItems according to list of images
|
||||
interface ImageMenuState
|
||||
{
|
||||
imageUrls: string[];
|
||||
}
|
||||
|
||||
class ImageMenu extends React.Component< {}, ImageMenuState> //class for the whole menu, basically just renders MenuItems according to list of images
|
||||
{
|
||||
imageList:string[];
|
||||
imageToDisplay: string;
|
||||
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.imageList = [
|
||||
"https://www.pfw.edu/microsites/native-trees/images/trees/g-n/full/kentucky-coffeetree-habit-original-01.jpg",
|
||||
"https://www.pencilkings.com/wp-content/uploads/2013/09/finishedfacedrawingproportionsexamples.jpg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/0/06/EnglishSpotRabbitChocolate1(cropped).jpg"
|
||||
]; //work out how to let the user put images here, use google drive or something?
|
||||
|
||||
this.state =
|
||||
{
|
||||
imageUrls:
|
||||
[
|
||||
"https://www.pfw.edu/microsites/native-trees/images/trees/g-n/full/kentucky-coffeetree-habit-original-01.jpg",
|
||||
"https://www.pencilkings.com/wp-content/uploads/2013/09/finishedfacedrawingproportionsexamples.jpg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/0/06/EnglishSpotRabbitChocolate1(cropped).jpg"
|
||||
],
|
||||
}
|
||||
|
||||
this.imageToDisplay = "";
|
||||
}
|
||||
|
||||
@bind
|
||||
public onAddImage( url: string )
|
||||
{
|
||||
this.setState(
|
||||
{
|
||||
imageUrls: [ ...this.state.imageUrls, url ]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
public displayImage(image: string) //given to buttons, by setting the image to display we stop drawing the menu and start drawing the image, remove image undoes this, we also force an update here since we dont use state
|
||||
{
|
||||
this.imageToDisplay = image;
|
||||
|
|
@ -68,8 +87,8 @@ class ImageMenu extends React.Component< {}, {}> //class for the whole menu, bas
|
|||
)
|
||||
}
|
||||
else{ //if there isnt an image selected then show the menu
|
||||
if (this.imageList.length > 0){
|
||||
let itemList = this.imageList.map((image, step) => { //for each image the user has given us, add it to the menu, we use some maths to calculate their position on the grid then pop it in
|
||||
if (this.state.imageUrls.length > 0){
|
||||
let itemList = this.state.imageUrls.map((image, step) => { //for each image the user has given us, add it to the menu, we use some maths to calculate their position on the grid then pop it in
|
||||
|
||||
let itemStyle = {
|
||||
gridColumnStart: ((step%4)+1).toString(),
|
||||
|
|
@ -83,7 +102,7 @@ class ImageMenu extends React.Component< {}, {}> //class for the whole menu, bas
|
|||
});
|
||||
|
||||
var containerStyle:string = ""; //hopefully will return "15vw 15vw 15vw" with as many 15wvs as nessessary, sets how many rows menu has
|
||||
for (var i:number = 0; i < this.imageList.length/4; i++){
|
||||
for (var i:number = 0; i < this.state.imageUrls.length/4; i++){
|
||||
containerStyle += "20vw ";
|
||||
}
|
||||
|
||||
|
|
@ -106,9 +125,73 @@ class ImageMenu extends React.Component< {}, {}> //class for the whole menu, bas
|
|||
}
|
||||
|
||||
|
||||
interface ImageAddedProps
|
||||
{
|
||||
addImageCallback: ( url: string ) => void;
|
||||
}
|
||||
|
||||
interface ImageAdderState
|
||||
{
|
||||
url: string;
|
||||
}
|
||||
|
||||
class ImageAdder extends React.Component< ImageAddedProps, ImageAdderState >
|
||||
{
|
||||
constructor( props: any )
|
||||
{
|
||||
super( props );
|
||||
|
||||
this.state = { url: "" };
|
||||
}
|
||||
|
||||
@bind
|
||||
private handleChange( event: React.ChangeEvent<HTMLInputElement> )
|
||||
{
|
||||
this.setState( { url: event.target.value });
|
||||
}
|
||||
|
||||
@bind
|
||||
private handleSubmit(event: React.FormEvent< HTMLFormElement > )
|
||||
{
|
||||
this.props.addImageCallback( this.state.url );
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<form onSubmit={ this.handleSubmit }>
|
||||
<label>
|
||||
Image URL to add:
|
||||
<input type="text" value={this.state.url } onChange={this.handleChange} />
|
||||
</label>
|
||||
<input type="submit" value="Submit" />
|
||||
</form> );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const k_popupHtml =
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>referenceImageVR popup</title>
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="FullPage"></div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
|
||||
class MyGadget extends React.Component< {}, {} >
|
||||
{
|
||||
private addImagePopup: Window = null;
|
||||
private imageMenuRef = React.createRef<ImageMenu>();
|
||||
|
||||
constructor( props: any )
|
||||
{
|
||||
|
|
@ -116,10 +199,13 @@ class MyGadget extends React.Component< {}, {} >
|
|||
}
|
||||
|
||||
public openWindow(){
|
||||
window.open("https://www.bbc.co.uk/", "bbc") // this should open the page to upload images too, just testing if it would work in a separate non-vr project
|
||||
this.addImagePopup = window.open("", "popup", "", true );
|
||||
this.addImagePopup.document.write( k_popupHtml );
|
||||
|
||||
ReactDOM.render( <ImageAdder addImageCallback={ this.imageMenuRef?.current.onAddImage }/>,
|
||||
this.addImagePopup.document.getElementById( "root" ) );
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render()
|
||||
{
|
||||
|
|
@ -133,8 +219,8 @@ class MyGadget extends React.Component< {}, {} >
|
|||
</AvTransform>
|
||||
</AvStandardGrabbable>
|
||||
</div>
|
||||
<ImageMenu/>
|
||||
<button id = "uploadButton" onClick = {() => this.openWindow()}>🗅</button>
|
||||
<ImageMenu ref={ this.imageMenuRef }/>
|
||||
<button id = "uploadButton" onClick = { () => this.openWindow() }>🗅</button>
|
||||
</div> );
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue