HGKeeper

beremiz

SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.
svghmi
2020-12-17, Edouard Tisserant

96ffd8b1b016

Parents f475f39713aa
Children 9986e691c2ee

SVGHMI: added dropdown selection highlighting and fixed scrolling so that it doesn't miss any entry while jumping from one page to the other.

3 files changed, 140 insertions(+), 23 deletions(-)

+87 -11

svghmi/gen_index_xhtml.xslt

+49 -8

svghmi/widget_dropdown.ysl2

+4 -4

tests/svghmi/svghmi_0@svghmi/svghmi.svg

~~--- a/svghmi/gen_index_xhtml.xslt Wed Dec 16 15:44:24 2020 +0100~~

+++ b/svghmi/gen_index_xhtml.xslt Thu Dec 17 19:31:00 2020 +0100

@@ -3084,6 +3084,10 @@

</xsl:text>

<xsl:text> this.box_bbox = this.box_elt.getBBox()

</xsl:text>

+ <xsl:text> this.highlight_bbox = this.highlight_elt.getBBox()

+</xsl:text>

+ <xsl:text> this.highlight_elt.style.visibility = "hidden";

+</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text> // Compute margins

@@ -3228,7 +3232,7 @@

</xsl:text>

<xsl:text> let backup = first.getAttribute("dy");

</xsl:text>

~~- <xsl:text> // apply lift asr a dy added too first span (y attrib stays)~~

+ <xsl:text> // apply lift as a dy added too first span (y attrib stays)

</xsl:text>

<xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");

</xsl:text>

@@ -3306,6 +3310,8 @@

</xsl:text>

<xsl:text> this.reset_box();

</xsl:text>

+ <xsl:text> this.reset_highlight();

+</xsl:text>

<xsl:text> // Put the button back in place

</xsl:text>

<xsl:text> this.element.appendChild(this.button_elt);

@@ -3326,23 +3332,21 @@

</xsl:text>

<xsl:text> let txt = this.text_elt;

</xsl:text>

~~- <xsl:text> let first = txt.firstElementChild;~~

~~-</xsl:text>~~

<xsl:text> let original_text_y = this.text_bbox.y;

</xsl:text>

<xsl:text> let highlight = this.highlight_elt;

</xsl:text>

~~- <xsl:text> let original_h_y = highlight.getBBox().y;~~

+ <xsl:text> let original_h_y = this.highlight_bbox.y;

</xsl:text>

<xsl:text> let clickable = highlight.cloneNode();

</xsl:text>

<xsl:text> let yoffset = span.getBBox().y - original_text_y;

</xsl:text>

~~- <xsl:text> clickable.setAttribute("y", original_h_y + yoffset);~~

+ <xsl:text> clickable.y.baseVal.value = original_h_y + yoffset;

</xsl:text>

<xsl:text> clickable.style.pointerEvents = "bounding-box";

</xsl:text>

~~- <xsl:text> clickable.style.visibility = "hidden";~~

+ <xsl:text> //clickable.style.visibility = "hidden";

</xsl:text>

<xsl:text> //clickable.onclick = () => alert("love JS");

</xsl:text>

@@ -3402,14 +3406,18 @@

</xsl:text>

<xsl:text> let spanslength = spans.length;

</xsl:text>

~~- <xsl:text> // reduce accounted menu size according to jumps~~

~~-</xsl:text>~~

~~- <xsl:text> if(this.menu_offset != 0) spanslength--;~~

~~-</xsl:text>~~

~~- <xsl:text> if(this.menu_offset < contentlength - 1) spanslength--;~~

+ <xsl:text> // reduce accounted menu size according to prsence of scroll buttons

+</xsl:text>

+ <xsl:text> // since we scroll there is necessarly one button

+</xsl:text>

+ <xsl:text> spanslength--;

</xsl:text>

