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

Connector Annotations

Connector annotation is on screen direct connection line between two nodes of diagram. It supports simple conflict resolution, if multiple connections defined between the same pair of nodes, control offsets them and draws them in parallel. The following sample demonstrates connection annotation drawn in offbeat style, this way connection annotation should not overlap diagrams base connection lines:

  

 

Comments 

 
#12 Root 2014-10-23 09:15
Quoting Administrator:
Quoting Root:
How can I change position/route of connector?

The general idea of this widget is to make all layouts automatically, so you cannot control the exact path of annotation. Can you explain what kind of options you need to annotation placement.

Hi Administrator,
in case the width of the placeholder div (#basicdiagram in this case) is not big enough to show the annotation (set width to 30% and you'll see) if we could tell the annotation in which direction to "bend" or from which site of item to start, that would be great.
It would maybe overlap with other items, but there is no other solution then.
Or even better annotation is set to background and will come to front on hover, if needed.
Quote
 
 
#11 Administrator 2014-10-16 22:50
Quoting Root:
How can I change position/route of connector?

The general idea of this widget is to make all layouts automatically, so you cannot control the exact path of annotation. Can you explain what kind of options you need to annotation placement.
Quote
 
 
#10 Root 2014-10-16 06:12
How can I change position/route of connector?
Quote
 
 
#9 Root 2014-10-15 04:43
How can I add annotations to orgeditor??
Quote
 
 
#8 Ricardo Ibarra 2014-10-13 19:46
Quoting Administrator:
Hi Ricardo

Try this example again. We added dynamic annotation defenition.

Quoting Ricardo Ibarra:
How can i add connectors dynamically say on node click.
i want to recreate connectors on item/node click

im able to do annotations.push({..}) but when i refresh the orgdiagram it does not show the connections

$('div').orgDiagram(MLMT ree.vars.options);
$('div').orgDiagram("update", primitives.common.UpdateMode.Refresh);


Thanks for the example and it worked but im using drag and drop for parent reassignment and for some reason drag and drop stopped working after adding the annotation any ideas?

Regards and thanks for the fast response
Quote
 
 
#7 Administrator 2014-10-12 08:52
Hi Ricardo

Try this example again. We added dynamic annotation defenition.

Quoting Ricardo Ibarra:
How can i add connectors dynamically say on node click.
i want to recreate connectors on item/node click

im able to do annotations.push({..}) but when i refresh the orgdiagram it does not show the connections

$('div').orgDiagram(MLMT ree.vars.options);
$('div').orgDiagram("update", primitives.common.UpdateMode.Refresh);
Quote
 
 
#6 Ricardo Ibarra 2014-10-10 21:06
How can i add connectors dynamically say on node click.
i want to recreate connectors on item/node click

im able to do annotations.push({..}) but when i refresh the orgdiagram it does not show the connections

$('div').orgDiagram(MLMT ree.vars.options);
$('div').orgDiagram("update", primitives.common.UpdateMode.Refresh);
Quote
 
 
#5 Administrator 2014-06-06 06:25
Quoting Mritunjay Singh:
how can move connector label text to connector tip.

Download fresh demo.zip we added label placement property to Connector annotation for you
Quote
 
 
#4 Mritunjay Singh 2014-05-12 06:11
how can move connector label text to connector tip.
Quote
 
 
#3 Mritunjay Singh 2014-05-12 06:10
how can move connector label on connector tip. please reply me as soon as possible.
Quote
 
 
#2 Administrator 2014-03-01 08:18
Quoting shayan:
How i can create squared connector ? :o

Look, connector is designed not to obscure regular connector lines between nodes. Download demo.zip and try different positions of boxes, vertical/horizontal orientation. Connector's line is drawn to be visible. If you need an extra connections between nodes then try multi-parent chart famDiagram, it supports skipped parents, so you can make parent/child connections between any nodes in chart.
Quote
 
 
#1 shayan 2014-03-01 07:25
How i can create squared connector ? :o
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support