Tests: fix project edit test sikuli IDE test.
Background click based on bitmap matching doesn't work.
Grid dots are not good match candidates.
Rendering probably affected by virtual display's bpp or rasterizer approximations.
// 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");
}