Merge pull request #24 from azriel91/feature/styling-improvements

azriel91 · Jul 19, 2024 · 50365c2 · 50365c2
2 parents 907d3f8 + 0808bfc
commit 50365c2
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,14 @@
 
 * Add `TextEditor` in playground which uses [monaco][monaco] / [rust-monaco][rust-monaco].
 * Add `GraphvizAttrs.pack_mode` to specify the `packmode` for subgraphs.
+* Fix leading space not rendered in web SVG view.
+* Add `ThemeAttr::Cursor` for better support for [cursor styling].
+* Support `dasharray:5,2,3,2..` in `stroke_style` in SVG.
+* Support stroke style for ellipse elements in SVG.
 
 [monaco]: https://github.com/microsoft/monaco-editor
 [rust-monaco]: https://github.com/siku2/rust-monaco
+[cursor styling]: https://tailwindcss.com/docs/cursor
 
 
 ## 0.7.0 (2024-06-30)

diff --git a/crate/model/src/theme.rs b/crate/model/src/theme.rs
@@ -88,6 +88,8 @@ impl Theme {
 
         theme.insert(AnyIdOrDefaults::NodeDefaults, {
             let mut node_defaults = CssClassPartials::new();
+            node_defaults.insert(ThemeAttr::Cursor, "pointer".into());
+
             node_defaults.insert(ThemeAttr::Padding, "1.5".into());
             node_defaults.insert(ThemeAttr::ShapeColor, "slate".into());
 
@@ -115,6 +117,8 @@ impl Theme {
 
         theme.insert(AnyIdOrDefaults::EdgeDefaults, {
             let mut edge_defaults = CssClassPartials::new();
+            edge_defaults.insert(ThemeAttr::Cursor, "pointer".into());
+
             edge_defaults.insert(ThemeAttr::ShapeColor, "slate".into());
 
             edge_defaults.insert(ThemeAttr::FillShadeNormal, "800".into());
@@ -312,10 +316,8 @@ impl Theme {
                 .map(|spacing| css_classes_builder.append(&format!("{spacing_prefix}-{spacing}")));
         });
 
-        specified
-            .and_then(|partials| partials.get(&ThemeAttr::Extra))
-            .or_else(|| defaults.and_then(|partials| partials.get(&ThemeAttr::Extra)))
-            .map(|extra| css_classes_builder.append(extra));
+        Self::cursor_classes(specified, defaults, &mut css_classes_builder);
+        Self::extra_classes(specified, defaults, &mut css_classes_builder);
 
         Some(css_classes_builder.build())
     }
@@ -406,10 +408,8 @@ impl Theme {
             &mut css_classes_builder,
         );
 
-        specified
-            .and_then(|partials| partials.get(&ThemeAttr::Extra))
-            .or_else(|| defaults.and_then(|partials| partials.get(&ThemeAttr::Extra)))
-            .map(|extra| css_classes_builder.append(extra));
+        Self::cursor_classes(specified, defaults, &mut css_classes_builder);
+        Self::extra_classes(specified, defaults, &mut css_classes_builder);
 
         Some(css_classes_builder.build())
     }
@@ -663,6 +663,28 @@ impl Theme {
             }
         });
     }
+
+    fn cursor_classes(
+        specified: Option<&CssClassPartials>,
+        defaults: Option<&CssClassPartials>,
+        css_classes_builder: &mut CssClassesBuilder,
+    ) {
+        specified
+            .and_then(|partials| partials.get(&ThemeAttr::Cursor))
+            .or_else(|| defaults.and_then(|partials| partials.get(&ThemeAttr::Cursor)))
+            .map(|cursor| css_classes_builder.append(&format!("cursor-{cursor}")));
+    }
+
+    fn extra_classes(
+        specified: Option<&CssClassPartials>,
+        defaults: Option<&CssClassPartials>,
+        css_classes_builder: &mut CssClassesBuilder,
+    ) {
+        specified
+            .and_then(|partials| partials.get(&ThemeAttr::Extra))
+            .or_else(|| defaults.and_then(|partials| partials.get(&ThemeAttr::Extra)))
+            .map(|extra| css_classes_builder.append(extra));
+    }
 }
 
 /// Finds an attributes with multiple levels of fallbacks.

