1 // widget_scrollbar.ysl2

     2 widget_desc("ScrollBar") {

     3     longdesc

     4     || 

     5     ScrollBar - documentation to be written

     6     ||

     7 

     8     shortdesc > ScrollBar

     9 

    10     path name="value" accepts="HMI_INT" > value

    11     path name="range" accepts="HMI_INT" > range

    12     path name="visible" accepts="HMI_INT" > visible

    13     

    14 }

    15 

    16 widget_class("ScrollBar") {

    17     ||

    18         frequency = 10;

    19         position = undefined;

    20         range = undefined;

    21         size = undefined;

    22         mincursize = 0.1;

    23 

    24         dispatch(value,oldval, index) {

    25             switch(index) {

    26                 case 0:

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

    28                     break;

    29                 case 1:

    30                     this.position = value;

    31                     break;

    32                 case 2:

    33                     this.size = value;

    34                     break;

    35             }

    36 

    37             this.request_animate();

    38         }

    39 

    40         get_ratios() {

    41             let range = this.range;

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

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

    44             let pixels = maxh;

    45             let units = range;

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

    47         }

    48 

    49         animate(){

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

    51                 return;

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

    53 

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

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

    56 

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

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

    59         }

    60 

    61         init_mandatory() {

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

    63 

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

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

    66         }

    67 

    68         apply_position(position){

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

    70             this.apply_hmi_value(1, this.position);

    71         }

    72 

    73         on_page_click(is_up){

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

    75                                       : this.position+this.size);

    76         }

    77 

    78         on_cursor_down(e){

    79             // get scrollbar -> root transform

    80             let ctm = this.range_elt.getCTM();

    81             // relative motion -> discard translation

    82             ctm.e = 0;

    83             ctm.f = 0;

    84             // root -> scrollbar transform

    85             this.invctm = ctm.inverse();

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

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

    88             this.dragpos = this.position;

    89         }

    90 

    91         drop(e) {

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

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

    94         }

    95 

    96         drag(e) {

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

    98             if(pixels == 0) return;

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

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

   101             this.dragpos += movement * units / pixels;

   102             this.apply_position(this.dragpos);

   103         }

   104     ||

   105 }

   106 

   107 widget_defs("ScrollBar") {

   108     labels("cursor range");

   109 

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

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

   112     value "$pagebuttons";

   113 

   114     |     init: function() {

   115     |         this.init_mandatory();

   116 

   117     if "$have_pagebuttons" {

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

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

   120     }

   121     |     },

   122 }