Skip to main content

JsPlumb Svelte

JsPlumb offers integration with Svelte 3/4. The minimum required version is 3.55.0, but we recommend using Svelte 4.

We have not yet tested our Svelte integration against Svelte 5.

Imports​

"dependencies":{
  "@jsplumbtoolkit/browser-ui-svelte":"7.2.0"
}

Quick start​

JsPlumb's Svelte integration offers a wrapper around the Surface component. Let's take a quick look at how you'd use one:

<script>
    
    import { SurfaceComponent, 
        ControlsComponent, 
        MiniviewComponent } from '@jsplumbtoolkit/browser-ui-svelte'
    
    const data = {
        nodes:[
            { id:"1", label:"1", left:50, top:50}, 
            { id:"2", label:"TWO", left:250, top:250}
        ],
        edges:[
            { source:"1", target:"2" }
        ]    
    }
    
</script>

<div>
    <SurfaceComponent data={data}>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceComponent>
</div>

In the above example the only prop we set on the SurfaceComponent was data, meaning the component uses a default Absolute layout and a default Svelte component for rendering nodes. The SurfaceComponent, though, is highly configurable, mainly through its viewOptions and renderOptions props. Here's the same example from before but with a few more things configured:

<script>
    
  import { SurfaceComponent, 
   ControlsComponent, 
   MiniviewComponent } from '@jsplumbtoolkit/browser-ui-svelte'
        
  import { ForceDirectedLayout } from "@jsplumbtoolkit/browser-ui"
        
  import MyNodeComponent from "./MyNodeComponent.svelte"
            
  const data = {
    nodes:[
      { id:"1", label:"1", left:50, top:50}, 
      { id:"2", label:"TWO", left:250, top:250}
    ],
    edges:[
      { source:"1", target:"2" }
    ]    
  }
    
  const view = {
    nodes:{
      default:{
        component:MyNodeComponent
      }
    }
  }
    
  const renderOptions = {
    layout:{
      type:ForceDirectedLayout.type
    },
    grid:{
      size:{
        w:50, h:50
      }    
    }    
  }
    
</script>

<div>
    <SurfaceComponent data={data} renderOptions={renderOptions} viewOptions={view}>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceComponent>
</div>

Rendering Nodes and Groups​

At the core of your UI will be a SurfaceComponent, which provides the canvas onto which nodes, groups and edges are drawn. In the Quickstart section above we show a couple of examples of the SurfaceComponent 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 Svelte 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 the Flowchart Builder:

<script>

    import { anchorPositions } from "../constants"

	import { ShapeComponent } from "@jsplumbtoolkit/browser-ui-svelte"

	export let data;
	export let toolkit;
	export let surface;
	export let vertex;

	function removeNode() {
	    toolkit.removeNode(vertex)
    }

</script>

<div style="color:{data.textColor}" class="flowchart-object" data-jtk-target="true">

    <ShapeComponent surface={surface} vertex={vertex} data={data} showLabels="true" labelProperty="text"/>

    {#each anchorPositions as anchor}
		<div 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"></div>
    {/each}

	<div class="node-delete node-action delete" on:click={() => removeNode()}></div>
</div>

The contents of the component used to render each node/group are entirely up to you.

Mapping types to components​

The viewOptions prop is used to map node/group types to components, and to certain behaviours. For instance, this is the nodes section of the viewOptions for the flowchart builder starter app:


import { DEFAULT, newInstance } from "@jsplumbtoolkit/browser-ui"
import NodeComponent from "./NodeComponent.svelte"

const view = {
    nodes:{
      [DEFAULT]:{
        component:NodeComponent,
        // connections to/from this node can exist at any of the given anchorPositions
        anchorPositions,
        // node can support any number of connections.
        maxConnections: -1,
        events: {
          [EVENT_TAP]: ({toolkit, renderer, e, obj}) => {
            renderer.stopEditingPath()
            // 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 || e.shiftKey !== true) {
              toolkit.setSelection(obj)
            } else {
              // if multiple nodes already selected, or shift was pressed, add this node to the current selection.
              toolkit.addToSelection(obj)
            }
          }
        }
      }
    }
}

