svghmi/widget_pathslider.ysl2
author Edouard Tisserant
Fri, 21 Oct 2022 10:39:43 +0200
changeset 3648 ff42600fddd7
parent 3454 0b5ab53007a9
permissions -rw-r--r--
SVGHMI: add automatic reconnection of websocket with 1s reconnection delay after first attempt.
3356
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     1
// widget_pathslider.ysl2
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     2
widget_desc("PathSlider") {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     3
    longdesc
3454
0b5ab53007a9 SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents: 3356
diff changeset
     4
    ||
0b5ab53007a9 SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents: 3356
diff changeset
     5
    PathSlider -
3356
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     6
    ||
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     7
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     8
    shortdesc > Slide an SVG element along a path by dragging it
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
     9
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    10
    path name="value" accepts="HMI_INT,HMI_REAL" > value
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    11
    path name="min" count="optional" accepts="HMI_INT,HMI_REAL" > min
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    12
    path name="max" count="optional" accepts="HMI_INT,HMI_REAL" > max
3454
0b5ab53007a9 SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents: 3356
diff changeset
    13
3356
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    14
    arg name="min" count="optional" accepts="int,real" > minimum value
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    15
    arg name="max" count="optional" accepts="int,real" > maximum value
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    16
}
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    17
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    18
widget_class("PathSlider") {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    19
    ||
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    20
        frequency = 10;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    21
        position = undefined;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    22
        min = 0;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    23
        max = 100;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    24
        scannedPoints = [];
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    25
        pathLength = undefined;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    26
        precision = undefined;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    27
        origPt = undefined;
3454
0b5ab53007a9 SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents: 3356
diff changeset
    28
3356
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    29
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    30
        scanPath() {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    31
          this.pathLength = this.path_elt.getTotalLength();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    32
          this.precision = Math.floor(this.pathLength / 10);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    33
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    34
          // save linear scan for coarse approximation
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    35
          for (var scanLength = 0; scanLength <= this.pathLength; scanLength += this.precision) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    36
            this.scannedPoints.push([this.path_elt.getPointAtLength(scanLength), scanLength]);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    37
          }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    38
          [this.origPt,] = this.scannedPoints[0];
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    39
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    40
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    41
        closestPoint(point) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    42
          var bestPoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    43
              bestLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    44
              bestDistance = Infinity,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    45
              scanDistance;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    46
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    47
          // use linear scan for coarse approximation
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    48
          for (let [scanPoint, scanLength] of this.scannedPoints){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    49
            if ((scanDistance = distance2(scanPoint)) < bestDistance) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    50
              bestPoint = scanPoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    51
              bestLength = scanLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    52
              bestDistance = scanDistance;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    53
            }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    54
          }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    55
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    56
          // binary search for more precise estimate
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    57
          let precision = this.precision / 2;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    58
          while (precision > 0.5) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    59
            var beforePoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    60
                afterPoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    61
                beforeLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    62
                afterLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    63
                beforeDistance,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    64
                afterDistance;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    65
            if ((beforeLength = bestLength - precision) >= 0 &&
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    66
                (beforeDistance = distance2(beforePoint = this.path_elt.getPointAtLength(beforeLength))) < bestDistance) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    67
              bestPoint = beforePoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    68
              bestLength = beforeLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    69
              bestDistance = beforeDistance;
3454
0b5ab53007a9 SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents: 3356
diff changeset
    70
            } else if ((afterLength = bestLength + precision) <= this.pathLength &&
3356
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    71
                       (afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) < bestDistance) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    72
              bestPoint = afterPoint,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    73
              bestLength = afterLength,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    74
              bestDistance = afterDistance;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    75
            }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    76
            precision /= 2;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    77
          }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    78
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    79
          return [bestPoint, bestLength];
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    80
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    81
          function distance2(p) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    82
            var dx = p.x - point.x,
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    83
                dy = p.y - point.y;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    84
            return dx * dx + dy * dy;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    85
          }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    86
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    87
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    88
        dispatch(value,oldval, index) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    89
            switch(index) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    90
                case 0:
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    91
                    this.position = value;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    92
                    break;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    93
                case 1:
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    94
                    this.min = value;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    95
                    break;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    96
                case 2:
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    97
                    this.max = value;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    98
                    break;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
    99
            }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   100
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   101
            this.request_animate();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   102
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   103
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   104
        get_current_point(){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   105
            let currLength = this.pathLength * (this.position - this.min) / (this.max - this.min)
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   106
            return this.path_elt.getPointAtLength(currLength);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   107
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   108
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   109
        animate(){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   110
            if(this.position == undefined)
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   111
                return;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   112
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   113
            let currPt = this.get_current_point();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   114
            this.cursor_transform.setTranslate(currPt.x - this.origPt.x, currPt.y - this.origPt.y);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   115
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   116
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   117
        init() {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   118
            if(this.args.length == 2)
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   119
                [this.min, this.max]=this.args;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   120
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   121
            this.scanPath();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   122
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   123
            this.cursor_transform = svg_root.createSVGTransform();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   124
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   125
            this.cursor_elt.transform.baseVal.appendItem(this.cursor_transform);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   126
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   127
            this.cursor_elt.onpointerdown = (e) => this.on_cursor_down(e);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   128
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   129
            this.bound_drag = this.drag.bind(this);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   130
            this.bound_drop = this.drop.bind(this);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   131
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   132
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   133
        start_dragging_from_event(e){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   134
            let clientPoint = new DOMPoint(e.clientX, e.clientY);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   135
            let point = clientPoint.matrixTransform(this.invctm);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   136
            let currPt = this.get_current_point();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   137
            this.draggingOffset = new DOMPoint(point.x - currPt.x , point.y - currPt.y);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   138
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   139
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   140
        apply_position_from_event(e){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   141
            let clientPoint = new DOMPoint(e.clientX, e.clientY);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   142
            let rawPoint = clientPoint.matrixTransform(this.invctm);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   143
            let point = new DOMPoint(rawPoint.x - this.draggingOffset.x , rawPoint.y - this.draggingOffset.y);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   144
            let [closestPoint, closestLength] = this.closestPoint(point);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   145
            let new_position = this.min + (this.max - this.min) * closestLength / this.pathLength;
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   146
            this.position = Math.round(Math.max(Math.min(new_position, this.max), this.min));
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   147
            this.apply_hmi_value(0, this.position);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   148
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   149
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   150
        on_cursor_down(e){
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   151
            // get scrollbar -> root transform
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   152
            let ctm = this.path_elt.getCTM();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   153
            // root -> path transform
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   154
            this.invctm = ctm.inverse();
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   155
            this.start_dragging_from_event(e);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   156
            svg_root.addEventListener("pointerup", this.bound_drop, true);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   157
            svg_root.addEventListener("pointermove", this.bound_drag, true);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   158
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   159
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   160
        drop(e) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   161
            svg_root.removeEventListener("pointerup", this.bound_drop, true);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   162
            svg_root.removeEventListener("pointermove", this.bound_drag, true);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   163
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   164
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   165
        drag(e) {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   166
            this.apply_position_from_event(e);
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   167
        }
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   168
    ||
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   169
}
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   170
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   171
widget_defs("PathSlider") {
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   172
    labels("cursor path");
2507e35976c0 SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff changeset
   173
}