1

// widget_pathslider.ysl2

     2

widget_desc("PathSlider") {

     3

    longdesc

     4

    || 

     5

    PathSlider - 

     6

    ||

     7

     8

    shortdesc > Slide an SVG element along a path by dragging it

     9

    10

    path name="value" accepts="HMI_INT,HMI_REAL" > value

    11

    path name="min" count="optional" accepts="HMI_INT,HMI_REAL" > min

    12

    path name="max" count="optional" accepts="HMI_INT,HMI_REAL" > max

    13

    14

    arg name="min" count="optional" accepts="int,real" > minimum value

    15

    arg name="max" count="optional" accepts="int,real" > maximum value

    16

}

    17

    18

widget_class("PathSlider") {

    19

    ||

    20

        frequency = 10;

    21

        position = undefined;

    22

        min = 0;

    23

        max = 100;

    24

        scannedPoints = [];

    25

        pathLength = undefined;

    26

        precision = undefined;

    27

        origPt = undefined;

    28

    29

    30

        scanPath() {

    31

          this.pathLength = this.path_elt.getTotalLength();

    32

          this.precision = Math.floor(this.pathLength / 10);

    33

    34

          // save linear scan for coarse approximation

    35

          for (var scanLength = 0; scanLength <= this.pathLength; scanLength += this.precision) {

    36

            this.scannedPoints.push([this.path_elt.getPointAtLength(scanLength), scanLength]);

    37

          }

    38

          [this.origPt,] = this.scannedPoints[0];

    39

        }

    40

    41

        closestPoint(point) {

    42

          var bestPoint,

    43

              bestLength,

    44

              bestDistance = Infinity,

    45

              scanDistance;

    46

    47

          // use linear scan for coarse approximation

    48

          for (let [scanPoint, scanLength] of this.scannedPoints){

    49

            if ((scanDistance = distance2(scanPoint)) < bestDistance) {

    50

              bestPoint = scanPoint,

    51

              bestLength = scanLength,

    52

              bestDistance = scanDistance;

    53

            }

    54

          }

    55

    56

          // binary search for more precise estimate

    57

          let precision = this.precision / 2;

    58

          while (precision > 0.5) {

    59

            var beforePoint,

    60

                afterPoint,

    61

                beforeLength,

    62

                afterLength,

    63

                beforeDistance,

    64

                afterDistance;

    65

            if ((beforeLength = bestLength - precision) >= 0 &&

    66

                (beforeDistance = distance2(beforePoint = this.path_elt.getPointAtLength(beforeLength))) < bestDistance) {

    67

              bestPoint = beforePoint,

    68

              bestLength = beforeLength,

    69

              bestDistance = beforeDistance;

    70

            } else if ((afterLength = bestLength + precision) <= this.pathLength && 

    71

                       (afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) < bestDistance) {

    72

              bestPoint = afterPoint,

    73

              bestLength = afterLength,

    74

              bestDistance = afterDistance;

    75

            }

    76

            precision /= 2;

    77

          }

    78

    79

          return [bestPoint, bestLength];

    80

    81

          function distance2(p) {

    82

            var dx = p.x - point.x,

    83

                dy = p.y - point.y;

    84

            return dx * dx + dy * dy;

    85

          }

    86

        }

    87

    88

        dispatch(value,oldval, index) {

    89

            switch(index) {

    90

                case 0:

    91

                    this.position = value;

    92

                    break;

    93

                case 1:

    94

                    this.min = value;

    95

                    break;

    96

                case 2:

    97

                    this.max = value;

    98

                    break;

    99

            }

   100

   101

            this.request_animate();

   102

        }

   103

   104

        get_current_point(){

   105

            let currLength = this.pathLength * (this.position - this.min) / (this.max - this.min)

   106

            return this.path_elt.getPointAtLength(currLength);

   107

        }

   108

   109

        animate(){

   110

            if(this.position == undefined)

   111

                return;

   112

   113

            let currPt = this.get_current_point();

   114

            this.cursor_transform.setTranslate(currPt.x - this.origPt.x, currPt.y - this.origPt.y);

   115

        }

   116

   117

        init() {

   118

            if(this.args.length == 2)

   119

                [this.min, this.max]=this.args;

   120

   121

            this.scanPath();

   122

   123

            this.cursor_transform = svg_root.createSVGTransform();

   124

   125

            this.cursor_elt.transform.baseVal.appendItem(this.cursor_transform);

   126

   127

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

   128

   129

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

   130

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

   131

        }

   132

   133

        start_dragging_from_event(e){

   134

            let clientPoint = new DOMPoint(e.clientX, e.clientY);

   135

            let point = clientPoint.matrixTransform(this.invctm);

   136

            let currPt = this.get_current_point();

   137

            this.draggingOffset = new DOMPoint(point.x - currPt.x , point.y - currPt.y);

   138

        }

   139

   140

        apply_position_from_event(e){

   141

            let clientPoint = new DOMPoint(e.clientX, e.clientY);

   142

            let rawPoint = clientPoint.matrixTransform(this.invctm);

   143

            let point = new DOMPoint(rawPoint.x - this.draggingOffset.x , rawPoint.y - this.draggingOffset.y);

   144

            let [closestPoint, closestLength] = this.closestPoint(point);

   145

            let new_position = this.min + (this.max - this.min) * closestLength / this.pathLength;

   146

            this.position = Math.round(Math.max(Math.min(new_position, this.max), this.min));

   147

            this.apply_hmi_value(0, this.position);

   148

        }

   149

   150

        on_cursor_down(e){

   151

            // get scrollbar -> root transform

   152

            let ctm = this.path_elt.getCTM();

   153

            // root -> path transform

   154

            this.invctm = ctm.inverse();

   155

            this.start_dragging_from_event(e);

   156

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

   157

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

   158

        }

   159

   160

        drop(e) {

   161

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

   162

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

   163

        }

   164

   165

        drag(e) {

   166

            this.apply_position_from_event(e);

   167

        }

   168

    ||

   169

}

   170

   171

widget_defs("PathSlider") {

   172

    labels("cursor path");

   173

}