feat(crypto-helper): asn1: implement node options PoC

public/styles/asn1/node.scss

@@ -3,23 +3,14 @@
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
-}
-
-.terminal-asn1-node:hover > span:first-child {
- text-decoration: underline;
- cursor: pointer;
+ cursor: crosshair;
 }
 
 .asn1-constructor-header {
  display: inline-flex;
  gap: 0.5em;
 }
 
-.asn1-constructor-header:hover {
- font-weight: bold;
- cursor: pointer;
-}
-
 .asn1-constructor-body {
  display: flex;
  flex-direction: column;
@@ -38,9 +29,10 @@
 
 .asn-simple-value {
  border: none;
- border-radius: 0.2em;
- padding: 0.2em;
+ border-radius: 0.1em;
+ padding: 0.1em 0.2em 0.1em 0.2em;
  background-color: #aab7ce;
+ font-size: 0.9em;
 }
 
 .asn-bool-true {
@@ -60,6 +52,48 @@
 }
 
 .hover_node {
- //border: 2px solid rebeccapurple;
  background: #edd5ce;
-}
+}
+
+.asn1-button-with-icon {
+ font-size: 0.7em;
+ width: auto;
+ height: 2em;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0.1em 0.2em 0.1em 0.2em;
+ border-radius: 0.2em;
+ border: 1px solid transparent;
+ transition: 0.3s;
+}
+
+.asn1-button-with-icon>img {
+ height: 90%;
+}
+
+.asn1-button-with-icon:hover {
+ cursor: pointer;
+ transition: 0.3s;
+}
+
+.asn1-node-options-container {
+
+}
+
+.asn1-node-options {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ font-size: 0.8em;
+ width: max-content;
+ position: absolute;
+ left: 0;
+ bottom: 0.5em;
+
+ background: #dbcfbf;
+ color: #50437f;
+ padding: 0.3em;
+ border-radius: 0.3em;
+}

src/asn1.rs

@@ -1,5 +1,6 @@
 mod asn1_viewer;
 mod hex_view;
+mod node_options;
 mod scheme;
 
 use std::rc::Rc;

src/asn1/node_options.rs

@@ -0,0 +1,36 @@
+use yew::{function_component, html, use_state, Callback, Html, Properties};
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct NodeOptionsProps {
+ pub offset: usize,
+ pub length_len: usize,
+ pub data_len: usize,
+}
+
+#[function_component(NodeOptions)]
+pub fn node_options(props: &NodeOptionsProps) -> Html {
+ let show_options = use_state(|| false);
+
+ let flag = *show_options;
+ let show_options_setter = show_options.setter();
+
+ let onclick = Callback::from(move |_| {
+ show_options_setter.set(!flag);
+ });
+
+ html! {
+ <div class="asn1-node-options-container">
+ {if *show_options {html! {
+ <div style="position: relative">
+ <div class="asn1-node-options">
+ <span>{format!("Offset: {}", props.offset)}</span>
+ <span>{format!("Length: {}+{}", props.length_len, props.data_len)}</span>
+ </div>
+ </div>
+ }} else {html! {}}}
+ <button class="asn1-button-with-icon" {onclick}>
+ <img src="/public/img/icons/more_vertical.png" />
+ </button>
+ </div>
+ }
+}

src/asn1/scheme.rs

@@ -55,7 +55,7 @@ pub fn build_asn1_schema(asn1: &Asn1<'_>, cur_id: &Option<u64>, set_cur_node: &C
  match asn1.asn1() {
  Asn1Type::OctetString(octet) => html! {
  <Asn1Node id={octet.id()} {cur_id} set_cur_node={set_cur_node.clone()}>
- <OctetStringNode node={octet.to_owned()} />
+ <OctetStringNode node={octet.to_owned()} meta={asn1.raw_entity_data().to_owned()} />
  </Asn1Node>
  },
  Asn1Type::Utf8String(utf8) => html! {

src/asn1/scheme/sequence.rs

@@ -22,7 +22,7 @@ pub fn sequence(props: &SequenceNodeProps) -> Html {
  .collect::<Vec<_>>();
 
  html! {
- <div>
+ <div style="cursor: crosshair">
  <div class="asn1-constructor-header">
  <span>{"Sequence"}</span>
  <span class="asn1-node-info-label">{format!("({} fields)", fields.len())}</span>

src/asn1/scheme/strings.rs

@@ -1,6 +1,8 @@
-use asn1_parser::{OwnedBitString, OwnedBmpString, OwnedOctetString, OwnedUtf8String};
+use asn1_parser::{OwnedBitString, OwnedBmpString, OwnedOctetString, OwnedRawAsn1EntityData, OwnedUtf8String};
 use yew::{function_component, html, Html, Properties};
 
+use crate::asn1::node_options::NodeOptions;
+
 #[derive(PartialEq, Properties, Clone)]
 pub struct Utf8StringNodeProps {
  pub node: OwnedUtf8String,
@@ -19,15 +21,21 @@ pub fn utf8_string(props: &Utf8StringNodeProps) -> Html {
 #[derive(PartialEq, Properties, Clone)]
 pub struct OctetStringNodeProps {
  pub node: OwnedOctetString,
+ pub meta: OwnedRawAsn1EntityData,
 }
 
 #[function_component(OctetStringNode)]
 pub fn octet_string(props: &OctetStringNodeProps) -> Html {
  let octets = props.node.octets();
 
+ let offset = props.meta.tag_position();
+ let length_len = props.meta.length_range().len();
+ let data_len = props.meta.data_range().len();
+
  html! {
  <div class="terminal-asn1-node">
  <span>{"Octet String"}</span>
+ <NodeOptions {offset} {length_len} {data_len}/>
  <span class="asn1-node-info-label">{format!("({} bytes)", octets.len())}</span>
  <span class="asn-simple-value">{hex::encode(octets)}</span>
  </div>

src/asn1/scheme/tag.rs

@@ -14,7 +14,7 @@ pub struct ExplicitTagProps {
 #[function_component(ExplicitTagNode)]
 pub fn explicit_tag(props: &ExplicitTagProps) -> Html {
  html! {
- <div>
+ <div style="cursor: crosshair">
  <div class="asn1-constructor-header">
  <span>{format!("[{}]", props.node.tag_number())}</span>
  </div>
@@ -34,7 +34,7 @@ pub struct ApplicationTagProps {
 #[function_component(ApplicationTagNode)]
 pub fn application_tag(props: &ApplicationTagProps) -> Html {
  html! {
- <div>
+ <div style="cursor: crosshair">
  <div class="asn1-constructor-header">
  <span>{format!("Application {}", props.node.tag_number())}</span>
  </div>