JointJS

https://docs.jointjs.com/
Admin
JointJS is a JavaScript/TypeScript diagramming library that enables developers to build visual and...
Tokens:1,380,236
Snippets:12,179
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Run a downloaded demo

Source: https://docs.jointjs.com/learn/help-center/demo-apps

After downloading, follow the instructions in the demo's `README.md`. The example shows the typical commands: `cd kitchen-sink-react-ts`, `npm install`, and `npm start`. Note that JointJS+ demos require access to the `@joint/plus` package; ensure the npm registry is configured before running `npm install`.

```bash
cd kitchen-sink-react-ts  
npm install  
npm start  
```

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

### Usage example with initAvoidRouter and start()

Source: https://docs.jointjs.com/api/avoid-router/initAvoidRouter

Example showing how to create a graph, initialize the avoid router with options, and start it. The options shapeBufferDistance and idealNudgingDistance are set.

```javascript
import { dia, shapes } from '@joint/core';
import { initAvoidRouter } from '@joint/router-avoid';

const graph = new dia.Graph({}, { cellNamespace: shapes });

const avoidRouter = await initAvoidRouter(graph, {
    shapeBufferDistance: 20,
    idealNudgingDistance: 10
});

avoidRouter.start();
```

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

### Install @joint/cli globally and download a demo

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Installs `@joint/cli` globally with npm, then uses the `joint` command to download a demo. The example downloads `kitchen-sink/react-ts`.

```bash
npm install -g @joint/cli  
```

```bash
joint download kitchen-sink/react-ts  
```

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

### Example setup for switching between display mode and edit mode

Source: https://docs.jointjs.com/api/mvc/Listener

Shows how to create two listener subclasses (ViewController and EditController) that listen to paper events, and a toggleEditMode function to switch between them. The example demonstrates using callbackArguments to access the paper and graph, and using listenTo and stopListening to manage event listeners.

```javascript
// Example setup for switching between display mode and edit mode  
  
class ViewController extends mvc.Listener {  
  
    startListening() {  
        const [{ paper }] = this.callbackArguments;  
        this.listenTo(paper, 'element:mouseenter', (_appContext, elementView) => {  
            joint.highlighters.mask.add(elementView, 'body', 'highlighted-element');  
        });  
        this.listenTo(paper, 'element:mouseleave', (_appContext, elementView) => {  
            joint.highlighters.mask.remove(elementView, 'highlighted-element');  
        });  
    }  
}  
  
class EditController extends mvc.Listener {  
  
    startListening() {  
        const [{ paper }] = this.callbackArguments;  
        this.listenTo(paper, 'element:pointerdblclick', (appContext, elementView) => {  
            const { model } = elementView;  
            if (appContext.graph.getConnectedLinks(model).length > 0) return;  
            model.remove();  
        });  
    }  
}  
  
const appContext = { paper, graph };  
  
const viewController = new ViewController(appContext);  
const editController = new EditController(appContext);  
  
let editMode = false;  
function toggleEditMode(canEdit = !editMode) {  
    editMode = canEdit;  
    if (editMode) {  
        editController.startListening();  
        viewController.stopListening();  
    } else {  
        viewController.startListening();  
        editController.stopListening();  
    }  
}  
  
// start app in view mode  
toggleEditMode(false);  
```

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

### pan:start event listener

Source: https://docs.jointjs.com/api/ui/PaperScroller

Example of listening to the 'pan:start' event, triggered when the user starts panning.

```typescript
paperScroller.on('pan:start', (  
    evt: dia.Event  
) => {  
    // panning has started  
});  
```

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

### Install @joint/react with bun

Source: https://docs.jointjs.com/react/getting-started/installation

Install the @joint/react package using bun.

```bash
bun add @joint/react  
```

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

### util.toggleFullScreen() example

Source: https://docs.jointjs.com/api/util

Example of toggling full-screen on the paper element.

```javascript
joint.util.toggleFullScreen(paper.el);  

```

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

### start()

Source: https://docs.jointjs.com/api/layout/ForceDirected

