# HG changeset patch # User Edouard Tisserant # Date 1585139764 -3600 # Node ID bf8a39cc65e4cc9cf344b367a0eb5efb134d0483 # Parent 99c5335ed59fc48c74492782ddadff189a70a6dd SVGHMI: Generalize applying cache to widgets, be it from page or ForEach widgets. Now ForEach widget buttons work as expected. diff -r 99c5335ed59f -r bf8a39cc65e4 svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Tue Mar 24 23:07:54 2020 +0100 +++ b/svghmi/gen_index_xhtml.xslt Wed Mar 25 13:36:04 2020 +0100 @@ -635,6 +635,8 @@ unsub: unsubscribe, + apply_cache: widget_apply_cache, + @@ -798,27 +800,17 @@ }, - on_click: function(opstr, evt) { - - console.log(opstr); - - }, - item_offset: 0, + on_click: foreach_onclick, + - sub: function(off){ - - foreach_subscribe.call(this,off); - - }, - - unsub: function(){ - - foreach_unsubscribe.call(this); - - }, + sub: foreach_subscribe, + + unsub: foreach_unsubscribe, + + apply_cache: foreach_apply_cache, @@ -1149,6 +1141,8 @@ var updates = {}; + var need_cache_apply = []; + function dispatch_value_to_widget(widget, index, value, oldval) { @@ -1319,11 +1313,13 @@ - if(current_subscribed_page_index != current_visible_page_index){ - - apply_cache(); - - } + while(widget = need_cache_apply.pop()){ + + widget.apply_cache(); + + } + + apply_updates(); @@ -1659,10 +1655,6 @@ var current_subscribed_page; - var current_visible_page_index; - - var current_subscribed_page_index; - function prepare_svg() { @@ -1747,6 +1739,8 @@ } + need_cache_apply.push(this); + } @@ -1763,138 +1757,210 @@ } + this.offset = 0; + } + function foreach_widgets_do(new_offset, todo){ + + this.offset = new_offset; + + for(let i = 0; i < this.items.length; i++) { + + let item = this.items[i]; + + let orig_item_index = this.index_pool[i]; + + let item_index = this.index_pool[i+this.item_offset]; + + let item_index_offset = item_index - orig_item_index; + + for(let widget of item) { + + todo.call(widget, new_offset + item_index_offset); + + } + + } + + } + + + function foreach_subscribe(new_offset=0){ - for(let i = 0; i < this.items.length; i++) { - - let item = this.items[i]; - - let orig_item_index = this.index_pool[i]; - - let item_index = this.index_pool[i+this.item_offset]; - - let item_index_offset = item_index - orig_item_index; - - for(let widget of item) { - - subscribe.call(widget,new_offset + item_index_offset); + foreach_widgets_do.call(this, new_offset, subscribe); + + } + + + + function widget_apply_cache() { + + for(let index of this.indexes){ + + /* dispatch current cache in newly opened page widgets */ + + let realindex = index+this.offset; + + let cached_val = cache[realindex]; + + if(cached_val != undefined) + + dispatch_value_to_widget(this, realindex, cached_val, cached_val); + + } + + } + + + + function foreach_apply_cache() { + + foreach_widgets_do.call(this, this.offset, widget_apply_cache); + + } + + + + function foreach_onclick(opstr, evt) { + + new_item_offset = eval(String(this.item_offset)+opstr) + + if(new_item_offset + this.items.length > this.index_pool.length) { + + new_item_offset = 0; + + } else if(new_item_offset < 0) { + + new_item_offset = this.index_pool.length - this.items.length; + + } + + this.item_offset = new_item_offset; + + off = this.offset; + + foreach_unsubscribe.call(this); + + foreach_subscribe.call(this,off); + + update_subscriptions(); + + need_cache_apply.push(this); + + requestHMIAnimation(); + + console.log(opstr, new_item_offset); + + } + + + + function switch_subscribed_page(page_name, page_index) { + + let old_desc = page_desc[current_subscribed_page]; + + let new_desc = page_desc[page_name]; + + + + if(new_desc == undefined){ + + /* TODO LOG ERROR */ + + return; + + } + + + + if(page_index == undefined){ + + page_index = new_desc.page_index; + + } + + + + if(old_desc){ + + old_desc.absolute_widgets.map(w=>w.unsub()); + + old_desc.relative_widgets.map(w=>w.unsub()); + + } + + new_desc.absolute_widgets.map(w=>w.sub()); + + var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; + + new_desc.relative_widgets.map(w=>w.sub(new_offset)); + + + + update_subscriptions(); + + + + current_subscribed_page = page_name; + + + + requestHMIAnimation(); + + } + + + + function switch_visible_page(page_name) { + + + + let old_desc = page_desc[current_visible_page]; + + let new_desc = page_desc[page_name]; + + + + if(old_desc){ + + for(let eltid in old_desc.required_detachables){ + + if(!(eltid in new_desc.required_detachables)){ + + let [element, parent] = old_desc.required_detachables[eltid]; + + parent.removeChild(element); + + } } - } - - } - - - - function switch_subscribed_page(page_name, page_index) { - - let old_desc = page_desc[current_subscribed_page]; - - let new_desc = page_desc[page_name]; - - - - if(new_desc == undefined){ - - /* TODO LOG ERROR */ - - return; - - } - - - - if(page_index == undefined){ - - page_index = new_desc.page_index; - - } - - - - if(old_desc){ - - old_desc.absolute_widgets.map(w=>w.unsub()); - - old_desc.relative_widgets.map(w=>w.unsub()); - - } - - new_desc.absolute_widgets.map(w=>w.sub()); - - var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; - - new_desc.relative_widgets.map(w=>w.sub(new_offset)); - - - - update_subscriptions(); - - - - current_subscribed_page = page_name; - - current_subscribed_page_index = page_index; - - - - requestHMIAnimation(); - - } - - - - function switch_visible_page(page_name) { - - - - let old_desc = page_desc[current_visible_page]; - - let new_desc = page_desc[page_name]; - - - - if(old_desc){ - - for(let eltid in old_desc.required_detachables){ - - if(!(eltid in new_desc.required_detachables)){ - - let [element, parent] = old_desc.required_detachables[eltid]; - - parent.removeChild(element); + for(let eltid in new_desc.required_detachables){ + + if(!(eltid in old_desc.required_detachables)){ + + let [element, parent] = new_desc.required_detachables[eltid]; + + parent.appendChild(element); } } + }else{ + for(let eltid in new_desc.required_detachables){ - if(!(eltid in old_desc.required_detachables)){ - - let [element, parent] = new_desc.required_detachables[eltid]; - - parent.appendChild(element); - - } + let [element, parent] = new_desc.required_detachables[eltid]; + + parent.appendChild(element); } - }else{ - - for(let eltid in new_desc.required_detachables){ - - let [element, parent] = new_desc.required_detachables[eltid]; - - parent.appendChild(element); - - } - } @@ -1905,38 +1971,6 @@ }; - - - function apply_cache() { - - let new_desc = page_desc[current_visible_page]; - - for(let widget of chain(new_desc.absolute_widgets,new_desc.relative_widgets)){ - - for(let index of widget.indexes){ - - /* dispatch current cache in newly opened page widgets */ - - let realindex = index+widget.offset; - - let cached_val = cache[realindex]; - - if(cached_val != undefined) - - dispatch_value_to_widget(widget, realindex, cached_val, cached_val); - - } - - } - - current_visible_page_index = current_subscribed_page_index; - - } - - - - - // Once connection established diff -r 99c5335ed59f -r bf8a39cc65e4 svghmi/svghmi.js --- a/svghmi/svghmi.js Tue Mar 24 23:07:54 2020 +0100 +++ b/svghmi/svghmi.js Wed Mar 25 13:36:04 2020 +0100 @@ -2,6 +2,7 @@ var cache = hmitree_types.map(_ignored => undefined); var updates = {}; +var need_cache_apply = []; function dispatch_value_to_widget(widget, index, value, oldval) { try { @@ -87,9 +88,10 @@ switch_visible_page(current_subscribed_page); } - if(current_subscribed_page_index != current_visible_page_index){ - apply_cache(); - } + while(widget = need_cache_apply.pop()){ + widget.apply_cache(); + } + apply_updates(); requestAnimationFrameID = null; } @@ -257,8 +259,6 @@ var current_visible_page; var current_subscribed_page; -var current_visible_page_index; -var current_subscribed_page_index; function prepare_svg() { for(let eltid in detachable_elements){ @@ -301,6 +301,7 @@ for(let index of this.indexes){ subscribers[index + new_offset].add(this); } + need_cache_apply.push(this); } function foreach_unsubscribe(){ @@ -309,18 +310,55 @@ unsubscribe.call(widget); } } -} - -function foreach_subscribe(new_offset=0){ + this.offset = 0; +} + +function foreach_widgets_do(new_offset, todo){ + this.offset = new_offset; for(let i = 0; i < this.items.length; i++) { let item = this.items[i]; let orig_item_index = this.index_pool[i]; let item_index = this.index_pool[i+this.item_offset]; let item_index_offset = item_index - orig_item_index; for(let widget of item) { - subscribe.call(widget,new_offset + item_index_offset); - } - } + todo.call(widget, new_offset + item_index_offset); + } + } +} + +function foreach_subscribe(new_offset=0){ + foreach_widgets_do.call(this, new_offset, subscribe); +} + +function widget_apply_cache() { + for(let index of this.indexes){ + /* dispatch current cache in newly opened page widgets */ + let realindex = index+this.offset; + let cached_val = cache[realindex]; + if(cached_val != undefined) + dispatch_value_to_widget(this, realindex, cached_val, cached_val); + } +} + +function foreach_apply_cache() { + foreach_widgets_do.call(this, this.offset, widget_apply_cache); +} + +function foreach_onclick(opstr, evt) { + new_item_offset = eval(String(this.item_offset)+opstr) + if(new_item_offset + this.items.length > this.index_pool.length) { + new_item_offset = 0; + } else if(new_item_offset < 0) { + new_item_offset = this.index_pool.length - this.items.length; + } + this.item_offset = new_item_offset; + off = this.offset; + foreach_unsubscribe.call(this); + foreach_subscribe.call(this,off); + update_subscriptions(); + need_cache_apply.push(this); + requestHMIAnimation(); + console.log(opstr, new_item_offset); } function switch_subscribed_page(page_name, page_index) { @@ -347,7 +385,6 @@ update_subscriptions(); current_subscribed_page = page_name; - current_subscribed_page_index = page_index; requestHMIAnimation(); } @@ -380,22 +417,6 @@ svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); current_visible_page = page_name; }; - -function apply_cache() { - let new_desc = page_desc[current_visible_page]; - for(let widget of chain(new_desc.absolute_widgets,new_desc.relative_widgets)){ - for(let index of widget.indexes){ - /* dispatch current cache in newly opened page widgets */ - let realindex = index+widget.offset; - let cached_val = cache[realindex]; - if(cached_val != undefined) - dispatch_value_to_widget(widget, realindex, cached_val, cached_val); - } - } - current_visible_page_index = current_subscribed_page_index; -} - - // Once connection established ws.onopen = function (evt) { diff -r 99c5335ed59f -r bf8a39cc65e4 svghmi/widget_foreach.ysl2 --- a/svghmi/widget_foreach.ysl2 Tue Mar 24 23:07:54 2020 +0100 +++ b/svghmi/widget_foreach.ysl2 Wed Mar 25 13:36:04 2020 +0100 @@ -44,19 +44,14 @@ } | ] | }, - | on_click: function(opstr, evt) { - | console.log(opstr); - | }, | item_offset: 0, + | on_click: foreach_onclick, } template "widget[@type='ForEach']", mode="widget_subscribe"{ // param "hmi_element"; - | sub: function(off){ - | foreach_subscribe.call(this,off); - | }, + | sub: foreach_subscribe, + | unsub: foreach_unsubscribe, + | apply_cache: foreach_apply_cache, +} - | unsub: function(){ - | foreach_unsubscribe.call(this); - | }, -} diff -r 99c5335ed59f -r bf8a39cc65e4 svghmi/widgets_common.ysl2 --- a/svghmi/widgets_common.ysl2 Tue Mar 24 23:07:54 2020 +0100 +++ b/svghmi/widgets_common.ysl2 Wed Mar 25 13:36:04 2020 +0100 @@ -43,6 +43,7 @@ template "widget", mode="widget_subscribe" { | sub: subscribe, | unsub: unsubscribe, + | apply_cache: widget_apply_cache, } // page aren't subscribers template "widget[@type='Page']", mode="widget_subscribe";