JointJS

https://docs.jointjs.com/learn/features
Admin
JointJS is a JavaScript diagramming library for creating interactive diagrams, flowcharts, and graph...
Tokens:138,853
Snippets:1,612
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### ContextToolbar Installation with npm

Source: https://docs.jointjs.com/learn/features/popups-and-menus/context-toolbar

Example of installing and using ContextToolbar with npm, including defining tools and event handlers.

```javascript
import { ui } from '@joint/plus';

const ct = new ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: document.getElementById('my-element')
});

ct.on('action:yes', () => alert('Yes'));
ct.on('action:no', () => alert('No'));
ct.on('action:maybe', () => alert('Maybe'));
ct.on('action:sure', () => alert('Sure'));

ct.render();

```

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

### Stencil Installation (ES Modules)

Source: https://docs.jointjs.com/learn/features/element-palette

Import the Stencil plugin and initialize it with a Paper instance. This example demonstrates the ES Modules import and setup.

```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: 300,
    model: graph,
    cellViewNamespace: shapes
});

const stencil = new ui.Stencil({
    paper,
    width: 200,
    height: 300
});

document.getElementById('stencil-holder').appendChild(stencil.render().el);

```

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

### Installation with npm

Source: https://docs.jointjs.com/learn/features/drag-and-drop/stack-layout-view

Example of importing and initializing the Stack Layout View component using npm.

```javascript
import { ui } from '@joint/plus';

const stackLayoutView = new ui.StackLayoutView({
    layoutOptions: { graph },
    paper
});

```

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

### Installation with ES Modules

Source: https://docs.jointjs.com/learn/features/resize-and-rotate

Example of installing and using the FreeTransform plugin with ES Modules.

```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 freeTransform = new ui.FreeTransform({ cellView: elementView });
    freeTransform.render();
});  


```

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

### Install Visio plugin with npm

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

Command to install the Visio plugin using npm.

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

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

### UMD Installation (JavaScript)

Source: https://docs.jointjs.com/learn/features/resize-and-rotate

Example of using the FreeTransform plugin with the UMD version.

```javascript
const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 500,
    height: 500,
    model: graph,
    cellViewNamespace: joint.shapes
});
  
paper.on('element:pointerup', (elementView) => {
    const freeTransform = new joint.ui.FreeTransform({ cellView: elementView });
    freeTransform.render();
});


```

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

### Install dependencies with npm

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

Command to install necessary dependencies for the UMD version.

```bash
npm install  
```

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

### Install Visio plugin with yarn

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

Command to install the Visio plugin using yarn.

```bash
yarn add @joint/format-visio@file:joint-visio.tgz  
```

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

### ContextToolbar UMD Installation (JavaScript)

Source: https://docs.jointjs.com/learn/features/popups-and-menus/context-toolbar

JavaScript example for using ContextToolbar with the UMD version, accessing it via the `joint.ui` namespace.

```javascript
const ct = new joint.ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: this
});

ct.on('action:yes', function() { alert('Yes') });
ct.on('action:no', function() { alert('No') });
ct.on('action:maybe', function() { alert('Maybe') });
ct.on('action:sure', function() { alert('Sure') });

ct.render();

```

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

### Install Visio plugin with pnpm

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

Command to install the Visio plugin using pnpm.

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

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

### Installation (ES Modules)

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

Installs the Selection plugin using ES Modules.

```javascript
import { ui } from '@joint/plus';

const selection = new ui.Selection({
    paper: paper,
    // optional, a custom collection that inherits from mvc.Collection
    collection: new MyCollection
});
```

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

### Vertices

Source: https://docs.jointjs.com/learn/features/diagram-basics/links

Examples of how to get and set link vertices.

```javascript
link.vertices();  
link.vertices([{ x: 100, y: 120 }, { x: 150, y: 60 }]);  


```

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

### Emulate user interaction

Source: https://docs.jointjs.com/learn/features/vector-editor/path-drawer

Example of how to emulate user interaction to start drawing a path immediately after a path drawer is initialized.

