addShape

добавляет произвольную SVG фигуру

id	string	ID фигуры
obj	object	настройки фигуры

Example

$$("diagram1").addShape("internet", {
  template:'<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
  // другие настройки
});

Related samples

Имя фигуры должно быть уникально. Возможные поля для объекта настроек фигуры:

• template (string, function) - обязательное поле. Определяет темплейт фигуры
• name (string) - название фигуры. Отображается в тултипе, когда пользователь наводит курсор мыши на соответствующую фигуру в редакторе
• square (boolean) - если true, блок сохраняет свои пропорции при изменении размера через форму или drag-n-drop
• angle (string, number) - угол поворота фигуры. Вращение происходит относительно центра
• fillOpacity (string, number) - прозрачность цвета (fill) внутри фигуры. Диапазон от 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" (type: "dots") и произвольных фигур.

Работа с полем template

Поле template может быть HTML строкой, функцией, или строкой с названием встроенного темплейта.

HTML строка

Вы можете передать любую HTML строку в поле template (напр. тэг для изображения):

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

Related sample:  Diagram Editor: Extra Shapes

Функция

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

• 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" (rounded rectangle) можно использовать вместо "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

Наверх