beremiz

SVGHMI: remove intermediate "updates" Map and apply_updates()

2022-09-22, Edouard Tisserant
770c613c424f
SVGHMI: remove intermediate "updates" Map and apply_updates()

It was used initially to decouple DOM updates from reception of data through
websocket, but now since all widget SHOULD use animate() to modify DOM, and
dispatch() only change internal state, apply_update is unnecessary.
// widget_scrollbar.ysl2
widget_desc("ScrollBar") {
longdesc
||
ScrollBar - svg:rect based scrollbar
||
shortdesc > ScrollBar
path name="value" accepts="HMI_INT" > value
path name="range" accepts="HMI_INT" > range
path name="visible" accepts="HMI_INT" > visible
}
widget_class("ScrollBar") {
||
frequency = 10;
position = undefined;
range = undefined;
size = undefined;
mincursize = 0.1;
dispatch(value,oldval, index) {
switch(index) {
case 0:
this.range = Math.max(1,value);
break;
case 1:
this.position = value;
break;
case 2:
this.size = value;
break;
}
this.request_animate();
}
get_ratios() {
let range = this.range;
let size = Math.max(range * this.mincursize, Math.min(this.size, range));
let maxh = this.range_elt.height.baseVal.value;
let pixels = maxh;
return [size, maxh, range, pixels];
}
animate(){
if(this.position == undefined || this.range == undefined || this.size == undefined)
return;
let [size, maxh, range, pixels] = this.get_ratios();
let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range-size) * pixels / range);
let new_height = Math.round(maxh * size/range);
this.cursor_elt.y.baseVal.value = new_y;
this.cursor_elt.height.baseVal.value = new_height;
}
init_mandatory() {
this.cursor_elt.onpointerdown = () => this.on_cursor_down();
this.bound_drag = this.drag.bind(this);
this.bound_drop = this.drop.bind(this);
}
apply_position(position){
this.position = Math.round(Math.max(Math.min(position, this.range - this.size), 0));
this.apply_hmi_value(1, this.position);
}
on_page_click(is_up){
this.apply_position(is_up ? this.position-this.size
: this.position+this.size);
}
on_cursor_down(e){
// get scrollbar -> root transform
let ctm = this.range_elt.getCTM();
// relative motion -> discard translation
ctm.e = 0;
ctm.f = 0;
// root -> scrollbar transform
this.invctm = ctm.inverse();
svg_root.addEventListener("pointerup", this.bound_drop, true);
svg_root.addEventListener("pointermove", this.bound_drag, true);
this.dragpos = this.position;
}
drop(e) {
svg_root.removeEventListener("pointerup", this.bound_drop, true);
svg_root.removeEventListener("pointermove", this.bound_drag, true);
}
drag(e) {
let [size, maxh, range, pixels] = this.get_ratios();
if(pixels == 0) return;
let point = new DOMPoint(e.movementX, e.movementY);
let movement = point.matrixTransform(this.invctm).y;
this.dragpos += movement * range / pixels;
this.apply_position(this.dragpos);
}
||
}
widget_defs("ScrollBar") {
labels("cursor range");
const "pagebuttons" optional_labels("pageup pagedown");
const "have_pagebuttons","string-length($pagebuttons)>0";
value "$pagebuttons";
| init: function() {
| this.init_mandatory();
if "$have_pagebuttons" {
| this.pageup_elt.onclick = () => this.on_page_click(true);
| this.pagedown_elt.onclick = () => this.on_page_click(false);
}
| },
}