Merge tag 'v13.4.0' into update_to_v13-4

13.4.0

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -17,7 +17,7 @@ Steps to reproduce the behavior:
 1. do this
 2. do that
 
-If possible, try to build [a test case](https://github.com/bpmn-io/diagram-js/tree/master/test/spec) that reproduces your problem.
+If possible, try to build [a test case](https://github.com/bpmn-io/diagram-js/tree/main/test/spec) that reproduces your problem.
 
 
 ### Expected Behavior

.github/workflows/CI.yml

@@ -11,11 +11,11 @@ jobs:
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 16
+        node-version: 20
         cache: 'npm'
     - name: Install dependencies
       run: npm ci

.github/workflows/CODE_SCANNING.yml

@@ -2,9 +2,9 @@ name: "Code Scanning"
 
 on:
   push:
-    branches: [ master, develop ]
+    branches: [ main, develop ]
   pull_request:
-    branches: [ master, develop ]
+    branches: [ main, develop ]
     paths-ignore:
       - '**/*.md'
 
@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/MERGE_MASTER_TO_DEVELOP.yml

@@ -1,26 +1,26 @@
-name: MERGE_MASTER_TO_DEVELOP
+name: MERGE_MAIN_TO_DEVELOP
 on:
   push:
     branches:
-    - "master"
+    - "main"
 
 jobs:
-  Merge_master_to_develop:
+  Merge_main_to_develop:
     runs-on: ubuntu-latest
     permissions:
       contents: write
 
     steps:
     - name: Checkout develop
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
       with:
         ref: develop
         fetch-depth: 0
-    - name: Merge master to develop and push
+    - name: Merge main to develop and push
       run: |
         git config user.name '${{ secrets.BPMN_IO_USERNAME }}'
         git config user.email '${{ secrets.BPMN_IO_EMAIL }}'
-        git merge -m 'Merge master to develop' --no-edit origin/master
+        git merge -m 'Merge main to develop' --no-edit origin/main
         git push
 
     - name: Notify failure on Slack

CHANGELOG.md

@@ -6,6 +6,72 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+## 13.4.0
+
+* `DEPS`: update to `object-refs@0.4.0`
+
+## 13.3.0
+
+* `DEPS`: update to `path-intersection@3`
+
+## 13.2.0
+
+* `FEAT`: add `module` export
+
+## 13.1.0
+
+* `FEAT`: allow non-searchable entries in popup menu ([#835](https://github.com/bpmn-io/diagram-js/pull/835))
+
+## 13.0.0
+
+* `DEPS`: update to `didi@10.0.1`
+
+## 12.8.1
+
+* `FIX`: reposition popup menu if it opens above the viewport ([#829](https://github.com/bpmn-io/diagram-js/pull/829))
+
+## 12.8.0
+
+* `FEAT`: remove selection outline from connections ([#826](https://github.com/bpmn-io/diagram-js/pull/826))
+* `FEAT`: position context pad according to last waypoint for connections ([#826](https://github.com/bpmn-io/diagram-js/pull/826))
+
+## 12.7.3
+
+* `FIX`: correct error when computing outline ([#822](https://github.com/bpmn-io/diagram-js/issues/822))
+
+## 12.7.2
+
+* `FIX`: revert `djs-dragging` CSS class changes ([#821](https://github.com/bpmn-io/diagram-js/pull/821))
+* `FIX`: clear context pad hover timeout on close ([#823](https://github.com/bpmn-io/diagram-js/pull/823))
+
+## 12.7.1
+
+* `FIX`: revert selection outline removal for connections ([#820](https://github.com/bpmn-io/diagram-js/pull/820))
+
+## 12.7.0
+
+* `FEAT`: support `imageHtml` option for popup menu header entries ([#819](https://github.com/bpmn-io/diagram-js/pull/819))
+
+## 12.6.0
+
+* `FEAT`: support custom outline providers ([#817](https://github.com/bpmn-io/diagram-js/pull/817))
+* `FEAT`: remove selection outline from connections ([#817](https://github.com/bpmn-io/diagram-js/pull/817))
+
+## 12.5.0
+
+* `FEAT`: make spacetool local per default ([#811](https://github.com/bpmn-io/diagram-js/pull/811))
+* `FEAT`: add complex preview feature ([#807](https://github.com/bpmn-io/diagram-js/pull/807))
+* `CHORE`: mark connection as dragging when moving bendpoint ([#807](https://github.com/bpmn-io/diagram-js/pull/807))
+
+## 12.4.0
+
+* `FEAT`: add zoom through `Cmd` + mousewheel on macOS ([#806](https://github.com/bpmn-io/diagram-js/pull/806))
+* `FEAT`: add/remove space locally through `Shift` + space tool ([#808](https://github.com/bpmn-io/diagram-js/pull/808))
+
+## 12.3.0
+
+* `FEAT`: don't hide overlays on canvas move by default. The config option `canvas.deferUpdate` now defaults to `false` ([#798](https://github.com/bpmn-io/diagram-js/issues/798))
+
 ## 12.2.0
 
 * `FEAT`: allow to provide html for popup menu entries icons ([#790](https://github.com/bpmn-io/diagram-js/pull/790))

README.md

@@ -20,40 +20,42 @@ Some libraries / applications built on top of diagram-js:
 * [archimate-js](https://github.com/archimodel/archimate-js) - An ArchiMate diagram viewer and editor ([Demo](https://archimodel.net))
 * [chor-js](https://github.com/bptlab/chor-js) - A BPMN 2.0 Choreography diagram viewer and editor ([Demo](https://bpt-lab.org/chor-js-demo/))
 * [Node Sequencer](https://github.com/philippfromme/node-sequencer) - A Node-Based Sequencer for the Web ([Demo](https://philippfromme.github.io/node-sequencer-demo/))
-* [Object Diagram Modeler](https://github.com/timKraeuter/object-diagram-modeler) - An object diagram viewer and editor ([Demo](https://timkraeuter.com/object-diagram-modeler/))
+* [object-diagram-js](https://github.com/timKraeuter/object-diagram-js) - An object diagram viewer and editor ([Demo](https://timkraeuter.com/object-diagram-js/))
 * [postit-js](https://github.com/pinussilvestrus/postit-js) - Create Post-it boards on a canvas editor ([Demo](https://postit-js-demo.netlify.app/))
 
 ## Resources
 
 * [Issues](https://github.com/bpmn-io/diagram-js/issues)
 * [Changelog](./CHANGELOG.md)
-* [Contributing Guide](https://github.com/bpmn-io/diagram-js/blob/master/.github/CONTRIBUTING.md)
+* [Contributing Guide](.github/CONTRIBUTING.md)
 * [Examples](https://github.com/bpmn-io/diagram-js-examples)
 
 
-## Hacking the Project
+## Development
 
-To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.
-As soon as you are set up, clone the project and execute
+Prepare the project by installing all dependencies:
 
-```
+```sh
 npm install
 ```
 
+Then, depending on your use-case you may run any of the following commands:
 
-### Testing
-
-Execute `npm run dev` to run the test suite in watch mode.
-
-Expose an environment variable `TEST_BROWSERS=(Chrome|Firefox|IE)` to execute the tests in a non-headless browser.
+```sh
+# build the library and run all tests
+npm run all
 
+# run the development setup
+npm run dev
 
-### Package
-
-Execute `npm run all` to lint and test the project.
+# run tests (single run)
+npm test
+```
 
-__Note:__ We do not generate any build artifacts. Required parts of the library should be bundled by modelers / viewers as needed instead.
+Expose an environment variable `TEST_BROWSERS=(Chrome|Firefox)` to execute the tests in a non-headless browser.
 
+> [!NOTE]
+> We do not generate any build artifacts. Required parts of the library should be bundled by consuming libraries as needed instead.
 
 
 ## License

assets/diagram-js.css

@@ -121,8 +121,13 @@
   stroke: var(--element-selected-outline-stroke-color);
 }
 
+.djs-connection.selected .djs-outline {
+  display: none;
+}
+
 .djs-multi-select .djs-element.selected .djs-outline {
   stroke: var(--element-selected-outline-secondary-stroke-color);
+  display: block;
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
@@ -280,20 +285,12 @@ marker.djs-dragger tspan {
   stroke: var(--element-dragger-color) !important;
 }
 
-.djs-dragging {
-  opacity: 0.3;
-}
-
 .djs-dragging,
 .djs-dragging > * {
+  opacity: 0.3 !important;
   pointer-events: none !important;
 }
 
-.djs-dragging .djs-context-pad,
-.djs-dragging .djs-outline {
-  display: none !important;
-}
-
 /**
  * no pointer events for visual
  */

lib/core/Canvas.js

@@ -227,9 +227,9 @@ Canvas.prototype._init = function(config) {
 
   const viewport = this._viewport = createGroup(svg, 'viewport');
 
-  // debounce canvas.viewbox.changed events
-  // for smoother diagram interaction
-  if (config.deferUpdate !== false) {
+  // debounce canvas.viewbox.changed events when deferUpdate is set
+  // to help with potential performance issues
+  if (config.deferUpdate) {
     this._viewboxChanged = debounce(bind(this._viewboxChanged, this), 300);
   }
 
@@ -1253,6 +1253,11 @@ Canvas.prototype.scrollToElement = function(element, padding) {
     this.setRootElement(rootElement);
   }
 
+  // element is rootElement, do not change viewport
+  if (rootElement === element) {
+    return;
+  }
+
   if (!padding) {
     padding = {};
   }

lib/core/GraphicsFactory.js

@@ -202,13 +202,14 @@ GraphicsFactory.prototype.updateContainments = function(elements) {
  *
  * @param {SVGElement} visual The graphical element.
  * @param {ShapeLike} element The shape.
+ * @param {Object} attrs Optional attributes.
  *
  * @return {SVGElement}
  */
-GraphicsFactory.prototype.drawShape = function(visual, element) {
+GraphicsFactory.prototype.drawShape = function(visual, element, attrs = {}) {
   var eventBus = this._eventBus;
 
-  return eventBus.fire('render.shape', { gfx: visual, element: element });
+  return eventBus.fire('render.shape', { gfx: visual, element, attrs });
 };
 
 /**
@@ -229,13 +230,14 @@ GraphicsFactory.prototype.getShapePath = function(element) {
  *
  * @param {SVGElement} visual The graphical element.
  * @param {ConnectionLike} element The connection.
+ * @param {Object} attrs Optional attributes.
  *
  * @return {SVGElement}
  */
-GraphicsFactory.prototype.drawConnection = function(visual, element) {
+GraphicsFactory.prototype.drawConnection = function(visual, element, attrs = {}) {
   var eventBus = this._eventBus;
 
-  return eventBus.fire('render.connection', { gfx: visual, element: element });
+  return eventBus.fire('render.connection', { gfx: visual, element, attrs });
 };
 
 /**

lib/features/bendpoints/BendpointMovePreview.js

@@ -25,7 +25,7 @@ var MARKER_OK = 'connect-ok',
     MARKER_NOT_OK = 'connect-not-ok',
     MARKER_CONNECT_HOVER = 'connect-hover',
     MARKER_CONNECT_UPDATING = 'djs-updating',
-    MARKER_ELEMENT_HIDDEN = 'djs-element-hidden';
+    MARKER_DRAGGER = 'djs-dragging';
 
 var HIGH_PRIORITY = 1100;
 
@@ -65,7 +65,7 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
 
     svgClasses(draggerGfx).add('djs-dragging');
 
-    canvas.addMarker(connection, MARKER_ELEMENT_HIDDEN);
+    canvas.addMarker(connection, MARKER_DRAGGER);
     canvas.addMarker(connection, MARKER_CONNECT_UPDATING);
   });
 
@@ -195,7 +195,7 @@ export default function BendpointMovePreview(bendpointMove, injector, eventBus,
     svgRemove(draggerGfx);
 
     canvas.removeMarker(connection, MARKER_CONNECT_UPDATING);
-    canvas.removeMarker(connection, MARKER_ELEMENT_HIDDEN);
+    canvas.removeMarker(connection, MARKER_DRAGGER);
 
     if (hover) {
       canvas.removeMarker(hover, MARKER_OK);