--- a/src/widgets/Arrow.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Arrow.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,88 +1,145 @@
-IriSP.Widgets.Arrow = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
- this.current_pilot_widget = this.pilot_widget
-};
+import Raphael from "raphael";
-IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
+// Arrow
+const Arrow = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ this.current_pilot_widget = this.pilot_widget;
+ }
-IriSP.Widgets.Arrow.prototype.defaults = {
- arrow_height : 12,
- arrow_width : 20,
- base_height : 0,
- base_curve : 0,
- fill_url: IriSP.widgetsDir + '/img/pinstripe.png',
- fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
- stroke_color: "#b7b7b7",
- stroke_width: 1.5,
- animation_speed: 20
-};
+ static defaults = {
+ arrow_height: 12,
+ arrow_width: 20,
+ base_height: 0,
+ base_curve: 0,
+ fill_url: ns.widgetsDir + "/img/pinstripe.png",
+ fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
+ stroke_color: "#b7b7b7",
+ stroke_width: 1.5,
+ animation_speed: 20,
+ };
-IriSP.Widgets.Arrow.prototype.draw = function() {
- this.height = this.arrow_height + this.base_height;
- this.$.addClass("Ldt-Arrow").css({
- height: (1+this.height) + "px",
+ draw() {
+ this.height = this.arrow_height + this.base_height;
+ this.$.addClass("Ldt-Arrow").css({
+ height: 1 + this.height + "px",
"margin-top": "1px",
- overflow: "hidden"
- });
- this.paper = new Raphael(this.container, this.width, 1+this.height );
- window.myArrow = this;
- this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
- this.svgArrow.attr({
+ overflow: "hidden",
+ });
+ this.paper = new Raphael(this.container, this.width, 1 + this.height);
+ window.myArrow = this;
+ this.svgArrow = this.paper.path(
+ "M0," + this.height + "L" + this.width + "," + this.height
+ );
+ this.svgArrow.attr({
stroke: this.stroke_color,
"stroke-width": this.stroke_width,
- fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
- });
- this.moveToX(0);
+ fill: this.fill_url ? "url(" + this.fill_url + ")" : this.fill_color,
+ });
+ this.moveToX(0);
+ }
+
+ drawAt(_x) {
+ _x = Math.max(0, Math.min(_x, this.width));
+ var _d =
+ "M0," +
+ this.height +
+ "L0," +
+ Math.min(this.height, this.arrow_height + this.base_curve) +
+ "Q0," +
+ this.arrow_height +
+ " " +
+ Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) +
+ "," +
+ this.arrow_height +
+ "L" +
+ Math.max(0, _x - this.arrow_width / 2) +
+ "," +
+ this.arrow_height +
+ "L" +
+ Math.max(0, _x - this.arrow_width / 2) +
+ "," +
+ Math.min(
+ this.arrow_height,
+ (2 * this.arrow_height * _x) / this.arrow_width
+ ) +
+ "L" +
+ _x +
+ ",0" +
+ "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
+ ) +
+ "L" +
+ Math.min(this.width, _x + this.arrow_width / 2) +
+ "," +
+ this.arrow_height +
+ "L" +
+ Math.min(
+ this.width,
+ Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)
+ ) +
+ "," +
+ this.arrow_height +
+ "Q" +
+ this.width +
+ "," +
+ this.arrow_height +
+ " " +
+ this.width +
+ "," +
+ Math.min(this.height, this.arrow_height + this.base_curve) +
+ "L" +
+ this.width +
+ "," +
+ this.height;
+ this.svgArrow.attr({
+ path: _d,
+ });
+ }
+
+ moveToX(_x) {
+ this.targetX = Math.max(0, Math.min(_x, this.width));
+ if (typeof this.animInterval === "undefined") {
+ this.animInterval = window.setInterval(
+ this.functionWrapper("increment"),
+ 40
+ );
+ }
+ this.increment();
+ }
+
+ moveToTime(_t) {
+ this.moveToX((this.width * _t) / this.media.duration);
+ }
+
+ increment() {
+ if (typeof this.currentX === "undefined") {
+ this.currentX = this.targetX;
+ }
+ if (this.currentX < this.targetX) {
+ this.currentX = Math.min(
+ this.targetX,
+ this.currentX + this.animation_speed
+ );
+ }
+ if (this.currentX > this.targetX) {
+ this.currentX = Math.max(
+ this.targetX,
+ this.currentX - this.animation_speed
+ );
+ }
+ if (this.currentX === this.targetX) {
+ window.clearInterval(this.animInterval);
+ this.animInterval = undefined;
+ }
+ this.drawAt(this.currentX);
+ }
+ };
};
-IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
- _x = Math.max(0, Math.min(_x, this.width));
- var _d = 'M0,' + this.height
- + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)
- + 'Q0,' + this.arrow_height
- + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height
- + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height
- + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * _x / this.arrow_width)
- + 'L' + _x + ',0'
- + '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)
- + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height
- + 'L' + Math.min(this.width, Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)) + ',' + this.arrow_height
- + 'Q' + this.width + ',' + this.arrow_height
- + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve)
- + 'L' + this.width + ',' + this.height;
- this.svgArrow.attr({
- path: _d
- });
-};
-
-IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {
- this.targetX = Math.max(0, Math.min(_x, this.width));
- if (typeof this.animInterval === "undefined") {
- this.animInterval = window.setInterval(
- this.functionWrapper("increment"),
- 40
- );
- }
- this.increment();
-};
-
-IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) {
- this.moveToX(this.width * _t / this.media.duration);
-};
-
-IriSP.Widgets.Arrow.prototype.increment = function() {
- if (typeof this.currentX === "undefined") {
- this.currentX = this.targetX;
- }
- if (this.currentX < this.targetX) {
- this.currentX = Math.min(this.targetX, this.currentX + this.animation_speed);
- }
- if (this.currentX > this.targetX) {
- this.currentX = Math.max(this.targetX, this.currentX - this.animation_speed);
- }
- if (this.currentX === this.targetX) {
- window.clearInterval(this.animInterval);
- this.animInterval = undefined;
- }
- this.drawAt(this.currentX);
-};
+export { Arrow };