Implemented preview zoom

jobtalle · May 30, 2023 · 00aa914 · 00aa914
1 parent 18470f9
commit 00aa914
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/js/gl/shaderPreview.js b/js/gl/shaderPreview.js
@@ -7,6 +7,7 @@ export class ShaderPreview extends Shader {
         uniform float radius;
         uniform vec2 center;
         uniform float aspect;
+        uniform float zoom;
         uniform sampler2D source;
         
         in vec2 vUv;
@@ -22,7 +23,7 @@ export class ShaderPreview extends Shader {
             if (dot(delta, delta) > radius * radius)
                 discard;
             
-            vec4 pixel = texture(source, uv);
+            vec4 pixel = texture(source, center + (uv - center) / zoom);
             
             color = vec4(
                 mix(
@@ -36,6 +37,7 @@ export class ShaderPreview extends Shader {
     #uniformRadius;
     #uniformCenter;
     #uniformAspect;
+    #uniformZoom;
 
     constructor() {
         super(ShaderPreview.#SHADER_FRAMGENT);
@@ -45,6 +47,7 @@ export class ShaderPreview extends Shader {
         this.#uniformRadius = this.uniformLocation("radius");
         this.#uniformCenter = this.uniformLocation("center");
         this.#uniformAspect = this.uniformLocation("aspect");
+        this.#uniformZoom = this.uniformLocation("zoom")
     }
 
     setRadius(radius) {
@@ -58,4 +61,8 @@ export class ShaderPreview extends Shader {
     setAspect(aspect) {
         gl.uniform1f(this.#uniformAspect, aspect);
     }
+
+    setZoom(zoom) {
+        gl.uniform1f(this.#uniformZoom, zoom);
+    }
 }
diff --git a/js/sdfMaker.js b/js/sdfMaker.js
@@ -8,6 +8,7 @@ export class SDFMaker {
     static #INPUT_TARGET_HOVER = "hover";
     static #SIZE = Number.parseInt(getComputedStyle(document.body).getPropertyValue("--size"));
     static #PREVIEW_RADIUS = SDFMaker.#SIZE * .2;
+    static #PREVIEW_ZOOM = 2;
     static #SVG_UPSCALE = 2048;
 
     #inputTarget;
@@ -31,6 +32,7 @@ export class SDFMaker {
     #previewX = -1;
     #previewY = -1;
     #previewVisible = false;
+    #previewZoom = false;
 
     #input = gl.createTexture();
     #jfa = new JFA(this.#input);
@@ -167,6 +169,16 @@ export class SDFMaker {
                 this.#updated = true;
         });
 
+        inputTarget.addEventListener("mousedown", () => {
+            this.#previewZoom = true;
+            this.#updated = true;
+        });
+
+        window.addEventListener("mouseup", () => {
+            this.#previewZoom = false;
+            this.#updated = true;
+        });
+
         this.#render();
     }
 
@@ -311,6 +323,7 @@ export class SDFMaker {
             if (this.#previewVisible) {
                 this.#shaderPreview.use();
                 this.#shaderPreview.setCenter(this.#previewX / SDFMaker.#SIZE, this.#previewY / SDFMaker.#SIZE);
+                this.#shaderPreview.setZoom(this.#previewZoom ? SDFMaker.#PREVIEW_ZOOM : 1);
 
                 gl.activeTexture(gl.TEXTURE0);
                 gl.bindTexture(gl.TEXTURE_2D, this.#composite.texture);