shapes

stores configuration of Diagram shapes

array 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

Diagram: Custom Shapes

Details

The shapes array stores configurations of Diagram shapes. Via this array you can configure defaults for the already existing shapes:

shapes: [
  {
    id: "process",
    backgroundColor:"#F67B72",
    lineColor:"#F67B72",
    fontColor:"#fff"
  },
  // other shapes 
]

or add custom shapes for further use:

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
});

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>`;
  },
  //...
});

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