Skip to content

Commit

Permalink
Update protoviz and add new settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielstuart14
danielstuart14 committed Jul 10, 2024
1 parent 958731e commit 785e059
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 99 deletions.
6 changes: 3 additions & 3 deletions Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions Cargo.toml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "protoviz-web"
version = "0.1.0"
version = "0.2.0"
authors = ["Daniel Stuart <[email protected]>"]
edition = "2021"

Expand All @@ -13,7 +13,7 @@ dioxus = { version = "0.5", features = ["web"] }
# Debug
dioxus-logger = "0.5.0"
dioxus-free-icons = { version = "0.8.6", features = ["font-awesome-solid"] }
protoviz = "0.4.1"
protoviz = "0.4.2"
hex_color = "3.0.0"
js-sys = "0.3.69"
web-sys = { version = "0.3.69", features = ["Blob", "BlobPropertyBag", "Url"] }
Expand Down
17 changes: 3 additions & 14 deletions assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ html,body, #st-full-pg {
}

.header {
padding: 10px;
padding: 0 10px;
background-color: #3C3C3C;
display: flex;
align-items: center;
Expand Down Expand Up @@ -185,6 +185,7 @@ html,body, #st-full-pg {
justify-content: space-between;
background-color: #242424;
line-height: 0;
padding: 10px;
}