Initiates the layout process.

```APIDOC
## start()

### Description
Initiates the layout process.

### Method
start

### Signature
`forceDirected.start(): void`

### Parameters
None

### Returns
void
```

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

### attr() getter examples

Source: https://docs.jointjs.com/api/dia/Cell

Examples of getting attribute values using string or array paths.

```javascript
element.attr('body/fill') === 'red';  
element.attr(['label', 'fontSize']) === 12;  
  
const color = link.attr('line/stroke');  
const targetMarkerType = link.attr(['line', 'targetMarker', 'type']);  
```

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

### Set production token and install with bun

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Use this command sequence to set the production access token as an environment variable and run bun install. This is the recommended approach for switching from trial to production.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"  
bun install  

```

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

### useSelection() example

Source: https://docs.jointjs.com/api-react/Hooks/useSelection

Example of using useSelection() in a React component to get selectAllElements and startSelectionRegion functions for a toolbar.

```jsx
import { useSelection } from '@joint/react-plus';

function SelectionToolbar() {
  const { selectAllElements, startSelectionRegion } = useSelection();
  return (
    <>
      <button onClick={selectAllElements}>Select all</button>
      <button onClick={() => startSelectionRegion({ type: 'polygon' })}>
        Lasso
      </button>
    </>
  );
}
```

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

### Change to the project directory

Source: https://docs.jointjs.com/learn/integration/svelte

After creating the project, navigate into the newly created directory to proceed with the setup.

```bash
cd joint-plus-tutorial-svelte
```

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

### Set production token and install with npm

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Use this command sequence to set the production access token as an environment variable and run npm install. This is the recommended approach for switching from trial to production.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"  
npm install  

```

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

### Install @joint/core (version 4.0.0)

Source: https://docs.jointjs.com/learn/release-notes/4.0.0

The new way to install the JointJS library starting with version 4.0.0.

```bash
npm i @joint/core  
yarn add @joint/core  

```

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

### portProp() method signature and usage examples

Source: https://docs.jointjs.com/api/dia/Element

Sets or gets properties, possibly nested, on an element port. Equivalent to attr() but for custom data properties. The examples show setting and getting nested properties like 'attrs/circle/fill'.

```typescript
element.portProp(portId, path, [value])  
```

```typescript
element.portProp('port-id', 'attrs/circle/fill', 'red');  
element.portProp('port-id', 'attrs/circle/fill');  // 'red'  
  
element.portProp('port-id', 'attrs/circle', { r: 10, stroke: 'green' });  
element.portProp('port-id', 'attrs/circle'); // { r: 10, stroke: 'green', fill: 'red' }  
```

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

### Download a demo with npx @joint/cli

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Downloads a demo into the current working directory. The example downloads `kitchen-sink/react-ts` and creates a `kitchen-sink-react-ts/` folder with the full source code.

```bash
npx @joint/cli download kitchen-sink/react-ts  
```

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

### Set production token and install with pnpm

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Use this command sequence to set the production access token as an environment variable and run pnpm install. This is the recommended approach for switching from trial to production.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"  
pnpm install  

```

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

### getCellsBBox() example

Source: https://docs.jointjs.com/api/dia/Graph

Example usage of `getCellsBBox` to get the bounding box of all successors of `el1` and their embeds, using the `deep` option.

```javascript
// Get the bounding box of all `el1` successors and their embeds  
var bbox = graph.getCellsBBox(graph.getSuccessors(el1), { deep: true });  
```

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

### start(): void

Source: https://docs.jointjs.com/api/avoid-router/RouterService

Starts listening to graph changes and keeps the graph routed as it changes.

```APIDOC
## start(): void

### Description
Starts listening to graph changes - cells added and removed, elements moved and resized, link ends reconnected - and keeps the graph routed as it changes. Also (re-)syncs every cell the graph already holds, including cells added before it was called or while stopped. Calling it on an already started service is safe: it stops first, then starts again.

### Method
CALL

### Endpoint
`start(): void`

### Parameters
None.

