|
@@ -9,7 +9,7 @@ import { FontAwesome } from "@expo/vector-icons";
|
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
|
import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
|
|
|
import React, { memo, useEffect, useState, useRef } from "react";
|
|
|
-import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View, ImageSourcePropType, Share, } from 'react-native';
|
|
|
+import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View, ImageSourcePropType, Share, StyleSheet } from 'react-native';
|
|
|
import { ScrollView } from "react-native-gesture-handler";
|
|
|
import Modal from 'react-native-modal';
|
|
|
import { checkMultiple, PERMISSIONS, RESULTS } from "react-native-permissions";
|
|
@@ -23,7 +23,7 @@ import { Svg, Rect, Image as ImageSVG, Circle } from 'react-native-svg'
|
|
|
import ReactDOMServer from 'react-dom/server'; //npm i --save-dev @types/react-dom
|
|
|
|
|
|
import IndoorFloor from "../IndoorFloor";
|
|
|
-import ViewShot from "react-native-view-shot";
|
|
|
+import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
|
|
|
|
|
|
/**
|
|
|
* Props for the {@link AddLandmarkPanel} component.
|
|
@@ -60,8 +60,8 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
|
|
|
const capture: any = useRef();
|
|
|
|
|
|
const imgWidth = 346
|
|
|
- const imgHeight = 443
|
|
|
- const imageDim = 27
|
|
|
+ const imgHeight = 448
|
|
|
+ const imageDim = 25
|
|
|
|
|
|
const {
|
|
|
addLandmarkAsync,
|
|
@@ -155,9 +155,21 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
|
|
|
|
|
|
if (typeof newLandmark.floor === 'number') {
|
|
|
// let imageURI = await capture.current.capture()
|
|
|
- let imageURI = "string"
|
|
|
- console.log("*AddLandmarkPanel* imageURI is " + imageURI)
|
|
|
- await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos, indoorLmLocImg: imageURI }); // pass it in here
|
|
|
+
|
|
|
+ captureRef(capture, {
|
|
|
+ format: "jpg",
|
|
|
+ quality: 1,
|
|
|
+ result: 'base64'
|
|
|
+ }).then(
|
|
|
+ (uri) => {
|
|
|
+ console.log("Image is", uri.substring(0, 100))
|
|
|
+ addLandmarkAsync({ landmarkValue: newLandmark, photos: photos, indoorLmLocImg: uri }); // pass it in here
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ console.error("Oops, snapshot failed", error)
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
}
|
|
|
else {
|
|
|
await addLandmarkAsync({ landmarkValue: newLandmark, photos: photos });
|
|
@@ -202,7 +214,6 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
|
|
|
<Modal
|
|
|
useNativeDriver={true}
|
|
|
useNativeDriverForBackdrop={true}
|
|
|
-
|
|
|
testID="addLMModal"
|
|
|
avoidKeyboard={photos.length == 0}
|
|
|
onBackdropPress={close}
|
|
@@ -309,22 +320,35 @@ const AddLandmarkPanel: React.FC<AddLandmarkProps> = ({ newLandmark, setNewLandm
|
|
|
</SafeAreaView>
|
|
|
<PhotoPicker multiple={true} menuType='alert' photoSourceMenuOpened={photoSourceMenuOpened} onReceivedPhotoResult={result => addPhoto(result)} cancel={() => togglePhotoSourceMenu(false)} />
|
|
|
|
|
|
- {/* <View style={{position:'absolute', zIndex:-1}}>
|
|
|
- <ViewShot ref={capture} options={{format:'jpg'}}>
|
|
|
- <Svg>
|
|
|
- {renderIndoorLandmarkPin(newLandmark)}
|
|
|
- <IndoorFloor floorNum={newLandmark.floor} />
|
|
|
- Issue rn is that upon initial rendering, RN doesnt know what "newLandmark" is
|
|
|
|
|
|
- <ImageSVG x={100} y={100} width={imageDim} height={imageDim} href={lmTypes[2]['image'] as ImageSourcePropType} />
|
|
|
- <IndoorFloor floorNum={2} />
|
|
|
- </Svg>
|
|
|
+ <ViewShot style={{ width: imgWidth+20, height: imgHeight+20, position: 'absolute', right: -2000 }} ref={capture} >
|
|
|
+ {/* {console.log("newLandmark is " + newLandmark)} */}
|
|
|
+ {newLandmark == null || newLandmark.floor == null || newLandmark.landmark_type == null ? <></> :
|
|
|
+ <View style={styles.container}>
|
|
|
+ <Svg>
|
|
|
+ {console.log("x coord is " + newLandmark.longitude + " and y coord is " + newLandmark.latitude)}
|
|
|
+ <ImageSVG x={newLandmark.longitude*imgWidth-3} y={newLandmark.latitude*imgHeight-3} width={imageDim} height={imageDim} href={lmTypes[newLandmark.landmark_type]['image'] as ImageSourcePropType} />
|
|
|
+ <IndoorFloor floorNum={newLandmark.floor} />
|
|
|
+ </Svg>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</ViewShot>
|
|
|
- </View> */}
|
|
|
-
|
|
|
-
|
|
|
</Modal>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-export default memo(AddLandmarkPanel);
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ container: {
|
|
|
+ aspectRatio: 8 / 10, // (caters to portrait mode) (width is 80% the value of height dimension)
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ maxWidth: "100%",
|
|
|
+ maxHeight: "100%",
|
|
|
+ backgroundColor: "white",
|
|
|
+ padding:10
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default memo(AddLandmarkPanel);
|