1use {
2 crate::{
3 makepad_derive_widget::*,
4 makepad_draw::*,
5 widget::*,
6 text_input::{TextInput, TextInputAction}
7 }
8};
9
10live_design!{
11 link widgets;
12 use link::theme::*;
13 use link::shaders::*;
14 use link::widgets::*;
15
16 DrawSlider = {{DrawSlider}} {}
17
18 pub SliderBase = {{Slider}} {}
19
20 pub SLIDER_ALT1_DATA_FONTSIZE = (THEME_FONT_SIZE_BASE);
21
22 pub SliderMinimal = <SliderBase> {
23 min: 0.0, max: 1.0,
24 step: 0.0,
25 label_align: { x: 0., y: 0. }
26 margin: <THEME_MSPACE_1> { top: (THEME_SPACE_2) }
27 precision: 2,
28 height: Fit,
29 hover_actions_enabled: false,
30
31 draw_bg: {
32 instance hover: float
33 instance focus: float
34 instance drag: float
35 instance disabled: float
36
37 uniform border_size: (THEME_BEVELING)
38
39 uniform color_1: (THEME_COLOR_INSET_1)
40 uniform color_1_hover: (THEME_COLOR_INSET_1_HOVER)
41 uniform color_1_focus: (THEME_COLOR_INSET_1_FOCUS)
42 uniform color_1_disabled: (THEME_COLOR_INSET_1_DISABLED)
43 uniform color_1_drag: (THEME_COLOR_INSET_1_DRAG)
44
45 uniform color_2: (THEME_COLOR_INSET_2)
46 uniform color_2_hover: (THEME_COLOR_INSET_2_HOVER)
47 uniform color_2_focus: (THEME_COLOR_INSET_2_FOCUS)
48 uniform color_2_disabled: (THEME_COLOR_INSET_2_DISABLED)
49 uniform color_2_drag: (THEME_COLOR_INSET_2_DRAG)
50
51 uniform border_color_1: (THEME_COLOR_BEVEL_OUTSET_1)
52 uniform border_color_1_hover: (THEME_COLOR_BEVEL_OUTSET_1)
53 uniform border_color_1_focus: (THEME_COLOR_BEVEL_OUTSET_1)
54 uniform border_color_1_drag: (THEME_COLOR_BEVEL_OUTSET_1)
55 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_OUTSET_1_DISABLED)
56
57 uniform border_color_2: (THEME_COLOR_BEVEL_OUTSET_2)
58 uniform border_color_2_hover: (THEME_COLOR_BEVEL_OUTSET_2)
59 uniform border_color_2_focus: (THEME_COLOR_BEVEL_OUTSET_2)
60 uniform border_color_2_drag: (THEME_COLOR_BEVEL_OUTSET_2)
61 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_OUTSET_2_DISABLED)
62
63 uniform val_color: (THEME_COLOR_VAL)
64 uniform val_color_hover: (THEME_COLOR_VAL_HOVER)
65 uniform val_color_focus: (THEME_COLOR_VAL_FOCUS)
66 uniform val_color_drag: (THEME_COLOR_VAL_DRAG)
67 uniform val_color_disabled: (THEME_COLOR_VAL_DISABLED)
68
69 uniform handle_color: (THEME_COLOR_HANDLE)
70 uniform handle_color_hover: (THEME_COLOR_HANDLE_HOVER)
71 uniform handle_color_focus: (THEME_COLOR_HANDLE_FOCUS)
72 uniform handle_color_drag: (THEME_COLOR_HANDLE_DRAG)
73 uniform handle_color_disabled: (THEME_COLOR_HANDLE_DISABLED)
74
75 fn pixel(self) -> vec4 {
76 let slider_height = self.border_size * 2.5;
77 let handle_size = mix(3, 5, self.hover);
78 let handle_bg_size = mix(0, 10, self.hover)
79
80 let sdf = Sdf2d::viewport(self.pos * self.rect_size)
81
82 sdf.rect(
84 0.,
85 self.rect_size.y - slider_height * 2,
86 self.rect_size.x,
87 slider_height + 1
88 )
89
90 sdf.fill(
91 mix(
92 mix(
93 mix(
94 self.border_color_2,
95 self.border_color_2_focus,
96 self.focus
97 ),
98 mix(
99 self.border_color_2_hover,
100 self.border_color_2_drag,
101 self.drag
102 ),
103 self.hover
104 ),
105 self.border_color_2_disabled,
106 self.disabled
107 )
108 );
109
110 sdf.rect(
112 0,
113 self.rect_size.y - slider_height,
114 self.rect_size.x,
115 slider_height
116 )
117
118 sdf.fill(
119 mix(
120 mix(
121 mix(
122 self.border_color_1,
123 self.border_color_1_focus,
124 self.focus
125 ),
126 mix(
127 self.border_color_1_hover,
128 self.border_color_1_drag,
129 self.drag
130 ),
131 self.hover
132 ),
133 self.border_color_1_disabled,
134 self.disabled
135 )
136 );
137
138 sdf.rect(
140 0,
141 self.rect_size.y - slider_height * 2.,
142 self.slide_pos * (self.rect_size.x) + handle_size,
143 slider_height * 2. + 1.
144 )
145 sdf.fill(
146 mix(
147 mix(
148 mix(
149 self.val_color,
150 self.val_color_focus,
151 self.focus
152 ),
153 mix(
154 self.val_color_hover,
155 self.val_color_drag,
156 self.drag
157 ),
158 self.hover
159 ),
160 self.val_color_disabled,
161 self.disabled
162 )
163 );
164
165 let handle_bg_x = self.slide_pos * (self.rect_size.x - handle_size) - handle_bg_size * 0.5 + 0.5 * handle_size;
167
168 sdf.rect(
169 handle_bg_x,
170 self.rect_size.y - slider_height * 2.,
171 handle_bg_size,
172 slider_height * 2.
173 )
174
175 sdf.fill(
176 mix(
177 mix(
178 mix(
179 self.handle_color,
180 self.handle_color_focus,
181 self.focus
182 ),
183 mix(
184 self.handle_color_hover,
185 self.handle_color_drag,
186 self.drag
187 ),
188 self.hover
189 ),
190 self.handle_color_disabled,
191 self.disabled
192 )
193 );
194
195 return sdf.result
196 }
197 }
198
199 draw_text: {
200 instance hover: 0.0
201 instance focus: 0.0
202 instance empty: 0.0
203 instance drag: 0.0
204 instance disabled: 0.0
205
206 color: (THEME_COLOR_LABEL_OUTER)
207 uniform color_hover: (THEME_COLOR_LABEL_OUTER_HOVER)
208 uniform color_drag: (THEME_COLOR_LABEL_OUTER_DRAG)
209 uniform color_focus: (THEME_COLOR_LABEL_OUTER_FOCUS)
210 uniform color_disabled: (THEME_COLOR_LABEL_OUTER_DISABLED)
211 uniform color_empty: (THEME_COLOR_TEXT_PLACEHOLDER)
212
213 text_style: <THEME_FONT_REGULAR> {
214 line_spacing: (THEME_FONT_WDGT_LINE_SPACING),
215 font_size: (THEME_FONT_SIZE_P)
216 }
217
218 fn get_color(self) -> vec4 {
219 return
220 mix(
221 mix(
222 mix(
223 mix(
224 self.color,
225 self.color_focus,
226 self.focus
227 ),
228 self.color_empty,
229 self.empty
230 ),
231 mix(self.color_hover, self.color_drag, self.drag),
232 self.hover
233 ),
234 self.color_disabled,
235 self.disabled
236 )
237 }
238 }
239
240 label_walk: {
241 width: Fill, height: Fit,
242 margin: { top: 0., bottom: (THEME_SPACE_1) },
243 }
244
245 text_input: <TextInput> {
246 empty_text: "0",
247 is_numeric_only: true,
248 is_read_only: false,
249
250 width: Fit,
251 label_align: {y: 0.},
252 margin: 0.
253 padding: 0.
254
255 draw_text: {
256 color: (THEME_COLOR_TEXT_VAL)
257 color_hover: (THEME_COLOR_TEXT_HOVER)
258 color_focus: (THEME_COLOR_TEXT_FOCUS)
259 color_down: (THEME_COLOR_TEXT_DOWN)
260 color_disabled: (THEME_COLOR_TEXT_DISABLED)
261 color_empty: (THEME_COLOR_TEXT_PLACEHOLDER)
262 color_empty_hover: (THEME_COLOR_TEXT_PLACEHOLDER_HOVER)
263 color_empty_focus: (THEME_COLOR_TEXT_FOCUS)
264 }
265
266
267 draw_bg: {
268 border_radius: 0.
269 border_size: 0.
270
271 color: (THEME_COLOR_U_HIDDEN)
272 color_hover: (THEME_COLOR_U_HIDDEN)
273 color_focus: (THEME_COLOR_U_HIDDEN)
274 color_disabled: (THEME_COLOR_U_HIDDEN)
275 color_empty: (THEME_COLOR_U_HIDDEN)
276
277 border_color_1: (THEME_COLOR_U_HIDDEN)
278 border_color_1_hover: (THEME_COLOR_U_HIDDEN)
279 border_color_1_empty: (THEME_COLOR_U_HIDDEN)
280 border_color_1_disabled: (THEME_COLOR_U_HIDDEN)
281 border_color_1_focus: (THEME_COLOR_U_HIDDEN)
282
283 border_color_2: (THEME_COLOR_U_HIDDEN)
284 border_color_2_hover: (THEME_COLOR_U_HIDDEN)
285 border_color_2_empty: (THEME_COLOR_U_HIDDEN)
286 border_color_2_disabled: (THEME_COLOR_U_HIDDEN)
287 border_color_2_focus: (THEME_COLOR_U_HIDDEN)
288 }
289
290 draw_cursor: { color: (THEME_COLOR_TEXT_CURSOR) }
291
292 draw_selection: {
293 border_radius: (THEME_TEXTSELECTION_CORNER_RADIUS)
294
295 color: (THEME_COLOR_D_HIDDEN)
296 color_hover: (THEME_COLOR_D_HIDDEN)
297 color_focus: (THEME_COLOR_D_HIDDEN)
298 color_empty: (THEME_COLOR_U_HIDDEN)
299 color_disabled: (THEME_COLOR_U_HIDDEN)
300 }
301 }
302
303 animator: {
304 disabled = {
305 default: off,
306 off = {
307 from: {all: Forward {duration: 0.}}
308 apply: {
309 draw_bg: {disabled: 0.0}
310 draw_text: {disabled: 0.0}
311 }
312 }
313 on = {
314 from: {all: Forward {duration: 0.2}}
315 apply: {
316 draw_bg: {disabled: 1.0}
317 draw_text: {disabled: 1.0}
318 }
319 }
320 }
321 hover = {
322 default: off
323 off = {
324 from: {all: Forward {duration: 0.2}}
325 ease: OutQuad
326 apply: {
327 draw_bg: { hover: 0.0 },
328 draw_text: { hover: 0.0 },
329 }
330 }
331 on = {
332 from: {all: Snap}
334 apply: {
335 draw_bg: { hover: 1.0 },
336 draw_text: { hover: 1.0 },
337 }
338 }
339 }
340 focus = {
341 default: off
342 off = {
343 from: {all: Forward {duration: 0.0}}
344 apply: {
345 draw_bg: {focus: 0.0}
346 draw_text: {focus: 0.0}
347 }
349 }
350 on = {
351 from: {all: Snap}
352 apply: {
353 draw_bg: {focus: 1.0}
354 draw_text: {focus: 1.0}
355 }
357 }
358 }
359 drag = {
360 default: off
361 off = {
362 from: {all: Forward {duration: 0.1}}
363 apply: {
364 draw_bg: {drag: 0.0}
365 draw_text: {drag: 0.0}
366 }
367 }
368 on = {
369 cursor: Arrow,
370 from: {all: Snap}
371 apply: {
372 draw_bg: {drag: 1.0}
373 draw_text: {drag: 1.0}
374 }
375 }
376 }
377 }
378 }
379
380 pub SliderMinimalFlat = <SliderMinimal> {
381 draw_bg: {
382 border_color_1: (THEME_COLOR_BEVEL_OUTSET_2)
383 border_color_1_hover: (THEME_COLOR_BEVEL_OUTSET_2)
384 border_color_1_focus: (THEME_COLOR_BEVEL_OUTSET_2)
385 border_color_1_drag: (THEME_COLOR_BEVEL_OUTSET_2)
386 border_color_1_disabled: (THEME_COLOR_BEVEL_OUTSET_2_DISABLED)
387
388 border_color_2: (THEME_COLOR_BEVEL_OUTSET_2)
389 border_color_2_hover: (THEME_COLOR_BEVEL_OUTSET_2)
390 border_color_2_focus: (THEME_COLOR_BEVEL_OUTSET_2)
391 border_color_2_drag: (THEME_COLOR_BEVEL_OUTSET_2)
392 border_color_2_disabled: (THEME_COLOR_BEVEL_OUTSET_2_DISABLED)
393 }
394 }
395
396 pub Slider = <SliderMinimal> {
397 height: 36;
398 draw_bg: {
399 instance disabled: 0.0,
400
401 uniform border_size: (THEME_BEVELING)
402 uniform border_radius: (THEME_CORNER_RADIUS)
403
404 uniform color_dither: 1.0
405
406 uniform color: (THEME_COLOR_INSET)
407 uniform color_hover: (THEME_COLOR_INSET_HOVER)
408 uniform color_focus: (THEME_COLOR_INSET_FOCUS)
409 uniform color_disabled: (THEME_COLOR_INSET_DISABLED)
410 uniform color_drag: (THEME_COLOR_INSET_DRAG)
411
412 uniform handle_color_1: (THEME_COLOR_HANDLE_1)
413 uniform handle_color_1_hover: (THEME_COLOR_HANDLE_1_HOVER)
414 uniform handle_color_1_focus: (THEME_COLOR_HANDLE_1_FOCUS)
415 uniform handle_color_1_disabled: (THEME_COLOR_HANDLE_1_DISABLED)
416 uniform handle_color_1_drag: (THEME_COLOR_HANDLE_1_DRAG)
417
418 uniform handle_color_2: (THEME_COLOR_HANDLE_2)
419 uniform handle_color_2_hover: (THEME_COLOR_HANDLE_2_HOVER)
420 uniform handle_color_2_focus: (THEME_COLOR_HANDLE_2_FOCUS)
421 uniform handle_color_2_disabled: (THEME_COLOR_HANDLE_2_DISABLED)
422 uniform handle_color_2_drag: (THEME_COLOR_HANDLE_2_DRAG)
423
424 uniform border_color_1: (THEME_COLOR_BEVEL_INSET_2)
425 uniform border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
426 uniform border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
427 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
428 uniform border_color_1_drag: (THEME_COLOR_BEVEL_INSET_2_DRAG)
429
430 uniform border_color_2: (THEME_COLOR_BEVEL_INSET_1)
431 uniform border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
432 uniform border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
433 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
434 uniform border_color_2_drag: (THEME_COLOR_BEVEL_INSET_1_DRAG)
435
436 uniform val_size: 3.
437
438 uniform val_color: (THEME_COLOR_VAL)
439 uniform val_color_hover: (THEME_COLOR_VAL_HOVER)
440 uniform val_color_focus: (THEME_COLOR_VAL_FOCUS)
441 uniform val_color_disabled: (THEME_COLOR_VAL_DISABLED)
442 uniform val_color_drag: (THEME_COLOR_VAL_DRAG)
443
444 uniform handle_size: 20.
445 uniform bipolar: 0.0,
446
447 fn pixel(self) -> vec4 {
448 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
449 let handle_sz = self.handle_size;
450
451 let sdf = Sdf2d::viewport(self.pos * self.rect_size)
452
453 let offset_px = vec2(0, 20.)
454
455 let offset_uv = vec2(
456 offset_px.x / self.rect_size.x,
457 offset_px.y / self.rect_size.y
458 )
459
460 let border_sz_uv = vec2(
461 self.border_size / self.rect_size.x,
462 self.border_size / self.rect_size.y
463 )
464
465 let sz_px = vec2(
466 self.rect_size.x,
467 self.rect_size.y - offset_px.y
468 );
469
470 let scale_factor_border = vec2(
471 self.rect_size.x / sz_px.x,
472 self.rect_size.y / sz_px.y
473 );
474
475 let gradient_border = vec2(
476 self.pos.x * scale_factor_border.x + dither,
477 (self.pos.y - offset_uv.y) * scale_factor_border.y + dither
478 )
479
480 let sz_inner_px = vec2(
481 self.rect_size.x - self.border_size * 2.,
482 self.rect_size.y - self.border_size * 2. - offset_px.y
483 );
484
485 let scale_factor_fill = vec2(
486 self.rect_size.x / sz_inner_px.x,
487 self.rect_size.y / sz_inner_px.y
488 );
489
490 let gradient_fill = vec2(
491 self.pos.x * scale_factor_fill.x - border_sz_uv.x * 2. + dither,
492 (self.pos.y - offset_uv.y) * scale_factor_fill.y - border_sz_uv.y * 2. + dither
493 )
494
495 sdf.box(
496 self.border_size,
497 offset_px.y + self.border_size,
498 self.rect_size.x - self.border_size * 2.,
499 self.rect_size.y - offset_px.y - self.border_size * 2.,
500 self.border_radius
501 );
502
503 sdf.fill_keep(
504 mix(
505 mix(
506 mix(
507 self.color,
508 self.color_hover,
509 self.hover
510 ),
511 mix(
512 self.color_focus,
513 mix(
514 self.color_hover,
515 self.color_drag,
516 self.drag
517 ),
518 self.hover
519 ),
520 self.focus
521 ),
522 self.color_disabled,
523 self.disabled
524 )
525 )
526
527 sdf.stroke(
528 mix(
529 mix(
530 mix(self.border_color_1, self.border_color_2, gradient_border.y),
531 mix(
532 mix(self.border_color_1_focus, self.border_color_2_focus, gradient_border.y),
533 mix(
534 mix(self.border_color_1_hover, self.border_color_2_hover, gradient_border.y),
535 mix(self.border_color_1_drag, self.border_color_2_drag, gradient_border.y),
536 self.drag
537 ),
538 self.hover
539 ),
540 self.focus
541 ),
542 mix(self.border_color_1_disabled, self.border_color_2_disabled, gradient_border.y),
543 self.disabled
544 ), self.border_size
545 )
546
547 let offset_sides = self.border_size + 6.;
549 sdf.rect(
550 self.border_size + offset_sides,
551 offset_px.y + (self.rect_size.y - offset_px.y) * 0.5 - self.border_size - 1,
552 self.rect_size.x - 2 * offset_sides - self.border_size * 2.,
553 self.border_size * 2. + 1.
554 );
555
556 sdf.fill(
557 mix(
558 mix(
559 mix(self.border_color_1, self.border_color_1_hover, self.hover),
560 mix(
561 self.border_color_1_focus,
562 mix(
563 self.border_color_1_hover,
564 self.border_color_1_drag,
565 self.drag
566 ),
567 self.hover
568 ),
569 self.focus
570 ),
571 self.border_color_1_disabled,
572 self.disabled
573 )
574 );
575
576 sdf.rect(
577 self.border_size + offset_sides,
578 offset_px.y + (self.rect_size.y - offset_px.y) * 0.5,
579 self.rect_size.x - 2 * offset_sides - self.border_size * 2. - 1,
580 self.border_size * 2.
581 );
582
583 sdf.fill(
584 mix(
585 mix(
586 mix(
587 self.border_color_2,
588 self.border_color_2_hover,
589 self.hover
590 ),
591 mix(
592 self.border_color_2_hover,
593 self.border_color_2_drag,
594 self.drag
595 ),
596 self.hover
597 ),
598 self.border_color_2_disabled,
599 self.disabled
600 )
601 );
602
603 let track_length = self.rect_size.x - offset_sides * 4.;
605 let val_x = self.slide_pos * track_length + offset_sides * 2.;
606
607 let offset_top = self.rect_size.y - (self.rect_size.y - offset_px.y) * 0.5
608 sdf.move_to(
609 mix(
610 offset_sides,
611 self.rect_size.x * 0.5,
612 self.bipolar
613 ),
614 offset_top
615 );
616 sdf.line_to(
617 val_x,
618 offset_top
619 );
620
621 sdf.stroke(
622 mix(
623 mix(
624 mix(
625 self.val_color,
626 self.val_color_hover,
627 self.hover
628 ),
629 mix(
630 self.val_color_focus,
631 mix(
632 self.val_color_hover,
633 self.val_color_drag,
634 self.drag
635 ),
636 self.hover
637 ),
638 self.focus
639 ),
640 self.val_color_disabled,
641 self.disabled
642 ) , self.val_size
643 )
644
645 let ctrl_height = self.rect_size.y - offset_px.y;
646 let handle_x = self.slide_pos * (self.rect_size.x - handle_sz - offset_sides) - 3;
647 let handle_padding = 1.5;
648 sdf.box(
649 handle_x + offset_sides + self.border_size,
650 offset_px.y + self.border_size + handle_padding,
651 self.handle_size - self.border_size * 2.,
652 ctrl_height - self.border_size * 2. - handle_padding * 2.,
653 self.border_radius
654 )
655
656 sdf.fill_keep(
657 mix(
658 mix(
659 mix(
660 mix(self.handle_color_1, self.handle_color_2, gradient_fill.y),
661 mix(self.handle_color_1_hover, self.handle_color_2_hover, gradient_fill.y),
662 self.hover
663 ),
664 mix(
665 mix(self.handle_color_1_focus, self.handle_color_2_focus, gradient_fill.y),
666 mix(
667 mix(self.handle_color_1_hover, self.handle_color_2_hover, gradient_fill.y),
668 mix(self.handle_color_1_drag, self.handle_color_2_drag, gradient_fill.y),
669 self.drag
670 ),
671 self.hover
672 ),
673 self.focus
674 ),
675 mix(self.handle_color_1_disabled, self.handle_color_2_disabled, gradient_fill.y),
676 self.disabled
677 )
678 )
679
680 sdf.stroke(
681 mix(
682 mix(
683 mix(self.border_color_2, self.border_color_1, gradient_border.y),
684 mix(
685 mix(self.border_color_2_hover, self.border_color_1_hover, gradient_border.y),
686 mix(self.border_color_2_drag, self.border_color_1_drag, gradient_border.y),
687 self.drag
688 ),
689 self.hover
690 ),
691 mix(self.border_color_2_disabled, self.border_color_1_disabled, gradient_border.y),
692 self.disabled
693 ), self.border_size
694 );
695
696 return sdf.result
697 }
698 }
699 }
700
701 pub SliderGradientY = <Slider> {
702 draw_bg: {
703 instance disabled: 0.0,
704
705 uniform border_size: (THEME_BEVELING)
706 uniform border_radius: (THEME_CORNER_RADIUS)
707
708 uniform color_dither: 1.0
709
710 uniform color_1: (THEME_COLOR_INSET_1)
711 uniform color_1_hover: (THEME_COLOR_INSET_1_HOVER)
712 uniform color_1_focus: (THEME_COLOR_INSET_1_FOCUS)
713 uniform color_1_disabled: (THEME_COLOR_INSET_1_DISABLED)
714 uniform color_1_drag: (THEME_COLOR_INSET_1_DRAG)
715
716 uniform color_2: (THEME_COLOR_INSET_2)
717 uniform color_2_hover: (THEME_COLOR_INSET_2_HOVER)
718 uniform color_2_focus: (THEME_COLOR_INSET_2_FOCUS)
719 uniform color_2_disabled: (THEME_COLOR_INSET_2_DISABLED)
720 uniform color_2_drag: (THEME_COLOR_INSET_2_DRAG)
721
722 uniform handle_color_1: (THEME_COLOR_HANDLE_1)
723 uniform handle_color_1_hover: (THEME_COLOR_HANDLE_1_HOVER)
724 uniform handle_color_1_focus: (THEME_COLOR_HANDLE_1_FOCUS)
725 uniform handle_color_1_disabled: (THEME_COLOR_HANDLE_1_DISABLED)
726 uniform handle_color_1_drag: (THEME_COLOR_HANDLE_1_DRAG)
727
728 uniform handle_color_2: (THEME_COLOR_HANDLE_2)
729 uniform handle_color_2_hover: (THEME_COLOR_HANDLE_2_HOVER)
730 uniform handle_color_2_focus: (THEME_COLOR_HANDLE_2_FOCUS)
731 uniform handle_color_2_disabled: (THEME_COLOR_HANDLE_2_DISABLED)
732 uniform handle_color_2_drag: (THEME_COLOR_HANDLE_2_DRAG)
733
734 uniform border_color_1: (THEME_COLOR_BEVEL_INSET_2)
735 uniform border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
736 uniform border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
737 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
738 uniform border_color_1_drag: (THEME_COLOR_BEVEL_INSET_2_DRAG)
739
740 uniform border_color_2: (THEME_COLOR_BEVEL_INSET_1)
741 uniform border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
742 uniform border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
743 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
744 uniform border_color_2_drag: (THEME_COLOR_BEVEL_INSET_1_DRAG)
745
746 uniform val_size: 3.
747
748 uniform val_color: (THEME_COLOR_VAL)
749 uniform val_color_hover: (THEME_COLOR_VAL_HOVER)
750 uniform val_color_focus: (THEME_COLOR_VAL_FOCUS)
751 uniform val_color_disabled: (THEME_COLOR_VAL_DISABLED)
752 uniform val_color_drag: (THEME_COLOR_VAL_DRAG)
753
754 uniform handle_size: 20.
755 uniform bipolar: 0.0,
756
757 fn pixel(self) -> vec4 {
758 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
759 let handle_sz = self.handle_size;
760
761 let sdf = Sdf2d::viewport(self.pos * self.rect_size)
762
763 let offset_px = vec2(0, 20.)
764
765 let offset_uv = vec2(
766 offset_px.x / self.rect_size.x,
767 offset_px.y / self.rect_size.y
768 )
769
770 let border_sz_uv = vec2(
771 self.border_size / self.rect_size.x,
772 self.border_size / self.rect_size.y
773 )
774
775 let sz_px = vec2(
776 self.rect_size.x,
777 self.rect_size.y - offset_px.y
778 );
779
780 let scale_factor_border = vec2(
781 self.rect_size.x / sz_px.x,
782 self.rect_size.y / sz_px.y
783 );
784
785 let gradient_border = vec2(
786 self.pos.x * scale_factor_border.x + dither,
787 (self.pos.y - offset_uv.y) * scale_factor_border.y + dither
788 )
789
790 let sz_inner_px = vec2(
791 self.rect_size.x - self.border_size * 2.,
792 self.rect_size.y - self.border_size * 2. - offset_px.y
793 );
794
795 let scale_factor_fill = vec2(
796 self.rect_size.x / sz_inner_px.x,
797 self.rect_size.y / sz_inner_px.y
798 );
799
800 let gradient_fill = vec2(
801 self.pos.x * scale_factor_fill.x - border_sz_uv.x * 2. + dither,
802 (self.pos.y - offset_uv.y) * scale_factor_fill.y - border_sz_uv.y * 2. + dither
803 )
804
805 sdf.box(
806 self.border_size,
807 offset_px.y + self.border_size,
808 self.rect_size.x - self.border_size * 2.,
809 self.rect_size.y - offset_px.y - self.border_size * 2.,
810 self.border_radius
811 );
812
813 sdf.fill_keep(
814 mix(
815 mix(
816 mix(
817 mix(self.color_1, self.color_2, gradient_fill.y),
818 mix(self.color_1_hover, self.color_2_hover, gradient_fill.y),
819 self.hover
820 ),
821 mix(
822 mix(self.color_1_focus, self.color_2_focus, gradient_fill.y),
823 mix(
824 mix(self.color_1_hover, self.color_2_hover, gradient_fill.y),
825 mix(self.color_1_drag, self.color_2_drag, gradient_fill.y),
826 self.drag
827 ),
828 self.hover
829 ),
830 self.focus
831 ),
832 mix(self.color_1_disabled, self.color_2_disabled, gradient_fill.y),
833 self.disabled
834 )
835 )
836
837 sdf.stroke(
838 mix(
839 mix(
840 mix(self.border_color_1, self.border_color_2, gradient_border.y),
841 mix(
842 mix(self.border_color_1_focus, self.border_color_2_focus, gradient_border.y),
843 mix(
844 mix(self.border_color_1_hover, self.border_color_2_hover, gradient_border.y),
845 mix(self.border_color_1_drag, self.border_color_2_drag, gradient_border.y),
846 self.drag
847 ),
848 self.hover
849 ),
850 self.focus
851 ),
852 mix(self.border_color_1_disabled, self.border_color_2_disabled, gradient_border.y),
853 self.disabled
854 ), self.border_size
855 )
856
857 let offset_sides = self.border_size + 6.;
859 sdf.rect(
860 self.border_size + offset_sides,
861 offset_px.y + (self.rect_size.y - offset_px.y) * 0.5 - self.border_size - 1,
862 self.rect_size.x - 2 * offset_sides - self.border_size * 2.,
863 self.border_size * 2. + 1.
864 );
865
866 sdf.fill(
867 mix(
868 mix(
869 mix(self.border_color_1, self.border_color_1_hover, self.hover),
870 mix(
871 self.border_color_1_focus,
872 mix(
873 self.border_color_1_hover,
874 self.border_color_1_drag,
875 self.drag
876 ),
877 self.hover
878 ),
879 self.focus
880 ),
881 self.border_color_1_disabled,
882 self.disabled
883 )
884 );
885
886 sdf.rect(
887 self.border_size + offset_sides,
888 offset_px.y + (self.rect_size.y - offset_px.y) * 0.5,
889 self.rect_size.x - 2 * offset_sides - self.border_size * 2. - 1,
890 self.border_size * 2.
891 );
892
893 sdf.fill(
894 mix(
895 mix(
896 mix(
897 self.border_color_2,
898 self.border_color_2_hover,
899 self.hover
900 ),
901 mix(
902 self.border_color_2_hover,
903 self.border_color_2_drag,
904 self.drag
905 ),
906 self.hover
907 ),
908 self.border_color_2_disabled,
909 self.disabled
910 )
911 );
912
913 let track_length = self.rect_size.x - offset_sides * 4.;
915 let val_x = self.slide_pos * track_length + offset_sides * 2.;
916
917 let offset_top = self.rect_size.y - (self.rect_size.y - offset_px.y) * 0.5
918 sdf.move_to(
919 mix(
920 offset_sides,
921 self.rect_size.x * 0.5,
922 self.bipolar
923 ),
924 offset_top
925 );
926 sdf.line_to(
927 val_x,
928 offset_top
929 );
930
931 sdf.stroke(
932 mix(
933 mix(
934 mix(
935 self.val_color,
936 self.val_color_hover,
937 self.hover
938 ),
939 mix(
940 self.val_color_focus,
941 mix(
942 self.val_color_hover,
943 self.val_color_drag,
944 self.drag
945 ),
946 self.hover
947 ),
948 self.focus
949 ),
950 self.val_color_disabled,
951 self.disabled
952 ) , self.val_size
953 )
954
955 let ctrl_height = self.rect_size.y - offset_px.y;
956 let handle_x = self.slide_pos * (self.rect_size.x - handle_sz - offset_sides) - 3;
957 let handle_padding = 1.5;
958 sdf.box(
959 handle_x + offset_sides + self.border_size,
960 offset_px.y + self.border_size + handle_padding,
961 self.handle_size - self.border_size * 2.,
962 ctrl_height - self.border_size * 2. - handle_padding * 2.,
963 self.border_radius
964 )
965
966 sdf.fill_keep(
967 mix(
968 mix(
969 mix(
970 mix(self.handle_color_1, self.handle_color_2, gradient_fill.y),
971 mix(self.handle_color_1_hover, self.handle_color_2_hover, gradient_fill.y),
972 self.hover
973 ),
974 mix(
975 mix(self.handle_color_1_focus, self.handle_color_2_focus, gradient_fill.y),
976 mix(
977 mix(self.handle_color_1_hover, self.handle_color_2_hover, gradient_fill.y),
978 mix(self.handle_color_1_drag, self.handle_color_2_drag, gradient_fill.y),
979 self.drag
980 ),
981 self.hover
982 ),
983 self.focus
984 ),
985 mix(self.handle_color_1_disabled, self.handle_color_2_disabled, gradient_fill.y),
986 self.disabled
987 )
988 )
989
990 sdf.stroke(
991 mix(
992 mix(
993 mix(self.border_color_2, self.border_color_1, gradient_border.y),
994 mix(
995 mix(self.border_color_2_hover, self.border_color_1_hover, gradient_border.y),
996 mix(self.border_color_2_drag, self.border_color_1_drag, gradient_border.y),
997 self.drag
998 ),
999 self.hover
1000 ),
1001 mix(self.border_color_2_disabled, self.border_color_1_disabled, gradient_border.y),
1002 self.disabled
1003 ), self.border_size
1004 );
1005
1006 return sdf.result
1007 }
1008 }
1009 }
1010
1011 pub SliderFlat = <Slider> {
1012 draw_bg: {
1013 border_size: (THEME_BEVELING)
1014
1015 uniform color: (THEME_COLOR_INSET)
1016 uniform color_hover: (THEME_COLOR_INSET_HOVER)
1017 uniform color_focus: (THEME_COLOR_INSET_FOCUS)
1018 uniform color_disabled: (THEME_COLOR_INSET_DISABLED)
1019 uniform color_drag: (THEME_COLOR_INSET_DRAG)
1020
1021 border_color_1: (THEME_COLOR_BEVEL)
1022 border_color_1_hover: (THEME_COLOR_BEVEL_HOVER)
1023 border_color_1_focus: (THEME_COLOR_BEVEL_FOCUS)
1024 border_color_1_disabled: (THEME_COLOR_BEVEL_DISABLED)
1025 border_color_1_drag: (THEME_COLOR_BEVEL_DRAG)
1026
1027 border_color_2: (THEME_COLOR_BEVEL)
1028 border_color_2_hover: (THEME_COLOR_BEVEL_HOVER)
1029 border_color_2_focus: (THEME_COLOR_BEVEL_FOCUS)
1030 border_color_2_disabled: (THEME_COLOR_BEVEL_DISABLED)
1031 border_color_2_drag: (THEME_COLOR_BEVEL_DRAG)
1032
1033 handle_color_1: (THEME_COLOR_HANDLE)
1034 handle_color_1_hover: (THEME_COLOR_HANDLE_HOVER)
1035 handle_color_1_focus: (THEME_COLOR_HANDLE_FOCUS)
1036 handle_color_1_disabled: (THEME_COLOR_HANDLE_DISABLED)
1037 handle_color_1_drag: (THEME_COLOR_HANDLE_DRAG)
1038
1039 handle_color_2: (THEME_COLOR_HANDLE)
1040 handle_color_2_hover: (THEME_COLOR_HANDLE_HOVER)
1041 handle_color_2_focus: (THEME_COLOR_HANDLE_FOCUS)
1042 handle_color_2_disabled: (THEME_COLOR_HANDLE_DISABLED)
1043 handle_color_2_drag: (THEME_COLOR_HANDLE_DRAG)
1044
1045 handle_size: 14.
1046 }
1047
1048 }
1049
1050 pub SliderFlatter = <SliderFlat> {
1051 draw_bg: {
1052 instance disabled: 0.0,
1053
1054 handle_size: 0.
1055 border_size: 0.
1056 }
1057 }
1058
1059
1060 pub SLIDER_ALT1_HANDLE_SIZE = 4.0;
1061 pub SLIDER_ALT1_DATA_FONT_TOPMARGIN = 3.0;
1062 pub SLIDER_ALT1_VAL_PADDING = 2.5;
1063
1064 pub SliderRound = <SliderMinimal> {
1065 height: 18.,
1066 margin: <THEME_MSPACE_1> { top: (THEME_SPACE_2) }
1067
1068 text_input: <TextInput> {
1069 width: Fit,
1070 padding: 0.,
1071 margin: { right: 7.5, top: (SLIDER_ALT1_DATA_FONT_TOPMARGIN) }
1072
1073 draw_text: {
1074 instance hover: 0.0
1075 instance focus: 0.0
1076 instance empty: 0.0
1077 instance drag: 0.0
1078 instance disabled: 0.0
1079
1080 color: (THEME_COLOR_TEXT_VAL)
1081 uniform color_hover: (THEME_COLOR_TEXT_HOVER)
1082 uniform color_focus: (THEME_COLOR_TEXT_FOCUS)
1083 uniform color_drag: (THEME_COLOR_TEXT_DOWN)
1084 uniform color_disabled: (THEME_COLOR_TEXT_DISABLED)
1085 uniform color_empty: (THEME_COLOR_TEXT_PLACEHOLDER)
1086 uniform color_empty_hover: (THEME_COLOR_TEXT_PLACEHOLDER_HOVER)
1087 uniform color_empty_focus: (THEME_COLOR_TEXT_FOCUS)
1088
1089 text_style: <THEME_FONT_REGULAR> {
1090 font_size: (SLIDER_ALT1_DATA_FONTSIZE)
1091 }
1092
1093 fn get_color(self) -> vec4 {
1094 return
1095 mix(
1096 mix(
1097 mix(
1098 mix(
1099 self.color,
1100 self.color_empty,
1101 self.empty
1102 ),
1103 mix(self.color_hover, self.color_drag, self.drag),
1104 self.hover
1105 ),
1106 mix(self.color_focus, self.color_hover, self.hover),
1107 self.focus
1108 ),
1109 self.color_disabled,
1110 self.disabled
1111 )
1112 }
1113 }
1114
1115 draw_bg: {
1116 border_size: 0.
1117
1118 color: (THEME_COLOR_U_HIDDEN)
1119 color_hover: (THEME_COLOR_U_HIDDEN)
1120 color_focus: (THEME_COLOR_U_HIDDEN)
1121 color_disabled: (THEME_COLOR_U_HIDDEN)
1122 color_empty: (THEME_COLOR_U_HIDDEN)
1123 }
1124
1125 draw_selection: {
1126 border_radius: (THEME_TEXTSELECTION_CORNER_RADIUS)
1127
1128 color: (THEME_COLOR_D_HIDDEN)
1129 color_hover: (THEME_COLOR_D_HIDDEN)
1130 color_focus: (THEME_COLOR_BG_HIGHLIGHT_INLINE)
1131 }
1132
1133 }
1134
1135 draw_bg: {
1136 instance hover: float
1137 instance focus: float
1138 instance drag: float
1139 instance instance: float
1140
1141 label_size: 75.
1142
1143 uniform val_heat: 10.
1144
1145 uniform border_size: (THEME_BEVELING)
1146 uniform border_radius: (THEME_CORNER_RADIUS * 2.)
1147
1148 uniform color_dither: 1.0
1149
1150 uniform color: (THEME_COLOR_INSET)
1151 uniform color_hover: (THEME_COLOR_INSET_HOVER)
1152 uniform color_focus: (THEME_COLOR_INSET_FOCUS)
1153 uniform color_disabled: (THEME_COLOR_INSET_DISABLED)
1154 uniform color_drag: (THEME_COLOR_INSET_DRAG)
1155
1156 uniform border_color_1: (THEME_COLOR_BEVEL_INSET_2)
1157 uniform border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
1158 uniform border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
1159 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
1160 uniform border_color_1_drag: (THEME_COLOR_BEVEL_INSET_2_DRAG)
1161
1162 uniform border_color_2: (THEME_COLOR_BEVEL_INSET_1)
1163 uniform border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
1164 uniform border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
1165 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
1166 uniform border_color_2_drag: (THEME_COLOR_BEVEL_INSET_1_DRAG)
1167
1168 uniform val_color_1: (THEME_COLOR_VAL_1)
1169 uniform val_color_1_hover: (THEME_COLOR_VAL_1_HOVER)
1170 uniform val_color_1_focus: (THEME_COLOR_VAL_1_FOCUS)
1171 uniform val_color_1_disabled: (THEME_COLOR_VAL_1_DISABLED)
1172 uniform val_color_1_drag: (THEME_COLOR_VAL_1_DRAG)
1173
1174 uniform val_color_2: (THEME_COLOR_VAL_2)
1175 uniform val_color_2_hover: (THEME_COLOR_VAL_2_HOVER)
1176 uniform val_color_2_focus: (THEME_COLOR_VAL_2_FOCUS)
1177 uniform val_color_2_disabled: (THEME_COLOR_VAL_2_DISABLED)
1178 uniform val_color_2_drag: (THEME_COLOR_VAL_2_DRAG)
1179
1180 uniform handle_color: (THEME_COLOR_HANDLE);
1181 uniform handle_color_hover: (THEME_COLOR_HANDLE_HOVER);
1182 uniform handle_color_focus: (THEME_COLOR_HANDLE_FOCUS);
1183 uniform handle_color_disabled: (THEME_COLOR_HANDLE_DISABLED);
1184 uniform handle_color_drag: (THEME_COLOR_HANDLE_DRAG);
1185
1186 fn pixel(self) -> vec4 {
1187 let sdf = Sdf2d::viewport(self.pos * self.rect_size);
1188 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
1189
1190 let border_sz_uv = vec2(
1191 self.border_size / self.rect_size.x,
1192 self.border_size / self.rect_size.y
1193 )
1194
1195 let gradient_border = vec2(
1196 self.pos.x + dither,
1197 self.pos.y + dither
1198 )
1199
1200 let sz_inner_px = vec2(
1201 self.rect_size.x - self.border_size * 2.,
1202 self.rect_size.y - self.border_size * 2.
1203 );
1204
1205 let scale_factor_fill = vec2(
1206 self.rect_size.x / sz_inner_px.x,
1207 self.rect_size.y / sz_inner_px.y
1208 );
1209
1210 let label_sz_uv = self.label_size / self.rect_size.x;
1211
1212 let gradient_fill = vec2(
1213 (pow(self.pos.x, self.val_heat) - label_sz_uv) * scale_factor_fill.x - border_sz_uv.x * 2. + dither,
1214 self.pos.y * scale_factor_fill.y - border_sz_uv.y * 2. + dither
1215 )
1216
1217
1218 let handle_size = (SLIDER_ALT1_HANDLE_SIZE);
1219 let padding = (SLIDER_ALT1_VAL_PADDING);
1220
1221 let track_length_bg = self.rect_size.x - self.label_size;
1222 let padding_full = padding * 2.;
1223 let min_size = padding_full + handle_size * 2.;
1224 let track_length_val = self.rect_size.x - self.label_size - padding_full - min_size;
1225
1226 sdf.box(
1228 self.label_size + self.border_size,
1229 self.border_size,
1230 track_length_bg - self.border_size * 2.,
1231 self.rect_size.y - self.border_size * 2.,
1232 self.border_radius
1233 );
1234
1235 sdf.fill_keep(
1236 mix(
1237 mix(
1238 mix(
1239 self.color,
1240 self.color_hover,
1241 self.hover
1242 ),
1243 mix(
1244 self.color_focus,
1245 mix(
1246 self.color_hover,
1247 self.color_drag,
1248 self.drag
1249 ),
1250 self.hover
1251 ),
1252 self.focus
1253 ),
1254 self.color_disabled,
1255 self.disabled
1256 )
1257 )
1258
1259 sdf.stroke(
1260 mix(
1261 mix(
1262 mix(self.border_color_1, self.border_color_2, gradient_border.y),
1263 mix(
1264 mix(self.border_color_1_focus, self.border_color_2_focus, gradient_border.y),
1265 mix(
1266 mix(self.border_color_1_hover, self.border_color_2_hover, gradient_border.y),
1267 mix(self.border_color_1_drag, self.border_color_2_drag, gradient_border.y),
1268 self.drag
1269 ),
1270 self.hover
1271 ),
1272 self.focus
1273 ),
1274 mix(self.border_color_1_disabled, self.border_color_2_disabled, gradient_border.y),
1275 self.disabled
1276 ), self.border_size
1277 )
1278
1279 let handle_shift = self.label_size + padding_full + handle_size;
1281 let val_height = self.rect_size.y - padding_full - self.border_size * 2.;
1282 let val_offset_x = self.label_size + padding + self.border_size + val_height * 0.5;
1283 let val_target_x = track_length_val * self.slide_pos + min_size - self.border_size * 2. - val_height;
1284
1285 sdf.circle(
1286 val_offset_x,
1287 self.rect_size.y * 0.5,
1288 val_height * 0.5
1289 );
1290
1291 sdf.box(
1292 val_offset_x,
1293 padding + self.border_size,
1294 val_target_x,
1295 self.rect_size.y - padding_full - self.border_size * 2.,
1296 1.
1297 );
1298
1299 sdf.circle(
1300 track_length_val * self.slide_pos + handle_shift,
1301 self.rect_size.y * 0.5,
1302 val_height * 0.5
1303 );
1304
1305 sdf.fill(
1306 mix(
1307 mix(
1308 mix(
1309 mix(self.val_color_1, self.val_color_2, gradient_fill.x),
1310 mix(self.val_color_1_hover, self.val_color_2_hover, gradient_fill.x),
1311 self.hover
1312 ),
1313 mix(
1314 mix(self.val_color_1_focus, self.val_color_2_focus, gradient_fill.x),
1315 mix(
1316 mix(self.val_color_1_hover, self.val_color_2_hover, gradient_fill.x),
1317 mix(self.val_color_1_drag, self.val_color_2_drag, gradient_fill.x),
1318 self.drag
1319 ),
1320 self.hover
1321 ),
1322 self.focus
1323 ),
1324 mix(self.val_color_1_disabled, self.val_color_2_disabled, gradient_fill.x),
1325 self.disabled
1326 )
1327 )
1328
1329 sdf.circle(
1331 track_length_val * self.slide_pos + handle_shift,
1332 self.rect_size.y * 0.5,
1333 mix(0., handle_size, self.hover)
1334 );
1335
1336 sdf.fill_keep(
1337 mix(
1338 mix(
1339 mix(
1340 self.handle_color,
1341 self.handle_color_hover,
1342 self.hover
1343 ),
1344 mix(
1345 self.handle_color_focus,
1346 mix(
1347 self.handle_color_hover,
1348 self.handle_color_drag,
1349 self.drag
1350 ),
1351 self.hover
1352 ),
1353 self.focus
1354 ),
1355 self.handle_color_disabled,
1356 self.disabled
1357 )
1358 )
1359
1360 return sdf.result
1361 }
1362 }
1363
1364 }
1365
1366 pub SliderRoundGradientY = <SliderRound> {
1367 draw_bg: {
1368 instance hover: float
1369 instance focus: float
1370 instance drag: float
1371 instance instance: float
1372
1373 label_size: 75.
1374
1375 uniform val_heat: 10.
1376
1377 uniform border_size: (THEME_BEVELING)
1378 uniform border_radius: (THEME_CORNER_RADIUS * 2.)
1379
1380 uniform color_dither: 1.0
1381
1382 uniform color_1: (THEME_COLOR_INSET_1)
1383 uniform color_1_hover: (THEME_COLOR_INSET_1_HOVER)
1384 uniform color_1_focus: (THEME_COLOR_INSET_1_FOCUS)
1385 uniform color_1_disabled: (THEME_COLOR_INSET_1_DISABLED)
1386 uniform color_1_drag: (THEME_COLOR_INSET_1_DRAG)
1387
1388 uniform color_2: (THEME_COLOR_INSET_2)
1389 uniform color_2_hover: (THEME_COLOR_INSET_2_HOVER)
1390 uniform color_2_focus: (THEME_COLOR_INSET_2_FOCUS)
1391 uniform color_2_disabled: (THEME_COLOR_INSET_2_DISABLED)
1392 uniform color_2_drag: (THEME_COLOR_INSET_2_DRAG)
1393
1394 uniform border_color_1: (THEME_COLOR_BEVEL_INSET_2)
1395 uniform border_color_1_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
1396 uniform border_color_1_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
1397 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
1398 uniform border_color_1_drag: (THEME_COLOR_BEVEL_INSET_2_DRAG)
1399
1400 uniform border_color_2: (THEME_COLOR_BEVEL_INSET_1)
1401 uniform border_color_2_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
1402 uniform border_color_2_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
1403 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
1404 uniform border_color_2_drag: (THEME_COLOR_BEVEL_INSET_1_DRAG)
1405
1406 uniform val_color_1: (THEME_COLOR_VAL_1)
1407 uniform val_color_1_hover: (THEME_COLOR_VAL_1_HOVER)
1408 uniform val_color_1_focus: (THEME_COLOR_VAL_1_FOCUS)
1409 uniform val_color_1_disabled: (THEME_COLOR_VAL_1_DISABLED)
1410 uniform val_color_1_drag: (THEME_COLOR_VAL_1_DRAG)
1411
1412 uniform val_color_2: (THEME_COLOR_VAL_2)
1413 uniform val_color_2_hover: (THEME_COLOR_VAL_2_HOVER)
1414 uniform val_color_2_focus: (THEME_COLOR_VAL_2_FOCUS)
1415 uniform val_color_2_disabled: (THEME_COLOR_VAL_2_DISABLED)
1416 uniform val_color_2_drag: (THEME_COLOR_VAL_2_DRAG)
1417
1418 uniform handle_color: (THEME_COLOR_HANDLE);
1419 uniform handle_color_hover: (THEME_COLOR_HANDLE_HOVER);
1420 uniform handle_color_focus: (THEME_COLOR_HANDLE_FOCUS);
1421 uniform handle_color_disabled: (THEME_COLOR_HANDLE_DISABLED);
1422 uniform handle_color_drag: (THEME_COLOR_HANDLE_DRAG);
1423
1424 fn pixel(self) -> vec4 {
1425 let sdf = Sdf2d::viewport(self.pos * self.rect_size);
1426 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
1427
1428 let border_sz_uv = vec2(
1429 self.border_size / self.rect_size.x,
1430 self.border_size / self.rect_size.y
1431 )
1432
1433 let gradient_border = vec2(
1434 self.pos.x + dither,
1435 self.pos.y + dither
1436 )
1437
1438 let sz_inner_px = vec2(
1439 self.rect_size.x - self.border_size * 2.,
1440 self.rect_size.y - self.border_size * 2.
1441 );
1442
1443 let scale_factor_fill = vec2(
1444 self.rect_size.x / sz_inner_px.x,
1445 self.rect_size.y / sz_inner_px.y
1446 );
1447
1448 let label_sz_uv = self.label_size / self.rect_size.x;
1449
1450 let gradient_fill = vec2(
1451 (pow(self.pos.x, self.val_heat) - label_sz_uv) * scale_factor_fill.x - border_sz_uv.x * 2. + dither,
1452 self.pos.y * scale_factor_fill.y - border_sz_uv.y * 2. + dither
1453 )
1454
1455
1456 let handle_size = (SLIDER_ALT1_HANDLE_SIZE);
1457 let padding = (SLIDER_ALT1_VAL_PADDING);
1458
1459 let track_length_bg = self.rect_size.x - self.label_size;
1460 let padding_full = padding * 2.;
1461 let min_size = padding_full + handle_size * 2.;
1462 let track_length_val = self.rect_size.x - self.label_size - padding_full - min_size;
1463
1464 sdf.box(
1466 self.label_size + self.border_size,
1467 self.border_size,
1468 track_length_bg - self.border_size * 2.,
1469 self.rect_size.y - self.border_size * 2.,
1470 self.border_radius
1471 );
1472
1473 sdf.fill_keep(
1474 mix(
1475 mix(
1476 mix(
1477 mix(self.color_1, self.color_2, gradient_fill.y),
1478 mix(self.color_1_hover, self.color_2_hover, gradient_fill.y),
1479 self.hover
1480 ),
1481 mix(
1482 mix(self.color_1_focus, self.color_2_focus, gradient_fill.y),
1483 mix(
1484 mix(self.color_1_hover, self.color_2_hover, gradient_fill.y),
1485 mix(self.color_1_drag, self.color_2_drag, gradient_fill.y),
1486 self.drag
1487 ),
1488 self.hover
1489 ),
1490 self.focus), mix(self.color_1_disabled, self.color_2_disabled, gradient_fill.y), self.disabled
1491 )
1492 )
1493
1494 sdf.stroke(
1495 mix(
1496 mix(
1497 mix(self.border_color_1, self.border_color_2, gradient_border.y),
1498 mix(
1499 mix(self.border_color_1_focus, self.border_color_2_focus, gradient_border.y),
1500 mix(
1501 mix(self.border_color_1_hover, self.border_color_2_hover, gradient_border.y),
1502 mix(self.border_color_1_drag, self.border_color_2_drag, gradient_border.y),
1503 self.drag
1504 ),
1505 self.hover
1506 ),
1507 self.focus
1508 ),
1509 mix(self.border_color_1_disabled, self.border_color_2_disabled, gradient_border.y),
1510 self.disabled
1511 ), self.border_size
1512 )
1513
1514 let handle_shift = self.label_size + padding_full + handle_size;
1516 let val_height = self.rect_size.y - padding_full - self.border_size * 2.;
1517 let val_offset_x = self.label_size + padding + self.border_size + val_height * 0.5;
1518 let val_target_x = track_length_val * self.slide_pos + min_size - self.border_size * 2. - val_height;
1519
1520 sdf.circle(
1521 val_offset_x,
1522 self.rect_size.y * 0.5,
1523 val_height * 0.5
1524 );
1525
1526 sdf.box(
1527 val_offset_x,
1528 padding + self.border_size,
1529 val_target_x,
1530 self.rect_size.y - padding_full - self.border_size * 2.,
1531 1.
1532 );
1533
1534 sdf.circle(
1535 track_length_val * self.slide_pos + handle_shift,
1536 self.rect_size.y * 0.5,
1537 val_height * 0.5
1538 );
1539
1540 sdf.fill(
1541 mix(
1542 mix(
1543 mix(
1544 mix(self.val_color_1, self.val_color_2, gradient_fill.x),
1545 mix(self.val_color_1_hover, self.val_color_2_hover, gradient_fill.x),
1546 self.hover
1547 ),
1548 mix(
1549 mix(self.val_color_1_focus, self.val_color_2_focus, gradient_fill.x),
1550 mix(
1551 mix(self.val_color_1_hover, self.val_color_2_hover, gradient_fill.x),
1552 mix(self.val_color_1_drag, self.val_color_2_drag, gradient_fill.x),
1553 self.drag
1554 ),
1555 self.hover
1556 ),
1557 self.focus
1558 ),
1559 mix(self.val_color_1_disabled, self.val_color_2_disabled, gradient_fill.x),
1560 self.disabled
1561 )
1562 )
1563
1564 sdf.circle(
1566 track_length_val * self.slide_pos + handle_shift,
1567 self.rect_size.y * 0.5,
1568 mix(0., handle_size, self.hover)
1569 );
1570
1571 sdf.fill_keep(
1572 mix(
1573 mix(
1574 mix(
1575 self.handle_color,
1576 self.handle_color_hover,
1577 self.hover
1578 ),
1579 mix(
1580 self.handle_color_focus,
1581 mix(
1582 self.handle_color_hover,
1583 self.handle_color_drag,
1584 self.drag
1585 ),
1586 self.hover
1587 ),
1588 self.focus
1589 ),
1590 self.handle_color_disabled,
1591 self.disabled
1592 )
1593 )
1594
1595 return sdf.result
1596 }
1597 }
1598
1599 }
1600
1601 pub SliderRoundFlat = <SliderRound> {
1602 draw_bg: {
1603 color: (THEME_COLOR_INSET)
1604 color_hover: (THEME_COLOR_INSET_HOVER)
1605 color_focus: (THEME_COLOR_INSET_FOCUS)
1606 color_disabled: (THEME_COLOR_INSET_DISABLED)
1607 color_drag: (THEME_COLOR_INSET_DRAG)
1608
1609 uniform border_color_1: (THEME_COLOR_BEVEL)
1610 uniform border_color_1_hover: (THEME_COLOR_BEVEL_HOVER)
1611 uniform border_color_1_focus: (THEME_COLOR_BEVEL_FOCUS)
1612 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_DISABLED)
1613 uniform border_color_1_drag: (THEME_COLOR_BEVEL_DRAG)
1614
1615 uniform border_color_2: (THEME_COLOR_BEVEL)
1616 uniform border_color_2_hover: (THEME_COLOR_BEVEL_HOVER)
1617 uniform border_color_2_focus: (THEME_COLOR_BEVEL_FOCUS)
1618 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_DISABLED)
1619 uniform border_color_2_drag: (THEME_COLOR_BEVEL_DRAG)
1620 }
1621 }
1622
1623 pub SliderRoundFlatter = <SliderRoundFlat> {
1624 draw_bg: {
1625 border_size: 0.
1626 }
1627 }
1628
1629 pub Rotary = <SliderMinimal> {
1630 height: 95., width: 65.,
1631 axis: Vertical,
1632 flow: Right
1633 align:{x:0.,y:0.0}
1634 label_walk:{
1635 margin:{top:0}
1636 width: Fill
1637 }
1638 text_input:{
1639 width: Fit
1640 }
1641 draw_bg: {
1642 instance hover: float
1643 instance focus: float
1644 instance drag: float
1645
1646 uniform gap: 90.
1647 uniform val_padding: 10.
1648
1649 uniform border_size: (THEME_BEVELING)
1650 uniform val_size: 20.
1651
1652 uniform color_dither: 1.,
1653
1654 uniform color: (THEME_COLOR_INSET)
1655 uniform color_hover: (THEME_COLOR_INSET_HOVER)
1656 uniform color_focus: (THEME_COLOR_INSET_FOCUS)
1657 uniform color_disabled: (THEME_COLOR_INSET_DISABLED)
1658 uniform color_drag: (THEME_COLOR_INSET_DRAG)
1659
1660 uniform border_color_1: (THEME_COLOR_BEVEL_INSET_1)
1661 uniform border_color_1_hover: (THEME_COLOR_BEVEL_INSET_1_HOVER)
1662 uniform border_color_1_drag: (THEME_COLOR_BEVEL_INSET_1_DRAG)
1663 uniform border_color_1_focus: (THEME_COLOR_BEVEL_INSET_1_FOCUS)
1664 uniform border_color_1_disabled: (THEME_COLOR_BEVEL_INSET_1_DISABLED)
1665
1666 uniform border_color_2: (THEME_COLOR_BEVEL_INSET_2)
1667 uniform border_color_2_hover: (THEME_COLOR_BEVEL_INSET_2_HOVER)
1668 uniform border_color_2_drag: (THEME_COLOR_BEVEL_INSET_2_DRAG)
1669 uniform border_color_2_focus: (THEME_COLOR_BEVEL_INSET_2_FOCUS)
1670 uniform border_color_2_disabled: (THEME_COLOR_BEVEL_INSET_2_DISABLED)
1671
1672 uniform handle_color: (THEME_COLOR_HANDLE);
1673 uniform handle_color_hover: (THEME_COLOR_HANDLE_HOVER);
1674 uniform handle_color_focus: (THEME_COLOR_HANDLE_FOCUS);
1675 uniform handle_color_disabled: (THEME_COLOR_HANDLE_DISABLED);
1676 uniform handle_color_drag: (THEME_COLOR_HANDLE_DRAG);
1677
1678 uniform val_color_1: (THEME_COLOR_VAL_1);
1679 uniform val_color_1_hover: (THEME_COLOR_VAL_1);
1680 uniform val_color_1_focus: (THEME_COLOR_VAL_1);
1681 uniform val_color_1_disabled: (THEME_COLOR_VAL_1);
1682 uniform val_color_1_drag: (THEME_COLOR_VAL_1_DRAG);
1683
1684 uniform val_color_2: (THEME_COLOR_VAL_2);
1685 uniform val_color_2_hover: (THEME_COLOR_VAL_2);
1686 uniform val_color_2_focus: (THEME_COLOR_VAL_2);
1687 uniform val_color_2_disabled: (THEME_COLOR_VAL_2);
1688 uniform val_color_2_drag: (THEME_COLOR_VAL_2_DRAG);
1689
1690 fn pixel(self) -> vec4 {
1691 let sdf = Sdf2d::viewport(self.pos * self.rect_size);
1692 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
1693
1694 let one_deg = PI / 180;
1695 let threesixty_deg = 2. * PI;
1696 let gap_size = self.gap * one_deg;
1697 let val_length = threesixty_deg - (one_deg * self.gap);
1698 let start = gap_size * 0.5;
1699 let outer_end = start + val_length;
1700 let val_end = start + val_length * self.slide_pos;
1701
1702 let label_offset_px = 20.;
1703 let label_offset_uv = self.rect_size.y;
1704 let scale_px = min(self.rect_size.x, self.rect_size.y)
1705 let scale_factor = scale_px * 0.02
1706 let resize = scale_factor * 0.2; let outer_width = 10. * scale_factor
1708 let radius_px = (scale_px - outer_width) * 0.5;
1709
1710 let center_px = vec2(
1711 self.rect_size.x * 0.5,
1712 radius_px + outer_width * 0.5 + label_offset_px
1713 )
1714
1715 let offset_px = vec2(
1716 center_px.x - radius_px,
1717 label_offset_px
1718 )
1719
1720 let offset_uv = vec2(
1721 offset_px.x / self.rect_size.x,
1722 offset_px.y / self.rect_size.y
1723 )
1724
1725 let border_sz_px = vec2(
1726 radius_px * 2.,
1727 radius_px * 2.
1728 )
1729
1730 let gap_deg = self.gap * 0.25;
1731 let gap_rad = gap_deg * PI / 180;
1732 let arc_height_n = cos(gap_rad);
1733 let diam_px = radius_px * 2.;
1734 let arc_height_px = diam_px * arc_height_n
1735
1736 let scale_border = vec2(
1737 self.rect_size.x / border_sz_px.x,
1738 self.rect_size.y / arc_height_px
1739 );
1740
1741 let gradient_border = vec2(
1742 self.pos.x * scale_border.x + dither,
1743 (self.pos.y - offset_uv.y) * scale_border.y + dither
1744 )
1745
1746 sdf.arc_round_caps(
1748 center_px.x,
1749 center_px.y,
1750 radius_px,
1751 start,
1752 outer_end,
1753 outer_width
1754 );
1755
1756 sdf.fill(
1757 mix(
1758 mix(
1759 mix(
1760 self.color,
1761 self.color_hover,
1762 self.hover
1763 ),
1764 mix(
1765 self.color_focus,
1766 mix(
1767 self.color_hover,
1768 self.color_drag,
1769 self.drag
1770 ),
1771 self.hover
1772 ),
1773 self.focus
1774 ),
1775 self.color_disabled,
1776 self.disabled
1777 )
1778 )
1779
1780 let border_sz = self.border_size * 5. * resize;
1781 let gradient_down = pow(gradient_border.y, 2.)
1782 let gradient_up = pow(gradient_border.y, 0.5)
1783
1784 sdf.arc_round_caps(
1785 center_px.x,
1786 center_px.y + border_sz,
1787 radius_px,
1788 start,
1789 outer_end,
1790 border_sz * 4.
1791 );
1792
1793 sdf.fill(
1794 mix(
1795 mix(
1796 mix(
1797 mix((THEME_COLOR_U_HIDDEN), self.border_color_1, gradient_down),
1798 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_hover, gradient_down),
1799 self.hover
1800 ),
1801 mix(
1802 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_focus, gradient_down),
1803 mix(
1804 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_hover, gradient_down),
1805 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_drag, gradient_down),
1806 self.drag
1807 ),
1808 self.hover
1809 ),
1810 self.focus
1811 ),
1812 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_disabled, gradient_down),
1813 self.disabled
1814 )
1815 );
1816
1817 sdf.arc_round_caps(
1818 center_px.x,
1819 center_px.y - border_sz,
1820 radius_px,
1821 start,
1822 outer_end,
1823 border_sz * 4.
1824 );
1825
1826 sdf.fill(
1827 mix(
1828 mix(
1829 mix(
1830 mix(self.border_color_2, (THEME_COLOR_D_HIDDEN), gradient_up),
1831 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_up),
1832 self.hover
1833 ),
1834 mix(
1835 mix(self.border_color_2_focus, (THEME_COLOR_D_HIDDEN), gradient_up),
1836 mix(
1837 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_up),
1838 mix(self.border_color_2_drag, (THEME_COLOR_D_HIDDEN), gradient_up),
1839 self.drag
1840 ),
1841 self.hover
1842 ),
1843 self.focus
1844 ),
1845 mix(self.border_color_2_disabled, (THEME_COLOR_D_HIDDEN), gradient_up),
1846 self.disabled
1847 )
1848 );
1849
1850 sdf.arc_round_caps(
1852 center_px.x,
1853 center_px.y,
1854 radius_px,
1855 start,
1856 outer_end,
1857 border_sz * 4.
1858 );
1859
1860 sdf.fill(
1861 mix(
1862 mix(
1863 mix(
1864 self.border_color_2,
1865 self.border_color_2_hover,
1866 self.hover
1867 ),
1868 mix(
1869 self.border_color_2_focus,
1870 mix(
1871 self.border_color_2_hover,
1872 self.border_color_2_drag,
1873 self.drag
1874 ),
1875 self.hover
1876 ),
1877 self.focus
1878 ),
1879 self.border_color_2_disabled,
1880 self.disabled
1881 )
1882 );
1883
1884 let inner_width = outer_width - (self.val_padding * resize);
1885
1886 sdf.arc_round_caps(
1888 center_px.x,
1889 center_px.y,
1890 radius_px,
1891 start,
1892 val_end,
1893 inner_width
1894 );
1895
1896 sdf.fill(
1897 mix(
1898 mix(
1899 mix(
1900 mix(self.val_color_1, self.val_color_2, self.slide_pos),
1901 mix(self.val_color_1_hover, self.val_color_2_hover, self.slide_pos),
1902 self.hover
1903 ),
1904 mix(
1905 mix(self.val_color_1_focus, self.val_color_2_focus, self.slide_pos),
1906 mix(
1907 mix(self.val_color_1_focus, self.val_color_2_hover, self.slide_pos),
1908 mix(self.val_color_1_drag, self.val_color_2_drag, self.slide_pos),
1909 self.drag
1910 ),
1911 self.hover
1912 ),
1913 self.focus
1914 ),
1915 mix(self.val_color_1_disabled, self.val_color_2_disabled, self.slide_pos),
1916 self.disabled
1917 )
1918 )
1919
1920 sdf.arc_round_caps(
1922 center_px.x,
1923 center_px.y,
1924 radius_px,
1925 val_end,
1926 val_end,
1927 mix(
1928 mix(0., inner_width, self.focus),
1929 inner_width,
1930 self.hover
1931 )
1932 );
1933
1934 sdf.fill(
1935 mix(
1936 mix(
1937 mix(
1938 self.handle_color,
1939 self.handle_color_hover,
1940 self.hover
1941 ),
1942 mix(
1943 self.handle_color_focus,
1944 mix(
1945 self.handle_color_hover,
1946 self.handle_color_drag,
1947 self.drag
1948 ),
1949 self.hover
1950 ),
1951 self.focus
1952 ),
1953 self.handle_color_disabled,
1954 self.disabled
1955 )
1956 )
1957
1958 sdf.arc_round_caps(
1960 center_px.x,
1961 center_px.y,
1962 radius_px + outer_width * 0.5 - border_sz * 0.5,
1963 start,
1964 outer_end,
1965 border_sz
1966 );
1967
1968 sdf.fill(
1969 mix(
1970 mix(
1971 mix(
1972 mix(self.border_color_2, (THEME_COLOR_D_HIDDEN), gradient_down),
1973 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_down),
1974 self.hover
1975 ),
1976 mix(
1977 mix(self.border_color_2_focus, (THEME_COLOR_D_HIDDEN), gradient_down),
1978 mix(
1979 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_down),
1980 mix(self.border_color_2_drag, (THEME_COLOR_D_HIDDEN), gradient_down),
1981 self.drag
1982 ),
1983 self.hover
1984 ),
1985 self.focus
1986 ),
1987 mix(self.border_color_2_disabled, (THEME_COLOR_D_HIDDEN), gradient_down),
1988 self.disabled
1989 )
1990 );
1991
1992 sdf.arc_round_caps(
1993 center_px.x,
1994 center_px.y,
1995 radius_px - outer_width * 0.5 - border_sz * 0.5,
1996 start,
1997 outer_end,
1998 border_sz
1999 );
2000
2001 sdf.fill(
2002 mix(
2003 mix(
2004 mix(
2005 mix(self.border_color_1, (THEME_COLOR_U_HIDDEN), gradient_up),
2006 mix(self.border_color_1_hover, (THEME_COLOR_U_HIDDEN), gradient_up),
2007 self.hover
2008 ),
2009 mix(
2010 mix(self.border_color_1_focus, (THEME_COLOR_U_HIDDEN), gradient_up),
2011 mix(
2012 mix(self.border_color_1_hover, (THEME_COLOR_U_HIDDEN), gradient_up),
2013 mix(self.border_color_1_drag, (THEME_COLOR_U_HIDDEN), gradient_up),
2014 self.drag
2015 ),
2016 self.hover
2017 ),
2018 self.focus
2019 ),
2020 mix(self.border_color_1_disabled, (THEME_COLOR_U_HIDDEN), gradient_up),
2021 self.disabled
2022 )
2023 );
2024
2025 return sdf.result
2026 }
2027 }
2028 }
2029
2030 pub RotaryGradientY = <Rotary> {
2031 draw_bg: {
2032 uniform color_1: (THEME_COLOR_INSET_1)
2033 uniform color_1_hover: (THEME_COLOR_INSET_1_HOVER)
2034 uniform color_1_focus: (THEME_COLOR_INSET_1_FOCUS)
2035 uniform color_1_disabled: (THEME_COLOR_INSET_1_DISABLED)
2036 uniform color_1_drag: (THEME_COLOR_INSET_1_DRAG)
2037
2038 uniform color_2: (THEME_COLOR_INSET_2)
2039 uniform color_2_hover: (THEME_COLOR_INSET_2_HOVER)
2040 uniform color_2_focus: (THEME_COLOR_INSET_2_FOCUS)
2041 uniform color_2_disabled: (THEME_COLOR_INSET_2_DISABLED)
2042 uniform color_2_drag: (THEME_COLOR_INSET_2_DRAG)
2043
2044 fn pixel(self) -> vec4 {
2045 let sdf = Sdf2d::viewport(self.pos * self.rect_size);
2046 let dither = Math::random_2d(self.pos.xy) * 0.04 * self.color_dither;
2047
2048 let one_deg = PI / 180;
2049 let threesixty_deg = 2. * PI;
2050 let gap_size = self.gap * one_deg;
2051 let val_length = threesixty_deg - (one_deg * self.gap);
2052 let start = gap_size * 0.5;
2053 let outer_end = start + val_length;
2054 let val_end = start + val_length * self.slide_pos;
2055
2056 let label_offset_px = 20.;
2057 let label_offset_uv = self.rect_size.y;
2058 let scale_px = min(self.rect_size.x, self.rect_size.y)
2059 let scale_factor = scale_px * 0.02
2060 let resize = scale_factor * 0.2; let outer_width = 10. * scale_factor
2062 let radius_px = (scale_px - outer_width) * 0.5;
2063
2064 let center_px = vec2(
2065 self.rect_size.x * 0.5,
2066 radius_px + outer_width * 0.5 + label_offset_px
2067 )
2068
2069 let offset_px = vec2(
2070 center_px.x - radius_px,
2071 label_offset_px
2072 )
2073
2074 let offset_uv = vec2(
2075 offset_px.x / self.rect_size.x,
2076 offset_px.y / self.rect_size.y
2077 )
2078
2079 let border_sz_px = vec2(
2080 radius_px * 2.,
2081 radius_px * 2.
2082 )
2083
2084 let gap_deg = self.gap * 0.25;
2085 let gap_rad = gap_deg * PI / 180;
2086 let arc_height_n = cos(gap_rad);
2087 let diam_px = radius_px * 2.;
2088 let arc_height_px = diam_px * arc_height_n
2089
2090 let scale_border = vec2(
2091 self.rect_size.x / border_sz_px.x,
2092 self.rect_size.y / arc_height_px
2093 );
2094
2095 let gradient_border = vec2(
2096 self.pos.x * scale_border.x + dither,
2097 (self.pos.y - offset_uv.y) * scale_border.y + dither
2098 )
2099
2100 sdf.arc_round_caps(
2102 center_px.x,
2103 center_px.y,
2104 radius_px,
2105 start,
2106 outer_end,
2107 outer_width
2108 );
2109
2110 sdf.fill(
2111 mix(
2112 mix(
2113 mix(
2114 mix(self.color_1, self.color_2, gradient_border.y),
2115 mix(self.color_1_hover, self.color_2_hover, gradient_border.y),
2116 self.hover
2117 ),
2118 mix(
2119 mix(self.color_1_focus, self.color_2_focus, gradient_border.y),
2120 mix(
2121 mix(self.color_1_hover, self.color_2_hover, gradient_border.y),
2122 mix(self.color_1_drag, self.color_2_drag, gradient_border.y),
2123 self.drag
2124 ),
2125 self.hover
2126 ),
2127 self.focus
2128 ),
2129 mix(self.color_1_disabled, self.color_2_disabled, gradient_border.y),
2130 self.disabled
2131 )
2132 )
2133
2134 let border_sz = self.border_size * 5. * resize;
2135 let gradient_down = pow(gradient_border.y, 2.)
2136 let gradient_up = pow(gradient_border.y, 0.5)
2137
2138 sdf.arc_round_caps(
2139 center_px.x,
2140 center_px.y + border_sz,
2141 radius_px,
2142 start,
2143 outer_end,
2144 border_sz * 4.
2145 );
2146
2147 sdf.fill(
2148 mix(
2149 mix(
2150 mix(
2151 mix((THEME_COLOR_U_HIDDEN), self.border_color_1, gradient_down),
2152 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_hover, gradient_down),
2153 self.hover
2154 ),
2155 mix(
2156 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_focus, gradient_down),
2157 mix(
2158 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_hover, gradient_down),
2159 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_drag, gradient_down),
2160 self.drag
2161 ),
2162 self.hover
2163 ),
2164 self.focus
2165 ),
2166 mix((THEME_COLOR_U_HIDDEN), self.border_color_1_disabled, gradient_down),
2167 self.disabled
2168 )
2169 );
2170
2171 sdf.arc_round_caps(
2172 center_px.x,
2173 center_px.y - border_sz,
2174 radius_px,
2175 start,
2176 outer_end,
2177 border_sz * 4.
2178 );
2179
2180 sdf.fill(
2181 mix(
2182 mix(
2183 mix(
2184 mix(self.border_color_2, (THEME_COLOR_D_HIDDEN), gradient_up),
2185 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_up),
2186 self.hover
2187 ),
2188 mix(
2189 mix(self.border_color_2_focus, (THEME_COLOR_D_HIDDEN), gradient_up),
2190 mix(
2191 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_up),
2192 mix(self.border_color_2_drag, (THEME_COLOR_D_HIDDEN), gradient_up),
2193 self.drag
2194 ),
2195 self.hover
2196 ),
2197 self.focus
2198 ),
2199 mix(self.border_color_2_disabled, (THEME_COLOR_D_HIDDEN), gradient_up),
2200 self.disabled
2201 )
2202 );
2203
2204 sdf.arc_round_caps(
2206 center_px.x,
2207 center_px.y,
2208 radius_px,
2209 start,
2210 outer_end,
2211 border_sz * 4.
2212 );
2213
2214 sdf.fill(
2215 mix(
2216 mix(
2217 mix(
2218 self.border_color_2,
2219 self.border_color_2_hover,
2220 self.hover
2221 ),
2222 mix(
2223 self.border_color_2_focus,
2224 mix(
2225 self.border_color_2_hover,
2226 self.border_color_2_drag,
2227 self.drag
2228 ),
2229 self.hover
2230 ),
2231 self.focus
2232 ),
2233 self.border_color_2_disabled,
2234 self.disabled
2235 )
2236 );
2237
2238 let inner_width = outer_width - (self.val_padding * resize);
2239
2240 sdf.arc_round_caps(
2242 center_px.x,
2243 center_px.y,
2244 radius_px,
2245 start,
2246 val_end,
2247 inner_width
2248 );
2249
2250 sdf.fill(
2251 mix(
2252 mix(
2253 mix(
2254 mix(self.val_color_1, self.val_color_2, self.slide_pos),
2255 mix(self.val_color_1_hover, self.val_color_2_hover, self.slide_pos),
2256 self.hover
2257 ),
2258 mix(
2259 mix(self.val_color_1_focus, self.val_color_2_focus, self.slide_pos),
2260 mix(
2261 mix(self.val_color_1_focus, self.val_color_2_hover, self.slide_pos),
2262 mix(self.val_color_1_drag, self.val_color_2_drag, self.slide_pos),
2263 self.drag
2264 ),
2265 self.hover
2266 ),
2267 self.focus
2268 ),
2269 mix(self.val_color_1_disabled, self.val_color_2_disabled, self.slide_pos),
2270 self.disabled
2271 )
2272 )
2273
2274 sdf.arc_round_caps(
2276 center_px.x,
2277 center_px.y,
2278 radius_px,
2279 val_end,
2280 val_end,
2281 mix(
2282 mix(0., inner_width, self.focus),
2283 inner_width,
2284 self.hover
2285 )
2286 );
2287
2288 sdf.fill(
2289 mix(
2290 mix(
2291 mix(
2292 self.handle_color,
2293 self.handle_color_hover,
2294 self.hover
2295 ),
2296 mix(
2297 self.handle_color_focus,
2298 mix(
2299 self.handle_color_hover,
2300 self.handle_color_drag,
2301 self.drag
2302 ),
2303 self.hover
2304 ),
2305 self.focus
2306 ),
2307 self.handle_color_disabled,
2308 self.disabled
2309 )
2310 )
2311
2312 sdf.arc_round_caps(
2314 center_px.x,
2315 center_px.y,
2316 radius_px + outer_width * 0.5 - border_sz * 0.5,
2317 start,
2318 outer_end,
2319 border_sz
2320 );
2321
2322 sdf.fill(
2323 mix(
2324 mix(
2325 mix(
2326 mix(self.border_color_2, (THEME_COLOR_D_HIDDEN), gradient_down),
2327 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_down),
2328 self.hover
2329 ),
2330 mix(
2331 mix(self.border_color_2_focus, (THEME_COLOR_D_HIDDEN), gradient_down),
2332 mix(
2333 mix(self.border_color_2_hover, (THEME_COLOR_D_HIDDEN), gradient_down),
2334 mix(self.border_color_2_drag, (THEME_COLOR_D_HIDDEN), gradient_down),
2335 self.drag
2336 ),
2337 self.hover
2338 ),
2339 self.focus
2340 ),
2341 mix(self.border_color_2_disabled, (THEME_COLOR_D_HIDDEN), gradient_down),
2342 self.disabled
2343 )
2344 );
2345
2346 sdf.arc_round_caps(
2347 center_px.x,
2348 center_px.y,
2349 radius_px - outer_width * 0.5 - border_sz * 0.5,
2350 start,
2351 outer_end,
2352 border_sz
2353 );
2354
2355 sdf.fill(
2356 mix(
2357 mix(
2358 mix(
2359 mix(self.border_color_1, (THEME_COLOR_U_HIDDEN), gradient_up),
2360 mix(self.border_color_1_hover, (THEME_COLOR_U_HIDDEN), gradient_up),
2361 self.hover
2362 ),
2363 mix(
2364 mix(self.border_color_1_focus, (THEME_COLOR_U_HIDDEN), gradient_up),
2365 mix(
2366 mix(self.border_color_1_hover, (THEME_COLOR_U_HIDDEN), gradient_up),
2367 mix(self.border_color_1_drag, (THEME_COLOR_U_HIDDEN), gradient_up),
2368 self.drag
2369 ),
2370 self.hover
2371 ),
2372 self.focus
2373 ),
2374 mix(self.border_color_1_disabled, (THEME_COLOR_U_HIDDEN), gradient_up),
2375 self.disabled
2376 )
2377 );
2378
2379 return sdf.result
2380 }
2381 }
2382 }
2383
2384 pub RotaryFlat = <Rotary> {
2385 draw_bg: {
2386 uniform color: (THEME_COLOR_INSET)
2387 uniform color_hover: (THEME_COLOR_INSET_HOVER)
2388 uniform color_focus: (THEME_COLOR_INSET_FOCUS)
2389 uniform color_disabled: (THEME_COLOR_INSET_DISABLED)
2390 uniform color_drag: (THEME_COLOR_INSET_DRAG)
2391
2392 uniform border_color: (THEME_COLOR_BEVEL)
2393 uniform border_color_hover: (THEME_COLOR_BEVEL_HOVER)
2394 uniform border_color_focus: (THEME_COLOR_BEVEL_FOCUS)
2395 uniform border_color_disabled: (THEME_COLOR_BEVEL_DISABLED)
2396 uniform border_color_drag: (THEME_COLOR_BEVEL_DRAG)
2397
2398 fn pixel(self) -> vec4 {
2399 let sdf = Sdf2d::viewport(self.pos * self.rect_size);
2400
2401 let label_offset = 20.;
2402 let one_deg = PI / 180;
2403 let threesixty_deg = 2. * PI;
2404 let gap_size = self.gap * one_deg;
2405 let val_length = threesixty_deg - (one_deg * self.gap);
2406 let start = gap_size * 0.5;
2407 let bg_end = start + val_length;
2408 let val_end = start + val_length * self.slide_pos;
2409 let effective_height = self.rect_size.y - label_offset;
2410 let radius_scaled = min(
2411 (self.rect_size.x - self.border_size) * 0.5,
2412 (self.rect_size.y - label_offset - self.border_size) * 0.5
2413 );
2414 let radius_width_compensation = self.val_size * 0.5;
2415 let width_fix = 0.008;
2416 let bg_width_scaled = min(self.rect_size.x, effective_height) * self.val_size * width_fix;
2417
2418 sdf.arc_round_caps(
2420 self.rect_size.x / 2.,
2421 radius_scaled + label_offset,
2422 radius_scaled - radius_width_compensation,
2423 start,
2424 bg_end,
2425 bg_width_scaled
2426 );
2427
2428 let label_offset_uv = label_offset / self.rect_size.y;
2429
2430 sdf.fill_keep(
2431 mix(
2432 mix(
2433 mix(
2434 self.color,
2435 self.color_hover,
2436 self.hover
2437 ),
2438 mix(
2439 self.color_focus,
2440 mix(
2441 self.color_hover,
2442 self.color_drag,
2443 self.drag
2444 ),
2445 self.hover
2446 ),
2447 self.focus
2448 ),
2449 self.color_disabled,
2450 self.disabled
2451 )
2452 )
2453 sdf.stroke(
2454 mix(
2455 mix(
2456 mix(
2457 self.border_color,
2458 self.border_color_hover,
2459 self.hover
2460 ),
2461 mix(
2462 self.border_color_focus,
2463 mix(
2464 self.border_color_hover,
2465 self.border_color_drag,
2466 self.drag
2467 ),
2468 self.hover
2469 ),
2470 self.focus
2471 ),
2472 self.border_color_disabled,
2473 self.disabled
2474 ), self.border_size);
2475
2476 let val_size = (self.val_size - self.val_padding) * width_fix;
2477 let val_size_scaled = min(
2478 self.rect_size.x * val_size,
2479 effective_height * val_size
2480 );
2481
2482 sdf.arc_round_caps(
2484 self.rect_size.x / 2.,
2485 radius_scaled + label_offset,
2486 radius_scaled - radius_width_compensation,
2487 start,
2488 val_end,
2489 val_size_scaled - self.border_size
2490 );
2491
2492 sdf.fill(
2493 mix(
2494 mix(
2495 mix(
2496 mix(self.val_color_1, self.val_color_2, self.slide_pos),
2497 mix(self.val_color_1_hover, self.val_color_2_hover, self.slide_pos),
2498 self.hover
2499 ),
2500 mix(
2501 mix(self.val_color_1_focus, self.val_color_2_focus, self.slide_pos),
2502 mix(
2503 mix(self.val_color_1_hover, self.val_color_2_hover, self.slide_pos),
2504 mix(self.val_color_1_drag, self.val_color_2_drag, self.slide_pos),
2505 self.drag
2506 ),
2507 self.hover
2508 ),
2509 self.focus
2510 ),
2511 mix(self.val_color_1_disabled, self.val_color_2_disabled, self.slide_pos),
2512 self.disabled
2513 )
2514 )
2515
2516 sdf.arc_round_caps(
2518 self.rect_size.x / 2.,
2519 radius_scaled + label_offset,
2520 radius_scaled - radius_width_compensation,
2521 val_end,
2522 val_end,
2523 mix(
2524 mix(0., val_size_scaled, self.focus),
2525 val_size_scaled,
2526 self.hover
2527 )
2528 );
2529
2530 sdf.fill_keep(
2531 mix(
2532 mix(
2533 mix(
2534 self.handle_color,
2535 self.handle_color_hover,
2536 self.hover
2537 ),
2538 mix(
2539 self.handle_color_focus,
2540 mix(
2541 self.handle_color_hover,
2542 self.handle_color_drag,
2543 self.drag
2544 ),
2545 self.hover
2546 ),
2547 self.focus
2548 ),
2549 self.handle_color_disabled,
2550 self.disabled
2551 )
2552 )
2553
2554 return sdf.result
2555 }
2556 }
2557 }
2558
2559 pub RotaryFlatter = <RotaryFlat> {
2560 draw_bg: {
2561 border_size: 0.,
2562 }
2563 }
2564
2565}
2566
2567#[derive(Copy, Clone, Debug, Live, LiveHook)]
2568#[live_ignore]
2569pub enum DragAxis {
2570 #[pick] Horizontal,
2571 Vertical
2572}
2573
2574impl LiveHook for Slider{
2575 fn after_new_from_doc(&mut self, cx:&mut Cx){
2576 self.set_internal(self.default);
2577 self.update_text_input(cx);
2578 }
2579}
2580
2581
2582#[derive(Live, LiveHook, LiveRegister)]
2583#[repr(C)]
2584pub struct DrawSlider {
2585 #[deref] draw_super: DrawQuad,
2586 #[live] label_size: f32,
2587 #[live] slide_pos: f32,
2588}
2589
2590#[derive(Live, Widget)]
2591#[designable]
2592pub struct Slider {
2593 #[area] #[redraw] #[live] draw_bg: DrawSlider,
2594
2595 #[walk] walk: Walk,
2596
2597 #[live(DragAxis::Horizontal)] pub axis: DragAxis,
2598
2599 #[layout] layout: Layout,
2600 #[animator] animator: Animator,
2601
2602 #[rust] label_area: Area,
2603 #[live] label_walk: Walk,
2604 #[live] label_align: Align,
2605 #[live] draw_text: DrawText,
2606 #[live] text: String,
2607
2608 #[live] text_input: TextInput,
2609
2610 #[live] precision: usize,
2611
2612 #[live] min: f64,
2613 #[live] max: f64,
2614 #[live] step: f64,
2615 #[live] default: f64,
2616
2617 #[live] bind: String,
2618
2619 #[live(true)] hover_actions_enabled: bool,
2623
2624 #[rust] pub relative_value: f64,
2625 #[rust] pub dragging: Option<f64>,
2626}
2627
2628#[derive(Clone, Debug, DefaultNone)]
2629pub enum SliderAction {
2630 StartSlide,
2631 TextSlide(f64),
2632 Slide(f64),
2633 EndSlide(f64),
2634 LabelHoverIn(Rect),
2635 LabelHoverOut,
2636 None
2637}
2638
2639impl Slider {
2640
2641 fn to_external(&self) -> f64 {
2642 let val = self.relative_value * (self.max - self.min);
2643 if self.step != 0.0{
2644 return (val / self.step).floor()* self.step + self.min
2645 }
2646 else{
2647 val + self.min
2648 }
2649 }
2650
2651 fn set_internal(&mut self, external: f64) -> bool {
2652 let old = self.relative_value;
2653 self.relative_value = (external - self.min) / (self.max - self.min);
2654 old != self.relative_value
2655 }
2656
2657 pub fn update_text_input(&mut self, cx: &mut Cx) {
2658 let e = self.to_external();
2659 self.text_input.set_text(cx, &match self.precision{
2660 0=>format!("{:.0}",e),
2661 1=>format!("{:.1}",e),
2662 2=>format!("{:.2}",e),
2663 3=>format!("{:.3}",e),
2664 4=>format!("{:.4}",e),
2665 5=>format!("{:.5}",e),
2666 6=>format!("{:.6}",e),
2667 7=>format!("{:.7}",e),
2668 _=>format!("{}",e)
2669 });
2670 self.text_input.select_all(cx);
2671 }
2672
2673 pub fn draw_walk_slider(&mut self, cx: &mut Cx2d, walk: Walk) {
2674 self.draw_bg.slide_pos = self.relative_value as f32;
2675 self.draw_bg.begin(cx, walk, self.layout);
2676
2677 if let Flow::Right = self.layout.flow{
2678
2679 if let Some(mut dw) = cx.defer_walk(self.label_walk) {
2680 let walk = self.text_input.walk(cx);
2682 let _ = self.text_input.draw_walk(cx, &mut Scope::empty(), walk);
2683
2684 let label_walk = dw.resolve(cx);
2685 cx.begin_turtle(label_walk, Layout::default());
2686 self.draw_text.draw_walk(cx, label_walk, self.label_align, &self.text);
2687 cx.end_turtle_with_area(&mut self.label_area);
2688 }
2689 }
2690 else{
2691 let walk = self.text_input.walk(cx);
2692 let _ = self.text_input.draw_walk(cx, &mut Scope::empty(), walk);
2693 self.draw_text.draw_walk(cx, self.label_walk, self.label_align, &self.text);
2694 }
2695
2696 self.draw_bg.end(cx);
2697 }
2698
2699 pub fn value(&self) -> f64 {
2700 self.to_external()
2701 }
2702
2703 pub fn set_value(&mut self, cx:&mut Cx, v: f64) {
2704 let prev_value = self.value();
2705 self.set_internal(v);
2706 if v != prev_value {
2707 self.update_text_input(cx);
2708 }
2709 }
2710 }
2711
2712impl WidgetDesign for Slider{
2713
2714}
2715
2716impl Widget for Slider {
2717 fn set_disabled(&mut self, cx:&mut Cx, disabled:bool){
2718 self.animator_toggle(cx, disabled, Animate::Yes, id!(disabled.on), id!(disabled.off));
2719 }
2720
2721 fn disabled(&self, cx:&Cx) -> bool {
2722 self.animator_in_state(cx, id!(disabled.on))
2723 }
2724
2725 fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope:&mut Scope) {
2726 let uid = self.widget_uid();
2727 self.animator_handle_event(cx, event);
2728
2729 match event.hit_designer(cx, self.draw_bg.area()){
2731 HitDesigner::DesignerPick(_e)=>{
2732 cx.widget_action(uid, &scope.path, WidgetDesignAction::PickedBody)
2733 }
2734 _=>()
2735 }
2736
2737 for action in cx.capture_actions(|cx| self.text_input.handle_event(cx, event, scope)) {
2738 match action.as_widget_action().cast() {
2739 TextInputAction::KeyFocus => {
2740 self.animator_play(cx, id!(focus.on));
2741 }
2742 TextInputAction::KeyFocusLost => {
2743 self.animator_play(cx, id!(focus.off));
2744 }
2745 TextInputAction::Returned(value, _modifiers) => {
2746 if let Ok(v) = value.parse::<f64>() {
2747 self.set_internal(v.max(self.min).min(self.max));
2748 }
2749 self.update_text_input(cx);
2750 cx.widget_action(uid, &scope.path, SliderAction::TextSlide(self.to_external()));
2751 }
2752 TextInputAction::Escaped => {
2753 self.update_text_input(cx);
2754 }
2755 _ => ()
2756 }
2757 };
2758
2759 if self.hover_actions_enabled {
2760 match event.hits_with_capture_overload(cx, self.label_area, true) {
2761 Hit::FingerHoverIn(fh) => {
2762 cx.widget_action(uid, &scope.path, SliderAction::LabelHoverIn(fh.rect));
2763 }
2764 Hit::FingerHoverOut(_) => {
2765 cx.widget_action(uid, &scope.path, SliderAction::LabelHoverOut);
2766 },
2767 _ => ()
2768 }
2769 }
2770
2771 match event.hits(cx, self.draw_bg.area()) {
2772 Hit::FingerHoverIn(_) => {
2773 if self.animator.animator_in_state(cx, id!(disabled.on)) { return (); }
2774 self.animator_play(cx, id!(hover.on));
2775 },
2776 Hit::FingerHoverOut(_) => {
2777 self.animator_play(cx, id!(hover.off));
2778 },
2779 Hit::FingerHoverOver(_) => {
2780 cx.set_cursor(MouseCursor::Grab);
2781 },
2782 Hit::FingerDown(FingerDownEvent {
2783 device,
2786 ..
2787 }) if device.is_primary_hit() => {
2788 if self.animator.animator_in_state(cx, id!(disabled.on)) { return (); }
2789 self.update_text_input(cx);
2792
2793 self.text_input.set_is_read_only(cx, true);
2794 self.text_input.set_key_focus(cx);
2795 self.text_input.select_all(cx);
2796 self.text_input.redraw(cx);
2797
2798 self.animator_play(cx, id!(drag.on));
2799 self.dragging = Some(self.relative_value);
2800 cx.widget_action(uid, &scope.path, SliderAction::StartSlide);
2801 cx.set_cursor(MouseCursor::Grabbing);
2802 },
2803 Hit::FingerUp(fe) if fe.is_primary_hit() => {
2804 if self.animator.animator_in_state(cx, id!(disabled.on)) { return (); }
2805
2806 self.text_input.set_is_read_only(cx, false);
2807 self.text_input.force_new_edit_group();
2809 self.animator_play(cx, id!(drag.off));
2810 if fe.is_over && fe.device.has_hovers() {
2811 self.animator_play(cx, id!(hover.on));
2812 }
2813 else {
2814 self.animator_play(cx, id!(hover.off));
2815 }
2816 self.dragging = None;
2817 cx.widget_action(uid, &scope.path, SliderAction::EndSlide(self.to_external()));
2818 cx.set_cursor(MouseCursor::Grab);
2819 }
2820 Hit::FingerMove(fe) => {
2821 if self.animator.animator_in_state(cx, id!(disabled.on)) { return (); }
2822
2823 let rel = fe.abs - fe.abs_start;
2824 if let Some(start_pos) = self.dragging {
2825 if let DragAxis::Horizontal = self.axis {
2826 self.relative_value = (start_pos + rel.x / (fe.rect.size.x - self.draw_bg.label_size as f64)).max(0.0).min(1.0);
2827 } else {
2828 self.relative_value = (start_pos - rel.y / fe.rect.size.y as f64).max(0.0).min(1.0);
2829 }
2830 self.set_internal(self.to_external());
2831 self.draw_bg.redraw(cx);
2832 self.update_text_input(cx);
2833 cx.widget_action(uid, &scope.path, SliderAction::Slide(self.to_external()));
2834 }
2835 }
2836 _ => ()
2837 }
2838 }
2839
2840 fn draw_walk(&mut self, cx: &mut Cx2d, _scope:&mut Scope, walk: Walk) -> DrawStep {
2841 self.draw_walk_slider(cx, walk);
2842 DrawStep::done()
2843 }
2844
2845 fn widget_to_data(&self, _cx: &mut Cx, actions:&Actions, nodes: &mut LiveNodeVec, path: &[LiveId])->bool{
2846 match actions.find_widget_action_cast(self.widget_uid()) {
2847 SliderAction::TextSlide(v) | SliderAction::Slide(v) => {
2848 nodes.write_field_value(path, LiveValue::Float64(v as f64));
2849 true
2850 }
2851 _ => false
2852 }
2853 }
2854
2855 fn data_to_widget(&mut self, cx: &mut Cx, nodes:&[LiveNode], path: &[LiveId]){
2856 if let Some(value) = nodes.read_field_value(path) {
2857 if let Some(value) = value.as_float() {
2858 if self.set_internal(value) {
2859 self.redraw(cx)
2860 }
2861 self.update_text_input(cx);
2862 }
2863 }
2864 }
2865
2866 fn text(&self) -> String {
2867 format!("{}", self.to_external())
2868 }
2869
2870 fn set_text(&mut self, cx:&mut Cx, v: &str) {
2871 if let Ok(v) = v.parse::<f64>(){
2872 self.set_internal(v);
2873 self.update_text_input(cx);
2874 }
2875 }
2876
2877}
2878
2879impl SliderRef{
2880 pub fn value(&self)->Option<f64> {
2881 if let Some(inner) = self.borrow(){
2882 return Some(inner.value())
2883 }
2884
2885 return None
2886 }
2887
2888 pub fn set_value(&self, cx:&mut Cx, v: f64) {
2889 if let Some(mut inner) = self.borrow_mut() {
2890 inner.set_value(cx, v)
2891 }
2892 }
2893
2894 pub fn slided(&self, actions:&Actions)->Option<f64>{
2895 if let Some(item) = actions.find_widget_action(self.widget_uid()) {
2896 match item.cast(){
2897 SliderAction::TextSlide(v) | SliderAction::Slide(v) => {
2898 return Some(v)
2899 }
2900 _=>()
2901 }
2902 }
2903 None
2904 }
2905
2906 pub fn end_slide(&self, actions:&Actions)->Option<f64>{
2907 if let Some(item) = actions.find_widget_action(self.widget_uid()) {
2908 match item.cast(){
2909 SliderAction::EndSlide(v) | SliderAction::TextSlide(v) => {
2910 return Some(v)
2911 }
2912 _=>()
2913 }
2914 }
2915 None
2916 }
2917
2918
2919 pub fn label_hover_in(&self, actions:&Actions)->Option<Rect>{
2920 if let Some(item) = actions.find_widget_action(self.widget_uid()) {
2921 match item.cast(){
2922 SliderAction::LabelHoverIn(rect) => Some(rect),
2923 _=> None
2924 }
2925 } else {
2926 None
2927 }
2928 }
2929
2930 pub fn label_hover_out(&self, actions:&Actions)->bool{
2931 if let Some(item) = actions.find_widget_action(self.widget_uid()) {
2932 match item.cast(){
2933 SliderAction::LabelHoverOut => true,
2934 _=> false
2935 }
2936 } else {
2937 false
2938 }
2939 }
2940}