```javascript
paper.on('blank:pointerdown', function(event) {
    const vCanvas = V('svg', {
        width: 400,
        height: 400
    }).appendTo(this.paper.el);

    const pathDrawer = this.pathDrawer = new ui.PathDrawer({
        el: vCanvas.node
    });

    pathDrawer.onPointerDown(event);
}, this);

```

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

### Installation with JavaScript module

Source: https://docs.jointjs.com/learn/features/inline-text-editing

Access TextEditor via the ui namespace and start the text editor via the recommended ui.TextEditor.edit() method.

```javascript
import { ui } from '@joint/plus';  
  
paper.on('element:pointerdblclick', (elementView, evt) => {  
    ui.TextEditor.edit(evt.target, {  
        cellView: elementView,  
        textProperty: ['attrs', 'label', 'text'],  
        annotationsProperty: ['attrs', 'label', 'annotations']  
    });  
});  


```

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

### Installation with ES Modules

Source: https://docs.jointjs.com/learn/features/snap-to-objects/snaplines-for-elements

Installs and creates an instance of Snaplines using ES modules.

```javascript
import { ui } from '@joint/plus';

const snaplines = new ui.Snaplines({
    paper: paper
});

```

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

### Example Inputs Object

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

This example demonstrates the structure of the 'inputs' object, defining input fields for 'fill', 'stroke', and 'strokeWidth' properties of a cell's body attributes.

```javascript
inputs: {
    attrs: {
        body: {
            fill: {
                type: 'color-palette',
                options: [
                    { content: '#FFFFFF' },
                    { content: '#00FF00' },
                    { content: '#000000' }
                ],
                label: 'Fill color',
                group: 'presentation',
                index: 1
            },
            stroke: {
                type: 'color-palette',
                options: [
                    { content: '#FFFFFF' },
                    { content: '#00FF00' },
                    { content: '#000000' }
                ],
                label: 'Outline color',
                group: 'presentation',
                index: 2
            },
            strokeWidth: {
                type: 'range',
                min: 0,
                max: 50,
                unit: 'px',
                label: 'Outline thickness',
                group: 'presentation',
                index: 3
            }
        }
    }
}
```

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

### Install the MSAGL layout package using npm

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

Install the MSAGL layout package using npm.

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

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

### Custom Connector Example (Namespace)

Source: https://docs.jointjs.com/learn/features/diagram-basics/links

An example of defining a custom connector named 'wobble' within the 'connectors' namespace and then applying it to a link with custom arguments.

```javascript
import { connectors, g, shapes } from '@joint/core';

connectors.wobble = (sourcePoint, targetPoint, vertices, args) => {

    const SPREAD = args.spread || 20;

    const points = vertices.concat(targetPoint)
    const prev = sourcePoint;
    const path = new g.Path(g.Path.createSegment('M', prev));

    const n = points.length;
    for (let i = 0; i < n; i++) {

        const next = points[i];
        const distance = prev.distance(next);

        let d = SPREAD;
        while (d < distance) {
            const current = prev.clone().move(next, -d);
            current.offset(
                Math.floor(7 * Math.random()) - 3,
                Math.floor(7 * Math.random()) - 3
            );
            path.appendSegment(g.Path.createSegment('L', current));
            d += SPREAD;
        }

        path.appendSegment(g.Path.createSegment('L', next));
        prev = next;
    }

    return path;
}

const link = new shapes.standard.Link();
link.source(source);
link.target(target);

link.connector('wobble', {
    spread: 10
});

```

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

### Primitive Operators Examples

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

Examples of primitive conditional operators like eq, lt, in, and regex.

```javascript
{ eq: { 'size/width': 300 }}

```

```javascript
{ lt: { 'count': 10 }}

```

```javascript
{ in: { 'index': [0,2,4] }}

```

```javascript
{ regex: { 'attrs/label/text' : 'JointJS|Rappid' }}

```

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

### ColorPalette Example

Source: https://docs.jointjs.com/learn/features/form-controls/color-palette

This example demonstrates how to create and render a ColorPalette instance, and how to handle hover and selection events.

