# 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 >= 0 && value < 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 => 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 > 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 > 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 < l && 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 < 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 < 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 < 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;