CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-lib/angular-integration" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.5.2"> <title data-rh="true">JsPlumb Angular | JsPlumb Toolkit Documentation</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://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="JsPlumb Angular | JsPlumb Toolkit Documentation"><meta data-rh="true" name="description" content="JsPlumb has a service and several components/directives to assist you in integrating with Angular 16+. If you're running an earlier Angular version than 16, you'll need to use our legacy Angular integration."><meta data-rh="true" property="og:description" content="JsPlumb has a service and several components/directives to assist you in integrating with Angular 16+. If you're running an earlier Angular version than 16, you'll need to use our legacy Angular integration."><meta data-rh="true" name="keywords" content="integration,ui,angular,angular 17,angular 18,jointjs,gojs,angular 16,angular 15,angular 14,angular 14,angular 13,angular 12,angular 11,angular 10,angular 9,angular 8,angular 7,angular 6,angular 4,angular 5,angular 2,directive,component,cli,reactflow,gojs,jointjs"><link data-rh="true" rel="icon" href="/toolkit/6.x/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration"><link data-rh="true" rel="alternate" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration" hreflang="x-default"><link rel="preconnect" href="https://www.googletagmanager.com"> <script>window.dataLayer=window.dataLayer||[]</script> <script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-MNVLP9MN",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script> <script>var sc_project="12608961",sc_invisible=1,sc_security="a2785267"</script> <script src="https://www.statcounter.com/counter/counter.js"></script><link rel="stylesheet" href="/toolkit/6.x/assets/css/styles.c0d1bf89.css"> <script src="/toolkit/6.x/assets/js/runtime~main.5942c22f.js" defer="defer"></script> <script src="/toolkit/6.x/assets/js/main.90d67330.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MNVLP9MN" 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(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</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="/toolkit/6.x/"><div class="navbar__logo"><img src="/toolkit/6.x/img/toolkit-logo.svg" alt="JsPlumb Toolkit Documentation" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/toolkit/6.x/img/toolkit-logo.svg" alt="JsPlumb Toolkit Documentation" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a><a href="https://apidocs.jsplumbtoolkit.com/6.x/current" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Apidocs<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a aria-current="page" class="navbar__item navbar__link vanilla-link header-lib-link navbar__link--active" href="/toolkit/6.x/">Vanilla JS</a><a aria-current="page" class="navbar__item navbar__link react-link header-lib-link navbar__link--active" href="/toolkit/6.x/lib/react-integration">React</a><a aria-current="page" class="navbar__item navbar__link angular-link header-lib-link navbar__link--active" href="/toolkit/6.x/lib/angular-integration">Angular</a><a aria-current="page" class="navbar__item navbar__link vue-link header-lib-link navbar__link--active" href="/toolkit/6.x/lib/vue3-integration">Vue</a><a aria-current="page" class="navbar__item navbar__link svelte-link header-lib-link navbar__link--active" href="/toolkit/6.x/lib/svelte-integration">Svelte</a></div><div class="navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/installation">Getting Started</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/ui-overview">UI Overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/toolkit/6.x/lib/nodes-and-groups">Nodes and Groups</a><button aria-label="Expand sidebar category 'Nodes and Groups'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/toolkit/6.x/lib/edges">Edges</a><button aria-label="Expand sidebar category 'Edges'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/toolkit/6.x/lib/layouts">Layouts</a><button aria-label="Expand sidebar category 'Layouts'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/toolkit/6.x/lib/plugins-overview">Plugins</a><button aria-label="Expand sidebar category 'Plugins'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/navigating-the-canvas">Navigating the canvas</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/grids">Grids</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/model/data-model">Data Model</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/loading-and-saving-data">Loading and saving data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/model/managing-data">Adding, removing and updating data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/svg-png-jpg-export">SVG, PNG and JPG export</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/css">CSS</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/events">Events</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/anchors">UI Reference</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/inspectors">Helper Components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/search">Advanced Features</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/toolkit/6.x/lib/react-integration">Integrations</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/toolkit/6.x/lib/react-integration">React</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/toolkit/6.x/lib/angular-integration">Angular</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/toolkit/6.x/lib/vue3-integration">Vue 3</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/toolkit/6.x/lib/svelte-integration">Svelte</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/toolkit/6.x/lib/vue2-integration">Vue 2 (Legacy)</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/toolkit/6.x/lib/starter-apps/overview">Apps and demos</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/angular-integration-legacy">Deprecated integrations</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/toolkit/6.x/lib/migration_overview">Site</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/toolkit/6.x/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item">Integrations<meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">Angular<meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>JsPlumb Angular</h1></header> JsPlumb has a service and several components/directives to assist you in integrating with Angular 16+. If you're running an earlier Angular version than 16, you'll need to use our <a href="/toolkit/6.x/lib/angular-integration-legacy">legacy Angular integration</a>. <h2 class="anchor anchorWithStickyNavbar_LWe7" id="imports">Imports<a href="#imports" class="hash-link" aria-label="Direct link to Imports" title="Direct link to Imports"></a></h2> <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">"dependencies":{ "@jsplumbtoolkit/browser-ui-angular":"6.81.0" } </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> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="setup">Setup<a href="#setup" class="hash-link" aria-label="Direct link to Setup" title="Direct link to Setup"></a></h2> You need to import the <code>jsPlumbToolkitModule</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import { jsPlumbToolkitModule } from '@jsplumbtoolkit/browser-ui-angular'; ... @NgModule({ imports: [ BrowserModule, jsPlumbToolkitModule], declarations: [ SomeComponent ], bootstrap: [ SomeComponent ], schemas:[ CUSTOM_ELEMENTS_SCHEMA ] }) </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 class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>note</div><div class="admonitionContent_BuS1">Be sure to import the <code>CUSTOM_ELEMENTS_SCHEMA</code> schema. Without this import you will not be able to map components to node/group types.</div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="quick-start">Quick start<a href="#quick-start" class="hash-link" aria-label="Direct link to Quick start" title="Direct link to Quick start"></a></h2> Here's a basic setup that uses the <code>jsplumb-surface</code> component to render a couple of nodes and an edge: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import {Component} from "@angular/core" @Component({ template:`<div style={{width:"100%",height:"100%"}}> <jsplumb-surface [data]="data"></jsplumb-surface> <jsplumb-controls></jsplumb-controls> <jsplumb-miniview></jsplumb-miniview> </div>` }) export class DemoComponent { data = { nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], 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 class="tdemo"><div><div style="position:absolute;left:0.5rem;top:0.5rem"><div class="jtk-controls" data-jtk-orientation="row"><svg viewBox="0 0 32 30" stroke="currentColor" fill="currentColor"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></div></div><div style="position:absolute;right:0.5rem;top:0.5rem"><div></div></div></div></div> In the above example the only attributes we set on the <code>jsplumb-surface</code> was <code>data</code>, meaning the component uses a default <code>Absolute</code> layout and a default Angular component for rendering nodes. The <code>jsplumb-surface</code>, though, is highly configurable, mainly through its <code>view</code> and <code>renderParams</code> inputs. Here's the same example from before but with a few more things configured, and an Angular component to render nodes with: <h6 class="anchor anchorWithStickyNavbar_LWe7" id="nodecomponent">NodeComponent<a href="#nodecomponent" class="hash-link" aria-label="Direct link to NodeComponent" title="Direct link to NodeComponent"></a></h6> <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import {Component} from "@angular/core" import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-angular'; @Component({ template:`<div style={{width:"60px", height:"60px", backgroundColor:"white", border:"1px solid black", text-align:"center"}}> <h3>{{obj.label}}</h3> </div>` }) export class NodeComponent extends BaseNodeComponent { } </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> <h6 class="anchor anchorWithStickyNavbar_LWe7" id="democomponent">DemoComponent<a href="#democomponent" class="hash-link" aria-label="Direct link to DemoComponent" title="Direct link to DemoComponent"></a></h6> <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import {Component} from "@angular/core" import { NodeComponent } from './node.component'; @Component({ template:`<div style={{width:"100%",height:"100%"}}> <jsplumb-surface [data]="data" [renderParams]="renderParams" [view]="view"></jsplumb-surface> <jsplumb-controls></jsplumb-controls> <jsplumb-miniview></jsplumb-miniview> </div>` }) export class DemoComponent { view = { nodes:{ default:{ component:NodeComponent } } } data = { nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } renderOptions = { layout:{ type:"ForceDirected" }, grid:{ size:{ w:50, h:50 } } } } </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 class="tdemo"><div><div style="position:absolute;left:0.5rem;top:0.5rem"><div class="jtk-controls" data-jtk-orientation="row"><svg viewBox="0 0 32 30" stroke="currentColor" fill="currentColor"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></div></div><div style="position:absolute;right:0.5rem;top:0.5rem"><div></div></div></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="rendering-nodes-and-groups">Rendering Nodes and Groups<a href="#rendering-nodes-and-groups" class="hash-link" aria-label="Direct link to Rendering Nodes and Groups" title="Direct link to Rendering Nodes and Groups"></a></h2> At the core of your UI will be a <code>jsplumb-surface</code>, which provides the canvas onto which nodes, groups and edges are drawn. In the <a href="#quick-start">Quickstart</a> section above we show a couple of examples of the <code>jsplumb-surface</code> in action. Each node or group in your UI is rendered as an individual Angular component. In the first example above, we rely on JsPlumb's default Angular component to render each node, but in the second we provide a component ourselves, although its quite simple. In a real world app your component will likely be more complex, and can take full advantage of all the power that Angular offers. As an example, consider the component we use to render nodes in <a href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">the Flowchart Builder</a>: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from "@angular/core" import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" import { anchorPositions } from "./app.component" @Component({ template:`<div style="color:{{obj.textColor}}" class="flowchart-object" data-jtk-target="true"> <jtk-shape [obj]="obj" showLabels="true" labelProperty="text" [width]="obj.width" [height]="obj.height"></jtk-shape> <div *ngFor="let anchor of anchorPositions" class="jtk-connect jtk-connect-{{anchor.id}}" [attr.data-jtk-anchor-x]="anchor.x" [attr.data-jtk-anchor-y]="anchor.y" [attr.data-jtk-orientation-x]="anchor.ox" [attr.data-jtk-orientation-y]="anchor.oy" data-jtk-source="true"></div> <div class="node-delete node-action delete" (click)="this.removeNode()"></div> </div>` }) export class NodeComponent extends BaseNodeComponent { anchorPositions = anchorPositions } </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> The components you use to render nodes with JsPlumb Angular are entirely at your discretion, and can be as simple or as powerful as you like. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="mapping-types-to-components">Mapping types to components<a href="#mapping-types-to-components" class="hash-link" aria-label="Direct link to Mapping types to components" title="Direct link to Mapping types to components"></a></h3> The <code>view</code> input is used to map node/group types to components, and to certain behaviours. For instance, this is the <code>nodes</code> section of the <code>view</code> for the flowchart builder starter app: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">view = { nodes: { [DEFAULT]:{ component:NodeComponent, // target connections to this node can exist at any of the given anchorPositions anchorPositions, // node can support any number of connections. maxConnections: -1, events: { [EVENT_TAP]: (params) => { this.edgeEditor.stopEditing() // if zero nodes currently selected, or the shift key wasnt pressed, make this node the only one in the selection. if (this.toolkit.getSelection()._nodes.length < 1 || params.e.shiftKey !== true) { this.toolkit.setSelection(params.obj) } else { // if multiple nodes already selected, or shift was pressed, add this node to the current selection. this.toolkit.addToSelection(params.obj) } } } } } } </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> To map a node/group type to a component, you supply a reference to the component's class as the <code>component</code> in a mapping, as shown above. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="using-input-in-a-nodegroup-component">Using @Input in a node/group component<a href="#using-input-in-a-nodegroup-component" class="hash-link" aria-label="Direct link to Using @Input in a node/group component" title="Direct link to Using @Input in a node/group component"></a></h3> There are two approaches to injecting values into a node/group component. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="injecting-values-from-the-backing-data">Injecting values from the backing data<a href="#injecting-values-from-the-backing-data" class="hash-link" aria-label="Direct link to Injecting values from the backing data" title="Direct link to Injecting values from the backing data"></a></h4> Imagine the component shown above was being used to render some node type in your UI - with a couple of small changes we can make it so: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" import {EventEmitter, Component, Input, Output} from "@angular/core" @Component({ template:` <div> <h1>{{title}}</h1> <button class="btnEmit" (click)="emitEvent('test')">Click Me</button> </div> ` }) export class NodeComponent extends BaseNodeComponent { @Input() title:string @Output() outputEvent = new EventEmitter<string>() emitEvent(value:string) { this.outputEvent.emit(value) } } </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 removed <code>selector</code> from the <code>Component</code> spec, since it's not relevant when rendering via the Surface, and we've wired up the component to extend <code>BaseNodeComponent</code>, but other than that the component is the same as in the first example. JsPlumb will attempt to set this input from the backing data for the node. So if, for instance, you had this data object for a node: <div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">{ "id": "1", "title": "My First Node" } </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 JsPlumb will set "My First Node" on the <code>title</code> input. This is of course really just a form of syntactic sugar - you could just easily render the title in your template like this (remembering that <code>obj</code> is set on the component by the Toolkit when it creates it): <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><h1>{{obj.title}}</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> as you can by using the input on the class: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><h1>{{title}}</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> but if you're like me, you might find that the approach using <code>@Input</code> feels a little more nicely formalised. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="injecting-values-from-the-view">Injecting values from the view<a href="#injecting-values-from-the-view" class="hash-link" aria-label="Direct link to Injecting values from the view" title="Direct link to Injecting values from the view"></a></h4> An alternative approach to injecting values from a node or group's backing data is to provide a string or a function inside of the view from which JsPlumb will get the value to use. Consider again the component from above: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" import {EventEmitter, Component, Input, Output} from "@angular/core" @Component({ template:` <div> <h1>{{title}}</h1> <button class="btnEmit" (click)="emitEvent('test')">Click Me</button> </div> ` }) export class NodeComponent extends BaseNodeComponent { @Input() title:string @Output() outputEvent = new EventEmitter<string>() emitEvent(value:string) { this.outputEvent.emit(value) } } </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 can map this component in our view and provide a function to populate <code>title</code> at render time: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">view:{ nodes:{ default:{ component:NodeComponent, inputs:{ title:(n:Node) => 'here you can return any string you like' } } } } </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="using-output-in-a-nodegroup-component">Using @Output in a node/group component<a href="#using-output-in-a-nodegroup-component" class="hash-link" aria-label="Direct link to Using @Output in a node/group component" title="Direct link to Using @Output in a node/group component"></a></h3> You can also now wire up listeners to <code>@Output</code>s in your components. The process to do this involves providing a <code>vertexEvent</code> callback to the Surface component. For example, imagine you embed a surface component in one of your components: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div class="my-component"> <h3>Here is my component</h3> <jsplumb-surface [view]="view" [renderParams]="renderParams" (vertexEvent)="vertexEvent($event)"> </jsplumb-surface> </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> Remember from above the <code>@Output() outputEvent...</code> declaration on the node component? Whenever that output emits something, the Surface will invoke <code>vertexEvent</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import { Vertex } from "@jsplumbtoolkit/browser-ui" import { ComponentRef } from "@angular/core" vertexEvent(detail:{ vertex:Vertex, event:Event, payload:any, component:ComponentRef<any>}) { } </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> The callback is given JsPlumb's <code>vertex</code>, the original event, the payload (ie. whatever was emitted from the output), and the Angular <code>ComponentRef</code>. You can access the specific Angular component via the <code>instance</code> field on this component ref. <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="rendering-ports">Rendering Ports<a href="#rendering-ports" class="hash-link" aria-label="Direct link to Rendering Ports" title="Direct link to Rendering Ports"></a></h2> Some applications whose data model use ports have a UI in which each Port is assigned its own DOM element. In the Flowchart Builder application we use ports in the data model (a question node, for instance, has a Yes and a No output port), but we do not assign a DOM element to each port. In the <a href="https://github.com/jsplumb/jsplumbtoolkit-applications/tree/main/apps/schema-builder" target="_blank">Schema Builder</a>, though, we do: we model a database table as a node, and the columns on that table as ports, and each port is assigned its own DOM element: <img decoding="async" loading="lazy" alt="Database Visualizer Table Node" src="/toolkit/6.x/assets/images/database-table-node-242525ff283686049abe99ec38f4b83b.png" width="980" height="584" class="img_ev3q"> Here we see three columns, each of which has a button by which it can be deleted, and a button that launches a column name editor. These two bits of behaviour are handled by the component backing the port. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="definition">Definition<a href="#definition" class="hash-link" aria-label="Direct link to Definition" title="Direct link to Definition"></a></h4> This is the definition of the component used to render columns on table nodes: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import { BasePortComponent } from "@jsplumbtoolkit/browser-ui-angular"; @Component({ selector:"db-column", templateUrl:"templates/column.html" }) export class ColumnComponent extends BasePortComponent { constructor(el: ElementRef) { super(el); } remove() { ... } editName() { ... } } </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> There are three requirements for a component to be used to render a port: <ul> <li>you must extend <code>BasePortComponent</code></li> <li>your constructor must accept an <code>ElementRef</code> and call the superclass constructor with it</li> <li>you must declare a selector for the component</li> </ul> <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> The component definition maps a <code>templateUrl</code>. This is what the template looks like in this example: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div class="table-column table-column-type-{{obj.datatype}}" attr.primary-key="{{obj.primaryKey}}" attr.data-jtk-port="{{obj.id}}" data-jtk-source="true" attr.data-jtk-scope="{{obj.datatype}}" data-jtk-target="true"> <div class="table-column-delete" (click)="remove()"> <i class="fa fa-times table-column-delete-icon"></i> </div> <div><span>{{obj.name}}</span></div> <div class="table-column-edit" (click)="editName()"> <i class="fa fa-pencil table-column-edit-icon"></i> </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> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="mapping-to-a-type">Mapping to a type<a href="#mapping-to-a-type" class="hash-link" aria-label="Direct link to Mapping to a type" title="Direct link to Mapping to a type"></a></h4> You map components to port types in the <code>view</code>. Here's the <code>ports</code> section from the view in the Angular Database Visualizer application: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">ports: { "default": { component: ColumnComponent, paintStyle: { fill: "#f76258" }, // the endpoint's appearance hoverPaintStyle: { fill: "#434343" }, // appearance when mouse hovering on endpoint or connection edgeType: "common", // the type of edge for connections from this port type maxConnections: -1, // no limit on connections dropOptions: { //drop options for the port. here we attach a css class. hoverClass: "drop-hover" }, events: { "dblclick": (p:any) => { console.log(p); } } } } </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="declaration">Declaration<a href="#declaration" class="hash-link" aria-label="Direct link to Declaration" title="Direct link to Declaration"></a></h4> You must declare each port component in the <code>declarations</code> member of your module definition. Here's the module definition for the Database Visualizer demonstration, for example: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import { DatabaseVisualizerComponent, TableNodeComponent, ViewNodeComponent, ColumnComponent } from './database-visualizer'; ... @NgModule({ imports:[ BrowserModule, jsPlumbToolkitModule, ROUTING], declarations: [ AppComponent, TableNodeComponent, ViewNodeComponent, ColumnComponent, DatasetComponent, DatabaseVisualizerComponent ], bootstrap: [ AppComponent ] schemas:[ CUSTOM_ELEMENTS_SCHEMA ] }) ... </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> Here we see <code>ColumnComponent</code> listed in <code>declarations</code> (along with the components used to render the node types <code>table</code> and <code>view</code>). <h4 class="anchor anchorWithStickyNavbar_LWe7" id="checklist">Checklist<a href="#checklist" class="hash-link" aria-label="Direct link to Checklist" title="Direct link to Checklist"></a></h4> <ul> <li>Each of your port components extends <code>BasePortComponent</code> from JsPlumb Angular.</li> <li>You reference the underlying data via the member <code>obj</code> in your component templates</li> <li>Each of your components is declared in the <code>declarations</code> list in your module definition</li> <li>You've mapped each expected port to a component in your <code>view</code></li> </ul> <hr> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="change-detection">Change Detection<a href="#change-detection" class="hash-link" aria-label="Direct link to Change Detection" title="Direct link to Change Detection"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="default">Default<a href="#default" class="hash-link" aria-label="Direct link to Default" title="Direct link to Default"></a></h3> If you're using Angular's default change detection mechanism (<code>ChangeDetectionStrategy.Default</code>) then your node/group/port/overlay components will be automatically updated whenever an <code>updateNode</code>, <code>updateGroup</code>, <code>updatePort</code> or <code>updateEdge</code> method is called on the Toolkit. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="onpush">OnPush<a href="#onpush" class="hash-link" aria-label="Direct link to OnPush" title="Direct link to OnPush"></a></h3> If you'd prefer to use <code>ChangeDetectionStrategy.OnPush</code>, JsPlumb Angular can support that. The only requirement is that you need to inject a <code>ChangeDetectorRef</code> into any component with which you want to use <code>OnPush</code> change detection. For example, this is how we'd modify the <code>ColumnComponent</code> shown above to support <code>OnPush</code> change detection: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import { BasePortComponent } from "@jsplumbtoolkit/browser-ui-angular-legacy"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush, selector:"db-column", templateUrl:"templates/column.html" }) export class ColumnComponent extends BasePortComponent { constructor(el: ElementRef, public changeDetectorRef:ChangeDetectorRef) { super(el) } remove() { ... } editName() { ... } } </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> NOTE you must use the name <code>changeDetectorRef</code> for this constructor parameter, and you must also mark it <code>public</code>. JsPlumb discovers the change detector by name, not by type. This also works for node/group components. <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="shape-libraries">Shape libraries<a href="#shape-libraries" class="hash-link" aria-label="Direct link to Shape libraries" title="Direct link to Shape libraries"></a></h2> A shape library is a set of named shapes that you will use to render SVG inside the vertices in your application. These are discussed in detail in the <a href="/toolkit/6.x/lib/nodes-and-groups/shape-libraries">shape libraries</a> and <a href="/toolkit/6.x/lib/nodes-and-groups/shape-libraries#shape-sets">shape-sets</a> pages; here we provide an overview of the available Angular integration with these modules. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="creating-a-shape-library">Creating a shape library<a href="#creating-a-shape-library" class="hash-link" aria-label="Direct link to Creating a shape library" title="Direct link to Creating a shape library"></a></h3> In Angular, a shape library is created by registering one on the <code>jsPlumbService</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from '@angular/core'; import { FLOWCHART_SHAPES, BASIC_SHAPES } from "@jsplumbtoolkit/browser-ui"; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor(public $jsplumb: jsPlumbService) { this.$jsplumb.registerShapeLibrary([FLOWCHART_SHAPES, BASIC_SHAPES]); } } </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> Here, we've injected <code>jsPlumbService</code> into our component, and then invoked <code>registerShapeLibrary</code> on it, to register our shape library. Note that we did not provide any identifier for our shape library in the above code; if your app has only only shape library you do not need to provide an id, as JsPlumb will use a default. But if you had more than one shape library you'd want to provide an id when registering them: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from '@angular/core'; import { FLOWCHART_SHAPES, BASIC_SHAPES } from "@jsplumbtoolkit/browser-ui"; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor(public $jsplumb: jsPlumbService) { this.$jsplumb.registerShapeLibrary([BASIC_SHAPES], "basic"); this.$jsplumb.registerShapeLibrary([FLOWCHART_SHAPES], "flowchart"); } } </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="rendering-an-svg-shape">Rendering an SVG shape<a href="#rendering-an-svg-shape" class="hash-link" aria-label="Direct link to Rendering an SVG shape" title="Direct link to Rendering an SVG shape"></a></h3> Shapes can be rendered with a <code>jtk-shape</code>. For example, here'a <code>NodeComponent</code> that we've mapped in our view, as shown above. This <code>NodeComponent</code> uses a <code>jtk-shape</code> inside its template: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from "@angular/core" import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" @Component({ template:`<div style="color:{{obj.textColor}}" class="flowchart-object" data-jtk-target="true"> <jtk-shape [obj]="obj" [width]="obj.width" [height]="obj.height"></jtk-shape> </div>` }) export class NodeComponent extends BaseNodeComponent { } </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>width</code>, <code>height</code> and <code>obj</code> are all required inputs. Again note the we did not tell the <code>jtk-shape</code> component how to find the shape library to use - it will use the default id. But if we wanted to specify a shape library, we'd do that with the <code>shapeLibraryId</code> input: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from "@angular/core" import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" @Component({ template:`<div style="color:{{obj.textColor}}" class="flowchart-object" data-jtk-target="true"> <jtk-shape [obj]="obj" [width]="obj.width" [height]="obj.height" shapeLibraryId="basic" ></jtk-shape> </div>` }) export class NodeComponent extends BaseNodeComponent { } </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="supported-props">Supported props<a href="#supported-props" class="hash-link" aria-label="Direct link to Supported props" title="Direct link to Supported props"></a></h4> The list of props support by the <code>jtk-shape</code> component is: <div class="d-flex-c"><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>shapeLibraryId</code></td><td><code>string</code></td><td>The ID of the shape library to use. If not specified, a default will be used, which suffices for applications that are only using one shape library.</td></tr><tr><td><code>obj</code></td><td><code>ObjectData</code></td><td>The data for the vertex to render. Required.</td></tr><tr><td><code>width</code></td><td><code>number</code></td><td>Current width for the shape. Although it may seem counterintuitive, this is required - you'll need to set it to `[width]="obj.width"`. Angular's change detection will not pick up changes to this otherwise.</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td>Current height. See notes for `width`.</td></tr><tr><td><code>showLabels</code></td><td><code>boolean</code></td><td>Whether or not to show labels.</td></tr><tr><td><code>labelProperty</code></td><td><code>string</code></td><td>Defaults to `label`. The name of the property inside each vertex that contains its label.</td></tr><tr><td><code>labelStrokeWidth</code></td><td><code>string</code></td><td>The stroke width to use for labels. Optional. Defaults to the Toolkit's default.</td></tr></tbody></table></div> By default the shape component will render just the shape. If you want to add labels you can do so 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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from "@angular/core" import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" @Component({ template:`<div style="color:{{obj.textColor}}" class="flowchart-object" data-jtk-target="true"> <jtk-shape [obj]="obj" showLabels="true" [width]="obj.width" [height]="obj.height"></jtk-shape> </div>` }) export class NodeComponent extends BaseNodeComponent { } </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> By default, JsPlumb will extract the label from a <code>label</code> property in your vertex data. You can provide the name of the property to use if you want to, by setting the <code>labelProperty</code> on your <code>jtk-shape</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">import {Component} from "@angular/core" import {BaseNodeComponent} from "@jsplumbtoolkit/browser-ui-angular" @Component({ template:`<div style="color:{{obj.textColor}}" class="flowchart-object" data-jtk-target="true"> <jtk-shape [obj]="obj" showLabels="true" labelProperty="text" [width]="obj.width" [height]="obj.height"></jtk-shape> </div>` }) export class NodeComponent extends BaseNodeComponent { } </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="adding-your-own-shapes">Adding your own shapes<a href="#adding-your-own-shapes" class="hash-link" aria-label="Direct link to Adding your own shapes" title="Direct link to Adding your own shapes"></a></h3> To add your own shapes, you'll need to create a shape set. These are discussed on a <a href="/toolkit/6.x/lib/nodes-and-groups/shape-libraries#shape-sets">separate page</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="exporting-a-surface-to-svgpngjpg">Exporting a Surface to SVG/PNG/JPG<a href="#exporting-a-surface-to-svgpngjpg" class="hash-link" aria-label="Direct link to Exporting a Surface to SVG/PNG/JPG" title="Direct link to Exporting a Surface to SVG/PNG/JPG"></a></h3> It is possible to export a Surface that is using a shape library to SVG, PNG or JPG. For a full discussion of this, see <a href="/toolkit/6.x/lib/svg-png-jpg-export">this page</a>. For convenience, we added several methods to our Angular integration to support this, as <a href="#using-the-jsplumb-service">discussed below</a>. The methods are: <ul> <li><code>exportSvg<T extends ObjectData>(options:AngularSvgExportOptions<T>)</code></li> </ul> Exports a given surface to an SVG. <ul> <li><code>showSvgExportUI<T extends ObjectData>(options:AngularSvgExportUIOptions<T>)</code></li> </ul> Shows the Toolkit's SVG export UI <ul> <li><code>exportImage<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to an image (PNG or JPG) <ul> <li><code>showImageExportUI<T extends ObjectData>(options:AngularImageExportUIOptions<T>)</code></li> </ul> Shows the Toolkit's image export UI <ul> <li><code>exportPNG<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to a PNG <ul> <li><code>exportJPG<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to a JPG There are four interfaces used by these methods - <code>AngularSvgExportOptions</code>, <code>AngularImageExportOptions</code>, <code>AngularSvgExportUIOptions</code> and <code>AngularImageExportUIOptions</code>. Each of these is an extension of an interface from the exporter, and each of these interfaces has these properties in common: <div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> /** * Surface to export */ surface:Surface /** * Optional ShapeLibrary to use. If not supplied, supply `shapeLibraryId` - or ensure the Surface you are exporting has a ShapeLibrary registered on it. */ shapeLibrary?:ShapeLibrary<T> /** * Optional ID of a ShapeLibrary to use - must have been registered on the jsPlumb Angular service via the `registerShapeLibrary` method. If not supplied, * supply `shapeLibrary` - or ensure the Surface you are exporting has a ShapeLibrary registered on it. */ shapeLibraryId?:string </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> The key piece to keep in mind when exporting via Angular is that your Surface most likely does not have a shape library registered directly on it, due to the way shape libraries and surface are created when using the Angular integration. We recommend you always register a shape library on the Angular service, which you can then retrieve via its ID, and provide as <code>shapeLibraryId</code> to one of the export calls. But keep in mind that if you're only using one shape library, you can register it without an id and the Toolkit will use a default - and it will also use that default ID when trying to retrieve a shape library to use for an export. For example, this is from the flowchart builder starter pp: <div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">exportSVG() { // use the `showSvgExportUI` method to popup the exporter window. Note that we do not need to provide a shapeLibrary // shapeLibraryId here, as the service will use a default shape library id if none is provided. We also did not provide an // id when we registered the shape library above, meaning it was registered with the default id. this.$jsplumb.showSvgExportUI({ surface: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> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="dragging-new-nodesgroups">Dragging new nodes/groups<a href="#dragging-new-nodesgroups" class="hash-link" aria-label="Direct link to Dragging new nodes/groups" title="Direct link to Dragging new nodes/groups"></a></h2> Palettes offer a means for your users to drag new nodes/groups onto your canvas. The <code>SurfaceDropComponent</code> allows you to configure drag/drop of HTML elements; there's also a <code>ShapeLibraryPaletteComponent</code> which is a specialised version of the <code>SurfaceDropComponent</code> that sources its draggable nodes from a <code>ShapeLibrary</code>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="html-elements">HTML elements<a href="#html-elements" class="hash-link" aria-label="Direct link to HTML elements" title="Direct link to HTML elements"></a></h3> To configure your UI to drag and drop HTML elements onto your canvas, you'll use a <code>SurfaceDropComponent</code>, which is a <code>directive</code> you declare via the inclusion of a specific attribute on some element in your 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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div class="sidebar node-palette" jsplumb-surface-drop selector="div" [dataGenerator]="dataGenerator"> <div *ngFor="let nodeType of nodeTypes" [attr.data-node-type]="nodeType.type" [attr.jtk-width]="nodeType.w" [attr.jtk-height]="nodeType.h">{{nodeType.label}}</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> The basic contract is that you declare the jsplumb-surface-drop attribute on some element, identifying it as a <code>SurfaceDropComponent</code>. You also need to specify the <code>selector</code>, which tells JsPlumb how to locate child elements that should be draggable. In the code above we used <code>div</code>, but any valid CSS3 selector may be used. The <code>SurfaceDropComponent</code> also needs to know which surface to attach to. You can provide a <code>surfaceId</code> input to identify your surface, but if you do not, JsPlumb will use the default ID. For the vast majority of apps - having only a single surface - you can safely omit the <code>surfaceId</code> and use the default. In the code above we also see a <code>dataGenerator</code> input: <code>dataGenerator</code> provides a means for the component to generate an initial data payload for some node that is being dragged: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">export class AppComponent { dataGenerator(el:Element) { return { type:el.getAttribute("data-node-type"), width:parseInt(el.getAttribute("jtk-width"), 10), height:parseInt(el.getAttribute("jtk-height")) } } } </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="list-of-inputs">List of inputs<a href="#list-of-inputs" class="hash-link" aria-label="Direct link to List of inputs" title="Direct link to List of inputs"></a></h3> <div class="d-flex-c"><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>ID of the surface to attach to. Only required if you have more than one surface in your UI.</td></tr><tr><td><code>selector</code></td><td><code>string</code></td><td>CSS3 selector identifying child elements that represent draggable nodes.</td></tr><tr><td><code>dataGenerator</code></td><td><code>DataGeneratorFunction</code></td><td>Function to use to generate an initial payload when the user starts to drag something from this component. Optional but you should almost certainly consider providing this, or a `typeGenerator`, since without one of these it is not possible to determine the type of object beind dragged.</td></tr><tr><td><code>typeGenerator</code></td><td><code>TypeGeneratorFunction</code></td><td>Optional function to use to determine the type of object that a user has just started dragging</td></tr><tr><td><code>groupIdentifierFunction</code></td><td><code>GroupIdentifierFunction</code></td><td>Optional function to use to determine if the object that is being dragged represents a group. If this function is present, and returns true, then the drag object is considered to be a group. In all other cases the drag object is considered to be a node.</td></tr><tr><td><code>canvasSelector</code></td><td><code>string</code></td><td>Optional extra selector to use when dragging to identify parts of the surface's canvas that should be considered whitespace. If you use a decorator, for instance, or have otherwise positioned elements on your canvas, these elements will not by default be considered whitespace.</td></tr><tr><td><code>allowDropOnEdge</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto edges in the canvas.</td></tr><tr><td><code>allowDropOnGroup</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto groups in the canvas.</td></tr><tr><td><code>allowDropOnCanvas</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto whitespace.</td></tr><tr><td><code>allowDropOnNode</code></td><td><code>boolean</code></td><td>Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace.</td></tr></tbody></table></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="svg-shapes">SVG shapes<a href="#svg-shapes" class="hash-link" aria-label="Direct link to SVG shapes" title="Direct link to SVG shapes"></a></h3> To drag and drop SVG shapes, you can use a <code>ShapeLibraryPaletteComponent</code>. This is a specialised version of the <code>PaletteComponent</code> which sources its draggable nodes from a <code>ShapeLibrary</code>. Unlike <code>SurfaceDropComponent</code> this is not a directive - it's an element you drop into your 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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">@Component({ selector:"app-component", template:`<div> <jsplumb-surface [view]="view"></jsplumb-surface> <jtk-shape-palette [dataGenerator]="dataGenerator"></jtk-shape-palette> </div>` </div> }) export class AppComponent { view = {... } dataGenerator(el:Element) { return { ... } } } </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>dataGenerator</code> is optional. JsPlumb will create a data object containing the <code>type</code> and <code>category</code> of any shape you drag; if you choose to provide a <code>dataGenerator</code> your values will be added to the data object JsPlumb creates. <div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>note</div><div class="admonitionContent_BuS1">You cannot override <code>type</code> or <code>category</code> via a <code>dataGenerator</code>. JsPlumb will use the values corresponding to the shape that was dragged</div></div> As with the <code>SurfaceDropComponent</code>, in the code shown we have not supplied a <code>surfaceId</code>, and this is again because the component will use a default when a value is not supplied. <div class="d-flex-c"><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>shapeLibraryId</code></td><td><code>string</code></td><td>The ID of the shape library to render. If not specified, a default will be used, which suffices for applications that are only using one shape library. Defaults to `DEFAULT_SHAPE_LIBRARY_ID`</td></tr><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>The ID of the surface to attach to. Only required if you have more than one surface in your ui.</td></tr><tr><td><code>initialSet</code></td><td><code>string</code></td><td>When the shape library contains multiple sets, use this to instruct the palette that you want it to initially load just displaying this set. Optional.</td></tr><tr><td><code>dragSize</code></td><td><code>Size</code></td><td>Optional size to use for dragged elements. Defaults to { w:150, h:100 }</td></tr><tr><td><code>iconSize</code></td><td><code>Size</code></td><td>Optional size to use for icons. Default to { w:150, h:100 }</td></tr><tr><td><code>fill</code></td><td><code>string</code></td><td>Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.</td></tr><tr><td><code>outline</code></td><td><code>string</code></td><td>Optional color to use for outline of dragged elements. Should be in RGB format.</td></tr><tr><td><code>showAllMessage</code></td><td><code>string</code></td><td>Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.</td></tr><tr><td><code>selectAfterDrop</code></td><td><code>boolean</code></td><td>When true (which is the default), a newly dropped vertex will be set as the underlying Toolkit's selection.</td></tr><tr><td><code>canvasStrokeWidth</code></td><td><code>number</code></td><td>Stroke width to use in shapes on the canvas. Defaults to 2.</td></tr><tr><td><code>paletteStrokeWidth</code></td><td><code>number</code></td><td>Stroke width to use in shapes in the palette. Defaults to 1.</td></tr><tr><td><code>dataGenerator</code></td><td><code>DataGeneratorFunction</code></td><td>Optional function you can use to set some initial data for an element being dragged. Note that you cannot override the object's `type` with this function.</td></tr></tbody></table></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="using-the-jsplumb-service">Using the jsPlumb Service<a href="#using-the-jsplumb-service" class="hash-link" aria-label="Direct link to Using the jsPlumb Service" title="Direct link to Using the jsPlumb Service"></a></h2> At the core of JsPlumb's Angular integration is the <code>jsPlumbService</code>, which offers access to, and management of, JsPlumb Toolkit instances and surfaces. It is recommended to create an instance of JsPlumb programmatically at the top level of your application, which you can then share between different components. For instance, this is the <code>ngOnInit</code> method of the top level component in the <a href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">Flowchart Builder</a> demonstration: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">export class AppComponent { @ViewChild(FlowchartComponent) flowchart:FlowchartComponent; @ViewChild(DatasetComponent) dataset:DatasetComponent; toolkitId:string; toolkit:jsPlumbToolkit; constructor(private $jsplumb: jsPlumbService, private elementRef: ElementRef, private flowchartService: FlowchartService) { this.toolkitId = this.elementRef.nativeElement.getAttribute('toolkitId'); } ngOnInit() { this.toolkit = this.$jsplumb.getToolkit(this.toolkitId, this.toolkitParams) } ... } </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="retrieving-toolkits-and-surfaces">Retrieving Toolkits and Surfaces<a href="#retrieving-toolkits-and-surfaces" class="hash-link" aria-label="Direct link to Retrieving Toolkits and Surfaces" title="Direct link to Retrieving Toolkits and Surfaces"></a></h3> <ul> <li><code>getToolkit(id:string, params?:jsPlumbToolkitOptions)</code></li> </ul> Either retrieves an existing Toolkit with the given ID, or creates a Toolkit instance and returns it. Options for the Toolkit instance may be passed in as the second argument; these are ignored if a Toolkit with the given ID already exists. <ul> <li><code>getSurface(id:string, callback:(surface:Surface)=>void, _params:SurfaceOptions)</code></li> </ul> Either retrieves the Surface with the given ID, or creates one, with the given Surface options, and returns it. The second argument to this method is a callback function - it is asynchronous, not returning the Surface until it has been initialised fully. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="storingretrieving-data">Storing/retrieving data<a href="#storingretrieving-data" class="hash-link" aria-label="Direct link to Storing/retrieving data" title="Direct link to Storing/retrieving data"></a></h3> <ul> <li><code>store<T>(key:string, value:T)</code></li> </ul> Offers a means to store arbitrary data on the service, for retrieval elsewhere in your app. <ul> <li><code>retrieve<T>(key:string):T</code></li> </ul> Offers a means to retrieve arbitrary data from the service, which you have stored elsewhere in your app. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="working-with-shape-libraries">Working with Shape Libraries<a href="#working-with-shape-libraries" class="hash-link" aria-label="Direct link to Working with Shape Libraries" title="Direct link to Working with Shape Libraries"></a></h3> See <a href="#shape-libraries">above</a> for a full discussion of how to work with shape libraries in Angular. <ul> <li><code>registerShapeLibrary<T = ObjectData>(shapeSets:Array<ShapeSet>, key?:string):void</code></li> </ul> Registers a shape library with the given id <ul> <li><code>retrieveShapeLibrary<T = ObjectData>(key?:string):ShapeLibraryImpl<T></code></li> </ul> Retrieves the shape library with the given id <ul> <li><code>exportSvg<T extends ObjectData>(options:AngularSvgExportOptions<T>)</code></li> </ul> Exports a given surface to an SVG. <ul> <li><code>showSvgExportUI<T extends ObjectData>(options:AngularSvgExportUIOptions<T>)</code></li> </ul> Shows the Toolkit's SVG export UI <ul> <li><code>exportImage<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to an image (PNG or JPG) <ul> <li><code>showImageExportUI<T extends ObjectData>(options:AngularImageExportUIOptions<T>)</code></li> </ul> Shows the Toolkit's image export UI <ul> <li><code>exportPNG<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to a PNG <ul> <li><code>exportJPG<T extends ObjectData>(options:AngularImageExportOptions<T>, onready:ImageReadyFunction)</code></li> </ul> Exports a given surface to a JPG <h3 class="anchor anchorWithStickyNavbar_LWe7" id="imagereadyfunction">ImageReadyFunction<a href="#imagereadyfunction" class="hash-link" aria-label="Direct link to ImageReadyFunction" title="Direct link to ImageReadyFunction"></a></h3> This function has the type: <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv">type ImageReadyFunction = (params:{width:number, height:number, url:string, el:SVGElement, contentType:string}) => any </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> <ul> <li><code>height</code> Computed height for the image, in pixels.</li> <li><code>width</code> Computed width for the image, in pixels.</li> <li><code>url</code> A data url for the image, encoded as base 64.</li> <li><code>el</code> The underlying SVG element that was exported to the image</li> <li><code>contentType</code> eg <code>image/png</code>, <code>image/jpeg</code>.</li> </ul> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="component-list">Component List<a href="#component-list" class="hash-link" aria-label="Direct link to Component List" title="Direct link to Component List"></a></h2> This is a full list of the components that are available in JsPlumb Angular. For each we provide a sample usage, which does not necessarily use all of the inputs available for the given component. We then provide the full list of available inputs. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="surfacecomponent">SurfaceComponent<a href="#surfacecomponent" class="hash-link" aria-label="Direct link to SurfaceComponent" title="Direct link to SurfaceComponent"></a></h3> The key UI component you'll use to render your UI. <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><jsplumb-surface [renderParams]="renderParams" [view]="view"></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 class="d-flex-c"><div class="d-flex align-items-center">Class:SurfaceComponent</div><div>Selector: jsplumb-surface</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>ID to use for the created surface. If you do not provide this a default value will be used. You only need to provide this if you are rendering a JsPlumb instance to more than one surface.</td></tr><tr><td><code>toolkitId</code></td><td><code>string</code></td><td>ID of the Toolkit to which to attach the surface. If you do not provide this a default value will be used. You only really need to provide this if your page has more than one instance of JsPlumb.</td></tr><tr><td><code>view</code></td><td><code>AngularViewOptions</code></td><td>Options for the view - mappings of components and behaviour to model object types.</td></tr><tr><td><code>renderParams</code></td><td><code>AngularRenderOptions</code></td><td>Options for the underlying surface widget.</td></tr><tr><td><code>toolkitParams</code></td><td><code>JsPlumbToolkitOptions</code></td><td>Optional parameters for the underlying Toolkit. These will be used only if the Toolkit instance with the given ID has not yet been created somewhere else in the app.</td></tr><tr><td><code>runInsideAngular</code></td><td><code>boolean</code></td><td>Set this to false if you do not want the Surface to set itself up inside a `runOutsideAngular` call. We do not recommend this. When the Surface setup is run inside Angular all of the event bindings from the surface's pan/zoom/drag handlers are piped through Angular, causing change detection events, which can result in a performance hit. We've only added this in case there is an unforeseen backwards compatibility issue in someone's app, but all of our testing of this change suggests that is unlikely.</td></tr></tbody></table></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="miniviewcomponent">MiniviewComponent<a href="#miniviewcomponent" class="hash-link" aria-label="Direct link to MiniviewComponent" title="Direct link to MiniviewComponent"></a></h3> Provides a Miniview of the contents of some surface. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import {Component} from "@angular/core" @Component({ selector:"demo-component", template:`<div style={{width:"100%",height:"100%"}}> <jsplumb-surface [data]="data"></jsplumb-surface> <jsplumb-miniview></jsplumb-miniview> </div>` }) export class DemoComponent { 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> <div class="d-flex-c"><div class="d-flex align-items-center">Class:MiniviewComponent</div><div>Selector: jsplumb-miniview</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>ID of the surface to attach the miniview to. Only required if you have more than one surface in your UI.</td></tr><tr><td><code>elementFilter</code></td><td><code>Function</code></td><td>Optional filter to determine whether or not include a given vertex in the miniview</td></tr><tr><td><code>typeFunction</code></td><td><code>Function</code></td><td>Optional function to determine a `type` for each vertex, which is then written as an attribute onto the DOM element representing the vertex in the miniview.</td></tr><tr><td><code>activeTracking</code></td><td><code>boolean</code></td><td>Whether or not to move miniview elements at the same time as their related surface element is being dragged. Defaults to true.</td></tr><tr><td><code>clickToCenter</code></td><td><code>boolean</code></td><td>Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.</td></tr></tbody></table></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="controlscomponent">ControlsComponent<a href="#controlscomponent" class="hash-link" aria-label="Direct link to ControlsComponent" title="Direct link to ControlsComponent"></a></h3> Provides a component that offers a set of controls for some surface. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-1">Example<a href="#example-1" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> <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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"> import {Component} from "@angular/core" @Component({ selector:"demo-component", template:`<div style={{width:"100%",height:"100%"}}> <jsplumb-surface [data]="data"></jsplumb-surface> <jsplumb-controls></jsplumb-controls> </div>` }) export class DemoComponent { 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> <div class="d-flex-c"><div class="d-flex align-items-center">Class:ControlsComponent</div><div>Selector: jsplumb-controls</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>ID of the surface to attach the controls to. Only required if you have more than one surface in your UI.</td></tr><tr><td><code>undoRedo</code></td><td><code>boolean</code></td><td>Defaults to true. Whether or not to show undo/redo buttons.</td></tr><tr><td><code>zoomToExtents</code></td><td><code>boolean</code></td><td>Defaults to true. Whether or not to show the 'zoom to extents' button</td></tr><tr><td><code>clear</code></td><td><code>boolean</code></td><td>Defaults to true. Whether or not to show the clear button.</td></tr><tr><td><code>clearMessage</code></td><td><code>string</code></td><td>The message to prompt the user with when they press the clear button. Defaults to 'Clear dataset?'</td></tr><tr><td><code>buttons</code></td><td><code>ControlsComponentButtons[]</code></td><td>Optional array of extra buttons to include. See controls component docs.</td></tr><tr><td><code>orientation</code></td><td><code>'row'|'column'</code></td><td>Defaults to 'row'.</td></tr></tbody></table></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="surfacedropcomponent">SurfaceDropComponent<a href="#surfacedropcomponent" class="hash-link" aria-label="Direct link to SurfaceDropComponent" title="Direct link to SurfaceDropComponent"></a></h3> This directive provides a means for you to configure the ability to drag/drop nodes and groups from some part of your UI into the canvas. <div class="d-flex-c"><div class="d-flex align-items-center">Class:SurfaceDropComponent</div><div>Selector: [jsplumb-surface-drop]</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>ID of the surface to attach to. Only required if you have more than one surface in your UI.</td></tr><tr><td><code>selector</code></td><td><code>string</code></td><td>CSS3 selector identifying child elements that represent draggable nodes.</td></tr><tr><td><code>dataGenerator</code></td><td><code>DataGeneratorFunction</code></td><td>Function to use to generate an initial payload when the user starts to drag something from this component. Optional but you should almost certainly consider providing this, or a `typeGenerator`, since without one of these it is not possible to determine the type of object beind dragged.</td></tr><tr><td><code>typeGenerator</code></td><td><code>TypeGeneratorFunction</code></td><td>Optional function to use to determine the type of object that a user has just started dragging</td></tr><tr><td><code>groupIdentifierFunction</code></td><td><code>GroupIdentifierFunction</code></td><td>Optional function to use to determine if the object that is being dragged represents a group. If this function is present, and returns true, then the drag object is considered to be a group. In all other cases the drag object is considered to be a node.</td></tr><tr><td><code>canvasSelector</code></td><td><code>string</code></td><td>Optional extra selector to use when dragging to identify parts of the surface's canvas that should be considered whitespace. If you use a decorator, for instance, or have otherwise positioned elements on your canvas, these elements will not by default be considered whitespace.</td></tr><tr><td><code>allowDropOnEdge</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto edges in the canvas.</td></tr><tr><td><code>allowDropOnGroup</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto groups in the canvas.</td></tr><tr><td><code>allowDropOnCanvas</code></td><td><code>boolean</code></td><td>Defaults to true. Allows items to be dropped onto whitespace.</td></tr><tr><td><code>allowDropOnNode</code></td><td><code>boolean</code></td><td>Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace.</td></tr></tbody></table></div> <hr> <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> Provides a palette that renders a shape library, from which new vertices can be dragged onto a surface. <div class="d-flex-c"><div class="d-flex align-items-center">Class:ShapeLibraryPaletteComponent</div><div>Selector: jtk-shape-library</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>shapeLibraryId</code></td><td><code>string</code></td><td>The ID of the shape library to render. If not specified, a default will be used, which suffices for applications that are only using one shape library. Defaults to `DEFAULT_SHAPE_LIBRARY_ID`</td></tr><tr><td><code>surfaceId</code></td><td><code>string</code></td><td>The ID of the surface to attach to. Only required if you have more than one surface in your ui.</td></tr><tr><td><code>initialSet</code></td><td><code>string</code></td><td>When the shape library contains multiple sets, use this to instruct the palette that you want it to initially load just displaying this set. Optional.</td></tr><tr><td><code>dragSize</code></td><td><code>Size</code></td><td>Optional size to use for dragged elements. Defaults to { w:150, h:100 }</td></tr><tr><td><code>iconSize</code></td><td><code>Size</code></td><td>Optional size to use for icons. Default to { w:150, h:100 }</td></tr><tr><td><code>fill</code></td><td><code>string</code></td><td>Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.</td></tr><tr><td><code>outline</code></td><td><code>string</code></td><td>Optional color to use for outline of dragged elements. Should be in RGB format.</td></tr><tr><td><code>showAllMessage</code></td><td><code>string</code></td><td>Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.</td></tr><tr><td><code>selectAfterDrop</code></td><td><code>boolean</code></td><td>When true (which is the default), a newly dropped vertex will be set as the underlying Toolkit's selection.</td></tr><tr><td><code>canvasStrokeWidth</code></td><td><code>number</code></td><td>Stroke width to use in shapes on the canvas. Defaults to 2.</td></tr><tr><td><code>paletteStrokeWidth</code></td><td><code>number</code></td><td>Stroke width to use in shapes in the palette. Defaults to 1.</td></tr><tr><td><code>dataGenerator</code></td><td><code>DataGeneratorFunction</code></td><td>Optional function you can use to set some initial data for an element being dragged. Note that you cannot override the object's `type` with this function.</td></tr></tbody></table></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="shapelibrarycomponent">ShapeLibraryComponent<a href="#shapelibrarycomponent" class="hash-link" aria-label="Direct link to ShapeLibraryComponent" title="Direct link to ShapeLibraryComponent"></a></h3> Provides a means to render an SVG shape into a component. <div class="d-flex-c"><div class="d-flex align-items-center">Class:ShapeLibraryComponent</div><div>Selector: jtk-shape</div><div>Inputs:</div><table class="jtk-docs-props"><thead><tr><th>Input</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>shapeLibraryId</code></td><td><code>string</code></td><td>The ID of the shape library to use. If not specified, a default will be used, which suffices for applications that are only using one shape library.</td></tr><tr><td><code>obj</code></td><td><code>ObjectData</code></td><td>The data for the vertex to render. Required.</td></tr><tr><td><code>width</code></td><td><code>number</code></td><td>Current width for the shape. Although it may seem counterintuitive, this is required - you'll need to set it to `[width]="obj.width"`. Angular's change detection will not pick up changes to this otherwise.</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td>Current height. See notes for `width`.</td></tr><tr><td><code>showLabels</code></td><td><code>boolean</code></td><td>Whether or not to show labels.</td></tr><tr><td><code>labelProperty</code></td><td><code>string</code></td><td>Defaults to `label`. The name of the property inside each vertex that contains its label.</td></tr><tr><td><code>labelStrokeWidth</code></td><td><code>string</code></td><td>The stroke width to use for labels. Optional. Defaults to the Toolkit's default.</td></tr></tbody></table></div></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/toolkit/6.x/lib/react-integration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">React</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/toolkit/6.x/lib/vue3-integration"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Vue 3</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#imports" class="table-of-contents__link toc-highlight">Imports</a></li><li><a href="#setup" class="table-of-contents__link toc-highlight">Setup</a></li><li><a href="#quick-start" class="table-of-contents__link toc-highlight">Quick start</a></li><li><a href="#rendering-nodes-and-groups" class="table-of-contents__link toc-highlight">Rendering Nodes and Groups</a><ul><li><a href="#mapping-types-to-components" class="table-of-contents__link toc-highlight">Mapping types to components</a></li><li><a href="#using-input-in-a-nodegroup-component" class="table-of-contents__link toc-highlight">Using @Input in a node/group component</a></li><li><a href="#using-output-in-a-nodegroup-component" class="table-of-contents__link toc-highlight">Using @Output in a node/group component</a></li></ul></li><li><a href="#rendering-ports" class="table-of-contents__link toc-highlight">Rendering Ports</a></li><li><a href="#change-detection" class="table-of-contents__link toc-highlight">Change Detection</a><ul><li><a href="#default" class="table-of-contents__link toc-highlight">Default</a></li><li><a href="#onpush" class="table-of-contents__link toc-highlight">OnPush</a></li></ul></li><li><a href="#shape-libraries" class="table-of-contents__link toc-highlight">Shape libraries</a><ul><li><a href="#creating-a-shape-library" class="table-of-contents__link toc-highlight">Creating a shape library</a></li><li><a href="#rendering-an-svg-shape" class="table-of-contents__link toc-highlight">Rendering an SVG shape</a></li><li><a href="#adding-your-own-shapes" class="table-of-contents__link toc-highlight">Adding your own shapes</a></li><li><a href="#exporting-a-surface-to-svgpngjpg" class="table-of-contents__link toc-highlight">Exporting a Surface to SVG/PNG/JPG</a></li></ul></li><li><a href="#dragging-new-nodesgroups" class="table-of-contents__link toc-highlight">Dragging new nodes/groups</a><ul><li><a href="#html-elements" class="table-of-contents__link toc-highlight">HTML elements</a></li><li><a href="#list-of-inputs" class="table-of-contents__link toc-highlight">List of inputs</a></li><li><a href="#svg-shapes" class="table-of-contents__link toc-highlight">SVG shapes</a></li></ul></li><li><a href="#using-the-jsplumb-service" class="table-of-contents__link toc-highlight">Using the jsPlumb Service</a><ul><li><a href="#retrieving-toolkits-and-surfaces" class="table-of-contents__link toc-highlight">Retrieving Toolkits and Surfaces</a></li><li><a href="#storingretrieving-data" class="table-of-contents__link toc-highlight">Storing/retrieving data</a></li><li><a href="#working-with-shape-libraries" class="table-of-contents__link toc-highlight">Working with Shape Libraries</a></li><li><a href="#imagereadyfunction" class="table-of-contents__link toc-highlight">ImageReadyFunction</a></li></ul></li><li><a href="#component-list" class="table-of-contents__link toc-highlight">Component List</a><ul><li><a href="#surfacecomponent" class="table-of-contents__link toc-highlight">SurfaceComponent</a></li><li><a href="#miniviewcomponent" class="table-of-contents__link toc-highlight">MiniviewComponent</a></li><li><a href="#controlscomponent" class="table-of-contents__link toc-highlight">ControlsComponent</a></li><li><a href="#surfacedropcomponent" class="table-of-contents__link toc-highlight">SurfaceDropComponent</a></li><li><a href="#shapelibrarypalettecomponent" class="table-of-contents__link toc-highlight">ShapeLibraryPaletteComponent</a></li><li><a href="#shapelibrarycomponent" class="table-of-contents__link toc-highlight">ShapeLibraryComponent</a></li></ul></li></ul></div></div></div></div></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">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/jsplumb" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/jsplumblib" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://blog.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Blog</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 JSPLUMB PTY LTD</div></div></div></footer></div> </body> </html>