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

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

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

See also
Back to top