Cache the paths generated from hour name texts

Rendering text along a textPath is very CPU intensive, especially since we’re doing it every second.

Cargo.lock

@@ -855,6 +855,7 @@ dependencies = [
  "toml",
  "usvg",
  "xdg",
+ "xmlwriter",
 ]
 
 [[package]]

Cargo.toml

@@ -15,3 +15,4 @@ toml = "0.5"
 serde = { version = "1.0", features = ["derive"] }
 xdg = "2.4"
 calloop = "0.9"
+xmlwriter = "0.1"

src/main.rs

@@ -3,7 +3,7 @@ extern crate smithay_client_toolkit as sctk;
 use std::fmt;
 use std::fs;
 
-use calloop::{timer::{Timer, TimerHandle}, EventLoop};
+use calloop::{timer::Timer, EventLoop};
 use chrono::prelude::{Local, Utc};
 use chrono::TimeZone;
 use chrono::Timelike;
@@ -12,19 +12,18 @@ use sctk::shm::AutoMemPool;
 use sctk::window::{Event as WEvent, FallbackFrame};
 use serde::Deserialize;
 use svg::node::element::path::Data as PathData;
-use svg::node::element::{
-    Circle, Definitions, Group, Line, Path, Rectangle, Style, Text, TextPath,
-};
+use svg::node::element::{Circle, Group, Line, Path, Rectangle, Style, Text};
 use svg::node::Text as TextNode;
 use svg::Document;
 
-sctk::default_environment!(SeasonalClock, desktop);
+mod svg_clock;
 