### Returns
- **void** - No return value.
```

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

### Install @joint/layout-directed-graph with npm for UMD setup

Source: https://docs.jointjs.com/learn/features/automatic-layouts/directed-graph

Install the directed graph package via npm to copy the UMD distribution file to the root of your package.

```bash
npm add @joint/layout-directed-graph
```

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

### constructor(opt?: ui.Keyboard.Options)

Source: https://docs.jointjs.com/api/ui/Keyboard

Creates a new Keyboard instance with optional configuration options.

```APIDOC
## constructor(opt?: ui.Keyboard.Options)

### Description
Creates a new Keyboard instance with optional configuration options.

### Method
constructor

### Parameters
#### Options
- **filter** (function) - Optional - A callback that prevents Keyboard events from triggering according to custom logic. The callback is invoked whenever a keyboard DOM Event is fired, with the event object and the Keyboard object. If it returns `false`, the Keyboard event is not fired. Default is `isConsumerElement()`.

### Example
```ts
const keyboard = new ui.Keyboard({
  filter: (event, keyboard) => {
    // custom logic
    return true;
  }
});
```
```

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

### startSelecting()

Source: https://docs.jointjs.com/api/ui/Selection

Initiates bulk selection. Used in the Common Setup section.

```APIDOC
## startSelecting()

### Description
Initiates bulk selection. Used in the Common Setup section.

### Method
startSelecting

### Signature
`selection.startSelecting(evt: dia.Event): void;`

### Parameters
- **evt** (dia.Event) - Required - The event object that triggered the selection.

### Returns
`void`
```

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

### Using selectCellId with useCell

Source: https://docs.jointjs.com/api-react/Selectors/selectCellId

Example showing how to use selectCellId with the useCell hook to get a cell's id. The example imports useCell and selectCellId from '@joint/react'.

```typescript
import { useCell, selectCellId } from '@joint/react';  
  
const id = useCell(cellId, selectCellId);
```

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

### usePaperScroller example with ZoomControls component

Source: https://docs.jointjs.com/api-react/Hooks/usePaperScroller

Example component that uses usePaperScroller to get setZoom and zoomToFit, and renders buttons to zoom in, zoom out, and fit the graph. Must be mounted inside a <PaperScroller>.

```tsx
import { usePaperScroller } from '@joint/react-plus';  
  
// Mount inside a <PaperScroller> to drive its zoom.  
function ZoomControls() {  
  const { setZoom, zoomToFit } = usePaperScroller();  
  return (  
    <>  
      <button onClick={() => setZoom((zoom) => zoom * 1.2)}>Zoom in</button>  
      <button onClick={() => setZoom((zoom) => zoom / 1.2)}>Zoom out</button>  
      <button onClick={() => zoomToFit()}>Fit</button>  
    </>  
  );  
}  
```

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

### Install Keyboard via ui namespace

Source: https://docs.jointjs.com/learn/features/keyboard-shortcuts

Import the ui namespace from '@joint/plus' and create a new Keyboard instance.

```javascript
import { ui } from '@joint/plus';  
  
const keyboard = new ui.Keyboard();  

```

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

### Example: using useCellId() in a component

Source: https://docs.jointjs.com/api-react/Hooks/useCellId

Example of using useCellId() inside a component to get the current cell id and render it as text. The hook is cheaper than useCell() because it never subscribes to store updates.

```jsx
import { useCellId } from '@joint/react';

function MyElement() {
  const id = useCellId();
  return <text>{id}</text>;
}
```

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

### Set production token and install with yarn

Source: https://docs.jointjs.com/learn/help-center/npm-registry

Use this command sequence to set the production access token as an environment variable and run yarn install. This is the recommended approach for switching from trial to production.

```bash
export JOINTJS_NPM_TOKEN="jjs-PRODUCTION-TOKEN"  
yarn install  

```

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

### Using selectElementAngle with useCell

Source: https://docs.jointjs.com/api-react/Selectors/selectElementAngle

Example of using selectElementAngle with the useCell hook to get the angle of an element by its ID.

```tsx
import { useCell, selectElementAngle } from '@joint/react';  
  