```javascript
const colorPalette = new ui.ColorPalette({
    options: [
        { value: '#FF0000', label: 'Red' },
        { value: '#00FF00', label: 'Green' },
        { value: '#0000FF', label: 'Blue' }
    ]
});

const el = colorPalette.render().el;
document.body.appendChild(el);

colorPalette.on('option:hover', (option) => {
    console.log('Hovered option:', option);
});

colorPalette.on('option:select', (option) => {
    console.log('Selected option:', option);
});
```

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

### Install the MSAGL layout package using yarn

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

Install the MSAGL layout package using yarn.

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

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

### Install the MSAGL layout open-source package using NPM

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

Install the MSAGL layout open-source package using NPM.

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

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

### Tooltip Plugin Installation (ESM)

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

Installs and creates an instance of the Tooltip plugin using the ui namespace for ESM.

```javascript
import { ui } from '@joint/plus';

const tooltip = new ui.Tooltip({
    target: '[data-tooltip]',
    direction: 'auto',
    padding: 10
});

```

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

### Install BPMN Import Plugin with pnpm

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

Command to install the BPMN import plugin using pnpm.

```bash
pnpm add ./joint-bpmn-import.tgz  
```

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

### Install BPMN Import Plugin with yarn

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

Command to install the BPMN import plugin using yarn.

```bash
yarn add @joint/format-bpmn-import@file:joint-bpmn-import.tgz  
```

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

### Install BPMN export plugin using yarn

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

Install the BPMN export plugin using yarn.

```bash
yarn add @joint/format-bpmn-export@file:joint-bpmn-export.tgz
```

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

### Install BPMN Import Plugin with npm

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

Command to install the BPMN import plugin using npm.

```bash
npm add joint-bpmn-import.tgz  
```

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

### Install BPMN export plugin using pnpm

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

Install the BPMN export plugin using pnpm.

```bash
pnpm add ./joint-bpmn-export.tgz
```

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

### UMD Installation

Source: https://docs.jointjs.com/learn/features/vector-editor/path-drawer

Include joint.ui.pathDrawer.js and joint.ui.pathDrawer.css in your HTML.

```html
<head>
    <link rel="stylesheet" type="text/css" href="joint.ui.pathDrawer.css">
</head>
<body>
    <svg id="example-canvas" width="800" height="800"></svg>

    <script src="joint.js"></script>
    <script src="joint.ui.pathDrawer.js"></script>
</body>

```

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

### Installation with npm

Source: https://docs.jointjs.com/learn/features/popups-and-menus/lightbox

Access `Lightbox` via the `ui` namespace, create an instance, and call the `open()` method on it.

```javascript
import { ui } from '@joint/plus';  
  
const lightbox = new ui.Lightbox({  
    title: 'Image caption goes here.',  
    image: 'images/lightbox.png'  
});  
  
lightbox.open();  


```

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

### Usage Example

Source: https://docs.jointjs.com/learn/features/drag-and-drop/stack-layout-view

Demonstrates setting up layout options, disabling paper interactivity, and initializing the Stack Layout View.

```javascript
const layoutOptions = {
    direction: 'TB',
    topBottom: {
        x: 20,
        y: 20
    },
    stackCount: 4,
    stackSize: 200
};

paper.setInteractivity(false);

const stackLayoutView = new joint.ui.StackLayoutView({
    layoutOptions,
    paper
});

```

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

### Adding a Node Instance to the Graph

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

Demonstrates how to add an instance of the custom 'examples.Node' shape to the graph with custom attributes.

```javascript
const n2 = new Node();  
n2.position(50, 125);  
n2.resize(200, 100);  
n2.attr({  
    nodeBody: {  
        fill: '#219ebc'  
    },  
    label: {  
        text: 'Node\nanother color'  
    }  
});  
n2.addTo(graph);  

```

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

### Using `util.defaultsDeep()` for Default Styling

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

This code snippet shows how to achieve the same default styling as the previous example but using the `util.defaultsDeep()` function to merge custom defaults with the superclass defaults.

