beremiz

SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
svghmi
2020-04-12, Edouard Tisserant
5ec1c07ce582
Parents ddce4ebdf010
Children 69bb58eb0eac
SVGHMI: HMI:DropDown work in progress, intermediate commit. Now menu's rectangle grows up to viewport borders.
2 files changed, 299 insertions(+), 40 deletions(-)
  • +188 -23
    svghmi/gen_index_xhtml.xslt
  • +111 -17
    svghmi/widget_dropdown.ysl2
    • --- 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> 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: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>
    <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;">
    --- 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;