CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="blog-wrapper blog-list-page plugin-blog plugin-id-default" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v2.4.3"> <title data-rh="true">Blog | Diagram and visual applications builder - JsPlumb Toolkit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://jsplumbtoolkit.com/blog"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="kanban, erd, entity relationship diagram, flowchart, decision tree, entity relationship diagram, diagram, chatbot, chart, graph, gantt charts, network topology diagrams, visualization, javascript, diagramming library, typescript, charts, orgchart"><meta data-rh="true" property="og:image" content="https://jsplumbtoolkit.com/img/rendering-ports/reskinned-chatbot.png"><meta data-rh="true" property="og:site_name" content="JsPlumb Toolkit, leading diagramming and visual connectivity Javascript and Typescript library"><meta data-rh="true" property="og:title" content="Blog | Diagram and visual applications builder - JsPlumb Toolkit"><meta data-rh="true" name="description" content="Blog"><meta data-rh="true" property="og:description" content="Blog"><meta data-rh="true" name="docusaurus_tag" content="blog_posts_list"><meta data-rh="true" name="docsearch:docusaurus_tag" content="blog_posts_list"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://jsplumbtoolkit.com/blog"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/blog" hreflang="en"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/blog" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script>window.dataLayer=window.dataLayer||[]</script> <script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-PNVM4WJV",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script> <script>var sc_project="12334448",sc_invisible=1,sc_security="71953373"</script> <script src="https://www.statcounter.com/counter/counter.js"></script> <link rel="alternate" type="application/rss+xml" href="/talking-tech/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/talking-tech/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <script src="https://js.stripe.com/v3/"></script><link rel="stylesheet" href="/assets/css/styles.1542c693.css"> <link rel="preload" href="/assets/js/runtime~main.d7194b24.js" as="script"> <link rel="preload" href="/assets/js/main.58243ff6.js" as="script"> </head> <body class="navigation-with-keyboard"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNVM4WJV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus"> <div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedImage_ToTc themedImage--dark_i4oU"></div></a></div><div class="navbar__items navbar__items--right"><a aria-current="page" class="navbar__item navbar__link btn btn-link navbar__link--active" href="/blog">News</a><a class="navbar__item navbar__link btn btn-link" href="/features">Features</a><a class="navbar__item navbar__link btn btn-link" href="/demonstrations">Demonstrations</a><a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Documentation</a><a class="navbar__item navbar__link btn btn-link" href="/contact">Contact</a><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Download</a><a class="navbar__item navbar__link btn btn-secondary mx-2" href="/trial">Free trial</a><a href="https://licensing.jsplumbtoolkit.com/purchase/toolkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-primary">Buy</a><div class="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/10/14/release-6.81.0">Release 6.81.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/10/04/release-6.80.0">Release 6.80.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/24/release-6.72.0">Release 6.72.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/16/release-6.71.0">Release 6.71.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/06/release-6.70.0">Release 6.70.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/26/release-6.60.0">Release 6.60.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/23/release-6.50.0">Release 6.50.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/16/release-6.40">Release 6.40.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/07/18/wrapping-data-in-web-components">Wrapping JsPlumb in Web Components</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/07/03/building-a-tile-game-with-drag-constrain-functions">Building a tile game using JsPlumb's advanced drag handling</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/26/release-6.30">Release 6.30.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/25/release-6.29.0">Release 6.29.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/23/unit-testing">Unit Testing with JsPlumb</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/23/release-6.28.0">Release 6.28.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/20/release-6.27.0">Release 6.27.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/18/release-6.26.0">Release 6.26.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/11/release-6.25.0">Release 6.25.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/06/release-6.24.0">Release 6.24.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/05/17/jsplumb-and-html2canvas">Generating output with html2canvas and JsPlumb</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/05/12/release-6.23.0">Release 6.23.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/19/release-6.22.0">Release 6.22.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/18/release-6.21.0">Release 6.21.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/08/release-6.20.0">Release 6.20.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/05/release-6.19.0">Release 6.19.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/04/release-6.18.0">Release 6.18.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/28/angular-signals-integration">Angular signals integration</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/26/release-6.17.0">Release 6.17.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/25/release-6.16.0">Release 6.16.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/18/release-6.15.0">Release 6.15.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/16/release-6.14.0">Release 6.14.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/02/release-2.50.0">Release 2.50.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/31/release-6.13.0">Release 6.13.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/28/release-6.12.0">Release 6.12.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/20/release-6.11.0">Release 6.11.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/11/animated-edges">Animating edges in SVG</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/10/release-6.10.0">Release 6.10.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/27/release-6.9.1">Release 6.9.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/22/release-6.9.0">Release 6.9.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/19/image-processing-with-canvas">Image processing with HTML canvas</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/17/rendering-ports">Rendering ports in the Toolkit</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/09/release-6.8.2">Release 6.8.2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/08/release-6.8.1">Release 6.8.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/07/release-6.8.0">Release 6.8.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/03/magnetizing-diagram-elements">Magnetizing diagram elements</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/30/fixed-and-floating-elements">Fixed and floating elements (also, how the snaplines plugin works)</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/30/release-6.7.2">Release 6.7.2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/25/release-6.7.1">Release 6.7.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/24/jsplumb-jointjs-comparison">JointJS - JsPlumb Comparison</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/19/release-6.7.0">Release 6.7.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/13/release-6.6.5">Release 6.6.5</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/10/release-6.6.4">Release 6.6.4</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/04/release-6.6.3">Release 6.6.3</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/04/angular-chatbot">Angular chatbot</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/03/how-to-build-a-chatbot-designer">Building a chatbot app in 3 hours and 37 minutes</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/26/release-6.6.2">Release 6.6.2 - Rotating custom overlays</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/24/jsplumb-element-rendering">The case for rendering to separate elements</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/20/release-6.6.0">Release 6.6.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/03/release-6.5.0">Release 6.5.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/06/21/release-6.2.5">Release 6.2.5</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/04/04/release-6.0.0">Release 6.0.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/11/28/release-5.13.1">Release 5.13.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/08/16/toolkit-release-5.10.8">Release 5.10.8</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/07/26/docusaurus-env-loader-json-plugin">Docusaurus JSON environment loader</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/05/21/angular-inputs-and-outputs">Angular Inputs and Outputs</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/05/20/custom-connectors">Custom connectors</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/02/10/anchor-position-finder-toolkit-edition">Anchor position finders</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2021/11/09/version-5.0.0">Version 5.0.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2021/09/06/docusaurus-and-statcounter">Statcounter plugin for Docusaurus</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2018/06/26/world-cup-visualisation-part-2">World Cup 2018, part 2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2018/06/25/world-cup-visualisation-part-1">World Cup 2018, part 1</a></li></ul></nav></aside><main class="col col--7" itemscope="" itemtype="http://schema.org/Blog"><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="Release 6.81.0 contains a few nice ergonomic improvements to the Inspector, and to undo/redo functionality."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/10/14/release-6.81.0">Release 6.81.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-10-14T06:00:00.000Z" itemprop="datePublished">October 14, 2024</time> · 2 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">Release 6.81.0 contains a few nice ergonomic improvements to the Inspector, and to undo/redo functionality.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inspector">Inspector<a href="#inspector" class="hash-link" aria-label="Direct link to Inspector" title="Direct link to Inspector"></a></h3>By default, the inspector will not write an empty string for a value where that value does not already have a value in some object's backing data. For example, consider our <a href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank" rel="noopener noreferrer">Flowchart Builder</a> starter app - when you drag a new item onto the canvas, the inspector opens, and the focus is on the <code>Text</code> field:<img src="/img/release_6_81_0/inspector-blank-values.png" alt="Writing blank values with the inspector - JsPlumb - When you've reached the limit with ReactFlow, we can help!">Since this inspector is set to <code>autoCommit</code>, a blur event (ie.the mouse is clicked somewhere else on the screen) will cause the inspector to write the current textfield contents into the object's backing data. This also has the effect of pushing an event onto the undo/redo stack. But in this case there is no effective change, from the user's point of view. Prior to 6.81.0, if the user subsequently presses 'undo', the first event that was undone was this update, which makes no discernible change from the user's perspective. From 6.81.0 onwards, the inspector will not write out blank values to a data object if there was no previous value for that field in the object. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="edge-undoredo">Edge undo/redo<a href="#edge-undoredo" class="hash-link" aria-label="Direct link to Edge undo/redo" title="Direct link to Edge undo/redo"></a></h3> We've also made a change to the way edges are handled by undo/redo when your edge paths are editable. Prior to 6.81.0 when you dragged a new edge with the mouse, an edge add event was pushed onto the undo stack, and then a separate path edit event was pushed afterwards. This again was counterintuitive for a user, since from their perspective the new edge and its starting geometry form the entire event. In 6.81.0 we've remedied this situation: now when you drag a new edge and you have a path editor attached, only one event is pushed to the undo stack.These couple of changes, whilst minor, make a big difference to the ergonomics of your app for your users.<hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's inspector component here: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/inspectors" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/inspectors</a></li><li>Browse our docs on edge path editing: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edges/edge-path-editing" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edges/edge-path-editing</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="Release 6.80.0 is a major update to our Svelte integration, with the introduction of a host of new components, plus a surface provider, making it easier than ever before to rapidly build visual connectivity apps."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/10/04/release-6.80.0">Release 6.80.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-10-04T06:00:00.000Z" itemprop="datePublished">October 4, 2024</time> · 4 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">Release 6.80.0 is a major update to our Svelte integration, with the introduction of a host of new components, plus a surface provider, making it easier than ever before to rapidly build visual connectivity apps.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="svelte-updates">Svelte Updates<a href="#svelte-updates" class="hash-link" aria-label="Direct link to Svelte Updates" title="Direct link to Svelte Updates"></a></h3>Where previously you'd have to manually instantiate a <code>ControlsComponent</code> or add a <code>MiniviewPlugin</code>, from 6.80.0 onwards these are supplied as Svelte components which can be declared as children of a <code>SurfaceComponent</code>:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> import { MiniviewComponent, SurfaceComponent, ControlsComponent } from '@jsplumbtoolkit/browser-ui-svelte'; const data = { nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } </script> <SurfaceComponent data={data}> <ControlsComponent/> <MiniviewComponent/> </SurfaceComponent> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="surfaceprovider">SurfaceProvider<a href="#surfaceprovider" class="hash-link" aria-label="Direct link to SurfaceProvider" title="Direct link to SurfaceProvider"></a></h3>In the above code, <code>ControlsComponent</code> and <code>MiniviewComponent</code> are able to locate the Surface to attach to because under the hood the <code>SurfaceComponent</code> has populated a Svelte context. We've also included a dedicated <code>SurfaceProvider</code> component which populates the context, and which you can use when you need to supply a surface reference to some other component, such as a <code>PaletteComponent</code> or <code>InspectorComponent</code>. You'll see this in a couple of the examples below.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="palettecomponent">PaletteComponent<a href="#palettecomponent" class="hash-link" aria-label="Direct link to PaletteComponent" title="Direct link to PaletteComponent"></a></h3>We've included a <code>PaletteComponent</code>, from which your users can drag new nodes/groups onto the canvas:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> import { MiniviewComponent, SurfaceComponent, ControlsComponent, PaletteComponent } from '@jsplumbtoolkit/browser-ui-svelte'; const dataGenerator = function (el) { return { w:120, h:80, type:el.getAttribute("data-node-type") }; }; const data = { nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } </script> <SurfaceProvider> <div class="row"> <SurfaceComponent data={data} class="col-9"> <ControlsComponent/> <MiniviewComponent/> </SurfaceComponent> <PaletteComponent selector="li" dataGenerator={dataGenerator} class="col-3"> <ul> <li data-node-type="foo" jtk-is-group="true">FOO</li> <li data-node-type="bar">BAR</li> </ul> </PaletteComponent> </div> </SurfaceProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="shapelibrarypalettecomponent">ShapeLibraryPaletteComponent<a href="#shapelibrarypalettecomponent" class="hash-link" aria-label="Direct link to ShapeLibraryPaletteComponent" title="Direct link to ShapeLibraryPaletteComponent"></a></h3>We've included a <code>ShapeLibraryPaletteComponent</code>, a specialised instance of <code>PaletteComponent</code> that renders the contents of some <code>ShapeLibrary</code> and allows your uses to drag new SVG shapes onto the canvas.<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> import { MiniviewComponent, SurfaceComponent, ControlsComponent, ShapeLibraryPaletteComponent } from '@jsplumbtoolkit/browser-ui-svelte'; import { ShapeLibraryImpl, FLOWCHART_SHAPES } from "@jsplumbtoolkit/browser-ui" const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES]) </script> <SurfaceProvider> <div class="row"> <SurfaceComponent data={data} class="col-9" shapeLibrary={shapeLibrary}> <ControlsComponent/> <MiniviewComponent/> </SurfaceComponent> <ShapeLibraryPaletteComponent class="col-3"/> </div> </SurfaceProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="inspectorcomponent">InspectorComponent<a href="#inspectorcomponent" class="hash-link" aria-label="Direct link to InspectorComponent" title="Direct link to InspectorComponent"></a></h3>We've included an <code>InspectorComponent</code>, which wraps the vanilla JS <code>Inspector</code> with a nice component-based API:<div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">App</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">NodeInspector</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">EdgeInspector</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> import { SurfaceComponent, InspectorComponent } from '@jsplumbtoolkit/browser-ui-svelte'; import { Node, Edge } from '@jsplumbtoolkit/browser-ui" import NodeInspector from "./NodeInspector.svelte" import EdgeInspector from "./EdgeInspector.svelte" const inspectors = { [Node.objectType]:NodeInspector, [Edge.objectType]:EdgeInspector } </script> <SurfaceProvider> <div class="row"> <SurfaceComponent data={data} class="col-9" shapeLibrary={shapeLibrary}> <ControlsComponent/> <MiniviewComponent/> </SurfaceComponent> <InspectorComponent class="col-3" inspectors={inspectors}/> </div> </SurfaceProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> export let inspector </script> <div class="d-flex flex-column"> <input type="text" jtk-att="label" placeholder="enter node label"/> <input type="color" jtk-att="color"/> </div> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><script> export let inspector </script> <div class="d-flex flex-column"> <input type="text" jtk-att="label" placeholder="enter edge label"/> </div> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div></div></div>Those are a few of the key items, but there's a lot in this Svelte upgrade. The full changelog is:<h3 class="anchor anchorWithStickyNavbar_LWe7" id="new-functionality">New functionality<a href="#new-functionality" class="hash-link" aria-label="Direct link to New functionality" title="Direct link to New functionality"></a></h3><ul><li>Added <code>SurfaceProvider</code>, an element that provides context for various other elements, allowing things like the miniview or controls components to find the surface to attach to.</li><li>Added <code>MiniviewComponent</code>, which provides a miniview attached to some surface.</li><li>Added <code>ControlsComponent</code>, which provides a set of controls with basic operations such as zoom to extents, undo/redo, etc.</li><li>Added <code>ExportControlsComponent</code>, which provides a set of buttons from which users can export a diagram to SVG, PNG or JPG.</li><li>Added <code>PaletteComponent</code>, a component from which users can drag new nodes/groups onto the canvas.</li><li>Added <code>ShapeLibraryPaletteComponent</code>, a specialized version of <code>PaletteComponent</code> that renders the contents of a shape library, from which users can drag shapes onto the canvas.</li><li>Added <code>ShapeComponent</code>, an SVG shape renderer.</li><li>Added <code>InspectorComponent</code>, a Svelte wrapper around JsPlumb's <code>Inspector</code>. </li><li>Added <code>EdgeTypePickerComponent</code>, a component that renders samples of a list of edge types, and allows a user to select one.</li><li>The Svelte <code>SurfaceComponent</code> will now render a default component for nodes/groups if no explicit mapping is found in the view. This is great for rapid prototyping.</li><li>Added full JS docs for all interfaces in the Svelte integration.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking-changes">Breaking changes<a href="#breaking-changes" class="hash-link" aria-label="Direct link to Breaking changes" title="Direct link to Breaking changes"></a></h3><ul><li>The props for the Svelte <code>SurfaceComponent</code> have changed:<ul><li><code>renderParams</code> is now <code>renderOptions</code></li><li><code>viewParams</code> is now <code>viewOptions</code></li><li><code>toolkitParams</code> is now <code>modelOptions</code></li></ul></li><li>You'll now need to use, at a minimum, Svelte 3.55. But we recommend using Svelte 4.</li></ul><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Checkout our new and improved API documentation here: <a href="https://apidocs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">https://apidocs.jsplumbtoolkit.com</a></li><li>Read about JsPlumb's comprehensive Svelte integration here: <a href="https://angular.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://svelte.jsplumbtoolkit.com/</a></li><li>Browse our Svelte API docs here: <a href="https://apidocs.jsplumbtoolkit.com/6.x/current/browser-ui-svelte/" target="_blank" rel="noopener noreferrer">https://apidocs.jsplumbtoolkit.com/6.x/current/browser-ui-svelte/</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="This is a minor release, with the focus being on improving the JS docs, in conjunction with a major upgrade to https://docs.jsplumbtoolkit.com"><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/09/24/release-6.72.0">Release 6.72.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-24T06:00:00.000Z" itemprop="datePublished">September 24, 2024</time> · One min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">This is a minor release, with the focus being on improving the JS docs, in conjunction with a major upgrade to <a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com</a><h3 class="anchor anchorWithStickyNavbar_LWe7" id="new-functionality">New functionality<a href="#new-functionality" class="hash-link" aria-label="Direct link to New functionality" title="Direct link to New functionality"></a></h3><ul><li>Added <code>onVertexAdded</code> input to Angular <code>ShapeLibraryPalette</code> component. </li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking">Breaking<a href="#breaking" class="hash-link" aria-label="Direct link to Breaking" title="Direct link to Breaking"></a></h3><ul><li>The <code>AnimationEvents</code> enum was removed and its members (<code>EVENT_END_OVERLAY_ANIMATION</code> etc) are now just exposed as constants. </li></ul><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Checkout our new and improved API documentation here: <a href="https://apidocs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">https://apidocs.jsplumbtoolkit.com</a></li><li>Read about JsPlumb's comprehensive Angular integration here: <a href="https://angular.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://angular.jsplumbtoolkit.com/</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="In this release:"><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/09/16/release-6.71.0">Release 6.71.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-16T06:00:00.000Z" itemprop="datePublished">September 16, 2024</time> · 2 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">In this release:<h3 class="anchor anchorWithStickyNavbar_LWe7" id="connectors">Connectors<a href="#connectors" class="hash-link" aria-label="Direct link to Connectors" title="Direct link to Connectors"></a></h3><ul><li>We've "undeprecated" the usage of static connector type names, such as <code>OrthogonalConnector.type</code>. Where previously we'd deprecated these in favour of string constants (such as <code>CONNECTOR_TYPE_ORTHOGONAL</code>), we - and some licensees - have found that in some situations using the string constant causes a tree shaker to leave the connector code out. This was particularly prevalent in Angular apps. We recommend now using the static type names, even if you're not using Angular.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="adhoc-layouts">Adhoc Layouts<a href="#adhoc-layouts" class="hash-link" aria-label="Direct link to Adhoc Layouts" title="Direct link to Adhoc Layouts"></a></h3><ul><li>The <code>adHocLayout</code> method of the Surface now clears the geometry of all the edges in the canvas, because edited edge paths are intrinsically linked to the position of their source and target vertices, and the <code>adHocLayout</code> method can arbitrarily move any vertex.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="angular-integration">Angular integration<a href="#angular-integration" class="hash-link" aria-label="Direct link to Angular integration" title="Direct link to Angular integration"></a></h3><ul><li>We added optional <code>data</code> and <code>url</code> inputs to the <code>jsplumb-surface</code> component in the Angular integration. You can now do things like this in your templates:</li></ul><div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><jsplumb-surface [toolkitParams]="toolkitParams" [renderParams]="renderParams" [view]="view" url="/assets/dataset.json"></jsplumb-surface> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>or<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><jsplumb-surface [toolkitParams]="toolkitParams" [renderParams]="renderParams" [view]="view" [data]="data"></jsplumb-surface> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>instead of having to declare a <code>@ViewChild</code> and load the data afterwards.<hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's comprehensive Angular integration here: <a href="https://angular.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://angular.jsplumbtoolkit.com/</a></li><li>Read about JsPlumb's connector types here: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/connectors" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/connectors</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="In release 6.70.0 we've updated our Vue 3 integration to make it more modern and easier to use, with reduced boilerplate and better documentation."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/09/06/release-6.70.0">Release 6.70.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-06T06:00:00.000Z" itemprop="datePublished">September 6, 2024</time> · 3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">In release 6.70.0 we've updated our Vue 3 integration to make it more modern and easier to use, with reduced boilerplate and better documentation. It is now optional to set <code>surfaceId</code> on the <code>SurfaceComponent</code>, <code>MiniviewComponent</code>, <code>ControlsComponent</code>, <code>ExportControlsComponent</code> and <code>ShapePaletteComponent</code> - the components will use a default value if not provided.With these changes you can now get up and running with JsPlumb Vue quicker than ever:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><template> <div style="width:100%;height:100%"> <SurfaceComponent :data="this.getData()"/> <ControlsComponent/> <MiniviewComponent/> </div> </template> <script> import { defineComponent } from "vue" export default defineComponent({ methods:{ getData:function() { return { data:{ nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } } } } }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We've also made a bunch of other nice changes in this release. The full changelog is:<h3 class="anchor anchorWithStickyNavbar_LWe7" id="updates">Updates<a href="#updates" class="hash-link" aria-label="Direct link to Updates" title="Direct link to Updates"></a></h3><ul><li>None of the Vue 3 components require a <code>surface-id</code> prop anymore. For the vast majority of apps, having a single surface, that means you can rely on the defaults and remove a bunch of boilerplate from your templates.</li><li>If you do not provide a component to map a node or a group, the Vue 3 integration will now use a default component.</li><li>Vue 3's <code>loadSurface</code> method now makes surfaceId optional: if you omit it, JsPlumb will use the default surface id.</li><li>We've added a <code>ControlsComponent</code> to our Vue 3 integration</li><li>We've added an <code>ExportControlsComponent</code> to our Vue 3 integration</li><li>We've added an <code>ExportControlsComponent</code> to our React integration</li><li>Our Vue 3 docs have been updated to be easier to follow and to find the things you need.</li><li>The <code>ControlsComponent</code> in the React integration was updated to honour an orientation prop set on it.</li><li>You can pass an optional <code>typeParameter</code> and/or <code>categoryParameter</code> to the constructor of ShapeLibraryImpl. This allows you to override the parameters the shape library will use from each vertex's data to resolve the shape to use.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking-changes">Breaking changes<a href="#breaking-changes" class="hash-link" aria-label="Direct link to Breaking changes" title="Direct link to Breaking changes"></a></h3>A few components were renamed in the Vue 3 integration:<ul><li><code>jsplumb-toolkit</code> is now <code>SurfaceComponent</code></li><li><code>jsplumb-miniview</code> is now <code>MiniviewComponent</code></li><li><code>jsplumb-shape</code> is now <code>ShapeComponent</code></li><li><code>jsplumb-shape-palette</code> is now <code>ShapePaletteComponent</code></li><li><code>jsplumb-edge-type-picker</code> is now <code>EdgeTypePicker</code></li></ul>In the Vue 3 SurfaceComponent:<ul><li><code>renderParams</code> was renamed to <code>renderOptions</code></li><li><code>view</code> was renamed to <code>viewOptions</code></li><li><code>toolkitParams</code> was renamed to <code>toolkitOptions</code></li></ul><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's comprehensive Vue 3 integration here: <a href="https://vue.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://vue.jsplumbtoolkit.com/</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="In release 6.60.0 we've updated our Angular integration to make it more modern and easier to use, with support for signals, reduced boilerplate, and better documentation. The @jsplumbtoolkit/browser-ui-angular package now requires Angular 16 or later. Don't worry, though, if you're on a version of Angular older than 16: we've renamed our existing Angular integration to @jsplumbtoolkit/browser-ui-angular-legacy, and you can still use it."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/08/26/release-6.60.0">Release 6.60.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-26T06:00:00.000Z" itemprop="datePublished">August 26, 2024</time> · 3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">In release 6.60.0 we've updated our Angular integration to make it more modern and easier to use, with support for signals, reduced boilerplate, and better documentation. The <code>@jsplumbtoolkit/browser-ui-angular</code> package now requires Angular 16 or later. Don't worry, though, if you're on a version of Angular older than 16: we've renamed our existing Angular integration to <code>@jsplumbtoolkit/browser-ui-angular-legacy</code>, and you can still use it. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="signals">Signals<a href="#signals" class="hash-link" aria-label="Direct link to Signals" title="Direct link to Signals"></a></h3>You may recall a post we wrote a few months ago, detailing how <a href="https://jsplumbtoolkit.com/blog/2024/03/28/angular-signals-integration" target="_blank" rel="noopener noreferrer">signals could be integrated with JsPlumb Angular</a>. We've taken the code we sketched out in that post and integrated it into a brand new <code>BaseNodeComponent</code>, which exposes the underlying vertex data as a signal - <code>objSignal</code> - and ensures that the signal is kept up to date to changes in the node's data.<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">import { Component, computed } from "@angular/core"; import { BaseNodeComponent } from "@jsplumbtoolkit/browser-ui-angular"; @Component({ template: `<div>{{myComputedValue()}}</div>` }) export class NodeComponent extends BaseNodeComponent { readonly myComputedValue = computed( () => this.objSignal().values.join(",") ); } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We've also created <code>BaseGroupComponent</code>, for the sake of completeness. Prior to 6.60.0 users had to extend <code>BaseNodeComponent</code> when creating a component to render a group. <code>BasePortComponent</code> has also been updated to expose its underlying data object as a signal. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reduced-boilerplate">Reduced boilerplate<a href="#reduced-boilerplate" class="hash-link" aria-label="Direct link to Reduced boilerplate" title="Direct link to Reduced boilerplate"></a></h3><ul><li>It is now optional to set <code>toolkitId</code> on a <code>SurfaceComponent</code>; the component will use a default value if not provided. Given that most apps have only one Toolkit model having to always provide a <code>toolkitId</code> was largely redundant.</li><li>It is now optional to set <code>surfaceId</code> on the <code>SurfaceComponent</code>, <code>MiniviewComponent</code>, <code>ControlsComponent</code> and <code>ShapeLibraryPaletteComponent</code>; the components will use a default value if not provided.</li></ul>With these changes you can now get up and running with JsPlumb Angular quicker than ever:<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"> import { Component } from "@angular/core"; import { NodeComponent } from "./node.component"; @Component({ selector: 'app-component', template: `<div> <jsplumb-surface [view]="view" [renderParams]="renderParams"> </jsplumb-surface> <jsplumb-miniview></jsplumb-miniview> <jsplumb-controls></jsplumb-controls> </div> ` }) export class AppComponent { view = { nodes:{ default:NodeComponent } } renderParams = { ... } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking-changes">Breaking changes<a href="#breaking-changes" class="hash-link" aria-label="Direct link to Breaking changes" title="Direct link to Breaking changes"></a></h3><ul><li>The <code>@jsplumbtoolkit/browser-ui-angular</code> package now requires Angular 16 or later. If you are using a version of Angular older than 16, you will need to use our <code>@jsplumbtoolkit/browser-ui-angular-legacy</code> package.</li></ul>A few classes were renamed in the Angular integration (although note their selectors were unchanged):<ul><li><code>jsPlumbSurfaceComponent</code> is now <code>SurfaceComponent</code></li><li><code>jsPlumbMiniviewComponent</code> is now <code>MiniviewComponent</code></li><li><code>jsPlumbSurfaceDropComponent</code> is now <code>SurfaceDropComponent</code></li><li><code>jsPlumbDragDropComponent</code> is now <code>DragDropComponent</code></li><li>The original <code>BaseNodeComponent</code> is now <code>LegacyBaseNodeComponent</code></li><li>The original <code>BasePortComponent</code> is now <code>LegacyBasePortComponent</code></li></ul><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's comprehensive Angular integration here: <a href="https://angular.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://angular.jsplumbtoolkit.com/</a></li><li>Read about JsPlumb's legacy Angular integration here: <a href="https://docs.jsplumbtoolkit.com/toolkit/lib/angular-integration-legacy" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com/toolkit/lib/angular-integration-legacy</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="This release sees a few more updates to our React integration to make it easier than ever to use:"><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/08/23/release-6.50.0">Release 6.50.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-23T06:00:00.000Z" itemprop="datePublished">August 23, 2024</time> · 3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">This release sees a few more updates to our React integration to make it easier than ever to use:<ul><li>The <code>ShapeLibraryPaletteComponent</code> in the React integration no longer needs to be provided with a <code>shapeLibrary</code> as a prop - it retrieves the shape library from the Surface it is attached to.</li><li>A new <code>ShapeComponent</code> was added to the React integration. This component is functional and takes as a prop the <code>ctx</code> that the Surface passes to the mapping your view.</li><li>We've introduced a <code>JsxWrapperProps</code> interface to define the <code>ctx</code> member that the surface passes in to JSX mapped in your viewOptions.</li></ul>We've used these updates in our React Flowchart Builder starter app - they've really simplified the JSX in a couple of places. For example, our palette can now locate the shape library to use from the context given by the <code>SurfaceProvider</code>:<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><SurfaceProvider> <SurfaceComponent shapeLibrary={shapeLibrary} ....> ... </SurfaceComponent> <div className="jtk-demo-rhs"> <ShapeLibraryPaletteComponent className="node-palette" dataGenerator={dataGenerator} initialSet={FLOWCHART_SHAPES.id}/> <Inspector edgeMappings={edgeMappings()}/> </div> </SurfaceProvider> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>And when using a shape component to render some SVG we now only need to pass in the <code>ctx</code> :<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">export function NodeComponent({ctx}) { return <div className="flowchart-object" data-jtk-target="true"> <ShapeComponent ctx={ctx} showLabels={true} labelProperty="text"/> </div> } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><code>ShapeComponent</code> gets the surface it is attached to from the context, and then it gets the shape library to use from the surface.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="changelog">Changelog<a href="#changelog" class="hash-link" aria-label="Direct link to Changelog" title="Direct link to Changelog"></a></h3>The full changelog is:<h4 class="anchor anchorWithStickyNavbar_LWe7" id="updates">Updates<a href="#updates" class="hash-link" aria-label="Direct link to Updates" title="Direct link to Updates"></a></h4><ul><li>The algorithm used to select a Dynamic anchor was adjusted to not add the delta between some anchor and the element's center to its calculations.</li><li>A new <code>ShapeComponent</code> was added to the React integration. This component is functional and takes as a prop the <code>ctx</code> that the Surface passes to the mapping your view. </li><li>The <code>ShapeLibraryPaletteComponent</code> in the React integration no longer needs to be provided with a <code>shapeLibrary</code> as a prop - it retrieves the shape library from the Surface it is attached to.</li><li>We've introduced a <code>JsxWrapperProps</code> interface to define the <code>ctx</code> member that the surface passes in to JSX mapped in your viewOptions.</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="breaking">Breaking<a href="#breaking" class="hash-link" aria-label="Direct link to Breaking" title="Direct link to Breaking"></a></h4><ul><li>In the React integration, the original <code>ShapeComponent</code> has been renamed to <code>LegacyShapeComponent</code>.</li><li>In <code>jsplumbtoolkit.css</code>, the <code>.jtk-miniview</code> class is now specified <code>position:absolute</code> instead of <code>position:relative</code>. This better reflects how a miniview is typically used in the majority of UIs.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's comprehensive React integration here: <a href="https://react.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://react.jsplumbtoolkit.com/</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="Release 6.40.0 is a fairly big release, containing:"><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/08/16/release-6.40">Release 6.40.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-16T06:00:00.000Z" itemprop="datePublished">August 16, 2024</time> · 5 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">Release 6.40.0 is a fairly big release, containing:<ul><li><a href="#react-updates">A major update to our React integration</a>, with the introduction of contexts and providers, making it easier than ever before to rapidly build visual connectivity apps.</li><li>A vastly improved algorithm for repainting orthogonal connectors when the source or target node is dragged</li><li>Default node components in the Angular and React integration, allowing you to quickly prototype something without needing to focus on too many details upfront</li><li>Improvements to our documentation to make it easier to see how to achieve specific tasks with different integrations. This is an ongoing process but we've hit upon a basic structure now that we think works nicely.</li><li>A couple of bugfixes</li><li>An <a href="#hierarchy-layout">update to the Hierarchy layout</a> to support ports.</li></ul><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="react-updates">React Updates<a href="#react-updates" class="hash-link" aria-label="Direct link to React Updates" title="Direct link to React Updates"></a></h3>In 6.40.0 we have introduced <code>Contexts</code> and <code>Providers</code>, and we've rewritten our components so that they are all context aware. You no longer need to mount components inside a <code>useEffect</code> as they can find the surface they should attach to via a context:<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">import React from "react" import { MiniviewComponent, SurfaceComponent, ControlsComponent } from '@jsplumbtoolkit/browser-ui-react'; export default function DemoComponent({someProps}) { const data = { nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } return <div> <SurfaceComponent data={data}> <ControlsComponent/> <MiniviewComponent/> </SurfaceComponent> </div> } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>These changes also apply to our new <code>PaletteComponent</code>, which is a replacement for the previous <code>JsPlumbToolkitDragDropComponent</code>. Here we see how to use one inside a <code>SurfaceProvider</code>:<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"> import { PaletteComponent, SurfaceComponent, SurfaceProvder } from '@jsplumbtoolkit/browser-ui-react'; export default function MyApp() { const dataGenerator = function (el) { return { w:120, h:80, type:el.getAttribute("data-node-type") }; }; return <div className="row"> <SurfaceProvider> <div className="col-9"> <SurfaceComponent/> </div> <div className="col-3"> <PaletteComponent selector="li" dataGenerator={dataGenerator}> <ul> <li data-node-type="foo" jtk-is-group="true">FOO</li> <li data-node-type="bar">BAR</li> </ul> </PaletteComponent> </div> </SurfaceProvider> </div> } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We think these changes will make a big difference to how easy it is to build apps using JsPlumb React.The full list of updates to React is:<ul><li><code>SurfaceContext</code> added to project. This is a Context that provides a Surface for other components to access.</li><li><code>SurfaceProvider</code> added to project. This provides a SurfaceContext.</li><li><code>SurfaceComponent</code> added. This is a new version of <code>JsPlumbToolkitSurfaceComponent</code> which is context aware, and which itself can act as a surface provider for other components.</li><li><code>MiniviewComponent</code> and <code>ControlsComponent</code> have been updated to be functional components, and to be context aware. For the most part these components can now simply be declared in your JSX with no configuration or mounting necessary.</li><li><code>JsPlumbProvider</code> added to project. This provides an instance of <code>JsPlumbToolkit</code> to any descendant components. Although not such a common use case, this provider can be used to render one instance of the Toolkit in multiple surfaces.</li><li><code>PaletteComponent</code> added. This is a new, functional, version of the original <code>SurfaceDropComponent</code>. It is context aware and can discover a Surface provided either from a <code>SurfaceComponent</code> or a <code>SurfaceProvider</code>. </li><li><code>ShapeLibraryPaletteComponent</code> is now a functional component that is context aware and can function within any context that provides a surface.</li><li><code>InspectorComponent</code> added. This is a context aware React wrapper around JsPlumb's <code>Inspector</code>. </li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="orthogonal-connector-redraw">Orthogonal connector redraw<a href="#orthogonal-connector-redraw" class="hash-link" aria-label="Direct link to Orthogonal connector redraw" title="Direct link to Orthogonal connector redraw"></a></h3>We've made several improvements to the algorithm that repaints an orthogonal connector when its source or target is moved. These updates are particularly noticeable when the edge is using Continuous anchors. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="hierarchy-layout">Hierarchy layout<a href="#hierarchy-layout" class="hash-link" aria-label="Direct link to Hierarchy layout" title="Direct link to Hierarchy layout"></a></h3>The Hierarchy layout has been updated to support edges that are from ports on nodes/groups, not just edges from nodes/groups themselves.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="inspectors">Inspectors<a href="#inspectors" class="hash-link" aria-label="Direct link to Inspectors" title="Direct link to Inspectors"></a></h3><ul><li>Added optional <code>filter</code> to <code>Inspector</code>, allowing you to control which elements the inspector will edit</li><li>Fixed an issue in the <code>Inspector</code> where in some cases the "active" css class was being added to its container even though there was no object to edit.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="default-component-mappings-for-react-and-angular">Default component mappings for React and Angular<a href="#default-component-mappings-for-react-and-angular" class="hash-link" aria-label="Direct link to Default component mappings for React and Angular" title="Direct link to Default component mappings for React and Angular"></a></h3>The Angular and React integrations now use a default node/group mapping if you do not provide one in your view. This lets you prototype things more quickly without having to get bogged down in details. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking-changes">Breaking changes<a href="#breaking-changes" class="hash-link" aria-label="Direct link to Breaking changes" title="Direct link to Breaking changes"></a></h3><ul><li>The default layout for a Surface is now the <code>AbsoluteLayout</code>, where previously it was <code>EmptyLayout</code>.</li><li>The default endpoint is now <code>BlankEndpoint</code>, where previously it was <code>DotEndpoint</code>.</li><li>The default anchor is now <code>Continuous</code>, where previously it was <code>AnchorLocations.Bottom</code>.</li><li>When a user relocates the anchor point in an orthogonal connector with the mouse, the connector's geometry is now reset. We've never been too happy with the way the connector tries to reconstruct the user's intent and in 6.40.0 we decided that changing the anchor point was a decisive enough gesture that it signalled the user wanted to re-route the entire connector.</li></ul>In the React integration a few components have been renamed and several marked deprecated, due to the new components discussed below. Specifically, the changes are:<ul><li>The original <code>ShapeLibraryPaletteComponent</code> is now <code>JsPlumbToolkitShapeLibraryPaletteComponent</code></li><li>The original <code>ControlsComponent</code> is now <code>JsPlumbToolkitControlsComponent</code></li><li>The original <code>MiniviewComponent</code> is now <code>JsPlumbToolkitMiniviewComponent</code></li></ul>It may not be evident that these changes have occurred since for each of the classes renamed we have created new versions with the original names, as functional components that are able to operate inside the <code>SurfaceProvider</code> which was introduced in 6.40.0.Props and state for each of these components were also renamed - where you see something prefixed with <code>JsPlumbToolkit</code>, you know it's now legacy code and will be removed in a future release.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about JsPlumb's comprehensive React integration here: <a href="https://react.jsplumbtoolkit.com/" target="_blank" rel="noopener noreferrer">https://react.jsplumbtoolkit.com/</a></li><li>Check out the smooth connector redraw in our <a href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank" rel="noopener noreferrer">Flowchart starter app</a> </li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="Introduction"><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/07/18/wrapping-data-in-web-components">Wrapping JsPlumb in Web Components</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-07-18T00:00:00.000Z" itemprop="datePublished">July 18, 2024</time> · 11 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody"><h3 class="anchor anchorWithStickyNavbar_LWe7" id="introduction">Introduction<a href="#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction"></a></h3>Web Components have been around for quite some time now, but it's probably fair to say that they have not reached the widespread adoption that in the early days it seemed they might. I never really started using them for various reasons:<ul><li>Incomplete browser support JsPlumb needs to work on as many browsers as possible and does not have the luxury of requiring the latest browsers. It took quite some time for all of the major browsers to bring their web components support up to the spec.</li><li>Relatively poor documentation Nowadays there's a wealth of articles discussing web components, including a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components" target="_blank">great one on MDN</a>, but this was not the case at first. </li><li>Clunky developer interface This is of course a subjective viewpoint, but it's certainly not just me who thought so. One of the fundamental issues for me was trying to figure out how they could be composed as easily as something like React/Angular etc, particularly when the only input to a web component is through its attributes, and they have to be strings. </li></ul>Recently I've been looking at web components anew: with the upcoming 7.x release of JsPlumb we're keen to explore all opportunities to use up-to-date technologies, and we thought web components deserved a second look. There seems to be a groundswell of people adopting them, and so we're interested in exploring if there's any value for our licensees in us adding some kind of web components support. Specifically, we're wondering if we can support something like this:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><jsplumb-surface :view="view" :renderParams="renderParams" id="mySurface"> <jsplumb-controls></jsplumb-controls> <jsplumb-miniview></jsplumb-miniview> </jsplumb-surface> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Our use case is for some components that are lightweight wrappers around various parts of the JsPlumb UI, and which, once painted, won't need to be repainted. The internal contents of the components will be repainted, of course, but the web component itself is static.In the HTML above we see three attributes on the <code>jsplumb-surface</code> element:<ul><li>:view These are the <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/views" target="_blank" rel="noopener noreferrer">view parameters</a> - the mappings from object types to their visual representation and behaviour</li><li>:renderParams These are the <a href="https://apidocs.jsplumbtoolkit.com/6.x/current/browser-ui/interfaces/SurfaceRenderOptions.html" target="_blank" rel="noopener noreferrer">options for the Surface</a></li><li>id A unique ID for the the Surface</li></ul>The HTML above mimics what you might use with one of our library integrations. But in vanilla JsPlumb to create this UI you need to mount these things programmatically. First you need some HTML:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><div id="mySurface"> <div id="controls"></div> <div id="miniview"></div> </div> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Then you need some JS to mount everything:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const container = document.getElementById("container") const controlsContainer = document.getElementById("controls") const miniviewContainer = document.getElementById("miniview") const renderParams = { ... } const view = { ... } const surface = someToolkit.render(container, renderParams) const controls = new ControlsComponent(controlsContainer, surface) surface.addPlugin({ type:MiniviewPlugin.type, options:{ container:miniviewContainer } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="the-problem-attributes-are-strings">The problem: attributes are strings<a href="#the-problem-attributes-are-strings" class="hash-link" aria-label="Direct link to The problem: attributes are strings" title="Direct link to The problem: attributes are strings"></a></h3>It seems that the fundamental disconnect between the HTML I want to be able to use and reality is that in web components all attributes are strings. I can't just plug in some view options or render params to a component - unless I were to serialize them first, and then deserialize them inside the component, which is very unappealing. Imagine I wanted to write a web component that formats some <code>Date</code> that I pass in. I'd kind of like to do something like this:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("date-label", class extends HTMLElement { async connectedCallback() { const date = this.getAttribute("date") const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' }) const formattedDate = formatter.format(date) this.innerHTML = formattedDate } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>...except this will not work, because the <code>date</code> attribute is a string. Should I format the date before passing it into this component, then? What would be the point of the component if I did that? Contrast this with JSX - here I have some <code>DateLabel</code> component that takes a <code>Date</code> as argument<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">export function DateLabel({value}) { const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' }) const formattedDate = formatter.format(value) return <h1>{formattedDate}</h1> } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>I can use this component elsewhere and pass the date in:<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">export function MyApp() { const info = { label:"Foo Label", aNumber:25, date:new Date() } return <div> <DateLabel value={info.date}/> </div> } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>On the surface (excuse the pun) this seems to be a deal breaker. How can web components be of any use with this constraint? But then I realised the fundamental mistake I was making: I was expecting to be able to use web components without any kind of wrapper at all, but that's not how I write React apps, or Angular/Vue/Svelte etc - there is always some object providing a context to use as a base.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="its-about-context">It's about Context<a href="#its-about-context" class="hash-link" aria-label="Direct link to It's about Context" title="Direct link to It's about Context"></a></h3>So, then, in order to be able to pass objects around to my web components, I need a context, and I need an entry point. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="render-function">Render function<a href="#render-function" class="hash-link" aria-label="Direct link to Render function" title="Direct link to Render function"></a></h4>I'm going to define this <code>wcRender</code> function, which behaves like the <code>createRoot</code> method in React:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">export function wcRender(container, template, data) { container.dataset.wc = "true" container.__data = data || {} const document = new DOMParser().parseFromString(template, "text/html") while(document.body.hasChildNodes()) { container.appendChild(document.body.firstChild) } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We pass in to this method:<ul><li>container The DOM element we will render into</li><li>template A string containing the markup we want to render (which will have web component tags in it)</li><li>data Data to use when rendering. In this example, this will include some Date my tag can render</li></ul>This function does the following:<ul><li>Sets a <code>wc</code> property on the container's <code>dataset</code>. We do this to mark the element as a web component container, and when you set a property on a DOM element's <code>dataset</code>, a matching <code>data-***</code> attribute is set on the element - in this case, <code>data-wc="true"</code>. We'll revisit this in our <code>BaseComponent</code> below.</li><li>Writes the provided <code>data</code> (or an empty object if this is null) onto the container as the <code>__data</code> property. Our components will retrieve their data from here.</li><li>Parses the given template via a <code>DOMParser</code></li><li>Copies all of the parsed nodes in as children of the container</li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="date-label-component">Date label component<a href="#date-label-component" class="hash-link" aria-label="Direct link to Date label component" title="Direct link to Date label component"></a></h4>Our date label component will need to look for this context component and get its value from it. <div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("date-label", class extends BaseComponent { async connectedCallback() { const _context = this.closest("[data-wc]") const date = _context.__data["date"] const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' }) const formattedDate = formatter.format(date) this.innerHTML = formattedDate } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We've now got the bits we need to render our date label component and supply it with a Date. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="template">Template<a href="#template" class="hash-link" aria-label="Direct link to Template" title="Direct link to Template"></a></h4>We'll define a template to render:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><date-label></date-label> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="rendering">Rendering<a href="#rendering" class="hash-link" aria-label="Direct link to Rendering" title="Direct link to Rendering"></a></h4>And we'll render that template like this:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">wcRender(someContainer, template, {date:new Date()}) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="output">Output<a href="#output" class="hash-link" aria-label="Direct link to Output" title="Direct link to Output"></a></h4><div style="width:100%;height:50px;outline:1px solid;padding:0.5rem;margin-bottom:2rem"></div>Spectacular!<h3 class="anchor anchorWithStickyNavbar_LWe7" id="extracting-the-dryness">Extracting the dryness<a href="#extracting-the-dryness" class="hash-link" aria-label="Direct link to Extracting the dryness" title="Direct link to Extracting the dryness"></a></h3>As it stands the above setup has allowed me to render some arbitrary date in a tag, but what if I wanted to write another component that uses the context? I'd have to duplicate the code that locates the context and extracts a value from it:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("text-label", class extends BaseComponent { async connectedCallback() { const _context = this.closest("[data-wc]") this.innerHTML = _context.__data["text"] } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Also, our <code>date-label</code> has hardcoded <code>date</code> as the value it wants to extract from the context. Time for a little refactoring.<h4 class="anchor anchorWithStickyNavbar_LWe7" id="basecomponent">BaseComponent<a href="#basecomponent" class="hash-link" aria-label="Direct link to BaseComponent" title="Direct link to BaseComponent"></a></h4>This component will provide the common functionality that we'll need - discovery of, and access to, the context, as well as functionality to map attribute names to model values.<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">class BaseComponent extends HTMLElement { _boundAtts = {} constructor() { super() this._context = this.closest("[data-wc]") for(let i = 0; i < this.attributes.length; i++) { const att = this.attributes.item(i) if (att.name.startsWith(":")) { this._boundAtts[att.name.substring(1)] = att.value } } } getValue(modelKey) { const mappedKey = this._boundAtts[modelKey] || modelKey return this._context.__data[mappedKey] || this.getAttribute(modelKey) } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Let's look at what's going on here:<ul><li>We have a <code>_boundAtts</code> record, which we populate in the constructor, by iterating through the attributes defined on the element, looking for attributes that are prefixed with a <code>:</code>, such as <code>:text</code>, or <code>:date</code>, etc. </li><li>Our constructor locates the parent element that is acting as our context and stores it on the component.</li><li>We declare a <code>getValue(key)</code> method, which is responsible either for extracting values from the context or from the element's attributes. This method first checks to see if the requested key has been mapped to some model key, or whether to use it directly. We'll show an example of what this means below. </li></ul><h4 class="anchor anchorWithStickyNavbar_LWe7" id="a-better-date-label">A better date label<a href="#a-better-date-label" class="hash-link" aria-label="Direct link to A better date label" title="Direct link to A better date label"></a></h4>Now we can rewrite our original date label copmonent, to extend <code>BaseComponent</code> and not have to lookup the context ourselves.<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("date-label", class extends BaseComponent { async connectedCallback() { const date = this.getValue("value") const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' }) const formattedDate = formatter.format(date) this.innerHTML = formattedDate } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We also use the <code>getValue(..)</code> method declared by <code>BaseComponent</code> to extract values from the context. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="a-better-text-label">A better text label<a href="#a-better-text-label" class="hash-link" aria-label="Direct link to A better text label" title="Direct link to A better text label"></a></h4>We can now write our text label component, using BaseComponent:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("text-label", class extends BaseComponent { async connectedCallback() { this.innerHTML = this.getValue("label") } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="template-1">Template<a href="#template-1" class="hash-link" aria-label="Direct link to Template" title="Direct link to Template"></a></h4>We'll render these better components with this template:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><h6>Now</h6> <date-label :value="now"></better-date-tag> <h6>Tomorrow</h6> <date-label :value="tomorrow"></better-date-tag> <h6>Default label</h6> <text-label label="This is the default label"></better-label> <h6>Named label</h6> <text-label :label="namedLabel"></better-label> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Notice how each of our <code>date-label</code> elements has a <code>:value</code> attribute. The value of the attribute is the name of the data element to render - <code>now</code> for one, and <code>tomorrow</code> for the other.We also render two <code>text-label</code> elements. The first of these has a <code>label</code> attribute, but it is not prefixed with a <code>:</code>, meaning we've provided the value we want to use. The second <code>text-label</code> element declares <code>:label="namedLabel"</code>, meaning "extract the value corresponding to the model element <code>namedLabel</code>" <h4 class="anchor anchorWithStickyNavbar_LWe7" id="rendering-1">Rendering<a href="#rendering-1" class="hash-link" aria-label="Direct link to Rendering" title="Direct link to Rendering"></a></h4>This will be our render call now:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const now = new Date() const tomorrow = new Date(now.getTime() + (1000 * 60 * 60 * 24)) wcRender(someContainer, template, { now, tomorrow, namedLabel:"This is the value of the named label" }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="output-1">Output<a href="#output-1" class="hash-link" aria-label="Direct link to Output" title="Direct link to Output"></a></h4>Our output now looks like this:<div style="width:100%;height:400px;outline:1px solid;padding:0.5rem;margin-bottom:2rem"></div>We've extracted values from the model for the <code>date-label</code> components, used a hardcoded attribute for one <code>text-label</code>, and used a model value for the other <code>text-label</code>. Definitely making progress. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="surface-component">Surface component<a href="#surface-component" class="hash-link" aria-label="Direct link to Surface component" title="Direct link to Surface component"></a></h3>In about 30 lines of code our <code>wcRender</code> function and <code>BaseComponent</code> together provide a neat little solution to the problem of instantiating web components with data, and this is probably enough for us to use as a basis for what we wanted to investigate from a JsPlumb perspective: it is possible to provision the JsPlumb Toolkit as web components?Let's define a wrapper around our <code>Surface</code>:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("jsplumb-surface", class extends BaseComponent { async connectedCallback() { const view = this.getValue("view") const rp = this.getValue("renderParams") const id = this.getValue("id") const data = this.getValue("data") const tk = newInstance() this._surface = tk.render(this, Object.assign(rp, {view} )) tk.load({data}) } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>And then render it:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const tpl = `<jsplumb-surface :view="view" :renderParams="renderParams" id="mySurface" :data="data"></jsplumb-surface>` wcRender(someContainer, tpl, { view:{ nodes:{ default:{ template:`<div class="jtk-wc-demo-node">{{id}}</div>` } } }, renderParams:{ layout:{ type:"Absolute" }, defaults:{ endpoint:"Blank" } }, data:{ nodes:[ { id:"1", left:10, top:10 }, { id:"2", left:200, top:200 } ], edges:[ { source:"1", target:"2"} ] } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><div style="width:100%;height:400px;outline:1px solid;padding:0.5rem;margin-bottom:2rem"></div>Excellent! <h3 class="anchor anchorWithStickyNavbar_LWe7" id="controls-component">Controls component<a href="#controls-component" class="hash-link" aria-label="Direct link to Controls component" title="Direct link to Controls component"></a></h3>How about we add a controls component to this:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("jsplumb-controls", class extends BaseComponent { async connectedCallback() { const surface = this.closest("jsplumb-surface")._surface new ControlsComponent(this, surface) } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>And update our template to this:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><jsplumb-surface :view="view" :renderParams="renderParams" id="mySurface" :data="data"> <jsplumb-controls></jsplumb-controls> </jsplumb-surface> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><div style="width:100%;height:400px;outline:1px solid;padding:0.5rem;margin-bottom:2rem"></div>Almost to where I wanted to be - just need to do the miniview. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="miniview-component">Miniview component<a href="#miniview-component" class="hash-link" aria-label="Direct link to Miniview component" title="Direct link to Miniview component"></a></h3><div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">customElements.define("jsplumb-miniview", class extends BaseComponent { async connectedCallback() { const surface = this.closest("jsplumb-surface")._surface surface.addPlugin({ type:MiniviewPlugin.type, options:{ container:this } }) } }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Update our template:<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><jsplumb-surface :view="view" :renderParams="renderParams" id="mySurface" :data="data"> <jsplumb-controls></jsplumb-controls> <jsplumb-miniview></jsplumb-miniview> </jsplumb-surface> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><div style="width:100%;height:400px;outline:1px solid;padding:0.5rem;margin-bottom:2rem"></div>And that's it - a lightweight web components wrapper around JsPlumb. Success!<h3 class="anchor anchorWithStickyNavbar_LWe7" id="where-to-next">Where to next?<a href="#where-to-next" class="hash-link" aria-label="Direct link to Where to next?" title="Direct link to Where to next?"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="updating-components">Updating components<a href="#updating-components" class="hash-link" aria-label="Direct link to Updating components" title="Direct link to Updating components"></a></h4>We've achieved what we set out to here - we have web component wrappers around our JsPlumb components. But the developer in me looks at this code and wonders what it would take to use it to support some kind of scenario where the components could update their UI based on changes to the data model. We might make this the topic of a future blog post - reach out if you're interested in seeing that.<h4 class="anchor anchorWithStickyNavbar_LWe7" id="shipping-this">Shipping this<a href="#shipping-this" class="hash-link" aria-label="Direct link to Shipping this" title="Direct link to Shipping this"></a></h4>Are you a licensee or evaluator of JsPlumb and you'd like to see us ship this? Get in touch at the email shown below and let us know.<hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/typescript">typescript</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/java">java</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/class">class</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/interface">interface</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inheritance">inheritance</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/web-component">web component</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/custom-component">customComponent</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/react">react</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/angular">angular</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jointjs">jointjs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gojs">gojs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/reactflow">reactflow</a></li></ul></div></footer></article><article class="margin-bottom--xl" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="description" content="Many libraries offer the ability to drag elements around, but JsPlumb's drag handler is a little more advanced than most: there are a number of options you can set on JsPlumb to get very fine-grained control of how your users drag elements around. One of these - the constrainFunction - is the focus of our post today, and we'll show you how it can be used to make a simple tile game with the minimum of effort."><header><h2 class="title_f1Hy" itemprop="headline"><a itemprop="url" href="/blog/2024/07/03/building-a-tile-game-with-drag-constrain-functions">Building a tile game using JsPlumb's advanced drag handling</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-07-03T06:00:00.000Z" itemprop="datePublished">July 3, 2024</time> · 8 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--6 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt" itemprop="image"></a><div class="avatar__intro" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" itemprop="url">Simon Porritt</a></div>JsPlumb core team</div></div></div></div></header><div class="markdown" itemprop="articleBody">Many libraries offer the ability to drag elements around, but JsPlumb's drag handler is a little more advanced than most: there are a number of options you can set on JsPlumb to get very fine-grained control of how your users drag elements around. One of these - the <code>constrainFunction</code> - is the focus of our post today, and we'll show you how it can be used to make a simple tile game with the minimum of effort.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="constrain-functions">Constrain functions<a href="#constrain-functions" class="hash-link" aria-label="Direct link to Constrain functions" title="Direct link to Constrain functions"></a></h3>In this first canvas, you can drag around each of the nodes as you please: <div class="tdemo tile-game-demo"></div>This is the default setup for JsPlumb. But let's say in this case want to impose the following constraints:<ul><li>Blue nodes can only be dragged horizontally</li><li>Red nodes can only be dragged vertically</li></ul>How can we do that? That's right! With a <code>constrainFunction</code>. We pass this to the <code>dragOptions</code> for our Surface:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">dragOptions:{ constrainFunction:(desiredLoc, el, parentBounds, size, currentLoc) => { const modelObject = el.jtk.node return { x:modelObject.type === "blue" ? desiredLoc.x : currentLoc.x, y:modelObject.type === "blue" ? currentLoc.y : desiredLoc.y } } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Try dragging the elements here - you'll see they conform to the rules given above:<div class="tdemo tile-game-demo"></div>Our <code>constrainFunction</code> is given 5 pieces of information:<ul><li>desiredLoc This is an object containing <code>x</code> and <code>y</code> values for where, in canvas coordinates, JsPlumb would like to drag the element to.</li><li>el This is the DOM element that is being dragged. We can retrieve the associated model object via <code>el.jtk.node</code>.</li><li>parentBounds This provides the size of the viewport; in some constrain scenarios this information is useful.</li><li>size The size of the element being dragged.</li><li>currentLoc An object containing <code>x</code> and <code>y</code> values for the element's current position.</li></ul>In our implementation, we test the <code>type</code> of the element. For <code>blue</code> elements we allow the desired X location but keep the current Y; for <code>red</code> elements we keep the current X but allow the desired Y:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const modelObject = el.jtk.node return { x:modelObject.type === "blue" ? desiredLoc.x : currentLoc.x, y:modelObject.type === "blue" ? currentLoc.y : desiredLoc.y } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="mixer-console">Mixer Console<a href="#mixer-console" class="hash-link" aria-label="Direct link to Mixer Console" title="Direct link to Mixer Console"></a></h3>One real world application that occurred to me as I was writing this is for the faders in a mixer:<div class="tile-game-demo tile-game-mixer-demo"></div>For this one we have a little helper function that computes the bounds based on the type of fader:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const travel = { crossfade:(desired, current) => { return { x:Math.min(190, Math.max(50, desired.x)), y:current.y } }, channel:(desired, current) => { return { x:current.x, y:Math.min(240, Math.max(80, desired.y)) } } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>and the <code>constrainFunction</code> is:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">constrainFunction:(desiredLoc, el, parent, size, currentLoc) => { const modelObject = el.jtk.node return travel[modelObject.data.type](desiredLoc, currentLoc) } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="traversing-a-path">Traversing a path<a href="#traversing-a-path" class="hash-link" aria-label="Direct link to Traversing a path" title="Direct link to Traversing a path"></a></h3>Another very useful application for the ability to constrain dragging is traversing a path. In the canvas below you can drag the red marker horizontally and the vertical position will be calculated from the equation that defines the path (in this case, <code>y=x^2</code>):<div class="tile-game-demo tile-game-curve-demo"><button class="tile-game-curve-reset btn btn-secondary">reset</button><div class="tile-game-curve-coords"><div>0</div><div>0</div></div></div>In this example, our <code>constrainFunction</code> uses the function that defines the path to determine the Y value that corresponds to the current value of X:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">constrainFunction:(desiredLoc, el, parent, size, currentLoc) => { // pixels values const start = 0, end = 300 // values in the coord system we're using const min = -5, max = 5, xRange = max - min // map the canvas pixel location to our chart's coordinate system const mappedX = min + ((desiredLoc.x - start) / end * xRange) // compute the Y value in our chart's coordinate system. Note: we negate the value here, because in a browser, Y increases as you go down the screen. const mappedY = -fn(mappedX) // map the Y value back to canvas pixel coordinates const y = (start + (end * (mappedY - min) / xRange)) return { x:desiredLoc.x, y } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>This approach works for any curve - here's <code>y=x^3</code>:<div class="tile-game-demo tile-game-curve-demo"><button class="tile-game-curve-reset btn btn-secondary">reset</button><div class="tile-game-curve-coords"><div>0</div><div>0</div></div></div>How about <code>y=sin(x)</code> ?<div class="tile-game-demo tile-game-curve-demo"><button class="tile-game-curve-reset btn btn-secondary">reset</button><div class="tile-game-curve-coords"><div>0</div><div>0</div></div></div>I like the look of these; I could go on for ages. But I promised a tile game, so let's talk about that.<h3 class="anchor anchorWithStickyNavbar_LWe7" id="tiled-image-game">Tiled image game<a href="#tiled-image-game" class="hash-link" aria-label="Direct link to Tiled image game" title="Direct link to Tiled image game"></a></h3>It's likely you've seen one of these before - an image cut up into tiles and rearranged, with one blank space. Your task is to move the tiles around and reconstruct the original image.So, here's an image of a cow. You may recall this cow from some of our other posts. We've loaded up this cow and, using <a href="/blog/2023/11/19/image-processing-with-canvas">the canvas processing library we wrote for our ImageProcessor demo</a>, we've cut it up into a 5x5 grid and drawn it out. You can drag the individual tiles around - go ahead and try:<div class="tile-game-demo tile-game-game-demo"></div>This is the first step - an image broken up into a grid, and dragging is constrained to the grid. We loaded up the image and then determined how big our tiles should be based on our required grid:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"> const tileCount = 3 const image = new Image() image.onload = () => { const minAxis = Math.min(image.width, image.height), tileSize = Math.floor(minAxis / tileCount) } image.src = "/path/to/cow.jpg" </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We now split the image into a set of tiles, and each one of those tiles will be a node in our JsPlumb instance:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">const promises = [] for (let x = 0; x < tileCount; x++) { for (let y = 0; y < tileCount; y++) { promises.push(cropImage(image, tileSize * x, tileSize * y, tileSize, tileSize)) } } Promise.all(promises).then(values => { const dataUrls = values.map(imageToDataURL), nodes = [] for (let x = 0; x < tileCount; x++) { for (let y = 0; y < tileCount; y++) { const url = dataUrls[(x * tileCount) + y] nodes.push({ id: `${x}_${y}`, url, width: tileSize, height: tileSize, left:x * tileSize, top:y * tileSize }) } } toolkit.load({ data:{ nodes } }) }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>That second section of code also runs inside the <code>onload</code> for the image. At that point we have the result shown above - an image, split into tiles, and rendered as individual nodes.The next steps are:<ul><li>Pick a random tile to leave blank</li><li>Randomly arrange the tiles</li></ul>We're going to introduce two variables - <code>emptyTileX</code> and <code>emptyTileY</code> - to track the grid location of the empty tile.<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">// a random sort of the nodes. nodes.sort((a, b) => Math.random() > 0.5 ? -1 : 1) // random grid position for the x/y of the empty tile let emptyTileX = Math.floor(Math.random() * tileCount) let emptyTileY = Math.floor(Math.random() * tileCount) // nodes are stored in a linear array; this gives us the array index // for the empty tile let tileToOmitIndex = (emptyTileX * tileCount) + emptyTileY </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>Lastly, we now need to update the nodes array to set new positions after they've been randomly ordered, and we also set <code>blank</code> value on our blank node:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">for (let x = 0; x < tileCount; x++) { for (let y = 0; y < tileCount; y++) { const idx = (x * tileCount) + y nodes[idx].left = x * tileSize nodes[idx].top = y * tileSize nodes[idx].blank = idx === tileToOmitIndex } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>This gives us:<div class="tile-game-demo tile-game-game-demo"></div>Almost there. But we still need to constrain dragging. Our <code>constrainFunction</code> looks like this:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">constrainFunction: (desiredLoc, el, parent, size, currentLoc) => { // get the grid position for the target location and for the current location const targetGridX = desiredLoc.x / tileSize const targetGridY = desiredLoc.y / tileSize const currentGridX = currentLoc.x / tileSize const currentGridY = currentLoc.y / tileSize // only tiles rthat are adjacent in one direction are candidates for being // dragged into the empty slot const dx = Math.abs(targetGridX - currentGridX) const dy = Math.abs(targetGridY - currentGridY) const isAdjacent = dx === 1 && dy !== 1 || dx !== 1 && dy === 1 if (!isAdjacent) { return currentLoc } // finally, if the target is the empty slot, allow the tile to be dragged there. if (targetGridX === emptyTileX && targetGridY === emptyTileY ) { return desiredLoc } else { return currentLoc } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>We also want to ensure we keep track of the empty slot, so we have this event listener:<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv">events:{ [EVENT_NODE_MOVE_END]:(p) => { if (p.pos.y / tileSize === emptyTileY && p.pos.x / tileSize === emptyTileX) { emptyTileY = p.originalPosition.y / tileSize emptyTileX = p.originalPosition.x / tileSize } } } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>And here's the final result:<div class="tile-game-demo tile-game-game-demo"></div>Too easy? How about this then:<div class="tile-game-demo tile-game-game-demo"></div><hr><h3 class="anchor anchorWithStickyNavbar_LWe7" id="further-reading">Further reading<a href="#further-reading" class="hash-link" aria-label="Direct link to Further reading" title="Direct link to Further reading"></a></h3><ul><li>Read about dragging elements with JsPlumb here: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-dragging" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-dragging</a></li><li>Checkout our Image Processing example: <a href="https://jsplumbtoolkit.com/blog/2023/11/19/image-processing-with-canvas" target="_blank" rel="noopener noreferrer">https://jsplumbtoolkit.com/blog/2023/11/19/image-processing-with-canvas</a></li></ul><hr><h2 class="blog-trial-embed">Start a free trial</h2>Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!<a href="/trial"><button class="btn btn-primary">Start a free trial</button></a><hr><h2 class="anchor anchorWithStickyNavbar_LWe7" id="get-in-touch">Get in touch!<a href="#get-in-touch" class="hash-link" aria-label="Direct link to Get in touch!" title="Direct link to Get in touch!"></a></h2>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 <a href="mailto:hello@jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">hello@jsplumbtoolkit.com</a>.</div><footer class="row docusaurus-mt-lg"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jointjs">jointjs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/reactflow">reactflow</a></li></ul></div></footer></article><nav class="pagination-nav" aria-label="Blog list page navigation"><a class="pagination-nav__link pagination-nav__link--next" href="/blog/page/2"><div class="pagination-nav__label">Older Entries</div></a></nav></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">DISCOVER</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/demonstrations">Demonstrations</a></li><li class="footer__item"><a class="footer__link-item" href="/contact">Contact Us</a></li><li class="footer__item"><a class="footer__link-item" href="/faq">FAQ</a></li><li class="footer__item"><a href="/JSPLUMB-TOOLKIT-LICENSE-10-NOV-2023.pdf" target="_blank">License Agreement</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/privacy">Privacy Policy</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/talking-tech">Talking Tech</a></li></ul></div><div class="col footer__col"><div class="footer__title">DEVELOP</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Documentation</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Licensee Portal</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/npm-repository" target="_blank" rel="noopener noreferrer" class="footer__link-item">NPM Repository</a></li><li class="footer__item"><a class="footer__link-item" href="/trial">Try jsPlumb Toolkit for free</a></li></ul></div><div class="col footer__col"><div class="footer__title">LINKS</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">News</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/purchase/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Pricing</a></li><li class="footer__item"> <div class="d-flex align-items-center mt-5"> <a href="https://github.com/jsplumb"><img class="me-2" src="/img/social-logos/github.svg" alt="github logo"></a> <a href="https://www.facebook.com/jsPlumbToolkit"><img class="mx-2" src="/img/social-logos/facebook.svg" alt="facebook logo"></a> <a href="https://www.linkedin.com/company/jsplumb/"><img class="mx-2" src="/img/social-logos/linkedin.svg" alt="linked in logo"></a> <a href="https://twitter.com/jsplumbtoolkit"><img class="mx-2" src="/img/social-logos/twitter.svg" alt="twitter logo"></a> </div></li></ul></div><div class="col footer__col"><div class="footer__title">INTEGRATIONS</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://angular.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Angular</a></li><li class="footer__item"><a href="https://react.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Vue 2</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Vue 3</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Svelte</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://jsplumbtoolkit.com" rel="noopener noreferrer" class="footerLogoLink_BH7S"><img src="/img/logo-white.svg" alt="jsPlumb Toolkit" class="themedImage_ToTc themedImage--light_HNdA footer__logo" width="160" height="51"><img src="/img/logo-white.svg" alt="jsPlumb Toolkit" class="themedImage_ToTc themedImage--dark_i4oU footer__logo" width="160" height="51"></a></div><div class="footer__copyright">Copyright © 2024 JSPLUMB PTY LTD.</div></div></div></footer></div> <script src="/assets/js/runtime~main.d7194b24.js"></script> <script src="/assets/js/main.58243ff6.js"></script> </body> </html>