add zoom indicator in lower left corner (#39)

it looks like this:

  - 3200% +

I'm giving up on the 100% zoom button from the original idea, because rkgk's scaling curve makes it easy to go back to 100% if you need to.
This commit is contained in:
りき萌 2025-05-26 20:19:41 +02:00
parent 9f62582ef5
commit 6b82593414
7 changed files with 127 additions and 6 deletions

View file

@ -18,7 +18,7 @@
const HAKU_WASM_PATH = "{{{ static 'wasm/haku.wasm' }}}";
</script>
<script type="module">
<script type="module" async>
import "rkgk/live-reload.js";
import "rkgk/brush-cost.js";
@ -33,6 +33,7 @@
import "rkgk/throbber.js";
import "rkgk/viewport.js";
import "rkgk/welcome.js";
import "rkgk/zoom-indicator.js";
import "rkgk/index.js";
</script>
@ -56,10 +57,14 @@
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
<div class="panels fullscreen" id="panels-overlay">
<div class="rkgk-panel menu-bar">
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
<hr>
<a href="/docs/rkgk.html">Manual</a>
<div class="left">
<div class="rkgk-panel menu-bar">
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
<hr>
<a href="/docs/rkgk.html">Manual</a>
</div>
<rkgk-zoom-indicator class="rkgk-panel"></rkgk-zoom-indicator>
</div>
<div class="right">