Merge branch 'main' of https://github.com/felixroos/nudelsalat

pastagang · Jan 18, 2025 · 1bd2f09 · 1bd2f09
2 parents 933e007 + 40ffafa
commit 1bd2f09
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/shader.html b/shader.html
@@ -3,9 +3,23 @@
   <body style="margin: 0">
     <style>
       #canvas {
+        position: fixed;
+        pointer-events: none;
+        image-rendering: pixelated;
+      }
+
+      .canvas-small {
+        top: 60px;
+        left: 23px;
+        width: 400px;
+        height: 300px;
+      }
+
+      .canvas-fullscreen {
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        image-rendering: pixelated;
       }
     </style>
     <script>

diff --git a/src/main.js b/src/main.js
@@ -2,7 +2,7 @@ import { Session } from '@flok-editor/session';
 import { nudelAlert } from './alert.js';
 import { applySettingsToNudel, getSettings } from './settings.js';
 import { PastaMirror } from './editor.js';
-import { clearInlineErrors } from './error.js';
+import { clearInlineErrors, displayInlineErrors } from './error.js';
 import './style.css';
 
 export const pastamirror = new PastaMirror();

diff --git a/src/shader.js b/src/shader.js
@@ -169,22 +169,14 @@ function updateUniforms(gl, now, elapsed, uniforms) {
 
 // Make the canvas small
 function smallCanvas(canvas) {
-  const width = 400;
-  const height = 300;
-  canvas.width = width;
-  canvas.height = height;
-  const top = 60;
-  canvas.style = `pointer-events:none;width:${width}px;height:${height}px;position:fixed;top:${top}px;left:23px`;
+  canvas.classList.remove('canvas-fullscreen');
+  canvas.classList.add('canvas-small');
 }
 
 // Make the canvas fullscreen
 function fullscreenCanvas(canvas) {
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-  canvas.style.width = '100%';
-  canvas.style.height = '100%';
-  canvas.style.top = '0';
-  canvas.style.left = '0';
+  canvas.classList.remove('canvas-small');
+  canvas.classList.add('canvas-fullscreen');
 }
 
 function createProgram(gl, vertex, fragment) {
@@ -238,9 +230,6 @@ function initializeShaderInstance(gl, code) {
     const now = performance.now() / 1000;
     const elapsed = instance.age == 0 ? 1 / 60 : now - prev;
     prev = now;
-    // console.log('drawing!');
-
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
     // Clear the canvas
     gl.clearColor(0, 0, 0, 0);
@@ -293,7 +282,12 @@ export class ShaderSession {
     this.instance = null;
   }
   resize() {
-    console.log('Not Implemented shader resize');
+    const w = this.canvas.clientWidth;
+    const h = this.canvas.clientHeight;
+    this.gl.canvas.width = w;
+    this.gl.canvas.height = h;
+    this.gl.viewport(0, 0, w, h);
+    this.instance.update();
   }
   async eval(msg) {
     const code = mkFragmentShader(msg.body);
@@ -306,8 +300,10 @@ export class ShaderSession {
       this.uniforms = this.instance.uniforms;
       if (code.indexOf('// size: fullscreen') > -1) {
         fullscreenCanvas(this.canvas);
+        this.instance.update();
       } else if (code.indexOf('// size: small') > -1) {
         smallCanvas(this.canvas);
+        this.instance.update();
       }
       console.log('Shader updated!');
     } catch (err) {