diff --git a/js/gl/shaderPreview.js b/js/gl/shaderPreview.js index 1281ae1..541616f 100644 --- 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); + } } \ No newline at end of file diff --git a/js/sdfMaker.js b/js/sdfMaker.js index a43175f..ab3878b 100644 --- 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);