const angle = useCell(elementId, selectElementAngle);  
```

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

### initialize() - Create collection with options

Source: https://docs.jointjs.com/api/mvc/Collection

Shows how to create an empty collection with options, passing null for models and specifying the model class.

```javascript
const shapes = new mvc.Collection(null, {  
    model: Shape  
});  
```

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

### Using selectCellParent with useCell

Source: https://docs.jointjs.com/api-react/Selectors/selectCellParent

Example of using selectCellParent with the useCell hook to get the parent ID of a cell.

```typescript
import { useCell, selectCellParent } from '@joint/react';  
  
const parentId = useCell(cellId, selectCellParent);  
```

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

### matrix() - Get current transformation matrix

Source: https://docs.jointjs.com/api/dia/Paper

Returns the current transformation matrix (SVGMatrix) of the paper when called with no parameters. The example destructures the matrix properties a, b, e, f to get scale and translation values.

```javascript
paper.matrix()  
```

```javascript
const { a: sx, b: sy, e: tx, f: ty } = paper.matrix();  
```

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

### UMD Quickstart demo with global joint object

Source: https://docs.jointjs.com/learn/integration/javascript

Quickstart demo adapted for UMD usage, using global variables (joint, g, V) instead of imports. Creates a paper, two rectangles, and a link with a label, router, and connector.

```javascript
// create paper  
const namespace = joint.shapes;  
  
const graph = new joint.dia.Graph({}, { cellNamespace: namespace });  
  
const paper = new joint.dia.Paper({  
    el: document.getElementById('paper'),  
    model: graph,  
    width: 300,  
    height: 300,  
    background: { color: '#F5F5F5' },  
    cellViewNamespace: namespace  
});  
  
// create elements  
const rect1 = new joint.shapes.standard.Rectangle();  
rect1.position(25, 25);  
rect1.resize(180, 50);  
rect1.addTo(graph);  
  
const rect2 = new joint.shapes.standard.Rectangle();  
rect2.position(95, 225);  
rect2.resize(180, 50);  
rect2.addTo(graph);  
  
rect1.attr('body', { stroke: '#C94A46', rx: 2, ry: 2 });  
rect2.attr('body', { stroke: '#C94A46', rx: 2, ry: 2 });  
  
rect1.attr('label', { text: 'Hello', fill: '#353535' });  
rect2.attr('label', { text: 'World!', fill: '#353535' });  
  
// create link  
const link = new joint.shapes.standard.Link();  
link.source(rect1);  
link.target(rect2);  
link.addTo(graph);  
  
link.appendLabel({  
    attrs: {  
        text: {  
            text: 'to the'  
        }  
    }  
});  
link.router('orthogonal');  
link.connector('straight', { cornerType: 'line' });
```

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

### Create and configure an Image shape

Source: https://docs.jointjs.com/api/shapes/standard/Image

Example showing how to instantiate a standard Image shape, resize it, position it, and set its attributes including the image source and label text.

```APIDOC
## Create and configure an Image shape

### Description
This example demonstrates how to create a standard Image shape, resize it, position it, and set its attributes including the image source and label text.

### Usage
```javascript
const image = new shapes.standard.Image();  
image.resize(150, 100);  
image.position(25, 410);  
image.attr('root/title', 'shapes.standard.Image');  
image.attr('label/text', 'Image');  
image.attr('image/xlinkHref', 'image.png');  
```

### Attributes
- **root/title** (string) - Sets the title of the root element.
- **label/text** (string) - Sets the text of the label.
- **image/xlinkHref** (string) - Sets the image source URL.

