Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

Labels

Chart provides options to draw labels for minimized items only. The following options on diagram Config class used to control labels rendering: showLabels, labelSize, labelOffset, labelOrientation, labelPlacement and etc. ItemConfig has property label, showLabel and etc. as well to customize labels per item. This is needed because dotted representation of item has no template to place HTML fragment for label inside.

If we need labels for regular items we can draw them using templates. Regular items are rendered as regular HTML fragments. So in order to place label over connection lines we have to place it outside of item boundaries. By default CSS class bp-item has overflow attribute set to hidden and HTML elements placed outside of item boundaries are invisible. In order to draw label we have to override bp-item class or directly edit primitives.lates.css and change overflow hidden to visible.

Following example demonstrates how to add an extra property "percent" to items and render it as a label over item connection line.

  

 

Comments 

 
#2 Administrator 2018-10-26 09:31
Quoting Filippo:
Hi,

In my site I use the icon library FontAwesome,

How can I insert a FontAwesome Icon inside the Item Content??

Be careful with SVG icons, don't overuse them. We merge all SVG elements into a single SVG html element. If you break them apart it is going to be unacceptably slow rendering.
Make preliminary test, create html page and populate it with matrix of SVG icons and test performance first. It is possible that it is better now than it was 3 years ago.

In order to change icon dynamicly use onItemRender call back function.
Quote
 
 
#1 Filippo 2018-10-26 08:41
Hi,

In my site I use the icon library FontAwesome,

How can I insert a FontAwesome Icon inside the Item Content??
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support