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

Zoom using Item template

Usage of CSS scale transform produce ugly results in many browsers, so the best solution for zooming is sizing of chart with item templates. It gives us two advantages:

1. We can tune our CSS styles, so we can be sure that text is readable at any zoom level we provide.

2. We automatically change content of items at different zoom levels. 

See item template use case for more details about templates usage.

  

 

Comments 

 
#8 Administrator 2017-05-02 07:29
Quoting Denis:
Hi, please tell me can i have always draggable and zoom functions in primitives?

function onScale(scale) {
if (scale != null) {
$("#basicdiagram").famDiagram({sca le: scale });
}
$("#basicdiagram").famDiagram("update");
}

$('#basicdiagram').bind('mousewheel', function(e){
e.preventDefault( );
if(e.originalEvent.wheelDelta /120 > 0) {
onScale(3);
}
else{
onScale(0.8)
}
});

Draggable & Droppable cannot be built in, since their usage depends on specific application framework.
Quote
 
 
#7 Denis 2017-05-01 14:01
Hi, please tell me can i have always draggable and zoom functions in primitives?

function onScale(scale) {
if (scale != null) {
$("#basicdiagram").famDiagram({sca le: scale });
}
$("#basicdiagram").famDiagram("update");
}

$('#basicdiagram').bind('mousewheel', function(e){
e.preventDefault( );
if(e.originalEvent.wheelDelta /120 > 0) {
onScale(3);
}
else{
onScale(0.8)
}
});
Quote
 
 
#6 Administrator 2016-08-19 15:17
Quoting Lucy:
I am just using css zoom for zoom in and out. it works on zoom. but when zoom out, when i click somewhere , the chart is always moving.Why? And the on cursor nodes is not in the center of the screen

See Zoom Using CSS Scale Transform "How to use". This issue requires use of scale option. You cannot scale the whole widget, it should scale its content itself. It was fixed in 3.0.0 update.
Quote
 
 
#5 Lucy 2016-06-15 03:21
I am just using css zoom for zoom in and out. it works on zoom. but when zoom out, when i click somewhere , the chart is always moving.Why? And the on cursor nodes is not in the center of the screen
Quote
 
 
#4 Administrator 2015-10-28 06:59
Quoting wyxa:
Hi,
Is it possible to have dynamic template?
For example, I have template with primitives.common.Size(100,100) defined.
The thing is in "onItemRender", I put some data binding, and inner content height of the template is becoming more than 100px. What I want is to redraw the item, making it higher to fit the content.

What I thought would work is the following:
- loop through the items, find the one I want to change and set different template name (items updated)
- push a new template with the corresponding name options.template.push(generateNe wTemplate())

- jQuery("#basicdiagram").orgDiagram({ite ms: options.items, templates: options.templates});
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);

But this unfortunately does not work, as if the templates are not being updated.

Please help, if you have any idea.
Thanks.

Use "Redraw" or no option, see "First Organizational Chart Sample"
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Redraw);

It forces templates update. But in this case Widget does not reuse existing HTML elements in DOM, so you enforce full widget update.

Take into account that large items simply don't fit into screen, so showing one item in viewport does not make sense. The goal of diagram is to show diagram structure and make convenient navigation around the chart.

So we have to predict items user is focused on and show only them in full size

When user edits item it is focused on editing so we can place edit template on top of diagram and hide it on save. That template minimal size should be constrained by item size and maximum size by view port size.

We don't need to re-layout diagram in item edit mode.
Quote
 
 
#3 wyxa 2015-10-27 06:09
Hi,
Is it possible to have dynamic template?
For example, I have template with primitives.common.Size(100,100) defined.
The thing is in "onItemRender", I put some data binding, and inner content height of the template is becoming more than 100px. What I want is to redraw the item, making it higher to fit the content.

What I thought would work is the following:
- loop through the items, find the one I want to change and set different template name (items updated)
- push a new template with the corresponding name options.template.push(generateNe wTemplate())

- jQuery("#basicdiagram").orgDiagram({ite ms: options.items, templates: options.templates});
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);

But this unfortunately does not work, as if the templates are not being updated.

Please help, if you have any idea.
Thanks.
Quote
 
 
#2 Administrator 2015-08-07 20:58
Quoting Andrés Fallas:
Hi, I have a problem when I want to change the color of the title text and the title of the group, it is not working. Look at yourselves. This happens when I begin to use the zoom template.

Add this options to the orgchart code.
options.itemTitleFirstF ontColor = "#424242";
options.itemTitleSecond FontColor = "#000000";


Here is default template renderer:
var itemConfig = data.context,
itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : primitives.common.Colors.RoyalBlue,
color = primitives.common.highestContrast (itemTitleColor , this.options.itemTitleSecond FontColor, this.options.itemTitleFirstF ontColor);
data.element.find("[name=titleBackground ]").css({ "background": itemTitleColor });
data.element.find("[name=photo]").attr({ "src": itemConfig.image, "alt": itemConfig.title });
data.element.find("[name=title]").css({ "color": color }).text(itemConfig .title);
data.element.find("[name=description]").text(itemConfig .description);

when you change template render you overwrite it including title color.
Quote
 
 
#1 Andrés Fallas 2015-08-06 11:04
Hi, I have a problem when I want to change the color of the title text and the title of the group, it is not working. Look at yourselves. This happens when I begin to use the zoom template.

Add this options to the orgchart code.
options.itemTitleFirstF ontColor = "#424242";
options.itemTitleSecond FontColor = "#000000";
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support