To map a node/group type to a component, you're expected to provide a component that takes four props:

<script>

  // the backing data for the vertex
  export let data
  
  // the vertex itself (a node/group)
  export let vertex
  
  // the underlying JsPlumb toolkit
  export let toolkit
  
  // the Surface that is rendering this vertex
  export let surface
  
</script>

Injecting props​

You can pass props in to the components used to render your vertices by configuring an injector in a the render options:

const renderOptions = {
  ...
  inject:(o:Node|Group) => {
  
    return {
      some:"props",
      number:23
    }    
  }
  ...
}

Prior to a node/group being rendered, the injector will be invoked with the mode object, and is expected to return a Record<string, any> of props that will be set on the component that is created.

Interface SurfaceComponentProps

NameTypeDescription
className?stringOptional class name to set on the surface component's container
data?anyOptional data to load after the component has been mounted.
injector?Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be Record<string, any>. It may be null.
modelOptions?JsPlumbToolkitOptionsOptions for the underlying Toolkit instance.
renderOptions?SvelteSurfaceRenderOptionsRender options for the Surface.
shapeLibrary?ShapeLibraryImplShape library to use to render SVG shapes. Optional.
toolkit?JsPlumbToolkitOptional JsPlumb Toolkit to use. If this is not provided, a Toolkit instance will be created.
url?stringOptional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
viewOptions?SvelteSurfaceViewOptionsView options for the Surface.

Providers​

JsPlumb Svelte - from 6.80.0 onwards - has an implementation of React's concept of Providers, and this offers a means for you to build apps with JsPlumb with far less boilerplate than was previously required. In the component discussions on this page you can see how MiniviewComponent and ControlsComponent can be nested inside a SurfaceComponent, and also how PaletteComponent was nested inside a SurfaceProvider - these are examples of providers and context in action.

SurfaceProvider​

This provider offers a means for you to share a surface located somewhere in your UI with other components that are not necessarily descendants of the surface component. A common use case is for Inspectors and Palettes - often you'll find they do not exist as children of the surface element but rather elsewhere in the DOM, for instance:

<script>
    import { SurfaceComponent, 
            ControlsComponent, 
            SurfaceProvider,
            PaletteComponent,
            MiniviewComponent } from '@jsplumbtoolkit/browser-ui-svelte'
</script>

<div class="row">
  <SurfaceProvider>
    <div class="col-9">
      <SurfaceComponent/>
    </div>
    <div class="col-3 d-flex flex-column">
      <PaletteComponent selector="li">
        <ul>
          <li data-jtk-type="foo" jtk-is-group="true">FOO</li>
          <li data-jtk-type="bar">BAR</li>
        </ul>
      </PaletteComponent>
      <InspectorComponent/>
    </div>
  </SurfaceProvider>
</div>

Here we see a UI using Bootstrap, consisting of a surface across 9 columns, and then a right hand pane containing a palette and an inspector. The SurfaceProvider is a common parent for all of the JsPlumb components.

Shape libraries​

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 shape libraries and shape-sets pages; here we provide an overview of the available Svelte integration with these modules.

Creating a shape library​

In Svelte, 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 SurfaceComponent:

<script>
    import { SurfaceComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    import { FLOWCHART_SHAPES, BASIC_SHAPES, ShapeLibraryImpl, DEFAULT } from "@jsplumbtoolkit/browser-ui"
    
    import NodeComponent from './NodeComponent.svelte'
    
    const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES, BASIC_SHAPES])
    
    const viewOptions = {
        nodes: {
            [DEFAULT]: {
                component: NodeComponent          
            }
        }
    }        
</script>

<div>   
  <SurfaceComponent viewOptions={viewOptions} shapeLibrary={shapeLibrary}/>
