svghmi/widget_foreach.ysl2
author Edouard Tisserant <edouard@beremiz.fr>
Fri, 11 Oct 2024 10:34:15 +0200
changeset 4026 a3cf9f635952
parent 4025 92b3701fceed
child 4048 b3ea419a4d47
permissions -rw-r--r--
SVGHMI: add ForEach widget example
// widget_foreach.ysl2

widget_desc("ForEach") {

    longdesc
    ||
    ForEach widget is used to span a small set of widget over a larger set of
    repeated HMI_NODEs. 

    Idea is somewhat similar to relative page, but it all happens inside the
    ForEach widget, no page involved.

    Together with relative Jump widgets it can be used to build a menu to reach
    relative pages covering many identical HMI_NODES siblings.

    ForEach widget takes a HMI_CLASS name as argument and a HMI_NODE path as
    variable.

    Direct sub-elements can be either groups of widget to be spanned, labeled
    "ClassName:offset", or buttons to control the spanning, labeled
    "ClassName:+/-number".

    In case of "ClassName:offset", offset for first element is 1.

    ||

    shortdesc > span widgets over a set of repeated HMI_NODEs

    arg name="class_name" accepts="string" > HMI_CLASS name

    path name="root" accepts="HMI_NODE" >  where to find HMI_NODEs whose HMI_CLASS is class_name
}

widget_defs("ForEach") {

    if "count(path) < 1" error > ForEach widget «$hmi_element/@id» must have one HMI path given.
    if "count(arg) != 1" error > ForEach widget «$hmi_element/@id» must have one argument given : a class name.

    const "class","arg[1]/@value";

    const "base_path","path/@value";
    const "hmi_index_base", "$indexed_hmitree/*[@hmipath = $base_path]";
    const "hmi_tree_base", "$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]";
    const "hmi_tree_items", "$hmi_tree_base/*[@class = $class]";
    const "hmi_index_items", "$indexed_hmitree/*[@path = $hmi_tree_items/@path]"; 
    const "items_paths", "$hmi_index_items/@hmipath"; 
    |     index_pool: [
    foreach "$hmi_index_items" {
    |       «@index»`if "position()!=last()" > ,`
    }
    |     ],
    |     init: function() {
    const "prefix","concat($class,':')";
    const "buttons_regex","concat('^',$prefix,'[+\-][0-9]+')";
    const "buttons", "$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]"; 
    foreach "$buttons" {
        const "op","substring-after(@inkscape:label, $prefix)";
    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click('«$op»', evt)");
    }
    |
    |         this.items = [
    const "items_regex","concat('^',$prefix,'[0-9]+')";
    const "unordered_items","$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]";
    foreach "$unordered_items" {
        const "elt_label","concat($prefix, string(position()))"; 
        const "elt","$unordered_items[@inkscape:label = $elt_label]";
        const "pos","position()";
        const "item_path", "$items_paths[$pos]";
    |           [ /* item="«$elt_label»" path="«$item_path»" */
        if "count($elt)=0" error > Missing item labeled «$elt_label» in ForEach widget «$hmi_element/@id»
        if "count($elt)>1" error > Duplicate item labeled «$elt_label» in ForEach widget «$hmi_element/@id»
        foreach "func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]" {
            if "not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))"
                error > Widget id="«@id»" label="«@inkscape:label»" is having wrong path. Accroding to ForEach widget ancestor id="«$hmi_element/@id»", path should be descendant of "«$item_path»".
    |             hmi_widgets["«@id»"]`if "position()!=last()" > ,`
        }
    |           ]`if "position()!=last()" > ,`
    }
    |         ]
    |     },
    |     range: «count($hmi_index_items)»,
    |     size: «count($unordered_items)»,
    |     position: 0,
}

widget_class("ForEach")
||
    items_subscribed = false;

    unsub_items(){
        if(this.items_subscribed){
            for(let item of this.items){
                for(let widget of item) {
                    widget.unsub();
                }
            }
            this.items_subscribed = false;
        }
    }

    unsub(){
        super.unsub()
        this.unsub_items();
    }

    sub_items(){
        if(!this.items_subscribed){
            for(let i = 0; i < this.size; i++) {
                let item = this.items[i];
                let orig_item_index = this.index_pool[i];
                let item_index = this.index_pool[i+this.position];
                let item_index_offset = item_index - orig_item_index;
                if(this.relativeness[0])
                    item_index_offset += this.offset;
                for(let widget of item) {
                    /* all variables of all widgets in a ForEach are all relative. 
                       Really.

                       TODO: allow absolute variables in ForEach widgets
                    */
                    widget.sub(item_index_offset, widget.indexes.map(_=>true));
                }
            }
        }
    }

    sub(new_offset, relativeness, container_id){
        let position_given = this.indexes.length > 2;

        // sub() will call apply_cache() and then dispatch()
        // undefining position forces dispatch() to call apply_position()
        if(position_given)
            this.position = undefined;
        
        super.sub(new_offset, relativeness, container_id);

        // if position isn't given as a variable
        // dispatch() to call apply_position() aren't called
        // and items must be subscibed now.
        if(!position_given)
            this.sub_items();

        // as soon as subribed apply range and size once for all
        this.apply_hmi_value(1, this.range);
        this.apply_hmi_value(3, this.size);
    }

    apply_position(new_position){
        let old_position = this.position;
        let limited_position = Math.round(Math.max(Math.min(new_position, this.range - this.size), 0));
        if(this.position == limited_position){
            return false;
        }
        this.unsub_items();
        this.position = limited_position;
        this.sub_items();
        request_subscriptions_update();
        jumps_need_update = true;
        this.request_animate();
        return true;
    }

    on_click(opstr, evt) {
        let new_position = eval(String(this.position)+opstr);
        if(new_position + this.size > this.range) {
            if(this.position + this.size == this.range)
                new_position = 0;
            else
                new_position = this.range - this.size;
        } else if(new_position < 0) {
            if(this.position == 0)
                new_position = this.range - this.size;
            else
                new_position = 0;
        }
        if(this.apply_position(new_position)){
            this.apply_hmi_value(2, this.position);
        }
    }

    dispatch(value, oldval, index) {
        // Only care about position, others are constants
        if(index == 2){
            this.apply_position(value);
            if(this.position != value){
                // widget refused or apply different value, force it back
                this.apply_hmi_value(2, this.position);
            }
        }
    }

||