canvas-tree

canvas-tree: declarative rendering of tree structures into HTML5-canvas

You should feed the canvas-tree with tree-structured object, consist of next fields:

    {
        geometry: geometyFunction,
        style: styleObject,
        children: [/* child nodes following the same pattern */],
        handlers: {
            onClick: function(){}
        }
    }

where:

• geometry: is a function that returns a Path2D instance. There are some separate modules presenting geometries:
  • canvas-rounded-rectangle
  • canvas-label
  • canvas-circle
  • canvas-s-line
  • ...more modules coming soon...
• style: a css-like style object. The properties are: fill, stroke, strokeWidth, cursor, hover (sub-object of the same type) and some geometry-specific properties such as radius for circle
• children: array of child nodes of the same type
• handlers: object with event handlers. Currently next handlers are supported:
  • onClick
  • onDoubleClick
  • onDragStart
  • onDrag
  • onDragEnd

API

• createCanvas(element) - creates canvasTree object
  • element canvas DOMElement
• canvasTree.update(tree) - render tree on canvas
• canvasTree.setMatrixListener(callback(matrix)) - sets the callback that will be called when transformation matrix is changed. Callback receive matrix itself as an argument.
• canvasTree.setMatrix(matix) - sets transformation matrix

Install

    $ npm install --save canvas-tree

Example usage

This will make a canvas where you can add circles when click and then move those circles by dragging and dropping them.

    import createCanvas from 'canvas-tree';
    import circle from 'canvas-circle';
 
    const nodeStyle = {
        radius: 10,
        fill: '#f4f4f4',
        stroke: '#122292',
        strokeWidth: 2,
        cursor: 'pointer',
        hover: {
            stroke: '#ff2292',
            strokeWidth: 4
        }
    };
 
    // the storage
    let tree = { // root node represents canvas itself
        children: [],
        handlers: { // these are handlers for canvas
            onClick: addNode
        }
    };
 
    const $canvas = document.getElementById('canvas');
 
    const canvas = createCanvas($canvas);
 
    function dragNode(e){
        const newNode = assign({}, e.node, {
            style: Object.assign({}, e.node.style, {top: e.y, left: e.x})
        });
        const newChildren = tree.children.slice();
        const i = newChildren.indexOf(newChildren.find(n => n.id === e.node.id));
        newChildren[i] = newNode;
        tree = Object.assign({}, tree, {
            children: newChildren
        });
        canvas.update(tree);
    }
 
    function addNode(e) {
        const id = tree.children.length === 0 ? 0 :
            tree.children[tree.children.length - 1].id + 1;
        const newNode = {
            id,
            geometry: circle,
            style: Object.assign({}, nodeStyle, {top: e.y, left: e.x}),
            handlers: {
                onDrag: dragNode
            }
        };
        tree = Object.assign({}, tree, {
            children: tree.children.concat([newNode])
        });
        canvas.update(tree);
    }
    canvas.update(tree);