Skip to main content

Release 6.8.2

· 3 min read
Simon Porritt

NEW FUNCTIONALITY​

  • Added support for defaultSize to node/group definitions. Allows you to fix the size for a given vertex type without requiring that the values be in the vertex's backing data.

  • Added support for nodeSize to UI defaults. This is a fallback for the case that your vertices need to be rendered with a specific width/height but the values are not necessarily going to be available in the backing data.

UPDATES​

  • Fixed an issue with loading hierarchical-json over ajax - the content type was not correctly recognised and the data not parsed to JSON.

Default node size​

When you're creating a diagram builder with the Toolkit chances are you'll be using SVG for your elements. You don't have to use SVG, of course - we've written recently about how cool it is that jsPlumb can render to both HTML and SVG elements - but many times SVG is the element of choice in this situation.

We've been working on a network topology diagram recently with one of our evaluators:

svg elements in a network topology diagram - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

We use a shape library to render the nodes in this app, and we use SVG. This means that we need to have some concept of the width and height of each node, as you can't write out SVG without this information (if you use HTML to render your nodes you can rely on the DOM to figure out the size for you!).

Rather than force our evaluator friend to insert width and height into their dataset - since they already know the size of each element - we added a couple of convenient options to the Surface.

Default size in a node/group definition​

In your view you can provide a default size to use for vertices of some specific type:

toolkit.render(someContainer, {
    ...
    view:{
        nodes:{
            default:{
                template:`<div style="width:{{width}}px;height:{{height}}px">
                    {{label}}
                    <jtk-shape/>
                    </div>`,
                defaultSize:{w:50, h:50 }
            }
        }
    },
    ...
})

Why not just write width and height onto the root element of the template? Because the jtk-shape tag needs to know about it - it's the one writing out the SVG.

Default size in surface defaults​

If you don't need to be so granular as to provide a default size per type, you can just set it in the defaults for your surface:

toolkit.render(someContainer, {
    ...
    view:{
        nodes:{
            default:{
                template:`<div style="width:{{width}}px;height:{{height}}px">
                    {{label}}
                    <jtk-shape/>
                    </div>`                
            }
        }
    },
    defaults:{
        nodeSize:{w:50, h:50 }
    },
    ...
})

Summary​

We're continually striving to improve the usefulness and feature set of the Toolkit, and we think these new additions will really help, particularly when you're making something like we are here - a network topology diagram - and you know your element sizes are fixed.

Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how jsPlumb can help bring your ideas to market in record time.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.