</div>

Rendering an SVG shape​

Shapes can be rendered with a ShapeComponent. This component needs to be given the data, vertex and surface props that are injected into the component used to render the vertex::

<script>
    import { ShapeComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    
    export let surface
    export let data
    export let vertex

</script>

<div class="my-class">
    <ShapeComponent data={data} vertex={vertex} surface={surface} />
</div>

Props​

NameTypeDescription
dataObjectDataBacking data for the vertex. Required. This is passed in as a prop to a component used to render a node/group, so you can pass it straight through from the parent to this component.
labelProperty?stringThe name of the property containing each vertex's label. Defaults to label.
labelStrokeWidthnumberStroke width to use on the text element rendering a label. Defaults to 1px.
showLabels?booleanWhether or not to show labels on each shape. Defaults to false.
surfaceSurfaceThe surface that is rendering the vertex. Required. Again, this is passed in to the parent component.
vertexVertex to render. Required. This is passed in as a prop to a component used to render a node/group, so you can pass it straight through from the parent to this component.

By default the shape component will render just the shape. If you want to add labels you can do so like this:

<script>
    import { ShapeComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    
    export let surface
    export let data
    export let vertex

</script>

<div class="my-class">
    <ShapeComponent showLabels={true} data={data} vertex={vertex} surface={surface} />
</div>

By default, JsPlumb will extract the label from a label property in your vertex data. You can provide the name of the property to use if you want to, by setting the labelProperty on your ShapeComponent:

<script>
    import { ShapeComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    
    export let surface
    export let data
    export let vertex

</script>

<div class="my-class">
    <ShapeComponent showLabels={true} 
        data={data} 
        vertex={vertex} 
        surface={surface}
        labelProperty="text" 
        />
</div>

Adding your own shapes​

To add your own shapes, you'll need to create a shape set. These are discussed on a separate page.

Dragging new nodes/groups​

Palettes offer a means for your users to drag new nodes/groups onto your canvas. The PaletteComponent is the main component you'll use; there's also a ShapeLibraryPaletteComponent which is a specialised version of the PaletteComponent that sources its draggable nodes from a ShapeLibrary.

HTML elements​

To configure your UI to drag and drop HTML elements onto your canvas, you'll use a PaletteComponent. Here's how to set one up:

<script>
    import { PaletteComponent, SurfaceComponent, SurfaceProvider } from '@jsplumbtoolkit/browser-ui-svelte';
    
    const dataGenerator = (el) => { 
        return { 
            w:120, 
            h:80, 
            type:el.getAttribute("data-jtk-type") 
        } 
    };
</script>
       
<div class="row">
  <SurfaceProvider>
    <div class="col-9">
      <SurfaceComponent/>
    </div>
    <div class="col-3">
        <PaletteComponent selector="li" dataGenerator={dataGenerator}>
            <ul>
                <li data-jtk-type="foo" jtk-is-group="true">FOO</li>
                <li data-jtk-type="bar">BAR</li>
            </ul>
        </PaletteComponent>
    </div>
  </SurfaceProvider>
</div>

The basic contract is that you declare a PaletteComponent in your template, and you provide - at the minimum - a selector, which tells the palette component how to find which children of the component are draggable. You then write out the children however you like - in this case we use a ul and an li for each draggable type.

The PaletteComponent needs to know which surface it is going to be attached to, and it does this by being context aware - in the code above we have a SurfaceProvider wrapping both the surface component and the palette component. When the surface component is instantiated, it populates the surface provider's context, and the palette component is notified of the surface to use.

In the code above we also see a dataGenerator prop: dataGenerator provides a means for the component to generate an initial data payload for some node that is being dragged. The list of available props is:

Interface PaletteComponentProps

NameTypeDescription
className?stringOptional class name to set on the component's root element.
dataGenerator?DataGeneratorFunctionFunction to invoke to get a payload for an element that is being dragged. Defaults to a function that extracts a payload from the element via any data-jtk-*** attributes that are present.
selector?stringCSS selector identifying draggable elements. Defaults to '[data-jtk-type]'

SVG shapes​

To drag and drop SVG shapes, you can use a ShapeLibraryPaletteComponent. This is a specialised version of the PaletteComponent which sources its draggable nodes from a ShapeLibrary.

<script>
  import { FLOWCHART_SHAPES, BASIC_SHAPES, ShapeLibraryImpl } from "@jsplumbtoolkit/browser-ui"
  import { ShapeLibraryPaletteComponent, SurfaceComponent, SurfaceProvider } from "@jsplumbtoolkit/browser-ui-svelte"
  
  const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES, BASIC_SHAPES])
  const dataGenerator = (el)=>  { 
      return { 
          w:120, 
          h:80, 
          type:el.getAttribute("data-jtk-type") 
      } 
  };
</script>

<div>
  <SurfaceProvider>
    <SurfaceComponent viewOptions={viewOptions} shapeLibrary={shapeLibrary}/>
    <ShapeLibraryPaletteComponent className="node-palette" 
                 dataGenerator={dataGenerator} initialSet={FLOWCHART_SHAPES.id}/>
  </SurfaceProvider>
</div>

As with PaletteComponent, the ShapeLibraryPaletteComponent is context aware and can locate the surface to use from a SurfaceProvider.

The full list of available props is:

NameTypeDescription
allowClickToAdd?booleanWhen in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
autoExitDrawMode?booleanDefaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the surface is set back to pan mode.
canvasStrokeWidth?numberStroke width to use for shapes dropped on canvas. Defaults to 2.
dataGenerator?DataGeneratorFunctionOptional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's type with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
dragSize?SizeOptional size to use for dragged elements.
fill?stringOptional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
iconSize?SizeOptional size to use for icons. Defaults to 150x100 pixels. If you provide this but not dragSize this size will also be used for an icon that is being dragged.
initialSet?stringOptional ID of the first set to show, hiding the others.
mode?DropManagerModeMode to operate in - 'drag' or 'tap'. Defaults to 'drag' (DROP_MANAGER_MODE_DRAG).
onVertexAdded?Optional callback to invoke when a new vertex has been added
outline?stringOptional color to use for outline of dragged elements. Should be in RGB format.
paletteStrokeWidth?numberStroke width to use for shapes in palette. Defaults to 1.
selectAfterDrop?booleanWhen true (which is the default), a newly dropped vertex will be set as the underlying Toolkit's selection.
showAllMessage?stringMessage 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.
showLabels?booleanOptionally show each icon's label underneath it

Component List​

This is a full list of the components that are available in JsPlumb Svelte. For each we provide a sample usage, which does not necessarily use all of the props available for the given component. We then provide the full list of available props.

SurfaceComponent​

The key UI component you'll use to render your UI.

<SurfaceComponent renderOptions={someRenderOptions} 
                    viewOptions={someViewOptions}/>

Interface SurfaceComponentProps

NameTypeDescription
className?stringOptional class name to set on the surface component's container
data?anyOptional data to load after the component has been mounted.
injector?Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be Record<string, any>. It may be null.
modelOptions?JsPlumbToolkitOptionsOptions for the underlying Toolkit instance.
renderOptions?SvelteSurfaceRenderOptionsRender options for the Surface.
shapeLibrary?ShapeLibraryImplShape library to use to render SVG shapes. Optional.
toolkit?JsPlumbToolkitOptional JsPlumb Toolkit to use. If this is not provided, a Toolkit instance will be created.
url?stringOptional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
viewOptions?SvelteSurfaceViewOptionsView options for the Surface.

MiniviewComponent​

Provides a Miniview of the contents of some surface. This component can be nested inside a SurfaceComponent, from which it will find the surface to attach to, or it can also exist as a descendant of a SurfaceProvider - the approach you choose will depend on the structure of your page.

Example​

<SurfaceComponent renderOptions={renderOptions}>
  <MiniviewComponent/>
</SurfaceComponent>

Interface MiniviewComponentProps

NameTypeDescription
activeTracking?booleanDefaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set to false, the miniview only updates after mouseup.
clickToCenter?booleanDefaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
collapsible?booleanDefaults to true, determines whether or not the miniview can be collapsed.
elementFilter?Optional filter for elements to display. Defaults to undefined - all elements displayed.
enableWheelZoom?booleanDefaults to true, Whether or not to enable the wheel zoom.
typeFunction?Optional function to use to derive a type for each rendered node/group. This is written onto the corresponding element as the value of the data-jtk-miniview-type attribute, and can be useful for styling.
visible?booleanDefaults to true. Whether or not the miniview is initially visible.
wheelReverse?booleanDefaults to false. Whether or not to reverse the zoom direction in response to a wheel event.
wheelSensitivity?numberOptional overide for how sensitive the wheel zoom should be.

ControlsComponent​

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. This component can be nested inside a SurfaceComponent, from which it will find the surface to attach to, or it can also exist as a descendant of a SurfaceProvider - the approach you choose will depend on the structure of your page.

Controls component - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Example​

<script>
  import { SurfaceComponent, ControlsComponent } from "@jsplumbtoolkit/browser-ui-svelte"

  const renderOptions = { ... }
</script>

<SurfaceComponent renderOptions={renderOptions}>
  <ControlsComponent/>
</SurfaceComponent>

Props​

Interface ControlsComponentProps

NameTypeDescription
buttons?ControlsComponentButtonsOptional extra buttons to add to the controls component.
clear?booleanWhether or not to show the clear button, defaults to true.
clearMessage?stringOptional message to show the user when prompting them to confirm they want to clear the dataset
orientation?Optional orientation for the controls. Defaults to 'row'.
undoRedo?booleanWhether or not to show undo/redo buttons, defaults to true
zoomToExtents?booleanWhether or not to show the zoom to extents button, defaults to true

ExportControlsComponent​

Provides a component that offers a set of buttons users can click to generate SVG, PNG or JPG output of the canvas.

Controls component - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Example​

<script>
    import { SurfaceComponent, ExportControlsComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    
    const renderOptions = { ... }
    
</script>

<SurfaceComponent renderOptions={renderOptions}>
  <ExportControlsComponent/>
</SurfaceComponent>

Props​

Interface ExportControlsComponentProps

NameTypeDescription
allowJpgExport?booleanDefaults to true.
allowPngExport?booleanDefaults to true.
allowSvgExport?booleanDefaults to true.
imageOptions?ImageExportUIOptionsOptions for image exports.
label?stringWhat to show in the label, if visible. Defaults to "Export:".
showLabel?booleanWhether or not to show a label in front of the buttons. Defaults to true.
svgOptions?SvgExportUIOptionsOptions for SVG exports.

PaletteComponent​

Provides a means to implement drag/drop of new Nodes/Groups onto your Surface. This component can be nested inside a SurfaceComponent, from which it will find the surface to attach to, or it can also exist as a descendant of a SurfaceProvider - the approach you choose will depend on the structure of your page.

Example​


import { PaletteComponent, SurfaceComponent, SurfaceProvider } from '@jsplumbtoolkit/browser-ui-svelte';

export default function MyApp() {
    
    const typeExtractor = (el) => { return el.getAttribute("data-jtk-type") };
    const dataGenerator = (type) => { return { w:120, h:80 }; };
       
    return <div className="row">
            <SurfaceProvider>
                <div className="col-9">
                  <SurfaceComponent/>
                </div>
                <div className="col-3">
                    <PaletteComponent selector="li" dataGenerator={dataGenerator} typeExtractor={typeExtractor}>
                        <ul>
                            <li data-jtk-type="foo" jtk-is-group="true">FOO</li>
                            <li data-jtk-type="bar">BAR</li>
                        </ul>
                    </PaletteComponent>
                </div>
            </SurfaceProvider>
            </div>    
}

Props​

Interface PaletteComponentProps

NameTypeDescription
className?stringOptional class name to set on the component's root element.
dataGenerator?DataGeneratorFunctionFunction to invoke to get a payload for an element that is being dragged. Defaults to a function that extracts a payload from the element via any data-jtk-*** attributes that are present.
selector?stringCSS selector identifying draggable elements. Defaults to '[data-jtk-type]'

ShapeLibraryPaletteComponent​

This is a specialised version of the PaletteComponent which sources its draggable nodes from a ShapeLibrary.

Example​

<script>

  import { FLOWCHART_SHAPES, BASIC_SHAPES, ShapeLibraryImpl } from "@jsplumbtoolkit/browser-ui"
  import { ShapeLibraryPaletteComponent, SurfaceComponent, SurfaceProvider } from "@jsplumbtoolkit/browser-ui-svelte"
  
  const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES, BASIC_SHAPES])
  const dataGenerator = (el) => { 
      return { 
          w:120, 
          h:80, 
          type:el.getAttribute("data-jtk-type") 
      } 
  };