```javascript
import { dia, util } from '@joint/core';  
  
export class MyShape extends dia.Element {  
  
    defaults() {  
        return util.defaultsDeep({  
            type: 'myNamespace.MyShape',  
            size: { width: 100, height: 80 },  
            attrs: {  
                body: {  
                    cx: 'calc(0.5*w)',  
                    cy: 'calc(0.5*h)',  
                    rx: 'calc(0.5*w)',  
                    ry: 'calc(0.5*h)',  
                    strokeWidth: 2,  
                    stroke: '#333333',  
                    fill: '#FFFFFF'  
                },  
                label: {  
                    textVerticalAnchor: 'middle',  
                    textAnchor: 'middle',  
                    x: 'calc(0.5*w)',  
                    y: 'calc(0.5*h)',  
                    fontSize: 14,  
                    fill: '#333333'  
                }  
            }  
        }, super.defaults);  
    }  
}
```

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

### Creating and Adding a Custom Shape Instance

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

Demonstrates how to create an instance of the custom shape, set its attributes (image, label, colors), position it, and add it to the graph.

```javascript
const customShape4 = new Shape();
customShape4
    .set('image', 'https://via.placeholder.com/150/FF0000')
    .set('label', 'Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Integer vehicula.')
    .set('outlineColor', 'red')
    .position(200, 50)
    .prop('fillColor', 'lightgray')
    .addTo(graph);
```

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

### Installation using ES Modules

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

Instantiate the Keyboard plugin using the ui namespace when using ES modules.

```javascript
import { ui } from '@joint/plus';

const keyboard = new ui.Keyboard();

```

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

### Installation with UMD

Source: https://docs.jointjs.com/learn/features/drag-and-drop/stack-layout-view

Example of including the Stack Layout View and its dependency via script tags in HTML and accessing it through the joint.ui namespace.

```html
<script src="joint.layout.stackLayout.js"></script>
<script src="joint.ui.stackLayoutView.js"></script>

```

```javascript
const stackLayoutView = new joint.ui.StackLayoutView({
    layoutOptions: { graph },
    paper
});

```

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

### Installation with ES Modules

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

Access `Navigator` via the `ui` namespace, and simply create an instance. Append the navigator DOM element to any container, and call the `render()` method.

```javascript
import { ui } from '@joint/plus';

const nav = new ui.Navigator({
    paperScroller,
    width: 300,
    height: 200,
    padding: 10,
    zoomOptions: { max: 2, min: 0.2 }
});

document.getElementById('navigator').appendChild(nav.el);

nav.render();

```

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

### Inline Text Editing Example

Source: https://docs.jointjs.com/learn/features/inline-text-editing

Starts inline text editing when the user double-clicks text inside a JointJS element or link, and applies auto-sizing to the text.

```javascript
// RECOMMENDED  
  
paper.on('element:pointerdblclick', (elementView, evt) => {  
    ui.TextEditor.edit(evt.target, {  
        cellView: elementView,  
        textProperty: ['attrs', 'label', 'text'],  
        annotationsProperty: ['attrs', 'label', 'annotations']  
    });  
});  
  
paper.on('link:pointerdblclick', (linkView, evt) => {  
    // Editing a link label  
    const index = Number(linkView.findAttribute('label-idx', evt.target));  
    ui.TextEditor.edit(evt.target, {  
        cellView: linkView,  
        textProperty: ['labels', index, 'attrs', 'text', 'text'],  
        annotationsProperty: ['labels', index, 'attrs', 'text', 'annotations']  
    });  
});  
  
function autoSize(element) {  
  
    const view = paper.findViewByModel(element);  
    const textVel = view.vel.findOne('text');  
    // Use bounding box without transformations so that our auto-sizing works  
    // even on e.g. rotated element.  
    const bbox = textVel.getBBox();  
    // 16 = 2*8 which is the translation defined via ref-x ref-y for our rb element.  
    element.resize(bbox.width + 16, bbox.height + 16);  
}  
  
graph.on('change:attrs', function(cell) { autoSize(cell) });  


```

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

