0.1.2 • Published 4 years ago
mind-graph-js v0.1.2
MindGraph.js
A pure Vanilla JS graph component based on canvas, written in Typescript.
Currently under construction, not recommended for production environment.
Features
- no 3rd-party dependencies.
- single canvas rendering.
- support common mouse & keyboard interactions out of the box.
- full js API support for graph manipulation.
Installation
npm install mind-graph-js --saveor
yarn add mind-graph-jsUsage
- import
mindGraph.
import mindGraph from 'mind-graph-js';- create a new
MindMapinstance, which takes a dom element as the canvas container, then render it.
const dom = document.getElementById('app');
const mindMap = new mindGraph.MindMap(dom);
mindMap.render();- node operations are based on node ids, to add our first node, we need to aquire the root node id.
const rootId = mindMap.rootId;- call
addNode, which will return the id of the added node for future operations.
const nodeId = mindMap.addNode(rootId, 'first node');- all
MindMap's instance methods are as follows:
| method | description |
|---|---|
| addNode(parentId: number, text?: string, position?: number): number | add a node to it's parent, return new node's id. |
| deleteNode(nodeId: number): number | delete a node by id, return it's parent's id. |
| updateNode(nodeId: number, text: string) | update a node's text. |
| copyNode(nodeId: number) | copy a node by id. |
| cutNode(nodeId: number) | cut a node by id. |
| pasteNode(parentId: number) | paste the copied node to a specified parent. |
| toJson(): MapJson | export current graph to json. |
| loadJson(json: MapJson) | reconstruct current graph by json. |
- default mouse & keyboard interactions:
- Drag empty space to pan.
- Use mouse wheel to scroll vertically.
- Hold "Ctrl" and use mouse wheel to zoom.
- Click a node to select it.
- Double click a node to edit it's text.
- Drag & drop a node to change it's position
- "Ctrl + C" to copy the selected node.
- "Ctrl + X" to cut the selected node.
- "Ctrl + V" to paste copied node to the selected node.
*for Mac, "Cmd" key and "Ctrl" key work the same