1 IriSP.Widgets.Arrow = function(player, config) {

     1 import Raphael from "raphael";

     2     IriSP.Widgets.Widget.call(this, player, config);

     2 

     3     this.current_pilot_widget = this.pilot_widget

     3 // Arrow

     4 const Arrow = function (ns) {

     5   return class extends ns.Widgets.Widget {

     6     constructor(player, config) {

     7       super(player, config);

     8       this.current_pilot_widget = this.pilot_widget;

     9     }

    10 

    11     static defaults = {

    12       arrow_height: 12,

    13       arrow_width: 20,

    14       base_height: 0,

    15       base_curve: 0,

    16       fill_url: ns.widgetsDir + "/img/pinstripe.png",

    17       fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black

    18       stroke_color: "#b7b7b7",

    19       stroke_width: 1.5,

    20       animation_speed: 20,

    21     };

    22 

    23     draw() {

    24       this.height = this.arrow_height + this.base_height;

    25       this.$.addClass("Ldt-Arrow").css({

    26         height: 1 + this.height + "px",

    27         "margin-top": "1px",

    28         overflow: "hidden",

    29       });

    30       this.paper = new Raphael(this.container, this.width, 1 + this.height);

    31       window.myArrow = this;

    32       this.svgArrow = this.paper.path(

    33         "M0," + this.height + "L" + this.width + "," + this.height

    34       );

    35       this.svgArrow.attr({

    36         stroke: this.stroke_color,

    37         "stroke-width": this.stroke_width,

    38         fill: this.fill_url ? "url(" + this.fill_url + ")" : this.fill_color,

    39       });

    40       this.moveToX(0);

    41     }

    42 

    43     drawAt(_x) {

    44       _x = Math.max(0, Math.min(_x, this.width));

    45       var _d =

    46         "M0," +

    47         this.height +

    48         "L0," +

    49         Math.min(this.height, this.arrow_height + this.base_curve) +

    50         "Q0," +

    51         this.arrow_height +

    52         " " +

    53         Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) +

    54         "," +

    55         this.arrow_height +

    56         "L" +

    57         Math.max(0, _x - this.arrow_width / 2) +

    58         "," +

    59         this.arrow_height +

    60         "L" +

    61         Math.max(0, _x - this.arrow_width / 2) +

    62         "," +

    63         Math.min(

    64           this.arrow_height,

    65           (2 * this.arrow_height * _x) / this.arrow_width

    66         ) +

    67         "L" +

    68         _x +

    69         ",0" +

    70         "L" +

    71         Math.min(this.width, _x + this.arrow_width / 2) +

    72         "," +

    73         Math.min(

    74           this.arrow_height,

    75           (2 * this.arrow_height * (this.width - _x)) / this.arrow_width

    76         ) +

    77         "L" +

    78         Math.min(this.width, _x + this.arrow_width / 2) +

    79         "," +

    80         this.arrow_height +

    81         "L" +

    82         Math.min(

    83           this.width,

    84           Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)

    85         ) +

    86         "," +

    87         this.arrow_height +

    88         "Q" +

    89         this.width +

    90         "," +

    91         this.arrow_height +

    92         " " +

    93         this.width +

    94         "," +

    95         Math.min(this.height, this.arrow_height + this.base_curve) +

    96         "L" +

    97         this.width +

    98         "," +

    99         this.height;

   100       this.svgArrow.attr({

   101         path: _d,

   102       });

   103     }

   104 

   105     moveToX(_x) {

   106       this.targetX = Math.max(0, Math.min(_x, this.width));

   107       if (typeof this.animInterval === "undefined") {

   108         this.animInterval = window.setInterval(

   109           this.functionWrapper("increment"),

   110           40

   111         );

   112       }

   113       this.increment();

   114     }

   115 

   116     moveToTime(_t) {

   117       this.moveToX((this.width * _t) / this.media.duration);

   118     }

   119 

   120     increment() {

   121       if (typeof this.currentX === "undefined") {

   122         this.currentX = this.targetX;

   123       }

   124       if (this.currentX < this.targetX) {

   125         this.currentX = Math.min(

   126           this.targetX,

   127           this.currentX + this.animation_speed

   128         );

   129       }

   130       if (this.currentX > this.targetX) {

   131         this.currentX = Math.max(

   132           this.targetX,

   133           this.currentX - this.animation_speed

   134         );

   135       }

   136       if (this.currentX === this.targetX) {

   137         window.clearInterval(this.animInterval);

   138         this.animInterval = undefined;

   139       }

   140       this.drawAt(this.currentX);

   141     }

   142   };

     6 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();

   145 export { Arrow };

     7 

     8 IriSP.Widgets.Arrow.prototype.defaults = {

     9     arrow_height : 12,

    10     arrow_width : 20,

    11     base_height : 0,

    12     base_curve : 0,

    13     fill_url: IriSP.widgetsDir + '/img/pinstripe.png',

    14     fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black

    15     stroke_color: "#b7b7b7",

    16     stroke_width: 1.5,

    17     animation_speed: 20

    18 };

    19 

    20 IriSP.Widgets.Arrow.prototype.draw = function() {

    21     this.height = this.arrow_height + this.base_height;

    22     this.$.addClass("Ldt-Arrow").css({

    23         height: (1+this.height) + "px",

    24         "margin-top": "1px",

    25         overflow: "hidden"

    26     });

    27     this.paper = new Raphael(this.container, this.width, 1+this.height );

    28     window.myArrow = this;

    29     this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);

    30     this.svgArrow.attr({

    31         stroke: this.stroke_color,

    32         "stroke-width": this.stroke_width,

    33         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color

    34     });

    35     this.moveToX(0);

    36 };

    37 

    38 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {

    39     _x = Math.max(0, Math.min(_x, this.width));

    40     var _d = 'M0,' + this.height

    41         + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)

    42         + 'Q0,' + this.arrow_height

    43         + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height

    44         + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height

    45         + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * _x / this.arrow_width)

    46         + 'L' + _x + ',0'

    47         + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * ( this.width - _x ) / this.arrow_width)

    48         + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height

    49         + 'L' + Math.min(this.width, Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)) + ',' + this.arrow_height

    50         + 'Q' + this.width + ',' + this.arrow_height

    51         + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve)

    52         + 'L' + this.width + ',' + this.height;

    53     this.svgArrow.attr({

    54         path: _d

    55     });

    56 };

    57 

    58 IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {

    59     this.targetX = Math.max(0, Math.min(_x, this.width));

    60     if (typeof this.animInterval === "undefined") {

    61         this.animInterval = window.setInterval(

    62             this.functionWrapper("increment"),

    63             40

    64         );

    65     }

    66     this.increment();

    67 };

    68 

    69 IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) {

    70     this.moveToX(this.width * _t / this.media.duration);

    71 };

    72 

    73 IriSP.Widgets.Arrow.prototype.increment = function() {

    74     if (typeof this.currentX === "undefined") {

    75         this.currentX = this.targetX;

    76     }

    77     if (this.currentX < this.targetX) {

    78         this.currentX = Math.min(this.targetX, this.currentX + this.animation_speed);

    79     }

    80     if (this.currentX > this.targetX) {

    81         this.currentX = Math.max(this.targetX, this.currentX - this.animation_speed);

    82     }

    83     if (this.currentX === this.targetX) {

    84         window.clearInterval(this.animInterval);

    85         this.animInterval = undefined;

    86     }

    87     this.drawAt(this.currentX);

    88 };