JsPlumb Toolkit

https://docs.jsplumbtoolkit.com/toolkit/7.x/
Admin
A JavaScript library for rapidly building diagramming and visual connectivity applications with...
Tokens:201,013
Snippets:2,215
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic JsPlumb Surface Setup

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/angular-integration

A quick start example demonstrating a basic JsPlumb Toolkit setup using the `jsplumb-surface` component to render nodes and an edge with default configurations.

```typescript
import {Component} from "@angular/core"

@Component({
    template:`<div style='width:100%;height:100%'>
        <jsplumb-surface [data]="data"/>
        <jsplumb-controls/>
        <jsplumb-miniview/>
        </div>`
})
export class DemoComponent {
      
    data = {
        nodes:[
            { id:"1", label:"1", left:50, top:50},
            { id:"2", label:"TWO", left:250, top:250}
        ],
        edges:[
            { source:"1", target:"2" }
        ]      
    }
              
}

```

--------------------------------

### Setup and Configuration

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/ui-states

Example of how to set up the UIStatesPlugin in a Vue component and define view options with custom states.

```APIDOC
## Setup and Configuration

### Description
This snippet shows how to integrate the `UIStatesPlugin` into a Vue application and define custom UI states within the `viewOptions`.

### Code
```javascript
<script>
import { defineComponent } from "vue"
import { UIStatesPlugin } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods: {
    renderOptions: function() {
      return {
        "plugins": [
          UIStatesPlugin.type
        ]
      }
    },
    viewOptions: function() {
      return {
        "states": {
          "mintyGreenState": {
            "default": {
              "cssClass": "mintyGreen",
              "paintStyle": {
                "strokeStyle": "#00FF00"
              },
              "endpointStyle": {
                "fillStyle": "#00EE00"
              }
            }
          }
        }
      }
    }
  }
})
</script>

<template>
  <SurfaceComponent :renderOptions="this.renderOptions()" :viewOptions="this.viewOptions()" />
</template>
```

### Explanation
The `renderOptions` function includes `UIStatesPlugin.type` in the `plugins` array to enable the plugin. The `viewOptions` function defines a state named `mintyGreenState`. When this state is active, elements of type `default` will receive the `mintyGreen` CSS class, and edges will have a specific `paintStyle`. Ports will also have their `endpointStyle` updated.
```

--------------------------------

### Install JsPlumb Toolkit (Vue 3)

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/installation

Install the JsPlumb Toolkit for Vue 3 using NPM after connecting to the private NPM repository.

```bash
npm i @jsplumbtoolkit/browser-ui-vue3

```

--------------------------------

### Hierarchy Layout with Alignment: 'start'

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-hierarchy

Configure the Hierarchy layout to align child elements with 'start' when the placement strategy is 'parent'. This example uses Vue.

```javascript
import { defineComponent } from "vue"
import { HierarchyLayout } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods:{
   renderOptions:function() {
      return {
  "layout": {
    "type": HierarchyLayout.type,
    "options": {
      "alignment": "start"
    }
  }
}
    }
  }
})

```

```html
<template>
  <SurfaceComponent :renderOptions="this.renderOptions()" />
</template>

```

--------------------------------

### Exporting an Image (Vue Example)

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/svg-png-jpg-export

Example of how to export an image using the ImageExporter in a Vue.js application. This demonstrates initializing the exporter and calling the export method.

```APIDOC
## Exporting an Image

### Description
This example shows how to export an image from a JSPlumb Toolkit Surface component within a Vue.js application.

### Method
This is a conceptual example demonstrating the usage pattern. The actual implementation would involve calling methods on the `ImageExporter` instance.

### Usage
1. Ensure you have a `SurfaceComponent` in your template.
2. Create a method (e.g., `exportImage`) that initializes `ImageExporter` with the surface.
3. Call the `export` method on the exporter, providing options and a callback function.

### Code Example (Vue.js)
```javascript
import { defineComponent } from "vue"
import { ImageExporter } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods: {
    exportImage: function() {
      const exporter = new ImageExporter(this.$refs.surfaceComponent.surface)
      const options = { /* ImageExportOptions */ }
      exporter.export(options, onready: (r) => {
        // Handle the exported image data (r.url, r.contentType, etc.)
        console.log("Image exported successfully:", r)
      })
    }
  }
})
```

### Template Example (Vue.js)
```html
<template>
  <div>
    <SurfaceComponent ref="surfaceComponent"/>
    <button @click="this.exportImage()">Export Image</button>
  </div>
</template>
```
```

--------------------------------

### Setup EdgePathEditor (Pre 6.7.0)

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/editing-paths

Before version 6.7.0, instantiate an EdgePathEditor and call its start/stopEditing methods to control path editing.

```javascript
import { EdgePathEditor } from "@jsplumbtoolkit/browser-ui"
  
const surface = someToolkit.render(...)
  
const pathEditor = new EdgePathEditor(surface)
  
pathEditor.startEditing()
...
pathEditor.stopEditing()

```

--------------------------------

### Basic SurfaceComponent Usage

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/react-integration

