JointJS+ v4.1

Released: Dec 5, 2024

v4.1 での更新項目

機能

  • New demo applications - Five new advanced applications have been added that are ready to use in your project:
    • BPMN Pools, Swimlanes and Milestones - Explore enhanced BPMN Pools, Swimlanes, and Milestones with drag-and-drop functionality for a seamless user experience. This demo showcases how to insert, reorder, and resize swimlanes and phases with automatic content adjustments. Discover features like vertical pools, content awareness, preventing resizing beyond boundaries, along with previews and highlights to guide your actions.
      • New BPMN2 shapes: Several new shapes (horizontal and vertical) have also been added for composable BPMN2 pools: Pools, Pools without header, Swimlanes and Phases.
    • Sheet cutting - The new Sheet Cutting app simplifies creating and optimizing cutting plans. It uses JointJS highlighters to identify overlapping elements and offers features like drag-and-drop, shape rotation, and grid snapping.
    • Theory of Change - Need an in-depth analysis of your project's outcomes and impacts? The Theory of Change app helps visualize goals, strategies, and challenges. It uses a stack layout to map steps and relationships, providing a clear path to your desired impact.
    • Tree Designer - The Tree Designer app simplifies visualizing hierarchical information with a custom tree layout that automatically organizes nodes for clarity. Featuring a custom Inspector, it lets you customize nodes and edges, add or remove child nodes, and refine the hierarchy effortlessly.
    • Kitchen Sink - The "all-feature app" has been completely redesigned and is now available in all versions: Vanilla JavaScript, TypeScript, React, Angular, Vue, and Svelte.
  • New Halo type - The Halo plugin now offers greater flexibility, enabling you to tailor it to your unique business needs. You can now define custom handle positions and adjust their appearance, Group handles with the same position into a neat grid, and more.
  • Support for different cell selection methods and their visualization
    • Selection is now more versatile than ever. With the latest improvements, you can customize selection frames, include links, add a clone handle, and much more.
    • You can also decide how cells are selected using rectangular, polygonal, and range selection regions.
    • You can now see elements being selected as you go in real time.
  • Refactor of the Force Directed layout - The Force Directed layout algorithm has been improved to be more customizable and interactive. It now organizes elements visually while enhancing performance with Barnes-Hut approximation (especially for a large amount of cells). Real-time interactions and dynamic updates, like adding new elements, are also supported. A radial force has also been introduced to the layout algorithm, ideal for spacing elements around a specific point.
  • Introduced a drop-in replacement graph optimized for spatial queries - In many applications, searching for cells based on spatial properties is crucial, such as finding all cells within a rectangle. While the usual approach iterates through all cells, JointJS+ optimizes this process with the SearchGraph class, using a quadtree to index cells by their bounding boxes. This drop-in replacement for JointJS Graph enhances performance without requiring code changes.
  • Advanced visualization using custom SVG attributes - APIs for special presentation attributes have been standardized and exposed, enabling you to define custom attributes.
  • Other changes
    • Support for custom interactions with Stencil - The new dragThreshold option lets you delay the start of dragging, enabling actions such as selecting elements in the stencil, opening a menu, or performing other custom behaviors.
    • New link tools and options:
      • With new dynamic positioning and visibility, you can now add extra tools to a link when it's too long to help users locate them more easily or display a button to add a label only if one doesn't already exist.
      • You can now create custom control tools for links, and a built-in tool has been included for rotating labels.
    • Export/Import to Visio & BPMN - The Visio and BPMN export/import plugin has received significant improvements, including various fixes, new options, and enhanced customization capabilities to streamline and simplify the process.
    • Intuitive element resizing - With the new clean and intuitive design, users can now resize elements by dragging the edges of a shape instead of using handles. This design makes it easier to distinguish between the buttons surrounding the shape, such as those for creating links, and the resize handles. To enable this feature, simply activate useBordersToResize option on your FreeTransform.
    • Control the level of detail in exported JSON - In some applications, you may save diagrams as JSON and use them to render diagrams on different clients, requiring the JSON to include all attributes. In other cases, you might aim to minimize the JSON size by including only essential information, with additional attributes being restored when the JSON is loaded back into the browser. You now have full control over which attributes are exported and which are omitted as redundant.

不具合の修正

  • Resolved a longstanding issue where creating a vertex prevented labels from being moved.