Draft: Add Export Skin option in editor

docs/src/skins.md

@@ -0,0 +1,10 @@
+# Skins
+
+Skins allow customization of font sizes, colors, dimensions, paddings and
+spacings. Skins are created with a JSON that can contain any subset of the
+assemble and render options.
+
+A [template skin
+file](https://github.com/coastalwhite/wavedrom-rs/tree/main/skins/template.json5)
+can be found in the repository. Skins can also be previewed, edited and exported
+from the editor by opening the `Render Settings`.

skins/template.json5

@@ -0,0 +1,80 @@
+{
+  "assemble": {
+    "signal_height": 24,
+    "cycle_width": 48,
+    "transition_offset": 4
+  },
+  "render": {
+    "background": "#FFF",
+    "padding": {
+      "figure_top": 8,
+      "figure_bottom": 8,
+      "figure_left": 8,
+      "figure_right": 8,
+      "schema_top": 8,
+      "schema_bottom": 8
+    },
+    "spacing": {
+      "textbox_to_schema": 8,
+      "groupbox_to_textbox": 8,
+      "line_to_line": 8
+    },
+    "header": {
+      "font_size": 24,
+      "height": 32,
+      "color": "#000",
+      "cycle_marker_height": 12,
+      "cycle_marker_fontsize": 12,
+      "cycle_marker_color": "#000"
+    },
+    "footer": {
+      "font_size": 24,
+      "height": 32,
+      "color": "#000",
+      "cycle_marker_height": 12,
+      "cycle_marker_fontsize": 12,
+      "cycle_marker_color": "#000"
+    },
+    "signal": {
+      "marker_font_size": 14,
+      "marker_color": "#000",
+      "name_font_size": 14,
+      "name_color": "#000",
+      "gap_color": "#000",
+      "gap_background_color": "#FFF",
+      "path_color": "#000",
+      "hint_line_color": "#CCC",
+      "undefined_color": "#000",
+      "undefined_background": null,
+      "backgrounds": [
+        { "red": 255, "green": 255, "blue": 255 },
+        { "red": 247, "green": 247, "blue": 161 },
+        { "red": 249, "green": 212, "blue": 159 },
+        { "red": 173, "green": 222, "blue": 255 },
+        { "red": 172, "green": 213, "blue": 182 },
+        { "red": 164, "green": 171, "blue": 225 },
+        { "red": 232, "green": 168, "blue": 240 },
+        { "red": 251, "green": 218, "blue": 218 }
+      ]
+    },
+    "group_indicator": {
+      "width": 4,
+      "spacing": 4,
+      "color": "#000",
+      "label_spacing": 4,
+      "label_fontsize": 14,
+      "label_color": "#000"
+    },
+    "edge": {
+      "node_font_size": 14,
+      "node_text_color": "#000",
+      "node_background_color": "#FFF",
+      "edge_text_font_size": 14,
+      "edge_text_color": "#000",
+      "edge_text_background_color": "#FFF",
+      "edge_color": "#00F",
+      "edge_arrow_color": "#000",
+      "edge_arrow_size": 8
+    }
+  }
+}

wavedrom-core/src/svg/options.rs

@@ -82,6 +82,17 @@ macro_rules! define_options {
             }
         }
 
