Add color rewriting and stroke support for SVG images. Cut over more

images, discovering some break...
This commit is contained in:
Dustin Carlino 2019-12-08 12:46:56 -08:00
parent 77099a164b
commit 5a7314d137
29 changed files with 160 additions and 60 deletions

View File

@ -1,4 +1,5 @@
use crate::assets::Assets;
use crate::svg;
use crate::widgets::ContextMenu;
use crate::{
text, Canvas, Color, EventCtx, HorizontalAlignment, Key, ScreenDims, ScreenPt, ScreenRectangle,
@ -411,6 +412,24 @@ impl GeomBatch {
}
ScreenDims::new(bounds.max_x - bounds.min_x, bounds.max_y - bounds.min_y)
}
// Slightly weird use case, but hotswap colors.
pub fn rewrite_color(&mut self, from: Color, to: Color) {
for (c, _) in self.list.iter_mut() {
if *c == from {
*c = to;
}
}
}
// TODO Weird API...
pub fn add_svg(&mut self, filename: &str, dx: f64, dy: f64) {
let mut batch = GeomBatch::new();
svg::add_svg(&mut batch, filename);
for (color, poly) in batch.consume() {
self.push(color, poly.translate(dx, dy));
}
}
}
// Something that's been sent to the GPU already.

View File

