feat(crypto-helper): asn1: implement hex view PoC

crates/prop-strategies/src/constructors.rs

@@ -23,7 +23,8 @@ pub fn recursive_empty_asn1_type() -> impl Strategy<Value = OwnedAsn1Type> {
  let application_tag_inner = inner.clone();
  prop_oneof![
  vec(inner, 1..16).prop_map(|fields| {
- Asn1Type::Sequence(OwnedSequence::from(
+ Asn1Type::Sequence(OwnedSequence::new(
+ 0,
  fields
  .into_iter()
  .map(|asn1_type| OwnedAsn1::new(Default::default(), Box::new(asn1_type)))
@@ -33,12 +34,14 @@ pub fn recursive_empty_asn1_type() -> impl Strategy<Value = OwnedAsn1Type> {
  (0_u8..31)
  .prop_flat_map(move |tag| (Just(tag), explicit_tag_inner.clone()))
  .prop_map(|(tag, inner)| Asn1Type::ExplicitTag(OwnedExplicitTag::new(
+ 0,
  tag,
  OwnedAsn1::new(Default::default(), Box::new(inner))
  ))),
  (0_u8..31)
  .prop_flat_map(move |tag| (Just(tag), application_tag_inner.clone()))
  .prop_map(|(tag, inner)| Asn1Type::ApplicationTag(OwnedApplicationTag::new(
+ 0,
  tag,
  OwnedAsn1::new(Default::default(), Box::new(inner))
  ))),

crates/prop-strategies/src/generic_types.rs

@@ -3,9 +3,9 @@ use proptest::prelude::any;
 use proptest::strategy::{Just, Strategy};
 
 pub fn any_bool() -> impl Strategy<Value = Bool> {
- any::<bool>().prop_map(Bool::from)
+ any::<bool>().prop_map(|flag| Bool::new(0, flag))
 }
 
 pub fn any_null() -> impl Strategy<Value = Null> {
- Just(Null)
+ Just(Null::default())
 }

crates/prop-strategies/src/string.rs

@@ -8,14 +8,14 @@ const STRING_LEN: usize = 12;
 prop_compose! {
  pub fn any_octet_string()
  (data in bytes(STRING_LEN)) -> OwnedOctetString {
- OwnedOctetString::from(data)
+ OwnedOctetString::new_owned(0, data)
  }
 }
 
 prop_compose! {
  pub fn any_utf8_string()
  (data in string(STRING_LEN)) -> OwnedUtf8String {
- OwnedUtf8String::from(data)
+ OwnedUtf8String::new_owned(0, data)
  }
 }
 
@@ -26,6 +26,7 @@ prop_compose! {
  unused_bits in 0..8_usize,
  ) -> OwnedBitString {
  BitString::from_raw_vec(
+ 0,
  if data.is_empty() { 0 } else { data.len() * 8 - unused_bits },
  data,
  ).unwrap()
@@ -35,6 +36,6 @@ prop_compose! {
 prop_compose! {
  pub fn any_bmp_string()
  (data in string(STRING_LEN)) -> OwnedBmpString {
- data.as_str().into()
+ OwnedBmpString::new_owned(0, data.into())
  }
 }

public/styles/asn1/node.scss

@@ -58,3 +58,7 @@
  background-color: #ba0021;
  color: #f5bdb6;
 }
+
+.hover_node {
+ border: 2px solid rebeccapurple;
+}

src/asn1.rs

@@ -1,7 +1,7 @@
 mod asn1_viewer;
 mod hex_buffer;
-mod scheme;
 mod hex_view;
+mod scheme;
 
 use asn1_parser::Asn1;
 use web_sys::KeyboardEvent;
@@ -41,6 +41,11 @@ pub const TEST_ASN1: &[u8] = &[
  156, 243, 148, 132, 139, 241, 150, 160, 154, 241, 169, 185, 175, 226, 128, 174, 226, 128, 174, 0, 70, 45,
 ];
 
+#[derive(Clone, Debug, PartialEq, Default)]
+struct Asn1Context {
+ hover_node_id: Option<u64>,
+}
+
 #[function_component(Asn1ParserPage)]
 pub fn asn1_parser_page() -> Html {
  let auto_decode = use_state(|| true);
@@ -68,6 +73,10 @@ pub fn asn1_parser_page() -> Html {
 
  let raw_asn1_setter = raw_asn1.setter();
 
+ let ctx = use_state(|| Option::<u64>::None);
+ let ctx_setter_asn1 = ctx.setter();
+ let ctx_setter_hex = ctx.setter();
+
  html! {
  <div class={classes!("vertical", "asn1-page")} {onkeydown}>
  <ByteInput bytes={(*raw_asn1).clone()} setter={Callback::from(move |data| raw_asn1_setter.set(data))} placeholder={"asn1 data".to_owned()} rows={10} />
@@ -76,8 +85,17 @@ pub fn asn1_parser_page() -> Html {
  <Checkbox id={"auto-decode-asn1".to_owned()} name={"auto-decode".to_owned()} checked={*auto_decode} {set_checked} />
  </div>
  <div class="asn1-viewers">
- <Asn1Viewer data={(*raw_asn1).clone()} structure={(*parsed_asn1).clone()} />
- <HexViewer />
+ <Asn1Viewer
+ structure={(*parsed_asn1).clone()}
+ cur_node={(*ctx).clone()}
+ set_cur_node={move |id| ctx_setter_asn1.set(id)}
+ />
+ <HexViewer
+ raw_data={(*raw_asn1).clone()}
+ structure={(*parsed_asn1).clone()}
+ cur_node={(*ctx).clone()}
+ set_cur_node={move |id| ctx_setter_hex.set(id)}
+ />
  </div>
  </div>
  }

src/asn1/asn1_viewer.rs

@@ -1,19 +1,21 @@
 use asn1_parser::OwnedAsn1;
-use yew::{function_component, html, Html, Properties};
+use yew::{function_component, html, Callback, Html, Properties};
 
 use crate::asn1::scheme::build_asn1_schema;
 
 #[derive(PartialEq, Properties, Clone)]
 pub struct Asn1ViewerProps {
- pub data: Vec<u8>,
  pub structure: OwnedAsn1,
+
+ pub cur_node: Option<u64>,
+ pub set_cur_node: Callback<Option<u64>>,
 }
 
 #[function_component(Asn1Viewer)]
 pub fn asn1_viewer(props: &Asn1ViewerProps) -> Html {
  html! {
  <div>
- {build_asn1_schema(&props.structure)}
+ {build_asn1_schema(&props.structure, &props.cur_node)}
  </div>
  }
 }

src/asn1/hex_view.rs

@@ -1,10 +1,35 @@
-use yew::{function_component, html, Html, Properties};
+use asn1_parser::OwnedAsn1;
+use web_sys::MouseEvent;
+use yew::{function_component, html, use_context, Callback, Html, Properties};
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct HexViewerProps {
+ pub raw_data: Vec<u8>,
+ pub structure: OwnedAsn1,
+
+ pub cur_node: Option<u64>,
+ pub set_cur_node: Callback<Option<u64>>,
+}
 
 #[function_component(HexViewer)]
-pub fn hex_viewer() -> Html {
+pub fn hex_viewer(props: &HexViewerProps) -> Html {
+ let cur_node = props.cur_node.clone();
+
+ let set_cur_node = props.set_cur_node.clone();
+ let onmouseenter = Callback::from(move |_: MouseEvent| {
+ log::debug!("Mouse enter event! {:?}", cur_node);
+ set_cur_node.emit(Some(3));
+ });
+
+ let set_cur_node = props.set_cur_node.clone();
+ let onmouseleave = Callback::from(move |_: MouseEvent| {
+ log::debug!("Mouse leave event! {:?}", cur_node);
+ set_cur_node.emit(None);
+ });
+
  html! {
  <div class="asn1-hex-viewer">
- <span>{"HexView"}</span>
+ <span {onmouseenter} {onmouseleave}>{"third elem show yourself"}</span>
  </div>
  }
 }

src/asn1/scheme.rs

@@ -3,58 +3,87 @@ mod sequence;
 mod strings;
 mod tag;
 
-use asn1_parser::{Asn1, Asn1Type};
-use yew::html;
+use asn1_parser::{Asn1, Asn1Entity, Asn1Type};
 use yew::virtual_dom::VNode;
+use yew::{classes, function_component, html, Children, Classes, Html, Properties};
 
 use self::primitive::{BoolNode, NullNode};
 use self::sequence::SequenceNode;
 use self::strings::{BitStringNode, BmpStringNode, OctetStringNode, Utf8StringNode};
 use self::tag::{ApplicationTagNode, ExplicitTagNode};
 
-// #[derive(PartialEq, Properties, Clone)]
-// pub struct Asn1SchemeProps {
-//  pub schema: OwnedAsn1,
-// }
+#[derive(PartialEq, Properties, Clone)]
+pub struct Asn1NodeProps {
+ pub id: u64,
+ pub cur_id: Option<u64>,
 
-pub fn build_asn1_schema(asn1: &Asn1<'_>) -> VNode {
+ pub children: Children,
+}
+
+#[function_component(Asn1Node)]
+pub fn asn1_node(props: &Asn1NodeProps) -> Html {
+ fn compare_ids(id: u64, cur_id: &Option<u64>) -> Classes {
+ log::debug!("compare: {} {:?}", id, cur_id);
+ match cur_id {
+ Some(cur_id) if *cur_id == id => {
+ log::debug!("set class");
+ classes!("hover_node")
+ }
+ _ => classes!(""),
+ }
+ }
+
+ html! {
+ <div class={compare_ids(props.id, &props.cur_id)}>
+ {props.children.clone()}
+ </div>
+ }
+}
+
+pub fn build_asn1_schema(asn1: &Asn1<'_>, cur_node: &Option<u64>) -> VNode {
  match asn1.asn1() {
  Asn1Type::OctetString(octet) => html! {
- <OctetStringNode node={octet.to_owned()} />
+ <Asn1Node id={octet.id()} cur_id={cur_node.clone()}>
+ <OctetStringNode node={octet.to_owned()} />
+ </Asn1Node>
  },
  Asn1Type::Utf8String(utf8) => html! {
- <Utf8StringNode node={utf8.to_owned()} />
+ <Asn1Node id={utf8.id()} cur_id={cur_node.clone()}>
+ <Utf8StringNode node={utf8.to_owned()} />
+ </Asn1Node>
  },
  Asn1Type::Sequence(sequence) => html! {
- <SequenceNode node={sequence.to_owned()} />
+ <SequenceNode node={sequence.to_owned()} cur_node={cur_node.clone()} />
  },
  Asn1Type::BitString(bit) => html! {
- <BitStringNode node={bit.to_owned()} />
+ <Asn1Node id={bit.id()} cur_id={cur_node.clone()}>
+ <BitStringNode node={bit.to_owned()} />
+ </Asn1Node>
  },
  Asn1Type::Bool(boolean) => html! {
- <BoolNode node={boolean.to_owned()} />
+ <Asn1Node id={boolean.id()} cur_id={cur_node.clone()}>
+ <BoolNode node={boolean.to_owned()} />
+ </Asn1Node>
  },
  Asn1Type::BmpString(bmp) => html! {
- <BmpStringNode node={bmp.to_owned()} />
+ <Asn1Node id={bmp.id()} cur_id={cur_node.clone()}>
+ <BmpStringNode node={bmp.to_owned()} />
+ </Asn1Node>
  },
- Asn1Type::Null(_) => html! {
- <NullNode />
+ Asn1Type::Null(null) => html! {
+ <Asn1Node id={null.id()} cur_id={cur_node.clone()}>
+ <NullNode />
+ </Asn1Node>
  },
  Asn1Type::ExplicitTag(explicit) => html! {
- <ExplicitTagNode node={explicit.to_owned()} />
+ <Asn1Node id={explicit.id()} cur_id={cur_node.clone()}>
+ <ExplicitTagNode node={explicit.to_owned()} cur_node={cur_node.clone()} />
+ </Asn1Node>
  },
  Asn1Type::ApplicationTag(application) => html! {
- <ApplicationTagNode node={application.to_owned()} />
+ <Asn1Node id={application.id()} cur_id={cur_node.clone()}>
+ <ApplicationTagNode node={application.to_owned()} cur_node={cur_node.clone()} />
+ </Asn1Node>
  },
  }
 }
-
-// #[function_component(Asn1Scheme)]
-// pub fn asn1_scheme(props: &Asn1SchemeProps) -> Html {
-// let node = ;
-
-// html! {
-// <div>
-// </div>
-// }
-// }

src/asn1/scheme/sequence.rs

@@ -1,18 +1,22 @@
-use asn1_parser::OwnedSequence;
+use asn1_parser::{Asn1Entity, OwnedSequence};
 use yew::{function_component, html, Html, Properties};
 
 use crate::asn1::scheme::build_asn1_schema;
 
 #[derive(PartialEq, Properties, Clone)]
 pub struct SequenceNodeProps {
  pub node: OwnedSequence,
+ pub cur_node: Option<u64>,
 }
 
 #[function_component(SequenceNode)]
 pub fn sequence(props: &SequenceNodeProps) -> Html {
  let fields = props.node.fields();
 
- let fields_components = fields.iter().map(|f| build_asn1_schema(f)).collect::<Vec<_>>();
+ let fields_components = fields
+ .iter()
+ .map(|f| build_asn1_schema(f, &props.cur_node))
+ .collect::<Vec<_>>();
 
  html! {
  <div>

src/asn1/scheme/tag.rs

@@ -6,6 +6,7 @@ use crate::asn1::scheme::build_asn1_schema;
 #[derive(PartialEq, Properties, Clone)]
 pub struct ExplicitTagProps {
  pub node: OwnedExplicitTag,
+ pub cur_node: Option<u64>,
 }
 
 #[function_component(ExplicitTagNode)]
@@ -16,14 +17,15 @@ pub fn explicit_tag(props: &ExplicitTagProps) -> Html {
  <span>{format!("[{}]", props.node.tag_number())}</span>
  </div>
  <div class="asn1-constructor-body">
- {build_asn1_schema(props.node.inner())}
+ {build_asn1_schema(props.node.inner(), &props.cur_node)}
  </div>
  </div>
  }
 }
 #[derive(PartialEq, Properties, Clone)]
 pub struct ApplicationTagProps {
  pub node: OwnedApplicationTag,
+ pub cur_node: Option<u64>,
 }
 
 #[function_component(ApplicationTagNode)]
@@ -34,7 +36,7 @@ pub fn application_tag(props: &ApplicationTagProps) -> Html {
  <span>{format!("Application {}", props.node.tag_number())}</span>
  </div>
  <div class="asn1-constructor-body">
- {build_asn1_schema(props.node.inner())}
+ {build_asn1_schema(props.node.inner(), &props.cur_node)}
  </div>
  </div>
  }