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/vue3-integration" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.5.2"> <title data-rh="true">Vue 3 | 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/vue3-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="Vue 3 | JsPlumb Toolkit Documentation"><meta data-rh="true" name="description" content="JsPlumb has solid integration with Vue 3, shipping in the package @jsplumbtoolkit/browser-ui-vue3."><meta data-rh="true" property="og:description" content="JsPlumb has solid integration with Vue 3, shipping in the package @jsplumbtoolkit/browser-ui-vue3."><meta data-rh="true" name="keywords" content="vue,vue3"><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/vue3-integration"><link data-rh="true" rel="alternate" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-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" 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 menu__link--active" aria-current="page" 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">Vue 3<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>Vue 3 Integration</h1></header> JsPlumb has solid integration with Vue 3, shipping in the package <code>@jsplumbtoolkit/browser-ui-vue3</code>. Vue3 versions of our <a href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">Flowchart Builder</a>, <a href="https://github.com/jsplumb/jsplumbtoolkit-applications/tree/main/apps/schema-builder" target="_blank">Schema Builder</a> and <a href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">Chatbot</a> starter apps are available in the <a href="https://github.com/jsplumb-demonstrations" target="_blank" rel="noopener noreferrer">JsPlumb demonstrations organisation</a> on Github. <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-vue3":"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 JsPlumb in your Vue bootstrap 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 { createApp } from 'vue' import App from './App.vue' import { JsPlumbToolkitVue3Plugin } from "@jsplumbtoolkit/browser-ui-vue3" const app = createApp(App) app.use(JsPlumbToolkitVue3Plugin) </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="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>SurfaceComponent</code> to render a couple of nodes and an edge: <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"><template> <div style="width:100%;height:100%"> <SurfaceComponent :data="this.getData()"/> <ControlsComponent/> <MiniviewComponent/> </div> </template> <script> import { defineComponent } from "vue" export default defineComponent({ methods:{ getData:function() { return { data:{ nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } } } } }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <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 attribute we set on the <code>Surface</code> was <code>data</code>, meaning the component uses a default <code>Absolute</code> layout and a default component for rendering nodes. The <code>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 Vue 3 component to render nodes with: <h6 class="anchor anchorWithStickyNavbar_LWe7" id="nodecomponentvue">NodeComponent.vue<a href="#nodecomponentvue" class="hash-link" aria-label="Direct link to NodeComponent.vue" title="Direct link to NodeComponent.vue"></a></h6> <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"><template> <div style="width:60px;60px;background-color:white;border:1px solid black;text-align:center"> <h3>{{obj.label}}</h3></div> </template> <script> import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-vue3' export default { mixins:[BaseNodeComponent] } </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <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"><template> <div style="width:100%;height:100%"> <SurfaceComponent :data="this.getData()" :renderOptions="this.renderParams()" ></SurfaceComponent> <ControlsComponent/> <MiniviewComponent/> </div> </template> <script> import { defineComponent } from "vue" import NodeComponent from './NodeComponent.vue' export default defineComponent({ methods:{ getData:function() { return { data:{ nodes:[ { id:"1", label:"1", left:50, top:50}, { id:"2", label:"TWO", left:250, top:250} ], edges:[ { source:"1", target:"2" } ] } } }, renderParams:function() { return { layout:{ type:"ForceDirected" }, grid:{ size:{ w:50, h:50 } } } }, view:function() { return { nodes:{ default:{ component:NodeComponent } } } } }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <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> <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>SurfaceComponent</code>, which provides the canvas onto which nodes, groups and edges are drawn. In the <a href="#quickstart">Quickstart</a> section above we show a couple of examples of the <code>SurfaceComponent</code> in action. Each node or group in your UI is rendered as an individual component. In the first example above, we rely on JsPlumb's default Vue 3 component to render each node, but in the second we provide a component ourselves, although its quite simple. In a real world app your components will likely be more complex. 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-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"><script> import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-vue3' export default { mixins:[BaseNodeComponent], props:["shapeLibrary", "anchorPositions"] } </script> <template> <div :style="{color:obj.textColor}" class="flowchart-object" data-jtk-target="true"> <span>{{obj.text}}</span> <ShapeComponent :obj="obj" :shape-library="shapeLibrary"></ShapeComponent> <div v-for="anchor in anchorPositions" :class="'jtk-connect jtk-connect-' + anchor.id" :data-jtk-anchor-x="anchor.x" :data-jtk-anchor-y="anchor.y" :data-jtk-orientation-x="anchor.ox" :data-jtk-orientation-y="anchor.oy" data-jtk-source="true" data-jtk-port-type="source"></div> <div class="node-delete node-action delete"></div> </div> </template> </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="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>viewOptions</code> prop 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>viewOptions</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">const 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) => { edgeEditor.stopEditing() // if zero nodes currently selected, or the shift key wasnt pressed, make this node the only one in the selection. if (toolkit.getSelection()._nodes.length < 1 || params.e.shiftKey !== true) { toolkit.setSelection(params.obj) } else { // if multiple nodes already selected, or shift was pressed, add this node to the current selection. toolkit.addToSelection(params.obj) } } }, inject:{ shapeLibrary:shapeLibrary, 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 <code>component</code> property in each mapping points to some Vue Component. If you omit <code>component</code> from a mapping, JsPlumb will use a default node/group component. This is great for prototyping or for apps whose nodes do not have rich content. Notice the <code>inject</code> section in the node mapping above: it instructs JsPlumb to inject two props into the <code>NodeComponent</code> when it instantiates one. In this case we pass in a shape library, which we use in this app to render shapes, and a set of anchor positions. You'll see these two props defined on the <code>NodeComponent</code>, whose source is shown above. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="basenodecomponent">BaseNodeComponent<a href="#basenodecomponent" class="hash-link" aria-label="Direct link to BaseNodeComponent" title="Direct link to BaseNodeComponent"></a></h3> This mixin exposes several helper methods and is responsible for notifying the Vue 3 core when a node has been initially rendered. It is automatically injected into any component used to render nodes. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="methods">Methods<a href="#methods" class="hash-link" aria-label="Direct link to Methods" title="Direct link to Methods"></a></h4> <ul> <li>getNode() Gets the underlying Toolkit node that the component is rendering</li> <li>removeNode() Instructs the Toolkit to remove the node that the component is rendering. This will of course result in the destruction of the component.</li> <li>getToolkit() Gets the underlying Toolkit instance for the node the component is rendering.</li> <li>updateNode(data:any) Updates the underlying node that the component is rendering.</li> </ul> Nodes rendered with this mixin are fully reactive: calls to <code>updateNode</code> will result in a repaint of the component with no further effort involved on your part. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="basegroupcomponent">BaseGroupComponent<a href="#basegroupcomponent" class="hash-link" aria-label="Direct link to BaseGroupComponent" title="Direct link to BaseGroupComponent"></a></h3> This mixin exposes several helper methods and is responsible for notifying the Vue 3 core when a group has been initially rendered. It is automatically injected into any component used to render groups. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="methods-1">Methods<a href="#methods-1" class="hash-link" aria-label="Direct link to Methods" title="Direct link to Methods"></a></h4> <ul> <li>getGroup() Gets the underlying Toolkit group that the component is rendering</li> <li>removeGroup(removeChildNodes?:boolean) Instructs the Toolkit to remove the group that the component is rendering, and possibly all of the child nodes of the group too. This will of course result in the destruction of the component.</li> <li>getToolkit() Gets the underlying Toolkit instance for the group the component is rendering.</li> <li>updateGroup(data:any) Updates the underlying group that the component is rendering.</li> </ul> Groups rendered with this mixin are fully reactive: calls to <code>updateGroup</code> will result in a repaint of the component with no further effort involved on your part. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="injecting-values-in-nodesgroups">Injecting values in nodes/groups<a href="#injecting-values-in-nodesgroups" class="hash-link" aria-label="Direct link to Injecting values in nodes/groups" title="Direct link to Injecting values in nodes/groups"></a></h3> From version 5.13.7 onwards, you can provide a set of data values that you'd like to inject into a component via the <code>inject</code> property of a node definition: <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">export default { name: 'jsp-toolkit', props:["surfaceId"], data:() => { renderParams:{ ... }, view:{ nodes:{ default:{ component:MyNode, inject:{ injectedStaticValue:"My Static Value", injectedDynamicValue:(node, toolkit) => `My Dynamic Value ${node.id}` } } } } } } </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> Each value you inject can be either a static value, or a function that takes as argument the current node (or group) and the underlying Toolkit instance, and which returns an appropriate value. In the component itself you need to declare these in the props: <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">props:{ injectedStaticValue:String, injectedDynamicValue: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> You can then access these values in your template: <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"><template> <div class="injected-static">{{injectedStaticValue}}</div> <div class="injected-dynamic">{{injectedDynamicValue}}</div> </template> </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="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> The Vue 3 integration supports rendering ports. A good example for how to do this can be found in the code for the <a href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank" rel="noopener noreferrer">Schema Builder</a> starter application. <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 how to use these modules in a Vue app. <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 Vue, a shape library is created the same way as in vanilla js. In the code below we create a shape library with flowchart and basic shapes, which we then inject into our <code>SurfaceComponent</code> via its <code>renderOptions</code> prop: <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"><script> import { defineComponent } from "vue"; import { FLOWCHART_SHAPES, BASIC_SHAPES, ShapeLibraryImpl, DEFAULT } from "@jsplumbtoolkit/browser-ui" const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES, BASIC_SHAPES]) export default defineComponent({ name:"flowchart", methods:{ renderOptions:function() { return { shapes:{ library:shapeLibrary } } }, viewOptions:function() { return { nodes:{ default:{ component:NodeComponent, inject:{ shapeLibrary:shapeLibrary } } } } } } }) </script> <template> <div> <SurfaceComponent :renderOptions="this.renderOptions()"/> </div> </template> </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>ShapeComponent</code>, which is a component that expect to be given some shape library and the backing data for a vertex. In the code above we show <code>viewOptions</code> with a mapping for nodes, that uses a <code>NodeComponent</code>, into which JsPlumb injects a <code>shapeLibrary</code> prop. Internally, that <code>NodeComponent</code> will use a <code>ShapeComponent</code> to render the SVG: <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"><script> import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-vue3' export default { mixins:[BaseNodeComponent], props:["shapeLibrary", "anchorPositions"] } </script> <template> <div> <span>{{obj.text}}</span> <ShapeComponent :obj="obj" :shape-library="shapeLibrary"></ShapeComponent> </div> </template> </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 the shape component will render just the shape. If you want to add labels you can do so like this: <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><script> import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-vue3' export default { mixins:[BaseNodeComponent], props:["shapeLibrary", "anchorPositions"] } </script> <template> <div> <span>{{obj.text}}</span> <ShapeComponent :obj="obj" :shape-library="shapeLibrary" :showLabels="true" labelProperty="text"></ShapeComponent> </div> </template> </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>. <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. JsPlumb Vue offers a <code>SurfaceDrop</code> mixin to support drag/drop of HTML elements, and a <code>ShapeLibraryPaletteComponent</code> to support drag/drop of SVG shapes. <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>SurfaceDrop</code> mixin. As an example of how to set one up, this is the palette from our <a href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">Chatbot</a> starter app: <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"> <template> <div class="jtk-schema-palette"> <div class="jtk-schema-palette-item" :data-type="entry.type" title="Drag to add new" v-for="entry in data" :key="entry.type"> {{entry.label}} </div> </div> </template> <script> import {defineComponent} from "vue" import { SurfaceDrop } from '@jsplumbtoolkit/browser-ui-vue3' import { TABLE, VIEW } from "../constants" export default defineComponent({ mixins:[ SurfaceDrop ], data:function() { return { data:[ { label:"Table", type:TABLE }, { label:"View", type:VIEW} ] }; } }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> Now we reference this <code>Palette</code> component inside the template of our app, providing a <code>selector</code>, which identifies what child elements should be draggable, and a <code>dataGenerator</code>, which is what JsPlumb uses to get an initial payload when the user starts dragging an element. Here we also show how to setup a <code>dataGenerator</code> - the best way is to declare it in the <code>data</code> section of your component as the template can easily reference 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"><script> export default defineComponent({ name:"FlowchartBuilder", methods:{ ... }, mounted() { }, data:() => { return { dataGenerator:(el) => { const type = el.getAttribute("data-type") return { type, message:getAMessage(type) } } } } }) </script> <template> ... <Palette selector="[data-type]" :dataGenerator="dataGenerator"/> ... </template> </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="selector">Selector<a href="#selector" class="hash-link" aria-label="Direct link to Selector" title="Direct link to Selector"></a></h4> Note that we used a selector of <code>[data-type]</code> in this app - meaning, some element that has an <code>data-type</code> attribute. You can use any valid CSS3 selector. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="valid-markup">Valid markup<a href="#valid-markup" class="hash-link" aria-label="Direct link to Valid markup" title="Direct link to Valid markup"></a></h4> In our <code>Palette</code> we use a <code>div</code> for each draggable type, inside an element with <code>flex-column</code> set on it. JsPlumb is very flexible, though - you can use any markup you like. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="surface-id">Surface ID<a href="#surface-id" class="hash-link" aria-label="Direct link to Surface ID" title="Direct link to Surface ID"></a></h4> The <code>SurfaceDrop</code> needs to know which surface it is going to be attached to, which is not shown in the code above. This is because from 6.70.0 onwards, when you omit the <code>surfaceId</code> from a component, JsPlumb uses a default value. If we had a UI with more than one surface we could assign it an ID and then also tell our palette about 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"><template> ... <Palette selector="[data-type]" :dataGenerator="dataGenerator" surfaceId="myOtherSurface"/> ... </template> </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="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> In JsPlumb Vue, you can use a <code>ShapePaletteComponent</code>. This is how you'd include it in a 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"><template> <div id="app"> <SurfaceComponent :renderOptions="this.renderOptions()" :viewOptions="this.viewOptions()" url="copyright.json"> </SurfaceComponent> <ShapePaletteComponent :data-generator="dataGenerator" initial-set="flowchart"></ShapePaletteComponent> </div> </template> </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 <code>:data-generator</code> prop is a function used to get an initial dataset when a user starts to drag a shape. You can see this defined in the <code>methods</code> of the component code below. Other important points to note: <ul> <li> The <code>shapeLibrary</code> is supplied in the <code>renderOptions</code> which are passed to the <code>SurfaceComponent</code>. The <code>ShapePaletteComponent</code> retrieves the shape library from the surface, so don't forget this step. </li> <li> We <code>inject</code> the <code>shapeLibrary</code> into <code>NodeComponent</code> in the <code>viewOptions</code>. <code>NodeComponent</code> declares a <code>shapeLibrary</code> prop (shown below), which it then uses to draw shapes. </li> </ul> <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><script> import NodeComponent from './Node.vue' import { defineComponent } from "vue"; import { FLOWCHART_SHAPES, BASIC_SHAPES, ShapeLibraryImpl } from "@jsplumbtoolkit/browser-ui" const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES, BASIC_SHAPES]) export default defineComponent({ methods:{ viewOptions:function() { return { nodes:{ default:{ component:NodeComponent, inject:{ shapeLibrary:shapeLibrary } } } } }, renderOptions:function() { return { shapes:{ library:shapeLibrary } } } }, data:() => { return { shapeLibrary, dataGenerator:(el) => { return { textColor:"#FF0000", outline:"#000000", fill:"#FFFFFF", text:'Hello', outlineWidth:2 } } } } }) </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <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 Vue. For each we provide a sample usage, which does not necessarily use all of the props available for the given component. <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> This component provides an instance of JsPlumb and a surface widget to render the contents. You do not instantiate either the JsPlumb Toolkit or the Surface yourself, the Vue 3 code handles that. If you subsequently want to access the Toolkit instance a good approach is to declare a <code>ref</code> for the Toolkit component as shown below. After the example follows a brief discussion of how to get access to the Toolkit and to the 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-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"><SurfaceComponent ref="toolkitComponent" :renderOptions="this.renderOptions()" :toolkitOptions="this.toolkitOptions()" :viewOptions="this.viewOptions()"> </SurfaceComponent> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"></a></h4> All props are optional. <ul> <li><code>id</code> Unique ID for the Toolkit instance. Can be used to retrieve a Toolkit instance from the jsPlumbToolkitVue3 module.</li> <li><code>surface-id</code> Unique ID for the Surface widget. Required if you wish to attach a Miniview or a Palette. Also useful if you wish to interact with a Surface, to perform operations such as zooming, centering on content, etc.</li> <li><code>renderOptions</code> Parameters to pass in to the constructor of the Surface widget. Note here we use the <code>v-bind:</code> prefix to tell Vue that the object we are injecting is in the Vue instance's model.</li> <li><code>toolkitOptions</code> Parameters to pass in to the constructor of the Toolkit instance. Note again the use of <code>v-bind:</code> in our example above.</li> <li><code>viewOptions</code> View parameters. Views are discussed <a href="/toolkit/6.x/lib/views">here</a>.</li> </ul> In this example we supply <code>renderOptions</code>, <code>toolkitOptions</code> and <code>viewOptions</code> to the return value of methods - the underlying code looks like this: <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">export default defineComponent({ name: 'some-component', props:["surfaceId"], methods:{ viewOptions:function() { return { nodes: { "start": { component:StartNode }, ...other node types }, ... rest of the view } }, toolkitOptions:function() { return { beforeStartConnect: (node) => { // limit edges from start node to 1. if any other type of node, return return (node.data.type === START && node.getEdges().length > 0) ? false : {label: "..."}; } } }, renderOptions:function() { return { layout:{ type:ForceDirectedLayout.type }, ... other render params. ] } } }) </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="accessing-the-toolkit-and-the-surface">Accessing the Toolkit and the Surface<a href="#accessing-the-toolkit-and-the-surface" class="hash-link" aria-label="Direct link to Accessing the Toolkit and the Surface" title="Direct link to Accessing the Toolkit and the Surface"></a></h4> You'll almost certainly want to access the underlying Toolkit instance, which is best done by declaring a <code>ref</code> as shown above. This ref can be accessed when the component mounts, as in the snippet below. We also show here how to access a surface, which you do via the <code>loadSurface</code> method from the Vue 3 integration package: <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 { loadSurface } from '@jsplumbtoolkit/browser-ui-vue3'; let toolkit export default defineComponent({ mounted() { toolkit = this.$refs.toolkitComponent.toolkit loadSurface((s) => { // s is of type 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> <code>loadSurface</code> takes a callback rather than passing the surface back directly. This is because there is no guarantee that a surface with the given ID exists - it may be not loaded yet. If you try to access a surface that is not yet loaded, your request is queued, and then subsequently when a surface with that ID is registered on the Vue integration all of the requests for that surface are served, in the order they originally arrived. <h5 class="anchor anchorWithStickyNavbar_LWe7" id="specifying-surface-id">Specifying surface ID<a href="#specifying-surface-id" class="hash-link" aria-label="Direct link to Specifying surface ID" title="Direct link to Specifying surface ID"></a></h5> In the example above, we did not tell JsPlumb what Surface we wanted, so JsPlumb just assumes we want a surface registered with the default id. But if we have more than one surface we can target them specifically by providing the surface ID as the first argument to <code>loadSurface</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 { loadSurface } from '@jsplumbtoolkit/browser-ui-vue3'; let toolkit export default defineComponent({ mounted() { toolkit = this.$refs.toolkitComponent.toolkit loadSurface("myOtherSurface", (s) => { // s is of type 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> <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> This is a component that provides a miniview that can be attached to 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-xml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-xml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><MiniviewComponent></MiniviewComponent> </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="attributes">Attributes<a href="#attributes" class="hash-link" aria-label="Direct link to Attributes" title="Direct link to Attributes"></a></h4> <ul> <li><code>surface-id</code> ID for the surface widget to which to attach the Miniview. Optional; if you don't provide it, a default will be used.</li> </ul> <hr> <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. If there is a lasso plugin installed on the given surface this component will show buttons for pan/select mode, otherwise it will not. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-2">Example<a href="#example-2" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> <div class="language-xml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-xml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><ControlsComponent></ControlsComponent> </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="attributes-1">Attributes<a href="#attributes-1" class="hash-link" aria-label="Direct link to Attributes" title="Direct link to Attributes"></a></h4> <ul> <li><code>surface-id</code> ID for the surface widget to which to attach the controls. Optional; if you don't provide it, a default will be used.</li> <li><code>undoRedo</code> Defaults to true. Whether or not to show the undo/redo buttons.</li> <li><code>zoomToExtents</code> Defaults to true. Whether or not to show the zoom to extents button.</li> <li><code>orientation</code> "row" or "column". The default is "row".</li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="exportcontrolscomponent">ExportControlsComponent<a href="#exportcontrolscomponent" class="hash-link" aria-label="Direct link to ExportControlsComponent" title="Direct link to ExportControlsComponent"></a></h3> Provides a component that offers a set of buttons a user can press to export the contents of some surface as SVG, PNG or JPG. Note that this only works when you are using a shape library in your UI. Canvases whose vertices are rendered as HTML elements will not generate output. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-3">Example<a href="#example-3" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> <div class="language-xml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-xml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><ExportControlsComponent></ExportControlsComponent> </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="attributes-2">Attributes<a href="#attributes-2" class="hash-link" aria-label="Direct link to Attributes" title="Direct link to Attributes"></a></h4> <ul> <li><code>surface-id</code> ID for the surface widget to which to attach the controls. Optional; if you don't provide it, a default will be used.</li> <li><code>showLabel</code> Defaults to true. Whether or not to show a label on the controls.</li> <li><code>label</code> Optional label to use. Defaults to "Export : ".</li> <li><code>margins</code> Optional margins to set around the output. Defaults to 0. This is an object in <code>PointXY</code> format.</li> <li><code>svgOptions</code> Optional <code>SvgExportUIOptions</code> controlling SVG output.</li> <li><code>imageOptions</code> Optional <code>ImageExportUIOptions</code> controlling image output.</li> <li><code>allowSvgExport</code> Defaults to true.</li> <li><code>allowPngExport</code> Defaults to true.</li> <li><code>allowJpgExport</code> Defaults to true.</li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="surfacedrop-mixin">SurfaceDrop mixin<a href="#surfacedrop-mixin" class="hash-link" aria-label="Direct link to SurfaceDrop mixin" title="Direct link to SurfaceDrop mixin"></a></h3> This mixin is a wrapper around the <a href="/toolkit/6.x/lib/drag-and-drop">Drop Manager</a>, which offers the ability to drop onto edges, nodes and the canvas itself. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example-4">Example<a href="#example-4" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> This is an example of a component that uses the SurfaceDrop mixin. We show, in the <code>onCanvasDrop</code> method, an example of how this mixin can be used to replace the previous Palette mixin. Note, though, the <code>onEdgeDrop</code> and <code>onDrop</code> methods: these are, respectively, called when an element is dragged on an Edge or a Node/Group. <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"><template> <div class="sidebar node-palette"> <div class="sidebar-item" :data-node-type="entry.type" title="Drag to add new" v-for="entry in data" :key="entry.type"> <i :class="entry.icon"></i>{{entry.label}} </div> </div> </template> <script> import { SurfaceDrop } from '@jsplumbtoolkit/browser-ui-vue3'; export default { mixins:[ SurfaceDrop ], data:function() { return { data:[ { icon:"icon-tablet", label:"Question", type:"question" }, { icon:"icon-eye-open", label:"Action", type:"action" }, { type:"output", icon:"icon-eye-open", label:"Output" } ] }; } } </script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> Note that this component itself doesn't declare any <code>props</code>, and you are free to provide any template you wish to render the component's <code>data</code>. The underlying <code>DragDrop</code> mixin's <code>props</code> are: <ul> <li>surfaceId:string Optional. The ID of the Surface to which to attach the Drop Manager. If not provided, the default will be used.</li> <li>selector:string Required. A CSS3 selector instructing the Toolkit how to identify which elements in the component represent draggable node types.</li> <li>dataGenerator:(el:HTMLElement) => T Optional. A function that can return a data object representing an element which is being dragged. This function is called as soon as an element starts to be dragged.</li> <li>allowDropOnGroup:boolean Optional, defaults to true. If true, then elements can be dropped onto nodes/groups, and in the event that occurs, the <code>onDrop</code> method will be called.</li> <li>allowDropOnCanvas:boolean Optional, defaults to true. When an element is dropped on the canvas whitespace, it is added to the dataset and rendered.</li> <li>allowDropOnEdge:boolean Optional, defaults to true. If true, then elements can be dropped onto edges, and in the event that an element is dropped on an edge, a new node/group is added and inserted between the source and target of the original edge, and the original edge is discarded..</li> <li>typeGenerator:(data:T) => string Optional. A function that can return the correct type for some data object representing an element being dragged. By default the Toolkit will use the <code>type</code> member of the data object.</li> <li>groupIdentifier:(d: T, el: HTMLElement) => boolean Optional. By default, the toolkit looks for a <code>jtk-is-group</code> attribute on an element being dragged. If found, with a value of <code>"true"</code>, then the Toolkit assumes a group is being dragged. You can supply your own function to make this decision.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="shapepalettecomponent">ShapePaletteComponent<a href="#shapepalettecomponent" class="hash-link" aria-label="Direct link to ShapePaletteComponent" title="Direct link to ShapePaletteComponent"></a></h3> The shape library plugin also makes available a <code>jsplumb-shape-palette</code> component, which lets you drag and drop new shapes from a palette: To use it, you need to have setup the shape library as shown above. Then, 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"><ShapePaletteComponent :shape-library="shapeLibrary" :data-generator="dataGenerator" initial-set="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> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="props-1">Props<a href="#props-1" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props"></a></h4> <ul> <li>surfaceId:string Optional. The ID of the surface to which to attach the palette. If not set a default will be used.</li> <li>shapeLibrary:ShapeLibraryImpl Your shape library</li> <li>dragSize:Size Optional size to set on elements when they are being dragged. If this is omitted, the derived <code>iconSize</code> will be used.</li> <li>iconSize:Size Optional, defaults to 150x100 pixels. This is the size to use for each icon. It will also be used for <code>dragSize</code> if that is not separately specified.</li> <li>fill:string Optional, defaults to "#FFFFFF". Fill color to use for icons.</li> <li>outline:string Optional, defaults to "#000000". Color to use for icon outline.</li> <li>selectAfterDrop:boolean Optional, defaults to true. Instructs the palette to set a newly dropped vertex as the Toolkit's selection.</li> <li>canvasStrokeWidth:number Optional, defaults to 2. The stroke width to use when rendering dropped vertices on the canvas.</li> <li>paletteStrokeWidth:number Optional, defaults to 1. The stroke width to use when rendering icons in the palette.</li> <li>dataGenerator:DataGeneratorFunction Optional. Provide one of these if you wish to be able to set initial data for some icon that is about to be dragged on to the canvas.</li> <li>initialSet If your shape library has multiple sets but when the palette is first rendered you want to specify a single set to show, set this value.</li> </ul></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/angular-integration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Angular</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/toolkit/6.x/lib/svelte-integration"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Svelte</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="#basenodecomponent" class="table-of-contents__link toc-highlight">BaseNodeComponent</a></li><li><a href="#basegroupcomponent" class="table-of-contents__link toc-highlight">BaseGroupComponent</a></li><li><a href="#injecting-values-in-nodesgroups" class="table-of-contents__link toc-highlight">Injecting values in nodes/groups</a></li></ul></li><li><a href="#rendering-ports" class="table-of-contents__link toc-highlight">Rendering Ports</a></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></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="#svg-shapes" class="table-of-contents__link toc-highlight">SVG shapes</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="#exportcontrolscomponent" class="table-of-contents__link toc-highlight">ExportControlsComponent</a></li><li><a href="#surfacedrop-mixin" class="table-of-contents__link toc-highlight">SurfaceDrop mixin</a></li><li><a href="#shapepalettecomponent" class="table-of-contents__link toc-highlight">ShapePaletteComponent</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>