### Installation with ES Modules

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

Access Halo via the ui namespace, create an instance, provide the view of the cell, and call the render() method.

```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();
});

```

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

### JSON Markup Examples

Source: https://docs.jointjs.com/learn/features/diagram-basics/cells

Examples of JSON markup for creating JointJS shapes.

```javascript
import { dia } from '@joint/core';

// single DOM element
const markup: dia.MarkupJSON = [{ tagName: 'rect' }];

// multiple DOM elements
const markup: dia.MarkupJSON = [{
    tagName: 'rect',
    selector: 'body'
}, {
    tagName: 'text',
    selector: 'label',
    attributes: {
        'stroke': 'none'
    }
}]

// nested DOM elements
const markup: dia.MarkupJSON = [{
    tagName: 'g',
    children: [{
        tagName: 'circle',
        selector: 'circle1',
        groupSelector: 'circles'
    },
    'text content',
    {
        tagName: 'circle',
        selector: 'circle2',
        groupSelector: 'circles'
    }]
}]

```

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

### UMD Installation (HTML)

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

Include `joint.ui.navigator.js` and `joint.ui.navigator.css` in your HTML.

```html
<link rel="stylesheet" type="text/css" href="joint.ui.navigator.css">
<script src="joint.js"></script>
<script src="joint.ui.navigator.js"></script>

```

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

### Unary Operator 'not' Example

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

Example of the 'not' unary operator to negate a condition.

```javascript
// `true` when `!util.isEqual({ 'width': 300 }, cell.prop('size'))`
{ not: { equal: { 'size': { 'width': 300 }}}}

```

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

### Standard Shapes Example

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/standard

This example demonstrates how to use all the standard shapes provided by JointJS.

```javascript
const graph = new joint.dia.Graph;
const paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 400,
    gridSize: 10
});

const rect = new joint.shapes.standard.Rectangle({
    position: { x: 100, y: 30 },
    size: { width: 100, height: 30 },
    attrs: {
        body: { fill: '#2ECC71' },
        text: { text: 'Rectangle', fill: 'white' }
    }
});

const circle = new joint.shapes.standard.Circle({
    position: { x: 250, y: 30 },
    size: { radius: 50 },
    attrs: {
        body: { fill: '#3498DB' },
        text: { text: 'Circle', fill: 'white' }
    }
});

const ellipse = new joint.shapes.standard.Ellipse({
    position: { x: 400, y: 30 },
    size: { width: 100, height: 50 },
    attrs: {
        body: { fill: '#E74C3C' },
        text: { text: 'Ellipse', fill: 'white' }
    }
});

const line = new joint.shapes.standard.Line({
    source: { x: 100, y: 150 },
    target: { x: 200, y: 150 },
    attrs: {
        line: { stroke: '#F1C40F', 'stroke-width': 4 }
    }
});

const polyline = new joint.shapes.standard.Polyline({
    vertices: [{ x: 250, y: 150 }, { x: 300, y: 200 }, { x: 350, y: 150 }],
    attrs: {
        polyline: { stroke: '#9B59B6', 'stroke-width': 4 }
    }
});

const polygon = new joint.shapes.standard.Polygon({
    position: { x: 400, y: 120 },
    sides: 5,
    size: { width: 80, height: 80 },
    attrs: {
        body: { fill: '#1ABC9C' },
        text: { text: 'Polygon', fill: 'white' }
    }
});

const path = new joint.shapes.standard.Path({
    position: { x: 100, y: 220 },
    d: 'M 0 0 L 50 50 L 0 100 Z',
    attrs: {
        path: { fill: '#E67E22', stroke: 'black', 'stroke-width': 2 }
    }
});

const textShape = new joint.shapes.standard.TextBlock({
    position: { x: 250, y: 220 },
    size: { width: 100, height: 50 },
    text: 'Text Block',
    attrs: {
        text: { fill: '#2C3E50', 'font-size': 12, 'text-anchor': 'middle', 'valign': 'middle', 'color': 'white' }
    }
});

const imageShape = new joint.shapes.standard.Image({
    position: { x: 400, y: 220 },
    size: { width: 80, height: 80 },
    image: 'https://via.placeholder.com/80',
    attrs: {
        image: { 'xlink:href': 'https://via.placeholder.com/80' }
    }
});

graph.addCells([rect, circle, ellipse, line, polyline, polygon, path, textShape, imageShape]);

```

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

