D language for Graphical User Interface and Cross Platform Development

[c-smile]

On Monday, 29 June 2020 at 14:34:45 UTC, Виталий Фадеев wrote:

> Now Node/Element will like this:
>
> struct Node
> {
>     Node* parent;
>     Node* firstChild;
>     Node* lastChild;
>     Node* prev;
>     Node* next;
> }
>
>
> struct Element
> {
>     Node node;
>
>     alias node this;
>
>     //
>     Properties props; // Element properties
>     Properties style; // Style properties
>
>     //
>     Computed computed;  // <-- after Apply Style and Update. 
> Initial Properties + Style Properties + Element Properties
>
>     //
>     Node* g; // Window
>
>     //
>     Eventer!( MouseEvent ) onMouseMove;
>     Eventer!( MouseEvent ) onMouseButton;
>     Eventer!( KeyEvent   ) onKey;
>     Eventer!( ClickEvent ) onClick;
>     Eventer!( SizeEvent  ) onResize;
>
>     //
>     uint updateStamp;
> }
>
> Robert ( c-smile ),
> 1. How you see best Node / Element structure ?


Best Node/Element structure is debatable and depends on design 
goals.

Here is Sciter's DOM tree representation

struct node: resource // reference counted entity
{
     weak_handle<element>   parent;
     weak_handle<element>   layout_parent; // normally parent, but 
can be different
     uint                   node_index;    // index in 
element::nodes collection
};

struct text : public node {...};
struct comment : public node {...};

struct element: node {

     tag::symbol_t tag;     // #div, #p, #span, etc.
     attribute_bag atts;    // DOM attributes
     ui_state      state;   // :focus, :hover, :active, etc.

     vector<hnode>        nodes; // child nodes
     handle<layout_data>  ldata; // "rendering tree" data

     hstyle          c_style; // current used style
     hstyle          p_style; // previously used style
     hstyle          d_style; // defined/determined style - 
computed from CSS
                              // declarations
     hstyle_prop_map a_style; // assigned style, can be null - 
element.style["..."] = ...;
     hstyle          p_drawn_style; // previously drawn style, for 
animation triggering

     handle<animation>    animator; // list of animators
     handle<ctl>          behavior; // event handlers a.k.a. 
behaviors

};

struct element in Sciter supports dynamic subclassing ( explained 
here 
https://stackoverflow.com/questions/21212379/changing-vtbl-of-existing-object-on-the-fly-dynamic-subclassing )

So, depending on style applied, particular element can be 
switched to (may have VTBL of derived class)

element_vertical // flex
element_horizontal // flex
element_grid // grid, flex
element_text // text container, like <p>
element_table
element_table_body
element_table_row
etc.