RUNTIME: Variable trace now uses limited list and buffer instead of flags in instance tree that was requiring systematical instance tree traversal, and worst size buffer. Forcing and retain still use tree traversal.
// 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");
}