Markers

Markers give you a way to group elements together and then perform operations on them. A common usecase for this is to check if the mouse is over any of a group of elements. Markers can also be used to alter where a group of elements get rendered or to hide a group of elements all at once.

See UIRuntime for more methods dealing with markers.

A marker declaration creates an instance of HierarchyMarker that is valid for the rest of the frame. Attempting to use a marker from a different frame will result in an error.

template MarkerExample render {

    marker MyMarker {
        Div(style = [@box]);
        Div(style = [@box]);
        Div(style = [@box]);
    }
    
    run if($runtime.MouseDown(MyMarker)) { 
        Debug.Log("The mouse is over one of the boxes");
    }
    
}

Render marker

A marker can also be used as a kind of localized teleport. In the example below we declare three boxes before the text element and then actually render them later after the text has rendered. If the same marker gets rendered multiple times, the last render statement wins.

template MarkerExample render {

    marker MyMarker {
        Div(style = [@box]);
        Div(style = [@box]);
        Div(style = [@box]);
    }
    
    Text("Here we go");
    
    render marker(MyMarker);
    
}

Deferred Markers

A marker can either be hidden or visible, by default markers are visible. You can change this with a marker:defer declaration. This will defer rendering the marker contents until a render marker() statement explicitly renders them. If no render occurs for a frame, the contents of the marker end up a kind of purgatory where they are considered to be alive and active, but will not layout or render.

template MarkerExample(required bool renderContents) render {

    // if renderContents is false, these boxes will end up in purgatory
    marker:defer MyMarker {
        Div(style = [@box]);
        Div(style = [@box]);
        Div(style = [@box]);
    }
    
    Text("Here we go");
    
    if(renderContents) {
        render marker(MyMarker);
    }
     
}