### SVG Selectors
- **root** - Container of all nodes.
- **image** - Image body of the shape.
- **label** - Text below the image.
```

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

### Get ancestor shapes of a VisioShape

Source: https://docs.jointjs.com/api/format/Visio/VisioShape

Returns an array of ancestor VisioShapes of the shape, ordered starting with the highest level.

```typescript
visioShape.getAncestorShapes(): VisioShape[];  
```

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

### label() - Get or set a link label

Source: https://docs.jointjs.com/api/dia/Link

Gets or sets a label at a given index. The setter merges new properties into existing ones by default; pass { rewrite: true } to replace them. The example shows a custom markup, attributes, and positioning options.

```javascript
link.label(index)  
```

```javascript
link.label(index, properties [, opt])  
```

```javascript
link.label(0, {  
    markup: [  
        {  
            tagName: 'rect',  
            selector: 'body'  
        }, {  
            tagName: 'text',  
            selector: 'label'  
        }  
    ],  
    attrs: {  
        body: {  
            fill: 'white' // white background  
        },  
        label: {  
            text: 'my label', // text to show  
            fill: 'blue' // blue text  
        }  
    },  
    position: {  
        distance: 0.5, // midway on the connection path  
        offset: {  
            x: 10, // 10 local x units to the right  
            y: -5 // 5 local y units above  
        },  
        angle: 45, // rotate by 45 degrees clockwise  
        args: {  
            keepGradient: true, // auto-rotate by path slope at distance  
            ensureLegibility: true // auto-rotate label if upside-down  
        }  
    }  
});  
```

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

### Quick start .npmrc with token directly

Source: https://docs.jointjs.com/learn/help-center/npm-registry

For quick testing only, place the access token directly in the _authToken field. Not recommended for production because it risks committing the token to source control. Do not commit this file if it contains the token directly.

```ini
@joint:registry=https://npm.jointjs.com  
allow-remote=all  
//npm.jointjs.com/:_authToken=jjs-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx  

```

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

### Using selectElementPosition with useCell

Source: https://docs.jointjs.com/api-react/Selectors/selectElementPosition

Example of using the selector with the useCell hook to get the element's x and y coordinates. The component re-renders only when the element moves.

```typescript
import { useCell, selectElementPosition } from '@joint/react';  
  
const { x, y } = useCell(elementId, selectElementPosition);
```

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

### on() examples

Source: https://docs.jointjs.com/api/mvc/Events

Examples of binding callbacks to events, including multiple events and context.

```javascript
model.on('change', ...);  
  
// Space-delimited list for more than one event  
film.on('change:title change:director', ...);  
  
// Supply a context value for "this" when the callback is invoked by passing the optional last argument  
model.on('change', this.render, this);  
```

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

### Padding as object example

Source: https://docs.jointjs.com/api/ui/PaperScroller

Shows how to set padding as an object with optional left, right, top, and bottom properties. Omitted sides get padding of 0.

```javascript
const paperScroller = new ui.PaperScroller({  
    paper: paper,  
    padding: { top: 20, left: 20 }  
});
```

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

### Download a demo to a custom destination folder

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Downloads a demo into a specified folder. The example downloads `kitchen-sink/react-ts` into `my-app`.

```bash
npx @joint/cli download kitchen-sink/react-ts my-app  
```

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

### Install and render Halo with @joint/plus

Source: https://docs.jointjs.com/learn/features/halo

Creates a graph and paper, then on element pointerup, creates a Halo instance with type 'overlay' and renders it. Requires the `@joint/plus` package.

```javascript
import { dia, shapes, ui } from '@joint/plus';  
  
const graph = new dia.Graph({}, { cellNamespace: shapes });  
const paper = new dia.Paper({  
    el: document.getElementById('paper'),  
    width: 500,  
    height: 500,  
    model: graph,  
    cellViewNamespace: shapes  
});  
  
paper.on('element:pointerup', (elementView) => {  
    const halo = new ui.Halo({  
        cellView: elementView,  
        type: 'overlay'  
    });  
    halo.render();  
});  