-const HOUR_NAMES: [&str; 24] = [
-    "Candle", "Ice", "Comet", "Thimble", "Root", "Mist", "Sprout", "Rainbow", "Worm", "Bud",
-    "Blossom", "Ladybug", "Geese", "Dust", "Peach", "Fog", "Acorn", "Gourd", "Soup", "Crow",
-    "Mushroom", "Thunder", "Frost", "Lantern",
-];
+use svg_clock::{
+    cache_hour_name_paths, svg_to_usvg, HOUR_NAMES, HOUR_NAME_FONT_SIZE, IMAGE_WIDTH, OUTER_R,
+    RING_WIDTH,
+};
+
+sctk::default_environment!(SeasonalClock, desktop);
 
 enum Season {
     Spring,
@@ -69,33 +68,10 @@ fn time_to_degrees(timestamp: i32, // should be time/timestamp
     seconds_to_degrees(timestamp)
 }
 
-fn hour_name_path(image_width: u32, outer_r: f32, ring_width: f32) -> Path {
-    let radius = outer_r - ring_width / 2.0;
-    let delta_x = radius * (15.0_f32.to_radians() / 2.0).sin();
-    let delta_y = radius * (1.0 - (15.0_f32.to_radians() / 2.0).cos());
-    let x1 = (image_width as f32) / 2.0 - delta_x;
-    let y1 = ((image_width as f32) / 2.0 - radius) + delta_y;
-
-    let path_data = PathData::new().move_to((x1, y1)).elliptical_arc_by((
-        radius,
-        radius,
-        15,
-        0,
-        1,
-        2.0 * delta_x,
-        0,
-    ));
-
-    Path::new().set("id", "hour-name-path").set("d", path_data)
-}
-
 fn hour_marker(
     hour: i32,
+    hour_name_path_data: &PathData,
     is_current_hour: bool,
-    image_width: u32,
-    outer_r: f32,
-    ring_width: f32,
-    hour_name_font_size: f32,
     utc_hour_font_size: f32,
 ) -> Group {
     let season = match hour {
@@ -107,26 +83,26 @@ fn hour_marker(
     };
     let rotation = hour * 15;
 
-    let delta_x = outer_r * (15f32.to_radians() / 2.0).sin();
-    let delta_y = outer_r * (1.0 - (15f32.to_radians() / 2.0).cos());
+    let delta_x = OUTER_R * (15f32.to_radians() / 2.0).sin();
+    let delta_y = OUTER_R * (1.0 - (15f32.to_radians() / 2.0).cos());
 
-    let s_delta_x = 0.0 - ring_width * (15f32.to_radians() / 2.0).sin();
-    let s_delta_y = ring_width * (15f32.to_radians() / 2.0).cos();
+    let s_delta_x = 0.0 - RING_WIDTH * (15f32.to_radians() / 2.0).sin();
+    let s_delta_y = RING_WIDTH * (15f32.to_radians() / 2.0).cos();
 
-    let i_delta_x = -2.0 * (outer_r - ring_width) * (15f32.to_radians() / 2.0).sin();
+    let i_delta_x = -2.0 * (OUTER_R - RING_WIDTH) * (15f32.to_radians() / 2.0).sin();
 
-    let x1 = image_width as f32 / 2.0 - delta_x;
-    let y1 = (image_width as f32 / 2.0 - outer_r) + delta_y;
+    let x1 = IMAGE_WIDTH as f32 / 2.0 - delta_x;
+    let y1 = (IMAGE_WIDTH as f32 / 2.0 - OUTER_R) + delta_y;
 
-    let utc_hour_y = image_width as f32 / 2.0 - outer_r + ring_width + utc_hour_font_size;
+    let utc_hour_y = IMAGE_WIDTH as f32 / 2.0 - OUTER_R + RING_WIDTH + utc_hour_font_size;
 
     let path_data = PathData::new()
         .move_to((x1, y1))
-        .elliptical_arc_by((outer_r, outer_r, 15, 0, 1, 2.0 * delta_x, 0))
+        .elliptical_arc_by((OUTER_R, OUTER_R, 15, 0, 1, 2.0 * delta_x, 0))
         .line_by((s_delta_x, s_delta_y))
         .elliptical_arc_by((
-            outer_r - ring_width,
-            outer_r - ring_width,
+            OUTER_R - RING_WIDTH,
+            OUTER_R - RING_WIDTH,
             15,
             0,
             0,
@@ -134,24 +110,18 @@ fn hour_marker(
             0,
         ))
         .close();
-    let path = Path::new().set("d", path_data);
-    let hour_name_text_path = TextPath::new()
-        .set("xlink:href", "#hour-name-path")
-        .set("startOffset", "50%")
-        .add(TextNode::new(HOUR_NAMES[hour as usize]));
-    let hour_name_text = Text::new()
-        .set("text-anchor", "middle")
-        .set("dominant-baseline", "mathematical")
-        .set("font-size", hour_name_font_size)
-        .add(hour_name_text_path);
+    let path = Path::new().set("class", "hour-outline").set("d", path_data);
+    let hour_name_path = Path::new()
+        .set("class", "hour-name")
+        .set("d", hour_name_path_data.clone());
 
     let utc_hour_text = Text::new()
         .set("class", "utc")
         .set(
             "transform",
-            format!("rotate(-7.5, {}, {})", image_width / 2, image_width / 2),
+            format!("rotate(-7.5, {}, {})", IMAGE_WIDTH / 2, IMAGE_WIDTH / 2),
         )
-        .set("x", image_width / 2)
+        .set("x", IMAGE_WIDTH / 2)
         .set("y", utc_hour_y)
         .set("text-anchor", "middle")
         .set("dominant-baseline", "mathematical")
@@ -171,22 +141,16 @@ fn hour_marker(
             format!(
                 "rotate({}, {}, {})",
                 rotation as f32 - 172.5,
-                image_width / 2,
-                image_width / 2
+                IMAGE_WIDTH / 2,
+                IMAGE_WIDTH / 2
             ),
         )
         .add(path)
-        .add(hour_name_text)
+        .add(hour_name_path)
         .add(utc_hour_text)
 }
 
-fn get_range_path(
-    image_width: u32,
-    radius: f32,
-    range_name: &str,
-    start_time: i32,
-    end_time: i32,
-) -> Path {
+fn get_range_path(radius: f32, range_name: &str, start_time: i32, end_time: i32) -> Path {
     let start_deg = time_to_degrees(start_time);
     let end_deg = time_to_degrees(end_time);
     let deg_diff = end_deg - start_deg;
@@ -197,10 +161,10 @@ fn get_range_path(
     let end_delta_y = radius * (1.0 - end_deg.to_radians().cos());
 
     let path_data = PathData::new()
-        .move_to((image_width / 2, image_width / 2))
+        .move_to((IMAGE_WIDTH / 2, IMAGE_WIDTH / 2))
         .line_to((
-            image_width as f32 / 2.0 - start_delta_x,
-            image_width as f32 / 2.0 + radius - start_delta_y,
+            IMAGE_WIDTH as f32 / 2.0 - start_delta_x,
+            IMAGE_WIDTH as f32 / 2.0 + radius - start_delta_y,
         ))
         .elliptical_arc_to((
             radius,
@@ -208,21 +172,21 @@ fn get_range_path(
             deg_diff,
             ((start_deg < end_deg) ^ (deg_diff.abs() >= 180.0)) as u8,
             0,
-            image_width as f32 / 2.0 - end_delta_x,
-            image_width as f32 / 2.0 + radius - end_delta_y,
+            IMAGE_WIDTH as f32 / 2.0 - end_delta_x,
+            IMAGE_WIDTH as f32 / 2.0 + radius - end_delta_y,
         ))
         .close();
 
     Path::new().set("class", range_name).set("d", path_data)
 }
 
-fn get_moon_path(image_width: u32, radius: f32, moon_phase: f64) -> Path {
+fn get_moon_path(radius: f32, moon_phase: f64) -> Path {
     let handle_x_pos = radius as f64 * 1.34;
     let handle_y_pos = radius * 0.88;
-    let min_x = image_width as f64 / 2.0 - handle_x_pos;
+    let min_x = IMAGE_WIDTH as f64 / 2.0 - handle_x_pos;
     let max_x = min_x + 2.0 * handle_x_pos;
-    let top_y = image_width as f32 / 2.0 - handle_y_pos;
-    let bottom_y = image_width as f32 / 2.0 + handle_y_pos;
+    let top_y = IMAGE_WIDTH as f32 / 2.0 - handle_y_pos;
+    let bottom_y = IMAGE_WIDTH as f32 / 2.0 + handle_y_pos;
 
     let h1_x: f64;
     let h2_x: f64;
@@ -236,27 +200,27 @@ fn get_moon_path(image_width: u32, radius: f32, moon_phase: f64) -> Path {
     }
 
     let path_data = PathData::new()
-        .move_to((image_width as f32 / 2.0, image_width as f32 / 2.0 - radius))
+        .move_to((IMAGE_WIDTH as f32 / 2.0, IMAGE_WIDTH as f32 / 2.0 - radius))
         .cubic_curve_to((
             h1_x,
             top_y,
             h1_x,
             bottom_y,
-            image_width as f32 / 2.0,
-            image_width as f32 / 2.0 + radius,
+            IMAGE_WIDTH as f32 / 2.0,
+            IMAGE_WIDTH as f32 / 2.0 + radius,
         ))
         .cubic_curve_to((
             h2_x,
             bottom_y,
             h2_x,
             top_y,
-            image_width / 2,
-            image_width as f32 / 2.0 - radius,
+            IMAGE_WIDTH / 2,
+            IMAGE_WIDTH as f32 / 2.0 - radius,
         ));
     Path::new().set("class", "moon").set("d", path_data)
 }
 
-fn gen_svg(config: &Option<Config>) -> Document {
+fn gen_svg(config: &Option<Config>, hour_name_path_cache: &[PathData; 24]) -> Document {
     let local_timestamp = Local::now();
     let utc_hour = local_timestamp.with_timezone(&Utc).time().hour();
     let local_hour = local_timestamp.time().hour();
@@ -267,22 +231,16 @@ fn gen_svg(config: &Option<Config>) -> Document {
     let local_time = local_timestamp.time().num_seconds_from_midnight() as i32;
     let utc_rotation = seconds_to_degrees(utc_offset);
 
-    // TODO: These should be calculated instead of hardcoded
-    let image_width = 700u32;
-
     // Calculate the Moon phase
     let unixtime = suncalc::Timestamp(local_timestamp.timestamp_millis());
     let moon_illumination = suncalc::moon_illumination(unixtime);
-    let moon_radius = image_width as f32 * 0.071428571;
+    let moon_radius = IMAGE_WIDTH as f32 * 0.071428571;
     let moon_phase = moon_illumination.phase * 28.0;
 
-    let local_hour_font_size = image_width as f32 * 0.02357;
-    let hour_name_font_size = image_width as f32 * 0.019109;
-    let utc_hour_font_size = image_width as f32 * 0.021462;
-    let outer_r = (image_width as f32) / 2.0 - 3.0 * hour_name_font_size;
-    let ring_width = hour_name_font_size * 3.0;
-    let sun_radius = image_width as f32 * 0.0142871;
-    let marker_radius = outer_r - ring_width - 2.0 * utc_hour_font_size;
+    let local_hour_font_size = IMAGE_WIDTH as f32 * 0.02357;
+    let utc_hour_font_size = IMAGE_WIDTH as f32 * 0.021462;
+    let sun_radius = IMAGE_WIDTH as f32 * 0.0142871;
+    let marker_radius = OUTER_R - RING_WIDTH - 2.0 * utc_hour_font_size;
 
     let border = Rectangle::new()
         .set("x", 0i32)
@@ -293,17 +251,17 @@ fn gen_svg(config: &Option<Config>) -> Document {
     let stylesheet = Style::new(
         "\
         #border {stroke: none; fill: rgb(19, 17, 30); }
-        .hour path {stroke: rgb(0, 0, 0); stroke-width: 2px;}
-        .hour text {stroke: none; fill: rgb(238, 187, 85);}
+        .hour path.hour-outline {stroke: rgb(0, 0, 0); stroke-width: 2px;}
+        .hour path.hour-name {stroke: none; fill: rgb(238, 187, 85);}
         .hour text.utc {stroke: none; fill: rgb(91, 68, 38);}
         .winter path {fill: rgb(70, 62, 108);}
-        .active.winter path {fill: rgb(100, 92, 138);}
+        .active.winter path.hour-outline {fill: rgb(100, 92, 138);}
         .spring path {fill: rgb(55, 87, 55);}
-        .active.spring path {fill: rgb(85, 117, 85);}
+        .active.spring path.hour-outline {fill: rgb(85, 117, 85);}
         .summer path {fill: rgb(113, 92, 43);}
-        .active.summer path {fill: rgb(143, 122, 73);}
+        .active.summer path.hour-outline {fill: rgb(143, 122, 73);}
         .autumn path {fill: rgb(108, 68, 44);}
-        .active.autumn path {fill: rgb(138, 98, 74);}
+        .active.autumn.hour-outline path {fill: rgb(138, 98, 74);}
         .local-hour {stroke: none; fill: rgb(238, 187, 85);}
         .night-time {stroke: none; fill: rgb(19, 17, 30);}
         .blue-hour {stroke: none; fill: rgb(9, 1, 119);}
@@ -319,7 +277,6 @@ fn gen_svg(config: &Option<Config>) -> Document {
         #current-hour-name {font-weight: bold;}",
     );
 
-    let definitions = Definitions::new().add(hour_name_path(image_width, outer_r, ring_width));
     let mut local_clock = Group::new().set("id", "local-clock");
 
     for hour in 0i32..24 {
@@ -333,10 +290,10 @@ fn gen_svg(config: &Option<Config>) -> Document {
         let hour_node = Text::new()
             .set("class", "local-hour")
             .set("transform", format!("rotate({}, 350, 350)", 180 + rotation))
-            .set("x", (image_width as f32) / 2.0)
+            .set("x", (IMAGE_WIDTH as f32) / 2.0)
             .set(
                 "y",
-                (image_width as f32) / 2.0 - outer_r - local_hour_font_size / 2.0,
+                (IMAGE_WIDTH as f32) / 2.0 - OUTER_R - local_hour_font_size / 2.0,
             )
             .set("text-anchor", "middle")
             .set("font-size", local_hour_font_size as f32)
@@ -349,27 +306,24 @@ fn gen_svg(config: &Option<Config>) -> Document {
         format!(
             "rotate({}, {}, {})",
             utc_rotation,
-            image_width / 2,
-            image_width / 2
+            IMAGE_WIDTH / 2,
+            IMAGE_WIDTH / 2
         ),
     );
 
     for hour in 0i32..24 {
         seasonal_clock = seasonal_clock.add(hour_marker(
             hour,
+            &hour_name_path_cache[hour as usize],
             hour == utc_hour as i32,
-            image_width,
-            outer_r,
-            ring_width,
-            hour_name_font_size,
             utc_hour_font_size,
         ));
     }
 
     let daytime_circle = Circle::new()
         .set("class", "day-time")
-        .set("cx", image_width / 2)
-        .set("cy", image_width / 2)
+        .set("cx", IMAGE_WIDTH / 2)
+        .set("cy", IMAGE_WIDTH / 2)
         .set("r", marker_radius);
 
     let day_parts_group: Option<Group> = if config.is_some() {
@@ -413,7 +367,6 @@ fn gen_svg(config: &Option<Config>) -> Document {
             .num_seconds_from_midnight() as i32;
 
         let golden_hour_path = get_range_path(
-            image_width,
             marker_radius,
             "golden-hour",
             morning_golden_end,
@@ -422,33 +375,32 @@ fn gen_svg(config: &Option<Config>) -> Document {
 
         let sun_disc = Circle::new()
             .set("class", "sun")
-            .set("cx", image_width / 2)
-            .set("cy", image_width as f32 / 2.0 + outer_r / 2.0 + sun_radius)
+            .set("cx", IMAGE_WIDTH / 2)
+            .set("cy", IMAGE_WIDTH as f32 / 2.0 + OUTER_R / 2.0 + sun_radius)
             .set("r", sun_radius)
             .set(
                 "transform",
                 format!(
                     "rotate({}, {}, {})",
                     time_to_degrees(local_time) - utc_rotation,
-                    image_width / 2,
-                    image_width / 2
+                    IMAGE_WIDTH / 2,
+                    IMAGE_WIDTH / 2
                 ),
             );
 
         let blue_hour_path = get_range_path(
-            image_width,
             marker_radius,
             "blue-hour",
             sunrise, // morning_blue_end
             sunset,  // evening_blue_start
         );
 
-        let nighttime_path = get_range_path(image_width, marker_radius, "night-time", dawn, dusk);
+        let nighttime_path = get_range_path(marker_radius, "night-time", dawn, dusk);
 
         let marker_circle = Circle::new()
             .set("class", "marker")
-            .set("cx", image_width / 2)
-            .set("cy", image_width / 2)
+            .set("cx", IMAGE_WIDTH / 2)
+            .set("cy", IMAGE_WIDTH / 2)
             .set("r", marker_radius);
 
         let noon_marker = Line::new()
@@ -458,17 +410,17 @@ fn gen_svg(config: &Option<Config>) -> Document {
                 format!(
                     "rotate({}, {}, {})",
                     time_to_degrees(noon),
-                    image_width / 2,
-                    image_width / 2
+                    IMAGE_WIDTH / 2,
+                    IMAGE_WIDTH / 2
                 ),
             )
-            .set("x1", image_width / 2)
+            .set("x1", IMAGE_WIDTH / 2)
             .set(
                 "y1",
-                image_width as f32 / 2.0 + marker_radius - sun_radius as f32,
+                IMAGE_WIDTH as f32 / 2.0 + marker_radius - sun_radius as f32,
             )
-            .set("x2", image_width / 2)
-            .set("y2", image_width as f32 / 2.0 + marker_radius);
+            .set("x2", IMAGE_WIDTH / 2)
+            .set("y2", IMAGE_WIDTH as f32 / 2.0 + marker_radius);
 
         let midnight_marker = Line::new()
             .set("class", "mid-marker")
@@ -477,17 +429,17 @@ fn gen_svg(config: &Option<Config>) -> Document {
                 format!(
                     "rotate({}, {}, {})",
                     time_to_degrees(midnight),
-                    image_width / 2,
-                    image_width / 2
+                    IMAGE_WIDTH / 2,
+                    IMAGE_WIDTH / 2
                 ),
             )
-            .set("x1", image_width / 2)
+            .set("x1", IMAGE_WIDTH / 2)
             .set(
                 "y1",
-                image_width as f32 / 2.0 + marker_radius - sun_radius as f32,
+                IMAGE_WIDTH as f32 / 2.0 + marker_radius - sun_radius as f32,
             )
-            .set("x2", image_width / 2)
-            .set("y2", image_width as f32 / 2.0 + marker_radius);
+            .set("x2", IMAGE_WIDTH / 2)
+            .set("y2", IMAGE_WIDTH as f32 / 2.0 + marker_radius);
 
         Some(
             Group::new()
@@ -497,8 +449,8 @@ fn gen_svg(config: &Option<Config>) -> Document {
                     format!(
                         "rotate({}, {}, {})",
                         utc_rotation,
-                        image_width / 2,
-                        image_width / 2
+                        IMAGE_WIDTH / 2,
+                        IMAGE_WIDTH / 2
                     ),
                 )
                 .add(daytime_circle)
@@ -516,14 +468,14 @@ fn gen_svg(config: &Option<Config>) -> Document {
 
     let moon_circle = Circle::new()
         .set("class", "moon-background")
-        .set("cx", image_width / 2)
-        .set("cy", image_width / 2)
+        .set("cx", IMAGE_WIDTH / 2)
+        .set("cy", IMAGE_WIDTH / 2)
         .set("r", moon_radius);
 
     let moon_group = Group::new()
         .set("id", "moon-container")
         .add(moon_circle)
-        .add(get_moon_path(image_width, moon_radius, moon_phase));
+        .add(get_moon_path(moon_radius, moon_phase));
 
     let dial = Line::new()
         .set("id", "dial")
@@ -533,22 +485,22 @@ fn gen_svg(config: &Option<Config>) -> Document {
             format!(
                 "rotate({}, {}, {})",
                 time_to_degrees(local_time),
-                image_width / 2,
-                image_width / 2
+                IMAGE_WIDTH / 2,
+                IMAGE_WIDTH / 2
             ),
         )
-        .set("x1", image_width / 2)
-        .set("y1", image_width as f32 / 2.0 + outer_r * 0.5)
-        .set("x2", image_width / 2)
+        .set("x1", IMAGE_WIDTH / 2)
+        .set("y1", IMAGE_WIDTH as f32 / 2.0 + OUTER_R * 0.5)
+        .set("x2", IMAGE_WIDTH / 2)
         .set(
             "y2",
-            image_width as f32 / 2.0 + outer_r - ring_width + hour_name_font_size,
+            IMAGE_WIDTH as f32 / 2.0 + OUTER_R - RING_WIDTH + HOUR_NAME_FONT_SIZE,
         );
 
-    let current_box_width = (200f32 / 700f32) * image_width as f32;
-    let current_box_height = (100f32 / 700f32) * image_width as f32;
-    let current_hour_name_font_size = (40f32 / 700f32) * image_width as f32;
-    let current_time_font_size = (30f32 / 700f32) * image_width as f32;
+    let current_box_width = (200f32 / 700f32) * IMAGE_WIDTH as f32;
+    let current_box_height = (100f32 / 700f32) * IMAGE_WIDTH as f32;
+    let current_hour_name_font_size = (40f32 / 700f32) * IMAGE_WIDTH as f32;
+    let current_time_font_size = (30f32 / 700f32) * IMAGE_WIDTH as f32;
 
     let current_hour_rect = Rectangle::new()
         .set("x1", 0)
@@ -591,8 +543,8 @@ fn gen_svg(config: &Option<Config>) -> Document {
             "transform",
             format!(
                 "translate({}, {})",
-                image_width as f32 / 2.0 - current_box_width / 2.0,
-                image_width as f32 / 2.0 + top_pos
+                IMAGE_WIDTH as f32 / 2.0 - current_box_width / 2.0,
+                IMAGE_WIDTH as f32 / 2.0 + top_pos
             ),
         )
         .add(current_hour_rect)
@@ -605,7 +557,6 @@ fn gen_svg(config: &Option<Config>) -> Document {
         .set("height", 700i32)
         .set("xmlns:xlink", "http://www.w3.org/1999/xlink")
         .add(stylesheet)
-        .add(definitions)
         .add(border)
         .add(local_clock);
 
@@ -674,8 +625,17 @@ fn main() {
     let mut need_redraw = false;
     let mut dimensions = (700, 700);
 
+    let hour_name_path_cache = cache_hour_name_paths();
+
     if !env.get_shell().unwrap().needs_configure() {
-        redraw(&mut pool, window.surface(), dimensions, &config).expect("Failed to draw");
+        redraw(
+            &mut pool,
+            window.surface(),
+            dimensions,
+            &config,
+            &hour_name_path_cache,
+        )
+        .expect("Failed to draw");
         window.refresh()
     }
 
@@ -685,20 +645,32 @@ fn main() {
     let timer_handle = source.handle();
     timer_handle.add_timeout(std::time::Duration::from_secs(1), "");
 
-    handle.insert_source(source, |_, timer_handle, _| {
-        println!("Redraw!");
-        redraw(&mut pool, window.surface(), dimensions).expect("Failed to draw");
-        window.refresh();
-        timer_handle.add_timeout(std::time::Duration::from_secs(1), "");
-    });
+    handle
+        .insert_source(source, |_, timer_handle, event| {
+            timer_handle.add_timeout(std::time::Duration::from_secs(1), "");
+            if event.is_none() {
+                *event = Some(sctk::window::Event::Refresh);
+            }
+        })
+        .unwrap();
 
-    sctk::WaylandSource::new(queue).quick_insert(handle).unwrap();
+    sctk::WaylandSource::new(queue)
+        .quick_insert(handle)
+        .unwrap();
 
     loop {
         // Update every second
         match next_action.take() {
             Some(WEvent::Close) => break,
             Some(WEvent::Refresh) => {
+                redraw(
+                    &mut pool,
+                    window.surface(),
+                    dimensions,
+                    &config,
+                    &hour_name_path_cache,
+                )
+                .expect("Failed to draw");
                 window.refresh();
                 window.surface().commit();
             }
@@ -721,7 +693,14 @@ fn main() {
         if need_redraw {
             need_redraw = false;
 
-            redraw(&mut pool, window.surface(), dimensions, &config).expect("Failed to draw")
+            redraw(
+                &mut pool,
+                window.surface(),
+                dimensions,
+                &config,
+                &hour_name_path_cache,
+            )
+            .expect("Failed to draw")
         }
 
         if let Err(e) = display.flush() {
@@ -739,14 +718,10 @@ fn redraw(
     surface: &wl_surface::WlSurface,
     (buf_x, buf_y): (u32, u32),
     config: &Option<Config>,
+    hour_name_path_cache: &[PathData; 24],
 ) -> Result<(), ::std::io::Error> {
-    let document = gen_svg(config);
-
-    let bytes = document.to_string();
-    let mut opt = usvg::Options::default();
-    opt.fontdb.load_system_fonts();
-    opt.font_family = "Liberation Serif".to_string();
-    let svg_tree = usvg::Tree::from_str(&bytes, &opt.to_ref()).unwrap();
+    let document = gen_svg(config, hour_name_path_cache);
+    let svg_tree = svg_to_usvg(document);
 
     let (canvas, new_buffer) = pool.buffer(
         buf_x as i32,

src/svg_clock.rs

@@ -0,0 +1,139 @@
+use svg::{
+    node::{
+        element::{path::Data as PathData, Definitions, Path, Text, TextPath},
+        Text as TextNode,
+    },
+    Document,
+};
+use usvg::Tree;
+
+pub const HOUR_NAMES: [&str; 24] = [
+    "Candle", "Ice", "Comet", "Thimble", "Root", "Mist", "Sprout", "Rainbow", "Worm", "Bud",
+    "Blossom", "Ladybug", "Geese", "Dust", "Peach", "Fog", "Acorn", "Gourd", "Soup", "Crow",
+    "Mushroom", "Thunder", "Frost", "Lantern",
+];
+pub const IMAGE_WIDTH: u32 = 700;
+pub const HOUR_NAME_FONT_SIZE: f32 = IMAGE_WIDTH as f32 * 0.019109;
+pub const OUTER_R: f32 = (IMAGE_WIDTH as f32) / 2.0 - 3.0 * HOUR_NAME_FONT_SIZE;
+pub const RING_WIDTH: f32 = HOUR_NAME_FONT_SIZE * 3.0;
+
+pub fn svg_to_usvg(document: Document) -> Tree {
+    let doc_str = document.to_string();
+
+    let mut opt = usvg::Options::default();
+    opt.fontdb.load_system_fonts();
+    opt.font_family = "Liberation Serif".to_string();
+
+    Tree::from_str(&doc_str, &opt.to_ref()).unwrap()
+}
+
+fn hour_name_path() -> Path {
+    let radius = OUTER_R - RING_WIDTH / 2.0;
+    let delta_x = radius * (15.0_f32.to_radians() / 2.0).sin();
+    let delta_y = radius * (1.0 - (15.0_f32.to_radians() / 2.0).cos());
+    let x1 = (IMAGE_WIDTH as f32) / 2.0 - delta_x;
+    let y1 = ((IMAGE_WIDTH as f32) / 2.0 - radius) + delta_y;
+
+    let path_data = PathData::new().move_to((x1, y1)).elliptical_arc_by((
+        radius,
+        radius,
+        15,
+        0,
+        1,
+        2.0 * delta_x,
+        0,
+    ));
+
+    Path::new().set("id", "hour-name-path").set("d", path_data)
+}
+
+fn create_temp_document(hour_name: &str) -> Document {
+    let definitions = Definitions::new().add(hour_name_path());
+
+    let hour_name_text_path = TextPath::new()
+        .set("xlink:href", "#hour-name-path")
+        .set("startOffset", "50%")
+        .add(TextNode::new(hour_name));
+    let hour_name_text = Text::new()
+        .set("id", "hour-name")
+        .set("text-anchor", "middle")
+        .set("dominant-baseline", "mathematical")
+        .set("font-size", HOUR_NAME_FONT_SIZE)
+        .add(hour_name_text_path);
+
+    Document::new()
+        .set("viewBox", (0i32, 0i32, 700i32, 700i32))
+        .set("width", 700i32)
+        .set("height", 700i32)
+        .set("xmlns:xlink", "http://www.w3.org/1999/xlink")
+        .add(definitions)
+        .add(hour_name_text)
+}
+
+fn cache_hour_name_path(hour_name: &str) -> PathData {
+    let tree = svg_to_usvg(create_temp_document(hour_name));
+    let mut svg_path_data: PathData = PathData::new();
+    let text_node = tree.node_by_id("hour-name").unwrap();
+    match *text_node.borrow() {
+        usvg::NodeKind::Path(ref path) => {
+            let path_data = &path.data;
+            for segment in path_data.0.iter() {
+                match segment {
+                    usvg::PathSegment::MoveTo { x, y } => {
+                        svg_path_data = svg_path_data.move_to((*x, *y));
+                    }
+                    usvg::PathSegment::LineTo { x, y } => {
+                        svg_path_data = svg_path_data.line_to((*x, *y));
+                    }
+                    usvg::PathSegment::CurveTo {
+                        x1,
+                        y1,
+                        x2,
+                        y2,
+                        x,
+                        y,
+                    } => {
+                        svg_path_data = svg_path_data.cubic_curve_to((*x1, *y1, *x2, *y2, *x, *y));
+                    }
+                    usvg::PathSegment::ClosePath => {
+                        svg_path_data = svg_path_data.close();
+                    }
+                }
+            }
+        }
+        _ => {
+            unreachable!()
+        }
+    }
+
+    svg_path_data
+}
+
+pub fn cache_hour_name_paths() -> [PathData; 24] {
+    [
+        cache_hour_name_path(HOUR_NAMES[0]),
+        cache_hour_name_path(HOUR_NAMES[1]),
+        cache_hour_name_path(HOUR_NAMES[2]),
+        cache_hour_name_path(HOUR_NAMES[3]),
+        cache_hour_name_path(HOUR_NAMES[4]),
+        cache_hour_name_path(HOUR_NAMES[5]),
+        cache_hour_name_path(HOUR_NAMES[6]),
+        cache_hour_name_path(HOUR_NAMES[7]),
+        cache_hour_name_path(HOUR_NAMES[8]),
+        cache_hour_name_path(HOUR_NAMES[9]),
+        cache_hour_name_path(HOUR_NAMES[10]),
+        cache_hour_name_path(HOUR_NAMES[11]),
+        cache_hour_name_path(HOUR_NAMES[12]),
+        cache_hour_name_path(HOUR_NAMES[13]),
+        cache_hour_name_path(HOUR_NAMES[14]),
+        cache_hour_name_path(HOUR_NAMES[15]),
+        cache_hour_name_path(HOUR_NAMES[16]),
+        cache_hour_name_path(HOUR_NAMES[17]),
+        cache_hour_name_path(HOUR_NAMES[18]),
+        cache_hour_name_path(HOUR_NAMES[19]),
+        cache_hour_name_path(HOUR_NAMES[20]),
+        cache_hour_name_path(HOUR_NAMES[21]),
+        cache_hour_name_path(HOUR_NAMES[22]),
+        cache_hour_name_path(HOUR_NAMES[23]),
+    ]
+}