Add zoom support

docs/xsystem35.html

@@ -26,8 +26,16 @@
       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
 
       <div>
-        <label for="smoothing">
-          <input type="checkbox" id="smoothing" checked onclick="document.getElementById('canvas').classList.toggle('pixelated')">Smoothing
+        <select id="zoom" class="form-select">
+          <option value="1">100%</option>
+          <option value="1.25">125%</option>
+          <option value="1.5">150%</option>
+          <option value="2">200%</option>
+          <option value="3">300%</option>
+          <option value="fit">自動</option>
+        </select>
+        <label for="smoothing" class="form-checkbox">
+          <input type="checkbox" id="smoothing" checked><i class="form-icon"></i>Smoothing
         </label>
       </div>
     </div>

src/sdl_mode.c

@@ -25,6 +25,9 @@
 #include <stdio.h>
 #include <limits.h>
 #include <SDL.h>
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
 
 #include "portab.h"
 #include "system.h"
@@ -64,4 +67,7 @@ void sdl_setWindowSize(int x, int y, int w, int h) {
 									SDL_TEXTUREACCESS_STATIC, w, h);
 
 	//ms_active = (SDL_GetAppState() & SDL_APPMOUSEFOCUS) ? TRUE : FALSE;
+#ifdef __EMSCRIPTEN__
+	EM_ASM( xsystem35.shell.windowSizeChanged(); );
+#endif
 }

web/shell/shell.ts

@@ -28,6 +28,7 @@ namespace xsystem35 {
 class System35Shell {
     private imageLoader: ImageLoader;
     status: HTMLElement = document.getElementById('status');
+    private zoom:ZoomManager;
 
     constructor() {
         this.imageLoader = new ImageLoader(this);
@@ -56,6 +57,7 @@ class System35Shell {
             }
         ];
         xsystem35.cdPlayer = new CDPlayer(this.imageLoader);
+        this.zoom = new ZoomManager();
     }
 
     setStatus(text: string) {
@@ -63,6 +65,10 @@ class System35Shell {
         this.status.innerHTML = text;
     }
 
+    windowSizeChanged() {
+        this.zoom.handleZoom();
+    }
+
     private fsyncTimer: number;
     syncfs(fname: string) {
         window.clearTimeout(this.fsyncTimer);
@@ -116,4 +122,45 @@ class CDPlayer {
     }
 }
 
+class ZoomManager {
+    private canvas: HTMLCanvasElement;
+    private zoomSelect: HTMLInputElement;
+    private smoothingCheckbox: HTMLInputElement;
+
+    constructor() {
+        this.canvas = <HTMLCanvasElement>$('#canvas');
+        this.zoomSelect = <HTMLInputElement>$('#zoom');
+        this.zoomSelect.addEventListener('change', this.handleZoom.bind(this));
+        this.zoomSelect.value = localStorage.getItem('zoom');
+        this.smoothingCheckbox = <HTMLInputElement>$('#smoothing');
+        this.smoothingCheckbox.addEventListener('change', this.handleSmoothing.bind(this));
+        if (localStorage.getItem('smoothing') == 'false') {
+            this.smoothingCheckbox.checked = false;
+            this.handleSmoothing();
+        }
+    }
+
+    handleZoom() {
+        var value = this.zoomSelect.value;
+        localStorage.setItem('zoom', value);
+        var contentsStyle = $('.contents').style;
+        if (value == 'fit') {
+            contentsStyle.maxWidth = 'none';
+            contentsStyle.width = this.canvas.style.width = '100%';
+        } else {
+            var ratio = Number(value);
+            contentsStyle.maxWidth = 'none';
+            contentsStyle.width = this.canvas.style.width = this.canvas.width * ratio + 'px';
+        }
+    }
+
+    private handleSmoothing() {
+        localStorage.setItem('smoothing', String(this.smoothingCheckbox.checked));
+        if (this.smoothingCheckbox.checked)
+            this.canvas.classList.remove('pixelated');
+        else
+            this.canvas.classList.add('pixelated');
+    }
+}
+
 xsystem35.shell = new System35Shell();