Circular Layout

Arranges all the nodes/groups in the toolkit instance into a circle, with a radius sufficiently large that no two nodes/groups overlap.

Circular layout

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	CircularLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": CircularLayout.type
  }
});

---

Parameters

Interface CircularLayoutParameters

Name	Type	Description
centerRoot?	boolean	If true, the first node in the data set will be placed in the center of the circle. Defaults to false.
height?	number	Optional fixed height for the layout.
locationFunction?	LocationFunction	Optional function that, given some vertex, can provide the x/y location of the vertex on the canvas
padding?	PointXY	Optional padding to put around the elements.
width?	number	Optional fixed width for the layout.

---

Centering the root node

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	CircularLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": CircularLayout.type,
    "options": {
      "centerRoot": true
    }
  }
});

Root vertex in center