<xsl:text> if(forward){

</xsl:text>

+ <xsl:text> // reduce accounted menu size because of back button

+</xsl:text>

+ <xsl:text> if(this.menu_offset != 0) spanslength--;

+</xsl:text>

<xsl:text> this.menu_offset = Math.min(

</xsl:text>

<xsl:text> contentlength - spans.length + 1,

@@ -3418,6 +3426,8 @@

</xsl:text>

<xsl:text> }else{

</xsl:text>

+ <xsl:text> if(this.menu_offset - spanslength > 0) spanslength--;

+</xsl:text>

<xsl:text> this.menu_offset = Math.max(

</xsl:text>

<xsl:text> 0,

@@ -3426,10 +3436,24 @@

</xsl:text>

<xsl:text> }

</xsl:text>

+ <xsl:text> if(this.menu_offset == 1)

+</xsl:text>

+ <xsl:text> this.menu_offset = 0;

+</xsl:text>

+ <xsl:text>

+</xsl:text>

+ <xsl:text> this.reset_highlight();

+</xsl:text>

+ <xsl:text>

+</xsl:text>

<xsl:text> this.reset_clickables();

</xsl:text>

<xsl:text> this.set_partial_text();

</xsl:text>

+ <xsl:text>

+</xsl:text>

+ <xsl:text> this.highlight_selection();

+</xsl:text>

<xsl:text> }

</xsl:text>

<xsl:text> // Setup partial view text content

@@ -3562,6 +3586,10 @@

</xsl:text>

<xsl:text> svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);

</xsl:text>

+ <xsl:text> this.highlight_selection();

+</xsl:text>

+ <xsl:text>

+</xsl:text>

<xsl:text> // mark as open

</xsl:text>

<xsl:text> this.opened = true;

@@ -3612,6 +3640,54 @@

</xsl:text>

<xsl:text> }

</xsl:text>

+ <xsl:text> highlight_selection(){

+</xsl:text>

+ <xsl:text> let highlighted_row = this.last_selection - this.menu_offset;

+</xsl:text>

+ <xsl:text> if(highlighted_row < 0) return;

+</xsl:text>

+ <xsl:text> let spans = this.text_elt.children;

+</xsl:text>

+ <xsl:text> let spanslength = spans.length;

+</xsl:text>

+ <xsl:text> let contentlength = this.content.length;

+</xsl:text>

+ <xsl:text> if(this.menu_offset != 0) {

+</xsl:text>

+ <xsl:text> spanslength--;

+</xsl:text>

+ <xsl:text> highlighted_row++;

+</xsl:text>

+ <xsl:text> }

+</xsl:text>

+ <xsl:text> if(this.menu_offset + spanslength < contentlength - 1) spanslength--;

+</xsl:text>

+ <xsl:text> if(highlighted_row > spanslength) return;

+</xsl:text>

+ <xsl:text> let original_text_y = this.text_bbox.y;

+</xsl:text>

+ <xsl:text> let highlight = this.highlight_elt;

+</xsl:text>

+ <xsl:text> let span = spans[highlighted_row];

+</xsl:text>

+ <xsl:text> let yoffset = span.getBBox().y - original_text_y;

+</xsl:text>

+ <xsl:text> highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;

+</xsl:text>

+ <xsl:text> highlight.style.visibility = "visible";

+</xsl:text>

+ <xsl:text> }

+</xsl:text>

+ <xsl:text> reset_highlight(){

+</xsl:text>

+ <xsl:text> let highlight = this.highlight_elt;

+</xsl:text>

+ <xsl:text> highlight.y.baseVal.value = this.highlight_bbox.y;

+</xsl:text>

+ <xsl:text> highlight.style.visibility = "hidden";

+</xsl:text>

+ <xsl:text> }

+</xsl:text>

<xsl:text> // Use margin and text size to compute box size

</xsl:text>