Demonstrates the basic setup of SurfaceComponent with default layout and rendering. Import necessary components and provide initial data.

```javascript
import React from "react"

import {
        MiniviewComponent,
        SurfaceComponent,
        ControlsComponent
}    
from '@jsplumbtoolkit/browser-ui-react';

export default function DemoComponent({someProps}) {
      
    const data = {
        nodes:[
            { id:"1", label:"1", left:50, top:50},
            { id:"2", label:"TWO", left:250, top:250}
        ],
        edges:[
            { source:"1", target:"2" }
        ]
    }
      
  return <div style={{width:"100%",height:"100%"}}>
    <SurfaceComponent data={data}>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceComponent>      
    </div>
          
}

```

--------------------------------

### Retrieving the UI States Plugin Instance

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/ui-states

Demonstrates how to get an instance of the UI States plugin from a Surface object.

```APIDOC
## Retrieving the Plugin Instance

To manipulate UI states, you first need to get a reference to the plugin instance.

### Example (JavaScript)
```javascript
var plugin = surface.getPlugin("ui-states")
```

### Example (TypeScript)
```typescript
import { UiStatesPlugin } from "@jsplumbtoolkit/browser-ui"

const plugin = surface.getPlugin<UiStatesPlugin>(UiStatesPlugin.type)
```
```

--------------------------------

### Install Dependencies with npm

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/evaluators

Use these npm commands to install dependencies for JsPlumb Toolkit, either for all integrations or specific ones like vanilla JS, Angular, React, Vue3, or Svelte.

```bash
npm run install
```

```bash
npm run install:vanilla
```

```bash
npm run install:angular
```

```bash
npm run install:react
```

```bash
npm run install:vue3
```

```bash
npm run install:svelte
```

--------------------------------

### Example Node Data

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/model/data-model

An example of data structure for adding a new node, including column definitions for a data table.

```javascript
toolkit.addNode({
  id:"place",
  name:"Place",
  columns:[
    { id:"id", name:"Id", primaryKey:true, datatype:"integer" },
    { id:"name", name:"Name", datatype:"varchar" },
    { id:"lat", name:"Latitude", datatype:"float" },
    { id:"lng", name:"Longitude", datatype:"float" }
  ]
})
```

--------------------------------

### Specify Root Nodes for Hierarchical Layout

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-hierarchical

Use `getRootNodes` to define which nodes serve as the starting points for the hierarchical layout. This example selects nodes with the type 'ROOT'.

```javascript
toolkit.render(someElement, {
  layout:{
    type:"Hierarchical",
    options:{
        getRootNodes:(toolkit:JsPlumbToolkit) => {
          return toolkit.filter((o:Base) => {
              return (isNode(o) && o.type === "ROOT") 
          }).getAll()
      }
    }
  }
})
```

--------------------------------

### Basic Grid Layout Configuration

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-grid

Configure the basic GridLayout for arranging elements. This snippet shows the default setup.

```javascript
import { defineComponent } from "vue"
import { GridLayout } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods:{
   renderOptions:function() {
      return {
  "layout": {
    "type": GridLayout.type
  }
}
    }
  }
})
</script>
<template>
  <SurfaceComponent :renderOptions="this.renderOptions()" />
</template>
```

--------------------------------

### Graph JSON Syntax Example: Groups, Nodes, and Edges

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/loading-and-saving-data

An extended Graph JSON example that includes group definitions. Nodes can be assigned to groups using the `group` property.

```json
{
  "groups":[
    { "id":"group1", name:"Group One" },
    { "id":"group2", name:"Group Two" }
  ],
  "nodes": [
    { id:"1", name:"foo", group:"group1"  },
    { id:"2", name:"baz"  },
    { id:"3", name:"foo"  },
    { id:"4", name:"ding", group:"group2" },
    { id:"5", name:"dong", group:"group2" },
    { id:"6", name:"ping" },
    { id:"7", name:"pong" }
  ],
  "edges":[
    { source:"1", target:"2" },
    { source:"1", target:"3" },
    { source:"2", target:"4" },
    { source:"2", target:"5" },
    { source:"3", target:"6" },
    { source:"3", target:"7" }
  ]
}
```

--------------------------------

### Basic SurfaceComponent Setup in Vue 3

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/vue3-integration

Render nodes and edges using the SurfaceComponent with default layout and node rendering.

```vue
<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>

```

--------------------------------

### Reject Connection Start by Type

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/model/data-model

Use `beforeStartConnect` to reject the initiation of a connection drag if the edge type is 'not-connectable'. This prevents certain types of connections from starting.

```typescript
import { Component } from "@angular/core"  
@Component({  
  template:"<jsplumb-surface  [toolkitParams]='modelOptions'></jsplumb-surface>"
})
export class MyComponent {
  modelOptions = {
  "beforeStartConnect": (source: Vertex, type:string) => {
        return type !== 'not-connectable'  
    }
}
}
```

--------------------------------

### Template for Node with List Iteration

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/templating

Example template demonstrating iteration over a data member to render a list of items.