### Example usage of the layout() function

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

Illustrates the `layout()` function with various configuration options.

```javascript
import { layout, EdgeRoutingMode, LayerDirectionEnum } from '@joint/layout-msagl';  
  
// ...  
  
const { bbox } = layout(graph, {  
    layerDirection: LayerDirectionEnum.TB,  
    layerSeparation: 60,  
    nodeSeparation: 30,  
    edgeRoutingMode: EdgeRoutingMode.Rectilinear,  
    x: 20,  
    y: 20,  
    clusterPadding: { left: 20, right: 20, top: 20, bottom: 20 }  
});  
  
console.log('x:', bbox.x, 'y:', bbox.y);  
console.log('width:', bbox.width, 'height:', bbox.height);  
```

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

### Preinitialize Method

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

The `preinitialize()` method is used to set up instance properties before the model is fully instantiated, providing access to model properties during layout calculation.

```javascript
preinitialize() {
    this.spacing = 10;
    this.labelAttributes = {
      'font-size': 14,
      'font-family': 'sans-serif',
    };
    this.imageAttributes = {
      'width': 50,
      'height': 50,
      'preserveAspectRatio': 'none'
    };
    this.cache = {};
}
```

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

### Install @dagrejs/graphlib

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

Installs the `@dagrejs/graphlib` package as an additional dependency using yarn.

```bash
yarn add @dagrejs/graphlib  
yarn install  
```

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

### Applying the Custom View

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

Demonstrates how to instantiate the custom shape and apply the 'faded' attribute to change its opacity.

```javascript
const shape = new MyShape();
graph.addCell(shape);

// this will set the opacity of the shape to 0.5 via the custom view
shape.set('faded', true);
```

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

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

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

Installs the `@joint/layout-directed-graph` package as a project dependency using yarn.

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

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

### Multiary Operators 'and' Example

Source: https://docs.jointjs.com/learn/features/property-editor-and-viewer

Example of the 'and' multiary operator combining multiple conditions.