@ -6,15 +6,21 @@ use lyon::math::Point;
use lyon::path::PathEvent;
use lyon::tessellation;
use lyon::tessellation::geometry_builder::{simple_builder, VertexBuffers};
use lyon::tessellation::FillVertex;
use lyon::tessellation::{FillVertex, StrokeVertex};
const TOLERANCE: f32 = 0.01;
// No offset. Returns the button bounds.
// Code here adapted from
// https://github.com/nical/lyon/blob/b5c87c9a22dccfab24daa1947419a70915d60914/examples/wgpu_svg/src/main.rs.
// No offset. I'm not exactly sure how the simplification in usvg works, but this doesn't support
// transforms or strokes or text, just fills. Luckily, all of the files exported from Figma so far
// work just fine.
pub fn add_svg(batch: &mut GeomBatch, filename: &str) -> Bounds {
let mut fill_tess = tessellation::FillTessellator::new();
let mut stroke_tess = tessellation::StrokeTessellator::new();
let mut mesh_per_color: VecMap<Color, VertexBuffers<FillVertex, u16>> = VecMap::new();
let mut fill_mesh_per_color: VecMap<Color, VertexBuffers<FillVertex, u16>> = VecMap::new();
let mut stroke_mesh_per_color: VecMap<Color, VertexBuffers<StrokeVertex, u16>> = VecMap::new();
let svg_tree = usvg::Tree::from_file(&filename, &usvg::Options::default()).unwrap();
for node in svg_tree.root().descendants() {
@ -23,31 +29,40 @@ pub fn add_svg(batch: &mut GeomBatch, filename: &str) -> Bounds {
if let Some(ref fill) = p.fill {
let color = convert_color(&fill.paint, fill.opacity.value());
let geom = mesh_per_color.mut_or_insert(color, VertexBuffers::new);
let geom = fill_mesh_per_color.mut_or_insert(color, VertexBuffers::new);
fill_tess
.tessellate_path(
convert_path(p),
&tessellation::FillOptions::tolerance(TOLERANCE),
&mut simple_builder(geom),
)
.unwrap();
.expect(&format!("Couldn't tesellate something from {}", filename));
}
if let Some(ref stroke) = p.stroke {
panic!("aww we have a stroke {:?}", stroke);
let (color, stroke_opts) = convert_stroke(stroke);
let geom: &mut VertexBuffers<FillVertex, u16> =
mesh_per_color.mut_or_insert(color, VertexBuffers::new);
/*stroke_tess.tessellate_path(
convert_path(p),
&stroke_opts,
&mut simple_builder(geom)).unwrap();*/
let geom = stroke_mesh_per_color.mut_or_insert(color, VertexBuffers::new);
stroke_tess
.tessellate_path(convert_path(p), &stroke_opts, &mut simple_builder(geom))
.unwrap();
}
}
}
let mut bounds = Bounds::new();
for (color, mesh) in mesh_per_color.consume() {
for (color, mesh) in fill_mesh_per_color.consume() {
let poly = Polygon::precomputed(
mesh.vertices
.into_iter()
.map(|v| Pt2D::new(v.position.x as f64, v.position.y as f64))
.collect(),
mesh.indices.into_iter().map(|idx| idx as usize).collect(),
None,
);
bounds.union(poly.get_bounds());
batch.push(color, poly);
}
for (color, mesh) in stroke_mesh_per_color.consume() {
let poly = Polygon::precomputed(
mesh.vertices
.into_iter()

View File

@ -168,19 +168,24 @@ impl Button {
Button::new(normal, hovered, key, "", bg)
}
pub fn rectangle_svg(filename: &str, key: Option<MultiKey>, ctx: &EventCtx) -> Button {
pub fn rectangle_svg(
filename: &str,
tooltip: &str,
key: Option<MultiKey>,
ctx: &EventCtx,
) -> Button {
let mut normal = GeomBatch::new();
let bounds = svg::add_svg(&mut normal, filename);
// TODO Rewrite colors
let mut hovered = GeomBatch::new();
svg::add_svg(&mut hovered, filename);
hovered.rewrite_color(Color::WHITE, Color::ORANGE);
Button::new(
DrawBoth::new(ctx, normal, Vec::new()),
DrawBoth::new(ctx, hovered, Vec::new()),
key,
"",
tooltip,
bounds.get_rectangle(),
)
}

View File

@ -1,4 +1,5 @@
use crate::layout::Widget;
use crate::svg;
use crate::{DrawBoth, EventCtx, GeomBatch, GfxCtx, ScreenDims, ScreenPt, Text};
// Just draw something. A widget just so layouting works.
@ -18,6 +19,15 @@ impl JustDraw {
}
}
pub fn svg(filename: &str, ctx: &EventCtx) -> JustDraw {
let mut batch = GeomBatch::new();
svg::add_svg(&mut batch, filename);
JustDraw {
draw: DrawBoth::new(ctx, batch, vec![]),
top_left: ScreenPt::new(0.0, 0.0),
}
}
pub fn text(text: Text, ctx: &EventCtx) -> JustDraw {
JustDraw {
draw: DrawBoth::new(ctx, GeomBatch::new(), vec![(text, ScreenPt::new(0.0, 0.0))]),

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,5 @@
<svg width="213" height="34" viewBox="0 0 213 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.5 0.549998H99.65C102.75 0.549998 105.133 0.783331 106.8 1.25C108.5 1.68333 109.7 2.4 110.4 3.4C111.1 4.36667 111.45 5.73333 111.45 7.5V11.5C111.45 12.4 111.083 13.25 110.35 14.05C109.65 14.85 108.817 15.4 107.85 15.7V15.95C109.117 16.0833 110.267 16.6333 111.3 17.6C112.367 18.5333 112.9 19.5833 112.9 20.75V25.75C112.9 28.3833 111.85 30.25 109.75 31.35C107.65 32.45 104.4 33 100 33H86.5V0.549998ZM99.65 13.75C100.883 13.75 101.8 13.65 102.4 13.45C103 13.25 103.4 12.9333 103.6 12.5C103.833 12.0333 103.95 11.3667 103.95 10.5V8.9C103.95 8.13333 103.85 7.56667 103.65 7.2C103.45 6.8 103.033 6.51667 102.4 6.35C101.8 6.18333 100.833 6.1 99.5 6.1H94.3V13.75H99.65ZM99.85 27.45C101.75 27.45 103.1 27.2333 103.9 26.8C104.7 26.3667 105.1 25.6667 105.1 24.7V22.1C105.1 20.9 104.783 20.05 104.15 19.55C103.55 19.05 102.467 18.8 100.9 18.8H94.3V27.45H99.85ZM126.838 0.549998H136.338L148.038 33H140.138L137.238 24.45H125.388L122.538 33H114.838L126.838 0.549998ZM135.538 19.25L131.438 7.05H131.238L127.138 19.25H135.538ZM165.987 33.5C164.52 33.5 163.203 33.4333 162.037 33.3C160.903 33.1667 159.653 32.9167 158.287 32.55C156.753 32.15 155.487 31.6333 154.487 31C153.487 30.3333 152.653 29.4167 151.987 28.25C151.287 27.0833 150.937 25.7 150.937 24.1V9.85C150.937 3.31666 155.953 0.049998 165.987 0.049998C168.553 0.049998 171.987 0.416665 176.287 1.15V7C172.42 6.06666 169.02 5.6 166.087 5.6C164.853 5.6 163.887 5.63333 163.187 5.7C162.52 5.76667 161.82 5.93333 161.087 6.2C159.52 6.73333 158.737 7.91666 158.737 9.75V23.55C158.737 26.4833 161.42 27.95 166.787 27.95C169.087 27.95 172.32 27.4667 176.487 26.5V32.4C172.92 33.1333 169.42 33.5 165.987 33.5ZM181.471 0.549998H189.271V33H181.471V0.549998ZM189.471 15.8L201.621 0.549998H210.771L198.471 15.65L212.121 33H202.621L189.471 15.8Z" fill="white"/>
<line x1="19" y1="15" x2="63" y2="15" stroke="white" stroke-width="8" stroke-linecap="round"/>
<path d="M-6.99382e-07 15L24.75 1.1436L24.75 28.8564L-6.99382e-07 15Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,8 @@
<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="250" rx="10" fill="white"/>
<path d="M37.2949 201.711C37.1012 204.389 36.11 206.497 34.3213 208.035C32.5439 209.573 30.1969 210.342 27.2803 210.342C24.0902 210.342 21.578 209.271 19.7437 207.129C17.9207 204.976 17.0093 202.025 17.0093 198.276V196.755C17.0093 194.363 17.4308 192.255 18.2739 190.432C19.117 188.609 20.319 187.214 21.8799 186.245C23.4521 185.265 25.2751 184.775 27.3486 184.775C30.2197 184.775 32.5326 185.544 34.2871 187.083C36.0417 188.621 37.0557 190.78 37.3291 193.56H32.2021C32.0768 191.953 31.6268 190.791 30.8521 190.073C30.0887 189.344 28.9209 188.979 27.3486 188.979C25.6396 188.979 24.3579 189.595 23.5034 190.825C22.6603 192.044 22.2274 193.941 22.2046 196.516V198.396C22.2046 201.085 22.609 203.05 23.418 204.292C24.2383 205.534 25.5257 206.155 27.2803 206.155C28.8639 206.155 30.0431 205.796 30.8179 205.078C31.604 204.349 32.054 203.227 32.168 201.711H37.2949ZM60.9131 210H55.7861V199.336H45.7886V210H40.6616V185.117H45.7886V195.2H55.7861V185.117H60.9131V210ZM79.7632 204.873H70.7739L69.0649 210H63.6133L72.876 185.117H77.627L86.9409 210H81.4893L79.7632 204.873ZM72.1582 200.72H78.3789L75.2515 191.406L72.1582 200.72ZM94.3921 205.881H105.278V210H89.2651V185.117H94.3921V205.881ZM113.362 205.881H124.248V210H108.235V185.117H113.362V205.881ZM142.175 199.216H132.332V205.881H143.884V210H127.205V185.117H143.85V189.27H132.332V195.2H142.175V199.216ZM167.126 210H162L152.019 193.628V210H146.892V185.117H152.019L162.017 201.523V185.117H167.126V210ZM191.292 206.855C190.369 207.961 189.064 208.821 187.378 209.436C185.692 210.04 183.823 210.342 181.772 210.342C179.619 210.342 177.728 209.875 176.099 208.94C174.481 207.995 173.228 206.628 172.339 204.839C171.462 203.05 171.012 200.948 170.989 198.533V196.841C170.989 194.357 171.405 192.209 172.236 190.398C173.079 188.575 174.287 187.185 175.859 186.228C177.443 185.26 179.294 184.775 181.414 184.775C184.364 184.775 186.672 185.482 188.335 186.895C189.998 188.296 190.984 190.341 191.292 193.03H186.301C186.073 191.606 185.566 190.563 184.78 189.902C184.006 189.242 182.935 188.911 181.567 188.911C179.824 188.911 178.497 189.566 177.585 190.876C176.674 192.187 176.213 194.135 176.201 196.721V198.311C176.201 200.92 176.697 202.891 177.688 204.224C178.679 205.557 180.132 206.223 182.046 206.223C183.971 206.223 185.344 205.813 186.165 204.993V200.703H181.499V196.926H191.292V206.855ZM210.432 199.216H200.588V205.881H212.141V210H195.461V185.117H212.107V189.27H200.588V195.2H210.432V199.216ZM228.052 203.472C228.052 202.503 227.71 201.763 227.026 201.25C226.343 200.726 225.112 200.179 223.335 199.609C221.558 199.028 220.151 198.459 219.114 197.9C216.288 196.374 214.875 194.317 214.875 191.731C214.875 190.387 215.251 189.19 216.003 188.142C216.767 187.083 217.855 186.257 219.268 185.664C220.692 185.072 222.287 184.775 224.053 184.775C225.83 184.775 227.414 185.1 228.804 185.75C230.194 186.388 231.27 187.293 232.034 188.467C232.808 189.64 233.196 190.973 233.196 192.466H228.069C228.069 191.326 227.71 190.444 226.992 189.817C226.274 189.179 225.266 188.86 223.967 188.86C222.714 188.86 221.74 189.128 221.045 189.663C220.35 190.187 220.002 190.882 220.002 191.748C220.002 192.557 220.407 193.235 221.216 193.782C222.036 194.329 223.238 194.841 224.822 195.32C227.738 196.197 229.863 197.285 231.196 198.584C232.529 199.883 233.196 201.501 233.196 203.438C233.196 205.591 232.381 207.283 230.752 208.513C229.123 209.732 226.93 210.342 224.172 210.342C222.258 210.342 220.515 209.994 218.943 209.299C217.371 208.593 216.169 207.63 215.337 206.411C214.517 205.192 214.106 203.779 214.106 202.173H219.25C219.25 204.919 220.891 206.292 224.172 206.292C225.391 206.292 226.343 206.047 227.026 205.557C227.71 205.055 228.052 204.36 228.052 203.472Z" fill="black"/>
<path d="M116.01 154.44C116.01 154.44 108.49 95.93 164.98 94.3C164.98 99.46 164.98 101.89 164.98 101.89C164.98 101.89 119.25 98.0801 124.35 154.44" fill="black"/>
<path d="M164.98 81.51V113.55L180.48 97.53L164.98 81.51Z" fill="black"/>
<path d="M104 51.5H136.04L120.02 36L104 51.5Z" fill="black"/>
<path d="M124.36 49.51H115.68V154.44H124.36V49.51Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,14 @@
<svg width="340" height="462" viewBox="0 0 340 462" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.0224 191.056L79.5081 163.771H32.4523L20.938 191.056H0L54.8568 70.4285H57.79L112.46 191.056H91.0224ZM55.9802 107.953L39.0988 147.725H72.8616L55.9802 107.953Z" fill="black"/>
<path d="M287.983 335.691C287.983 340.124 286.953 344.401 284.894 348.521C282.834 352.642 279.776 356.295 275.72 359.479C271.663 362.663 266.639 365.223 260.617 367.096C254.626 369.001 247.605 369.937 239.616 369.937C234.53 369.937 229.194 369.719 223.64 369.282C218.054 368.844 212.687 368.314 207.507 367.658V251.12C211.938 250.465 216.931 249.934 222.423 249.497C227.946 249.06 233.126 248.841 237.994 248.841C245.795 248.841 252.597 249.715 258.432 251.432C264.268 253.181 269.135 255.491 273.036 258.425C276.936 261.36 279.838 264.669 281.804 268.415C283.77 272.161 284.737 276.032 284.737 280.028C284.737 286.303 283.146 291.704 279.963 296.168C276.78 300.664 271.445 304.316 263.987 307.126C272.755 309.623 278.934 313.338 282.553 318.333C286.173 323.297 287.983 329.072 287.983 335.691ZM263.8 283.4C263.8 278.436 261.958 274.347 258.276 271.131C254.594 267.947 249.04 266.355 241.551 266.355C239.055 266.355 236.59 266.48 234.156 266.667C231.722 266.854 229.475 267.166 227.416 267.479V300.445C230.349 300.757 234.343 300.945 239.429 300.945C243.767 300.945 247.449 300.476 250.538 299.571C253.627 298.666 256.123 297.417 258.089 295.825C260.024 294.264 261.459 292.422 262.395 290.299C263.331 288.208 263.8 285.897 263.8 283.4ZM266.233 333.568C266.233 328.386 264.018 324.046 259.587 320.581C255.156 317.116 248.541 315.399 239.804 315.399C237.65 315.399 235.404 315.43 233.063 315.492C230.723 315.555 228.882 315.68 227.478 315.898V351.612C229.537 351.83 231.753 352.018 234.124 352.174C236.496 352.33 239.086 352.424 241.925 352.424C250.039 352.424 256.123 350.707 260.18 347.241C264.205 343.745 266.233 339.218 266.233 333.568Z" fill="black"/>
<path d="M138.827 369.75C138.827 369.75 115.362 187.091 291.634 182.003C291.634 198.112 291.634 205.698 291.634 205.698C291.634 205.698 148.938 193.803 164.852 369.75" fill="black"/>
<path d="M291.634 142.075V242.098L340 192.086L291.634 142.075Z" fill="black"/>
<path d="M101.351 48.3884H201.329L151.34 0L101.351 48.3884Z" fill="black"/>
<path d="M164.883 42.1759H137.798V369.75H164.883V42.1759Z" fill="black"/>
<path d="M54.3889 445.579C54.3889 447.764 53.9833 449.887 53.1408 451.885C52.3295 453.883 51.1125 455.631 49.5523 457.13C47.9921 458.628 46.0886 459.815 43.8731 460.689C41.6576 461.563 39.1301 462 36.2593 462C33.1077 462 30.0497 461.5 27.0853 460.501C24.1209 459.503 21.4374 458.191 19.0347 456.599L22.2487 448.202C24.433 449.794 26.7733 451.042 29.2384 451.948C31.7035 452.853 34.1375 453.29 36.5402 453.29C37.9756 453.29 39.2237 453.103 40.2847 452.697C41.3456 452.291 42.1881 451.76 42.8746 451.136C43.5611 450.48 44.0604 449.731 44.3724 448.857C44.6844 447.983 44.8717 447.078 44.8717 446.11C44.8717 445.142 44.7469 444.299 44.4972 443.488C44.2476 442.676 43.7483 441.895 42.9994 441.115C42.2505 440.334 41.1896 439.554 39.8478 438.742C38.506 437.931 36.7274 437.088 34.5431 436.182C29.7377 434.122 26.3676 431.843 24.433 429.314C22.4983 426.786 21.4998 423.882 21.4998 420.573C21.4998 418.575 21.9054 416.64 22.6855 414.798C23.4657 412.956 24.6514 411.301 26.2116 409.897C27.7718 408.492 29.6441 407.337 31.8908 406.494C34.1375 405.651 36.6962 405.214 39.5358 405.214C42.2193 405.214 44.8093 405.588 47.2432 406.369C49.6771 407.149 51.7054 408.086 53.2968 409.179L50.3012 417.42C49.5523 416.921 48.741 416.421 47.8673 415.953C46.9935 415.485 46.0574 415.079 45.0901 414.704C44.1228 414.361 43.1554 414.08 42.1569 413.83C41.1896 413.612 40.2223 413.487 39.2861 413.487C36.3842 413.487 34.2623 414.174 32.8893 415.516C31.5163 416.858 30.8298 418.45 30.8298 420.324C30.8298 422.165 31.5787 423.726 33.0453 425.006C34.5119 426.286 36.9458 427.66 40.3471 429.158C43.0306 430.345 45.2773 431.531 47.0872 432.717C48.897 433.903 50.3324 435.121 51.3933 436.432C52.4543 437.743 53.2344 439.117 53.6712 440.584C54.1705 442.145 54.3889 443.768 54.3889 445.579Z" fill="black"/>
<path d="M86.0612 414.704V461.095H76.6999V414.704H59.2568V406.15H103.442V414.704H86.0612Z" fill="black"/>
<path d="M141.105 461.095L129.123 441.302C128.624 441.365 128.155 441.365 127.687 441.365C127.251 441.365 126.751 441.365 126.19 441.365C125.285 441.365 124.38 441.365 123.444 441.333C122.507 441.302 121.603 441.271 120.698 441.209V461.063H111.336V406.681C113.521 406.431 115.799 406.213 118.108 406.057C120.417 405.869 122.976 405.807 125.784 405.807C129.684 405.807 133.023 406.244 135.863 407.149C138.671 408.055 141.012 409.272 142.853 410.833C144.694 412.394 146.067 414.205 146.94 416.296C147.814 418.388 148.251 420.667 148.251 423.102C148.251 426.692 147.315 429.876 145.474 432.624C143.633 435.371 140.98 437.494 137.548 438.992L151.933 461.095H141.105ZM138.422 423.539C138.422 420.729 137.423 418.482 135.426 416.765C133.429 415.048 130.621 414.173 127.032 414.173C125.878 414.173 124.785 414.205 123.724 414.236C122.664 414.298 121.665 414.423 120.729 414.611V433.342C121.571 433.435 122.476 433.529 123.381 433.56C124.286 433.591 125.222 433.622 126.127 433.622C130.215 433.622 133.304 432.717 135.332 430.938C137.361 429.158 138.422 426.692 138.422 423.539Z" fill="black"/>
<path d="M158.704 461.095V406.182H192.186V414.735H168.065V429.127H189.845V437.369H168.065V452.572H192.186V461.126H158.704V461.095Z" fill="black"/>
<path d="M203.201 461.095V406.182H236.683V414.735H212.562V429.127H234.343V437.369H212.562V452.572H236.683V461.126H203.201V461.095Z" fill="black"/>
<path d="M270.384 414.704V461.095H261.023V414.704H243.58V406.15H287.765V414.704H270.384Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,5 @@
<svg width="199" height="63" viewBox="0 0 199 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M101.15 48.5C99.35 48.5 97.6833 48.3833 96.15 48.15C94.65 47.9167 93.0833 47.5167 91.45 46.95C89.6833 46.35 88.3 45.3833 87.3 44.05C86.3 42.6833 85.8 41.0333 85.8 39.1V24.9C85.8 23.3 86.15 21.8667 86.85 20.6C87.5833 19.3333 88.5167 18.3333 89.65 17.6C90.65 16.9667 91.8833 16.4333 93.35 16C94.8167 15.5667 96.1833 15.3 97.45 15.2C98.6167 15.1 99.85 15.05 101.15 15.05C102.683 15.05 104.017 15.1167 105.15 15.25C106.283 15.35 107.55 15.5833 108.95 15.95C110.55 16.4167 111.867 16.9833 112.9 17.65C113.933 18.3167 114.8 19.25 115.5 20.45C116.233 21.6833 116.6 23.1667 116.6 24.9V33.75C116.6 38.6833 115.233 41.5667 112.5 42.4H119.6V48H108.95C108.583 48 107.45 48.0833 105.55 48.25C103.65 48.4167 102.183 48.5 101.15 48.5ZM101.25 42.95C102.35 42.95 103.267 42.9167 104 42.85C104.767 42.75 105.55 42.5833 106.35 42.35C107.15 42.1167 107.75 41.7333 108.15 41.2C108.583 40.6333 108.8 39.9333 108.8 39.1V24.85C108.8 23.3167 108.183 22.2333 106.95 21.6C105.717 20.9333 103.8 20.6 101.2 20.6C98.6 20.6 96.6833 20.9167 95.45 21.55C94.2167 22.1833 93.6 23.2833 93.6 24.85V39.1C93.6 39.9333 93.8167 40.6333 94.25 41.2C94.6833 41.7333 95.3167 42.1167 96.15 42.35C96.95 42.5833 97.7167 42.75 98.45 42.85C99.2167 42.9167 100.15 42.95 101.25 42.95ZM137.462 48.5C128.095 48.5 123.412 45.3667 123.412 39.1V15.55H131.212V39.1C131.212 40.5667 131.678 41.5833 132.612 42.15C133.578 42.6833 135.228 42.95 137.562 42.95C139.862 42.95 141.462 42.6833 142.362 42.15C143.295 41.5833 143.762 40.5667 143.762 39.1V15.55H151.562V39.1C151.562 45.3667 146.862 48.5 137.462 48.5ZM158.473 15.55H166.273V48H158.473V15.55ZM180.768 21.1H170.768V15.55H198.518V21.1H188.568V48H180.768V21.1Z" fill="white"/>
<line x1="5.65685" y1="6.2157" x2="55.8614" y2="56.4203" stroke="white" stroke-width="8" stroke-linecap="round"/>
<line x1="55.9385" y1="6.65685" x2="5.73389" y2="56.8614" stroke="white" stroke-width="8" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,6 @@
<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="250" rx="10" fill="white"/>
<path d="M63.2202 189.27H55.5981V210H50.4712V189.27H42.9517V185.117H63.2202V189.27ZM84.9927 185.117V201.506C84.9927 204.229 84.1382 206.383 82.4292 207.966C80.7316 209.55 78.4074 210.342 75.4565 210.342C72.5513 210.342 70.2441 209.573 68.5352 208.035C66.8262 206.497 65.9546 204.383 65.9204 201.694V185.117H71.0474V201.541C71.0474 203.17 71.4347 204.36 72.2095 205.112C72.9956 205.853 74.078 206.223 75.4565 206.223C78.339 206.223 79.8031 204.708 79.8486 201.677V185.117H84.9927ZM107.927 189.27H100.305V210H95.1782V189.27H87.6587V185.117H107.927V189.27ZM130.828 198.123C130.828 200.572 130.395 202.72 129.529 204.565C128.663 206.411 127.421 207.835 125.803 208.838C124.197 209.84 122.351 210.342 120.266 210.342C118.204 210.342 116.364 209.846 114.746 208.855C113.128 207.864 111.875 206.451 110.986 204.617C110.098 202.771 109.648 200.652 109.636 198.259V197.029C109.636 194.579 110.075 192.426 110.952 190.569C111.841 188.7 113.088 187.271 114.695 186.279C116.313 185.277 118.158 184.775 120.232 184.775C122.306 184.775 124.146 185.277 125.752 186.279C127.37 187.271 128.617 188.7 129.495 190.569C130.383 192.426 130.828 194.574 130.828 197.012V198.123ZM125.632 196.995C125.632 194.386 125.165 192.403 124.231 191.047C123.297 189.692 121.964 189.014 120.232 189.014C118.512 189.014 117.184 189.686 116.25 191.03C115.316 192.363 114.843 194.323 114.832 196.909V198.123C114.832 200.663 115.299 202.634 116.233 204.036C117.167 205.437 118.512 206.138 120.266 206.138C121.986 206.138 123.308 205.465 124.231 204.121C125.154 202.765 125.621 200.794 125.632 198.208V196.995ZM143.765 200.891H139.68V210H134.553V185.117H143.799C146.738 185.117 149.006 185.772 150.601 187.083C152.196 188.393 152.993 190.244 152.993 192.637C152.993 194.334 152.623 195.753 151.882 196.892C151.153 198.02 150.042 198.92 148.55 199.592L153.933 209.761V210H148.43L143.765 200.891ZM139.68 196.738H143.816C145.103 196.738 146.1 196.414 146.807 195.764C147.513 195.103 147.866 194.198 147.866 193.047C147.866 191.873 147.53 190.951 146.858 190.278C146.197 189.606 145.177 189.27 143.799 189.27H139.68V196.738ZM162.358 210H157.231V185.117H162.358V210ZM181.482 204.873H172.493L170.784 210H165.332L174.595 185.117H179.346L188.66 210H183.208L181.482 204.873ZM173.877 200.72H180.098L176.97 191.406L173.877 200.72ZM196.111 205.881H206.997V210H190.984V185.117H196.111V205.881Z" fill="black"/>
<rect x="44.5" y="40.5" width="153" height="95" fill="white" stroke="black" stroke-width="5"/>
<path d="M105.25 69.7465L136 87.5L105.25 105.254L105.25 69.7465Z" fill="black" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,3 @@
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4167 26.8333H17.25V11.5H13.4167V26.8333ZM19.1667 0C8.58667 0 0 8.58667 0 19.1667C0 29.7467 8.58667 38.3333 19.1667 38.3333C29.7467 38.3333 38.3333 29.7467 38.3333 19.1667C38.3333 8.58667 29.7467 0 19.1667 0ZM19.1667 34.5C10.7142 34.5 3.83333 27.6192 3.83333 19.1667C3.83333 10.7142 10.7142 3.83333 19.1667 3.83333C27.6192 3.83333 34.5 10.7142 34.5 19.1667C34.5 27.6192 27.6192 34.5 19.1667 34.5ZM21.0833 26.8333H24.9167V11.5H21.0833V26.8333Z" fill="#F2F2F2"/>
</svg>

After

Width:  |  Height:  |  Size: 576 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 808 B

View File

@ -0,0 +1,3 @@
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3333 27.7917L26.8333 19.1667L15.3333 10.5417V27.7917ZM19.1667 0C8.58667 0 0 8.58667 0 19.1667C0 29.7467 8.58667 38.3333 19.1667 38.3333C29.7467 38.3333 38.3333 29.7467 38.3333 19.1667C38.3333 8.58667 29.7467 0 19.1667 0ZM19.1667 34.5C10.7142 34.5 3.83333 27.6192 3.83333 19.1667C3.83333 10.7142 10.7142 3.83333 19.1667 3.83333C27.6192 3.83333 34.5 10.7142 34.5 19.1667C34.5 27.6192 27.6192 34.5 19.1667 34.5Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 541 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 B

View File

@ -0,0 +1,3 @@
<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7598 3.29687H0V0.759766H17.7598V3.29687Z" fill="#F2F2F2"/>
</svg>

After

Width:  |  Height:  |  Size: 173 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 240 B

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7598 10.1484H10.1484V17.7598H7.61133V10.1484H0V7.61133H7.61133V0H10.1484V7.61133H17.7598V10.1484Z" fill="#F2F2F2"/>
</svg>

After

Width:  |  Height:  |  Size: 232 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 662 B

View File

@ -0,0 +1,12 @@
<svg width="51" height="28" viewBox="0 0 51 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.26956 18.4198L3.00195 15.2263" stroke="white" stroke-width="3"/>
<path d="M43.0356 18.4198L48.3032 15.2263" stroke="white" stroke-width="3"/>
<path d="M36.7146 9.90353L40.9287 4.58105" stroke="white" stroke-width="3"/>
<path d="M11.43 4.58108L15.644 9.90356" stroke="white" stroke-width="3"/>
<path d="M26.1792 6.71022L26.1792 0.323242" stroke="white" stroke-width="3"/>
<mask id="path-6-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.32275 28C9.32275 18.5935 16.8696 10.968 26.1791 10.968C35.4886 10.968 43.0355 18.5935 43.0355 28H9.32275ZM27.0547 16.1679L26.5 15.7981L25.9453 16.1679L21.4453 19.1679L22.5547 20.8321L25.5 18.8685V26H27.5V18.8685L30.4453 20.8321L31.5547 19.1679L27.0547 16.1679Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.32275 28C9.32275 18.5935 16.8696 10.968 26.1791 10.968C35.4886 10.968 43.0355 18.5935 43.0355 28H9.32275ZM27.0547 16.1679L26.5 15.7981L25.9453 16.1679L21.4453 19.1679L22.5547 20.8321L25.5 18.8685V26H27.5V18.8685L30.4453 20.8321L31.5547 19.1679L27.0547 16.1679Z" fill="white"/>
<path d="M0.894579 29.0645H9.32275V26.9355H0.894579V29.0645ZM43.0355 29.0645H50.4101V26.9355H43.0355V29.0645ZM9.32275 28H7.19376V30.1289H9.32275V28ZM43.0355 28V30.1289H45.1645V28H43.0355ZM26.5 15.7981L27.681 14.0267L26.5 13.2394L25.3191 14.0267L26.5 15.7981ZM27.0547 16.1679L28.2357 14.3965V14.3965L27.0547 16.1679ZM25.9453 16.1679L24.7644 14.3965V14.3965L25.9453 16.1679ZM21.4453 19.1679L20.2644 17.3965L18.493 18.5775L19.6739 20.3489L21.4453 19.1679ZM22.5547 20.8321L20.7833 22.013L21.9643 23.7844L23.7357 22.6035L22.5547 20.8321ZM25.5 18.8685H27.629V14.8905L24.3191 17.0971L25.5 18.8685ZM25.5 26H23.3711V28.129H25.5V26ZM27.5 26V28.129H29.629V26H27.5ZM27.5 18.8685L28.681 17.0971L25.3711 14.8905V18.8685H27.5ZM30.4453 20.8321L29.2644 22.6035L31.0358 23.7844L32.2168 22.013L30.4453 20.8321ZM31.5547 19.1679L33.3262 20.3489L34.5071 18.5775L32.7357 17.3965L31.5547 19.1679ZM26.1791 8.83903C15.673 8.83903 7.19376 17.4385 7.19376 28H11.4517C11.4517 19.7484 18.0662 13.097 26.1791 13.097V8.83903ZM45.1645 28C45.1645 17.4385 36.6852 8.83903 26.1791 8.83903V13.097C34.2921 13.097 40.9065 19.7484 40.9065 28H45.1645ZM9.32275 30.1289H43.0355V25.871H9.32275V30.1289ZM25.3191 17.5696L25.8738 17.9394L28.2357 14.3965L27.681 14.0267L25.3191 17.5696ZM27.1263 17.9394L27.681 17.5696L25.3191 14.0267L24.7644 14.3965L27.1263 17.9394ZM22.6263 20.9394L27.1263 17.9394L24.7644 14.3965L20.2644 17.3965L22.6263 20.9394ZM24.3262 19.6511L23.2168 17.987L19.6739 20.3489L20.7833 22.013L24.3262 19.6511ZM24.3191 17.0971L21.3738 19.0606L23.7357 22.6035L26.681 20.6399L24.3191 17.0971ZM27.629 26V18.8685H23.3711V26H27.629ZM27.5 23.871H25.5V28.129H27.5V23.871ZM25.3711 18.8685V26H29.629V18.8685H25.3711ZM31.6263 19.0606L28.681 17.0971L26.3191 20.6399L29.2644 22.6035L31.6263 19.0606ZM29.7833 17.987L28.6739 19.6511L32.2168 22.013L33.3262 20.3489L29.7833 17.987ZM25.8738 17.9394L30.3738 20.9394L32.7357 17.3965L28.2357 14.3965L25.8738 17.9394Z" fill="white" mask="url(#path-6-inside-1)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 510 B

View File

@ -0,0 +1,12 @@
<svg width="49" height="27" viewBox="0 0 49 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.19444 17.654L2.05566 14.5386" stroke="white" stroke-width="3"/>
<path d="M41.1102 17.654L46.249 14.5386" stroke="white" stroke-width="3"/>
<path d="M34.9442 9.34612L39.0552 4.15381" stroke="white" stroke-width="3"/>
<path d="M10.2776 4.15388L14.3887 9.34619" stroke="white" stroke-width="3"/>
<path d="M24.6663 6.23077L24.6663 0" stroke="white" stroke-width="3"/>
<mask id="path-6-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22192 27.0002C8.22192 17.8237 15.5842 10.3848 24.666 10.3848C33.7478 10.3848 41.1101 17.8237 41.1101 27.0002H8.22192ZM25.0546 24.8321L24.4999 25.2019L23.9452 24.8321L19.4452 21.8321L20.5546 20.1679L23.4999 22.1315V15H25.4999V22.1315L28.4452 20.1679L29.5546 21.8321L25.0546 24.8321Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22192 27.0002C8.22192 17.8237 15.5842 10.3848 24.666 10.3848C33.7478 10.3848 41.1101 17.8237 41.1101 27.0002H8.22192ZM25.0546 24.8321L24.4999 25.2019L23.9452 24.8321L19.4452 21.8321L20.5546 20.1679L23.4999 22.1315V15H25.4999V22.1315L28.4452 20.1679L29.5546 21.8321L25.0546 24.8321Z" fill="white"/>
<path d="M-0.000123024 28.0386H8.22192V25.9617H-0.000123024V28.0386ZM41.1101 28.0386H48.3044V25.9617H41.1101V28.0386ZM8.22192 27.0002H6.145V29.0771H8.22192V27.0002ZM41.1101 27.0002V29.0771H43.187V27.0002H41.1101ZM24.4999 25.2019L23.3478 26.93L24.4999 27.698L25.6519 26.93L24.4999 25.2019ZM25.0546 24.8321L26.2066 26.5602L25.0546 24.8321ZM19.4452 21.8321L17.7171 20.68L16.565 22.4081L18.2931 23.5602L19.4452 21.8321ZM20.5546 20.1679L21.7066 18.4398L19.9785 17.2878L18.8265 19.0159L20.5546 20.1679ZM23.4999 22.1315L22.3478 23.8596L25.5768 26.0122V22.1315H23.4999ZM23.4999 15V12.9231H21.423V15H23.4999ZM25.4999 15H27.5768V12.9231H25.4999V15ZM25.4999 22.1315H23.423V26.0122L26.6519 23.8596L25.4999 22.1315ZM28.4452 20.1679L30.1733 19.0159L29.0212 17.2878L27.2931 18.4398L28.4452 20.1679ZM29.5546 21.8321L30.7066 23.5602L32.4347 22.4081L31.2827 20.68L29.5546 21.8321ZM24.666 8.30784C14.4169 8.30784 6.145 16.697 6.145 27.0002H10.2988C10.2988 18.9504 16.7515 12.4617 24.666 12.4617V8.30784ZM43.187 27.0002C43.187 16.697 34.9151 8.30784 24.666 8.30784V12.4617C32.5805 12.4617 39.0332 18.9504 39.0332 27.0002H43.187ZM8.22192 29.0771H41.1101V24.9232H8.22192V29.0771ZM25.6519 26.93L26.2066 26.5602L23.9025 23.1039L23.3478 23.4737L25.6519 26.93ZM22.7931 26.5602L23.3478 26.93L25.6519 23.4737L25.0972 23.1039L22.7931 26.5602ZM18.2931 23.5602L22.7931 26.5602L25.0972 23.1039L20.5972 20.1039L18.2931 23.5602ZM18.8265 19.0159L17.7171 20.68L21.1733 22.9841L22.2827 21.32L18.8265 19.0159ZM24.6519 20.4034L21.7066 18.4398L19.4025 21.8961L22.3478 23.8596L24.6519 20.4034ZM21.423 15V22.1315H25.5768V15H21.423ZM25.4999 12.9231H23.4999V17.0769H25.4999V12.9231ZM27.5768 22.1315V15H23.423V22.1315H27.5768ZM27.2931 18.4398L24.3478 20.4034L26.6519 23.8596L29.5972 21.8961L27.2931 18.4398ZM31.2827 20.68L30.1733 19.0159L26.7171 21.32L27.8265 22.9841L31.2827 20.68ZM26.2066 26.5602L30.7066 23.5602L28.4025 20.1039L23.9025 23.1039L26.2066 26.5602Z" fill="white" mask="url(#path-6-inside-1)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -111,9 +111,9 @@ pub fn challenges_picker(ctx: &EventCtx) -> Box<dyn State> {
col.push(ManagedWidget::Row(
LayoutStyle::Neutral,
vec![
ManagedWidget::img_button_no_bg(
ManagedWidget::svg_button(
ctx,
"assets/pregame/back.png",
"assets/pregame/back.svg",
"back",
hotkey(Key::Escape),
Box::new(|_, _| Some(Transition::Pop)),

View File

@ -54,23 +54,13 @@ impl ManagedWidget {
}
pub fn svg_button(
ctx: &EventCtx,
filename: &str,
hotkey: Option<MultiKey>,
onclick: Callback,
) -> ManagedWidget {
let btn = Button::rectangle_svg(filename, hotkey, ctx);
ManagedWidget::Btn(btn, onclick)
}
pub fn img_button_no_bg(
ctx: &EventCtx,
filename: &str,
tooltip: &str,
hotkey: Option<MultiKey>,
onclick: Callback,
) -> ManagedWidget {
let btn = Button::rectangle_img_no_bg(filename, tooltip, hotkey, ctx);
let btn = Button::rectangle_svg(filename, tooltip, hotkey, ctx);
ManagedWidget::Btn(btn, onclick)
}

View File

@ -75,9 +75,9 @@ pub fn main_menu(ctx: &EventCtx, ui: &UI) -> Box<dyn State> {
col.push(ManagedWidget::Row(
LayoutStyle::Neutral,
vec![
ManagedWidget::img_button_no_bg(
ManagedWidget::svg_button(
ctx,
"assets/pregame/quit.png",
"assets/pregame/quit.svg",
"quit",
hotkey(Key::Escape),
Box::new(|_, _| {
@ -101,15 +101,17 @@ pub fn main_menu(ctx: &EventCtx, ui: &UI) -> Box<dyn State> {
col.push(ManagedWidget::Row(
LayoutStyle::Centered,
vec![
ManagedWidget::img_button(
ManagedWidget::svg_button(
ctx,
"assets/pregame/tutorial.png",
"assets/pregame/tutorial.svg",
"Tutorial",
hotkey(Key::T),
Box::new(|ctx, _| Some(Transition::Push(Box::new(TutorialMode::new(ctx))))),
),
ManagedWidget::svg_button(
ctx,
"assets/pregame/sandbox.svg",
"Sandbox mode",
hotkey(Key::S),
Box::new(|ctx, ui| {
Some(Transition::Push(Box::new(SandboxMode::new(
@ -158,9 +160,9 @@ pub fn main_menu(ctx: &EventCtx, ui: &UI) -> Box<dyn State> {
fn about(ctx: &EventCtx) -> Box<dyn State> {
let mut row = Vec::new();
row.push(ManagedWidget::img_button_no_bg(
row.push(ManagedWidget::svg_button(
ctx,
"assets/pregame/back.png",
"assets/pregame/back.svg",
"back",
hotkey(Key::Escape),
Box::new(|_, _| Some(Transition::Pop)),

View File

@ -62,14 +62,12 @@ impl SpeedControls {
Text::from(Line("00:00").size(12).roboto()).no_bg(),
ScreenPt::new(25.0, 97.0),
));
let (sunrise_color, sunrise_rect) = ctx.canvas.texture_rect("assets/speed/sunrise.png");
batch.push(sunrise_color, sunrise_rect.translate(94.0, 94.0));
batch.add_svg("assets/speed/sunrise.svg", 94.0, 94.0);
txt.push((
Text::from(Line("12:00").size(12).roboto()).no_bg(),
ScreenPt::new(153.0, 97.0),
));
let (sunset_color, sunset_rect) = ctx.canvas.texture_rect("assets/speed/sunset.png");
batch.push(sunset_color, sunset_rect.translate(220.0, 94.0));
batch.add_svg("assets/speed/sunset.svg", 220.0, 94.0);
txt.push((
Text::from(Line("24:00").size(12).roboto()).no_bg(),
ScreenPt::new(280.0, 97.0),
@ -94,15 +92,11 @@ impl SpeedControls {
};
// Row 1
let resume_btn = Button::rectangle_img_no_bg(
"assets/speed/resume.png",
"resume",
hotkey(Key::Space),
ctx,
)
.at(ScreenPt::new(23.0, 14.0));
let resume_btn =
Button::rectangle_svg("assets/speed/resume.svg", "resume", hotkey(Key::Space), ctx)
.at(ScreenPt::new(23.0, 14.0));
let pause_btn =
Button::rectangle_img_no_bg("assets/speed/pause.png", "pause", hotkey(Key::Space), ctx)
Button::rectangle_svg("assets/speed/pause.svg", "pause", hotkey(Key::Space), ctx)
.at(ScreenPt::new(23.0, 14.0));
let jump_to_time_btn = Button::rectangle_img_no_bg(
@ -140,15 +134,15 @@ impl SpeedControls {
speed_slider.set_percent(ctx, (speed_cap / 1.0).powf(-1.0 / std::f64::consts::E));
speed_slider.set_pos(ScreenPt::new(92.0, 134.0));
let slow_down_btn = Button::rectangle_img_no_bg(
"assets/speed/slow_down.png",
let slow_down_btn = Button::rectangle_svg(
"assets/speed/slow_down.svg",
"slow down",
hotkey(Key::LeftBracket),
ctx,
)
.at(ScreenPt::new(245.0, 129.0));
let speed_up_btn = Button::rectangle_img_no_bg(
"assets/speed/speed_up.png",
let speed_up_btn = Button::rectangle_svg(
"assets/speed/speed_up.svg",
"speed up",
hotkey(Key::RightBracket),
ctx,

View File

@ -26,20 +26,11 @@ impl UI {
let primary = ctx.loading_screen("load map", |ctx, mut timer| {
ctx.set_textures(
vec![
("assets/pregame/back.png", TextureType::Stretch),
("assets/pregame/challenges.png", TextureType::Stretch),
("assets/pregame/quit.png", TextureType::Stretch),
("assets/pregame/tutorial.png", TextureType::Stretch),
("assets/pregame/logo.png", TextureType::Stretch),
("assets/speed/jump_to_time.png", TextureType::Stretch),
("assets/speed/large_step.png", TextureType::Stretch),
("assets/speed/pause.png", TextureType::Stretch),
("assets/speed/resume.png", TextureType::Stretch),
("assets/speed/slow_down.png", TextureType::Stretch),
("assets/speed/small_step.png", TextureType::Stretch),
("assets/speed/speed_up.png", TextureType::Stretch),
("assets/speed/sunrise.png", TextureType::Stretch),
("assets/speed/sunset.png", TextureType::Stretch),
("assets/ui/edit_bike.png", TextureType::Stretch),
("assets/ui/edit_bus.png", TextureType::Stretch),
("assets/ui/edit_construction.png", TextureType::Stretch),