DOCSEARCHbyAlgolia
Submit Docs

JointJS Documentation

website·Indexed 34 days ago

https://docs.jointjs.com/

Documentation for JointJS and JointJS+, including the @joint/react library for building diagramming editors. Covers features such as the <PaperScroller> for zoom and pan, <Stencil> for element palettes, <Navigator> for minimaps, and tools for image export, cell selection, and link management. Includes release notes for version 4.3 and guidance on integrating React-rendered nodes with JointJS core.

Tokens
1.2M
Snippets
6.6K
Records
8.4K
Agent score
61%

What's inside JointJS

  1. Overview of joint.dia.LinkView

    The joint.dia.LinkView is the view responsible for rendering a joint.dia.Link model inside a paper and handling its pointer events. It inherits from joint.dia.CellView. To retrieve the view associated with a specific link model, use paper.findViewByModel(link) or link.findView(paper).
    const linkView = paper.findViewByModel(link);
// OR
const linkView = link.findView(paper);

  2. Overview of JointJS connection points

    A link connection point is the endpoint of a link route. It differs from a link anchor point because it accounts for the presence of the end element. Connection points are configured using the connectionPoint property within link end definitions.

  3. Overview of JointJS mvc.Model

    Models in JointJS are the basic data objects used to store a discrete chunk of data and provide methods for computations and transformations on that data. dia.Cell extends mvc.Model.

  4. Overview of the JointJS Geometry library

    The Geometry library is a lightweight, standalone utility built into JointJS that implements various geometry operations. It has no external dependencies and can be used independently of the main JointJS framework.

  5. Overview of SelectionFrameList interface

    The SelectionFrameList is an interface for a collection of selection frames, used by the Selection component to render frames around selected cells. While not intended for direct use by most developers, it can be extended to create custom selection frame lists. Built-in implementations include OverlaySelectionFrameList, SVGSelectionFrameList, HTMLSelectionFrameList, and HighlighterSelectionFrameList.

  6. Overview of VisioDocument in JointJS

    VisioDocument is the top-level model in the Visio archive structure containing all project file data. It is used as the starting point for both importing a Visio (.vsdx) project and exporting a JointJS project to a .vsdx file. During import, it is used to navigate pages, page contents, and master shapes. During export, it helps instantiate VisioShapes based on VisioMaster shapes to build the final .vsdx file.

  7. Overview of JointJS diagramming library

    JointJS is a JavaScript/TypeScript diagramming library used to build visual and No-Code/Low-Code applications, such as interactive diagramming tools, drawing tools, data visualizations, and monitoring system UIs. It relies on JavaScript and SVG to create interactive tools compatible with all modern browsers.

  8. Overview of dia.HighlighterView

    The dia.HighlighterView class is the base class for highlighters in JointJS. It manages the lifecycle of visual markings added to the SVGElements of cellViews. It is designed to be extended rather than initialized directly via a constructor.

  9. Overview of JointJS HighlighterView

    The dia.HighlighterView class is the base class for highlighters. It does not provide a specific visual emphasis itself but manages the mechanisms for displaying, updating, and cleaning arbitrary markings added to the SVGElements of cellViews. It is designed to be extended rather than initialized directly via a constructor.

  10. Overview of Value Stream Mapping (VSM) shapes

    The @joint/shapes-vsm package provides a set of specialized shapes for creating Value Stream Maps. This is an independent module that must be installed as an addition to the main JointJS+ package.

  11. Overview of JointJS link anchors

    A link anchor defines the specific point on a reference link that another link attaches to as its endpoint. Link anchors are configured using the linkAnchor property within link end definitions.

  12. Overview of JointJS Highlighters

    Highlighters provide visual emphasis to shapes or specific parts of a shape (using markup selectors) during user interactions or event triggers. All built-in highlighters inherit from dia.HighlighterView and are available in the highlighters namespace.