|
|
|
|
@ -4,30 +4,63 @@
|
|
|
|
|
<defs>
|
|
|
|
|
<style type="text/css"><![CDATA[@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');]]></style>
|
|
|
|
|
</defs>
|
|
|
|
|
{% for (key, (x, y)) in positions %}
|
|
|
|
|
{% let width = box_size * key.width_mod() %}
|
|
|
|
|
<g x="{{ x }}" y="{{ y }}" transform="translate({{ x.to_user_units() }},{{ y.to_user_units() }})" width="{{ width }}" height="{{ box_size }}">
|
|
|
|
|
<rect width="{{ width }}" height="{{ box_size }}" fill="none" stroke="#cccccc" stroke-width="1pt" rx="2mm" />
|
|
|
|
|
{% let u = crate::svg::SVGMeasure::new(14.0, crate::svg::SVGUnit::Millimeter) %}
|
|
|
|
|
{% let padding = crate::svg::SVGMeasure::new(2.5, crate::svg::SVGUnit::Millimeter) %}
|
|
|
|
|
{% let dy = "0.125em" %}
|
|
|
|
|
{% match key %}
|
|
|
|
|
{% when crate::key::Key::Oyayubi with { latin, normal, shift, alt_shift } %}
|
|
|
|
|
{% let font_size = "0.45cm" %}
|
|
|
|
|
{% let latin_font_size = "0.4cm" %}
|
|
|
|
|
{% let alt_shift_font_size = "0.325cm" %}
|
|
|
|
|
<text x="{{ width * 0.25 }}" y="{{ box_size * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ latin_font_size }}" dy="{{ dy }}">{{ latin }}</text>
|
|
|
|
|
<text x="{{ width * 0.75 }}" y="{{ box_size * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ font_size }}" dy="{{ dy }}">{{ shift }}</text>
|
|
|
|
|
<text x="{{ width * 0.75 }}" y="{{ box_size * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ font_size }}" dy="{{ dy }}">{{ normal }}</text>
|
|
|
|
|
{% if let Some(alt_shift) = alt_shift %}
|
|
|
|
|
<text x="{{ width / 2.0 }}" y="{{ box_size / 2.0 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ alt_shift_font_size }}" dy="{{ dy }}">{{ alt_shift }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% when crate::key::Key::Single with { text, u } %}
|
|
|
|
|
{% let font_size = "0.5cm" %}
|
|
|
|
|
<text x="{{ width * 0.5 }}" y="{{ box_size * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ font_size }}" dy="{{ dy }}">{{ text }}</text>
|
|
|
|
|
{% when crate::key::Key::Icon with { icon_path, u } %}
|
|
|
|
|
{% let icon_width_mm = 7.5 %}
|
|
|
|
|
<image x="{{ width.measure * 0.5 - icon_width_mm * 0.5 }}mm" y="{{ box_size.measure * 0.5 - icon_width_mm * 0.5 }}mm" href="{{ icon_path }}" width="{{ icon_width_mm }}mm" height="{{ icon_width_mm }}mm" />
|
|
|
|
|
{% when crate::key::Key::Break %}
|
|
|
|
|
{% endmatch %}
|
|
|
|
|
{% for key in keyboard.keys %}
|
|
|
|
|
{% let x = u * key.x + padding * key.x + dimensions.margin %}
|
|
|
|
|
{% let y = u * key.y + padding * key.y + dimensions.margin %}
|
|
|
|
|
{% let width = u * key.width %}
|
|
|
|
|
{% let height = u * key.height %}
|
|
|
|
|
<g x="{{ x }}" y="{{ y }}" transform="translate({{ x.to_user_units() }},{{ y.to_user_units() }})" width="{{ width }}" height="{{ height }}">
|
|
|
|
|
<rect width="{{ width }}" height="{{ height }}" fill="none" stroke="#cccccc" stroke-width="1pt" rx="2mm" />
|
|
|
|
|
|
|
|
|
|
{# top-left #}
|
|
|
|
|
{% if let Some(legend) = key.legends[0] %}
|
|
|
|
|
<text x="{{ width * 0.25 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# top-center #}
|
|
|
|
|
{% if let Some(legend) = key.legends[1] %}
|
|
|
|
|
<text x="{{ width * 0.5 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# top-right #}
|
|
|
|
|
{% if let Some(legend) = key.legends[2] %}
|
|
|
|
|
<text x="{{ width * 0.75 }}" y="{{ height * 0.25 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# middle-left #}
|
|
|
|
|
{% if let Some(legend) = key.legends[3] %}
|
|
|
|
|
<text x="{{ width * 0.25 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# middle-center #}
|
|
|
|
|
{% if let Some(legend) = key.legends[4] %}
|
|
|
|
|
<text x="{{ width * 0.5 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# middle-right #}
|
|
|
|
|
{% if let Some(legend) = key.legends[5] %}
|
|
|
|
|
<text x="{{ width * 0.75 }}" y="{{ height * 0.5 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# bottom-left #}
|
|
|
|
|
{% if let Some(legend) = key.legends[6] %}
|
|
|
|
|
<text x="{{ width * 0.25 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# bottom-center #}
|
|
|
|
|
{% if let Some(legend) = key.legends[7] %}
|
|
|
|
|
<text x="{{ width * 0.55 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# bottom-right #}
|
|
|
|
|
{% if let Some(legend) = key.legends[8] %}
|
|
|
|
|
<text x="{{ width * 0.75 }}" y="{{ height * 0.75 }}" dominant-baseline="middle" text-anchor="middle" style="font-family: 'M PLUS Rounded 1c'" font-size="{{ crate::kle_font_units(legend.size) }}" dy="{{ dy }}">{{ legend.text }}</text>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
{# TODO 9-11 are side #}
|
|
|
|
|
</g>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</svg>
|
|
|
|
|
|