<xsl:text> adjust_box_to_text(){

~~--- a/svghmi/widget_dropdown.ysl2 Wed Dec 16 15:44:24 2020 +0100~~

+++ b/svghmi/widget_dropdown.ysl2 Thu Dec 17 19:31:00 2020 +0100

@@ -13,6 +13,8 @@

this.button_elt.onclick = this.on_button_click.bind(this);

// Save original size of rectangle

this.box_bbox = this.box_elt.getBBox()

+ this.highlight_bbox = this.highlight_elt.getBBox()

+ this.highlight_elt.style.visibility = "hidden";

// Compute margins

this.text_bbox = this.text_elt.getBBox();

@@ -85,7 +87,7 @@

if(rect.bottom > bounds.bottom){

// in case of overflow at the bottom, lift up one row

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

~~- // apply lift asr a dy added too first span (y attrib stays)~~

+ // apply lift as a dy added too first span (y attrib stays)

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

rect = txt.getBoundingClientRect();

if(rect.top > bounds.top){

@@ -124,6 +126,7 @@

this.reset_text();

this.reset_clickables();

this.reset_box();

+ this.reset_highlight();

// Put the button back in place

this.element.appendChild(this.button_elt);

// Mark as closed (to allow dispatch)

@@ -134,15 +137,14 @@

// Make item (text span) clickable by overlaying a rectangle on top of it

make_clickable(span, func) {

let txt = this.text_elt;

~~- let first = txt.firstElementChild;~~

let original_text_y = this.text_bbox.y;

let highlight = this.highlight_elt;

~~- let original_h_y = highlight.getBBox().y;~~

+ let original_h_y = this.highlight_bbox.y;

let clickable = highlight.cloneNode();

let yoffset = span.getBBox().y - original_text_y;

~~- clickable.setAttribute("y", original_h_y + yoffset);~~

+ clickable.y.baseVal.value = original_h_y + yoffset;

clickable.style.pointerEvents = "bounding-box";

~~- clickable.style.visibility = "hidden";~~

+ //clickable.style.visibility = "hidden";

//clickable.onclick = () => alert("love JS");

clickable.onclick = func;

this.element.appendChild(clickable);

@@ -172,20 +174,33 @@

let contentlength = this.content.length;

let spans = this.text_elt.children;

let spanslength = spans.length;

~~- // reduce accounted menu size according to jumps~~

~~- if(this.menu_offset != 0) spanslength--;~~

~~- if(this.menu_offset < contentlength - 1) spanslength--;~~

+ // reduce accounted menu size according to prsence of scroll buttons

+ // since we scroll there is necessarly one button

+ spanslength--;

if(forward){

+ // reduce accounted menu size because of back button

+ // in current view

+ if(this.menu_offset > 0) spanslength--;

this.menu_offset = Math.min(

contentlength - spans.length + 1,

this.menu_offset + spanslength);

}else{

+ // reduce accounted menu size because of back button

+ // in view once scrolled

+ if(this.menu_offset - spanslength > 0) spanslength--;

this.menu_offset = Math.max(

this.menu_offset - spanslength);

}

+ if(this.menu_offset == 1)

+ this.menu_offset = 0;

+ this.reset_highlight();

this.reset_clickables();

this.set_partial_text();

+ this.highlight_selection();

}

// Setup partial view text content

// with jumps at first and last entry when appropriate

@@ -252,6 +267,8 @@

svg_root.addEventListener("pointerdown", numb_event, true);

svg_root.addEventListener("pointerup", numb_event, true);

svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);

+ this.highlight_selection();

// mark as open

this.opened = true;

}

@@ -277,6 +294,30 @@

b.width.baseVal.value = m.width;

b.height.baseVal.value = m.height;

}

+ highlight_selection(){

+ let highlighted_row = this.last_selection - this.menu_offset;

+ if(highlighted_row < 0) return;

+ let spans = this.text_elt.children;

+ let spanslength = spans.length;

+ let contentlength = this.content.length;

+ if(this.menu_offset != 0) {

+ spanslength--;

+ highlighted_row++;

+ }

+ if(this.menu_offset + spanslength < contentlength - 1) spanslength--;

+ if(highlighted_row > spanslength) return;

+ let original_text_y = this.text_bbox.y;

+ let highlight = this.highlight_elt;

+ let span = spans[highlighted_row];

+ let yoffset = span.getBBox().y - original_text_y;

+ highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;

+ highlight.style.visibility = "visible";

+ }

+ reset_highlight(){

+ let highlight = this.highlight_elt;

+ highlight.y.baseVal.value = this.highlight_bbox.y;

+ highlight.style.visibility = "hidden";

+ }

// Use margin and text size to compute box size

adjust_box_to_text(){

let [lmargin, tmargin] = this.margins;

~~--- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg Wed Dec 16 15:44:24 2020 +0100~~

+++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg Thu Dec 17 19:31:00 2020 +0100

@@ -197,12 +197,12 @@

inkscape:pageopacity="0"

inkscape:pageshadow="2"

inkscape:document-units="px"

~~- inkscape:current-layer="g14237"~~

+ inkscape:current-layer="hmi0"

showgrid="false"

units="px"

inkscape:zoom="0.54565796"

~~- inkscape:cx="147.6698"~~

~~- inkscape:cy="180.09341"~~

+ inkscape:cx="-623.8758"

+ inkscape:cy="172.76281"

inkscape:window-width="1600"

inkscape:window-height="836"

inkscape:window-x="0"

@@ -2394,7 +2394,7 @@

</g>

id="g14237"

~~- inkscape:label="HMI:DropDown:1:2:3:4:5:6:7:8:9:10@/SELECTION"~~

+ inkscape:label="HMI:DropDown:1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27@/SELECTION"

transform="matrix(0.81491208,0,0,0.81491208,243.6641,-510.30491)"

style="stroke-width:0.35083869">

<rect