emilia
/
plate-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Utility for copying plates as image

This commit is contained in:
Emilia Allison 2023-12-29 18:50:01 -05:00
parent 3456be2e9a
commit 08f647cd01
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
5 changed files with 7869 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7830
assets/js/html2canvas.js Normal file
View File

File diff suppressed because one or more lines are too long

24
assets/js/screenshot_utility.js Normal file
View File

@ -0,0 +1,24 @@
function copy_screenshot(el) {
html2canvas(el).then((canvas) => {
console.log("Copying image to clipboard");
let data = canvas.toDataURL();
const textArea = document.createElement("textarea");
textArea.value = data;
document.body.prepend(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
});
}
function copy_screenshot_dest() {
let plate = document.getElementsByClassName("dest_plate")[0];
copy_screenshot(plate);
}
function copy_screenshot_src() {
let plate = document.getElementsByClassName("source_plate")[0];
copy_screenshot(plate);
}

2
index.html
View File

@ -4,6 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link data-trunk rel="scss" href="assets/scss/index.scss"> <link data-trunk rel="scss" href="assets/scss/index.scss">
<link data-trunk rel="copy-dir" href="assets/fonts"> <link data-trunk rel="copy-dir" href="assets/fonts">
<script data-trunk src="assets/js/screenshot_utility.js"></script>
<script data-trunk src="assets/js/html2canvas.js"></script>
<title>Plate Tool</title> <title>Plate Tool</title>
</head> </head>
</html> </html>

8
src/components/plates/destination_plate.rs
View File

@ -107,6 +107,11 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback); let mouseleave_callback = Callback::clone(&mouseup_callback);
let screenshot_callback = Callback::from(|_| {
let _ = js_sys::eval("copy_screenshot_dest()");
});
let column_header = { let column_header = {
let headers = (1..=props.destination_plate.plate.size().1) let headers = (1..=props.destination_plate.plate.size().1)
.map(|j| { .map(|j| {
@ -143,7 +148,8 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
.collect::<Html>(); .collect::<Html>();
html! { html! {
<div class={classes!{"dest_plate", <div ondblclick={screenshot_callback}
class={classes!{"dest_plate",
"W".to_owned()+&props.source_plate.plate.plate_format.to_string()}}> "W".to_owned()+&props.source_plate.plate.plate_format.to_string()}}>
<table <table
onmouseup={move |e| { onmouseup={move |e| {

7
src/components/plates/source_plate.rs
View File

@ -108,6 +108,10 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
let mouseleave_callback = Callback::clone(&mouseup_callback); let mouseleave_callback = Callback::clone(&mouseup_callback);
let screenshot_callback = Callback::from(|_| {
let _ = js_sys::eval("copy_screenshot_src()");
});
let column_header = { let column_header = {
let headers = (1..=props.source_plate.plate.size().1) let headers = (1..=props.source_plate.plate.size().1)
.map(|j| { .map(|j| {
@ -148,7 +152,8 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
.collect::<Html>(); .collect::<Html>();
html! { html! {
<div class={classes!{"source_plate", <div ondblclick={screenshot_callback}
class={classes!{"source_plate",
"W".to_owned()+&props.source_plate.plate.plate_format.to_string()}}> "W".to_owned()+&props.source_plate.plate.plate_format.to_string()}}>
<table <table
onmouseup={move |e| { onmouseup={move |e| {