diff --git a/crate/model/src/theme/theme_attr.rs b/crate/model/src/theme/theme_attr.rs
@@ -308,6 +308,10 @@ use serde::{Deserialize, Serialize};
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Hash, Deserialize, Serialize)]
 #[serde(rename_all = "snake_case")]
 pub enum ThemeAttr {
+    /// The [cursor style], e.g. `"pointer"`.
+    ///
+    /// [cursor style]: https://tailwindcss.com/docs/cursor
+    Cursor,
     /// Extra classes to attach as is.
     Extra,
     /// Colour for element background/arrow head for all states, e.g. `"slate"`.

diff --git a/crate/rt/src/info_graph_dot.rs b/crate/rt/src/info_graph_dot.rs
@@ -155,17 +155,46 @@ fn border_style_classes(
     match stroke_style {
         "none" => {}
         "solid" => {
-            builder.append(&format!("[&>path]:{highlight_prefix}stroke-{stroke_width}"));
+            builder
+                .append(&format!("[&>path]:{highlight_prefix}stroke-{stroke_width}"))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}stroke-{stroke_width}"
+                ));
         }
         "dashed" => {
             builder
                 .append(&format!("[&>path]:{highlight_prefix}stroke-{stroke_width}"))
-                .append(&format!("[&>path]:{highlight_prefix}[stroke-dasharray:3]"));
+                .append(&format!("[&>path]:{highlight_prefix}[stroke-dasharray:3]"))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}stroke-{stroke_width}"
+                ))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}[stroke-dasharray:3]"
+                ));
         }
         "dotted" => {
             builder
                 .append(&format!("[&>path]:{highlight_prefix}stroke-{stroke_width}"))
-                .append(&format!("[&>path]:{highlight_prefix}[stroke-dasharray:2]"));
+                .append(&format!("[&>path]:{highlight_prefix}[stroke-dasharray:2]"))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}stroke-{stroke_width}"
+                ))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}[stroke-dasharray:2]"
+                ));
+        }
+        stroke_style if stroke_style.starts_with("dasharray:") => {
+            builder
+                .append(&format!("[&>path]:{highlight_prefix}stroke-{stroke_width}"))
+                .append(&format!(
+                    "[&>path]:{highlight_prefix}[stroke-{stroke_style}]"
+                ))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}stroke-{stroke_width}"
+                ))
+                .append(&format!(
+                    "[&>ellipse]:{highlight_prefix}[stroke-{stroke_style}]"
+                ));
         }
         _ => {}
     };