```html
<div class="someNode">
    <span>{{title}}</span>
    <ul>      
        <r-each in="someDataMember">
            <li>{{id}}</li>
        </r-each>
    </ul>
</div>
```

--------------------------------

### Wildcard States

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/ui-states

Example demonstrating the use of wildcard '*' in state definitions to apply styles to all object types.

```APIDOC
## Wildcard states

### Description
This example shows how to use a wildcard (`*`) in state definitions to apply styles to all object types (nodes, groups, edges, ports) by default, with specific overrides for certain types.

### Code
```json
{
  "states":{
    "mintyGreenState":{
      "*":{
        "cssClass":"mintyGreen"
      },
      "aSpecificType":{
        "cssClass":"FOO"
      }
    }
  }
}
```

### Explanation
When `mintyGreenState` is activated, all objects will receive the `mintyGreen` CSS class due to the wildcard `"*"`. However, objects specifically of type `"aSpecificType"` will additionally receive the `"FOO"` CSS class.
```

--------------------------------

### Basic Surface Component Setup in Svelte

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/svelte-integration

Integrate JsPlumb's Surface component in Svelte with default layout and node rendering.

```svelte
<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>

```

--------------------------------

### Tiled Background URL Pattern

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/backgrounds

Example URL pattern for a tiled background, using placeholders for zoom, x, and y coordinates. Tiles are zero-indexed.

```plaintext
tiles/0/tile_0_0.png
```

--------------------------------

### Basic React App with Surface and Palette

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/react-integration

Set up a React application with JsPlumb's SurfaceComponent and PaletteComponent. This example demonstrates how to provide context with SurfaceProvider and configure the PaletteComponent with custom type and data extractors.

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

export default function MyApp() {
      
    const typeExtractor = (el) => { return el.getAttribute("data-jtk-type") };
    const dataGenerator = (el) => { 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>      
}
```

--------------------------------

### Reject Detach with beforeStartDetach

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/edges/dragging-edges

Use the `beforeStartDetach` interceptor to prevent an edge detach from starting. Return `false` to abort. This example rejects detaching if the source vertex has `doNotDetachEdges:true` in its data.

```javascript
<script>
import { defineComponent } from "vue"
export default defineComponent({
  methods:{
   modelOptions:function() {
      return {
  "beforeDetach": (source: Vertex, edge: Edge) => {
        return source.data.doNotDetachEdges !== true
    }
}
    }
  }
})
</script>
<template>
  <SurfaceComponent :viewOptions="this.modelOptions()" />
</template>

```

--------------------------------

### Vue: Render Shape with Shape Library

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/nodes-and-groups/shape-libraries

In JsPlumb Vue, declare a `shapeLibrary` prop and inject it into each node via the view options. This example shows the basic setup for rendering a shape.

```vue
<script>
  
    import { BaseNodeComponent } from '@jsplumbtoolkit/browser-ui-vue3'
  
    export default {
        mixins:[BaseNodeComponent],
        props:["shapeLibrary"]
    }
  
</script>
<template>
    <div :style="{color:obj.textColor}" class="flowchart-object" data-jtk-target="true">
        <span>{{obj.text}}</span>
        <ShapeComponent :obj="obj" :shape-library="shapeLibrary" :showLabels="true"></ShapeComponent>
    </div>
</template>
```

--------------------------------

### Initialize Dialogs with Global Lifecycle Callbacks

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/dialogs

Configures global lifecycle callbacks for all dialogs using the 'initialize' method. This example sets up 'onOpen' and 'onClose' callbacks.

```javascript
dialogs.initialize({
  selector:".myDialog",
  globals:{
    onOpen:() => {
      console.log("a dialog was opened")
    },
    onClose:() => {
      console.log("a dialog was closed.")
    }
  }
})
```

--------------------------------

### Configure Vertex Drawing Plugin with Node Type

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/vertex-drawing

Configure the Vertex Drawing Plugin to draw nodes instead of groups by supplying a `nodeType` parameter. This example shows the setup in a Vue.js component.

```javascript
import { defineComponent } from "vue"
import { VertexDrawingPlugin } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods:{
   renderOptions:function() {
      return {
  "useModelForSizes": true,
  "plugins": [
    {
      "type": VertexDrawingPlugin.type,
      "options": {
        "nodeType": "userDrawn"
      }
    }
  ]
}
    }
  }
})
</script>
<template>
  <SurfaceComponent :renderOptions="this.renderOptions()" />
</template>
```

--------------------------------

### Initializing the Search Index

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/search

Demonstrates how to initialize the search index with a JsPlumb Toolkit instance. The index can be configured with various options.

```APIDOC
## Setup

Using the search package is straightforward:

