Data Display

Addon Settings (Blueprint)

Визуальный Blueprint: канвас с узлами (секции + элементы), перетаскивание, панорама, зум. Связи секция→элемент. Двойной клик — редактирование. Из графа собирается handleEvents.json и превью Accordion.

Импорт handleEvents.json

Загрузите файл handleEvents.json чтобы визуализировать его в редакторе.

handleEvents.json
?
Визуальный Blueprint (канвас как в UE5)

Перетаскивайте узлы ЛКМ, выделяйте область. ПКМ — панорама, колёсико — зум. ПКМ на пустое место — создать секцию. Тяните от секции — создать и привязать элемент.

Blueprint Editor
Превью интерфейса (Accordion по графу)

Интерфейс ниже обновляется в реальном времени из графа выше.

После изменения настроек перезапустите аддон или Яндекс Музыку
?
Порядковый номер треков
?
Включено
Больше плейлистов от автора
?
Включено
Дата создания
?
Включено
Жанр
?
Включено
Полная дата релиза
?
Включено
Новый слайдер
?
0100
Обложка
?
Акцентный цвет
?
handleEvents.json

Результирующий JSON, генерируемый из графа блюпринта. Обновляется в реальном времени.

{
  "sections": [
    {
      "title": "Важно!",
      "items": [
        {
          "id": "btw",
          "name": "После изменения настроек перезапустите аддон или Яндекс Музыку",
          "description": "Для применения изменений в настройках необходим перезапуск аддона или Яндекс Музыки",
          "type": "text",
          "buttons": [
            {
              "id": "btwbtw",
              "name": " ",
              "text": "Для применения изменений в настройках необходим перезапуск аддона или Яндекс Музыки",
              "defaultParameter": "Для применения изменений в настройках необходим перезапуск аддона или Яндекс Музыки"
            }
          ]
        }
      ]
    },
    {
      "title": "Плейлисты",
      "items": [
        {
          "id": "playlist_index",
          "name": "Порядковый номер треков",
          "description": "Показывать порядковый номер треков рядом с обложкой в плейлистах",
          "type": "button",
          "bool": true,
          "defaultParameter": true
        },
        {
          "id": "playlist_moreOwner",
          "name": "Больше плейлистов от автора",
          "description": "При нажатии на автора в его подзаголовке плейлиста показывать другие плейлисты от него",
          "type": "button",
          "bool": true,
          "defaultParameter": true
        },
        {
          "id": "playlist_created",
          "name": "Дата создания",
          "description": "Показывать дату создания плейлиста в его подзаголовке",
          "type": "button",
          "bool": true,
          "defaultParameter": true
        }
      ]
    },
    {
      "title": "Альбомы",
      "items": [
        {
          "id": "album_genre",
          "name": "Жанр",
          "description": "Показывать жанр альбома в его подзаголовке",
          "type": "button",
          "bool": true,
          "defaultParameter": true
        },
        {
          "id": "album_date",
          "name": "Полная дата релиза",
          "description": "Изменять год релиза на полную дату в подзаголовке альбома",
          "type": "button",
          "bool": true,
          "defaultParameter": true
        },
        {
          "id": "sld_demo",
          "name": "Новый слайдер",
          "description": "Пример слайдера из блюпринта",
          "type": "slider",
          "min": 0,
          "max": 100,
          "step": 1,
          "value": 0,
          "defaultParameter": 0
        }
      ]
    },
    {
      "title": "Дополнительно",
      "items": [
        {
          "id": "fp_cover",
          "name": "Обложка",
          "description": "Выберите изображение для обложки",
          "type": "file_picker",
          "accept": ".png,.jpg,.webp"
        },
        {
          "id": "cp_accent",
          "name": "Акцентный цвет",
          "description": "Основной цвет интерфейса",
          "type": "color_picker",
          "defaultParameter": "#66e3ff"
        },
        {
          "id": "sel_theme",
          "name": "Тема оформления",
          "description": "Выберите тему для отображения",
          "type": "select",
          "defaultParameter": "dark",
          "options": [
            {
              "value": "dark",
              "label": "Тёмная"
            },
            {
              "value": "light",
              "label": "Светлая"
            },
            {
              "value": "system",
              "label": "Системная"
            }
          ]
        }
      ]
    }
  ],
  "nodes": [
    {
      "id": "section_0",
      "type": "section",
      "position": {
        "x": 48,
        "y": 32
      }
    },
    {
      "id": "btw",
      "type": "item",
      "position": {
        "x": 76,
        "y": 108
      },
      "sectionId": "section_0"
    },
    {
      "id": "section_1",
      "type": "section",
      "position": {
        "x": 48,
        "y": 210
      }
    },
    {
      "id": "playlist_index",
      "type": "item",
      "position": {
        "x": 76,
        "y": 286
      },
      "sectionId": "section_1"
    },
    {
      "id": "playlist_moreOwner",
      "type": "item",
      "position": {
        "x": 76,
        "y": 348
      },
      "sectionId": "section_1"
    },
    {
      "id": "playlist_created",
      "type": "item",
      "position": {
        "x": 76,
        "y": 410
      },
      "sectionId": "section_1"
    },
    {
      "id": "section_2",
      "type": "section",
      "position": {
        "x": 48,
        "y": 512
      }
    },
    {
      "id": "album_genre",
      "type": "item",
      "position": {
        "x": 76,
        "y": 588
      },
      "sectionId": "section_2"
    },
    {
      "id": "album_date",
      "type": "item",
      "position": {
        "x": 76,
        "y": 650
      },
      "sectionId": "section_2"
    },
    {
      "id": "sld_demo",
      "type": "item",
      "position": {
        "x": 76,
        "y": 712
      },
      "sectionId": "section_2"
    },
    {
      "id": "section_3",
      "type": "section",
      "position": {
        "x": 48,
        "y": 814
      }
    },
    {
      "id": "fp_cover",
      "type": "item",
      "position": {
        "x": 76,
        "y": 890
      },
      "sectionId": "section_3"
    },
    {
      "id": "cp_accent",
      "type": "item",
      "position": {
        "x": 76,
        "y": 952
      },
      "sectionId": "section_3"
    },
    {
      "id": "sel_theme",
      "type": "item",
      "position": {
        "x": 76,
        "y": 1014
      },
      "sectionId": "section_3"
    }
  ]
}
Usage
import { useState, useMemo } from 'react'
import {
  VisualBlueprintEditor,
  AddonSettingsAccordion,
  schemaToBlueprintGraph,
  blueprintGraphToSchema,
} from '@pulsesync/uikit'
import type { BlueprintGraph, AddonSettingsSchema } from '@pulsesync/uikit'

const [graph, setGraph] = useState<BlueprintGraph>(() =>
  schemaToBlueprintGraph(initialSchema)
)
const schema = useMemo(() => blueprintGraphToSchema(graph), [graph])

<VisualBlueprintEditor graph={graph} onChange={setGraph} />
<AddonSettingsAccordion schema={schema} multiple numbered />