Как применить VaadinIcons в качестве символов маркеров в диаграммах для Vaadin Flow? - PullRequest
Новая
       55

Как применить VaadinIcons в качестве символов маркеров в диаграммах для Vaadin Flow?

0 голосов
/ 01 июля 2019

У меня есть линейная диаграмма Vaadin Charts Flow 6 , и я хотел бы определить некоторые из VaadinIcons в качестве символов маркера.

Как мне этого добиться?

MarkerSymbol - это интерфейс, который реализован как

  • MarkerSymbolEnum для предоставления предопределенных маркеров, таких как, например,. круг, квадрат, алмаз и т. д.
  • MarkerSymbolUrl для предоставления URL-адреса изображения, которое должно использоваться в качестве маркера 
AtomicInteger xValue = new AtomicInteger(0);
List<Double> yValues = new Random( ).doubles(10, -10, 10).boxed( ).collect(Collectors.toList( ));        
List<DataSeriesItem> items = yValues.stream( )
                             .map(yValue -> new DataSeriesItem(xValue.getAndIncrement( ), yValue))
                             .collect(Collectors.toList( )); 

/* Instead of MarkerSymbolEnum or MarkerSymbolUrl, retrieve a VaadinIcon*/
items.forEach(item -> item.getMarker( ).setSymbol(MarkerSymbolEnum.DIAMOND));
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl("foo/bar.png")));
// new Icon(VaadinIcon.CHEVRON_UP);

DataSeries series = new DataSeries("example");
series.setData(items);

Chart chart = new Chart(ChartType.LINE);
chart.getConfiguration( ).addSeries(series);

Я не видел возможности получить URL-адрес VaadinIcon или напрямую его настроить.

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете динамически создать URL-адрес ресурса VaadinIcon следующим образом: 

String loc = "https://github.com/vaadin/vaadin-icons/blob/master/assets/png/"
String url = loc + VaadinIcon.CHEVRON_UP.name().toLowerCase().replace('_', '-');
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl(url)));

Vaadin также публикует svg ресурсы VaadinIcon на GitHub.В качестве альтернативы вы можете указать локальный путь к каталогу.

Логика, используемая для создания URL-адреса, исходит из Icon конструктора-оболочки public Icon(VaadinIcon icon).

Ваадин этого не делаетв настоящее время (по состоянию на июль 2019 года) разрешено прямое использование VaadinIcons в качестве символов маркера.

Для справки я включил некоторые подробности о классах Marker и Icon.

ДЕТАЛИ МАРКЕРА КЛАССА

Класс Маркер (расширяет абстрактный класс AbstractConfigurationObject ) имеет член MarkerSymbol который просто реализует интерфейс Сериализуемый .

Класс MarkerSymbolUrl реализует интерфейс MarkerSymbol и, кажется, представляет простой класс-оболочку getter / setter вокруг URL-адреса String.

Класс MarkerSymbolEnum реализует только статический список значений перечисления, поэтому не имеет значения.

ДЕТАЛИ КЛАССА *

Класс Значок конструктор оболочки public Icon(VaadinIcon icon) вызывает конструктор public Icon(String collection, String icon) с VaadinIcon , который использует функциональность Icon суперкласса Component для вызова унаследованной функции-члена Element . setAttribute (...) , в котором хранится вычисленная строка атрибута VaadinIcon (я полагаю, что в конечном итоге это записывается в тег div): 

public Icon(VaadinIcon icon) {
    this(ICON_COLLECTION_NAME, icon.name().toLowerCase().replace('_', '-'));
}

public Icon(String collection, String icon) {
    // iron-icon's icon-attribute uses the format "collection:name",
    // e.g. icon="vaadin:arrow-down"
    getElement().setAttribute(ICON_ATTRIBUTE_NAME, collection + ':' + icon);
}

Элемент расширяет абстрактный класс Node , который реализует интерфейс Serializable.

СЛЕДУЮЩИЕ ШАГИ

В конечном счете, это указывает на то, что классы Marker / MarkerSymbol и Icon не имеют общего суперкласса (кроме Object), поэтому нет возможности взаимодействия.

Для более глубокого погружения я бы посмотрел, как различные компоненты Vaadin визуализируют пользовательский интерфейс с использованием сгенерированной разметки, но сейчас кажется, что с помощью MarkerSymbolUrl и динамически вычисляемого URL-адресаот VaadinIcon представляет собой единственный прямой обходной путь.

...