Merge pull request #7 from azriel91/feature/support-additional-css

Author: azriel91

CHANGELOG.md

@@ -1,8 +1,10 @@
 # Changelog
 
-## 0.1.1 (2024-02-17)
+## unreleased
 
 * Split `dot_ix` library and `dot_ix_playground` binary.
+* Add `InfoGraph::builder` and `InfoGraphBuilder`.
+* Add `NodeId::new`.
 
 
 ## 0.1.0 (2024-02-04)

Cargo.toml

@@ -34,7 +34,7 @@ members = [
 ]
 
 [workspace.package]
-version = "0.1.1"
+version = "0.2.0"
 authors = ["Azriel Hoh <[email protected]>"]
 edition = "2021"
 homepage = "https://github.com/azriel91/dot_ix"
@@ -46,10 +46,10 @@ license = "MIT OR Apache-2.0"
 
 [workspace.dependencies]
 # dot_ix crates
-dot_ix_model = { version = "0.1.1", path = "crate/model" }
-dot_ix_rt = { version = "0.1.1", path = "crate/rt" }
-dot_ix_static_check_macros = { version = "0.1.1", path = "crate/static_check_macros" }
-dot_ix_web_components = { version = "0.1.1", path = "crate/web_components" }
+dot_ix_model = { version = "0.2.0", path = "crate/model" }
+dot_ix_rt = { version = "0.2.0", path = "crate/rt" }
+dot_ix_static_check_macros = { version = "0.2.0", path = "crate/static_check_macros" }
+dot_ix_web_components = { version = "0.2.0", path = "crate/web_components" }
 
 # external crates
 axum = "0.7.4"
@@ -66,7 +66,7 @@ leptos_meta = { version = "0.6" }
 leptos_router = { version = "0.6" }
 log = "0.4"
 log4rs = { version = "1.3.0", default-features = false }
-serde = "1.0.196"
+serde = "1.0.197"
 tempfile = "3.10.0"
 tokio = "1.36.0"
 tower = "0.4.13"
@@ -77,5 +77,5 @@ tracing = "0.1.40"
 http = "1.0.0"
 proc-macro2 = "1.0.78"
 quote = "1.0.35"
-syn = "2.0.49"
-serde_yaml = "0.9.31"
+syn = "2.0.50"
+serde_yaml = "0.9.32"

crate/model/src/common.rs

@@ -12,11 +12,12 @@ pub use self::{
     tailwind_key::TailwindKey,
 };
 
+pub mod graphviz_dot_theme;
+
 mod any_id;
 mod dot_src_and_styles;
 mod edge;
 mod edge_id;
-mod graphviz_dot_theme;
 mod id_newtype;
 mod node_hierarchy;
 mod node_id;

crate/model/src/common/graphviz_dot_theme.rs

