Correcting dependencies
continuous-integration/drone/push Build was killed
Details
continuous-integration/drone/push Build was killed
Details
parent
8327ed64b7
commit
5b92ecf2fd
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,163 +0,0 @@
|
||||
import Slider from '@react-native-community/slider';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Button, StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
|
||||
import { SvgXml } from 'react-native-svg';
|
||||
import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Kanji } from '../model/kanji';
|
||||
import { KanjiMapper } from '../model/kanjiMapper';
|
||||
|
||||
import { Eye, EyeOff } from "react-native-feather";
|
||||
import { learnihonColors } from '../assets/colors';
|
||||
|
||||
const DrawingCanva = () => {
|
||||
|
||||
const style = useColorScheme() == 'light' ? style_light : style_dark;
|
||||
|
||||
const canvasRef = useRef<SketchCanvasRef>(null);
|
||||
const [strokeWidth, setStroke] = useState(5);
|
||||
const [isCanvasReady, setIsCanvasReady] = useState(false);
|
||||
const [imgXml, setImgXml] = useState('<svg></svg>');
|
||||
const selectedKanji = KanjiMapper.SerializedObjectToKanji(useSelector(state => state.kanjiReducer.selectedKanji));
|
||||
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchXml();
|
||||
if (canvasRef.current) {
|
||||
setIsCanvasReady(true);
|
||||
}
|
||||
}, [canvasRef.current, selectedKanji]);
|
||||
|
||||
const fetchXml = async () => {
|
||||
if (selectedKanji instanceof Kanji) {
|
||||
const xml = await (await fetch(selectedKanji.image)).text();
|
||||
setImgXml(xml);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={style.container}>
|
||||
|
||||
<TouchableOpacity style={style.visibility} onPress={() => setIsVisible(!isVisible)}>
|
||||
{isVisible ? (<Eye stroke={style.svg.color} opacity={0.5} />) :
|
||||
(<EyeOff stroke={style.svg.color} opacity={0.5} />)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{selectedKanji && isVisible && (
|
||||
<SvgXml
|
||||
xml={imgXml
|
||||
.replace(/fill="#[0-9a-f]{6}"/g, `fill=${style.svg.color}`)}
|
||||
width="75%"
|
||||
height="75%"
|
||||
opacity={0.1}
|
||||
style={style.back}
|
||||
/>)}
|
||||
|
||||
<SketchCanvas
|
||||
ref={canvasRef}
|
||||
strokeColor={style.canvas.strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
containerStyle={style.canvas}
|
||||
/>
|
||||
<Slider
|
||||
style={style.slider}
|
||||
onValueChange={(val) => setStroke(val)}
|
||||
minimumValue={5}
|
||||
maximumValue={15}
|
||||
minimumTrackTintColor={learnihonColors.main}
|
||||
/>
|
||||
{isCanvasReady && (<View style={style.menu}>
|
||||
<Button color={learnihonColors.main} onPress={() => {
|
||||
canvasRef.current?.reset();
|
||||
setStroke(strokeWidth);
|
||||
}} title="Reset" />
|
||||
<Button color={learnihonColors.main}
|
||||
onPress={() => {
|
||||
canvasRef.current?.undo();
|
||||
setStroke(strokeWidth);
|
||||
}} title="Undo" />
|
||||
</View>)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const style_light = StyleSheet.create({
|
||||
svg: {
|
||||
color: "black"
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
},
|
||||
back: {
|
||||
alignSelf: "center",
|
||||
width: "75%",
|
||||
height: "75%",
|
||||
position: "absolute"
|
||||
},
|
||||
canvas: {
|
||||
alignSelf: "center",
|
||||
height: "75%",
|
||||
width: "75%",
|
||||
borderWidth: 2,
|
||||
borderColor: "black",
|
||||
strokeColor: "black"
|
||||
},
|
||||
menu: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
},
|
||||
slider: {
|
||||
width: "75%",
|
||||
alignSelf: "center",
|
||||
},
|
||||
visibility: {
|
||||
position: "absolute",
|
||||
right: 50,
|
||||
top: -25
|
||||
}
|
||||
});
|
||||
|
||||
const style_dark = StyleSheet.create({
|
||||
svg: {
|
||||
color: "white"
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
},
|
||||
back: {
|
||||
alignSelf: "center",
|
||||
width: "75%",
|
||||
height: "75%",
|
||||
position: "absolute"
|
||||
},
|
||||
canvas: {
|
||||
alignSelf: "center",
|
||||
height: "75%",
|
||||
width: "75%",
|
||||
borderWidth: 2,
|
||||
borderColor: "white",
|
||||
strokeColor: "white"
|
||||
|
||||
},
|
||||
menu: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
},
|
||||
slider: {
|
||||
width: "75%",
|
||||
alignSelf: "center",
|
||||
},
|
||||
visibility: {
|
||||
position: "absolute",
|
||||
right: 50,
|
||||
top: -25
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
export default DrawingCanva;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue