git.lucas.co / cce-ui
GPU-accelerated UI toolkit (Vulkan)
git clone https://git.lucas.co/cce-ui.git

commit91fdb8544adb5903900ba3c76518f8316d91b01f
parent26f639f975
authorLucas Galante <[email protected]>
date2026-07-04 20:27
Draw border around ramp elements and enclose all controls inside them

 src/widget/input/ramp.rs | 59 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/widget/input/ramp.rs b/src/widget/input/ramp.rs
index f1f3e47..a54d5f3 100644
--- a/src/widget/input/ramp.rs
+++ b/src/widget/input/ramp.rs
@@ -131,7 +131,7 @@ impl Element for ColorRamp {
         self.del_button.set_parent(Some(self_ptr), &mut dummy);
         
         let th = crate::layout::ramp_height();
-        let sy = y + th + 45.0;
+        let sy = y + th + 55.0;
         let slider_w = w - 100.0;
         
         if self.selected_key_idx.is_some() {
@@ -153,9 +153,19 @@ impl Element for ColorRamp {
         let track_x = self.base.x + 10.0;
         let track_w = self.base.w - 20.0;
         
-        // Draw track border
+        // Draw outer container border
+        let bx = self.base.x;
+        let by = self.base.y;
+        let bw = self.base.w;
+        let bh = self.base.h;
         let border_color = colors::ramp_border_color();
-        quads.push((track_x - 1.0, self.base.y - 1.0, track_w + 2.0, th + 2.0, border_color));
+        quads.push((bx, by, bw, 1.0, border_color));                 // Top
+        quads.push((bx, by + bh - 1.0, bw, 1.0, border_color));         // Bottom
+        quads.push((bx, by, 1.0, bh, border_color));                 // Left
+        quads.push((bx + bw - 1.0, by, 1.0, bh, border_color));         // Right
+        
+        // Draw track border
+        quads.push((track_x - 1.0, self.base.y + 10.0 - 1.0, track_w + 2.0, th + 2.0, border_color));
         
         // Draw interpolated track slices (e.g. 100 slices)
         let slices = 100;
@@ -166,7 +176,7 @@ impl Element for ColorRamp {
             let center_t = (t1 + t2) / 2.0;
             let col = self.get_interpolated_color(center_t);
             let sx = track_x + t1 * track_w;
-            quads.push((sx, self.base.y, slice_w, th, [col[0], col[1], col[2], 1.0]));
+            quads.push((sx, self.base.y + 10.0, slice_w, th, [col[0], col[1], col[2], 1.0]));
         }
         
         if self.selected_key_idx.is_some() {
@@ -185,7 +195,7 @@ impl Element for ColorRamp {
         let th = crate::layout::ramp_height();
         let track_x = self.base.x + 10.0;
         let track_w = self.base.w - 20.0;
-        let py = self.base.y + th + 15.0;
+        let py = self.base.y + 10.0 + th + 15.0;
         
         for (idx, key) in self.keys.iter().enumerate() {
             let cx = track_x + key.pos * track_w;
@@ -205,7 +215,7 @@ impl Element for ColorRamp {
         let th = crate::layout::ramp_height();
         let track_x = self.base.x + 10.0;
         let track_w = self.base.w - 20.0;
-        let py_peg = self.base.y + th + 15.0;
+        let py_peg = self.base.y + 10.0 + th + 15.0;
         
         if state == ElementState::Pressed {
             for (idx, key) in self.keys.iter().enumerate() {
@@ -223,7 +233,7 @@ impl Element for ColorRamp {
                 }
             }
             
-            if px >= track_x && px <= track_x + track_w && py_event >= self.base.y && py_event <= self.base.y + th {
+            if px >= track_x && px <= track_x + track_w && py_event >= self.base.y + 10.0 && py_event <= self.base.y + 10.0 + th {
                 let t = (px - track_x) / track_w;
                 let col = self.get_interpolated_color(t);
                 let new_key = ColorRampKey { pos: t, color: col };
@@ -465,7 +475,7 @@ impl Element for Ramp {
         self.del_button.set_parent(Some(self_ptr), &mut dummy);
         
         let gh = 80.0;
-        let sy = y + gh + 15.0;
+        let sy = y + gh + 25.0;
         let slider_w = w - 100.0;
         
         if self.selected_key_idx.is_some() {
@@ -483,19 +493,30 @@ impl Element for Ramp {
         let track_x = self.base.x + 10.0;
         let track_w = self.base.w - 20.0;
         
+        // Draw outer container border
+        let bx = self.base.x;
+        let by = self.base.y;
+        let bw = self.base.w;
+        let bh = self.base.h;
+        let border_color = colors::ramp_border_color();
+        quads.push((bx, by, bw, 1.0, border_color));                 // Top
+        quads.push((bx, by + bh - 1.0, bw, 1.0, border_color));         // Bottom
+        quads.push((bx, by, 1.0, bh, border_color));                 // Left
+        quads.push((bx + bw - 1.0, by, 1.0, bh, border_color));         // Right
+        
         // Draw graph background
-        quads.push((track_x, self.base.y, track_w, gh, [0.15, 0.15, 0.18, 1.0]));
+        quads.push((track_x, self.base.y + 10.0, track_w, gh, [0.15, 0.15, 0.18, 1.0]));
         // Border
-        quads.push((track_x - 1.0, self.base.y - 1.0, track_w + 2.0, gh + 2.0, colors::ramp_border_color()));
+        quads.push((track_x - 1.0, self.base.y + 10.0 - 1.0, track_w + 2.0, gh + 2.0, border_color));
         
         // Draw grid lines
         for ratio in [0.25, 0.5, 0.75] {
-            let gy = self.base.y + gh * (1.0 - ratio);
+            let gy = self.base.y + 10.0 + gh * (1.0 - ratio);
             quads.push((track_x, gy, track_w, 1.0, [0.25, 0.25, 0.28, 0.5]));
         }
         for ratio in [0.25, 0.5, 0.75] {
             let gx = track_x + track_w * ratio;
-            quads.push((gx, self.base.y, 1.0, gh, [0.25, 0.25, 0.28, 0.5]));
+            quads.push((gx, self.base.y + 10.0, 1.0, gh, [0.25, 0.25, 0.28, 0.5]));
         }
         
         // Curve area fill and outline
@@ -507,11 +528,11 @@ impl Element for Ramp {
             let sx1 = track_x + t1 * track_w;
             
             let slice_h = v1 * gh;
-            let sy = self.base.y + gh - slice_h;
+            let sy = self.base.y + 10.0 + gh - slice_h;
             quads.push((sx1, sy, slice_w, slice_h, [0.3, 0.45, 0.6, 0.25]));
             
             let outline_h = 2.0;
-            let outline_y = self.base.y + gh - v1 * gh - 1.0;
+            let outline_y = self.base.y + 10.0 + gh - v1 * gh - 1.0;
             quads.push((sx1, outline_y, slice_w, outline_h, [0.5, 0.75, 1.0, 1.0]));
         }
         
@@ -532,7 +553,7 @@ impl Element for Ramp {
         
         for (idx, key) in self.keys.iter().enumerate() {
             let cx = track_x + key.pos * track_w;
-            let cy = self.base.y + gh - key.value * gh;
+            let cy = self.base.y + 10.0 + gh - key.value * gh;
             
             circles.push((cx, cy, 7.0, [0.0, 0.0, 0.0, 0.8]));
             circles.push((cx, cy, 5.0, [0.5, 0.75, 1.0, 1.0]));
@@ -554,7 +575,7 @@ impl Element for Ramp {
         if state == ElementState::Pressed {
             for (idx, key) in self.keys.iter().enumerate() {
                 let cx = track_x + key.pos * track_w;
-                let cy = self.base.y + gh - key.value * gh;
+                let cy = self.base.y + 10.0 + gh - key.value * gh;
                 let dx = px - cx;
                 let dy = py_event - cy;
                 if (dx*dx + dy*dy) <= 64.0 {
@@ -566,9 +587,9 @@ impl Element for Ramp {
                 }
             }
             
-            if px >= track_x && px <= track_x + track_w && py_event >= self.base.y && py_event <= self.base.y + gh {
+            if px >= track_x && px <= track_x + track_w && py_event >= self.base.y + 10.0 && py_event <= self.base.y + 10.0 + gh {
                 let t = (px - track_x) / track_w;
-                let val = 1.0 - (py_event - self.base.y) / gh;
+                let val = 1.0 - (py_event - (self.base.y + 10.0)) / gh;
                 let new_key = RampKey { pos: t, value: val };
                 self.keys.push(new_key);
                 self.sort_keys();
@@ -626,7 +647,7 @@ impl Element for Ramp {
         if self.is_dragging_key {
             if let Some(idx) = self.selected_key_idx {
                 let t = ((px - track_x) / track_w).clamp(0.0, 1.0);
-                let val = (1.0 - (py_event - self.base.y) / gh).clamp(0.0, 1.0);
+                let val = (1.0 - (py_event - (self.base.y + 10.0)) / gh).clamp(0.0, 1.0);
                 self.keys[idx].pos = t;
                 self.keys[idx].value = val;
                 self.val_slider.set_value(val);