beremiz: comparison svghmi/widget

equal deleted inserted replaced

-:ee483e8346f5
+:83d83aa0f085
 // widget_dropdown.ysl2
 template "widget[@type='DropDown']", mode="widget_defs" {
 param "hmi_element";
 labels("text box button");
 ||
 dispatch: function(value) {
 if(!this.opened) this.set_selection(value);
 },
 init: function() {
 this.button_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_button_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;
 this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
-//this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
-//                "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
+// It is assumed that list content conforms to Array interface.
 this.content = [
 ``foreach "arg" | "«@value»",
 ];
+// Index of first visible element in the menu, when opened
 this.menu_offset = 0;
+// How mutch to lift the menu vertically so that it does not cross bottom border
 this.lift = 0;
+// Event handlers cannot be object method ('this' is unknown)
+// as a workaround, handler given to addEventListener is bound in advance.
+this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
 this.opened = false;
-this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
+},
-},
+// Called when a menu entry is clicked
 on_selection_click: function(selection) {
-console.log("selected "+selection);
 this.close();
 let orig = this.indexes[0];
 let idx = this.offset ? orig - this.offset : orig;
 apply_hmi_value(idx, selection);
 },
 on_button_click: function() {
 this.open();
 },
-on_backward_click:function(){
+on_backward_click: function(){
-this.move(false);
+this.scroll(false);
 },
 on_forward_click:function(){
-this.move(true);
+this.scroll(true);
 },
 set_selection: function(value) {
 let display_str;
 if(value >= 0 && value < this.content.length){
+// if valid selection resolve content
 display_str = this.content[value];
 this.last_selection = value;
 } else {
+// otherwise show problem
 display_str = "?"+String(value)+"?";
 }
+// It is assumed that first span always stays,
+// and contains selection when menu is closed
 this.text_elt.firstElementChild.textContent = display_str;
 },
 grow_text: function(up_to) {
 let count = 1;
 let txt = this.text_elt;
 let first = txt.firstElementChild;
+// Real world (pixels) boundaries of current page
 let bounds = svg_root.getBoundingClientRect();
 this.lift = 0;
 while(count < up_to) {
 let next = first.cloneNode();
+// relative line by line text flow instead of absolute y coordinate
 next.removeAttribute("y");
 next.setAttribute("dy", "1.1em");
+// default content to allow computing text element bbox
 next.textContent = "...";
+// append new span to text element
 txt.appendChild(next);
+// now check if text extended by one row fits to page
+// FIXME : exclude margins to be more accurate on box size
 let rect = txt.getBoundingClientRect();
 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)
 first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
 rect = txt.getBoundingClientRect();
 if(rect.top > bounds.top){
 this.lift += 1;
 } else {
+// if it goes over the top, then backtrack
+// restore dy attribute on first span
 if(backup)
 first.setAttribute("dy", backup);
 else
 first.removeAttribute("dy");
+// remove unwanted child
 txt.removeChild(next);
 return count;
 }
 }
 count++;
 }
 return count;
 },
 close_on_click_elsewhere: function(e) {
-console.log("inhibit", e);
+// inhibit events not targetting spans (menu items)
-console.log(e.target.parentNode, this.text_elt);
 if(e.target.parentNode !== this.text_elt){
 e.stopPropagation();
+// close menu in case click is outside box
 if(e.target !== this.box_elt)
 this.close();
 }
 },
 close: function(){
-document.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
+// Stop hogging all click events
+svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
+// Restore position and sixe of widget elements
 this.reset_text();
 this.reset_box();
+// Put the button back in place
 this.element.appendChild(this.button_elt);
+// Mark as closed (to allow dispatch)
 this.opened = false;
+// Dispatch last cached value
 this.apply_cache();
 },
+// Set text content when content is smaller than menu (no scrolling)
 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++;
 }
 },
-move: function(forward){
+// Move partial view :
+// false : upward, lower value
+// true  : downward, higher value
+scroll: function(forward){
 let contentlength = this.content.length;
 let spans = this.text_elt.children;
 let spanslength = spans.length;
 if(this.menu_offset != 0) spanslength--;
 if(this.menu_offset < contentlength - 1) spanslength--;
 this.menu_offset - spanslength);
 }
 console.log(this.menu_offset);
 this.set_partial_text();
 },
+// Setup partial view text content
+// with jumps at first and last entry when appropriate
 set_partial_text: function(){
 let spans = this.text_elt.children;
 let contentlength = this.content.length;
 let spanslength = spans.length;
 let i = this.menu_offset, c = 0;
 c++;
 }
 },
 open: function(){
 let length = this.content.length;
+// systematically reset text, to strip eventual whitespace spans
 this.reset_text();
+// grow as much as needed or possible
 let slots = this.grow_text(length);
+// Depending on final size
 if(slots == length) {
+// show all at once
 this.set_complete_text();
 } else {
-// align to selection
+// eventualy align menu to current selection, compensating for lift
 let offset = this.last_selection - this.lift;
 if(offset > 0)
 this.menu_offset = Math.min(offset + 1, length - slots + 1);
 else
 this.menu_offset = 0;
+// show surrounding values
 this.set_partial_text();
 }
+// Now that text size is known, we can set the box around it
 this.adjust_box_to_text();
+// Take button out until menu closed
 this.element.removeChild(this.button_elt);
+// Place widget in front by moving it to last position among siblings
 this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
 // disable interaction with background
-document.addEventListener("click", this.bound_close_on_click_elsewhere, true);
+svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
 this.opened = true;
 },
 reset_text: function(){
 let txt = this.text_elt;
 let first = txt.firstElementChild;
 b.width.baseVal.value = 2 * lmargin + m.width;
 b.height.baseVal.value = 2 * tmargin + m.height;
 },
 ||
 }
-// |         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;

branch	svghmi
changeset 2935	83d83aa0f085
parent 2934	ee483e8346f5
child 2936	53fb11263ff1