beremiz

SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
svghmi
2020-04-13, Edouard Tisserant
69bb58eb0eac
Parents 5ec1c07ce582
Children 220172cbdcff
SVGHMI: progress on HMI:DropDown - now selects some value on click, and close
2 files changed, 307 insertions(+), 189 deletions(-)
  • +202 -122
    svghmi/gen_index_xhtml.xslt
  • +105 -67
    svghmi/widget_dropdown.ysl2
    • --- a/svghmi/gen_index_xhtml.xslt Sun Apr 12 21:43:42 2020 +0200
    +++ b/svghmi/gen_index_xhtml.xslt Mon Apr 13 18:28:22 2020 +0200
    @@ -827,11 +827,7 @@
    </xsl:call-template>
    <xsl:text> dispatch: function(value) {
    </xsl:text>
    - <xsl:text> let span = this.text_elt.firstElementChild;
    -</xsl:text>
    - <xsl:text> span.textContent = (value &gt;= 0 &amp;&amp; value &lt; this.content.length) ?
    -</xsl:text>
    - <xsl:text> this.content[value] : String(value);
    + <xsl:text> if(!this.opened) this.set_selection(value);
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    @@ -859,19 +855,47 @@
    </xsl:text>
    <xsl:text> //this.content = ["one", "two", "three", "four", "5", "6"];
    </xsl:text>
    - <xsl:text> this.offset = 0;
    + <xsl:text> this.menu_offset = 0;
    </xsl:text>
    <xsl:text> this.lift = 0;
    </xsl:text>
    + <xsl:text> this.opened = false;
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> on_selection_click: function(selection) {
    +</xsl:text>
    + <xsl:text> this.set_selection(selection);
    +</xsl:text>
    <xsl:text> },
    </xsl:text>
    <xsl:text> on_click: function() {
    </xsl:text>
    - <xsl:text> this.open();
    + <xsl:text> if(this.opened){
    +</xsl:text>
    + <xsl:text> this.close();
    +</xsl:text>
    + <xsl:text> }else{
    +</xsl:text>
    + <xsl:text> this.open();
    +</xsl:text>
    + <xsl:text> }
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    - <xsl:text> try_grow_one: function() {
    + <xsl:text> set_selection: function(value) {
    +</xsl:text>
    + <xsl:text> this.text_elt.firstElementChild.textContent =
    +</xsl:text>
    + <xsl:text> (value &gt;= 0 &amp;&amp; value &lt; this.content.length) ?
    +</xsl:text>
    + <xsl:text> this.content[value] : "?"+String(value)+"?";
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> grow_text: function(up_to) {
    +</xsl:text>
    + <xsl:text> let count = 1;
    </xsl:text>
    <xsl:text> let txt = this.text_elt;
    </xsl:text>
    @@ -879,134 +903,172 @@
    </xsl:text>
    <xsl:text> let bounds = svg_root.getBoundingClientRect();
    </xsl:text>
    - <xsl:text> let next = first.cloneNode();
    -</xsl:text>
    - <xsl:text> //next.removeAttribute("x");
    -</xsl:text>
    - <xsl:text> next.removeAttribute("y");
    -</xsl:text>
    - <xsl:text> next.setAttribute("dy", "1.1em");
    -</xsl:text>
    - <xsl:text> next.textContent = "...";
    -</xsl:text>
    - <xsl:text> txt.appendChild(next);
    -</xsl:text>
    - <xsl:text> let rect = txt.getBoundingClientRect();
    -</xsl:text>
    - <xsl:text> console.log("bounds", bounds);
    -</xsl:text>
    - <xsl:text> console.log("rect", rect);
    -</xsl:text>
    - <xsl:text> if(rect.bottom &gt; bounds.bottom){
    -</xsl:text>
    - <xsl:text> let backup = first.getAttribute("dy");
    -</xsl:text>
    - <xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
    -</xsl:text>
    - <xsl:text> rect = txt.getBoundingClientRect();
    -</xsl:text>
    - <xsl:text> if(rect.top &gt; bounds.top){
    -</xsl:text>
    - <xsl:text> console.log("rect2ok", rect);
    -</xsl:text>
    - <xsl:text> this.lift += 1;
    -</xsl:text>
    - <xsl:text> } else {
    -</xsl:text>
    - <xsl:text> console.log("rect2Nok", rect);
    -</xsl:text>
    - <xsl:text> if(backup)
    -</xsl:text>
    - <xsl:text> first.setAttribute("dy", backup);
    -</xsl:text>
    - <xsl:text> else
    -</xsl:text>
    - <xsl:text> first.removeAttribute("dy");
    -</xsl:text>
    - <xsl:text> txt.removeChild(next);
    -</xsl:text>
    - <xsl:text> return false;
    + <xsl:text> this.lift = 0;
    +</xsl:text>
    + <xsl:text> while(count &lt; up_to) {
    +</xsl:text>
    + <xsl:text> let next = first.cloneNode();
    +</xsl:text>
    + <xsl:text> next.removeAttribute("y");
    +</xsl:text>
    + <xsl:text> next.setAttribute("dy", "1.1em");
    +</xsl:text>
    + <xsl:text> next.textContent = "...";
    +</xsl:text>
    + <xsl:text> txt.appendChild(next);
    +</xsl:text>
    + <xsl:text> let rect = txt.getBoundingClientRect();
    +</xsl:text>
    + <xsl:text> if(rect.bottom &gt; bounds.bottom){
    +</xsl:text>
    + <xsl:text> let backup = first.getAttribute("dy");
    +</xsl:text>
    + <xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
    +</xsl:text>
    + <xsl:text> rect = txt.getBoundingClientRect();
    +</xsl:text>
    + <xsl:text> if(rect.top &gt; bounds.top){
    +</xsl:text>
    + <xsl:text> this.lift += 1;
    +</xsl:text>
    + <xsl:text> } else {
    +</xsl:text>
    + <xsl:text> if(backup)
    +</xsl:text>
    + <xsl:text> first.setAttribute("dy", backup);
    +</xsl:text>
    + <xsl:text> else
    +</xsl:text>
    + <xsl:text> first.removeAttribute("dy");
    +</xsl:text>
    + <xsl:text> txt.removeChild(next);
    +</xsl:text>
    + <xsl:text> return count;
    +</xsl:text>
    + <xsl:text> }
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    + <xsl:text> count++;
    +</xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text> return true;
    + <xsl:text> return count;
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> close: function(){
    +</xsl:text>
    + <xsl:text> this.reset_text();
    +</xsl:text>
    + <xsl:text> this.reset_box();
    +</xsl:text>
    + <xsl:text> this.opened = false;
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> set_complete_text: function(){
    +</xsl:text>
    + <xsl:text> let spans = this.text_elt.children;
    +</xsl:text>
    + <xsl:text> let c = 0;
    +</xsl:text>
    + <xsl:text> for(let item of this.content){
    +</xsl:text>
    + <xsl:text> let span=spans[c];
    +</xsl:text>
    + <xsl:text> span.textContent = item;
    +</xsl:text>
    + <xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
    + <xsl:value-of select="$hmi_element/@id"/>
    + <xsl:text>'].on_selection_click("+c+")");
    +</xsl:text>
    + <xsl:text> c++;
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> set_partial_text: function(){
    +</xsl:text>
    + <xsl:text> let spans = this.text_elt.children;
    +</xsl:text>
    + <xsl:text> let length = this.content.length;
    +</xsl:text>
    + <xsl:text> let i = this.menu_offset, c = 0;
    +</xsl:text>
    + <xsl:text> while(c &lt; spans.length){
    +</xsl:text>
    + <xsl:text> if(c == 0 &amp;&amp; i != 0){
    +</xsl:text>
    + <xsl:text> spans[c].textContent = "...";
    +</xsl:text>
    + <xsl:text> /* TODO: set onclick */
    +</xsl:text>
    + <xsl:text> }else if(c == spans.length-1 &amp;&amp; i &lt; length - 1)
    +</xsl:text>
    + <xsl:text> spans[c].textContent = "...";
    +</xsl:text>
    + <xsl:text> /* TODO: set onclick */
    +</xsl:text>
    + <xsl:text> else{
    +</xsl:text>
    + <xsl:text> let span=spans[c];
    +</xsl:text>
    + <xsl:text> span.textContent = this.content[i];
    +</xsl:text>
    + <xsl:text> /* TODO: set onclick */
    +</xsl:text>
    + <xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
    + <xsl:value-of select="$hmi_element/@id"/>
    + <xsl:text>'].on_selection_click("+i+")");
    +</xsl:text>
    + <xsl:text> i++;
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text> c++;
    +</xsl:text>
    + <xsl:text> }
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    <xsl:text> open: function(){
    </xsl:text>
    - <xsl:text> let l = this.content.length;
    -</xsl:text>
    - <xsl:text> let c = 1;
    -</xsl:text>
    - <xsl:text> this.lift = 0;
    -</xsl:text>
    - <xsl:text> this.purge();
    -</xsl:text>
    - <xsl:text> while(c &lt; l &amp;&amp; this.try_grow_one()) c++;
    -</xsl:text>
    - <xsl:text> let spans = Array.from(this.text_elt.children);
    -</xsl:text>
    - <xsl:text> if(c == l) {
    -</xsl:text>
    - <xsl:text> c = 0;
    -</xsl:text>
    - <xsl:text> while(c &lt; l){
    -</xsl:text>
    - <xsl:text> spans[c].textContent = this.content[c];
    -</xsl:text>
    - <xsl:text> c++;
    -</xsl:text>
    - <xsl:text> }
    + <xsl:text> let length = this.content.length;
    +</xsl:text>
    + <xsl:text> this.reset_text();
    +</xsl:text>
    + <xsl:text> let slots = this.grow_text(length);
    +</xsl:text>
    + <xsl:text> if(slots == length) {
    +</xsl:text>
    + <xsl:text> this.set_complete_text();
    </xsl:text>
    <xsl:text> } else {
    </xsl:text>
    - <xsl:text> let slots = c;
    -</xsl:text>
    - <xsl:text> let elipses = [];
    -</xsl:text>
    - <xsl:text> if(this.offset != 0)
    -</xsl:text>
    - <xsl:text> elipses.push(0);
    -</xsl:text>
    - <xsl:text> if(this.offset + slots - elipses.length &lt; l)
    -</xsl:text>
    - <xsl:text> elipses.push(spans.length-1);
    -</xsl:text>
    - <xsl:text> let i = 0;
    -</xsl:text>
    - <xsl:text> c = 0;
    -</xsl:text>
    - <xsl:text> while(c &lt; spans.length){
    -</xsl:text>
    - <xsl:text> if(elipses.indexOf(c) != -1)
    -</xsl:text>
    - <xsl:text> spans[c].textContent = "...";
    -</xsl:text>
    - <xsl:text> else{
    -</xsl:text>
    - <xsl:text> spans[c].textContent = this.content[this.offset + i];
    -</xsl:text>
    - <xsl:text> i++;
    -</xsl:text>
    - <xsl:text> }
    -</xsl:text>
    - <xsl:text> c++;
    -</xsl:text>
    - <xsl:text> }
    + <xsl:text> this.set_partial_text();
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text> this.adjust_to_text();
    + <xsl:text> this.adjust_box_to_text();
    +</xsl:text>
    + <xsl:text> /* TODO disable interaction with background */
    +</xsl:text>
    + <xsl:text> this.opened = true;
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    - <xsl:text> purge: function(){
    + <xsl:text> reset_text: function(){
    </xsl:text>
    <xsl:text> let txt = this.text_elt;
    </xsl:text>
    + <xsl:text> let first = txt.firstElementChild;
    +</xsl:text>
    + <xsl:text> first.removeAttribute("onclick");
    +</xsl:text>
    + <xsl:text> first.removeAttribute("dy");
    +</xsl:text>
    <xsl:text> for(let span of Array.from(txt.children).slice(1)){
    </xsl:text>
    <xsl:text> txt.removeChild(span)
    @@ -1015,19 +1077,37 @@
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    - <xsl:text> adjust_to_text: function(){
    + <xsl:text> reset_box: function(){
    +</xsl:text>
    + <xsl:text> let m = this.box_bbox;
    +</xsl:text>
    + <xsl:text> let b = this.box_elt;
    +</xsl:text>
    + <xsl:text> b.x.baseVal.value = m.x;
    +</xsl:text>
    + <xsl:text> b.y.baseVal.value = m.y;
    +</xsl:text>
    + <xsl:text> b.width.baseVal.value = m.width;
    +</xsl:text>
    + <xsl:text> b.height.baseVal.value = m.height;
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> adjust_box_to_text: function(){
    </xsl:text>
    <xsl:text> let [lmargin, tmargin, rmargin, bmargin] = this.margins;
    </xsl:text>
    <xsl:text> let m = this.text_elt.getBBox();
    </xsl:text>
    - <xsl:text> this.box_elt.x.baseVal.value = m.x - lmargin;
    -</xsl:text>
    - <xsl:text> this.box_elt.y.baseVal.value = m.y - tmargin;
    -</xsl:text>
    - <xsl:text> this.box_elt.width.baseVal.value = lmargin + m.width + rmargin;
    -</xsl:text>
    - <xsl:text> this.box_elt.height.baseVal.value = tmargin + m.height + bmargin;
    + <xsl:text> let b = this.box_elt;
    +</xsl:text>
    + <xsl:text> b.x.baseVal.value = m.x - lmargin;
    +</xsl:text>
    + <xsl:text> b.y.baseVal.value = m.y - tmargin;
    +</xsl:text>
    + <xsl:text> b.width.baseVal.value = lmargin + m.width + rmargin;
    +</xsl:text>
    + <xsl:text> b.height.baseVal.value = tmargin + m.height + bmargin;
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    --- a/svghmi/widget_dropdown.ysl2 Sun Apr 12 21:43:42 2020 +0200
    +++ b/svghmi/widget_dropdown.ysl2 Mon Apr 13 18:28:22 2020 +0200
    @@ -5,9 +5,7 @@
    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);
    + if(!this.opened) this.set_selection(value);
    },
    init: function() {
    this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
    @@ -20,91 +18,131 @@
    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.menu_offset = 0;
    this.lift = 0;
    + this.opened = false;
    + },
    + on_selection_click: function(selection) {
    + this.set_selection(selection);
    },
    on_click: function() {
    - this.open();
    + if(this.opened){
    + this.close();
    + }else{
    + this.open();
    + }
    },
    - try_grow_one: function() {
    + set_selection: function(value) {
    + this.text_elt.firstElementChild.textContent =
    + (value >= 0 && value < this.content.length) ?
    + this.content[value] : "?"+String(value)+"?";
    + },
    + grow_text: function(up_to) {
    + let count = 1;
    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;
    + this.lift = 0;
    + while(count < up_to) {
    + let next = first.cloneNode();
    + next.removeAttribute("y");
    + next.setAttribute("dy", "1.1em");
    + next.textContent = "...";
    + txt.appendChild(next);
    + let rect = txt.getBoundingClientRect();
    + 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){
    + this.lift += 1;
    + } else {
    + if(backup)
    + first.setAttribute("dy", backup);
    + else
    + first.removeAttribute("dy");
    + txt.removeChild(next);
    + return count;
    + }
    }
    + count++;
    }
    - return true;
    + return count;
    + },
    + close: function(){
    + this.reset_text();
    + this.reset_box();
    + this.opened = false;
    + },
    + set_complete_text: function(){
    + let spans = this.text_elt.children;
    + let c = 0;
    + for(let item of this.content){
    + let span=spans[c];
    + span.textContent = item;
    + span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+c+")");
    + c++;
    + }
    + },
    + set_partial_text: function(){
    + let spans = this.text_elt.children;
    + let length = this.content.length;
    + let i = this.menu_offset, c = 0;
    + while(c < spans.length){
    + if(c == 0 && i != 0){
    + spans[c].textContent = "...";
    + /* TODO: set onclick */
    + }else if(c == spans.length-1 && i < length - 1)
    + spans[c].textContent = "...";
    + /* TODO: set onclick */
    + else{
    + let span=spans[c];
    + span.textContent = this.content[i];
    + /* TODO: set onclick */
    + span.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_selection_click("+i+")");
    + i++;
    + }
    + c++;
    + }
    },
    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++;
    - }
    + let length = this.content.length;
    + this.reset_text();
    + let slots = this.grow_text(length);
    + if(slots == length) {
    + this.set_complete_text();
    } 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.set_partial_text();
    }
    - this.adjust_to_text();
    + this.adjust_box_to_text();
    + /* TODO disable interaction with background */
    + this.opened = true;
    },
    - purge: function(){
    + reset_text: function(){
    let txt = this.text_elt;
    + let first = txt.firstElementChild;
    + first.removeAttribute("onclick");
    + first.removeAttribute("dy");
    for(let span of Array.from(txt.children).slice(1)){
    txt.removeChild(span)
    }
    },
    - adjust_to_text: function(){
    + reset_box: function(){
    + let m = this.box_bbox;
    + let b = this.box_elt;
    + b.x.baseVal.value = m.x;
    + b.y.baseVal.value = m.y;
    + b.width.baseVal.value = m.width;
    + b.height.baseVal.value = m.height;
    + },
    + adjust_box_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 b = this.box_elt;
    + b.x.baseVal.value = m.x - lmargin;
    + b.y.baseVal.value = m.y - tmargin;
    + b.width.baseVal.value = lmargin + m.width + rmargin;
    + b.height.baseVal.value = tmargin + m.height + bmargin;
    },
    ||
    }