Implement professional-grade Gaussian-approximated blur effect with resolution independence and configurable quality for image effector system (#16571)

* Initial plan

* Implement blur effect for image effector system

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Improve blur quality with configurable sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Revert to simpler blur implementation with configurable sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Fix blur size independence from sample count

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Make blur radius resolution-independent

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Update blur.ts

* Enhance blur quality with explicit diagonal sampling and fix parameter configuration

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Implement Gaussian-approximated blur with distance-based weighting for superior quality

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

* Revert "Implement Gaussian-approximated blur with distance-based weighting for superior quality"

This reverts commit c739e9f55b64e8869f52dc2641ae6e972892dc7e.

* Revert "Enhance blur quality with explicit diagonal sampling and fix parameter configuration"

This reverts commit ffbc6eeba70dc9a3448dcb133d56b9fb776fc636.

* wip

* tweak

* ellipse

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 46 insertions, 17 deletions

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 465100ef20..96fb01bb8c 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.previewContainer">
 					<div class="_acrylic" :class="$style.previewTitle">{{ i18n.ts.preview }}</div>
 					<div class="_acrylic" :class="$style.editControls">
-						<button class="_button" :class="[$style.previewControlsButton, fillSquare ? $style.active : null]" @click="fillSquare = true"><i class="ti ti-pencil"></i></button>
+						<button class="_button" :class="[$style.previewControlsButton, penMode != null ? $style.active : null]" @click="showPenMenu"><i class="ti ti-pencil"></i></button>
 					</div>
 					<div class="_acrylic" :class="$style.previewControls">
 						<button class="_button" :class="[$style.previewControlsButton, !enabled ? $style.active : null]" @click="enabled = false">Before</button>
@@ -216,10 +216,24 @@ watch(enabled, () => {
 	}
 });
 
-const fillSquare = ref(false);
+const penMode = ref<'fill' | 'blur' | null>(null);
+
+function showPenMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts._imageEffector._fxs.fill,
+		action: () => {
+			penMode.value = 'fill';
+		},
+	}, {
+		text: i18n.ts._imageEffector._fxs.blur,
+		action: () => {
+			penMode.value = 'blur';
+		},
+	}], ev.currentTarget ?? ev.target);
+}
 
 function onImagePointerdown(ev: PointerEvent) {
-	if (canvasEl.value == null || imageBitmap == null || !fillSquare.value) return;
+	if (canvasEl.value == null || imageBitmap == null || penMode.value == null) return;
 
 	const AW = canvasEl.value.clientWidth;
 	const AH = canvasEl.value.clientHeight;
@@ -250,19 +264,34 @@ function onImagePointerdown(ev: PointerEvent) {
 	}
 
 	const id = genId();
-	layers.push({
-		id,
-		fxId: 'fillSquare',
-		params: {
-			offsetX: 0,
-			offsetY: 0,
-			scaleX: 0.1,
-			scaleY: 0.1,
-			angle: 0,
-			opacity: 1,
-			color: [1, 1, 1],
-		},
-	});
+	if (penMode.value === 'fill') {
+		layers.push({
+			id,
+			fxId: 'fill',
+			params: {
+				offsetX: 0,
+				offsetY: 0,
+				scaleX: 0.1,
+				scaleY: 0.1,
+				angle: 0,
+				opacity: 1,
+				color: [1, 1, 1],
+			},
+		});
+	} else if (penMode.value === 'blur') {
+		layers.push({
+			id,
+			fxId: 'blur',
+			params: {
+				offsetX: 0,
+				offsetY: 0,
+				scaleX: 0.1,
+				scaleY: 0.1,
+				angle: 0,
+				radius: 3,
+			},
+		});
+	}
 
 	_move(ev.offsetX, ev.offsetY);
 
@@ -302,7 +331,7 @@ function onImagePointerdown(ev: PointerEvent) {
 		canvasEl.value?.removeEventListener('pointercancel', up);
 		canvasEl.value?.releasePointerCapture(ev.pointerId);
 
-		fillSquare.value = false;
+		penMode.value = null;
 	}
 
 	canvasEl.value.addEventListener('pointermove', move);