// widget_pathslider.ysl2

widget_desc("PathSlider") {

longdesc

||

PathSlider -

||

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

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

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

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

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

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

}

widget_class("PathSlider") {

||

frequency = 10;

position = undefined;

min = 0;

max = 100;

scannedPoints = [];

pathLength = undefined;

precision = undefined;

origPt = undefined;

scanPath() {

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

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

// save linear scan for coarse approximation

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

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

}

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

}

closestPoint(point) {

var bestPoint,

bestLength,

bestDistance = Infinity,

scanDistance;

// use linear scan for coarse approximation

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

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

bestPoint = scanPoint,

bestLength = scanLength,

bestDistance = scanDistance;

}

}

// binary search for more precise estimate

let precision = this.precision / 2;

while (precision > 0.5) {

var beforePoint,

afterPoint,

beforeLength,

afterLength,

beforeDistance,

afterDistance;

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

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

bestPoint = beforePoint,

bestLength = beforeLength,

bestDistance = beforeDistance;

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

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

bestPoint = afterPoint,

bestLength = afterLength,

bestDistance = afterDistance;

}

precision /= 2;

}

return [bestPoint, bestLength];

function distance2(p) {

var dx = p.x - point.x,

dy = p.y - point.y;

return dx * dx + dy * dy;

}

}

dispatch(value,oldval, index) {

switch(index) {

case 0:

this.position = value;

break;

case 1:

this.min = value;

break;

case 2:

this.max = value;

break;

}

this.request_animate();

}

get_current_point(){

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

return this.path_elt.getPointAtLength(currLength);

}

animate(){

if(this.position == undefined)

return;

let currPt = this.get_current_point();

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

}

init() {

if(this.args.length == 2)

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

this.scanPath();

this.cursor_transform = svg_root.createSVGTransform();

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

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

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

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

}

start_dragging_from_event(e){

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

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

let currPt = this.get_current_point();

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

}

apply_position_from_event(e){

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

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

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

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

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

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

this.apply_hmi_value(0, this.position);

}

on_cursor_down(e){

// get scrollbar -> root transform

let ctm = this.path_elt.getCTM();

// root -> path transform

this.invctm = ctm.inverse();

this.start_dragging_from_event(e);

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

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

}

drop(e) {

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

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

}

drag(e) {

this.apply_position_from_event(e);

}

||

}

widget_defs("PathSlider") {

labels("cursor path");

}