Back to jointjs.com.

Jump to other additions.

CHANGELOG

• Upgrade jQuery dependency (v3.7.1)

  jQuery v3.7.0 adds several minor fixes.

  jQuery v3.7.1 adds several minor fixes.

---

• Add ImageProcessor Application

  Wondering how to process images in a node-based manner? Use our image processing application that combines the best of JointJS+ and the open-source OpenCV library, and easily manipulate images with filters and transformation tools.

  In the example below, you can see how images are loaded and processed using nodes, proving that creating large-scale workflows is possible with JointJS+. The default example lets you create a token for various TTRPG from several images.

  

  Live ImageProcessor Demo

---

• Add Angular16 version of Chatbot Application

  A version of the application built for Angular16 was added to the apps/Chatbot folder.

  Live Chatbot Demo

---

• In Chatbot Application, ensure that components are destroyed properly

  This fix resolves an issue where component Subscriptions were not cleared as expected when a component was destroyed.

  Live Chatbot Demo

---

• Add Angular16 version of KitchenSink Application

  A version of the application built for Angular16 was added to the apps/KitchenSink folder.

  Live KitchenSink Demo

---

• In OrgChart Application, change deprecated rounded connector to straight

  The rounded connector was deprecated in release 3.7.0. This change brings the OrgChart Application into alignment by switching to the straight connector.

  Live OrgChart Demo

---

• Redesign Yamazumi3D Application

  A new look of the application was released as part of our Demo Wednesday initiative. The redesigned application also comes with a new feature - a slider to interactively increase or decrease the duration of a task.

  

  Live Yamazumi3D Demo

---

• dia.CommandManager - prevent error on undo after graph.resetCells()

  Previously, when changes were stored in the history stack of the CommandManager, followed by resetting the Graph using the resetCells() method, then clicking the undo button in the Toolbar would cause an error. The issue was that CommandManager was trying to access Cells which were no longer present in the Graph.

  To prevent this issue, JointJS+ will now listen for the reset event on the Graph and reset the CommandManager as well.

---

• format.Visio - fix opening documents with missing NURBS value

  Some Visio clients may leave the NURBS formula cell value empty, which was previously causing an error in the JointJS+ Visio parser.

  We updated the logic in this case so that the parser tries to get the formula from the formula cell as well. If that cannot be done either, then the parser concludes that the spline cannot be drawn, ignores it, records the issue into the debug log, and moves on.

---

• ui.ContextToolbar - fix to prevent error on remove() inside all and close events

  Previously, the following two scenarios resulted in an error:

  contextToolbar.on('all', () => contextToolbar.remove());
  contextToolbar.on('close', () => contextToolbar.remove());
  

---

• ui.FreeTransform - fix to let all drag & drop handlers share the event data object

  It was previously not possible to share the event data object between the resize:start and rotate:start events and the rest of their respective interaction events.

  This means that it is now possible to share data like this:

  freeTransform.on({
      'resize:start': (evt) => {
          evt.data.resizeTest = 1;
      },
      'resize': (evt) => {
          console.log(evt.data.resizeTest); // value from `resize:start`
      },
      'resize:stop': (_, evt) => {
          console.log(evt.data.resizeTest); // value from `resize:start`
      },
      'rotate:start': (evt) => {
          evt.data.rotateTest = 1;
      },
      'rotate': (evt) => {
          console.log(evt.data.rotateTest); // value from `rotate:start`
      },
      'rotate:stop': (_, evt) => {
          console.log(evt.data.rotateTest); // value from `rotate:start`
      },
  });
  

---

• ui.Halo - fix to make sure that the action:link:add event is triggered within the current batch command

  Previously, the logic inside any action:link:add handlers was triggered outside the link creation CommandManager batch operation. This caused unexpected additional entries to be added to the undo/redo stack.

  For example, the following example would previously create 2 entries in the CommandManager, while the expected amount is 0. The new version fixes the issue.

  halo.on('action:link:add', function(link) {
      if (!link.get('source').id || !link.get('target').id) {
          link.remove();
      }
  });
  

---

• ui.Navigator - fix paper position for flexbox layouts

  Fix Navigator’s paper position when the parent element of the Navigator uses the flexbox layout.

  Before fix	After fix

---

• ui.Navigator - fix to scroll to point when clicking outside the current view when useContentBBox is in use

---

• ui.PaperScroller - fix to keep the focus point in the middle of the viewport after the window size has changed

---

• ui.PaperScroller - fix to throw an error when width and/or height of provided Paper object is not a number

---

• ui.Selection - fix to prevent the browser from zooming with the mousewheel

---

• ui.Stencil - fix to let all drag & drop handlers share the event data object

  It was previously not possible to share the event data object between the element:dragstart event and the rest of the dragging events in the case that the startDragging(el, evt) function was called at a point in time where the passed evt didn’t have data object initialized. (Note that not having the data object defined was rather unusual, though.)

  This means that it is now possible to share data like this:

  stencil.on({
      'element:dragstart': (_, evt) => {
          evt.data.test = 1;
      },
      'element:drag': (_, evt) => {
          console.log(evt.data.test); // value from `element:dragstart`
      },
      'element:dragend': (_, evt) => {
          console.log(evt.data.test); // value from `element:dragstart`
      },
      'element:drop': (_, evt) => {
          console.log(evt.data.test); // value from `element:dragstart`
      }
  });
  

  The workaround needed prior to this change is no longer necessary:

  // WORKAROUND NOT NEEDED ANYMORE:
  evt.data = {};
  stencil.startDragging(element, evt);
  

---

• shapes.standard.Record - fix to prevent Links that are not connected to any items

---

• shapes.standard - fix cursor style on DoubleLink and ShadowLink

---

• dia.Paper - fix custom events on link label

---

• dia.LinkView - fix to prevent hidden doubleLinkTools affecting link bounding box

---

• dia.Cell - make prop() function’s internal set() call more efficient

---

• linkTools.Segments - throw an explicit error when an incompatible router is in use

---

• connectors.Curve - fix wrong target tangent right direction

---

• dia.attributes - fix ambiguous order of cache keys in text attribute

---

• dia.attributes - fix to read all breakText options in textWrap attribute

---

• util.breakText - fix to use the defined separator to join words

---

• util.breakText - fix to allow empty string to be separator

---

• util.breakText - fix hyphenation regex to take international characters into account

---

• Geometry - prevent unnecessary object instantiation in containsPoint() of Rect

---

• Geometry - prevent rounding errors in simplify() of Polyline

---

Other Additions

• Update Vue tutorial to use create-vue command and Composition API

  Update tutorial for VueTs integration with JointJS+ using create-vue command and Composition API (and Vite). This tutorial is referencing the main branch of Vue tutorial repository.

  Go to tutorial