diff --git a/crate/rt/src/into_graphviz_dot_src/info_graph.rs b/crate/rt/src/into_graphviz_dot_src/info_graph.rs
@@ -315,7 +315,7 @@ fn node_cluster_internal(
     let node_desc = node_descs.get(node_id).map(String::as_str);
     let node_emoji = node_emojis.get(node_id).map(String::as_str);
     // TODO: escape
-    let node_label = node_name.unwrap_or(node_id);
+    let node_label = node_name.unwrap_or(node_id).replace(' ', "&nbsp;");
     // TODO: escape
     let node_desc = node_desc
         .map(|desc| desc.replace('\n', "<br />"))

diff --git a/crate/web_components/src/dot_svg.rs b/crate/web_components/src/dot_svg.rs
@@ -94,6 +94,7 @@ fn dot_svg_sanitize(dot_svg: &str, styles: &str) -> String {
         .replace("fill=\"#000000\"", "")
         .replace("stroke=\"#000000\"", "")
         .replace("stroke=\"black\"", "")
+        .replace("&nbsp;", "&#160;")
 }
 
 #[cfg(feature = "ssr")]

diff --git a/crate/web_components/src/dot_svg/svg_write_to_clipboard.js b/crate/web_components/src/dot_svg/svg_write_to_clipboard.js
diff --git a/playground/src/app/info_graph_example.yaml b/playground/src/app/info_graph_example.yaml
@@ -61,23 +61,20 @@ edges:
   iam_role__instance_profile: [iam_role, instance_profile]
   app_download__s3_object: [app_download, s3_object]
   iam_policy__s3_object: [iam_policy, s3_object]
-  github_app_zip__app_download_1: [github_app_zip, app_download]
-  github_app_zip__app_download_2: [github_app_zip, app_download]
-
-edge_descs:
-  github_app_zip__app_download_1: ' '
+  github_app_zip__app_download_request: [github_app_zip:sw, app_download:nw]
+  github_app_zip__app_download_response: [github_app_zip:se, app_download:ne]
 
 graphviz_attrs:
   edge_constraints:
-    github_app_zip__app_download_1: false
-    github_app_zip__app_download_2: true
+    github_app_zip__app_download_request: true
+    github_app_zip__app_download_response: true
     app_download__s3_object: true
   edge_minlen_default: 1
   edge_minlens:
-    github_app_zip__app_download_1: 1
-    github_app_zip__app_download_2: 2
+    github_app_zip__app_download_request: 1
+    github_app_zip__app_download_response: 1
   edge_dirs: # forward, back, both, none
-    github_app_zip__app_download_1: back
+    github_app_zip__app_download_request: back
 
   # "node", "cluster", "graph", "array(_flags)?(n)?"
   #
@@ -96,36 +93,47 @@ theme:
   styles:
     node_defaults:
       stroke_width: '1'
-      extra: 'cursor-pointer rounded-lg'
+      extra: 'rounded-lg'
     edge_defaults:
       extra: hidden
     github_app_zip__app_extract:
-      extra: 'cursor-pointer'
+      cursor: 'progress' # https://tailwindcss.com/docs/cursor
+      extra: ''
     blue_animated: &blue_animated
       shape_color: blue
       stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
       stroke_width: '[2px]'
       stroke_shade_normal: '600'
       fill_shade_normal: '500'
       extra: >-
-        [&>path]:animate-[stroke-dashoffset-move_4s_linear_infinite]
-        cursor-pointer
+        [&>path]:animate-[stroke-dashoffset-move_15s_linear_infinite]
     app_download__s3_object:
       <<: *blue_animated
-    github_app_zip__app_download_1:
+    github_app_zip__app_download_request:
       <<: *blue_animated
       shape_color: violet
+      stroke_style: "dasharray:12,2,4,2,2,2,1,2,1,200"
+      stroke_width: '[1px]'
       extra: >-
-        [&>path]:animate-[stroke-dashoffset-move-reverse_5s_linear_infinite]
-        cursor-pointer
-    github_app_zip__app_download_2:
+        [&>path]:animate-[stroke-dashoffset-move-reverse_2s_linear_infinite]
+    github_app_zip__app_download_response:
       <<: *blue_animated
       shape_color: purple
-      stroke_width: '[1px]'
+      stroke_style: "dasharray:1,2,1,2,2,2,4,2,8,2,20,200"
+      stroke_width: '[2px]'
       extra: >-
-        [&>path]:animate-[stroke-dashoffset-move_6s_linear_infinite]
-        [&>path]:[stroke-dasharray:2]
-        cursor-pointer
+        [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite]
+    github_app_zip:
+      shape_color: green
+    app_download:
+      shape_color: green
+    s3_object:
+      shape_color: blue
+      stroke_style: "dasharray:0.5,3,0.5,3,2,3,4,18"
+      stroke_width: '[2px]'
+      extra: |-
+        [&>ellipse]:[stroke-linecap:round]
+        [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite]
     light: &light
       fill_shade_normal: '100'
       fill_shade_hover: '50'
@@ -159,11 +167,15 @@ theme:
       shape_color: amber
 
 css: >-
-  @keyframes stroke-dashoffset-move {
-    0%   { stroke-dashoffset: 48; }
+  @keyframes ellipse-spin {
+    0%   { stroke-dashoffset: 34; }
     100% { stroke-dashoffset: 0; }
   }
+  @keyframes stroke-dashoffset-move {
+    0%   { stroke-dashoffset: 298; }
+    100% { stroke-dashoffset: 50; }
+  }
   @keyframes stroke-dashoffset-move-reverse {
     0%   { stroke-dashoffset: 0; }
-    100% { stroke-dashoffset: 48; }
+    100% { stroke-dashoffset: 228; }
   }