Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ionstage/cmap
Interactive visualization library for concept map
https://github.com/ionstage/cmap
Last synced: 30 days ago
JSON representation
Interactive visualization library for concept map
- Host: GitHub
- URL: https://github.com/ionstage/cmap
- Owner: ionstage
- License: mit
- Created: 2015-03-09T13:10:08.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-04-11T09:34:16.000Z (over 5 years ago)
- Last Synced: 2024-11-09T07:43:16.690Z (about 1 month ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 91
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cmap
Interactive visualization library for concept map
[Demo](https://jsfiddle.net/k3uang1e/)
```js
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
```
```
Works on IE10+, Firefox, Safari, Chrome
## API
Cmap()
Cmap(element)
Create a element or wrap a existing element for drawing a concept map.
```js
// create a element in document.body
var cmap = Cmap();
```
```js
// 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()*](#node-attr)).
```js
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()*](#link-attr)).
```js
var cmap = Cmap();
// link with setting the text content and center position
var link = cmap.link({
content: 'beats',
cx: 100,
cy: 200
});
```
node.attr()
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")
```js
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.
node.redraw()
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.
```js
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)
Get or set whether or not to allow dragging the node (default: true).
link.attr()
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)
```js
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()*](#node-redraw)).
link.draggable()
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)
Get or set the node which is connected to the starting point of the path.
```js
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)
Get or set the node which is connected to the ending point of the path.
```js
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)
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)
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][mit].
[MIT]: http://www.opensource.org/licenses/mit-license.php