HGKeeper

// widget_dropdown.ysl2

template "widget[@type='DropDown']", mode="widget_defs" {

param "hmi_element";

labels("text box");

dispatch: function(value) {

let span = this.text_elt.firstElementChild;

span.textContent = (value >= 0 && value < this.content.length) ?

this.content[value] : String(value);

init: function() {

this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");

this.text_bbox = this.text_elt.getBBox()

this.box_bbox = this.box_elt.getBBox()

lmargin = this.text_bbox.x - this.box_bbox.x;

tmargin = this.text_bbox.y - this.box_bbox.y;

rmargin = this.box_bbox.width - this.text_bbox.width - lmargin;

bmargin = this.box_bbox.height - this.text_bbox.height - tmargin;

this.margins = [lmargin, tmargin, rmargin, bmargin].map(x => Math.max(x,0));

this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];

//this.content = ["one", "two", "three", "four", "5", "6"];

this.offset = 0;

this.lift = 0;

on_click: function() {

this.open();

try_grow_one: function() {

let txt = this.text_elt;

let first = txt.firstElementChild;

let bounds = svg_root.getBoundingClientRect();

let next = first.cloneNode();

//next.removeAttribute("x");

next.removeAttribute("y");

next.setAttribute("dy", "1.1em");

next.textContent = "...";

txt.appendChild(next);

let rect = txt.getBoundingClientRect();

console.log("bounds", bounds);

console.log("rect", rect);

if(rect.bottom > bounds.bottom){

let backup = first.getAttribute("dy");

first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");

rect = txt.getBoundingClientRect();

if(rect.top > bounds.top){

console.log("rect2ok", rect);

this.lift += 1;

} else {

console.log("rect2Nok", rect);

if(backup)

first.setAttribute("dy", backup);

else

first.removeAttribute("dy");

txt.removeChild(next);

return false;

}

return true;

open: function(){

let l = this.content.length;

let c = 1;

this.lift = 0;

this.purge();

while(c < l && this.try_grow_one()) c++;

let spans = Array.from(this.text_elt.children);

if(c == l) {

c = 0;

while(c < l){

spans[c].textContent = this.content[c];

c++;

}

} else {

let slots = c;

let elipses = [];

if(this.offset != 0)

elipses.push(0);

if(this.offset + slots - elipses.length < l)

elipses.push(spans.length-1);

let i = 0;

c = 0;

while(c < spans.length){

if(elipses.indexOf(c) != -1)

spans[c].textContent = "...";

else{

spans[c].textContent = this.content[this.offset + i];

i++;

}

c++;

}

this.adjust_to_text();

purge: function(){

let txt = this.text_elt;

for(let span of Array.from(txt.children).slice(1)){

txt.removeChild(span)

}

adjust_to_text: function(){

let [lmargin, tmargin, rmargin, bmargin] = this.margins;

let m = this.text_elt.getBBox();

this.box_elt.x.baseVal.value = m.x - lmargin;

this.box_elt.y.baseVal.value = m.y - tmargin;

this.box_elt.width.baseVal.value = lmargin + m.width + rmargin;

this.box_elt.height.baseVal.value = tmargin + m.height + bmargin;

}

// | let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);

// | let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());

// | let new_corner = k.transformPoint(p);

// | new_corner.y = 0;

// | let nc = k.inverse().transformPoint(new_corner);

// | this.box_elt.x.baseVal.value = nc.x;

// | this.box_elt.y.baseVal.value = nc.y;

beremiz