Working with Block Types

Types serve to express the purpose of each block. Each type is a set of properies that will be applied to each individual block that uses this or that type.

From this article you will learn how to use predefined types, style them and create custom ones.

Built-in Style Types

By default a block has a simple rectangular shape with no styling:

There are two stylistic types:

  • "text" - it is used to render a plain text with a transparent background
  • "org" - it is used to render organization chart blocks.

Built-in SVG Types

On the picture below you can find the set of predefined SVG shapes (types).

Related sample:  Diagram: Built-in Shapes

Setting Types for Blocks

You can set a stylistic or an SVG type (shape) for each block individually or define them globally for all the blocks at once. To define types individually, you need to add the type field to the corresponding block object and set the name of the desired type as its value.

view: "diagram",
data: [
  {
    id: "start", 
    value: "start", 
    x: 0, 
    y: 80,
    type: "disk",   },
  // other blocks
]

In case your project requires all blocks to be of the same type, you can define it globally via the item property:

webix.ui({
  view: "diagram",
  data: [/* item blocks */],
  item: {
    // all blocks will have the heptagon type
    type: "heptagon"   }
});

Styling SVG-based blocks and types

There are 2 ways to style SVG-based blocks and types:

  1. Inside block data objects
  2. Inside the shapes array

Here you can apply the following properties:

Text styles

  • fontColor (string) - color of the inner text (color name or HEX value). "#475466" by default
  • fontSize (string) - size of the inner text font. 14px by default
  • fontWeight (string) - weight (boldness) of the font. 400 by default
  • fontStyle (string) - font style. Possible values are:
    • "normal" - default. Regular face of the family
    • "italic" - cursive font
    • "oblique" - a sloped version of the normal face of the font.
  • textAlign (string) - inner text alignment. "left", "center" (by default), "right"
  • textVAlign (string) - inner text vertical alignment. "top", "middle" (by default), "bottom"

SVG styles

  • 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" be 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.

Styling inside block objects

You can style blocks that use SVG-bsed types directly within the data items:

webix.ui({
  view: "diagram",
  data: [
    {
      id: "add", 
      value: "add to cart", 
      type: "action", 
      x: 580, 
      y: 80,
      backgroundColor:"#F67B72", 
      fontColor: "magenta"
    },
    // other blocks
  ],
});

Styling inside the shapes array

You can provide the defaults settings for each SVG-based type in the shapes configuration array.

The shapes property takes an array of type objects, so you can provide the defaults for several SVG-based types at once.

view:"diagram",
shapes: [
  {
    // customize styles for the action shape
    type: "action",
    backgroundColor:"#F67B72",
    fontColor: "magenta" 
  },
  // other shapes
]

Now all the blocks that use an "action" type will have the defined background and font colors, unless they have these colors of their own.

Changing Styling Dynamically

You can also use the setShape method to provide defaults for a particular SVG-based type.

$$("diagram1").setShape("dot", {
  lineColor: "#2d9bf0"
});

Related sample:  Diagram: Shape Styling

Now all the blocks that use a "dot" type will have the defined line color, unless they have a line color of their own.

Styling Using CSS

Styling default blocks

You can style default blocks, textual blocks and those with type: "org" globally or individually. To style them all the same way, define the item object inside the Diagram constructor and set CSS class name as a value for the css field:

{
  view: "diagram",
  data: [/* blocks data */],
  item: {
    css: "common_blocks"
  }
}

To style each block individually, add the $css field to the corresponding data object setting a CCS class name as its value:

// blocks dataset
[
  {
    id: "1",
    value: "Default",
    $css: "styles_for_block"
  }
]

Related sample:  Diagram: Built-in Block Styles

Styling SVG-based blocks

You can style SVG-based blocks with the help of CSS. For that you need to refer to the SVG element inside the div with the default webix_diagram_item class.

.webix_diagram_item.styles_for_block svg {
  fill: #938dce !important;
  stroke: #938dce !important;
}

Adding custom shapes

Diagram allows you to create and utilize custom SVG type (shape) to meet your needs.

You can provide custom shapes in the shapes array in the configuration:

{
  view: "diagram",
  shapes: [
    {
      name: "internet",
      svg: '<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
      lineColor: "98E4ED",
      backgroundColor:"#fff",
      altBackgroundColor:"#98E4ED",
      textVAlign:"bottom"
    },
    // other custom and predefined shapes
  ]
}

Or via by the addShape method:

$$("diagram").addShape("internet", {
  svg: '<svg width="60" height="60" viewBox="0 0 60 60">...</svg>',
  lineColor: "98E4ED",
  backgroundColor:"#fff",
  altBackgroundColor:"#98E4ED",
  textVAlign:"bottom"
});

Related sample:  Diagram: Custom Shapes

If you are adding an SVG with the path elements that need to be filled via altBackgroundColor, the elements must have the webix_diagram_shape_alt class.

<svg width="60" height="60" viewBox="0 0 60 60" fill="none" >   
   <rect width="60" height="60" />
   <path class="webix_diagram_shape_alt" .../> </svg>`

Also make sure the shape name is unique and does not coincide with any shape names from the predefined set. Otherwise the built-in shape will be overwritten with the custom one.

Accessing shape storage

Shapes are stores in the shapes array. You can get a data object of a particular shape. For that call the getShape method on the diagram passing the shape name as a parameter. The method returns a configuration object of the specified shape.

$$("diagram1").getShape("plus");
 
/*
{
  id: "plus",
  name: "plus",
  svg: "...svgCode"
}
*/
Back to top