+        #[cfg(feature = "skins")]
+        impl From<$struct_name> for $opt_struct_name {
+            fn from(value: $struct_name) -> Self {
+                Self {
+                $(
+                    $property_name: Some(value.$property_name.into()),
+                )+
+                }
+            }
+        }
+
         #[cfg(feature = "skins")]
         impl $struct_name {
             /// Merge a partial configuration into a full configuration

wavedrom-wasm/README.md

@@ -6,8 +6,9 @@ A editor website for wavedrom-rs.
 
 The build uses the [standalone Tailwind CSS
 binary](https://github.com/tailwindlabs/tailwindcss/releases/latest), [Minify
-HTML](https://github.com/wilsonzlin/minify-html) and [Minify
-JS](https://github.com/wilsonzlin/minify-js).
+HTML](https://github.com/wilsonzlin/minify-html), [Minify
+JS](https://github.com/wilsonzlin/minify-js) and the [WebAssembly Binary
+Toolkit](https://github.com/WebAssembly/wabt).
 
 ```bash
 cd wavedrom-wasm
@@ -18,6 +19,7 @@ cp ../target/wasm32-unknown-unknown/release/wavedrom_wasm.wasm wavedrom.wasm
 tailwindcss -i index.scss -o index.css
 
 # For Production
+wasm-strip wavedrom.wasm
 tailwindcss -i index.scss -o index.css --minify
 minify-html index.html -o index.html
 minify-js index.js -o index.js

wavedrom-wasm/index.html

@@ -47,6 +47,9 @@
                         <button class="hover:bg-gray-400 bg-gray-200 px-2 py-1 rounded text-black text-lg font-bold" type="button" id="reset-button">
                             Reset
                         </button>
+                        <button class="hover:bg-gray-400 bg-gray-200 px-2 py-1 rounded text-black text-lg font-bold" type="button" id="export-button">
+                            Export Skin
+                        </button>
                     </div>
                     <div class="max-w-full my-12">
                         <h2 class="text-lg font-bold">Upload Skin</h2>

wavedrom-wasm/index.js

@@ -249,6 +249,7 @@ fetch("./wavedrom.wasm")
             get_parameter,
             merge_in_skin,
 			reset_parameters,
+            export_parameters,
         } = mod.exports;
 
         const input = document.getElementById("input");
@@ -350,6 +351,33 @@ fetch("./wavedrom.wasm")
 				rerender();
 		});
 
+        document
+            .getElementById("export-button")
+            .addEventListener("click", () => {
+                const rptr = export_parameters();
+                const array = new Uint8Array(memory.buffer, rptr, 5);
+                const return_code = array[0];
+
+                if (return_code != 0) {
+                    makeInvisible("success-icon");
+                    makeVisible("failure-icon");
+
+                    error.innerHTML = "Failed to get skin";
+
+                    free(rptr, 1);
+                }
+
+                const size = (array[1] << 24) | (array[2] << 16) | (array[3] << 8) | array[4];
+                const json = decode_string(memory, rptr + 5, size);
+                const bb = new Blob([json], { type: "application/json" });
+                const a = document.createElement("a");
+                a.download = "skin.json";
+                a.href = window.URL.createObjectURL(bb);
+                a.click();
+
+                free(rptr, size + 5);
+            });
+
         document
             .getElementById("skin-file-button")
             .addEventListener("click", (_) => {

wavedrom-wasm/src/lib.rs

@@ -82,3 +82,22 @@ pub extern "C" fn merge_in_skin(ptr: *mut u8, size: usize) -> u8 {
 pub extern "C" fn reset_parameters() {
     render_options::reset()
 }
+
+#[no_mangle]
+pub extern "C" fn export_parameters() -> *const u8 {
+    match render_options::export() {
+        Ok(v) => {
+            let mut out = Vec::with_capacity(v.len() + 5);
+            out.push(0);
+            let bs = v.len().to_be_bytes();
+
+            for i in 0..4 {
+                out.push(bs[i]);
+            }
+
+            out.extend(v.into_bytes());
+            out.leak().as_ptr()
+        },
+        Err(_) => Box::leak(Box::new(1u8)) as *const u8,
+    }
+}

wavedrom-wasm/src/render_options.rs

@@ -249,3 +249,15 @@ pub fn reset() {
         .lock()
         .unwrap() = RenderOptions::default();
 }
+
+#[inline]
+pub fn export() -> wavedrom::json5::Result<String> {
+    let assemble = get_assemble_options().clone();
+    let render = get_render_options().clone();
+
+    let skin = Skin {
+        assemble: Some(assemble), render: Some(render.into()),
+    };
+
+    wavedrom::json5::to_string(&skin)
+}