Special built-in

There are two special built-in controls: selected and camera

selected control

selected is a virtual control pointing to currently selected control by user or code. selected_0 is first selected control selected_1 second and so on.

warning

There was a breaking change in version 0.1.3 - selected use underscore to specify selected index.

e.g. we declare two preselected dots and one unselected. Then we use selected_0 and selected_1 to swap their positions.

DABL

title: 'selected controls'
dot id: a at: [-2,-1] color: red selected: true
dot id: b at: [1,-1] color: blue selected: true
dot id: e at: [0,-2] color: green
step: 'swap selected controls'
selected_0 <-> selected_1

HTML

<dot-and-box style="height: 250px" controls code="
title: 'selected controls'
dot id: a at: [-2,-1] color: red selected: true
dot id: b at: [1,-1] color: blue selected: true
dot id: e at: [0,-2] color: green
step: 'swap selected controls'
selected_0 <-> selected_1"
`>
 </dot-and-box>

Try to unselect one of dots and select green one, restart and make step forward again to see how it works.

camera control

camera is a virtual control used just to move viewport. e.g.

 camera -> +(100,50)

DABL

 title: 'camera move'
 dot id: c at: [-2,-1]
 dot id: d at: [1,-1]
 step: 'move camera 4 cells right and one up'
 camera -> +[4,-1]

HTML

<dot-and-box style="height: 250px" controls code="
    title: 'camera move'
    dot id: c at: [-2,-1]
    dot id: d at: [1,-1]
    step: 'move camera 4 cells right and one up'
    camera -> +[4,-1]">
 </dot-and-box>