These docs are for v1.0. Click to read the latest docs for v1.2.

Shape with controls

Control example

{
    "geometry": [
        {
            "type": "difference",
            "geometry": [
                {
                    "type": "rect"
                },
                {
                    "type": "rect",
                    "x": "=@left",
                    "y": 0,
                    "w": "=@right - @left",
                    "h": "=@center"
                }
            ]
        }
    ],
    "properties": [
        {
            "name": "left",
            "type": "number",
            "label": "left width control",
            "default": 0.3
        },
        {
            "name": "center",
            "type": "number",
            "label": "center height control",
            "default": 0.75
        },
        {
            "name": "right",
            "type": "number",
            "label": "right width control",
            "default": 0.7
        }
    ],
    "controls": [
        {
            "location": {
                "x": "=@left",
                "y": "=@center/2"
            },
            "onmove": [
                {
                    "type": "set",
                    "field": "left",
                    "formula": "=@ControlX"
                }
            ]
        },
        {
            "location": {
                "x": "=@right",
                "y": "=@center/2"
            },
            "onmove": [
                {
                    "type": "set",
                    "field": "right",
                    "formula": "=@ControlX"
                }
            ]
        },
        {
            "location": {
                "x": "=@left + (@right-@left)/2",
                "y": "=@center"
            },
            "onmove": [
                {
                    "type": "set",
                    "field": "center",
                    "formula": "=@ControlY"
                }
            ]
        }
    ]
}