sgs-ui - basic two-way control editor w/ undo&redo

function sgs_ui_example_ded4()
{
    DE = UI_CreateDataEdit( FRAME.root )[]{ anchorMode = UI_Anchor_All, q0x = 0.7 };
    LS = UI_CreateStatic( FRAME.root )[]{ anchorMode = UI_Anchor_Vert, q0x = 0.6, q1x = 0.7 };
    UI_CreateStatic( LS )[]{ anchorMode = UI_Anchor_Hor, height = 20, caption = "-- start --", posMode = UI_Pos_SideA };
    UL = UndoLayer.create();
    DS =
    {
        controls = [],
        auto_id = 1,
        find = function DS.find( id )
        {
            foreach( ctrl : this.controls )
                if( ctrl.name == id )
                    return ctrl;
            return null;
        },
    };
    function control_add( props ) use( DS, DE, UL )
    {
        ctrl = UI_CreateStatic( FRAME.root )[]{ backgroundColor = UIColor(0.8,0.7,0.6) };
        foreach( k, v : props )
            ctrl.(k) = v;
        UI_MakeResizable( ctrl, 4, 4, 4, 4 );
        ctrl.name = id = DS.auto_id++;
        ctrl.bindEvent( "onbeforesize", function( e ) use( UL )
        {
            println( "Change: do/begin" );
            UL.beginChange();
            println( "Change: do/change(0)" );
            UL.doChange( "view", "control", this.name, { x = this.x, y = this.y, width = this.width, height = this.height } );
        });
        ctrl.bindEvent( "oneditsize", function( e ) use( UL )
        {
            println( "Change: do/change" );
            UL.doChange( "view", "control", this.name, { x = this.x, y = this.y, width = this.width, height = this.height } );
        });
        ctrl.bindEvent( "onresize", function( e ) use( UL )
        {
            println( "Change: do/commit" );
            if( UL.isMakingChange() )
                UL.commitChange( "control resize" );
        });
        DS.controls.push( ctrl );
        return id;
    }
    function control_rem( id ) use( DS )
    {
        ctrl = DS.find( id );
        ctrl.destroy( true );
        DS.controls.remove( ctrl );
        if( DS.auto_id - 1 == id )
            DS.auto_id--;
    }
    function control_getstate( id ) use( DS )
    {
        src = DS.find( id );
        out = {};
        foreach( k : ["x","y","width","height","caption"] )
            out[ k ] = src[ k ];
        return out;
    }
    function control_getprops( id, tmpl ) use( DS )
    {
        src = DS.find( id );
        out = {};
        foreach( k ,: tmpl )
            out[ k ] = src[ k ];
        return out;
    }
    function control_setprops( id, props ) use( DS )
    {
        src = DS.find( id );
        foreach( k, v : props )
            src.(k) = v;
    }
    UL.registerObject( "control", DS, control_add, control_rem, control_getstate, control_getprops, control_setprops );
    schema =
    {
        CONTROL =
        {
            "$type" = "object",
            x = { "$type" = "int" },
            y = { "$type" = "int" },
            width = { "$type" = "int" },
            height = { "$type" = "int" },
            caption = { "$type" = "string" },
        },
        CONTROL_ARRAY =
        {
            "$name" = "Controls",
            "$type" = "array",
            "$subtype" = "CONTROL",
        },
        "$root" = "CONTROL_ARRAY",
    };
    DE.bindEvent( "change", function() use( UL, DS )
    {
        type = this.getChangeType();
        idx = this.getChangedIndex();
        prop = this.getChangedProperty();
        path = this.getPathByName( prop );
        println(path);

        if( !UL.enabled )
            return;

        if( type == "add" )
        {
            println( "Change: begin" );
            UL.beginChange();

            println( "Change: do/add" );
            (id,state) = UL.doAdd( "ui", "control", { x = 10, y = 10, width = 100, height = 100, caption = "<untitled>" } );
            this.setItemAdded( state );

            println( "Change: commit" );
            UL.commitChange( "control added" );
        }
        else if( type == "remove" )
        {
            println( "Change: begin" );
            UL.beginChange();

            println( "Change: do/remove" );
            UL.doRemove( "ui", "control", DS.controls[ idx ].name );

            println( "Change: commit" );
            UL.commitChange( "control removed" );
        }
        else
        {
            println( "Change: begin" );
            UL.beginChange();

            println( "Change: do/change" );
            changes = {};
            changes[ path.last ] = this.getValueByName( prop );
            UL.doChange( "ui", "control", DS.controls[ path[1] /* hardcoded */ ].name, changes );

            println( "Change: commit" );
            UL.commitChange( "control modified" );
        }
    });
    UL.registerFeedbackOutput( "ui", function( src, action, objtype, id, state, state_to ) use( DE, DS )
    {
        if( src == "ui" )
            return;
        this.enabled = false; // prevent feedback loop
        DE.updateData( DS.controls );
        this.enabled = true;
    });
    UL.registerStatusCallback( "ui", function( action ) use( LS )
    {
        if( action == "commit" )
        {
            UI_CreateStatic( LS )[]{ anchorMode = UI_Anchor_Hor, height = 20, caption = this.getLastStateName(), posMode = UI_Pos_SideA };
        }
        if( action == "move" || action == "commit" )
        {
            cp = this.getCurrentPos();
            foreach( i, ch : LS.children() )
            {
                if( i == cp )
                    ch.backgroundColor = UIColor(0.6,0.7,0.8);
                else
                    ch.backgroundColor = null;
            }
        }
        if( action == "resize" )
        {
            // crop items to fit count
            while( LS.getChildCount() > this.getStateCount() + 1 )
                LS.children().last.destroy(true);
        }
    });
    LS.bindEvent( "click", function( e ) use( UL )
    {
        if( e.target != this )
        {
            pos = e.target.getOrderIndex();
            UL.setCurrentPos( pos );
        }
    });
    DE.setData( DS.controls, schema );
}