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 }