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"
  },
  // other shapes 
]

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

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

Possible fields are listed below:

• id (string) - shape ID. Must be unique
• template (string, function) - obligatory, template that defines the desired shape
• name (string) - used for Editor. Name displayed for text blocks or shown in the tooltip when the corresponding shape is hovered over
• square (boolean) - if true, an item will have the same width and height when its size is changed via form or drag resize
• angle (string, number) - angle of the shape rotation. The rotation origin is center
• fillOpacity (string, number) - opacity of the fill color inside the shape. Ranges from 0.0 to 1 or percentage from "0%" to "100%"
• lineWidth (string, number) - width of the shape outline
• lineColor (string, number) - color of the shape outline. "#ccd7e6" by default
• lineStyle (string, number) - stroke-dasharray for outline. Possible values are
  
  • "dotted"
  • "dashed"
  • numeric value The higher value is, the more space is in between dashes.
• backgroundColor (string) - background color (color name or HEX value). "#f4f5f9" by default
• altBackgroudColor (string) - alternative background. "#ccd7e6" by default. The property is only applicable to the "dots" type and custom shapes.

Usage of the template field

The template field can be used as an HTML string, a function that returns a template, or as a name of a built-in template.

As an HTML string

You can pass any HTML string as a value for template (e.g. define it as an image):

$$("diagram1").addShape("laptop", {
  template: `<img class="custom-image" src="svg/laptop.svg"></img>`,
  // other data
});

Related sample:  Diagram Editor: Extra Shapes

As a function

Template as a function can be useful when you need to calculate shape size depending on outer size (item size). The function accepts the only parameter:

• obj (object) - item data (contains block and shape data).

$$("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

As a name of a predefined shape

This option can be useful when you want to use one template for multiple shapes that may have different colors or sizes. For example, "rrect" template (rounded rectangle) can be used as "join" shape with small width/height and as "action" shape with standard size:

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

Наверх