```

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

### Add @joint/layout-msagl via npm for UMD

Source: https://docs.jointjs.com/learn/features/automatic-layouts/msagl

Install the MSAGL layout package using npm as a step to obtain the UMD distribution. This is part of the UMD setup instructions.

```bash
npm add @joint/layout-msagl  
```

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

### Install Visio package with pnpm

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install the @joint/format-visio package using pnpm. Run this in the root of your package after copying the joint-visio.tgz file there.

```bash
pnpm add ./joint-visio.tgz  
```

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

### Final JointJS+ Svelte application code

Source: https://docs.jointjs.com/learn/integration/svelte

Complete App.svelte with all JointJS+ setup, including Graph, Paper, PaperScroller, Rectangle shape, and onMount logic. This is the final working example.

```svelte
<script lang="ts">  
    import { onMount } from 'svelte';  
    import { dia, ui, shapes } from '@joint/plus';  
    import '../node_modules/@joint/plus/joint-plus.css';  
  
    let ref: HTMLElement;  
  
    const graph = new dia.Graph({}, { cellNamespace: shapes });  
  
    const paper = new dia.Paper({  
        model: graph,  
        background: {  
            color: '#F8F9FA',  
        },  
        frozen: true,  
        async: true,  
        cellViewNamespace: shapes  
    });  
  
    const scroller = new ui.PaperScroller({  
        paper,  
        autoResizePaper: true,  
        cursor: 'grab'  
    });  
  
    scroller.render();  
  
    const rect = new shapes.standard.Rectangle({  
        position: { x: 100, y: 100 },  
        size: { width: 100, height: 50 },  
        attrs: {  
            label: {  
                text: 'Hello World'  
            },  
        }  
    });  
  
    graph.addCell(rect);  
  
    onMount(() => {  
        ref.appendChild(scroller.el);  
        scroller.center();  
        paper.unfreeze();  
    });  
</script>  
  
<main bind:this={ref} class="app"></main>  
  
<style></style>  

```

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

### Add VisioRowType.MoveTo to first geometry section

Source: https://docs.jointjs.com/api/format/Visio/VisioGeometrySection

Gets the first geometry section of a VSD shape and adds a MoveTo row to it. Useful when starting to build a geometry section from a Visio shape.

```javascript
const [geometry0] = vsdShape.getGeometry();  
geometry0.addRow(VisioRowType.MoveTo);
```

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

### Create and configure an Ellipse

Source: https://docs.jointjs.com/api/shapes/standard/Ellipse

Example showing how to instantiate a standard Ellipse shape, resize it, position it, and set attributes for the root, label, and body.

```APIDOC
## Create and configure an Ellipse

### Description
Creates a new `shapes.standard.Ellipse` instance and demonstrates how to resize, position, and style it using the `attr` method.

### Usage
```javascript
const ellipse = new shapes.standard.Ellipse();
ellipse.resize(150, 100);
ellipse.position(425, 10);
ellipse.attr('root/title', 'shapes.standard.Ellipse');
ellipse.attr('label/text', 'Ellipse');
ellipse.attr('body/fill', 'lightblue');
```

### Methods
- `resize(width, height)` - Resizes the shape to the given width and height.
- `position(x, y)` - Moves the shape to the given coordinates.
- `attr(path, value)` - Sets an attribute on the shape using a selector path (e.g., `'root/title'`, `'label/text'`, `'body/fill'`).

### SVG Selectors
| Selector | Node | Description |
|----------|------|-------------|
| `root` | `SVGGElement` | Container of all nodes |
| `body` | `SVGEllipseElement` | Elliptical body of the shape |
| `label` | `SVGTextElement` | Text inside the body |

### Supported Attributes
- `root/title` - Sets the title of the root element.
- `label/text` - Sets the text content of the label.
- `body/fill` - Sets the fill color of the body.
```

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

### start() method signature

Source: https://docs.jointjs.com/api/avoid-router/RouterService

Starts listening to graph changes and keeps the graph routed. Also re-syncs every cell already in the graph.

```typescript
start(): void;  
```

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

### Get a nested value with getByPath

Source: https://docs.jointjs.com/api/util

Return the value at a nested path in an object using a delimiter. The example uses '/' and returns 3 from { a: { aa: { aaa: 3 } } } at path 'a/aa/aaa'.

```javascript
util.getByPath(object, path, delim)
```

```javascript
joint.util.getByPath({ a: { aa: { aaa: 3 } } }, 'a/aa/aaa', '/');  
// 3
```

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

### Initialize and start the avoid router

Source: https://docs.jointjs.com/learn/features/automatic-layouts/standalone-link-routing

Creates a graph and paper, then initializes the avoid router with options and starts it. The returned service is not started until start() is called; without it, no routing happens. The router automatically picks up any link connected to two tracked elements and writes the computed route to its vertices and anchors.

```javascript
import { dia, shapes } from '@joint/core';  
import { initAvoidRouter } from '@joint/router-avoid';  
  
