cmap
Interactive visualization library for concept map
var cmap = ; var node0 = cmap;var node1 = cmap;var node2 = cmap; var link0 = cmaplinkcontent: 'beats';var link1 = cmaplinkcontent: 'beats';var link2 = cmaplinkcontent: 'beats'; link0 ; link1 ; link2 ;
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(element)
Cmap()Cmap(element)
Create a element or wrap a existing element for drawing a concept map.
// create a element in document.bodyvar cmap = ;
// wrap a existing elementvar container = document;var cmap = ;
cmap.node(props)
Create and draw a node. You can set the attributes of the node (see node.attr()).
var cmap = ; // node with setting the text content, position and sizevar node = cmap;
cmap.link(props)
Create and draw a link. You can set the attributes of the link (see link.attr()).
var cmap = ; // link with setting the text content and center positionvar link = cmaplink 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; // get all attributes as objectvar attr = node; // get the value of an attributevar x = node; // set the value of an attributenode; // set multiple attributesnode;
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; console; // null (not yet created) node; var element = node; console; // [object HTMLDivElement]console; // Rock node; console; // Paperconsole; // Rock (not yet updated) node; console; // Paper
node.draggable(true|false)
node.draggable()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 = cmaplink content: 'beats' cx: 100 cy: 200; // get all attributes as objectvar attr = link; // get the value of an attributevar cx = link; // set the value of an attributelink; // set multiple attributeslink;
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(true|false)
link.draggable()link.draggable(true|false)
Get or set whether or not to allow dragging the link (default: true).
link.sourceNode(node)
link.sourceNode(null)
link.sourceNode()link.sourceNode(node)
link.sourceNode(null)
Get or set the node which is connected to the starting point of the path.
var link = cmaplink;var node = cmap; console; // null // connect the node to the starting point of the pathlink; console; // true // disconnect the nodelink; console; // null
link.targetNode(node)
link.targetNode(null)
link.targetNode()link.targetNode(node)
link.targetNode(null)
Get or set the node which is connected to the ending point of the path.
var link = cmaplink;var node = cmap; console; // null // connect the node to the ending point of the pathlink; console; // true // disconnect the nodelink; console; // null
link.sourceConnectorEnabled(true|false)
link.sourceConnectorEnabled()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(true|false)
link.targetConnectorEnabled()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.