```javascript
// Assuming 'toolkit' is your JsPlumb Toolkit instance
// and 'loadSurface' is a function to load the surface component

import { Index } from '@jsplumb-toolkit/core'

loadSurface((s) => {
  const index = new Index(toolkit, {
    caseSensitive: false,       // Optional: default is false
    exclusions: ['someField'],  // Optional: fields to omit from indexing
    fields: ['id', 'foo'],      // Optional: fields to specifically index
    limit: 20                   // Optional: limit search results to 20
  });
});
```
```

--------------------------------

### Initialize Basic Shape Library

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/nodes-and-groups/shape-libraries

Instantiate a `ShapeLibraryImpl` using the predefined `BASIC_SHAPES`. This provides a fundamental set of basic shapes for your diagrams.

```javascript
import { BASIC_SHAPES, ShapeLibraryImpl } from "@jsplumbtoolkit/browser-ui"

const myLibrary = new ShapeLibraryImpl(BASIC_SHAPES)
```

--------------------------------

### Create a Custom SVG Overlay for Endpoints

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/overlays

This example shows how to create a custom overlay that embeds an SVG element. It's designed to be used at the start (location 0) or end (location 1) of an edge. The 'rotating-custom-overlay' class is used for styling.

```javascript
overlays:[
    {
         type:"Custom",
         options:{
             create:function(component) {
                const d = document.createElement("div")
                d.className="rotating-custom-overlay"
                d.style.width = "16px"
                d.style.height = "20px"
                d.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 16 21">
                                   <rect x="0" y="0" fill="red" width="10" height="21"/>
                                   <rect x="10" y="7" fill="red" width="6" height="7"/>
                               </svg>`
                return d
             },
             location:1
         }
    },
    ...
]
```

--------------------------------

### Using Custom Overlay Factory

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/overlays

This snippet shows how to use the 'customOverlayFactory' to define overlays at the start (0) and end (1) of connections. This approach is useful for creating reusable custom overlay configurations.

```javascript
overlays:[
    customOverlayFactory(0),
    customOverlayFactory(1)
]
```

--------------------------------

### Node Data Object Example

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/angular-integration

Example of a data object for a node, demonstrating how properties like 'title' can be injected into the Angular component.

```json
{
  "id": "1",
  "title": "My First Node"
}

```

--------------------------------

### Reject Connection Start with beforeStartConnect

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/edges/dragging-edges

Use the `beforeStartConnect` interceptor to prevent a connection drag from starting. Return `false` to reject the action.

```javascript
<script>
import { defineComponent } from "vue"
export default defineComponent({
  methods:{
   modelOptions:function() {
      return {
  "beforeStartConnect": (source: Vertex, type:string) => {
        return type !== 'not-connectable'
    }
}
    }
  }
})
</script>
<template>
  <SurfaceComponent :viewOptions="this.modelOptions()" />
</template>

```

--------------------------------

### Initialize JsPlumb Toolkit with UMD Bundle

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/packages

This example shows how to initialize JsPlumb Toolkit using the UMD bundle in an ES5 application. The `jsPlumbToolkit.ready` function ensures the DOM is ready before instantiation.

```html
<html>
    <body>
        <div id="container"></div>
        <script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script>
        <script>
            jsPlumbToolkit.ready(function() {
                var instance = jsPlumbToolkit.newInstance()
                var surface = instance.render(document.getElementById("container"), {...})
            })
        </script>
    </body>
</html>
```

--------------------------------

### Angular Node Factory Example

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/model/data-model

Example of defining a node factory within an Angular component to customize new nodes with specific data.

```typescript
import { Component } from "@angular/core"  
@Component({  
  template:"<jsplumb-surface  [toolkitParams]='modelOptions'></jsplumb-surface>"  
})  
export class MyComponent {  
  modelOptions = {  
  "nodeFactory": (type, data, callback, evt, native) => {  
        const newNode = callback({  
            someKey:'aValue',  
            someArray:[ 1, 2, 3 ]  
        });  
    }  
}  
}  

```

--------------------------------

### Shallow vs. Deep Copy with BrowserUIClipboard

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/copy-paste

Initializes the toolkit, renderer, and clipboard. Loads data with nested groups and a node. The clipboard is populated with the root group. Canvas click triggers a shallow paste, while a context menu click triggers a deep paste.

```javascript
let clipboard
const toolkit = newInstance()
const surface = toolkit.render(someElement, {
    "layout":{
        "type":"Absolute"
    },
    "templateMacros":{
        id:(d) => d.id.substring(0, 5) 
    },
    "view":{
        "nodes":{
            "default":{
                "template":'<div><h5>Node {{#id}}</h5></div>'
            }
        },
        "groups":{
            "default":{
                "template":'<div><h5>Group {{#id}}</h5></div>',
                "autoSize":true
            }
        }
    },
     "events":{
         canvasClick:(surface, event) => {
             clipboard.paste({event, shallow:true})
             surface.zoomToFit()
         },
         contextmenu:(surface, event) => {
             clipboard.paste({event})
             surface.zoomToFit()
         }
     },
    "defaults":{
        anchor:"Continuous"
    }
})

clipboard = new BrowserUIClipboard(surface)

toolkit.load({
    data:{
        "groups":[
            {id:"g1", left:50, top:50 },
            {id:"g2", left:50, top:50, group:"g1" },
            {id:"g3", left:50, top:50, group:"g2" }
        ],
        "nodes":[
            { id:"1", left:50, top:50, group:"g3" }
        ]
    }
}, onload:() => {
    clipboard.copy([
        toolkit.getGroup("g1")
    ])
})
```

--------------------------------

### JsPlumb Toolkit Test Harness Setup

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/unit-testing

This code sets up utility functions for creating a JsPlumb Toolkit test harness within a Cypress testing environment. It includes methods to retrieve the JsPlumb context from a DOM element and to initialize the test harness, which is then used to interact with the JsPlumb surface and its components during tests. Ensure the DOM element with class '.jtk-surface' is present.

```javascript
import {jsPlumbToolkitTestHarness} from "@jsplumbtoolkit/browser-ui"
import CanvasComponent from "./canvas-component";
/* eslint-disable */
// Disable ESLint to prevent failing linting inside the Next.js repo.
// If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
// https://github.com/cypress-io/eslint-plugin-cypress

function getJsPlumbContext(cypressEl) {
    for (let k in cypressEl) {
        if (k.startsWith("__reactFiber")) {
            return cypressEl[k].return.ref.current
        }
    }
}

function createTestHarness(cb) {
    cy.get(".jtk-surface").then(s => {
        const f = getJsPlumbContext(s[0])
        if (f != null) {
            cb(new jsPlumbToolkitTestHarness(f.toolkit, f.surface))
        } else {
            throw new Error("Cannot create JsPlumb test harness")
        }
    })
}


// Cypress Component Test
describe("<CanvasComponent />", () => {
    it("should render and display expected content ", () => {
        // Mount the React component for the canvas
        cy.mount(<CanvasComponent />);

        createTestHarness((testHarness) => {

            cy.get(".jtk-node").should("have.length", 2)
            cy.get(".jtk-surface-selected-element").should("have.length", 0)
            cy.get(".jtk-connector").should("have.length", 0)

            cy.wrap(testHarness.toolkit.getNodes()).should("have.length", 2)
            cy.wrap(testHarness.toolkit.getAllEdges()).should("have.length", 0)


            cy.then(n => {

                const node1 = testHarness.toolkit.getNode("1")
                cy.wrap(node1.data.left).should("equal", 50)
                cy.wrap(node1.data.top).should("equal", 50)
                //
                testHarness.tapOnNode("1")
                cy.then(n => {

                    cy.get(".jtk-surface-selected-element").should("have.length", 1)

                    testHarness.dragConnection(["1", ".connect"], "2")
                    cy.then(() => {

                        cy.get(".jtk-connector").should("have.length", 1)
                        cy.wrap(testHarness.toolkit.getAllEdges()).should("have.length", 1)

                        testHarness.dragVertexBy("1", 250, 300)
                        cy.then(() => {
                            cy.wrap(node1.data.left).should("equal", 300)
                            cy.wrap(node1.data.top).should("equal", 350)
                        })

                    })
                })
            })



        })
    });
});

// Prevent TypeScript from reading file as legacy script
export {};

```

--------------------------------

### Initialize BrowserUIClipboard in Vue

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/copy-paste

Instantiate BrowserUIClipboard with a Surface object. Ensure the SurfaceComponent is mounted and its toolkit is accessible.

```javascript
<script>
import { defineComponent } from "vue"
import { BrowserUIClipboard } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods:{
  },
  mounted() {
    const toolkit = this.$refs.surfaceComponent.toolkit
    loadSurface((s) => {
     const clipboard = new BrowserUIClipboard(surface)
    })
})
</script>
<template>
  <SurfaceComponent ref="surfaceComponent"/>
</template>

```

--------------------------------

### Setup Drawing Tools Plugin in Vue

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/drawing-tools

Basic setup for the Drawing Tools plugin in a Vue application. This configuration enables the plugin with its default behaviors.

```javascript
import { defineComponent } from "vue"
import { DrawingToolsPlugin } from "@jsplumbtoolkit/browser-ui"

export default defineComponent({
  methods:{
   renderOptions:function() {
      return {
  "plugins": [
    DrawingToolsPlugin.type
  ]
}
    }
  }
})
</script>
<template>
  <SurfaceComponent :renderOptions="this.renderOptions()" />
</template>
```

--------------------------------

### Example: Load Data, Copy All, and Paste on Canvas Click

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/copy-paste

Loads initial data, copies all nodes and edges to the clipboard, and then pastes the clipboard's contents when the canvas is clicked. This showcases copying multiple elements and triggering paste via an event.

```javascript
let clipboard
const toolkit = newInstance()
const surface = toolkit.render(someElement, {
    "layout":{
        "type":"Absolute"
    },
    "events":{
        canvasClick:(surface, event) => {
            clipboard.paste({event})
            surface.zoomToFit()
        }
    },
    "defaults":{
        anchor:"Continuous"
    }
})

clipboard = new BrowserUIClipboard(surface)

toolkit.load({
    data:{
        "nodes":[
            { id:"1", left:50, top:50 },
            { id:"2", left:150, top:150 },
            { id:"3", left:250, top:30 }
        ],
        "edges":[
            { source:"1", target:"2", data:{ id:"edge1" } },
            { source:"1", target:"3", data:{ id:"edge2" } }
        ]
    }
}, onload:() => {
    clipboard.copy([
        toolkit.getNode("1"),
        toolkit.getNode("2"),
        toolkit.getNode("3"),
        toolkit.getEdge("edge1"),
        toolkit.getEdge("edge2")
    ])
})
```

--------------------------------

### Configure Decorator Options in JavaScript

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/decorators

This example demonstrates how to pass configuration options to a decorator when initializing the JsPlumb Toolkit instance. Options are provided within the decorators array.

```javascript
var renderer = myToolkitInstance.render(someElement, {
    ...
    layout:{
        type:"Hierarchy"
    },
     decorators:[
         { type:"Example", options:{ padding:20 }}
     ]
});

```

--------------------------------

### Load Graph Data

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Initializes the Toolkit with graph data, including nodes and edges with associated costs.

```javascript
toolkit.load({\n    data:{\n      nodes:[ { id:"1" }, { id:"2" }, { id:"3" }, { id:"4" }, { id:"5" } ],\n      edges:[\n        { source:"1", target:"2", cost:10 },\n        { source:"2", target:"3", cost:5 },\n        { source:"3", target:"4", cost:10 },\n        { source:"3", target:"5", cost:10 }\n      ]\n    }\n});
```

--------------------------------

### Simulate User Activity with Test Harness

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/unit-testing

Use jsPlumbToolkitTestHarness to simulate dragging connections, moving nodes, and tapping on elements. This requires initializing the toolkit and surface first.

```javascript
import { jsPlumbToolkitTestHarness, newInstance } from "@jsplumbtoolkit/browser-ui"  
  
const toolkit = newInstance()  
const surface = toolkit.render(...)  
  
const tks = new jsPlumbToolkitTestHarness(toolkit, surface)  
tks.dragConnection(["1", ".connect"], "2")  
tks.dragVertexBy("1", 250, 0)  
tks.tapOnNode("2")  
```

--------------------------------

### SurfaceDrop Mixin Example for Vue 3

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/vue3-integration

Implement drag-and-drop functionality onto edges, nodes, and the canvas using the SurfaceDrop mixin. This example shows a component that utilizes the mixin for dropping elements.

```html
<template>
    <div class="sidebar node-palette">
        <div class="sidebar-item" :data-jtk-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>
```

--------------------------------

### Get Closeness

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the closeness of a vertex in the graph.

```APIDOC
## getCloseness

### Description
Calculates the closeness of a vertex, which is the inverse of its farness.

### Method
`toolkit.getGraph().getCloseness(nodeId)`

### Parameters
#### Path Parameters
- **nodeId** (string) - Required - The ID of the node for which to calculate closeness.

### Response
#### Success Response (number)
- Returns the closeness value of the node.
```

--------------------------------

### Get Farness

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the farness of a vertex in the graph.

```APIDOC
## getFarness

### Description
Calculates the farness of a vertex, which is the sum of its distances to all other vertices, normalized by the number of edges.

### Method
`toolkit.getGraph().getFarness(nodeId)`

### Parameters
#### Path Parameters
- **nodeId** (string) - Required - The ID of the node for which to calculate farness.

### Response
#### Success Response (number | Infinity)
- Returns the farness value of the node, which can be Infinity if not all nodes are reachable.
```

--------------------------------

### Build JsPlumb Toolkit Apps/Demos with npm

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/evaluators

Commands to build JsPlumb Toolkit applications and feature demonstrations. You can build all of them or individual ones for specific library integrations.

```bash
npm run build:vanilla
npm run build:angular
npm run build:react
npm run build:vue3
npm run build:svelte
```

```bash
cd apps/flowchart-builder/vanilla
npm run build
```

--------------------------------

### Get Outdegree Centrality

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the outdegree centrality of a given node.

```APIDOC
## getOutdegreeCentrality

### Description
Calculates the outdegree centrality of a node, which is the number of outgoing edges divided by the total number of edges.

### Method
`toolkit.getGraph().getOutdegreeCentrality(nodeId)`

### Parameters
#### Path Parameters
- **nodeId** (string) - Required - The ID of the node for which to calculate centrality.

### Response
#### Success Response (number)
- Returns the outdegree centrality of the node.
```

--------------------------------

### Get Indegree Centrality

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the indegree centrality of a given node.

```APIDOC
## getIndegreeCentrality

### Description
Calculates the indegree centrality of a node, which is the number of incoming edges divided by the total number of edges.

### Method
`toolkit.getGraph().getIndegreeCentrality(nodeId)`

### Parameters
#### Path Parameters
- **nodeId** (string) - Required - The ID of the node for which to calculate centrality.

### Response
#### Success Response (number)
- Returns the indegree centrality of the node.
```

--------------------------------

### Specify Node Positions for Force Directed Layout

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-force-directed

Example of how node data can include 'left' and 'top' properties to specify initial positions, which the Force Directed Layout will honor by default.

```json
nodes:[
  { id:"1", left:50, top:150, label:"One" },
  { id:"2", left:150, top:250, label:"Two" }
]

```

--------------------------------

### Configure Background Grid Options

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/starter-apps/flowchart-builder

Sets the configuration options for the background grid plugin, controlling its appearance and behavior.

```javascript
{
    dragOnGrid:true,
    showGrid:true,
    showBorder:false,
    autoShrink:true,
    minWidth:10000,
    maxWidth:null,
    minHeight:10000,
    maxHeight:null,
    showTickMarks:false,
    type:GeneratedGridBackground.type
}
```

--------------------------------

### Get Degree Centrality

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the degree centrality of a given node.

```APIDOC
## getDegreeCentrality

### Description
Calculates the degree centrality of a node, which is the sum of incoming and outgoing edges divided by the total number of edges.

### Method
`toolkit.getGraph().getDegreeCentrality(nodeId)`

### Parameters
#### Path Parameters
- **nodeId** (string) - Required - The ID of the node for which to calculate centrality.

### Response
#### Success Response (number)
- Returns the degree centrality of the node.
```

--------------------------------

### Get Path

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Finds the shortest path between two nodes in the graph.

```APIDOC
## getPath

### Description
Finds the shortest path between two nodes in the graph.

### Method
`toolkit.getPath({source: nodeA, target: nodeB})`

### Parameters
#### Request Body
- **source** (string) - Required - The ID of the source node.
- **target** (string) - Required - The ID of the target node.

### Response
#### Success Response (Path object)
- Returns a Path object containing details about the shortest path.
```

```APIDOC
## findPath

### Description
Finds the shortest path between two nodes in the graph and returns a simplified object.

### Method
`toolkit.getGraph().findPath(nodeA, nodeB)`

### Parameters
#### Path Parameters
- **nodeA** (string) - Required - The ID of the source node.
- **nodeB** (string) - Required - The ID of the target node.

### Response
#### Success Response (Object)
- Returns an object with path details including `dist`, `previous`, `edges`, `path`, and `pathDistance`.
```

--------------------------------

### Render Edge with Custom Styles (Vue)

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/edges/styling-edges

This example demonstrates how to load data for nodes and edges with custom styling properties like color, lineWidth, outlineColor, and outlineWidth in a Vue.js application. Ensure the `simpleEdgeStyles` option is enabled in your render options.

```javascript
<script>
import { defineComponent } from "vue"
export default defineComponent({
  methods:{
   renderOptions:function() {
      return {
  "simpleEdgeStyles": true
}
    }
  },
  mounted() {
    const toolkit = this.$refs.surfaceComponent.toolkit
    loadSurface((s) => {
     toolkit.load({
       type:"json",
       data:{
           nodes:[
               { id:"1" }, { id:"2" }
           ],
           edges:[
               {
                   source:"1",
                   target:"2",
                   data:{
                       color:"cadetblue",
                       lineWidth:3,
                       outlineColor:"pink",
                       outlineWidth:5
                   }
               }
           ]
       }
     })
    })
})
</script>
<template>
  <SurfaceComponent :renderOptions="this.renderOptions()"  ref="surfaceComponent"/>
</template>

```

--------------------------------

### Hierarchy Layout Orientation (Horizontal)

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-hierarchy

Example demonstrating the default horizontal orientation of the Hierarchy Layout.

```APIDOC
## Hierarchy layout (Horizontal Orientation)

### Description

This example shows the default horizontal orientation of the Hierarchy layout, where child vertices are laid out in rows.

### Method

This is configured within the `renderOptions` method of a Vue component.

### Endpoint

N/A (Client-side configuration)

### Request Body

```json
{
  "layout": {
    "type": "HierarchyLayout"
  }
}
```

### Response

N/A (Client-side configuration)
```

--------------------------------

### Initialize Shape Library

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/starter-apps/flowchart-builder

Import and initialize the ShapeLibraryImpl with flowchart shapes for use in the application.

```javascript
import { FLOWCHART_SHAPES, ShapeLibraryImpl, ShapeLibraryPalette } from "@jsplumbtoolkit/browser-ui"  
  
const shapeLibrary = new ShapeLibraryImpl([FLOWCHART_SHAPES]);  
```

--------------------------------

### Disabled Target DOM Element

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/plugins/active-filtering

This is an example of a DOM element for a node that has been disabled by the Active Filtering plugin.

```html
<div data-jtk-enabled="false">{{id}}</div>

```

--------------------------------

### Install Vue 3 Integration

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/vue3-integration

Add the Vue 3 integration package to your project's dependencies.

```json
"dependencies":{
  "@jsplumbtoolkit/browser-ui-vue3":"7.3.7"
}

```

--------------------------------

### JsPlumb Toolkit instance with group factory

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/model/managing-data

Example of initializing a JsPlumb Toolkit instance with a configured `groupFactory`. This factory handles the creation of new groups, potentially fetching data from an external source.

```javascript
import { newInstance } from "@jsplumbtoolkit/browser-ui"  
  
const toolkit = newInstance({
    groupFactory:function(type, data, callback, evt, native) {
        fetch({type:"post", body:{type}}).then(v => callback(v))
    }
};
```

--------------------------------

### Get Distance

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/graph

Calculates the distance between two nodes in the graph. Returns undefined if no direct path exists.

```APIDOC
## getDistance

### Description
Calculates the distance between two nodes in the graph.

### Method
`toolkit.getGraph().getDistance(nodeA, nodeB)`

### Parameters
#### Path Parameters
- **nodeA** (string) - Required - The ID of the source node.
- **nodeB** (string) - Required - The ID of the target node.

### Response
#### Success Response (number | undefined)
- Returns the distance between nodeA and nodeB, or undefined if no path exists.
```

--------------------------------

### Configurable SurfaceComponent

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/react-integration

Shows how to configure SurfaceComponent with custom node rendering (viewOptions) and layout (renderOptions).

```javascript
import React from "react"

import {
        MiniviewComponent,
        SurfaceComponent,
        ControlsComponent
}    
from '@jsplumbtoolkit/browser-ui-react';

export default function DemoComponent({someProps}) {
      
    const data = {
        nodes:[
            { id:"1", label:"1", left:50, top:50},
            { id:"2", label:"TWO", left:250, top:250}
        ],
        edges:[
            { source:"1", target:"2" }
        ]
    }
      
    const viewOptions = {
        nodes:{
            default:{
                jsx:(ctx) => <div style={{width:"60px", height:"60px", backgroundColor:"white", border:"1px solid black", text-align:"center"}}><h3>{ctx.data.label}</h3></div>
            }
        }
    }
      
    const renderOptions = {
        layout:{
            type:"ForceDirected"
        },
        grid:{
          size:{
            w:50, h:50
          }
        }
    }
                      
  return <div style={{width:"100%",height:"100%"}}>
    <SurfaceComponent data={data} renderOptions={renderOptions} viewOptions={viewOptions}>
        <ControlsComponent/>
        <MiniviewComponent/>
    </SurfaceComponent>      
    </div>
          
}

```

--------------------------------

### Angular Unit Testing Setup

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/unit-testing

Sets up the Angular testing module and initializes the jsPlumbToolkitTestHarness. This is a prerequisite for running tests on components using JsPlumb Toolkit.

```typescript
import {ComponentFixture, TestBed} from '@angular/core/testing'  
import { AppComponent } from './app.component';  
import {BrowserModule} from "@angular/platform-browser"  
import {BrowserUIAngular, jsPlumbToolkitModule} from "@jsplumbtoolkit/browser-ui-angular"  
import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core"  
import {jsPlumbToolkitTestHarness, Surface} from '@jsplumbtoolkit/browser-ui'  
  
describe('AppComponent', () => {  
  
  let fixture: ComponentFixture<AppComponent>;  
  let el:HTMLElement  
  let app: AppComponent  
  let surface:Surface  
  let toolkit:BrowserUIAngular  
  let harness:jsPlumbToolkitTestHarness  
  
  beforeEach(async () => {  
    await TestBed.configureTestingModule({  
      declarations: [AppComponent],  
      imports: [BrowserModule, jsPlumbToolkitModule],  
      schemas: [CUSTOM_ELEMENTS_SCHEMA]  
    })  
  
    fixture = TestBed.createComponent(AppComponent);  
    fixture.detectChanges()  
    el = fixture.nativeElement as HTMLElement  
    app = fixture.componentInstance;  
  
    surface = fixture.componentInstance.surface.surface  
    toolkit = fixture.componentInstance.surface.toolkit  
    harness = new jsPlumbToolkitTestHarness(toolkit, surface)  
  
  });  
  
  it('Should allow user to drag an edge', () => {  
    // no edges at first  
    expect(toolkit.getAllEdges().length).toBe(0)  
    
    // drag a connection from the ".connect" element of node 1 to node 2.  
    harness.dragConnection(["1", ".connect"], "2", {})  
    
    // ensure the edge was added.  
    expect(toolkit.getAllEdges().length).toBe(1)  
  })  
    
  it('Should support node drag', () => {    
    const node1 = toolkit.getNode("1")  
    expect(node1.data['left']).toBe(50)  
    expect(node1.data['top']).toBe(50)  
  
    harness.dragVertexBy("1", 150, 350)  
  
    // ensure the node was dragged in X  
    expect(node1.data['left']).toBe(200)  
    // ensure the node was dragged in Y  
    expect(node1.data['top']).toBe(400)  
  
  })  
    
  it('Should allow tap on a node', () => {  
    harness.tapOnNode("1")  
    // ensure the tap was detected.  
    expect(app.tapCount).toBe(1)  
  })  
  

```

--------------------------------

### Angular SurfaceComponent Usage

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/angular-integration

Example of how to use the jsplumb-surface component in an Angular template, binding necessary input properties.

```html
<jsplumb-surface [renderParams]="renderParams" [view]="view"></jsplumb-surface>
```

--------------------------------

### Basic Svelte Integration with PaletteComponent

Source: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/svelte-integration

Demonstrates setting up a Svelte app with SurfaceComponent and PaletteComponent. Configure type extraction and data generation for draggable elements.

```javascript
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>      
}
```
Tokens:
Raw