# HG changeset patch
# User Edouard Tisserant <edouard.tisserant@gmail.com>
# Date 1586720622 -7200
# Node ID 5ec1c07ce582f6b4d8df36e4bb294025d3f59c1e
# Parent  ddce4ebdf01098e7b4e3581f64d2e63bbc3f9e5b
SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.

diff -r ddce4ebdf010 -r 5ec1c07ce582 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Thu Apr 09 09:52:34 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Sun Apr 12 21:43:42 2020 +0200
@@ -827,7 +827,11 @@
     </xsl:call-template>
     <xsl:text>    dispatch: function(value) {
 </xsl:text>
-    <xsl:text>        this.text_elt.textContent = String(value);
+    <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>
     <xsl:text>    },
 </xsl:text>
@@ -837,31 +841,193 @@
     <xsl:value-of select="$hmi_element/@id"/>
     <xsl:text>'].on_click()");
 </xsl:text>
-    <xsl:text>    },
-</xsl:text>
-    <xsl:variable name="box_elt" select="$hmi_element/*[@inkscape:label='box'][1]"/>
-    <xsl:variable name="g" select="$geometry[@Id = $box_elt/@id]"/>
-    <xsl:text>    original_box: [</xsl:text>
-    <xsl:value-of select="$g/@x"/>
-    <xsl:text>, </xsl:text>
-    <xsl:value-of select="$g/@y"/>
-    <xsl:text>, </xsl:text>
-    <xsl:value-of select="$g/@w"/>
-    <xsl:text>, </xsl:text>
-    <xsl:value-of select="$g/@h"/>
-    <xsl:text>],
+    <xsl:text>        this.text_bbox = this.text_elt.getBBox()
+</xsl:text>
+    <xsl:text>        this.box_bbox = this.box_elt.getBBox()
+</xsl:text>
+    <xsl:text>        lmargin = this.text_bbox.x - this.box_bbox.x;
+</xsl:text>
+    <xsl:text>        tmargin = this.text_bbox.y - this.box_bbox.y;
+</xsl:text>
+    <xsl:text>        rmargin = this.box_bbox.width - this.text_bbox.width - lmargin;
+</xsl:text>
+    <xsl:text>        bmargin = this.box_bbox.height - this.text_bbox.height - tmargin;
+</xsl:text>
+    <xsl:text>        this.margins = [lmargin, tmargin, rmargin, bmargin].map(x =&gt; Math.max(x,0));
+</xsl:text>
+    <xsl:text>        this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
+</xsl:text>
+    <xsl:text>        //this.content = ["one", "two", "three", "four", "5", "6"];
+</xsl:text>
+    <xsl:text>        this.offset = 0;
+</xsl:text>
+    <xsl:text>        this.lift = 0;
+</xsl:text>
+    <xsl:text>    },
 </xsl:text>
     <xsl:text>    on_click: function() {
 </xsl:text>
-    <xsl:text>        let [x,y,w,h] = page_desc[current_visible_page].bbox;
-</xsl:text>
-    <xsl:text>        let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
-</xsl:text>
-    <xsl:text>        let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
-</xsl:text>
-    <xsl:text>        let l = DOMMatrix.fromMatrix(this.box_elt.getScreenCTM());
-</xsl:text>
-    <xsl:text>        console.log(p, k.transformPoint(p), l.transformPoint(p));
+    <xsl:text>        this.open();
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    try_grow_one: function() {
+</xsl:text>
+    <xsl:text>        let txt = this.text_elt; 
+</xsl:text>
+    <xsl:text>        let first = txt.firstElementChild;
+</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>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return true;
+</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>
+    <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>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.adjust_to_text();
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    purge: function(){
+</xsl:text>
+    <xsl:text>        let txt = this.text_elt; 
+</xsl:text>
+    <xsl:text>        for(let span of Array.from(txt.children).slice(1)){
+</xsl:text>
+    <xsl:text>            txt.removeChild(span)
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    adjust_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>
     <xsl:text>    },
 </xsl:text>
@@ -1608,7 +1774,6 @@
     <xsl:comment>
       <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
     </xsl:comment>
-    <xsl:apply-templates mode="debug_as_comment" select="document('')/*/reflect:*"/>
     <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml">
       <head/>
       <body style="margin:0;overflow:hidden;">
diff -r ddce4ebdf010 -r 5ec1c07ce582 svghmi/widget_dropdown.ysl2
--- a/svghmi/widget_dropdown.ysl2	Thu Apr 09 09:52:34 2020 +0200
+++ b/svghmi/widget_dropdown.ysl2	Sun Apr 12 21:43:42 2020 +0200
@@ -3,22 +3,116 @@
 template "widget[@type='DropDown']", mode="widget_defs" {
     param "hmi_element";
     labels("text box");
-    |     dispatch: function(value) {
-        /* TODO : get selection text by index */
-    |         this.text_elt.textContent = String(value);
-    |     },
-    |     init: function() {
-    |         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
-    |     },
-    const "box_elt","$hmi_element/*[@inkscape:label='box'][1]";
-    const "g", "$geometry[@Id = $box_elt/@id]";
-    |     original_box: [«$g/@x», «$g/@y», «$g/@w», «$g/@h»],
-    |     on_click: function() {
-    |         let [x,y,w,h] = page_desc[current_visible_page].bbox;
-    |         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 l = DOMMatrix.fromMatrix(this.box_elt.getScreenCTM());
-    |         console.log(p, k.transformPoint(p), l.transformPoint(p));
-    |     },
+||    
+    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;