riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 55 Pull requests Projects 1 Activity

add zoom indicator in lower left corner (#39)

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

21
static/index.js
View file

@ -19,6 +19,7 @@ let reticleRenderer = main.querySelector("rkgk-reticle-renderer");
let brushEditor = main.querySelector("rkgk-brush-editor");
let brushPreview = main.querySelector("rkgk-brush-preview");
let brushCostGauges = main.querySelector("rkgk-brush-cost-gauges");
let zoomIndicator = main.querySelector("rkgk-zoom-indicator");
let welcome = main.querySelector("rkgk-welcome");
let connectionStatus = main.querySelector("rkgk-connection-status");
@ -62,6 +63,8 @@ function readUrl(urlString) {
// In the background, connect to the server.
(async () => {
// Initialization
console.info("checking for user registration status");
if (!isUserLoggedIn()) {
await welcome.show({
@ -79,6 +82,7 @@ function readUrl(urlString) {
canvasRenderer.viewport.panX = urlData.viewport.x;
canvasRenderer.viewport.panY = urlData.viewport.y;
canvasRenderer.viewport.zoomLevel = urlData.viewport.zoom;
zoomIndicator.setZoom(canvasRenderer.viewport.zoom);
let session = await newSession({
userId: getUserId(),
@ -124,6 +128,7 @@ function readUrl(urlString) {
canvasRenderer.viewport.panX = newUrlData.viewport.x;
canvasRenderer.viewport.panY = newUrlData.viewport.y;
canvasRenderer.viewport.zoomLevel = newUrlData.viewport.zoom;
zoomIndicator.setZoom(canvasRenderer.viewport.zoom);
canvasRenderer.sendViewportUpdate();
}
});
@ -140,6 +145,8 @@ function readUrl(urlString) {
let currentUser = wall.onlineUsers.getUser(session.sessionId);
// Event loop
session.addEventListener("error", (event) => console.error(event));
session.addEventListener("wallEvent", (event) => {
@ -248,6 +255,8 @@ function readUrl(urlString) {
updateUrl(session, canvasRenderer.viewport),
);
// Brush editor
function compileBrush() {
let compileResult = currentUser.setBrush(brushEditor.code);
brushEditor.renderHakuResult("Compilation", compileResult);
@ -279,5 +288,17 @@ function readUrl(urlString) {
});
});
// Zoom indicator
canvasRenderer.addEventListener(".viewportUpdate", () => {
zoomIndicator.setZoom(canvasRenderer.viewport.zoom);
});
zoomIndicator.addEventListener(".zoomUpdate", (event) => {
canvasRenderer.viewport.zoomLevel += event.delta;
canvasRenderer.sendViewportUpdate();
});
// All done.
session.eventLoop();
})();