cmap

Interactive visualization library for concept map

Demo

var cmap = Cmap();
 
var node0 = cmap.node({content: 'Rock', x: 100, y: 100});
var node1 = cmap.node({content: 'Paper', x: 180, y: 320});
var node2 = cmap.node({content: 'Scissors', x: 360, y: 180});
 
var link0 = cmap.link({content: 'beats'});
var link1 = cmap.link({content: 'beats'});
var link2 = cmap.link({content: 'beats'});
 
link0
  .sourceNode(node0)
  .targetNode(node2);
 
link1
  .sourceNode(node1)
  .targetNode(node0);
 
link2
  .sourceNode(node2)
  .targetNode(node1)
  .attr({
    cx: 356,
    cy: 335
  });

Features

• Draw and construct a concept map in a browser
• Support touch devices
• Standalone, no dependencies

Usage

<script src="cmap.js"></script>

Works on IE10+, Firefox, Safari, Chrome

API

Cmap()
Cmap(element)

Cmap(element)

Create a element or wrap a existing element for drawing a concept map.

// create a element in document.body
var cmap = Cmap();

// wrap a existing element
var container = document.getElementById('container');
var cmap = Cmap(container);

cmap.node(props)

Create and draw a node. You can set the attributes of the node (see node.attr()).

var cmap = Cmap();
 
// node with setting the text content, position and size
var node = cmap.node({
  content: 'Rock',
  x: 10,
  y: 20,
  width: 60,
  height: 40
});

cmap.link(props)

Create and draw a link. You can set the attributes of the link (see link.attr()).

var cmap = Cmap();
 
// link with setting the text content and center position
var link = cmap.link({
  content: 'beats',
  cx: 100,
  cy: 200
});

Possible parameters

node.attr(key)
node.attr(key, value)
node.attr(props)

Get or set given attributes of the node.

Possible parameters

• content: [string] the text string to draw (default: "")
• contentType: [string] name of the content type, "text" or "html" (default: "text")
• x: [number] x coordinate of the top left corner (default: 0)
• y: [number] y coordinate of the top left corner (default: 0)
• width: [number] width (default: 75)
• height: [number] height (default: 30)
• backgroundColor: [string] background color (default: "#a7cbe6")
• borderColor: [string] color of the four sides of a border (default: "#333")
• borderWidth: [number] width of the border (default: 2)
• textColor: [string] foreground color of the text content (default: "#333")

var node = cmap.node({
  content: 'Rock',
  x: 10,
  y: 20
});
 
// get all attributes as object
var attr = node.attr();
 
// get the value of an attribute
var x = node.attr('x');
 
// set the value of an attribute
node.attr('x', 100);
 
// set multiple attributes
node.attr({
  x: 20,
  y: 30
});

node.remove()

Remove the node from the concept map.

node.toFront()

Move the node on top of other nodes in the z-order.

node.element()

Get the DOM element of the node.

Normally, creating and updating DOM elements of a concept map is along with the browser's normal redraw cycle (achieved by window.requestAnimationFrame).

You can force a synchronous redraw.

var node = cmap.node({
  content: 'Rock'
});
 
console.log(node.element());        // null (not yet created)
 
node.redraw();
 
var element = node.element();
 
console.log(element);               // [object HTMLDivElement]
console.log(element.textContent);   // Rock
 
node.attr('content', 'Paper');
 
console.log(node.attr('content'));  // Paper
console.log(element.textContent);   // Rock (not yet updated)
 
node.redraw();
 
console.log(element.textContent);   // Paper

node.draggable()
node.draggable(true|false)

node.draggable(true|false)

Get or set whether or not to allow dragging the node (default: true).

Possible parameters

link.attr(key)
link.attr(key, value)
link.attr(props)

Get or set given attributes of the link.

Possible parameters

• content: [string] the text string to draw (default: "")
• contentType: [string] name of the content type, "text" or "html" (default: "text")
• cx: [number] x coordinate of the center of the text content (default: 100)
• cy: [number] y coordinate of the center of the text content (default: 40)
• width: [number] width of the text content (default: 50)
• height: [number] height of the text content (default: 20)
• backgroundColor: [string] background color of the text content (default: "white")
• borderColor: [string] color of the four sides of a border of the text content (default: "#333")
• borderWidth: [number] width of the border of the text content (default: 2)
• textColor: [string] foreground color of the text content (default: "#333")
• sourceX: [number] x coordinate of the starting point of the path (default: cx - 70)
• sourceY: [number] y coordinate of the starting point of the path (default: cy)
• targetX: [number] x coordinate of the ending point of the path (default: cx + 70)
• targetY: [number] y coordinate of the ending point of the path (default: cy)
• lineColor: [string] color of a border of the path (default: "#333")
• lineWidth: [number] width of the border of the path (default: 2)
• hasArrow: [boolean] drawing arrow at ending point of the path (default: true)

var link = cmap.link({
  content: 'beats',
  cx: 100,
  cy: 200
});
 
// get all attributes as object
var attr = link.attr();
 
// get the value of an attribute
var cx = link.attr('cx');
 
// set the value of an attribute
link.attr('cx', 150);
 
// set multiple attributes
link.attr({
  cx: 200,
  cy: 300
});

link.remove()

Remove the link from the concept map.

link.toFront()

Move the link on top of other links in the z-order.

link.element()

Get the DOM element of the link.

link.redraw()

Force a synchronous redraw of the link (same as node.redraw()).

link.draggable()
link.draggable(true|false)

link.draggable(true|false)

Get or set whether or not to allow dragging the link (default: true).

link.sourceNode()
link.sourceNode(node)
link.sourceNode(null)

link.sourceNode(node)
link.sourceNode(null)

Get or set the node which is connected to the starting point of the path.

var link = cmap.link();
var node = cmap.node();
 
console.log(link.sourceNode());             // null
 
// connect the node to the starting point of the path
link.sourceNode(node);
 
console.log(link.sourceNode() == node);     // true
 
// disconnect the node
link.sourceNode(null);
 
console.log(link.sourceNode());             // null

link.targetNode()
link.targetNode(node)
link.targetNode(null)

link.targetNode(node)
link.targetNode(null)

Get or set the node which is connected to the ending point of the path.

var link = cmap.link();
var node = cmap.node();
 
console.log(link.targetNode());             // null
 
// connect the node to the ending point of the path
link.targetNode(node);
 
console.log(link.targetNode() == node);     // true
 
// disconnect the node
link.targetNode(null);
 
console.log(link.targetNode());             // null

link.sourceConnectorEnabled()
link.sourceConnectorEnabled(true|false)

link.sourceConnectorEnabled(true|false)

Get or set whether or not to enable a connector at the starting point of the path (default: true).

link.targetConnectorEnabled()
link.targetConnectorEnabled(true|false)

link.targetConnectorEnabled(true|false)

Get or set whether or not to enable a connector at the ending point of the path (default: true).

Running tests

Clone the repository and install the developer dependencies:

git clone https://github.com/ionstage/cmap.git
cd cmap
npm install

Then:

npm test

License

Copyright © 2015 iOnStage Licensed under the MIT License.