</script>

<div>
  <SurfaceProvider>
    <SurfaceComponent viewOptions={viewOptions}/>
    <ShapeLibraryPaletteComponent className="node-palette" 
                        shapeLibrary={shapeLibrary} 
                        dataGenerator={dataGenerator} 
                        initialSet={FLOWCHART_SHAPES.id}/>
  </SurfaceProvider>    
</div>

Props​

Interface ShapeLibraryPaletteComponentProps

NameTypeDescription
allowClickToAdd?booleanWhen in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
autoExitDrawMode?booleanDefaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the surface is set back to pan mode.
canvasStrokeWidth?numberStroke width to use for shapes dropped on canvas. Defaults to 2.
dataGenerator?DataGeneratorFunctionOptional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's type with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
dragSize?SizeOptional size to use for dragged elements.
fill?stringOptional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
iconSize?SizeOptional size to use for icons. Defaults to 150x100 pixels. If you provide this but not dragSize this size will also be used for an icon that is being dragged.
initialSet?stringOptional ID of the first set to show, hiding the others.
mode?DropManagerModeMode to operate in - 'drag' or 'tap'. Defaults to 'drag' (DROP_MANAGER_MODE_DRAG).
onVertexAdded?Optional callback to invoke when a new vertex has been added
outline?stringOptional color to use for outline of dragged elements. Should be in RGB format.
paletteStrokeWidth?numberStroke width to use for shapes in palette. Defaults to 1.
selectAfterDrop?booleanWhen true (which is the default), a newly dropped vertex will be set as the underlying Toolkit's selection.
showAllMessage?stringMessage 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.
showLabels?booleanOptionally show each icon's label underneath it

ShapeComponent​

This component is used in conjunction with a ShapeLibrary to render SVG shapes.

Example​

<script>
    import { ShapeComponent } from "@jsplumbtoolkit/browser-ui-svelte"
    
    export let data
    export let vertex
    export let surface
    
</script>


<div class="my-class">
    <ShapeComponent data={data}
        vertex={vertex}
        surface={surface}
        showLabels={true} 
        labelProperty="text"/>
</div>

Props​

Interface ShapeComponentProps

NameTypeDescription
dataObjectDataBacking data for the vertex. Required. This is passed in as a prop to a component used to render a node/group, so you can pass it straight through from the parent to this component.
labelProperty?stringThe name of the property containing each vertex's label. Defaults to label.
labelStrokeWidthnumberStroke width to use on the text element rendering a label. Defaults to 1px.
showLabels?booleanWhether or not to show labels on each shape. Defaults to false.
surfaceSurfaceThe surface that is rendering the vertex. Required. Again, this is passed in to the parent component.
vertexVertex to render. Required. This is passed in as a prop to a component used to render a node/group, so you can pass it straight through from the parent to this component.