Flamegraph prototype + text improvements

Cargo.toml

@@ -10,12 +10,13 @@ members = [
     "zaplib/examples/example_bigedit/microserde",
     "zaplib/examples/example_bigedit/microserde/derive",
     "zaplib/examples/example_charts",
+    "zaplib/examples/example_flamegraph",
     "zaplib/examples/example_image",
+    "zaplib/examples/example_lightning",
     "zaplib/examples/example_lots_of_buttons",
     "zaplib/examples/example_shader",
     "zaplib/examples/example_single_button",
     "zaplib/examples/example_text",
-    "zaplib/examples/example_lightning",
     "zaplib/examples/test_bottom_bar",
     "zaplib/examples/test_geometry",
     "zaplib/examples/test_layout",
@@ -24,15 +25,15 @@ members = [
     "zaplib/examples/test_padding",
     "zaplib/examples/test_popover",
     "zaplib/examples/test_shader_2d_primitives",
-    "zaplib/examples/tutorial_hello_world_console",
-    "zaplib/examples/tutorial_hello_thread",
-    "zaplib/examples/tutorial_hello_world_canvas",
     "zaplib/examples/tutorial_2d_rendering/step1",
     "zaplib/examples/tutorial_2d_rendering/step2",
     "zaplib/examples/tutorial_2d_rendering/step3",
-    "zaplib/examples/tutorial_js_rust_bridge",
     "zaplib/examples/tutorial_3d_rendering/step2",
     "zaplib/examples/tutorial_3d_rendering/step3",
+    "zaplib/examples/tutorial_hello_thread",
+    "zaplib/examples/tutorial_hello_world_canvas",
+    "zaplib/examples/tutorial_hello_world_console",
+    "zaplib/examples/tutorial_js_rust_bridge",
     "zaplib/examples/tutorial_ui_components",
     "zaplib/examples/tutorial_ui_layout",
     "zaplib/web/test_suite",

zaplib.code-workspace

@@ -73,6 +73,24 @@
 				"args": [],
 				"cwd": "."
 			},
+			{
+				"type": "lldb",
+				"request": "launch",
+				"name": "Debug executable 'example_flamegraph'",
+				"cargo": {
+					"args": [
+						"build",
+						"--bin=example_flamegraph",
+						"--package=example_flamegraph"
+					],
+					"filter": {
+						"name": "example_flamegraph",
+						"kind": "bin"
+					}
+				},
+				"args": [],
+				"cwd": "."
+			},
 			{
 				"type": "lldb",
 				"request": "launch",
@@ -523,6 +541,25 @@
 				"args": [],
 				"cwd": "."
 			},
+			{
+				"type": "lldb",
+				"request": "launch",
+				"name": "Debug unit tests in library 'zaplib'",
+				"cargo": {
+					"args": [
+						"test",
+						"--no-run",
+						"--lib",
+						"--package=zaplib"
+					],
+					"filter": {
+						"name": "zaplib",
+						"kind": "lib"
+					}
+				},
+				"args": [],
+				"cwd": "."
+			},
 		]
 	},
 }

zaplib/ci/src/cmd.rs

