1

// widget_scrollbar.ysl2

     2

     4

    ||

     5

        frequency = 10;

     6

        position = undefined;

     7

        range = undefined;

     8

        size = undefined;

     9

        mincursize = 0.1;

    10

    11

        dispatch(value,oldval, index) {

    12

            switch(index) {

    13

                case 0:

    14

                    this.range = Math.max(1,value);

    15

                    break;

    16

                case 1:

    17

                    this.position = value;

    18

                    break;

    19

                case 2:

    20

                    this.size = value;

    21

                    break;

    22

            }

    23

    24

            this.request_animate();

    25

        }

    26

    27

        get_ratios() {

    28

            let range = this.range;

    29

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

    30

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

    31

            let pixels = maxh;

    32

            let units = range;

    33

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

    34

        }

    35

    36

        animate(){

    37

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

    38

                return;

    39

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

    40

    41

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

    42

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

    43

    44

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

    45

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

    46

        }

    47

    48

        init_mandatory() {

    49

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

    50

    51

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

    52

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

    53

        }

    54

    55

        apply_position(position){

    56

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

    57

            this.apply_hmi_value(1, this.position);

    58

        }

    59

    60

        on_page_click(is_up){

    61

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

    62

                                      : this.position+this.size);

    63

        }

    64

    65

        on_cursor_down(e){

    66

            // get scrollbar -> root transform

    67

            let ctm = this.range_elt.getCTM();

    68

            // relative motion -> discard translation

    69

            ctm.e = 0;

    70

            ctm.f = 0;

    71

            // root -> scrollbar transform

    72

            this.invctm = ctm.inverse();

    73

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

    74

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

    75

            this.dragpos = this.position;

    76

        }

    77

    78

        drop(e) {

    79

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

    80

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

    81

        }

    82

    83

        drag(e) {

    84

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

    85

            if(pixels == 0) return;

    86

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

    87

            let movement = point.matrixTransform(this.invctm).y;

    88

            this.dragpos += movement * units / pixels;

    89

            this.apply_position(this.dragpos);

    90

        }

    91

    ||

    92

}

    93

    95

    param "hmi_element";

    96

    labels("cursor range");

    97

    98

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

    99

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

   100

    value "$pagebuttons";

   101

   102

    |     init: function() {

   103

    |         this.init_mandatory();

   104

   105

    if "$have_pagebuttons" {

   106

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

   107

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

   108

    }

   109

    |     },

   110

}