.list {
Expand Down Expand Up @@ -212,18 +213,6 @@ input[type=color] {
width: 50px;
}

input[type=file]:enabled {
cursor: pointer;
}

input[type=file] {
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
display: none;
}
168 changes: 109 additions & 59 deletions src/main.rs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
mod utils;

use dioxus::prelude::*;
use dioxus_free_icons::{icons::fa_solid_icons::{FaCaretDown, FaCaretUp, FaPlus, FaX}, Icon};
use dioxus_free_icons::{
icons::fa_solid_icons::{FaCaretDown, FaCaretUp, FaPlus, FaX},
Icon,
};
use dioxus_logger::tracing::{error, Level};
use hex_color::{Display, HexColor};
use protoviz::descriptor::ProtoDescriptor;
use dioxus_logger::tracing::{Level, error};

use utils::{create_field_descriptors, download_file, update_field_inputs, update_svg, FieldInput};


fn main() {
// Init logger
dioxus_logger::init(Level::INFO).expect("failed to init logger");
Expand All @@ -17,69 +19,79 @@ fn main() {

#[component]
fn app() -> Element {
let mut input_fields = use_signal(|| vec![
FieldInput{
name: "Field 1".to_string(),
length: "2".to_string(),
color: None,
},
FieldInput{
name: "Field 2".to_string(),
length: "N".to_string(),
color: Some(HexColor::rgb(120, 180, 240)),
},
FieldInput{
name: "Field 3".to_string(),
length: "1".to_string(),
color: Some(HexColor::rgb(240, 180, 120)),
},
]);
let mut input_fields = use_signal(|| {
vec![
FieldInput {
name: "Field 1".to_string(),
length: "2".to_string(),
wrap: false,
color: None,
},
FieldInput {
name: "Field 2".to_string(),
length: "N".to_string(),
wrap: false,
color: Some(HexColor::rgb(120, 180, 240)),
},
FieldInput {
name: "Field 3".to_string(),
length: "1".to_string(),
wrap: false,
color: Some(HexColor::rgb(240, 180, 120)),
},
]
});

let mut file_opened = use_signal(|| String::new());
let mut descriptor = use_signal(|| ProtoDescriptor::default());
let mut svg_data = use_signal(|| {
descriptor.write().fields = create_field_descriptors(&input_fields.read());
update_svg(&descriptor.read())
});

rsx! {
link { rel: "stylesheet", href: "main.css" }
div { class: "header",
h1 { class: "title",
"ProtoViz"
"ProtoViz"
},
div { class: "header_left",
button { class: "button",
label { r#for: "file-open", class: "button",
"Open"
input {
r#type: "file",
accept: ".json",
multiple: false,
onchange: move |evt| {
async move {
if let Some(files) = evt.files() {
match files.files().iter().next() {
Some(file_name) => {
if let Some(file) = files.read_file_to_string(file_name).await {
let new_descriptor: ProtoDescriptor = match serde_json::from_str(&file) {
Ok(descriptor) => descriptor,
Err(e) => {
error!("Failed to parse file: {}", e);
gloo_dialogs::alert("Failed to parse file");
return;
}
};

*descriptor.write() = new_descriptor;
*input_fields.write() = update_field_inputs(&descriptor.read().fields);
*svg_data.write() = update_svg(&descriptor.read());
}
},
None => {}
}
},
input {
id: "file-open",
r#type: "file",
accept: ".json",
multiple: false,
value: "{*file_opened.read()}",
onchange: move |evt| {
*file_opened.write() = evt.value();
async move {
if let Some(files) = evt.files() {
match files.files().iter().next() {
Some(file_name) => {
if let Some(file) = files.read_file_to_string(file_name).await {
let new_descriptor: ProtoDescriptor = match serde_json::from_str(&file) {
Ok(descriptor) => descriptor,
Err(e) => {
error!("Failed to parse file: {}", e);
gloo_dialogs::alert("Failed to parse file");
return;
}
};

*descriptor.write() = new_descriptor;
*input_fields.write() = update_field_inputs(&descriptor.read().fields);
*svg_data.write() = update_svg(&descriptor.read());
}
},
None => {}
}
}
*file_opened.write() = String::new();
}
}
},
}
button { class: "button",
onclick: move |_| {
Expand Down Expand Up @@ -179,9 +191,23 @@ fn app() -> Element {
*svg_data.write() = update_svg(&descriptor.read());
}
},
label { r#for: "wrap", "Wrap" },
input { r#type: "checkbox",
checked: field.wrap,
name: "wrap",
oninput: move |evt| {
if evt.checked() {
input_fields.write()[i].wrap = true;
} else {
input_fields.write()[i].wrap = false;
}
descriptor.write().fields = create_field_descriptors(&input_fields.read());
*svg_data.write() = update_svg(&descriptor.read());
}
},
label { r#for: "color", "Color" },
input { r#type: "checkbox",
checked: field.color.is_some(),
input { r#type: "checkbox",
checked: field.color.is_some(),
name: "color",
oninput: move |evt| {
if evt.checked() {
Expand Down Expand Up @@ -217,7 +243,7 @@ fn app() -> Element {
}
}
}
}
}
}
div { class: "column right_column",
div { class: "viewport",
Expand Down Expand Up @@ -291,9 +317,9 @@ fn app() -> Element {
input {
r#type: "checkbox",
name: "is_network",
checked: descriptor.read().elements.is_network,
checked: descriptor.read().elements.network_order,
onchange: move |evt| {
descriptor.write().elements.is_network = evt.checked();
descriptor.write().elements.network_order = evt.checked();
*svg_data.write() = update_svg(&descriptor.read());
}
}
Expand All @@ -303,9 +329,9 @@ fn app() -> Element {
input {
r#type: "checkbox",
name: "field_pos",
checked: descriptor.read().elements.position,
checked: descriptor.read().elements.field_position,
onchange: move |evt| {
descriptor.write().elements.position = evt.checked();
descriptor.write().elements.field_position = evt.checked();
*svg_data.write() = update_svg(&descriptor.read());
}
}
Expand All @@ -315,9 +341,33 @@ fn app() -> Element {
input {
r#type: "checkbox",
name: "field_len",
checked: descriptor.read().elements.length,
checked: descriptor.read().elements.field_length,
onchange: move |evt| {
descriptor.write().elements.field_length = evt.checked();
*svg_data.write() = update_svg(&descriptor.read());
}
}
},
div { class: "row list_row",
label { r#for: "wrap_line", "Wrap Line" },
input {
r#type: "checkbox",
name: "wrap_line",
checked: descriptor.read().elements.wrap_line,
onchange: move |evt| {
descriptor.write().elements.wrap_line = evt.checked();
*svg_data.write() = update_svg(&descriptor.read());
}
}
},
div { class: "row list_row",
label { r#for: "start_symbol", "Start Symbol" },
input {
r#type: "checkbox",
name: "start_symbol",
checked: descriptor.read().elements.start_symbol,
onchange: move |evt| {
descriptor.write().elements.length = evt.checked();
descriptor.write().elements.start_symbol = evt.checked();
*svg_data.write() = update_svg(&descriptor.read());
}
}
Expand Down
Loading

0 comments on commit 785e059

Please sign in to comment.