@@ -269,6 +269,7 @@ async fn screenshots(browser_name: &str, driver: &mut WebDriver, local_port: u16
         // ("example_charts", "/zaplib/examples/example_charts/?release"), // TODO(JP): Randomness.
         // "example_lightning", // TODO(JP): Pause animation.
         ("example_image", "/zaplib/examples/example_image/?release"),
+        ("example_flamegraph", "/zaplib/examples/example_flamegraph/?release"),
         ("example_lots_of_buttons", "/zaplib/examples/example_lots_of_buttons/?release"),
         ("example_single_button", "/zaplib/examples/example_single_button/?release"),
         ("example_text", "/zaplib/examples/example_text/?release"),

zaplib/components/src/checkbox.rs

@@ -201,7 +201,7 @@ impl Checkbox {
 
             cx.add_box(LayoutSize::new(Width::Fix(20.), Height::Fix(0.)));
             let draw_str_props = TextInsProps {
-                wrapping: Wrapping::Ellipsis(cx.get_width_left() - 20.),
+                wrapping: Wrapping::Ellipsis(cx.get_width_left()),
                 color: if errored {
                     vec4(0.94, 0., 0., opacity)
                 } else if checked {

zaplib/components/src/foldcaption.rs

@@ -215,8 +215,7 @@ impl FoldCaption {
                 cx.request_draw();
             }
             cx.begin_right_box();
-            let draw_str_props =
-                TextInsProps { wrapping: Wrapping::Ellipsis(cx.get_width_left() - 10.), ..TextInsProps::DEFAULT };
+            let draw_str_props = TextInsProps { wrapping: Wrapping::Ellipsis(cx.get_width_left()), ..TextInsProps::DEFAULT };
             TextIns::draw_walk(cx, label, &draw_str_props);
             cx.end_right_box();
         }

zaplib/components/src/texteditor.rs

@@ -1305,7 +1305,7 @@ impl TextEditor {
                 scale /= 10;
             }
             let draw_str_props = TextInsProps {
-                wrapping: Wrapping::Line,
+                wrapping: Wrapping::None,
                 text_style: TEXT_STYLE_MONO,
                 font_scale: self.current_font_scale,
                 draw_depth: 1.5,
@@ -1329,7 +1329,7 @@ impl TextEditor {
                     origin.y + line_geom.walk.y,
                 ),
                 0,
-                &line_number_text.chars().collect::<Vec<char>>(),
+                line_number_text.chars(),
                 |_, _, _, _| 0.0,
             ));
         }

zaplib/docs/src/SUMMARY.md

@@ -53,4 +53,4 @@
 - [Contributing](./contributing.md)
 
 # Blog
-- [Language idea: Typescript++](./blog_ts++.md)
+- [Typescript as fast as Rust: Typescript++](./blog_ts++.md)

zaplib/docs/src/blog_ts++.md

@@ -1,4 +1,4 @@
-# Language idea: Typescript++
+# Typescript as fast as Rust: Typescript++
 
 _JP Posma, April 2022_
 

zaplib/docs/src/demos.md

@@ -4,6 +4,9 @@ Besides the lightning bolt demo in the [introduction](./introduction.md), we hav
 
 <!-- TODO(JP): add some missing examples that have text editing, after fixing that when having multiple iframes with Zaplib on the same page -->
 
+[example_flamegraph](https://github.com/Zaplib/zaplib/blob/main/zaplib/examples/example_flamegraph/src/main.rs)
+<div style="height: 600px"><iframe src="/example_flamegraph.html?release" style="position: absolute; left: 0; width: 100%; height: 600px; border: none;"></iframe></div>
+
 [example_charts](https://github.com/Zaplib/zaplib/blob/main/zaplib/examples/example_charts/src/main.rs)
 <div style="height: 600px"><iframe src="/example_charts.html?release" style="position: absolute; left: 0; width: 100%; height: 600px; border: none;"></iframe></div>
 

zaplib/examples/example_bigedit/src/filetree.rs

@@ -410,8 +410,7 @@ impl FileTree {
                     cx.begin_row(self.node_layout_size.width, self.node_layout_size.height);
                     cx.begin_center_y_align();
                     tree_text_props.color = self.color_tree_folder;
-                    let wleft = cx.get_width_left() - 10.;
-                    tree_text_props.wrapping = Wrapping::Ellipsis(wleft);
+                    tree_text_props.wrapping = Wrapping::Ellipsis(cx.get_width_left());
                     TextIns::draw_walk(cx, name, &tree_text_props);
                     cx.end_center_y_align();
                     cx.end_row();
@@ -443,8 +442,7 @@ impl FileTree {
                 FileNode::File { name, .. } => {
                     cx.begin_row(self.node_layout_size.width, self.node_layout_size.height);
                     cx.begin_center_y_align();
-                    let wleft = cx.get_width_left() - 10.;
-                    tree_text_props.wrapping = Wrapping::Ellipsis(wleft);
+                    tree_text_props.wrapping = Wrapping::Ellipsis(cx.get_width_left());
                     tree_text_props.color = if is_marked { self.color_tree_folder } else { self.color_tree_file };
                     TextIns::draw_walk(cx, name, &tree_text_props);
                     cx.end_center_y_align();

zaplib/examples/example_flamegraph/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "example_flamegraph"
+version = "0.0.1"
+edition = "2021"
+publish = false
+
+[dependencies]
+zaplib = { path="../../main" }
+zaplib_components = { path="../../components" }

zaplib/examples/example_flamegraph/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2021-present, Cruise LLC
+
+This source code is licensed under the Apache License, Version 2.0,
+found in the LICENSE-APACHE file in the root directory of this source tree.
+You may not use this file except in compliance with the License.
+-->
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <title>Example</title>
+    <script type="text/javascript" src="/zaplib/web/dist/zaplib_runtime.development.js"></script>
+    <script type="text/javascript">
+        const env = new URL(window.document.location).searchParams.has("release") ? "release" : "debug";
+        zaplib.initialize({ wasmModule: `target/wasm32-unknown-unknown/${env}/example_flamegraph.wasm`, defaultStyles: true });
+    </script>
+</head>
+
+</html>