@@ -1,5 +1,13 @@
+pub use graph_style::GraphStyle;
+
+mod graph_style;
+
 #[derive(Clone, Debug, PartialEq)]
 pub struct GraphvizDotTheme {
+    /// Style of graph to render.
+    pub graph_style: GraphStyle,
+
+    /// The colour to use for graph edges.
     pub edge_color: &'static str,
 
     // Node attributes:
@@ -44,6 +52,86 @@ pub struct GraphvizDotTheme {
 }
 
 impl GraphvizDotTheme {
+    pub fn with_graph_style(mut self, graph_style: GraphStyle) -> Self {
+        self.graph_style = graph_style;
+        self
+    }
+
+    pub fn with_edge_color(mut self, edge_color: &'static str) -> Self {
+        self.edge_color = edge_color;
+        self
+    }
+
+    pub fn with_node_text_color(mut self, node_text_color: &'static str) -> Self {
+        self.node_text_color = node_text_color;
+        self
+    }
+
+    pub fn with_node_width(mut self, node_width: f64) -> Self {
+        self.node_width = node_width;
+        self
+    }
+
+    pub fn with_node_height(mut self, node_height: f64) -> Self {
+        self.node_height = node_height;
+        self
+    }
+
+    pub fn with_node_margin_x(mut self, node_margin_x: f64) -> Self {
+        self.node_margin_x = node_margin_x;
+        self
+    }
+
+    pub fn with_node_margin_y(mut self, node_margin_y: f64) -> Self {
+        self.node_margin_y = node_margin_y;
+        self
+    }
+
+    pub fn with_plain_text_color(mut self, plain_text_color: &'static str) -> Self {
+        self.plain_text_color = plain_text_color;
+        self
+    }
+
+    pub fn with_emoji_point_size(mut self, emoji_point_size: u32) -> Self {
+        self.emoji_point_size = emoji_point_size;
+        self
+    }
+
+    pub fn with_node_point_size(mut self, node_point_size: u32) -> Self {
+        self.node_point_size = node_point_size;
+        self
+    }
+
+    pub fn with_tag_width(mut self, tag_width: f64) -> Self {
+        self.tag_width = tag_width;
+        self
+    }
+
+    pub fn with_tag_height(mut self, tag_height: f64) -> Self {
+        self.tag_height = tag_height;
+        self
+    }
+
+    pub fn with_tag_margin_x(mut self, tag_margin_x: f64) -> Self {
+        self.tag_margin_x = tag_margin_x;
+        self
+    }
+
+    pub fn with_tag_margin_y(mut self, tag_margin_y: f64) -> Self {
+        self.tag_margin_y = tag_margin_y;
+        self
+    }
+
+    pub fn with_tag_point_size(mut self, tag_point_size: u32) -> Self {
+        self.tag_point_size = tag_point_size;
+        self
+    }
+
+    pub fn with_tag_classes(mut self, tag_classes: &'static str) -> Self {
+        self.tag_classes = tag_classes;
+        self
+    }
+
     pub fn edge_color(&self) -> &str {
         self.edge_color
     }
@@ -108,6 +196,7 @@ impl GraphvizDotTheme {
 impl Default for GraphvizDotTheme {
     fn default() -> Self {
         Self {
+            graph_style: GraphStyle::default(),
             edge_color: "#333333",
             node_text_color: "#111111",
             node_width: 0.3,

crate/model/src/common/graphviz_dot_theme/graph_style.rs

@@ -0,0 +1,11 @@
+use serde::{Deserialize, Serialize};
+
+/// The style of graph to render.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub enum GraphStyle {
+    /// A rectangle is rendered for each node, with labels within them.
+    #[default]
+    Boxes,
+    /// A circle is rendered for each node, with labels next to them.
+    Circle,
+}

crate/model/src/common/tailwind_classes.rs

@@ -47,6 +47,17 @@ impl TailwindClasses {
                 [&>path]:focus:outline-lime-600 \
                 [&>path]:focus:outline-dashed \
                 [&>path]:focus:rounded-xl \
+                [&>ellipse]:fill-slate-300 \
+                [&>ellipse]:stroke-1 \
+                [&>ellipse]:stroke-slate-600 \
+                [&>ellipse]:hover:fill-slate-200 \
+                [&>ellipse]:hover:stroke-slate-600 \
+                [&>ellipse]:hover:stroke-2 \
+                [&>ellipse]:focus:fill-lime-200 \
+                [&>ellipse]:focus:outline-1 \
+                [&>ellipse]:focus:outline-lime-600 \
+                [&>ellipse]:focus:outline-dashed \
+                [&>ellipse]:focus:rounded-xl \
                 cursor-pointer \
             "
                 .trim()

crate/model/src/info_graph.rs

@@ -1,59 +1,82 @@
-use indexmap::{IndexMap, IndexSet};
+pub use indexmap::{IndexMap, IndexSet};
+
 use serde::{Deserialize, Serialize};
 
 use crate::common::{EdgeId, NodeHierarchy, NodeId, TagId, TailwindClasses};
 
-pub use self::{graph_dir::GraphDir, node_info::NodeInfo, tag::Tag};
+pub use self::{
+    graph_dir::GraphDir, info_graph_builder::InfoGraphBuilder, node_info::NodeInfo, tag::Tag,
+};
 
 mod graph_dir;
+mod info_graph_builder;
 mod node_info;
 mod tag;
 
 #[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
 #[serde(default)]
 pub struct InfoGraph {
     /// Direction of the graph, `vertical` or `horizontal`.
-    direction: GraphDir,
+    pub(crate) direction: GraphDir,
     /// Nested nodes.
-    hierarchy: NodeHierarchy,
+    pub(crate) hierarchy: NodeHierarchy,
     /// Logical / ordering dependencies.
-    edges: IndexMap<EdgeId, [NodeId; 2]>,
+    pub(crate) edges: IndexMap<EdgeId, [NodeId; 2]>,
     /// List of nodes and basic node info.
-    node_infos: IndexMap<NodeId, NodeInfo>,
+    pub(crate) node_infos: IndexMap<NodeId, NodeInfo>,
     /// Tags associated with each node.
-    node_tags: IndexMap<NodeId, IndexSet<TagId>>,
+    pub(crate) node_tags: IndexMap<NodeId, IndexSet<TagId>>,
     /// Tags to associate with nodes.
-    tags: IndexMap<TagId, Tag>,
+    pub(crate) tags: IndexMap<TagId, Tag>,
     /// Tailwind classes to add to nodes with the given tag.
-    tailwind_classes: TailwindClasses,
+    pub(crate) tailwind_classes: TailwindClasses,
+    /// Additional CSS to add in the spreadsheet.
+    pub(crate) css: String,
 }
 
 impl InfoGraph {
+    /// Returns a builder to instantiate an `InfoGraph`.
+    pub fn builder() -> InfoGraphBuilder {
+        InfoGraphBuilder::default()
+    }
+
+    /// Returns the direction of the graph, `vertical` or `horizontal`.
     pub fn direction(&self) -> GraphDir {
         self.direction
     }
 
+    /// Returns the nested nodes.
     pub fn hierarchy(&self) -> &NodeHierarchy {
         &self.hierarchy
     }
 
+    /// Returns the logical / ordering dependencies.
     pub fn edges(&self) -> &IndexMap<EdgeId, [NodeId; 2]> {
         &self.edges
     }
 
+    /// Returns the list of nodes and basic node info.
     pub fn node_infos(&self) -> &IndexMap<NodeId, NodeInfo> {
         &self.node_infos
     }
 
+    /// Returns the tags associated with each node.
     pub fn node_tags(&self) -> &IndexMap<NodeId, IndexSet<TagId>> {
         &self.node_tags
     }
 
+    /// Returns the tags to associate with nodes.
     pub fn tags(&self) -> &IndexMap<TagId, Tag> {
         &self.tags
     }
 
+    /// Returns the tailwind classes to add to nodes with the given tag.
     pub fn tailwind_classes(&self) -> &TailwindClasses {
         &self.tailwind_classes
     }
+
+    /// Returns the additional CSS to add in the spreadsheet.
+    pub fn css(&self) -> &str {
+        &self.css
+    }
 }