```javascript
// `true` when `((cell.prop('position/x') >= 100) &&
//               (cell.prop('position/x') <= 400) &&
//               (cell.prop('position/y') >= 200) &&
//               (cell.prop('position/y') <= 300))`
{ and: [
    { gte: { 'position/x': 100 }},
    { lte: { 'position/x': 400 }},
    { gte: { 'position/y': 200 }},
    { lte: { 'position/y': 300 }}
]}

```

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

### Batch Commands Example

Source: https://docs.jointjs.com/learn/features/undo-redo

Demonstrates how to group multiple commands into a single transaction using initBatchCommand and storeBatchCommand.

```javascript
const graph = new dia.Graph({}, { cellNamespace: shapes });
const commandManager = new dia.CommandManager({ model: graph });
// ... add elements to `graph`
  
commandManager.initBatchCommand();
const [el1, el2] = graph.getElements();
el1.set('attribute', 'value1');
el2.set('attribute', 'value2');
commandManager.storeBatchCommand();
  
// The `undo()` will revert `el1` and `el2` changes at once.
commandManager.undo();

```

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

### UMD Installation - index.html

Source: https://docs.jointjs.com/learn/features/form-controls/select-box

Include joint.ui.selectBox.js and joint.ui.selectBox.css files to your HTML.

```html
<link href="joint.ui.selectBox.css" rel="stylesheet" type="text/css">
<script src="joint.js"></script>
<script src="joint.ui.selectBox.js"></script>
```

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

### Mixing Routers and Connectors

Source: https://docs.jointjs.com/learn/features/diagram-basics/links

Example demonstrating how to combine a router ('manhattan') with a connector ('jumpover') for a link.

```javascript
const link = new shapes.standard.Link();  
link.source(rect);  
link.target(rect2);  
link.router('manhattan');  
link.connector('jumpover');  


```

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

### Install the MSAGL layout package using pnpm

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

Install the MSAGL layout package using pnpm.

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

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

### Configuring a 'straight' Connector

Source: https://docs.jointjs.com/learn/features/diagram-basics/links

Example of configuring the 'straight' connector with custom corner types and radii.

```javascript
link.connector('straight', {
    cornerType: 'cubic',
    cornerRadius: 20
});

```

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

### Milestones Structure Example

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/bpmn

An example illustrating the structure of milestones, including custom IDs for milestones.

```javascript
milestones: [
    {
        label: 'milestone 1' // group id: 'milestone_0', header id: 'milestoneHeader_0', label id: 'milestoneLabel_0', line id: 'milestoneLine_0'
    },
    {
        label: 'milestone 2' // group id: 'milestone_1', header id: 'milestoneHeader_1', label id: 'milestoneLabel_1', line id: 'milestoneLine_1'
    },
    // example with custom id
    {
        id: 'customId',
        label: 'milestone 3' // group id: 'milestone_customId', header id: 'milestoneHeader_customId', label id: 'milestoneLabel_customId', line id: 'milestoneLine_customId'
    }
]
```

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

### Rotatable Markup Example

Source: https://docs.jointjs.com/learn/features/diagram-basics/cells

Example of defining a shape with a rotatable group, allowing only a part of the markup to be rotated.

```javascript
markup: util.svg`
    <g @selector="rotatable">
        <rect /><!-- this rect will be rotated -->
    </g>
    <text /><!-- this text will not be rotated -->
`
```

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

### Bar series configuration

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/charts

This example shows how to create a bar series by setting the `bars` option to `true`. It also includes recommended settings like `barWidth` for controlling the bar's width.

```javascript
const chart = new shapes.chart.Plot({
    // ...
    series: [
        { name: 'myserie', bars: true, data: [{ x: 2, y: 20 }, ... ] }
    ]
    // ...
});

```

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

### Calc Examples

Source: https://docs.jointjs.com/learn/features/customizing-shapes/relative-dimensions

Various examples of using calc() with different SVG elements and attributes.

```javascript
el.resize(200, 100);

// <rect joint-selector="myRect" width="200" height="100" rx="20" ry="10" />
el.attr('myRect', {
    width: 'calc(w)',
    height: 'calc(h)',
    rx: 'calc(0.1*w)',
    ry: 'calc(0.1*h)'
});

// <image joint-selector="myImage" x="105" y="55" />
el.attr('myImage/x', 'calc(0.5*w+5)');
el.attr('myImage/y', 'calc(0.5*h+5)');

// <path joint-selector="myPath" d="M 10 50 190 50" />
el.attr('myPath/d', 'M 10 calc(0.5*h) calc(w-10) calc(0.5*h)')

// <polygon joint-selector="myPolygon" points="0,0 200,0 200,100 0,100" />
el.attr('myPolygon/d', '0,0 calc(w),0 calc(w),calc(h) 0,calc(h)');

// Resize the rectangle to match the text size with extra 5 pixels of padding
// <rect joint-selector="myTextBackground" />
// <text joint-selector="myText" >Some text</text>
el.attr('myTextBackground', {
    ref: 'myText',
    x: 'calc(x - 5)',
    y: 'calc(y - 5)'
    width: 'calc(w + 10)',
    height: 'calc(h + 10)',
 });
```

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

### Using the setText() Prototype Method

Source: https://docs.jointjs.com/learn/features/customizing-shapes/creating-a-shape-from-scratch

An example illustrating how to use the `setText()` prototype method to initialize the label text of a custom shape instance.

```javascript
// create namespace, graph and paper  
// ...  
  
// create an instance of MyShape and set its text  
const myShape = new MyShape().setText(text);  
```

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

### Access Visio using UMD namespace

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

Example code demonstrating how to import a VSDX file using the UMD distribution and access Visio through the 'joint.format' namespace.

```javascript
joint.format.Visio.VisioArchive.fromURL('network.vsdx').then((archive) => {  
    const page = archive.document.getPages()[0];  
    const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });  
    const paper = new joint.dia.Paper({  
        el: document.getElementById('paper'),  
        model: graph,  
        cellViewNamespace: joint.shapes,  
        interactive: false,  
        width: page.width,  
        height: page.height,  
        async: true,  
        frozen: true  
    });  
  
    page.getContent().then((content) => {  
        const cells = content.toGraphCells();  
        graph.resetCells(cells);  
        paper.unfreeze();  
    });  
});  
```

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

### Dialog Installation with ES Modules

Source: https://docs.jointjs.com/learn/features/popups-and-menus/dialog

Installs and opens a dialog box using ES modules.

```javascript
import { ui } from '@joint/plus';

