1

// widget_scrollbar.ysl2

     2

     3

template "widget[@type='ScrollBar']", mode="widget_class"{

     4

    ||

     5

    class ScrollBarWidget extends Widget{

     6

        frequency = 5;

     7

        position = undefined;

     8

        range = undefined;

     9

        size = undefined;

    10

        mincursize = 0.1;

    11

    12

        dispatch(value,oldval, index) {

    13

            switch(index) {

    14

                case 0:

    15

                    if (Math.round(this.position) != value)

    16

                        this.position = value;

    17

                    break;

    18

                case 1:

    19

                    this.range = value;

    20

                    break;

    21

                case 2:

    22

                    this.size = value;

    23

                    break;

    24

            }

    25

    26

            this.request_animate();

    27

        }

    28

    29

        get_ratios() {

    30

            let range = this.range;

    31

            let size = Math.max(this.range * this.mincursize, Math.min(this.size, range));

    32

            let maxh = this.range_elt.height.baseVal.value;

    33

            let pixels = (range - size) * maxh;

    34

            let units = range*range;

    35

            return [size, maxh, range, pixels, units];

    36

        }

    37

    38

        animate(){

    39

            if(this.position == undefined || this.range == undefined || this.size == undefined)

    40

                return;

    41

            let [size, maxh, range, pixels, units] = this.get_ratios();

    42

    43

            let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range) * pixels / units);

    44

            let new_height = Math.round(maxh * size/range);

    45

            console.log(new_y, new_height);

    46

    47

            this.cursor_elt.y.baseVal.value = new_y;

    48

            this.cursor_elt.height.baseVal.value = new_height;

    49

        }

    50

    51

        init_mandatory() {

    52

            this.cursor_elt.onpointerdown = () => this.on_cursor_down();

    53

    54

            this.bound_drag = this.drag.bind(this);

    55

            this.bound_drop = this.drop.bind(this);

    56

        }

    57

    58

        apply_position(position){

    59

            this.position = Math.max(Math.min(position, this.range), 0);

    60

            this.apply_hmi_value(0, Math.round(this.position));

    61

        }

    62

    63

        on_page_click(is_up){

    64

            this.apply_position(is_up ? this.position-this.size

    65

                                      : this.position+this.size);

    66

        }

    67

    68

        on_cursor_down(e){

    69

            svg_root.addEventListener("pointerup", this.bound_drop, true);

    70

            svg_root.addEventListener("pointermove", this.bound_drag, true);

    71

        }

    72

    73

        drop(e) {

    74

            svg_root.removeEventListener("pointerup", this.bound_drop, true);

    75

            svg_root.removeEventListener("pointermove", this.bound_drag, true);

    76

        }

    77

    78

        drag(e) {

    79

            let [size, maxh, range, pixels, units] = this.get_ratios();

    80

            if(pixels == 0) return;

    81

            let matrix = this.range_elt.getCTM().inverse();

    82

            let point = new DOMPoint(e.movementX, e.movementY);

    83

            let movement = point.matrixTransform(matrix).y;

    84

            this.apply_position(this.position + movement * units / pixels);

    85

        }

    86

    }

    87

    ||

    88

}

    89

    90

template "widget[@type='ScrollBar']", mode="widget_defs" {

    91

    param "hmi_element";

    92

    labels("cursor range");

    93

    94

    const "pagebuttons" optional_labels("pageup pagedown");

    95

    const "have_pagebuttons","string-length($pagebuttons)>0";

    96

    value "$pagebuttons";

    97

    98

    |     init: function() {

    99

    |         this.init_mandatory();

   100

   101

    if "$have_pagebuttons" {

   102

    |         this.pageup_elt.onclick = () => this.on_page_click(true);

   103

    |         this.pagedown_elt.onclick = () => this.on_page_click(false);

   104

    }

   105

    |     },

   106

}