const graph = new dia.Graph({}, { cellNamespace: shapes });  
const paper = new dia.Paper({  
    el: document.getElementById('paper'),  
    model: graph,  
    cellViewNamespace: shapes  
});  
  
const avoidRouter = await initAvoidRouter(graph, {  
    shapeBufferDistance: 20,  
    idealNudgingDistance: 10  
});  
  
avoidRouter.start();  

```

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

### select:changed event handler

Source: https://docs.jointjs.com/api/ui/TextEditor

Triggered when the user is finished selecting text inside the text editor. The callback receives selectionStart and selectionEnd. Example shows how to get the selected text.

```javascript
ed.on('select:changed', function(selectionStart, selectionEnd) {  
    const text = ed.getTextContent().substring(selectionStart, selectionEnd);  
});  

```

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

### sourceMarker attribute example

Source: https://docs.jointjs.com/api/dia/attributes

Defines a source marker for a link, drawing an SVG circle at the start of the path. The marker is automatically rotated based on path direction and must follow the defineMarker() format.

```javascript
link.attr('line/sourceMarker', {  
    type: 'circle', // SVG Circle  
    fill: '#666',  
    stroke: '#333',  
    r: 5, // radius of the circle  
    cx: 5 // move the centre of the circle 5 pixels from the end of the path  
});  
```

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

### Download a demo into the current directory

Source: https://docs.jointjs.com/learn/help-center/demo-apps

Downloads a demo into the current directory. The directory must be empty or use `--force`.

```bash
npx @joint/cli download kitchen-sink/react-ts .  
```

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

### TextBlock Example

Source: https://docs.jointjs.com/api/shapes/standard/TextBlock

Demonstrates how to create a TextBlock shape, resize, position, and set attributes for the root, body, and label.

```APIDOC
## TextBlock

### Description
A rectangle with an HTML label (with a fallback to SVG label for IE).

### SVG Selectors

| Selector | Node | Description |
| --- | --- | --- |
| root | _SVGGElement_ | Container of all nodes |
| body | _SVGRectElement_ | Rectangular body of the shape |
| label | _HTMLDivElement_ | Text inside the body |

### Example

```js
const textBlock = new shapes.standard.TextBlock();  
textBlock.resize(100, 100);  
textBlock.position(250, 610);  
textBlock.attr('root/title', 'shapes.standard.TextBlock');  
textBlock.attr('body/fill', 'lightgray');  
textBlock.attr('label/text', 'Hyper Text Markup Language');  
// Styling of the label via `style` presentation attribute (i.e. CSS).  
textBlock.attr('label/style/color', 'red');  
```
```

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

### Draw region and select elements with async/await

Source: https://docs.jointjs.com/learn/features/selection-region

Creates a RectangularSelectionRegion and listens for blank:pointerdown to start user selection. Uses getUserSelectionAsync() with async/await to get the selected area, then finds models in that area with graph.findModelsInArea().

```javascript
const region = new ui.RectangularSelectionRegion({ paper });  
  
paper.on('blank:pointerdown', async () => {  
    const area = await region.getUserSelectionAsync();  
    if (!area) return;  
    const elements = graph.findModelsInArea(area);  
    /* do something with the elements */  
});  

