DressOrc/imageReferenceVR
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from JoeLudwig/joe_add_image_popup

Browse source 
Added add image popup
This commit is contained in:
Nye Evans 2021-02-06 19:08:19 +00:00 • committed by GitHub
commit a7b483db4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 102 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/main.tsx
View file

@ -25,24 +25,43 @@ class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for
} }
} }
interface ImageMenuState
class ImageMenu extends React.Component< {}, {}> //class for the whole menu, basically just renders MenuItems according to list of images {
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; imageToDisplay: string;
constructor(props) constructor(props)
{ {
super(props); super(props);
this.imageList = [ this.state =
{
imageUrls:
[
"https://www.pfw.edu/microsites/native-trees/images/trees/g-n/full/kentucky-coffeetree-habit-original-01.jpg", "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://www.pencilkings.com/wp-content/uploads/2013/09/finishedfacedrawingproportionsexamples.jpg",
"https://upload.wikimedia.org/wikipedia/commons/0/06/EnglishSpotRabbitChocolate1(cropped).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.imageToDisplay = ""; 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 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; 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 else{ //if there isnt an image selected then show the menu
if (this.imageList.length > 0){ if (this.state.imageUrls.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 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 = { let itemStyle = {
gridColumnStart: ((step%4)+1).toString(), 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 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 "; 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< {}, {} > class MyGadget extends React.Component< {}, {} >
{ {
private addImagePopup: Window = null;
private imageMenuRef = React.createRef<ImageMenu>();
constructor( props: any ) constructor( props: any )
{ {
@ -116,9 +199,12 @@ class MyGadget extends React.Component< {}, {} >
} }
public openWindow(){ 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() public render()
@ -133,7 +219,7 @@ class MyGadget extends React.Component< {}, {} >
</AvTransform> </AvTransform>
</AvStandardGrabbable> </AvStandardGrabbable>
</div> </div>
<ImageMenu/> <ImageMenu ref={ this.imageMenuRef }/>
<button id = "uploadButton" onClick = { () => this.openWindow() }>🗅</button> <button id = "uploadButton" onClick = { () => this.openWindow() }>🗅</button>
</div> ); </div> );
} }