From 13944b526f302b5e8d82885dd236d922dfd13b6b Mon Sep 17 00:00:00 2001 From: Orangerot Date: Mon, 13 Jan 2025 09:37:14 +0100 Subject: [PATCH] style: added documentation with JSDoc and html comments --- index.html | 10 ++++++++- main.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 2 +- 3 files changed, 70 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 613dcb7..e72d6fc 100644 --- a/index.html +++ b/index.html @@ -13,11 +13,16 @@ Imagine - Image Editor +
+
@@ -43,7 +48,8 @@
-

+
+ Settings @@ -56,6 +62,7 @@
+
+
diff --git a/main.js b/main.js index 0fde283..4c88716 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,15 @@ let canvas; let video; let ctx; +/* + * theses settings correspond to a css-filter. you can specify an optional + * filter attribute to modify the value from the input element. + */ let settings = { "brightness": {}, "saturate": {}, "contrast": {}, - "hue-rotate": {filter: value => value + "deg"}, + "hue-rotate": { filter: value => value + "deg" }, "grayscale": {}, "sepia": {}, "invert": {}, @@ -111,6 +115,11 @@ document.addEventListener("DOMContentLoaded", function() { } }); +/** + * Reset all inputs of a setting back to the default value + * + * @param {string} setting - key of the settings object to reset + */ function reset_all(setting) { console.log("reseting " + setting); for (let element of settings[setting].elements) { @@ -119,6 +128,10 @@ function reset_all(setting) { draw(true); } +/** + * Request camera access and on succhess, show camera feed on video-element and + * switch to camera-active view + */ function use_camera() { navigator.mediaDevices .getUserMedia({ video: true, audio: false }) @@ -132,6 +145,10 @@ function use_camera() { }); } +/** + * Take a still frame of the video-element showing the camera-feed and load it + * to the img to be rendered by canvas and switch to editor-active view + */ function take_picture() { canvas.width = video.width; canvas.height = video.height; @@ -142,6 +159,10 @@ function take_picture() { document.body.className = "editor-active"; } +/** + * Load selected file by input element to img to be rendered by canvas and + * switch to editor-active view + */ function upload_image() { document.body.className = "editor-active"; @@ -151,7 +172,14 @@ function upload_image() { img.onload = () => draw(true); } -// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +/** + * Get file that is dropped into the website and load it to img to be rendered + * by canvas and switch to editor-active view. + * + * @param {DragEvent} ev -supplier by event listener + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop + */ function drop_handler(ev) { ev.preventDefault(); let file; @@ -170,6 +198,12 @@ function drop_handler(ev) { img.onload = () => draw(true); } +/** + * Creates a download of the edited image in full resolution by creating a link + * and virtually clicking it. + * + * @param {PointerEvent} event - supplied by event listener + */ function save_image(event) { event.preventDefault(); draw(false); @@ -182,6 +216,11 @@ function save_image(event) { link.click(); } +/** + * Uses the navigator.share API to share the edited image in full reslution. + * + * @param {PointerEvent} event - supplied by event listener + */ function share_image(event) { event.preventDefault(); if (!navigator.share) { @@ -201,6 +240,11 @@ function share_image(event) { }, 'image/png'); } +/** + * Set all inputs of a setting to the value of the input that changed it. + * + * @param {Event} event - supplied by event listener + */ function settings_apply(event) { const changed_setting = event.target.id; const new_value = event.target.value; @@ -214,7 +258,13 @@ function settings_apply(event) { draw(true); } -// https://www.shadertoy.com/view/ldSXWK +/** + * Render a lensflare shader for every pixel on the canvas. + * + * @param {number} pos_x - x position of the lensflare in the range [-0.5,0.5] + * @param {number} pos_y - y position of the lensflare in the range [-0.5,0.5] + * https://www.shadertoy.com/view/ldSXWK + */ function lensflare(pos_x, pos_y) { const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); const pixel_count = imgdata.data.length / 4; @@ -276,6 +326,13 @@ function lensflare(pos_x, pos_y) { ctx.putImageData(imgdata, 0, 0); } +/** + * Amply filters and lensflare to the optionally scaled image, to only + * calculate on pixels the user can see. + * + * @param {bool} viewport_scale - render image scaled to viewport or in full + * resolution + */ function draw(viewport_scale) { const filter = Object.entries(settings) .map(([setting, { elements, filter }]) => `${setting}(${filter(elements[0].value)})`) diff --git a/style.css b/style.css index 85a8268..4798e74 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -html, body { +body { margin: 0px; scroll-behavior: smooth; padding-top: 100dvh;