fix: Glitch while selecting gradient from preset

surajshetty3416 · surajshetty3416 · commit b96e6ca6d5ad · 2026-03-15T16:12:29.000+05:30
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
@@ -44,7 +44,11 @@
 				<!-- Color Tab -->
 				<div v-if="activeTab === 'color'" class="w-full space-y-4">
 					<ColorPicker renderMode="inline" :modelValue="backgroundColor" @update:modelValue="setBGColor" />
-					<BuilderButton v-if="backgroundColor" class="w-full" variant="subtle" @click="setBGColor(null)">
+					<BuilderButton
+						:disabled="!backgroundColor"
+						class="w-full"
+						variant="subtle"
+						@click="setBGColor(null)">
 						Clear Color
 					</BuilderButton>
 				</div>
@@ -104,9 +108,7 @@
 
 				<!-- Gradient Tab -->
 				<div v-else class="space-y-4">
-					<GradientEditor
-						:modelValue="isGradient ? rawBackgroundImage : null"
-						@update:modelValue="setGradient" />
+					<GradientEditor :modelValue="rawBackgroundImage" @update:modelValue="setGradient" />
 					<BuilderButton v-if="isGradient" class="w-full" variant="subtle" @click="clearBGImage">
 						Clear Gradient
 					</BuilderButton>
@@ -150,7 +152,9 @@ const getStyleKey = (prop: string, state: string | null = activeState.value) =>
 	return state ? `${state}:${prop}` : prop;
 };
 
-const rawBackgroundImage = computed(() => blockController.getStyle(getStyleKey("backgroundImage")) as any);
+const rawBackgroundImage = computed(
+	() => (blockController.getStyle(getStyleKey("backgroundImage")) || "") as string,
+);
 const backgroundColor = computed(() => blockController.getStyle(getStyleKey("backgroundColor")) as any);
 
 const isGradient = computed(() => rawBackgroundImage.value?.includes("gradient"));
diff --git a/frontend/src/components/Controls/AnglePicker.vue b/frontend/src/components/Controls/AnglePicker.vue
@@ -27,7 +27,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const dialRef = ref<HTMLElement | null>(null);
 const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(dialRef);
-const { pressed } = useMousePressed();
+const { pressed } = useMousePressed({ target: dialRef });
 
 watch([elementX, elementY, pressed], () => {
 	if (!pressed.value) return;
diff --git a/frontend/src/components/Controls/GradientEditor.vue b/frontend/src/components/Controls/GradientEditor.vue
@@ -86,14 +86,14 @@
 
 <script setup lang="ts">
 import { parseGradient, stringifyGradient, type Gradient, type GradientStop } from "@/utils/gradientUtils";
+import { useMouseInElement, useMousePressed } from "@vueuse/core";
 import { Popover } from "frappe-ui";
 import { computed, ref, watch } from "vue";
 import AnglePicker from "./AnglePicker.vue";
 import BuilderButton from "./BuilderButton.vue";
 import ColorPicker from "./ColorPicker.vue";
 import Input from "./Input.vue";
 import TabButtons from "./TabButtons.vue";
-import { useMouseInElement, useMousePressed } from "@vueuse/core";
 
 const props = defineProps<{
 	modelValue: string | null;
@@ -152,20 +152,31 @@ const applyPreset = (presetGradient: string) => {
 	const parsed = parseGradient(presetGradient);
 	if (parsed) {
 		gradient.value = parsed;
-		emitUpdate();
+		emit("update:modelValue", stringifyGradient(parsed));
 	}
 };
 
-const defaultGradient: Gradient = {
+const getDefaultGradient = (): Gradient => ({
 	type: "linear-gradient",
 	angle: "180deg",
 	stops: [
 		{ color: "#ffffff", position: 0 },
 		{ color: "#000000", position: 100 },
 	],
+});
+
+const gradient = ref<Gradient>(getDefaultGradient());
+
+const initializeGradient = (value: string | null) => {
+	const parsed = parseGradient(value || "");
+	if (parsed) {
+		gradient.value = parsed;
+	} else if (!gradient.value.stops.length || !value) {
+		gradient.value = getDefaultGradient();
+	}
 };
 
-const gradient = ref<Gradient>(parseGradient(props.modelValue || "") || { ...defaultGradient });
+initializeGradient(props.modelValue);
 
 const angleValue = computed(() => {
 	return gradient.value.angle.replace("deg", "");
@@ -191,8 +202,12 @@ watch(
 	() => props.modelValue,
 	(newVal) => {
 		const parsed = parseGradient(newVal || "");
-		if (parsed && stringifyGradient(parsed) !== stringifyGradient(gradient.value)) {
-			gradient.value = parsed;
+		if (parsed) {
+			const currentString = stringifyGradient(gradient.value);
+			const newString = stringifyGradient(parsed);
+			if (currentString !== newString) {
+				gradient.value = parsed;
+			}
 		}
 	},
 );
diff --git a/frontend/src/utils/gradientUtils.ts b/frontend/src/utils/gradientUtils.ts
@@ -24,9 +24,9 @@ export function parseGradient(gradientStr: string): Gradient | null {
 
 	if (parts[0]) {
 		const firstPart = parts[0].trim();
-		const isAngle = firstPart.includes("deg") || firstPart.includes("to ");
-		const isRadialConfig = firstPart.includes("circle") || firstPart.includes("ellipse") || firstPart.includes("at ");
-		
+		const isAngle = /^(-?\d+(\.\d+)?deg|to\s+(top|bottom|left|right)(\s+(top|bottom|left|right))?)/i.test(firstPart);
+		const isRadialConfig = /^(circle|ellipse|at\s+|closest-side|farthest-side|closest-corner|farthest-corner)/i.test(firstPart);
+
 		if (isAngle || isRadialConfig) {
 			angle = firstPart;
 			stopsStartIdx = 1;
