shapes

хранит конфигурацию фигур диаграммы

Example

webix.ui({
  view: "diagram",
  shapes: [
    {id: "circle", value: "Start", x: 0, y:80},
    {id: "rrect", value: "Search", x: 120, y:80},
    {id: "decision", value: "Decision", x: 240, y:80},
  ]
});

Related samples

Массив shapes хранит конфигурацию фигур диаграммы. Через это свойство вы можете настраивать фигуры по умолчанию:

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

или добавлять новые фигуры:

shapes: [
  { 
    id: "laptop", 
    template:'<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
    backgroundColor:"#fff"
  }
]

Возможные поля:

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

Использование поля template

Поле template может принимать HTML-строку, функцию, возвращающую шаблон, или имя встроенного шаблона.

Как HTML-строка

В качестве значения template можно передать любую HTML-строку (например, задать изображение):

$$("diagram1").addShape("laptop", {
  template: `<img class="custom-image" src="svg/laptop.svg"></img>`,
  // другие данные
});

Related sample:  Diagram Editor: Extra Shapes

Как функция

Шаблон в виде функции удобен, когда размер фигуры нужно вычислять динамически в зависимости от внешнего размера элемента. Функция принимает один параметр:

• obj (object) - данные элемента (содержит данные блока и фигуры).

$$("diagram1").addShape("myshape", {
  template: function(obj) {
    const rx = obj.width / 2;
    const ry = obj.height / 2;
    const d = (obj.lineWidth || 1) / 2;
    return `
      <svg 
        width='100%' 
        height='100%'>
        <ellipse cx='${rx}' cy='${ry}' rx='${rx -d}' ry='${ry - d}' ></ellipse>
      </svg>`;
  },
  //...
});

Related sample:  Diagram Editor: Template as a Function

Как имя встроенного шаблона

Этот вариант удобен, когда один шаблон нужно использовать для нескольких фигур с разными цветами или размерами. Например, шаблон "rrect" (скруглённый прямоугольник) можно применить как фигуру "join" с небольшими размерами и как фигуру "action" со стандартными:

shapes:[
 {
  id: "action",
  template: "rrect",
  backgroundColor: "#b5d461",
  lineColor: "#b5d461",
 },
 {
  id: "join",
  template: "rrect",
  height: 80,
  width: 10,
  backgroundColor: "#ffb955",
  lineColor: "#ffb955",
 },
 // ...
]

Related sample:  Diagram Editor: Styled Shapes

Наверх