const dialog = new ui.Dialog({
    width: 300,
    title: 'My title',
    content: 'This is my dialog box.'
});

dialog.open();

```

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

### Popup Installation (ESM)

Source: https://docs.jointjs.com/learn/features/popups-and-menus/popup

Access `Popup` via the `ui` namespace, and create an instance. Then, specify the content, and call the `render()` method in order to open the popup.

```javascript
import { dia, shapes, ui } from '@joint/plus';  
  
const element = new shapes.standard.Rectangle({  
    position: { x: 10, y: 10 },  
    size: { width: 80, height: 50 },  
    attrs: { label: { text: 'Rect' }}  
});  
  
const elementView = element.findView(paper);  
  
new ui.Popup({  
    content: '<b>I am a ui.Popup</b>',  
    target: elementView.el  
}).render();  

```

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

### Default Label Example

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

An example of creating a new link instance with both the `defaultLabel` and `labels` properties specified.

```javascript
import { shapes } from '@joint/core';

const link = new shapes.standard.Link({
    source: { x: 50, y: 400 },
    target: { x: 500, y: 400 },
    defaultLabel: {
        // applied to all labels on this link:
        markup: [
            {
                tagName: 'rect',
                selector: 'body'
            }, {
                tagName: 'text',
                selector: 'label'
            }
        ],
        size: {
            // used by `calc()` expressions in `attrs`
            width: 150,
            height: 30
        },
        attrs: {
            body: {
                width: 'calc(w)',
                height: 'calc(h)',
                // center around label position:
                x: 'calc(w/-2)',
                y: 'calc(h/-2)',
                stroke: 'black',
                fill: 'white'
            },
            label: {
                textWrap: {
                    width: 'calc(w-5)',
                    height: 'calc(h-5)'
                },
                // center text around label position:
                // (no `x` and `y` provided = no offset)
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                fontSize: 16,
                fontFamily: 'sans-serif'
            }
        }
    },
    labels: [{
        // specification of an individual label:
        size: { width: 200 }, // partially overwrites `defaultLabel.size`
        attrs: {
            label: {
                text: 'Hello World'
            }
        },
        position: { distance: 0.25 } // overwrites built-in default
    }]
});

```

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

### Setting a Built-in Connection Strategy

Source: https://docs.jointjs.com/learn/features/diagram-basics/links

Example of setting the 'pinAbsolute' connection strategy on a paper.

```javascript
import { connectionStrategies } from '@joint/core';

paper.options.connectionStrategy = connectionStrategies.pinAbsolute;
```

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

### UMD Installation - JavaScript

Source: https://docs.jointjs.com/learn/features/popups-and-menus/lightbox

Access `Lightbox` through the `joint.ui` namespace.

```javascript
const lightbox = new joint.ui.Lightbox({  
    title: 'Image caption goes here.',  
    image: 'images/lightbox.png'  
});  
  
lightbox.open();  


```

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

### Install VSM shapes using yarn

Source: https://docs.jointjs.com/learn/features/ready-to-use-shapes/vsm

Install the VSM shapes package using yarn.

```bash
yarn add @joint/shapes-vsm@file:joint-vsm-shapes.tgz  
```
Tokens:
Raw