```

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

### toString() - Convert curve to string

Source: https://docs.jointjs.com/api/g/Curve

Returns the curve represented as a string. The example shows the output format for a curve with start point (10,10), control points (10,20) and (20,20), and end point (20,10).

```javascript
curve.toString()  
```

```javascript
new g.Curve('10 10', '10 20', '20 20', '20 10').toString() = "10@10 10@20 20@20 20@10"  
```

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

### Install Visio package with npm

Source: https://docs.jointjs.com/learn/features/export-import/visio

Install the @joint/format-visio package using npm. Run this in the root of your package after copying the joint-visio.tgz file there.

```bash
npm add joint-visio.tgz  
```

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

### Using initializeUnmounted to prioritize cell view mounting

Source: https://docs.jointjs.com/api/dia/Paper

Example showing how to enable initializeUnmounted so all nodes start unmounted, then manually prioritize certain cell views in async mode using graph.findCellsInArea and paper.prioritizeCellViewMount.

```javascript
const cells = [/*...*/];  
const area = {/*...*/};  
  
// Enable initializeUnmounted, so all nodes start unmounted  
const paper = new dia.Paper({  
    // ...  
    async: true,  
    viewManagement: { initializeUnmounted: true },  
    // ...  
});  
  
// In async mode, you can synchronously prioritize certain cell views:  
graph.resetCells(cells);  
graph.findCellsInArea(area).forEach(cell => paper.prioritizeCellViewMount(cell));  
```

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

### ready callback example

Source: https://docs.jointjs.com/api/format/Print

Example of the ready callback, which allows modifying the print content before printing and optionally cancelling the print by passing false to the readyToPrint callback.

```javascript
// adjust the print content before it outputs to the printer  
const options = {  
    /**  
     * @param {Array<HTMLDivElement>} pages  
     * @param {function} readyToPrint  
     * @param {{sheetSizePx: {width: number, height: number, cssWidth: string, cssHeight: string}}} opt  
     */  
    ready: function(pages, send, opt) {  
        pages.forEach(function(pageEl) {  
            // custom action - e.g. add a border on every page:  
            pageEl.style.border = '1px solid gray';  
        });  
  
        // pass `false` into the readyToPrint to stop printing  
        send(pages);  
    },  
}  
```

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

### Install and import @joint/layout-directed-graph

Source: https://docs.jointjs.com/react/features/automatic-layouts/directed-graph

Install the @joint/layout-directed-graph package with npm, pnpm, or yarn, then import the DirectedGraph class. The import is required to use the layout.

```bash
npm add @joint/layout-directed-graph  
```

```bash
pnpm add @joint/layout-directed-graph  
```

```bash
yarn add @joint/layout-directed-graph  
```

```javascript
import { DirectedGraph } from '@joint/layout-directed-graph';  
```

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

### App.tsx from the assembled editor example

Source: https://docs.jointjs.com/react/getting-started/next-steps

The main application component for the editor built in the quickstart. It imports JointJS React Plus components and UI elements, and defines a NodeData interface for typed element data.

```tsx
import { useCallback, useEffect, useMemo, useState } from 'react';
import {
Diagram,
ElementOverlay,
PaperScroller,
Navigator,
Selection,
Stencil,
useStencil,
usePaperScroller,
useSelection,
usePaperScrollerViewport,
HTMLHost,
Paper,
linkRoutingOrthogonal,
useGraph,
useCell,
useCells,
selectElementData,
type CellId,
type CellRecord,
type ElementPort,
type ElementRecord,
} from '@joint/react-plus';
import '@joint/react-plus/styles.css';
import { X } from 'lucide-react';
import { Button } from './components/ui/button';
import { Slider } from './components/ui/slider';
import { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group';
import './example.css';
  

// ── Types & config ────────────────────────────────────────────────────────────
  

interface NodeData {
readonly label: string;
readonly description: string;

```

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

### Use selectElementData with useCell

Source: https://docs.jointjs.com/api-react/Selectors/selectElementData

Example usage from the docs. Imports useCell and selectElementData from '@joint/react', defines a NodeData type with a label, and passes selectElementData<NodeData> to useCell to get the element's custom data payload.

```typescript
import { useCell, selectElementData } from '@joint/react';  
  
type NodeData = { label: string };  
const data = useCell(elementId, selectElementData<NodeData>);  
```
Tokens:
Raw