Виджеты Примеры Демо Форум Сервисы
Документация
СтартКомплексные решенияDiagram

Работа с типами блоков

Типы определяют фигуры для блоков. Фигуры помогают понять роль того или иного блока на диаграмме.

В этой статье вы узнаете, как использовать встроенные типы, стилизовать их и создавать собственные.

Стилизованные типы по умолчанию

По умолчанию, стандартный блок отображается в виде простого прямоугольника, без какой-либо стилизации:

Есть два типа блоков со встроенной стилизацией:

  • "text" - используется для отображения простого текста с прозрачным фоном
  • "org" - используется для отображения блоков организационной диаграммы.
  • "default" - шаблон по умолчанию.

Related sample:  

Встроенные SVG типы

На изображении ниже вы можете увидеть встроенные SVG фигуры (типы).

Related sample:  Diagram: Built-in Shapes

Как применять типы для блоков

Вы можете задать блоку стилизованный тип или SVG фигуру. Это можно сделать отдельно для каждого блока или же сразу для всех блоков. Для того чтобы применить тип индивидуально, необходимо добавить свойство type к соответствующему объекту блока и установить название нужного типа в качестве его значения.

webix.ui({
    view:"diagram",
    data:[
        {
            id:"start", 
            value:"start", 
            x:0, 
            y:80,
            type:"disk",         },
        // другие блоки
    ]
});

Если вам нужно, чтобы все блоки были одного типа, вы можете определить тип глобально в объекте item:

webix.ui({
  view:"diagram",
  data:[/* данные для блоков */],
  item:{
    // тип heptagon установлен для всех блоков
    type:"heptagon"   }
});

Как стилизовать блоки с помощью свойств

Существует два способа стилизации SVG блоков и типов:

  • Внутри объектов блоков
  • Внутри массива shapes.

Для стилизации вы можете использовать следующие свойства:

Стилизация текста

  • fontColor (string) - задает цвет текста внутри блоков (можно указать название цвета или HEX код). Цвет #475466 установлен по умолчанию
  • fontSize (string) - задает размер шрифта для текста внутри блоков. Значение 14px установлено по умолчанию
  • fontWeight (string) - задает насыщенность (полужирный) шрифта. Значение 400 установлено по умолчанию
  • fontStyle (string) - задает стиль шрифта. Можно установить следующие значения:
    • "normal" - установлен по умолчанию. Обычное начертание шрифта
    • "italic" - курсив
    • "oblique" - наклонное начертание обычного шрифта.
  • textAlign (string) - задает горизонтальное выравнивание текста.

Стилизация SVG

  • angle (string, number) - задает угол поворота фигуры. Центр вращения - центр фигуры
  • fillOpacity (string, number) - задает непрозрачность цвета заливки внутри фигуры. Диапазон от 0.0 до 1 или в процентах от "0%" до "100%"
  • lineWidth (number) - задает толщину обводки фигуры
  • lineColor (string) - задает цвет обводки фигуры. По умолчанию "#ccd7e6"
  • lineStyle (string, number) - stroke-dasharray для обводки. Возможные значения:
    • "dotted"
    • "dashed"
    • числовое значение Чем выше значение, тем больше отступ между сегментами линии.
  • backgroundColor (string) - задает цвет фона (можно указать название цвета или HEX код). Цвет #f4f5f9 установлен по умолчанию
  • altBackgroudColor (string) - задает альтернативный цвет фона. Цвет #ccd7e6 установлен по умолчанию. Это свойство можно применить только к типу "dots" и произвольным фигурам.

Стилизация внутри объекта блока

Блоки с SVG типами можно стилизовать непосредственно в объекте блока:

webix.ui({
  view:"diagram",
  data:[
    {
      id: "process",
      backgroundColor:"#F67B72",
      lineColor:"#F67B72",
      fontColor:"#fff"
    },
    // другие блоки
  ],
});

Стилизация внутри массива shapes

Внутри массива shapes вы можете задать настройки по умолчанию для каждого SVG типа.

Массив shapes содержит объекты с настройками типов. Вы также можете задать настройки по умолчанию сразу для нескольких типов.

view:"diagram",
shapes:[
  {
    id: "process",
    backgroundColor:"#F67B72",
    fontColor:"magenta" 
  },
  // другие фигуры
]

Теперь у всех блоков, которые используют тип "process", будет одинаковый цвет фона и текста. Если для конкретного блока задать другие цвета в индивидуальных настройках, они переопределят глобальные настройки.

Как динамически изменить стили

Метод setShape позволяет задать стили для конкретного SVG типа:

$$("diagram1").setShape("dot", {
  lineColor:"#2d9bf0"
});

Related sample:  Diagram: Shape Styling

