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>