{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "autosize": "none",
  "signals": [
    {
      "name": "clip",
      "value": false,
      "bind": {
        "input": "checkbox",
        "name": "Обрезать по границам"
      }
    },
    {
      "name": "foreground",
      "value": false,
      "bind": {
        "input": "checkbox",
        "name": "Обводка поверх содержимого"
      }
    },
    {
      "name": "x",
      "value": 25,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 200,
        "step": 1,
        "name": "Координата X"
      }
    },
    {
      "name": "y",
      "value": 25,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 200,
        "step": 1,
        "name": "Координата Y"
      }
    },
    {
      "name": "w",
      "value": 150,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 200,
        "step": 1,
        "name": "Ширина"
      }
    },
    {
      "name": "h",
      "value": 150,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 200,
        "step": 1,
        "name": "Высота"
      }
    },
    {
      "name": "cornerRadius",
      "value": 0,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 50,
        "step": 1,
        "name": "Радиус скругления"
      }
    },
    {
      "name": "strokeWidth",
      "value": 4,
      "bind": {
        "input": "range",
        "min": 0,
        "max": 10,
        "name": "Толщина обводки"
      }
    },
    {
      "name": "color",
      "value": "both",
      "bind": {
        "input": "radio",
        "options": [
          "fill",
          "stroke",
          "both"
        ],
        "name": "Режим окраски",
        "labels": [
          "Заливка",
          "Обводка",
          "Заливка и обводка"
        ]
      }
    }
  ],
  "marks": [
    {
      "type": "group",
      "encode": {
        "update": {
          "x": {
            "signal": "x"
          },
          "y": {
            "signal": "y"
          },
          "width": {
            "signal": "w"
          },
          "height": {
            "signal": "h"
          },
          "clip": {
            "signal": "clip"
          },
          "opacity": {
            "value": 1
          },
          "cornerRadius": {
            "signal": "cornerRadius"
          },
          "strokeWidth": {
            "signal": "strokeWidth"
          },
          "strokeForeground": {
            "signal": "foreground"
          },
          "fill": {
            "signal": "color !== 'stroke' ? '#939597' : null"
          },
          "stroke": {
            "signal": "color !== 'fill' ? '#652c90' : null"
          }
        },
        "hover": {
          "opacity": {
            "value": 0.5
          }
        }
      },
      "data": [
        {
          "name": "table",
          "values": [
            {
              "x": 5,
              "y": 5,
              "w": 100,
              "h": 30
            },
            {
              "x": -5,
              "y": 70,
              "w": 40,
              "h": 40
            },
            {
              "x": 60,
              "y": 120,
              "w": 100,
              "h": 20
            }
          ]
        }
      ],
      "marks": [
        {
          "type": "rect",
          "from": {
            "data": "table"
          },
          "encode": {
            "enter": {
              "x": {
                "field": "x"
              },
              "y": {
                "field": "y"
              },
              "width": {
                "field": "w"
              },
              "height": {
                "field": "h"
              },
              "stroke": {
                "value": "firebrick"
              }
            },
            "update": {
              "fill": {
                "value": "aliceblue"
              }
            },
            "hover": {
              "fill": {
                "value": "salmon"
              }
            }
          }
        }
      ]
    }
  ]
}