Теперь у всех блоков, которые используют тип "dot", будет одинаковый цвет линий. Если внутри объекта конкретного блока задать другой цвет, он переопределит цвет, заданный с помощью метода.

Стилизация блоков при помощи CSS

Вы можете стилизовать блоки глобально или индивидуально. Чтобы применить стили сразу ко всем блокам, определите объект item внутри конструктора Diagram и укажите название CSS класса в качестве значения поля css:

{
  view:"diagram",
  data:[/* данные для блоков */],
  item:{
    css:"common_blocks"
  }
}

Стилизация фигур и текста у блоков

Чтобы стилизовать блоки и их содержимое (фигуру и текст), вам необходимо указать название CSS класса в качестве значения для поля блока $css:

{
  id: 1,
  // любое название
  $css: "my_css"
}

Далее рассматривается стилизация фигуры и текста блока.

Стилизация фигуры

Блок представляет собой контейнер с фигурой и текстом внутри. Поэтому, чтобы стилизовать внутреннюю фигуру блока по умолчанию, вам необходимо добавить CSS правило в зависимости от шаблона этой фигуры. У фигуры уже есть собственный CSS класс, который можно переопределить:

<!-- css классы для блока "default" -->
<div class="webix_diagram_shape webix_diagram_shape_default"></div>
 
<!-- css классы для блока "org" -->
<div class="webix_diagram_shape webix_diagram_shape_org"></div>

CSS правила для фигуры "org" будут выглядеть следующим образом:

.my_css .webix_diagram_shape_org { border-color: orange; }

SVG блоки стилизуются похожим образом, однако вам нужно обращаться напрямую к SVG элементу (а не CSS классу):

.my_css svg { stroke: orange; }

Related sample:  Diagram: Built-in Block Styles

Стилизация текста

Текст рисуется поверх фигуры. У такого текста есть CSS класс "webix_diagram_text", к которому и нужно обратиться:

.my_css .webix_diagram_text {
  font-weight: 500;
  background: transparent !important;
}

Related sample:  Diagram: Decision Tree

Как создать новую фигуру

Виджет Diagram позволяет создавать и применять собственные SVG типы (фигуры) для блоков диаграммы.

Чтобы создать собственную фигуру, добавьте объект с ее настройками в массив shapes:

{
  view:"diagram",
  shapes:[
    {
      id: "internet",
      // используется для тултипов в редакторе Diagram
      name: "Network",
      // используется для группировки фигур в редакторе Diagram
      group: "device",
      template: '<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
      lineColor: "98E4ED",
      backgroundColor:"#fff",
      altBackgroundColor:"#98E4ED",
      textVAlign:"bottom"
    },
    // другие фигуры (встроенные и собственные)
  ]
}

Можно также воспользоваться методом addShape:

$$("diagram").addShape("internet", {
  template: '<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
  name: "Network",
  group: "device",
  lineColor: "98E4ED",
  backgroundColor:"#fff",
  altBackgroundColor:"#98E4ED",
  textVAlign:"bottom"
});

Related sample:  Diagram: Custom Shapes

Обратите внимание, что для собственных фигур вам также необходимо добавить следующие поля:

  • id (string) - ID фигуры, если указан в массиве shapes
  • name (string) - название фигуры. Отображается в тултипе, когда пользователь наводит курсор мыши на соответствующую фигуру в редакторе Diagram
  • group (string) - название группы, к которой принадлежит фигура в редакторе Diagram.
    • Вы можете добавить фигуры в следующие группы по умолчанию "block", "flow" и "common"
    • Фигуры без поля group будут автоматически добавлены в группу "extra"
    • Чтобы добавить фигуру в произвольную группу, передайте название этой группы (если такой группы нет, виджет создаст её).

Если в вашей фигуре есть несколько элементов path, которые нужно стилизовать с помощью свойства altBackgroundColor, то этим элементам необходимо добавить класс webix_diagram_shape_alt.

<svg width="60" height="60" viewBox="0 0 60 60" fill="none" >   
   <rect width="60" height="60" />
   <path class="webix_diagram_shape_alt" .../> </svg>`

Убедитесь, что название фигуры не повторяется и не совпадает с названиями встроенных фигур. В противном случае, настройки вашей фигуры переопределят настройки встроенной.

Как получить доступ к хранилищу фигур

Настройки всех фигур хранятся в массиве shapes. Вы можете получить объект конкретной фигуры. Для этого нужно вызвать метод getShape для диаграммы, и передать название нужной фигуры в качестве параметра. Метод вернет объект с настройками указанной фигуры.

$$("diagram1").getShape("plus");
 
/*
{
  id:"plus",
  name:"plus",
  svg:"...svgCode"
}
*/
Наверх
© XB Software Ltd
2013-2026