[ { "path": ".github/CONTRIBUTING.md", "content": "# How to Contribute\n\nGreat to see you! Help us out by [filing bugs or feature requests](#work-with-issues), assisting others [in our forums](https://forum.bpmn.io/), or [contributing improvements](#contribute-improvements).\n\n## Table of Contents\n\n* [Work with Issues](#work-with-issues)\n * [Create an Issue](#create-an-issue)\n * [Help Out](#help-out)\n* [Contribute Improvements](#contribute-improvements)\n * [Setup the Project](#setup-the-project)\n * [Build and Run the Project](#build-and-run-the-project)\n * [Discuss Code Changes](#discuss-code-changes)\n * [Adhere to the Unit Test Style](#adhere-to-the-unit-test-style)\n * [Create a Pull Request](#create-a-pull-request)\n\n## Work with Issues\n\nWe use our [issue tracker](https://github.com/bpmn-io/bpmn-js/issues) for project communication, discussion, and planning.\n\n### Create an Issue\n\nFile bug reports or feature requests via [our issue tracker](https://github.com/bpmn-io/bpmn-js/issues/new/choose). Please mind the existing issue templates. These guide you and ensure you provide the details needed for us to follow up on your issue.\n\n### Help Out\n\n* Share your perspective on issues\n* Be helpful and respect others when commenting\n\n## Contribute Improvements\n\nLearn how to set up the project locally, make changes, and contribute bug fixes and new features through pull requests.\n\n### Setup the Project\n\nThe project development runs on top of the [diagram-js](https://github.com/bpmn-io/diagram-js) `develop` branch. The following code snippet sets up both libraries linking diagram-js to bpmn-js.\n\n```sh\nmkdir bpmn.io\ncd bpmn.io\n\ngit clone git@github.com:bpmn-io/diagram-js.git -b develop\n(cd diagram-js && npm i)\n\ngit clone git@github.com:bpmn-io/bpmn-js.git\n(cd bpmn-js && npm install && npm link ../diagram-js)\n```\n\nFor details consult our in depth [setup guide](../docs/project/SETUP.md).\n\n### Build and Run the Project\n\nSpin up a single modeler instance for local inspection:\n\n```sh\nnpm start\n```\n\nSpin up the development environment, re-run tests with every file change:\n\n```sh\nnpm run dev\n```\n\nYou may also run against different browsers:\n\n```sh\nTEST_BROWSERS=Firefox npm run dev\n```\n\nBuild, lint, and test the project, just as the CI does.\n\n```sh\nnpm run all\n```\n\n### Discuss Code Changes\n\nCreate a [pull request](#create-a-pull-request) if you would like to have an in-depth discussion about some piece of code.\n\n### Adhere to the Unit Test Style\n\nIn order to retrieve a sign-off for your contribution, it needs to be sufficiently and well tested. Please structure your unit tests into __given__, __when__ and __then__ ([ModelerSpec example](https://github.com/bpmn-io/bpmn-js/blob/develop/test/spec/ModelerSpec.js#L116), [ResizeBehaviorSpec example](https://github.com/bpmn-io/bpmn-js/blob/develop/test/spec/features/modeling/behavior/ResizeBehaviorSpec.js#L38)). To increase overall readability and understandability please also leave two empty lines before `describe(...)`, `it(...)` or _setup_ blocks on the same indentation level ([ModelerSpec example](https://github.com/bpmn-io/bpmn-js/blob/develop/test/spec/ModelerSpec.js#L49), [ResizeBehaviorSpec example](https://github.com/bpmn-io/bpmn-js/blob/develop/test/spec/features/modeling/behavior/ResizeBehaviorSpec.js#L36)).\n\n### Create a Pull Request\n\nWe use pull requests for feature additions and bug fixes. If you are not yet familiar with pull requests, [read this excellent guide](https://gun.io/blog/how-to-github-fork-branch-and-pull-request).\n\nSome things that make it easier for us to accept your pull requests\n\n* The code adheres to our conventions\n * spaces instead of tabs\n * single-quotes\n * ...\n* The code is tested\n* The `npm run all` build passes (executes tests + linting)\n* The work is combined into a single commit\n* The commit messages adhere to the [conventional commits guidelines](https://www.conventionalcommits.org)\n\nWe'd be glad to assist you if you do not get these things right in the first place.\n\n---\n\nThanks for your interest in our library.\n\n:heart: from the bpmn.io team.\n" }, { "path": ".github/ISSUE_TEMPLATE/BUG_REPORT.md", "content": "---\nname: Bug report\nabout: Report a problem and help us fix it.\nlabels: \"bug\"\n---\n\n\n### Describe the Bug\n\n\n\n\n### Steps to Reproduce\n\n1. do this\n2. do that\n\n\n\n### Expected Behavior\n\n\n\n\n### Environment\n\n - Browser: [e.g. IE 11, Chrome 69]\n - OS: [e.g. Windows 7]\n - Library version: [e.g. 2.0.0]\n" }, { "path": ".github/ISSUE_TEMPLATE/FEATURE_REQUEST.md", "content": "---\nname: Feature request\nabout: Suggest an idea or general improvement.\nlabels: \"enhancement\"\n---\n\n\n### Is your feature request related to a problem? Please describe.\n\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n\n### Describe the solution you'd like\n\nA clear and concise description of what you want to happen.\n\n### Describe alternatives you've considered\n\nA clear and concise description of any alternative solutions or features you've considered.\n\n\n### Additional context\n\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/ISSUE_TEMPLATE/TASK.md", "content": "---\nname: Task\nabout: Describe a generic activity we should carry out.\n---\n\n\n### What should we do?\n\n\n\n\n### Why should we do it?\n\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Ask a question\n url: https://forum.bpmn.io\n about: Head over to our community forum to ask questions and get answers." }, { "path": ".github/merge-me.yml", "content": "reviewTeams:\n- modeling-dev\n- modeling-design\n" }, { "path": ".github/workflows/CI.yml", "content": "name: CI\non: [ push, pull_request ]\njobs:\n build_browsers:\n\n strategy:\n fail-fast: false\n matrix:\n os: [ ubuntu-latest ]\n browser: [ Firefox, ChromeHeadless ]\n\n runs-on: ${{ matrix.os }}\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: 'npm'\n - name: Install dependencies\n run: npm ci\n - name: Setup project\n uses: bpmn-io/actions/setup@latest\n - name: Build (with coverage)\n if: matrix.browser == 'ChromeHeadless'\n env:\n COVERAGE: 1\n TEST_BROWSERS: ${{ matrix.browser }}\n run: npm run all\n - name: Build\n if: matrix.browser == 'Firefox'\n env:\n TEST_BROWSERS: ${{ matrix.browser }}\n run: xvfb-run npm run all\n - name: Upload coverage\n if: matrix.browser == 'ChromeHeadless'\n uses: codecov/codecov-action@v5\n with:\n fail_ci_if_error: true\n env:\n CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}\n\n build_os:\n\n strategy:\n fail-fast: false\n matrix:\n os: [ macos-latest, windows-latest ]\n browser: [ ChromeHeadless ]\n\n runs-on: ${{ matrix.os }}\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: 'npm'\n - name: Install dependencies\n run: npm ci\n - name: Setup project\n uses: bpmn-io/actions/setup@latest\n - name: Build\n env:\n TEST_BROWSERS: ${{ matrix.browser }}\n run: npm run all\n" }, { "path": ".github/workflows/CODE_SCANNING.yml", "content": "name: \"Code Scanning\"\n\non:\n push:\n branches: [ main, develop ]\n pull_request:\n branches: [ main, develop ]\n paths-ignore:\n - '**/*.md'\n\njobs:\n codeql-build:\n # CodeQL runs on ubuntu-latest, windows-latest, and macos-latest\n runs-on: ubuntu-latest\n\n permissions:\n # required for all workflows\n security-events: write\n\n steps:\n - name: Checkout repository\n uses: actions/checkout@v6\n\n # Initializes the CodeQL tools for scanning.\n - name: Initialize CodeQL\n uses: github/codeql-action/init@v4\n with:\n languages: javascript\n config: |\n paths-ignore:\n - '**/test'\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@v4\n" }, { "path": ".github/workflows/COMMENT_TARGETS_MAIN.yml", "content": "name: COMMENT_TARGETS_MAIN\non:\n pull_request:\n types:\n - opened\n branches:\n - main\npermissions:\n pull-requests: write\njobs:\n comment:\n name: Comment on targeting main branch\n runs-on: ubuntu-latest\n permissions:\n pull-requests: write\n steps:\n - name: Create comment\n env:\n GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n GH_REPO: ${{ github.repository }}\n NUMBER: ${{ github.event.number }}\n BODY: |\n This pull request targets the `main` branch. Please target `main` for bug fixes only. Target `develop` for regular feature development.\n run: gh issue comment \"$NUMBER\" --body \"$BODY\"" }, { "path": ".github/workflows/MERGE_MAIN_TO_DEVELOP.yml", "content": "name: MERGE_MAIN_TO_DEVELOP\non:\n push:\n branches:\n - \"main\"\n\njobs:\n merge_main_to_develop:\n runs-on: ubuntu-latest\n permissions:\n contents: write\n\n steps:\n - name: Checkout develop\n uses: actions/checkout@v6\n with:\n token: ${{ secrets.BPMN_IO_TOKEN }}\n persist-credentials: true\n ref: develop\n fetch-depth: 0\n - name: Merge main to develop and push\n run: |\n git config user.name '${{ secrets.BPMN_IO_USERNAME }}'\n git config user.email '${{ secrets.BPMN_IO_EMAIL }}'\n git merge -m 'chore: merge main to develop' --no-edit origin/main\n git push\n\n - name: Notify failure on Slack\n if: failure()\n uses: slackapi/slack-github-action@v3\n with:\n method: chat.postMessage\n token: ${{ secrets.SLACK_BOT_TOKEN }}\n payload: |\n channel: ${{ secrets.SLACK_CHANNEL_ID }}\n text: \"Automatic merge of to failed.\"\n" }, { "path": ".github/workflows/POST_RELEASE.yml", "content": "name: POST_RELEASE\non:\n push:\n tags:\n - 'v[0-9]+.[0-9]+.[0-9]+'\n\njobs:\n post_release:\n\n strategy:\n matrix:\n os: [ ubuntu-latest ]\n node-version: [ 20 ]\n\n runs-on: ${{ matrix.os }}\n steps:\n\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'npm'\n \n - name: Setup project\n uses: bpmn-io/actions/setup@latest\n\n - name: Set TAG\n run: echo \"TAG=$(git describe --tags --abbrev=0)\" >> $GITHUB_ENV\n\n - name: Wait for published\n env:\n PKG: 'bpmn-js@${{ env.TAG }}'\n run: tasks/stages/await-published\n\n - name: Update integration test\n env:\n BPMN_IO_TOKEN: ${{ secrets.BPMN_IO_TOKEN }}\n BPMN_IO_EMAIL: ${{ secrets.BPMN_IO_EMAIL }}\n BPMN_IO_USERNAME: ${{ secrets.BPMN_IO_USERNAME }}\n run: tasks/stages/update-integration-test\n\n - name: Update demo\n env:\n BPMN_IO_TOKEN: ${{ secrets.BPMN_IO_TOKEN }}\n BPMN_IO_EMAIL: ${{ secrets.BPMN_IO_EMAIL }}\n BPMN_IO_USERNAME: ${{ secrets.BPMN_IO_USERNAME }}\n BPMN_IO_DEMO_ENDPOINT: ${{ secrets.BPMN_IO_DEMO_ENDPOINT }}\n run: tasks/stages/update-demo\n\n - name: Update examples\n env:\n BPMN_IO_TOKEN: ${{ secrets.BPMN_IO_TOKEN }}\n BPMN_IO_EMAIL: ${{ secrets.BPMN_IO_EMAIL }}\n BPMN_IO_USERNAME: ${{ secrets.BPMN_IO_USERNAME }}\n run: tasks/stages/update-examples\n\n - name: Update website\n env:\n BPMN_IO_TOKEN: ${{ secrets.BPMN_IO_TOKEN }}\n BPMN_IO_EMAIL: ${{ secrets.BPMN_IO_EMAIL }}\n BPMN_IO_USERNAME: ${{ secrets.BPMN_IO_USERNAME }}\n run: tasks/stages/update-website\n\n - name: Update translations\n env:\n GITHUB_TOKEN: ${{ secrets.BPMN_IO_TOKEN }}\n BPMN_IO_EMAIL: ${{ secrets.BPMN_IO_EMAIL }}\n BPMN_IO_USERNAME: ${{ secrets.BPMN_IO_USERNAME }}\n REVIEWERS: 'bpmn-io/modeling-dev'\n TAG: ${{ env.TAG }}\n run: tasks/stages/update-translations\n" }, { "path": ".github/workflows/RELEASE.yml", "content": "name: RELEASE\non:\n push:\n branches:\n - main\n - develop\njobs:\n release_please:\n outputs:\n release_created: ${{ steps.release.outputs.release_created }}\n tag: ${{ steps.release.outputs.tag_name }}\n permissions:\n contents: write # to create release commit (google-github-actions/release-please-action)\n pull-requests: write # to create release PR (google-github-actions/release-please-action)\n\n runs-on: ubuntu-latest\n steps:\n - uses: google-github-actions/release-please-action@v4\n id: release\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n target-branch: main\n release-type: node\n\n publish:\n needs: release_please\n if: ${{ needs.release_please.outputs.release_created }}\n\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: 'npm'\n registry-url: 'https://registry.npmjs.org'\n - name: Install dependencies\n run: npm ci\n - run: npm publish\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}" }, { "path": ".gitignore", "content": "node_modules/\ndist/\ncoverage/\nlib/**/*.d.ts\n.idea\n*.iml\n.DS_Store" }, { "path": ".release-please-manifest.json", "content": "{\n \"pull-request-title-pattern\": \"chore: release v${version}\",\n \"changelog-sections\": \"[{\\\"type\\\":\\\"feat\\\",\\\"section\\\":\\\"Features\\\",\\\"hidden\\\":false},{\\\"type\\\":\\\"fix\\\",\\\"section\\\":\\\"Bug Fixes\\\",\\\"hidden\\\":false},{\\\"type\\\":\\\"deps\\\",\\\"section\\\":\\\"Dependency Updates\\\",\\\"hidden\\\":false}]\",\n \"changelog-type\": \"github\",\n \".\": \"18.13.0\"\n}" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nAll notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documented here. We use [semantic versioning](http://semver.org/) for releases.\n\n## Unreleased\n\n___Note:__ Yet to be released changes appear here._\n\n* `FIX`: disable grouping in popup menu during search ([bpmn-io/diagram-js#1014](https://github.com/bpmn-io/diagram-js/pull/1014))\n* `FIX`: correct handling of annotations during sub-process collapse/expand, copy/paste, and remove actions ([#2388](https://github.com/bpmn-io/bpmn-js/pull/2388))\n* `FIX`: allow undo of pasted sub-process ([#2388](https://github.com/bpmn-io/bpmn-js/pull/2388), [#2269](https://github.com/bpmn-io/bpmn-js/issues/2269))\n* `DEPS`: update to `diagram-js@15.10.0`\n\n## 18.13.1\n\n* `FIX`: correct sequence flow layout for corner boundary events whose target is strictly axis-aligned ([#2270](https://github.com/bpmn-io/bpmn-js/issues/2270))\n\n## 18.13.0\n\n* `FEAT`: allow to create child elements from the context pad ([#2391](https://github.com/bpmn-io/bpmn-js/issues/2391))\n\n## 18.12.1\n\n* `FIX`: correctly replace non-interrupting event with an interrupting one ([#2313](https://github.com/bpmn-io/bpmn-js/issues/2313))\n\n## 18.12.0\n\n* `FEAT`: activate wheel zoom/scoll on `mouseover` ([#1008](https://github.com/bpmn-io/diagram-js/pull/1008))\n* `FEAT`: prevent keyboard movement for boundary events without host ([#2386](https://github.com/bpmn-io/bpmn-js/pull/2386))\n* `FIX`: prevent accidental creation of intermediate events during keyboard move ([#1803](https://github.com/bpmn-io/bpmn-js/issues/1803), [#1876](https://github.com/bpmn-io/bpmn-js/issues/1876))\n* `DEPS`: update to `diagram-js@15.9.0`\n\n## 18.11.0\n\n* `FEAT`: add `cut` action and keyboard shortcut ([bpmn-io/diagram-js#1006](https://github.com/bpmn-io/diagram-js/pull/1006))\n* `DEPS`: update to `diagram-js@15.7.0`\n* `DEPS`: update to `bpmn-moddle@10.0.0`\n* `DEPS`: update to `min-dash@5.0.0`\n* `DEPS`: update to `ids@3.0.0`\n* `DEPS`: update to `tiny-svg@4.1.4`\n* `DEPS`: update to `diagram-js-direct-editing@3.3.0`\n* `DEPS`: update to `min-dom@5.2.0`\n\n## 18.10.1\n\n* `DEPS`: update to `min-dash@4.2.3`\n* `DEPS`: update to `tiny-svg@3.1.3`\n\n## 18.10.0\n\n* `FEAT`: add ability to duplicate elements ([bpmn-io/diagram-js#998](https://github.com/bpmn-io/diagram-js/pull/998))\n* `DEPS`: update to `diagram-js@15.5.0`\n\n## 18.9.1\n\n* `FIX`: only draw links for currently selected elements ([#2365](https://github.com/bpmn-io/bpmn-js/pull/2365))\n\n## 18.9.0\n\n* `FEAT`: visually link external label with its target ([#2328](https://github.com/bpmn-io/bpmn-js/pull/2328))\n* `FEAT`: add support for labels to `OutlineProvider#getOutline`\n* `FIX`: ensure `BpmnRenderer#getShapePath` returns correct path for labels\n\n## 18.8.0\n\n* `FEAT`: allow copying data object references and `isCollection` property ([#2348](https://github.com/bpmn-io/bpmn-js/pull/2348))\n\n## 18.7.0\n\n* `FEAT`: support disabled entries in popup menu ([bpmn-io/diagram-js#987](https://github.com/bpmn-io/diagram-js/pull/987))\n* `DEPS`: update to `diagram-js@15.4.0`\n\n## 18.6.5\n\n* `FIX`: ensure popup menu keyboard navigation accounts for group order ([bpmn-io/diagram-js#989](https://github.com/bpmn-io/diagram-js/pull/989))\n* `DEPS`: update to `diagram-js@15.3.1`\n\n## 18.6.4\n\n* `FIX`: revert `AdHocSubProcess#cancelRemainingInstances` default value removal ([bpmn-io/bpmn-moddle#132](https://github.com/bpmn-io/bpmn-moddle/pull/132))\n* `DEPS`: update to `bpmn-moddle@9.0.4`\n\n## 18.6.3\n\n* `FIX`: remove `AdHocSubProcess#cancelRemainingInstances` default value ([bpmn-io/bpmn-moddle#131](https://github.com/bpmn-io/bpmn-moddle/issues/131))\n* `DEPS`: update to `bpmn-moddle@9.0.3`\n\n## 18.6.2\n\n* `FIX`: center task markers ([#1995](https://github.com/bpmn-io/bpmn-js/issues/1995))\n\n## 18.6.1\n\n* `FIX`: copy error, escalation, message and signal references when copying elements ([#1906](https://github.com/bpmn-io/bpmn-js/issues/1906), [#2249](https://github.com/bpmn-io/bpmn-js/issues/2249), [#2301](https://github.com/bpmn-io/bpmn-js/pull/2301))\n\n## 18.6.0\n\n* `FEAT`: support searching through arrays in popup menu ([bpmn-io/diagram-js#970](https://github.com/bpmn-io/diagram-js/pull/970))\n* `FEAT`: prioritize `search` over `description` when matching popup menu entries ([bpmn-io/diagram-js#963](https://github.com/bpmn-io/diagram-js/pull/963))\n* `FEAT`: sort `search` terms across all keys ([bpmn-io/diagram-js#963](https://github.com/bpmn-io/diagram-js/pull/963))\n* `FIX`: always select first search entry ([bpmn-io/diagram-js#967](https://github.com/bpmn-io/diagram-js/pull/967))\n* `DEPS`: update to `diagram-js@15.3.0`\n\n## 18.5.0\n\n* `FEAT`: allow text annotations for message flows ([#2281](https://github.com/bpmn-io/bpmn-js/issues/2281))\n\n## 18.4.0\n\n* `FEAT`: render collapsed event subprocess icons ([#50](https://github.com/bpmn-io/bpmn-js/issues/50))\n\n## 18.3.2\n\n* `FIX`: remove default start event for ad-hoc subprocess ([#2295](https://github.com/bpmn-io/bpmn-js/issues/2295))\n* `FIX`: show modeling feedback error for data objects ([#2290](https://github.com/bpmn-io/bpmn-js/pull/2290))\n\n## 18.3.1\n\n* `FIX`: move artifacts when a participant is resized by space tool ([#2285](https://github.com/bpmn-io/bpmn-js/pull/2285))\n\n## 18.3.0\n\n* `FEAT`: allow to replace between variants of typed events ([#2282](https://github.com/bpmn-io/bpmn-js/pull/2282))\n\n## 18.2.0\n\n* `FEAT`: add ad-hoc subprocess option to replace menu ([#2276](https://github.com/bpmn-io/bpmn-js/pull/2276))\n\n## 18.1.2\n\n* `FIX`: canvas `autoFocus` must explicitly be enabled ([bpmn-io/diagram-js#956](https://github.com/bpmn-io/diagram-js/pull/956))\n* `FIX`: properly integrate `zoomscroll` with canvas focus ([bpmn-io/diagram-js#956](https://github.com/bpmn-io/diagram-js/pull/956))\n* `FIX`: properly integrate `movecanvas` with canvas focus ([bpmn-io/diagram-js#956](https://github.com/bpmn-io/diagram-js/pull/956))\n\n## 18.1.1\n\n* `FIX`: adjust search to prioritize start of word and exact matches ([bpmn-io/diagram-js#953](https://github.com/bpmn-io/diagram-js/pull/953))\n* `FIX`: ignore whitespace when searching ([bpmn-io/diagram-js#954](https://github.com/bpmn-io/diagram-js/pull/954))\n\n## 18.1.0\n\n* `FIX`: clear selection when opening search pad ([bpmn-io/diagram-js#947](https://github.com/bpmn-io/diagram-js/pull/947))\n* `FIX`: correct dangling selection after search pad interaction ([bpmn-io/diagram-js#947](https://github.com/bpmn-io/diagram-js/pull/947))\n* `DEPS`: update to `diagram-js@15.2.2`\n\n## 18.0.0\n\n* `FEAT`: remove `outline` from `Viewer` modules ([#2135](https://github.com/bpmn-io/bpmn-js/issues/2135))\n* `FEAT`: make `Canvas` a focusable element ([bpmn-io/diagram-js#662](https://github.com/bpmn-io/diagram-js/pull/662))\n* `FEAT`: implicit keyboard binding ([bpmn-io/diagram-js#662](https://github.com/bpmn-io/diagram-js/pull/662))\n* `FEAT`: integrate with global `search` ([#2235](https://github.com/bpmn-io/bpmn-js/pull/2235))\n* `FEAT`: integrate `popup-menu` with `search` ([bpmn-io/diagram-js#932](https://github.com/bpmn-io/diagram-js/pull/932))\n* `FEAT`: recognize modern `search` tokens in `search-pad` ([bpmn-io/diagram-js#932](https://github.com/bpmn-io/diagram-js/pull/932))\n* `FIX`: correctly handle duplicate entries and whitespace in `search` ([bpmn-io/diagram-js#932](https://github.com/bpmn-io/diagram-js/pull/932))\n* `FIX`: find `search` terms across all keys ([bpmn-io/diagram-js#932](https://github.com/bpmn-io/diagram-js/pull/932))\n* `FIX`: `search` always returns tokens for matched items ([bpmn-io/diagram-js#932](https://github.com/bpmn-io/diagram-js/pull/932))\n* `FIX`: prevent crash during label adjustment ([#2239](https://github.com/bpmn-io/bpmn-js/issues/2239))\n* `FIX`: keep existing loop characteristics when toggling through the replace menu ([#2251](https://github.com/bpmn-io/bpmn-js/pull/2251))\n* `FIX`: prevent covering multi selection with black box in `Viewer` ([#2135](https://github.com/bpmn-io/bpmn-js/issues/2135))\n* `FIX`: generate types for main entry ([`986e2bb`](https://github.com/bpmn-io/bpmn-js/commit/986e2bb51ea301e6e0df56f3606a27424fb90179))\n* `FIX`: correct handling of group name with whitespace only ([#2231](https://github.com/bpmn-io/bpmn-js/issues/2231))\n* `DEPS`: update to `bpmn-moddle@9` ([#2114](https://github.com/bpmn-io/bpmn-js/pull/2114))\n* `DEPS`: update to `diagram-js@15.1.0`\n* `DEPS`: update to `diagram-js-direct-editing@3.2.0`\n\n### Breaking Changes\n\n* Require `Node >= 20`\n* `Canvas` is now a focusable element and provides better support for native browser behaviors. Focus can be controlled with new `focus` and `restoreFocus` APIs ([bpmn-io/diagram-js#662](https://github.com/bpmn-io/diagram-js/pull/662)).\n* Keyboard is now implicitly bound to canvas SVG element. Calls to `keyboard.bind` and `keyboard.bindTo` now result with a descriptive console error and have no effect ([bpmn-io/diagram-js#662](https://github.com/bpmn-io/diagram-js/pull/662)).\n* Selection outline is no longer included in the viewer. If needed, add it as an additional module ([#2253](https://github.com/bpmn-io/bpmn-js/pull/2253)).\n\n## 17.11.1\n\n* `FIX`: handle searching elements without labels ([#2232](https://github.com/bpmn-io/bpmn-js/issues/2232), [#2234](https://github.com/bpmn-io/bpmn-js/pull/2234))\n\n## 17.11.0\n\n* `FEAT`: align search styles with other popups ([#2187](https://github.com/bpmn-io/bpmn-js/pull/2187))\n* `FEAT`: prioritize start of tokens in search results ([#2187](https://github.com/bpmn-io/bpmn-js/pull/2187))\n* `FIX`: do not commit viewport changes on `ESC` ([#2189](https://github.com/bpmn-io/bpmn-js/issues/2189), [#2187](https://github.com/bpmn-io/bpmn-js/pull/2187))\n* `DEPS`: update to `diagram-js@14.10.0`\n\n## 17.10.0\n\n* `CHORE`: correct various type hints ([#2228](https://github.com/bpmn-io/bpmn-js/issues/2228))\n* `FIX`: pasting compensation activity without boundary event ([#2070](https://github.com/bpmn-io/bpmn-js/issues/2070))\n* `FIX`: lane resize constraints for se and nw direction ([#2209](https://github.com/bpmn-io/bpmn-js/issues/2209))\n* `FIX`: auto place elements vertically in sub-processes ([#2127](https://github.com/bpmn-io/bpmn-js/issues/2127))\n* `FIX`: hide lane label during direct editing\n* `DEPS`: update to `diagram-js@14.9.0`\n\n## 17.9.2\n\n* `FIX`: keep direction when collapsing pools ([#2208](https://github.com/bpmn-io/bpmn-js/issues/2208))\n\n## 17.9.1\n\n* `FIX`: show delete action for labels ([#2163](https://github.com/bpmn-io/bpmn-js/issues/2163))\n\n## 17.9.0\n\n* `FIX`: remove incorrect attribute in replace menu ([#2196](https://github.com/bpmn-io/bpmn-js/pull/2196))\n* `DEPS`: update to diagram-js@14.7.2\n\n## 17.8.3\n\n* `FIX`: add accessible label to drill down button ([#2194](https://github.com/bpmn-io/bpmn-js/pull/2194))\n\n## 17.8.2\n\n* `FIX`: do not suggest root elements in search ([#2143](https://github.com/bpmn-io/bpmn-js/issues/2143))\n\n## 17.8.1\n\n* `FIX`: gracefully handle missing process DI in drilldown ([#2180](https://github.com/bpmn-io/bpmn-js/pull/2180))\n* `FIX`: do not cause HTML validation errors on move preview ([#2179](https://github.com/bpmn-io/bpmn-js/issues/2179))\n* `DEPS`: update to `diagram-js@14.7.1`\n\n## 17.8.0\n\n* `FEAT`: keep global elements when deleting last participant ([#2175](https://github.com/bpmn-io/bpmn-js/pull/2175))\n* `FIX`: allow undo after deleting last participants and data store ([#1676](https://github.com/bpmn-io/bpmn-js/issues/1676))\n* `FIX`: allow styling markers with `canvas.addMarker` and css ([#2173](https://github.com/bpmn-io/bpmn-js/pull/2173))\n* `CHORE`: render flow markers as part of `djs-visual` ([#2173](https://github.com/bpmn-io/bpmn-js/pull/2173))\n* `DEPS`: update to `diagram-js@14.7.0`\n\n## 17.7.1\n\n* `FIX`: correct call activity outline ([#2167](https://github.com/bpmn-io/bpmn-js/issues/2167))\n* `FIX`: gracefully handle missing `BPMNDiagram#plane` ([#2172](https://github.com/bpmn-io/bpmn-js/pull/2172), [#2171](https://github.com/bpmn-io/bpmn-js/pull/2171))\n\n## 17.7.0\n\n* `DEPS`: update to `diagram-js@14.6.0`\n\n## 17.6.4\n\n* `DEPS`: update to `diagram-js@14.5.4`\n\n## 17.6.3\n\n* `DEPS`: update to `diagram-js@14.5.3`\n\n## 17.6.2\n\n* `DEPS`: update to `diagram-js@14.5.2` ([#2158](https://github.com/bpmn-io/bpmn-js/pull/2158))\n\n## 17.6.1\n\n* `DEPS`: update to `diagram-js@14.5.1` ([#2157](https://github.com/bpmn-io/bpmn-js/pull/2157))\n\n## 17.6.0\n\n* `FEAT`: add ability to type services and events ([#2121](https://github.com/bpmn-io/bpmn-js/issues/2121), [#2153](https://github.com/bpmn-io/bpmn-js/pull/2153))\n* `FIX`: remove preview on context pad close ([#2150](https://github.com/bpmn-io/bpmn-js/issues/2150))\n* `FIX`: use tagged template in error logging ([#2151](https://github.com/bpmn-io/bpmn-js/pull/2151))\n\n## 17.5.0\n\n* `FEAT`: remove direct editing outline for embedded labels ([#2147](https://github.com/bpmn-io/bpmn-js/pull/2147))\n* `FEAT`: do not translate technical errors ([#2145](https://github.com/bpmn-io/bpmn-js/pull/2145))\n* `DEPS`: update to `diagram-js-direct-editing@3.0.1`\n\n## 17.4.0\n\n* `FEAT`: do not scale popup menu and context pad\n* `DEPS`: update to `diagram-js@14.4.1`\n\n## 17.3.0\n\n* `FEAT`: auto-place elements vertically ([#2110](https://github.com/bpmn-io/bpmn-js/issues/2110))\n\n## 17.2.2\n\n* `FIX`: correct navigated viewer outline ([#2133](https://github.com/bpmn-io/bpmn-js/issues/2133))\n\n## 17.2.1\n\n* `FIX`: render popup menu on top\n* `DEPS`: update to `diagram-js@14.3.1`\n\n## 17.2.0\n\n* `FEAT`: make popup menu keyboard navigatable\n* `FIX`: address various accessibility issues\n* `FIX`: correct various typing issues\n* `DEPS`: update to `diagram-js@14.3.0`\n* `DEPS`: update to `diagram-js-direct-editing@2.1.2`\n\n## 17.1.0\n\n* `FEAT`: handle splitting vertical lanes ([#2101](https://github.com/bpmn-io/bpmn-js/pull/2101))\n\n## 17.0.2\n\n* `FIX`: create hit boxes for vertical lanes ([#2093](https://github.com/bpmn-io/bpmn-js/issues/2093))\n\n## 17.0.1\n\n* `FIX`: fix rendering of gateway without marker ([#2102](https://github.com/bpmn-io/bpmn-js/pull/2102))\n\n## 17.0.0\n\n* `FEAT`: add to selection through SHIFT ([bpmn-io/diagram-js#796](https://github.com/bpmn-io/diagram-js/pull/851), [#2053](https://github.com/bpmn-io/bpmn-js/issues/2053))\n* `CHORE`: remove broken touch interaction ([bpmn-io/diagram-js#796](https://github.com/bpmn-io/diagram-js/issues/796))\n* `DEPS`: update to `diagram-js@14.0.0`\n\n### Breaking Changes\n\n* Migrated to `diagram-js@14` which removes touch interaction module, and dependency on unsupported `hammerjs` package. If you rely on touch interaction, you need to support touch interaction on your own.\n\n## 16.5.0\n\n* `FEAT`: handle adding vertical lanes ([#2086](https://github.com/bpmn-io/bpmn-js/issues/2086))\n* `FIX`: don't fill multiple parallel events ([#2085](https://github.com/bpmn-io/bpmn-js/issues/2085))\n\n## 16.4.0\n\n* `FEAT`: handle resizing of vertical lanes ([#2062](https://github.com/bpmn-io/bpmn-js/issues/2062))\n* `FEAT`: allow text annotations to overlap with the borders of subprocesses and pools ([#2049](https://github.com/bpmn-io/bpmn-js/issues/2049))\n* `FEAT`: support modeling of gateway without marker ([#2063](https://github.com/bpmn-io/bpmn-js/issues/2063))\n* `FIX`: correctly remove vertical lanes ([#2081](https://github.com/bpmn-io/bpmn-js/pull/2081))\n* `FIX`: do not set label on planes ([#2033](https://github.com/bpmn-io/bpmn-js/issues/2033))\n\n## 16.3.2\n\n* `FIX`: support core replace in compensation behavior ([#2073](https://github.com/bpmn-io/bpmn-js/issues/2073))\n\n## 16.3.1\n\n* `FIX`: do not remove connection that is being created when pasting compensation boundary event and handler ([#2069](https://github.com/bpmn-io/bpmn-js/pull/2069))\n\n## 16.3.0\n\n* `FEAT`: improve handling of compensation association ([#2038](https://github.com/bpmn-io/bpmn-js/issues/2038))\n\n## 16.2.0\n\n* `DEPS`: update to `bpmn-moddle@8.1.0`\n\n## 16.1.0\n\n* `DEPS`: update to `diagram-js@13.4.0`\n* `DEPS`: update to `diagram-js-direct-editing@2.1.1`\n* `DEPS`: drop unused `object-refs` dependency\n\n## 16.0.0\n\n* `FEAT`: render vertical pools and lanes ([#2024](https://github.com/bpmn-io/bpmn-js/pull/2024))\n* `FEAT`: sentence case titles and labels ([#2023](https://github.com/bpmn-io/bpmn-js/issues/2023))\n* `FIX`: ensure all error translations are collected ([#2040](https://github.com/bpmn-io/bpmn-js/pull/2040))\n* `DEPS` update to diagram-js@13.0.0\n\n### Breaking Changes\n\n* Major updates to [diagram-js@13](https://github.com/bpmn-io/diagram-js/blob/develop/CHANGELOG.md#1300) and [didi@10](https://github.com/nikku/didi/blob/main/CHANGELOG.md#1000). Make sure to check out the linked changelog updates.\n* Multiple translation labels has been updated to sentence case. If you rely on the old casing, you need to update your translations.\n\n## 15.2.2\n\n* `FIX`: use correct types in BpmnRenderUtil ([#2036](https://github.com/bpmn-io/bpmn-js/pull/2036))\n\n## 15.2.1\n\n* `DEPS`: update to `diagram-js@13.8.1`\n\n## 15.2.0\n\n* `FEAT`: remove selection outline from connections ([diagram-js#826](https://github.com/bpmn-io/diagram-js/pull/826))\n* `FEAT`: position context pad according to last waypoint for connections ([diagram-js#826](https://github.com/bpmn-io/diagram-js/pull/826))\n* `FIX`: prevent access of non-existing connection bounds ([diagram-js#824](https://github.com/bpmn-io/diagram-js/pull/824))\n* `FIX`: correct selection outline size for end event ([#2026](https://github.com/bpmn-io/bpmn-js/pull/2026))\n* `DEPS`: update to `diagram-js@13.8.0`\n\n## 15.1.3\n\n* `FIX`: revert `djs-dragging` CSS class changes ([#2016](https://github.com/bpmn-io/bpmn-js/pull/2016))\n* `FIX`: clear context pad hover timeout on close ([#2016](https://github.com/bpmn-io/bpmn-js/pull/2016))\n* `DEPS`: update to `diagram-js@12.7.2`\n\n## 15.1.2\n\n* `FIX`: revert selection outline removal for connections ([#2011](https://github.com/bpmn-io/bpmn-js/pull/2011))\n* `DEPS`: update to `diagram-js@12.7.1`\n\n## 15.1.1\n\n* `FIX`: adjust selection outline to external label ([#2001](https://github.com/bpmn-io/bpmn-js/issues/2001))\n\n## 15.1.0\n\n* `FEAT`: add toggle for non-interrupting events ([#2000](https://github.com/bpmn-io/bpmn-js/pull/2000))\n* `FEAT`: keep events non-interrupting when using `bpmnReplace` by default ([#2000](https://github.com/bpmn-io/bpmn-js/pull/2000))\n* `DEPS`: update to `diagram-js@12.7.0`\n\n## 15.0.0\n\n* `FEAT`: align selection outline with element's shape ([#1996](https://github.com/bpmn-io/bpmn-js/issues/1996))\n* `FEAT`: preview append on hover ([#1985](https://github.com/bpmn-io/bpmn-js/pull/1985))\n* `FEAT`: allow overriding `fill`, `stroke`, `width` and `height` when rendering elements ([#1985](https://github.com/bpmn-io/bpmn-js/pull/1985))\n* `FIX`: renderer only renders actual flow elements ([#1985](https://github.com/bpmn-io/bpmn-js/pull/1985))\n* `DEPS`: update to `diagram-js@12.6.0`\n\n### Breaking Changes\n\n* `BpmnRenderer` only renders actual flow elements (e.g. `bpmn:IntermediateCatchEvent` but not `bpmn:MessageEventDefinition`)\n\n## 14.2.0\n\n* `FEAT`: make spacetool local per default ([bpmn-io/diagram-js#811](https://github.com/bpmn-io/diagram-js/pull/811), [#1975](https://github.com/bpmn-io/bpmn-js/issues/1975))\n* `FEAT`: add complex preview feature ([bpmn-io/diagram-js#807](https://github.com/bpmn-io/diagram-js/pull/807))\n* `CHORE`: mark connection as dragging when moving bendpoint ([bpmn-io/diagram-js#807](https://github.com/bpmn-io/diagram-js/pull/807))\n* `DEPS`: update to `diagram-js@12.5.0`\n\n## 14.1.3\n\n* `CHORE`: correctly output tag in [#1982](https://github.com/bpmn-io/bpmn-js/pull/1982)\n\n## 14.1.2\n\n* `CHORE`: fix POST_RELEASE job in [#1980](https://github.com/bpmn-io/bpmn-js/pull/1980)\n\n## 14.1.1\n\n* `FIX`: asset path by [__@nikku__](https://github.com/nikku) in [#1977](https://github.com/bpmn-io/bpmn-js/pull/1977)\n\n## 14.1.0\n\n* `FEAT`: ensure lanes aren't resized when using space tool in [#1972](https://github.com/bpmn-io/bpmn-js/pull/1972)\n* `DOCS`: update translations for v14.0.0 by [__@bpmn-io-bot__](https://github.com/bpmn-io-bot) in [#1948](https://github.com/bpmn-io/bpmn-js/pull/1948)\n\n## 14.0.0\n\n* `FEAT`: do not hide overlays on canvas move per default ([diagram-js#798](https://github.com/bpmn-io/diagram-js/issues/798))\n* `FEAT`: translate _Append TextAnnotation_ context pad action ([#1932](https://github.com/bpmn-io/bpmn-js/pull/1932))\n* `FIX`: allow to create connection + event-based gateway ([#1490](https://github.com/bpmn-io/bpmn-js/issues/1490))\n* `FIX`: make breadcrumb styling more robust ([#1945](https://github.com/bpmn-io/bpmn-js/pull/1945))\n* `FIX`: correct copy of default sequence flow elements ([#1935](https://github.com/bpmn-io/bpmn-js/issues/1935))\n* `CHORE`: extract `modeling-feedback` into dedicated module ([#1940](https://github.com/bpmn-io/bpmn-js/pull/1940))\n* `CHORE`: drop deprecated callback support from public API\n* `CHORE`: drop deprecated `import.parse.complete` event member `context`\n* `DEPS`: update to `diagram-js@12.3.0`\n* `DEPS`: update to `bpmn-moddle@8.0.1`\n* `DEPS`: update to `ids@1.0.3`\n\n### Breaking Changes\n\n* Deprecated callback style API removed. Migrate to promise-based APIs, released with `v7.0.0`.\n* Deprecated `import.parse.complete` event member `context` removed. Access the same information via the event itself, as released with `v7.0.0`.\n\n## 13.2.2\n\n* `FIX`: do not vertically resize empty pools using the space tool ([#1769](https://github.com/bpmn-io/bpmn-js/issues/1769))\n\n## 13.2.1\n\n* `FIX`: improve regular expression ([#1927](https://github.com/bpmn-io/bpmn-js/pull/1927))\n* `FIX`: show non-interrupting event version in replace menu ([#1924](https://github.com/bpmn-io/bpmn-js/pull/1924))\n\n## 13.2.0\n\n* `CHORE`: provide align and distribute context pad and popup menu icons as html ([#1920](https://github.com/bpmn-io/bpmn-js/pull/1920))\n* `DEPS`: update to `diagram-js@12.2.0`\n\n## 13.1.0\n\n* `FEAT`: allow event rendering without icons ([#1917](https://github.com/bpmn-io/bpmn-js/pull/1917))\n\n## 13.0.9\n\n* `CHORE`: update translations infra\n\n## 13.0.8\n\n_Republish of v13.0.7._\n\n## 13.0.7\n\n_Republish of v13.0.6._\n\n## 13.0.6\n\n* `DOCS`: update translations\n\n## 13.0.5\n\n* `DEPS`: update to `diagram-js@12.1.0`\n\n## 13.0.4\n\n* `DEPS`: bump to `diagram-js@12.0.2`\n\n## 13.0.3\n\n* `FIX`: update label on `modeling.updateModdleProperties` ([#1872](https://github.com/bpmn-io/bpmn-js/issues/1872))\n\n## 13.0.2\n\n* `FIX`: export types as `type` ([#1897](https://github.com/bpmn-io/bpmn-js/pull/1897))\n* `DEPS`: bump to `diagram-js@12.0.1`\n\n## 13.0.1\n\n* `FIX`: correct some type definitions ([#1896](https://github.com/bpmn-io/bpmn-js/pull/1896))\n\n## 13.0.0\n\n* `FEAT`: rework and complete type definitions ([#1886](https://github.com/bpmn-io/bpmn-js/pull/1886))\n* `DEPS`: update to `diagram-js@12.0.0`\n\n## 12.1.1\n\n* `DEPS`: update to `diagram-js@11.13.0`\n\n## 12.1.0\n\n* `FIX`: correct `Viewer#saveXML` type definition ([#1885](https://github.com/bpmn-io/bpmn-js/pull/1885))\n* `FIX`: correct `Viewer` constructor type definition ([#1882](https://github.com/bpmn-io/bpmn-js/issues/1882))\n\n## 12.0.0\n\n* `FEAT`: move `create-append-anything` to [external module](https://github.com/bpmn-io/bpmn-js-create-append-anything) ([#1873](https://github.com/bpmn-io/bpmn-js/pull/1873), [#1862](https://github.com/bpmn-io/bpmn-js/issues/1862))\n* `CHORE`: use `diagram-js@11.11.0` built-in selection after replace feature ([#1857](https://github.com/bpmn-io/bpmn-js/pull/1857))\n* `DEPS`: update to `diagram-js@11.12.0`\n\n### Breaking Changes\n\n* The create/append anything features moved to an [external module](https://github.com/bpmn-io/bpmn-js-create-append-anything). Include it to restore the `v11` create/append behavior.\n\n## 11.5.0\n\n* `FEAT`: add root elements to definitions when provided via `modeling#update(Moddle)Properties`\n\n## 11.4.1\n\n* `FIX`: correct redo triggering on international keyboard layouts ([#1842](https://github.com/bpmn-io/bpmn-js/issues/1842))\n\n## 11.4.0\n\n* `FEAT`: translate append menu entry labels and groups ([#1810](https://github.com/bpmn-io/bpmn-js/pull/1810))\n* `FEAT`: activate direct editing on participant creation ([#1845](https://github.com/bpmn-io/bpmn-js/pull/1845))\n* `FIX`: dragging append menu entries creates element connection ([#1843](https://github.com/bpmn-io/bpmn-js/pull/1843))\n* `FIX`: append shortcut triggers create menu if append not allowed ([#1840](https://github.com/bpmn-io/bpmn-js/issues/1840))\n* `FIX`: restore marker rendering workaround ([`9c6e475`](https://github.com/bpmn-io/bpmn-js/commit/9c6e475681dd6b6a418b2fbc1dac19a9df360953))\n\n## 11.3.1\n\n_Republish of `v11.3.0`._\n\n## 11.3.0\n\n* `FEAT`: feature `service` and `user` tasks more prominently in replace menu ([#1836](https://github.com/bpmn-io/bpmn-js/pull/1836))\n* `FEAT`: hide rare items initially from create/append menus ([#1836](https://github.com/bpmn-io/bpmn-js/pull/1836))\n* `FEAT`: retrieve instantiation modules with context ([#1835](https://github.com/bpmn-io/bpmn-js/pull/1835))\n* `DEPS`: update to `diagram-js@11.9.0`\n\n## 11.2.0\n\n_Adds create/append anything._\n\n* `FEAT`: append menu available via context pad ([#1802](https://github.com/bpmn-io/bpmn-js/pull/1802), [#1809](https://github.com/bpmn-io/bpmn-js/pull/1809), [#1815](https://github.com/bpmn-io/bpmn-js/pull/1815), [#1818](https://github.com/bpmn-io/bpmn-js/pull/1818), [#1831](https://github.com/bpmn-io/bpmn-js/pull/1831))\n* `FEAT`: create menu available via palette ([#1811](https://github.com/bpmn-io/bpmn-js/pull/1811), [#1809](https://github.com/bpmn-io/bpmn-js/pull/1809), [#1817](https://github.com/bpmn-io/bpmn-js/pull/1817))\n* `FEAT`: simplify connection-multi icon ([#1822](https://github.com/bpmn-io/bpmn-js/pull/1822))\n* `FEAT`: join paths `round` by default ([1827](https://github.com/bpmn-io/bpmn-js/pull/1827))\n* `FEAT`: improved BPMN symbol rendering ([#1830](https://github.com/bpmn-io/bpmn-js/pull/1830))\n* `FEAT`: round connection corners ([#1828](https://github.com/bpmn-io/bpmn-js/pull/1828))\n* `FEAT`: improve visibility of popup menu ([#1812](https://github.com/bpmn-io/bpmn-js/issues/1812))\n* `FIX`: missing special attributes in `bpmnElementFactory` ([#1807](https://github.com/bpmn-io/bpmn-js/pull/1807))\n* `FIX`: handle `bpmn:DataObjectReference` without data object in replace menu ([#1823](https://github.com/bpmn-io/bpmn-js/pull/1823))\n* `DEPS`: update to `diagram-js@11.8.0`\n\n## 11.1.1\n\n* `FIX`: correct popup menu display in fullscreen ([#1795](https://github.com/bpmn-io/bpmn-js/issues/1795))\n* `DEPS`: update to `diagram-js@11.4.3`\n\n## 11.1.0\n\n* `FEAT`: add replace element keyboard binding ([#1785](https://github.com/bpmn-io/bpmn-js/pull/1785))\n* `FEAT`: add `replaceElement` editor action ([#1785](https://github.com/bpmn-io/bpmn-js/pull/1785))\n* `DEPS`: update to `diagram-js@11.4.1`\n\n## 11.0.5\n\n* `DEPS`: update to `diagram-js@11.3.0`\n\n## 11.0.4\n\n* `DEPS`: update to `diagram-js@11.2.0`\n\n## 11.0.3\n\n_Re-release of `v11.0.2`._\n\n## 11.0.2\n\n* `FIX`: correct test for replace options ([#1787](https://github.com/bpmn-io/bpmn-js/pull/1787))\n\n## 11.0.1\n\n* `DEPS`: update to `diagram-js@11.1.1`\n\n## 11.0.0\n\n_Reworks popup menu UI._\n\n* `FEAT`: integrate new popup menu UI ([#1776](https://github.com/bpmn-io/bpmn-js/pull/1776))\n* `DEPS`: update to `diagram-js@11.1.0` ([#1776](https://github.com/bpmn-io/bpmn-js/pull/1776))\n\n### Breaking Changes\n\n* New popup menu UI introduced with `diagram-js@11`. See [`diagram-js` breaking changes and migration guide](https://github.com/bpmn-io/diagram-js/blob/develop/CHANGELOG.md#breaking-changes).\n* Keyboard-related features no longer use `KeyboardEvent#keyCode`. Use a polyfill (e.g. [keyboardevent-key-polyfill](https://www.npmjs.com/package/keyboardevent-key-polyfill)) if you need to support old browsers.\n\n## 10.3.0\n\n* `FEAT`: add BPMN specific space tool ([#1344](https://github.com/bpmn-io/bpmn-js/pull/1344))\n* `FIX`: do not resize `bpmn:TextAnnotation` when using space tool ([#1344](https://github.com/bpmn-io/bpmn-js/pull/1344))\n* `FIX`: correct attachers left hanging when using space tool ([#1344](https://github.com/bpmn-io/bpmn-js/pull/1344))\n* `FIX`: stick labels to label targets when using space tool ([#1344](https://github.com/bpmn-io/bpmn-js/pull/1344), [#1302](https://github.com/bpmn-io/bpmn-js/issues/1302))\n* `DEPS`: update to `diagram-js@10`\n\n## 10.2.1\n\n* `FIX`: correct preserving of outgoing connections on event-based gateway morph ([#1738](https://github.com/bpmn-io/bpmn-js/issues/1738))\n\n## 10.2.0\n\n* `DEPS`: update to `bpmn-moddle@8`\n\n## 10.1.0\n\n* `DEPS`: update to `diagram-js@9.1.0`\n\n## 10.0.0\n\n_Updates the library target to ES2018._\n\n* `FEAT`: use ES2018 syntax ([#1737](https://github.com/bpmn-io/bpmn-js/pull/1737))\n\n### Breaking Changes\n\n* Migrated to ES2018 syntax. [Read the blog post with details and a migration guide](https://bpmn.io/blog/posts/2022-migration-to-es2018.html).\n\n## 9.4.1\n\n* `FIX`: ignore elements which cannot be colored ([#1734](https://github.com/bpmn-io/bpmn-js/pull/1734))\n\n## 9.4.0\n\n* `FEAT`: allow clipboard to be serialized ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FEAT`: allow cloning of elements ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FEAT`: copy groups in a safe manner ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FIX`: make clipboard contents immutable ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FIX`: do not alter inputs passed to `ElementFactory#create` ([#1711](https://github.com/bpmn-io/bpmn-js/pull/1711))\n* `FIX`: prevent bogus meta-data to be attached on paste ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FIX`: only claim existing IDs ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FIX`: prevent double paste on label creation ([#1707](https://github.com/bpmn-io/bpmn-js/pull/1707))\n* `FIX`: move labels when collapsing sub-process ([#1695](https://github.com/bpmn-io/bpmn-js/issues/1695))\n* `FIX`: assign default size when expanding element ([#1687](https://github.com/bpmn-io/bpmn-js/issues/1687))\n* `FIX`: render sequence flows always on top ([#1716](https://github.com/bpmn-io/bpmn-js/issues/1716))\n* `DEPS`: update to `diagram-js@8.9.0`\n* `DEPS`: update to `bpmn-moddle@7.1.3`\n\n## 9.3.2\n\n* `FIX`: prevent unnecessary scrollbar ([#1692](https://github.com/bpmn-io/bpmn-js/issues/1692))\n* `FIX`: check for replacement using actual target ([#1699](https://github.com/bpmn-io/bpmn-js/pull/1699))\n* `DEPS`: update to `diagram-js@8.7.1`\n\n## 9.3.1\n\n* `FIX`: properly size icons for distribute/align menu ([#1694](https://github.com/bpmn-io/bpmn-js/pull/1694))\n\n## 9.3.0\n\n* `FEAT`: add aligment and distribution menu ([#1680](https://github.com/bpmn-io/bpmn-js/issues/1680), [#1691](https://github.com/bpmn-io/bpmn-js/issues/1691))\n* `DEPS`: update to `diagram-js@8.7.0`\n\n## 9.2.2\n\n* `FIX`: correctly toggle loop characteristics ([#1673](https://github.com/bpmn-io/bpmn-js/issues/1673))\n\n## 9.2.1\n\n* `FIX`: cancel direct editing before shape deletion ([#1677](https://github.com/bpmn-io/bpmn-js/issues/1677))\n\n## 9.2.0\n\n* `FEAT`: rework select and hover interaction on the diagram ([#1616](https://github.com/bpmn-io/bpmn-js/issues/1616), [#640](https://github.com/bpmn-io/diagram-js/pull/640), [#643](https://github.com/bpmn-io/diagram-js/pull/643))\n* `FEAT`: rework diagram interaction handles ([#640](https://github.com/bpmn-io/diagram-js/pull/640))\n* `FEAT`: clearly distinguish select and hover states ([#1616](https://github.com/bpmn-io/bpmn-js/issues/1616))\n* `FEAT`: allow text annotation on sequence flows ([#1652](https://github.com/bpmn-io/bpmn-js/pull/1652))\n* `FEAT`: add multi-element context pad ([#1525](https://github.com/bpmn-io/bpmn-js/pull/1525))\n* `FEAT`: change default color to off black ([#1656](https://github.com/bpmn-io/bpmn-js/pull/1656))\n* `FEAT`: select connection after connect ([#644](https://github.com/bpmn-io/diagram-js/pull/644))\n* `FIX`: copy elements with `string` extension properties ([#1518](https://github.com/bpmn-io/bpmn-js/issues/1518))\n* `FIX`: cancel direct editing before shape deletion ([#1664](https://github.com/bpmn-io/bpmn-js/issues/1664))\n* `FIX`: remove connection on source connection deletion ([#1663](https://github.com/bpmn-io/bpmn-js/issues/1663))\n* `FIX`: set correct label color when batch coloring elements ([#1653](https://github.com/bpmn-io/bpmn-js/issues/1653))\n* `FIX`: always reconnect labels and associations ([#1659](https://github.com/bpmn-io/bpmn-js/pull/1659))\n* `FIX`: correct connection drop highlighting\n* `DEPS`: replace `inherits` with `inherits-browser`\n* `DEPS`: bump to `diagram-js@8.5.0`\n\n## 9.1.0\n\n* `FEAT`: allow to select participant and subprocess via click on body ([#1646](https://github.com/bpmn-io/bpmn-js/pull/1646))\n* `FIX`: comply with strict style-src CSP ([#1625](https://github.com/bpmn-io/bpmn-js/issues/1625))\n* `FIX`: complete direct editing when selection changes ([#1648](https://github.com/bpmn-io/bpmn-js/pull/1648))\n* `DEPS`: update to `diagram-js@8.3.0`\n* `DEPS`: update to `min-dom@3.2.0`\n\n## 9.0.4\n\n* `FIX`: remove `label` property on empty label ([#1637](https://github.com/bpmn-io/bpmn-js/issues/1637))\n* `FIX`: create drilldown overlays on `viewer.open` ([`574a67438`](https://github.com/bpmn-io/bpmn-js/commit/574a674381d6449b509396b6d17c4ca94674ea1c))\n* `FIX`: render data association inside collapsed sub-processes ([#1619](https://github.com/bpmn-io/bpmn-js/issues/1619))\n* `FIX`: preserve multi-instance properties when toggling between parallel and sequential ([#1581](https://github.com/bpmn-io/bpmn-js/issues/1581))\n* `FIX`: correct hanging sequence flow label after collapsing sub-process ([#1617](https://github.com/bpmn-io/bpmn-js/issues/1617))\n* `FIX`: correct start event not added to newly created sub-process ([#1631](https://github.com/bpmn-io/bpmn-js/issues/1631))\n\n## 9.0.3\n\n* `FIX`: submit direct editing result on drilldown ([#1609](https://github.com/bpmn-io/bpmn-js/issues/1609))\n* `DEPS`: bump to `diagram-js@8.2.0` ([2bac149](https://github.com/bpmn-io/bpmn-js/commit/2bac1495058601fec203c134b41efe5600e5fc97))\n\n## 9.0.2\n\n* `FIX`: support modeling of groups in collapsed subporcesses ([#1606](https://github.com/bpmn-io/bpmn-js/issues/1606))\n* `FIX`: override default padding of breadcrumb element ([#1608](https://github.com/bpmn-io/bpmn-js/pull/1608))\n\n## 9.0.1\n\n* `FIX`: use ES5 everywhere ([#1605](https://github.com/bpmn-io/bpmn-js/pull/1605))\n* `FIX`: support DIs without associated business object ([#1605](https://github.com/bpmn-io/bpmn-js/pull/1605))\n* `DEPS`: bump to `diagram-js@8.1.2` ([bdf9cf3](https://github.com/bpmn-io/bpmn-js/commit/bdf9cf3e752254a4c8172031d8a493955a9fca9c))\n\n## 9.0.0\n\n* `FEAT`: support drilldown and modeling of collapsed subprocesses ([#1443](https://github.com/bpmn-io/bpmn-js/issues/1443))\n* `FEAT`: update embedded label bounds when shape is moved ([#1586](https://github.com/bpmn-io/bpmn-js/pull/1586))\n* `FIX`: create di for embedded labels ([#1579](https://github.com/bpmn-io/bpmn-js/pull/1579))\n* `CHORE`: expose `BpmnRenderer` extension points ([#1585](https://github.com/bpmn-io/bpmn-js/pull/1585))\n* `DEPS`: bump to `diagram-js@8.1.1`\n\n### Breaking Changes\n\n* Reworked the link of elements to bpmn DIs. You must access the `di` directly from the diagram element instead of the `businessObject` [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472).\n* Reworked `viewer.open` behavior for single planes ([#1576](https://github.com/bpmn-io/bpmn-js/pull/1576)).\n* Reworked import and `BpmnFactory` APIs [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472).\n* Added `bpmn-js.css`, which is required to display drilldown overlays correctly.\n\n## 8.10.0\n\n* `CHORE`: provide `ModelUtil#isAny` utility ([#1604](https://github.com/bpmn-io/bpmn-js/pull/1604))\n* `CHORE`: provide `ModelUtil#getDi` utility ([#1604](https://github.com/bpmn-io/bpmn-js/pull/1604))\n\n## 8.9.1\n\n* `FIX`: re-use process for redo of first participant ([#1439](https://github.com/bpmn-io/bpmn-js/issues/1439))\n* `FIX`: ensure IDs are claimed when used ([#1555](https://github.com/bpmn-io/bpmn-js/issues/1555))\n* `FIX`: prevent morphing data stores outside participants ([#1508](https://github.com/bpmn-io/bpmn-js/issues/1508))\n\n## 8.9.0\n\n* `FEAT`: select newly created sub-process ([`6214772b`](https://github.com/bpmn-io/bpmn-js/commit/6214772b8519cb82f61c4867b16c112bc6344922))\n* `FEAT`: select newly created group for immediate resizing ([`56eb34cc`](https://github.com/bpmn-io/bpmn-js/commit/56eb34cc826ca0dc8ee788575a504d5fda301292))\n* `FEAT`: simplify color scheme\n* `FIX`: set label color on `bpmndi:BPMNLabel#color` ([#1543](https://github.com/bpmn-io/bpmn-js/pull/1543))\n* `FIX`: don't create illegal `bpmndi:BPMNEdge#waypoints` property ([#1544](https://github.com/bpmn-io/bpmn-js/issues/1544))\n* `FIX`: correct direct editing on touch devices\n* `DEPS`: update to `diagram-js@7.8.2`\n\n## 8.8.3\n\n* `FIX`: correct resize handles hidden behind element ([#1520](https://github.com/bpmn-io/bpmn-js/issues/1520))\n* `FIX`: handle close to source or target drop on flow ([#1541](https://github.com/bpmn-io/bpmn-js/issues/1541))\n* `CHORE`: bump to `diagram-js@7.6.3`\n\n## 8.8.2\n\n* `FIX`: properly re-use ID of a copied element if available ([#1503](https://github.com/bpmn-io/bpmn-js/pull/1509))\n\n## 8.8.1\n\n* `FIX`: re-use ID of a copied element if available ([#1503](https://github.com/bpmn-io/bpmn-js/pull/1503))\n* `CHORE`: unbuild circular dependency with `ResizeUtil` ([#1500](https://github.com/bpmn-io/bpmn-js/pull/1500))\n\n## 8.8.0\n\n* `FEAT`: give `keyboard` fine-grained control over which events to handle ([#1493](https://github.com/bpmn-io/bpmn-js/issues/1493))\n* `FIX`: correct keyboard shortcuts not working in direct editing mode ([#1493](https://github.com/bpmn-io/bpmn-js/issues/1493))\n* `DEPS`: update to `diagram-js@7.15`\n\n## 8.7.3\n\n* `FIX`: convert file to `ES6` module ([#1478](https://github.com/bpmn-io/bpmn-js/pull/1478))\n\n## 8.7.2\n\n* `CHORE`: improve error recovery in ordering provider\n* `DEPS`: update build dependencies\n\n## 8.7.1\n\n* `FIX`: allow connecting `bpmn:MessageFlow` to `bpmn:CallActivity` ([#1467](https://github.com/bpmn-io/bpmn-js/issues/1467))\n* `DEPS`: update to `bpmn-moddle@7.1.2`\n\n## 8.7.0\n\n* `FEAT`: support BPMN in Color ([#1453](https://github.com/bpmn-io/bpmn-js/pull/1453))\n* `DEPS`: update to `bpmn-moddle@7.1.1`\n\n## 8.6.2\n\n* `DEPS`: update diagram-js-direct-editing to v1.6.3\n\n## 8.6.1\n\n* `FIX`: serialize `bpmn:DataStoreReference` correctly in case if first participant is an empty pool ([#1456](https://github.com/bpmn-io/bpmn-js/issues/1456))\n\n## 8.6.0\n\n* `FEAT`: support Promise in `inject` test helper ([#1450](https://github.com/bpmn-io/bpmn-js/pull/1450))\n* `DEPS`: update to `hosted-git@2.8.9` ([#1447](https://github.com/bpmn-io/bpmn-js/pull/1447))\n\n## 8.5.0\n\n* `FEAT`: reconnect message flows when participant is collapsed ([#1432](https://github.com/bpmn-io/bpmn-js/pull/1432))\n* `FEAT`: replace elements on create ([#1340](https://github.com/bpmn-io/bpmn-js/issues/1340))\n* `FEAT`: show message name on message flow ([#777](https://github.com/bpmn-io/bpmn-js/issues/777))\n* `FEAT`: ensure auto-placed elements are visible\n* `FIX`: fix reversed connection preview ([#1431](https://github.com/bpmn-io/bpmn-js/issues/1431))\n* `FIX`: copy root element references on replace ([#1430](https://github.com/bpmn-io/bpmn-js/issues/1431))\n* `DEPS`: update to `diagram-js@7.3.0`\n\n## 8.4.0\n\n* `FIX`: disallow inserting multiple elements on a sequence flow ([#1440](https://github.com/bpmn-io/bpmn-js/issues/1440))\n\n## 8.3.1\n\n* `FIX`: correctly serialize `xml` attributes on `Any` elements\n* `DEPS`: update bump to `bpmn-moddle@7.0.5`\n\n## 8.3.0\n\n* `FEAT`: enable connection tool for text annotations ([#1428](https://github.com/bpmn-io/bpmn-js/pull/1428))\n\n## 8.2.2\n\n* `FIX`: always emit `saveXML.done`\n* `FIX`: correct path intersections not being detected in certain cases\n* `CHORE`: bump to `diagram-js@7.2.3`\n\n## 8.2.1\n\n* `FIX`: prevent bendpoint hover error ([#1387](https://github.com/bpmn-io/bpmn-js/issues/1387))\n\n## 8.2.0\n\n* `FIX`: correct label colors on connect / hover ([#1380](https://github.com/bpmn-io/bpmn-js/issues/1380))\n* `FIX`: correct new parent indicator when leaving lane ([#1413](https://github.com/bpmn-io/bpmn-js/issues/1413))\n* `CHORE`: update to `diagram-js@7.2.0`\n\n## 8.1.0\n\n* `TEST`: simplify markup created by built-in test helpers\n\n## 8.0.1\n\n* `FIX`: activate, not toggle global connect tool on palette click\n* `FIX`: only allow cancel boundary events on transactions\n* `CHORE`: add `npm start` script for demo purposes\n\n## 8.0.0\n\n* `FEAT`: improve replace label for collapsed pools ([`8faee2bd`](https://github.com/bpmn-io/bpmn-js/commit/8faee2bde9a74b75b4b6bb9b003507652e75c9c5))\n* `FEAT`: allow participant multiplicity marker to be toggled ([#533](https://github.com/bpmn-io/bpmn-js/issues/533))\n* `FEAT`: support soft breaks / discretionary hyphens in labels ([#1383](https://github.com/bpmn-io/bpmn-js/issues/1383))\n* `FEAT`: improve tool activation via keyboard shortcuts or editor actions\n* `FEAT`: allow components to react to auxiliary mouse button interactions\n* `FEAT`: move canvas on auxiliary button mouse down\n* `CHORE`: bump to `diagram-js@7`\n\n### Breaking Changes\n\n* Auxiliary mouse button events will now be passed as `element.*` mouse events to components. You must filter your event listeners to prevent reactions to these events ([`1063f7c1`](https://github.com/bpmn-io/diagram-js/commit/1063f7c18474096d3d7c9e400ce82a1bf762a157)).\n\n## 7.5.0\n\n* `FEAT`: update translatable strings ([#1364](https://github.com/bpmn-io/bpmn-js/pull/1364))\n* `FEAT`: add collection marker to DataObjectReference ([#381](https://github.com/bpmn-io/bpmn-js/issues/381))\n* `FEAT`: provide generic command for updating moddle properties ([#1376](https://github.com/bpmn-io/bpmn-js/pull/1376))\n* `FEAT`: add switch between DataStoreReference and DataObjectReference in replace menu ([#1372](https://github.com/bpmn-io/bpmn-js/issues/1372))\n* `FIX`: align collection and parallel instance markers style ([#1371](https://github.com/bpmn-io/bpmn-js/issues/1371))\n\n## 7.4.2\n\n* `FIX`: correctly emit out `element.event` after drop-on-flow ([#1366](https://github.com/bpmn-io/bpmn-js/issues/1366))\n\n## 7.4.1\n\n* `FIX`: correct keyboard zoom in key on international keyboard shortcuts ([#1362](https://github.com/bpmn-io/bpmn-js/issues/1362))\n\n## 7.4.0\n\n* `CHORE`: bump to `diagram-js@6.8.0`\n* `CHORE`: migrate to `travis-ci.com`\n\n## 7.3.1\n\n* `CHORE`: bump to `diagram-js@6.7.1`\n\n## 7.3.0\n\n* `FEAT`: disallow typed start events inside non-event based sub processes ([#831](https://github.com/bpmn-io/bpmn-js/issues/831))\n* `CHORE`: bump to `diagram-js@6.7.0`\n\n## 7.2.1\n\n* `FIX`: disallow boundary events as message flow targets ([#1300](https://github.com/bpmn-io/bpmn-js/issues/1300))\n\n## 7.2.0\n\n_Republish of `v7.1.0`._\n\n## 7.1.0\n\n* `FEAT`: allow annotating groups ([#1327](https://github.com/bpmn-io/bpmn-js/issues/1327))\n\n## 7.0.1\n\n* `FIX`: roundtrip default `xml` namespace ([#1319](https://github.com/bpmn-io/bpmn-js/issues/1319))\n* `CHORE`: bump to `bpmn-moddle@7.0.3`\n\n## 7.0.0\n\n* `FEAT`: make import and export APIs awaitable ([#812](https://github.com/bpmn-io/bpmn-js/issues/812))\n* `FEAT`: update watermark ([#1281](https://github.com/bpmn-io/bpmn-js/pull/1281))\n* `CHORE`: deprecated `import.parse.complete` context payload ([`157aec6e`](https://github.com/bpmn-io/bpmn-js/commit/157aec6e))\n* `CHORE`: clarify license terms ([`bc98a637`](https://github.com/bpmn-io/bpmn-js/commit/bc98a63712f6ac5c66d39f59bf93e296e59ad1e0))\n* `CHORE`: bump to `bpmn-moddle@7.0.1`\n\n### Breaking Changes\n\n* The toolkit now requires the ES6 `Promise` to be present. To support IE11 you must polyfill it.\n\n## 6.5.1\n\n* `FIX`: correct namespaces being removed on diagram export ([#1310](https://github.com/bpmn-io/bpmn-js/issues/1310))\n* `CHORE`: bump to `bpmn-moddle@6.0.6`\n\n## 6.5.0\n\n* `FEAT`: prefer straight layout for sub-process connections ([#1309](https://github.com/bpmn-io/bpmn-js/pull/1309))\n* `FEAT`: move common auto-place feature to diagram-js, add BPMN-specific auto-place feature ([#1284](https://github.com/bpmn-io/bpmn-js/pull/1284))\n* `CHORE`: make bpmn-font a development dependency ([`63045bdf`](https://github.com/bpmn-io/bpmn-js/commit/63045bdfa87b9f1989a2a7a509facbeb4616acda))\n* `CHORE`: bump to `diagram-js@6.6.1`\n\n## 6.4.2\n\n* `CHORE`: bump to `bpmn-moddle@6.0.5`\n\n## 6.4.1\n\n* `FIX`: parse `>` in attribute names and body tag\n* `CHORE`: bump to `bpmn-moddle@6.0.4`\n\n## 6.4.0\n\n* `FEAT`: serialize link events with an empty name ([#1296](https://github.com/bpmn-io/bpmn-js/issues/1296))\n\n## 6.3.5\n\n* `FIX`: correct accidental resizing of label target ([#1294](https://github.com/bpmn-io/bpmn-js/issues/1294))\n\n## 6.3.4\n\n* `FIX`: export BPMNDI in correct order ([#985](https://github.com/bpmn-io/bpmn-js/issues/985))\n\n## 6.3.3\n\n* `FIX`: resize empty text annotations\n* `CHORE`: bump `min-dom` version\n* `CHORE`: bump to `diagram-js@6.4.1`\n\n## 6.3.2\n\n* `FIX`: correctly move flows when adding lane ([#1287](https://github.com/bpmn-io/bpmn-js/pull/1287))\n* `FIX`: restore semantic IDs for non flow nodes ([#1285](https://github.com/bpmn-io/bpmn-js/issues/1285))\n\n## 6.3.1\n\n* `FIX`: prevent editor crash in some strict execution environments ([#1283](https://github.com/bpmn-io/bpmn-js/pull/1283))\n\n## 6.3.0\n\n* `FEAT`: generate more generic IDs for new elements ([`035bb0c1`](https://github.com/bpmn-io/bpmn-js/commit/035bb0c1fd01adbaab8a340cb1075aa57736540d))\n* `FEAT`: copy referenced root elements (message, signal, ...) ([`dc5a566e`](https://github.com/bpmn-io/bpmn-js/commit/dc5a566e107bc156505a40de3331b3832afc4b8d))\n* `FEAT`: ensure minimum size when resizing elements with space tool ([`7ee304f4`](https://github.com/bpmn-io/bpmn-js/commit/7ee304f424d1c9db46633523165d25ca1fabba1b))\n* `FIX`: correct interaction events inside `bpmn:Group` elements ([#1278](https://github.com/bpmn-io/bpmn-js/issues/1278))\n* `FIX`: correct copy and paste of collapsed sub-processes ([#1270](https://github.com/bpmn-io/bpmn-js/issues/1270))\n* `FIX`: correct various space tool related issues ([#1019](https://github.com/bpmn-io/bpmn-js/issues/1019), [#878](https://github.com/bpmn-io/bpmn-js/issues/878))\n* `CHORE`: rework space tool\n* `CHORE`: update to `diagram-js@6.4.0`\n\n## 6.2.1\n\n* `FIX`: correct serialization of `DataAssociation#assignment`\n* `CHORE`: update to `bpmn-moddle@6.0.2`\n\n## 6.2.0\n\n* `FIX`: keep non-duplicate outgoing connection when dropping on flows ([#1263](https://github.com/bpmn-io/bpmn-js/issues/1263))\n* `FIX`: properly reconnect message flows when collapsing participant\n* `CHORE`: update to `diagram-js@6.3.0`\n* `CHORE`: update to `bpmn-moddle@6.0.1`\n\n## 6.1.2\n\n* `FIX`: translate _Append ReceiveTask_\n* `FIX`: allow associations where data associations are allowed, too ([`4a675b37`](https://github.com/bpmn-io/bpmn-js/commit/4a675b378027532db413186ea292daeac087285b))\n* `FIX`: correct origin snapping on multi-element create ([`27fec8bd`](https://github.com/bpmn-io/bpmn-js/commit/27fec8bdf1c6236e7ca09b5721b74b1b45b45d39))\n* `CHORE`: update to `diagram-js@6.2.2`\n\n## 6.1.1\n\n_Republish of `v6.1.0`._\n\n## 6.1.0\n\n* `FEAT`: copy signals, escalations and errors ([#1245](https://github.com/bpmn-io/bpmn-js/pull/1245))\n* `FEAT`: provide base viewer / modeler distributions ([`bb94b206`](https://github.com/bpmn-io/bpmn-js/commit/bb94b206a7c9ab3b80e283d6513600a9591c437d))\n* `FEAT`: add horizontal and vertical resize handles\n* `FEAT`: improve connection cropping (bump to `path-intersection@2`)\n* `FIX`: correctly mark elements as changed on `{shape|connection}.create` undo\n* `FIX`: do not open replace menu after multi create ([#1255](https://github.com/bpmn-io/bpmn-js/pull/1255))\n* `CHORE`: update to `diagram-js@6.2.0`\n\n## 6.0.7\n\n* `FIX`: disable waypoints-cropping after pasting connections ([`9f8a724e`](https://github.com/bpmn-io/bpmn-js/commit/9f8a724e9a3ff66bfce14e06ab38066189111a95))\n\n## 6.0.6\n\n* `FIX`: create nested lanes in the correct parent again ([#1256](https://github.com/bpmn-io/bpmn-js/issues/1256), [#1253](https://github.com/bpmn-io/bpmn-js/issues/1253), [#1254](https://github.com/bpmn-io/bpmn-js/issues/1254))\n\n## 6.0.5\n\n* `FIX`: only update `Lane#flownNodeRefs` once during paste ([`4455c3fc`](https://github.com/bpmn-io/bpmn-js/commit/4455c3fc35290e51220566fb6539a1efc4d3612f))\n* `FIX`: do not adjust labels on paste ([`b2b607f5`](https://github.com/bpmn-io/bpmn-js/commit/b2b607f5582d3409c789d831a0896aaa55949899))\n* `FIX`: do not snap connection waypoints on paste ([`d769e6dd`](https://github.com/bpmn-io/bpmn-js/commit/d769e6ddb0cb2dc8befb2e7b31682925089ba8f1))\n\n## 6.0.4\n\n* `FIX`: correctly fix hover on cleanup ([#1247](https://github.com/bpmn-io/bpmn-js/pull/1247))\n\n## 6.0.3\n\n* `FIX`: render colored BPMN groups ([#1246](https://github.com/bpmn-io/bpmn-js/pull/1246))\n* `CHORE`: bump to `diagram-js@6.0.2`\n\n## 6.0.2\n\n* `CHORE`: bump `diagram-js-direct-editing` dependency\n\n## 6.0.1\n\n* `CHORE`: bump to `diagram-js@6.0.1`\n\n## 6.0.0\n\n* `FEAT`: rework (re-)connecting of shapes ([#427](https://github.com/bpmn-io/bpmn-js/pull/1230))\n\n### Breaking Changes\n\nConnecting and re-connecting shapes got reworked via [#427](https://github.com/bpmn-io/bpmn-js/pull/1230):\n\n* The rules `connection.reconnectStart` and `connection.reconnectEnd` got replaced with `connection.reconnect` rule\n* `BpmnLayouter#layoutConnection` waypoints can be specified via hint\n\n## 5.1.2\n\n* `FIX`: account for label pasting in label behavior ([#1227](https://github.com/bpmn-io/bpmn-js/issues/1227))\n\n## 5.1.1\n\n* `FIX`: re-select only existing elements when dragging is finished ([#1225](https://github.com/bpmn-io/bpmn-js/issues/1225))\n* `FIX`: correctly hide nested children of a collapsed shape\n* `CHORE`: bump to [`diagram-js@5.1.1`](https://github.com/bpmn-io/diagram-js/blob/develop/CHANGELOG.md#511)\n\n## 5.1.0\n\n* `FEAT`: adjust label position post creation ([`41c6af18`](https://github.com/bpmn-io/bpmn-js/commit/41c6af183014626a0f84e0bda0f8e39018f9151e))\n* `FEAT`: copy and paste boundary events ([`2e27d743`](https://github.com/bpmn-io/bpmn-js/commit/2e27d7430642439e30806941d0df43018ca729eb))\n* `FIX`: ordering after moving boundary events between hosts ([#1207](https://github.com/bpmn-io/bpmn-js/issues/1207))\n* `FIX`: do not remove sequence flow condition on type change ([`b2900786`](https://github.com/bpmn-io/bpmn-js/commit/b290078600ae4e45e7c72bd37919732e3f8fcbea))\n* `FIX`: do not remove default sequence flow on type change ([`37bcd070`](https://github.com/bpmn-io/bpmn-js/commit/37bcd070e8406a43a7316893c6b68debeaae5e26))\n* `FIX`: do not duplicate flow node references ([`168a1493`](https://github.com/bpmn-io/bpmn-js/commit/168a1493b26c3059d2440a70f7aa5991745b51e5))\n* `FIX`: ignore labels that are being created in adaptive label positioning ([`44cceb5d`](https://github.com/bpmn-io/bpmn-js/commit/44cceb5da287a0ad01d9389f475284c88eda7f7b))\n\n## 5.0.5\n\n* `FIX`: snap connections to task mid ([`86c61b0`](https://github.com/bpmn-io/bpmn-js/commit/86c61b0c0d6dcf776adda94b6d72b621644c2abe))\n* `FIX`: snap connections to sub process mid ([`83e9f05`](https://github.com/bpmn-io/bpmn-js/commit/83e9f05efab6fbe57100e11d0443291a561bdfe4))\n* `FIX`: complete direct editing when auto place starts ([`dcf440b`](https://github.com/bpmn-io/bpmn-js/commit/dcf440b07684339bdb52ba97cd1c83f9eb234044))\n* `FIX`: do not clear diagram if no diagram to clear ([#1181](https://github.com/bpmn-io/bpmn-js/issues/1181))\n* `FIX`: copy boundary events attachments ([#1190](https://github.com/bpmn-io/bpmn-js/issues/1190))\n* `FIX`: do not copy generic properties ([`a74d83`](https://github.com/bpmn-io/bpmn-js/commit/a74d838dc78aceddf88e07231cf85a4cf9e0dd95))\n\n## 5.0.4\n\n* `FIX`: correct sequence flow layout after drop on flow ([#1178](https://github.com/bpmn-io/bpmn-js/issues/1178))\n\n## 5.0.3\n\n_Republish of `v5.0.2`._\n\n## 5.0.2\n\n* `FIX`: allow reconnecting to loops ([#1121](https://github.com/bpmn-io/bpmn-js/issues/1121))\n* `CHORE`: bump to `diagram-js@5.0.1`\n\n## 5.0.1\n\n* `FIX`: import boundary event associations ([#1170](https://github.com/bpmn-io/bpmn-js/issues/1170))\n\n## 5.0.0\n\n* `FEAT`: add two-step copy and paste ([#1137](https://github.com/bpmn-io/bpmn-js/pull/1137))\n* `FEAT` add `elements.create` rule for creating multiple elements ([#1137](https://github.com/bpmn-io/bpmn-js/pull/1137))\n* `FEAT`: make containers draggable via their borders / labels only ([#1097](https://github.com/bpmn-io/bpmn-js/pull/1097), [#957](https://github.com/bpmn-io/bpmn-js/issues/957))\n* `FEAT`: allow copied elements to be filtered ([#888](https://github.com/bpmn-io/bpmn-js/issues/888))\n* `FIX`: prevent accidental dragging of participants and sub-processes ([#1097](https://github.com/bpmn-io/bpmn-js/pull/1097), [#957](https://github.com/bpmn-io/bpmn-js/issues/957))\n* `FIX`: keep labels during pool extraction ([#921](https://github.com/bpmn-io/bpmn-js/issues/921))\n* `FIX`: duplicate `bpmn:CategoryValue` when copying groups ([#1055](https://github.com/bpmn-io/bpmn-js/issues/1055))\n* `FIX`: translate group creation entry in palette ([#1146](https://github.com/bpmn-io/bpmn-js/issues/1146))\n* `CHORE`: use `element.copyProperty` event to copy category value when copying group ([`12bedca5`](https://github.com/bpmn-io/bpmn-js/pull/1137/commits/12bedca5ba2a05791591e53f554dc2310f6c1a6f))\n* `CHORE`: bump to `diagram-js@5`\n\n### Breaking Changes\n\nCopy and paste as well as create is completely reworked:\n\n* `CopyPaste`: remove `ModelCloneHelper` in favor of `ModdleCopy` service, remove `property.clone` event, add `moddleCopy.canCopyProperties`, `moddleCopy.canCopyProperty` and `moddleCopy.canSetCopiedProperty` event\n* `BpmnRules`: removed `elements.paste` rule in favor of `elements.create` rule\n* `BpmnRules`: removed `element.paste` rule\n* `ElementFactory`: use `attrs.di` property instead of `attrs.colors` for fill and stroke when creating element through `ElementFactory#createBpmnElement`\n* To prevent additional behavior on create after paste you should check for the `createElementsBehavior` hint, cf. [`bf180321`](https://github.com/bpmn-io/bpmn-js/commit/bf180321a3a40428c3f87b639b87cc3fc578066e#diff-2f0de25761fb7459e88071f83fd845c5R22)\n\n## 4.0.4\n\n* `FIX`: creating `bpmn:Participant` on single `bpmn:Group` throwing error ([#1133](https://github.com/bpmn-io/bpmn-js/issues/1133))\n* `CHORE`: bump to `diagram-js@4.0.3`\n\n## 4.0.3\n\n* `FIX`: prevent dropping on labels and `bpmn:Group` elements ([#1131](https://github.com/bpmn-io/bpmn-js/pull/1131))\n\n## 4.0.2\n\n* `FIX`: correct element positioning update ([#1129](https://github.com/bpmn-io/bpmn-js/issues/1129))\n* `CHORE`: bump to `diagram-js@4.0.2`\n\n## 4.0.1\n\n* `FIX`: prevent adding lane from crashing IE ([#746](https://github.com/bpmn-io/bpmn-js/issues/746))\n* `FIX`: correct inverse space tool visuals ([#1105](https://github.com/bpmn-io/bpmn-js/issues/1105))\n* `CHORE`: update `diagram-js-direct-editing` to prevent install warning\n* `CHORE`: update to `diagram-js@4.0.1`\n\n## 4.0.0\n\n* `FEAT`: add top, right, bottom, left snapping with container elements ([#1108](https://github.com/bpmn-io/bpmn-js/pull/1108))\n* `FEAT`: add grid snapping ([#987](https://github.com/bpmn-io/bpmn-js/pull/987))\n* `FEAT`: allow modeling of groups ([#343](https://github.com/bpmn-io/bpmn-js/issues/343))\n* `FEAT`: improve modeling rules behind event-based gateways ([#1006](https://github.com/bpmn-io/bpmn-js/pull/1006))\n* `FEAT`: adjust default collapsed pool to standard height ([`5affe2570`](https://github.com/bpmn-io/bpmn-js/commit/5affe25705082937beace6b4a568f176a0527baf))\n* `FEAT`: add connection previews ([#743](https://github.com/bpmn-io/bpmn-js/issues/743))\n* `FEAT`: create expanded sub-process with start event included ([#1039](https://github.com/bpmn-io/bpmn-js/pull/1039))\n* `FEAT`: improve automatic label adjustment for boundary events ([#1064](https://github.com/bpmn-io/bpmn-js/pull/1064))\n* `FEAT`: improve creation of initial participant ([#1046](https://github.com/bpmn-io/bpmn-js/pull/1046))\n* `FEAT`: improve boundary to host loop layout ([#1070](https://github.com/bpmn-io/bpmn-js/pull/1070))\n* `FEAT`: make connection segment move the primary connection drag behavior\n* `FEAT`: allow label and group movement everywhere ([#1080](https://github.com/bpmn-io/bpmn-js/pull/1080))\n* `FEAT`: improve message flow to participant connection in the presence of lanes ([#950](https://github.com/bpmn-io/bpmn-js/issues/950))\n* `FEAT`: allow detaching of boundary and attaching of intermediate events ([#1045](https://github.com/bpmn-io/bpmn-js/issues/1045))\n* `FEAT`: simplify requested palette and context pad translations ([#1027](https://github.com/bpmn-io/bpmn-js/pull/1027))\n* `FEAT`: simplify participant dragging in the presence of nested lanes ([`fdb299dc`](https://github.com/bpmn-io/bpmn-js/commit/fdb299dc888a7dcdb3f7674b6ed2a857864df457))\n* `FEAT`: correctly render all kinds of multiple events ([#1091](https://github.com/bpmn-io/bpmn-js/pull/1091))\n* `CHORE`: validate BPMN 2.0 XML ids as QNames ([`92c03679a`](https://github.com/bpmn-io/bpmn-js/commit/92c03679a4fd3c92a1c5ce3c97f7d366e2a5753a))\n* `FIX`: correctly handle flow reconnection + type replacement ([#896](https://github.com/bpmn-io/bpmn-js/issues/896), [#1008](https://github.com/bpmn-io/bpmn-js/issues/1008))\n\n### Breaking Changes\n\n* `CHORE`: bump to [`diagram-js@4.0.0`](https://github.com/bpmn-io/diagram-js/blob/main/CHANGELOG.md#400)\n\n## 3.5.0\n\n* `FEAT`: restore `Viewer#importDefinitions` and make it public API ([#1112](https://github.com/bpmn-io/bpmn-js/pull/1112))\n\n## 3.4.3\n\n* `FIX`: prevent HTML injection in search ([diagram-js#362](https://github.com/bpmn-io/diagram-js/pull/362))\n\n## 2.5.4\n\n* `FIX`: prevent HTML injection in search ([diagram-js#362](https://github.com/bpmn-io/diagram-js/pull/362))\n* `CHORE`: bump to `diagram-js@2.6.2`\n\n## 3.4.2\n\n* `FIX`: do not evaluate pasted text as HTML ([#1073](https://github.com/bpmn-io/bpmn-js/issues/1073))\n\n## 2.5.3\n\n* `FIX`: do not evaluate pasted text as HTML ([#1073](https://github.com/bpmn-io/bpmn-js/issues/1073))\n\n## 3.4.1\n\n_Republish of `v3.4.0` without `.git` folder._\n\n## 3.4.0\n\n* `FIX`: properly render colored connection markers ([#981](https://github.com/bpmn-io/bpmn-js/issues/981))\n* `FEAT`: add ability to open different DI diagrams ([#87](https://github.com/bpmn-io/bpmn-js/issues/87))\n* `FIX`: correctly layout straight boundary to target connections ([#891](https://github.com/bpmn-io/bpmn-js/issues/891))\n* `FEAT`: resize participant to standard size on collapse ([#975](https://github.com/bpmn-io/bpmn-js/pull/975))\n* `FEAT`: consistently layout connection on reconnect start and end ([#971](https://github.com/bpmn-io/bpmn-js/pull/971))\n* `FEAT`: layout connection on element removal ([#989](https://github.com/bpmn-io/bpmn-js/issues/989))\n* `FIX`: properly crop sequence flow ends on undo/redo ([#940](https://github.com/bpmn-io/bpmn-js/issues/940))\n* `CHORE`: bump to [`diagram-js@3.3.0`](https://github.com/bpmn-io/diagram-js/blob/main/CHANGELOG.md#330)\n\n## 3.3.1\n\n* `FIX`: ignore unchanged direct editing completion\n* `CHORE`: update to `diagram-js-direct-editing@1.4.2`\n\n## 3.3.0\n\n* `FEAT`: display `DataInput` / `DataOutput` labels ([`89719de3b`](https://github.com/bpmn-io/bpmn-js/commit/89719de3be50d9270227fd04216f7f19f0d018a2))\n* `FEAT`: support basic `DataInput` / `DataOutput` move ([#962](https://github.com/bpmn-io/bpmn-js/pull/962))\n* `FIX`: properly handle `DataInput` / `DataOutput` move ([#961](https://github.com/bpmn-io/bpmn-js/issues/961))\n\n## 3.2.3\n\n* `FIX`: update to `diagram-js-direct-editing@1.4.1` to trim trailing/leading whitespace in task names ([#763](https://github.com/bpmn-io/bpmn-js/issues/763))\n\n## 3.2.2\n\n* `FIX`: gracefully handle missing waypoints ([`45486f2`](https://github.com/bpmn-io/bpmn-js/commit/45486f2afe7f42fcac31be9ca477a7c94babe7d8))\n\n## 3.2.1\n\n* `FIX`: bump to `diagram-js@3.1.3` / `tiny-svg@2.2.1` to work around MS Edge bug ([`ed798a15`](https://github.com/bpmn-io/bpmn-js/commit/ed798a152539a613dbc9de9d61231ebbfb50987a))\n\n## 3.2.0\n\n* `FEAT`: set isHorizontal=true for new and updated participant/lane DIs ([#934](https://github.com/bpmn-io/bpmn-js/issues/934))\n\n## 3.1.1\n\n* `CHORE`: update to `diagram-js@3.1.1`\n\n## 3.1.0\n\n* `CHORE`: update to `diagram-js@3.1`\n\n## 3.0.4\n\n* `FIX`: render labels always on top ([#920](https://github.com/bpmn-io/bpmn-js/pull/920))\n\n## 3.0.3\n\n* `FIX`: do not join incoming/outgoing flows other than sequence flows on element deletion ([#917](https://github.com/bpmn-io/bpmn-js/issues/917))\n\n## 3.0.2\n\n* `FIX`: correct IE 11 delete keybinding ([#904](https://github.com/bpmn-io/bpmn-js/issues/904))\n\n## 3.0.1\n\n* `FIX`: restore copy-paste behavior\n\n## 3.0.0\n\n* `FEAT`: improve context pad tooltip titles for `EventBasedGateway` ([`350a5ab`](https://github.com/bpmn-io/bpmn-js/commit/350a5ab75ed675991599faff9615e4bbe184d491))\n* `FEAT`: display group names ([#844](https://github.com/bpmn-io/bpmn-js/issues/844))\n* `FEAT`: add ability to move selection with keyboard arrows ([#376](https://github.com/bpmn-io/bpmn-js/issues/376))\n* `FEAT`: support `SHIFT` modifier to move elements / canvas with keyboard arrows at accelerated speed\n* `FEAT`: require `Ctrl/Cmd` to be pressed as a modifier key to move the canvas via keyboard errors\n* `FEAT`: auto-expand elements when children resize ([#786](https://github.com/bpmn-io/bpmn-js/issues/786))\n* `CHORE`: bind editor actions and keyboard shortcuts for explicitly added features only ([#887](https://github.com/bpmn-io/bpmn-js/pull/887))\n* `CHORE`: update to [`diagram-js@3.0.0`](https://github.com/bpmn-io/diagram-js/blob/main/CHANGELOG.md#300)\n* `FIX`: disallow attaching of `BoundaryEvent` to a `ReceiveTask` following an `EventBasedGateway` ([#874](https://github.com/bpmn-io/bpmn-js/issues/874))\n* `FIX`: fix date in license ([#882](https://github.com/bpmn-io/bpmn-js/pull/882))\n\n### Breaking Changes\n\n* `BpmnGlobalConnect` provider got removed. Use `connection.start` rule to customize whether connection should allowed to be started ([#565](https://github.com/bpmn-io/bpmn-js/issues/565), [#870](https://github.com/bpmn-io/bpmn-js/issues/870))\n* `EditorActions` / `Keyboard` do not pull in features implicitly anymore. If you roll your own editor, include features you would like to ship with manually to provide the respective actions / keyboard bindings ([`645265ad`](https://github.com/bpmn-io/bpmn-js/commit/645265ad7e4a47e80657c671068a027752d7504f))\n* Moving the canvas with keyboard arrows now requires the `Ctrl/Cmd` modifiers to be pressed.\n\n## 2.5.2\n\n* `FIX`: correct horizontal embedded label padding\n\n## 2.5.1\n\n* `FIX`: prevent error to be thrown on lane move ([#855](https://github.com/bpmn-io/bpmn-js/issues/855))\n\n## 2.5.0\n\n* `FEAT`: snap message flows to `bpmn:Event` center during connect ([#850](https://github.com/bpmn-io/bpmn-js/issues/850))\n* `CHORE`: bump to `diagram-js@2.6.0`\n* `FIX`: allow label movement over message flow ([#849](https://github.com/bpmn-io/bpmn-js/issues/849))\n\n## 2.4.1\n\n* `FIX`: make viewer IE 9 compatible\n* `FIX`: prevent duplicate connections after drop on flow ([#774](https://github.com/bpmn-io/bpmn-js/issues/774))\n* `FIX`: fix rules not preventing redundant loop ([#836](https://github.com/bpmn-io/bpmn-js/issues/836))\n\n## 2.4.0\n\n* `FEAT`: improve layouting of boundary event to host loops ([#467](https://github.com/bpmn-io/bpmn-js/issues/467))\n* `FEAT`: allow circular activity to activity loops ([#824](https://github.com/bpmn-io/bpmn-js/issues/824))\n* `FEAT`: create label on appropriate free position ([#825](https://github.com/bpmn-io/bpmn-js/issues/825))\n* `CHORE`: bump to `diagram-js@2.5.0`\n* `FIX`: repair label position not being adapted on host move\n\n## 2.3.1\n\n* `FIX`: revert to `Arial` as the default rendering font ([#819](https://github.com/bpmn-io/bpmn-js/issues/819))\n* `FIX`: keep event definitions when switching from interrupting to non-interrupting boundary event ([#799](https://github.com/bpmn-io/bpmn-js/issues/799))\n\n## 2.3.0\n\n* `CHORE`: update to `diagram-js@2.4.0`\n\n## 2.2.1\n\n* `FIX`: correct updating of multiple data stores ([`300e7010`](https://github.com/bpmn-io/bpmn-js/commit/300e7010c4e1862394d147988dc4c4bcc09b07bc))\n\n## 2.2.0\n\n* `FEAT`: emit export events ([#813](https://github.com/bpmn-io/bpmn-js/issues/813))\n* `FEAT`: unset businessObject name if empty ([`6c081d85`](https://github.com/bpmn-io/bpmn-js/commit/6c081d854fa8a4e87eb7cdd1744be37c78652667))\n* `FEAT`: resize text annotation on text change ([`100f3fb2`](https://github.com/bpmn-io/bpmn-js/commit/100f3fb2ee6373cd4b7ad0b76e520a1afb70887e))\n* `FIX`: apply data store behavior in collaboration only ([`5cc28d5d`](https://github.com/bpmn-io/bpmn-js/commit/5cc28d5d5571287a798b189aed75095f1fd0189e))\n* `FIX`: create/update labels when updating element name via `Modeling#updateProperties` ([`4a0f6da8`](https://github.com/bpmn-io/bpmn-js/commit/4a0f6da814c45268e8a324e73a53479bd2435bbe))\n\n## 2.1.0\n\n* `FEAT`: support specifying `lineHeight` for text rendering ([#256](https://github.com/bpmn-io/diagram-js/pull/256))\n* `FEAT`: `bpmn:LaneSet` elements get an ID assigned on creation\n* `FEAT`: external labels can be deleted, clearing the elements name ([#791](https://github.com/bpmn-io/bpmn-js/pull/791))\n* `FEAT`: add ability to override default element colors ([#713](https://github.com/bpmn-io/bpmn-js/issues/713))\n* `FEAT`: add ability to override font family and size of rendered labels ([`4bb270f1`](https://github.com/bpmn-io/bpmn-js/commit/4bb270f19279db40f9cc3c179e09ee3a9a114e7c))\n\n## 2.0.1\n\n_Republish of `v2.0.0` due to registry error._\n\n## 2.0.0\n\n* `FEAT`: allow data store to be modeled between participants ([#483](https://github.com/bpmn-io/bpmn-js/issues/483))\n* `CHORE`: update to [`diagram-js@2.0.0`](https://github.com/bpmn-io/diagram-js/blob/main/CHANGELOG.md#200)\n* `FIX`: correctly handle missing `bpmndi:Label` bounds during model updating ([#794](https://github.com/bpmn-io/bpmn-js/issues/794))\n\n### Breaking Changes\n\n* The `PopupMenu` API got rewritten, cf. [`b1852e1d`](https://github.com/bpmn-io/diagram-js/pull/254/commits/b1852e1d71f67bd36ae1eb02748d2d0cbf124625)\n\n## 1.3.3\n\n* `CHORE`: update to [`bpmn-moddle@5.1.5`](https://github.com/bpmn-io/bpmn-moddle/blob/main/CHANGELOG.md#515)\n\n## 1.3.2\n\n* `FIX`: correctly serialize extension attributes on `bpmn:Expression`\n\n## 1.3.1\n\n* `FIX`: correctly auto-place from boundary events attached to host edges ([#788](https://github.com/bpmn-io/bpmn-js/issues/788))\n\n## 1.3.0\n\n* `FEAT`: expose additional `BpmnTreeWalker` APIs for advanced import use-cases\n* `CHORE`: bump diagram-js and object-refs version\n\n## 1.2.1\n\n* `FIX`: correct side-effects config to not include `*.css` files\n\n## 1.2.0\n\n* `FEAT`: add initial snapping when creating associations\n* `CHORE`: update to `diagram-js@1.3.0`\n* `FIX`: allow message flows between collapsed pools\n* `FIX`: complete direct editing on popup menu use\n* `FIX`: focus label editing box on element creation\n\n## 1.1.1\n\n* `FIX`: escape `data-element-id` in CSS selectors\n\n## 1.1.0\n\n* `FEAT`: show gateway icon on context pad without marker ([`15dfab6b`](https://github.com/bpmn-io/bpmn-js/commit/15dfab6b5b12dd184acf070f2ab3ad205d1b245c))\n\n## 1.0.4\n\n* `FIX`: properly wire `$parent` on copy + paste\n* `FIX`: improve boundary event rendering to correct SVG to image conversion\n\n## 1.0.3\n\n* `FIX`: re-expose `TestHelper#bootstrapBpmnJS` util\n\n## 1.0.2\n\n* `FIX`: correct library default export\n\n## 1.0.1\n\n_Republished 1.0.0 with CHANGELOG entries._\n\n## 1.0.0\n\n* `CHORE`: convert code base to ES modules\n* `CHORE`: update utility toolbelt\n\n### Breaking Changes\n\n* You must now configure a module transpiler such as Babel or Webpack to handle ES module imports and exports.\n\n## 0.31.0\n\n* `FEAT`: encode entities in body properties during XML export\n* `CHORE`: bump to [`bpmn-moddle@4.0.0`](https://github.com/bpmn-io/bpmn-moddle/releases/tag/v4.0.0)\n* `CHORE`: bump utility version\n\n## 0.30.0\n\n* `CHORE`: bump to [`diagram-js@0.31.0`](https://github.com/bpmn-io/diagram-js/releases/tag/v0.31.0)\n\n## ...\n\nCheck `git log` for earlier history.\n" }, { "path": "LICENSE", "content": "Copyright (c) 2014-present Camunda Services GmbH\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \"Software\"), to deal in the\nSoftware without restriction, including without limitation the rights to use, copy,\nmodify, merge, publish, distribute, sublicense, and/or sell copies of the Software,\nand to permit persons to whom the Software is furnished to do so, subject to the\nfollowing conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nThe source code responsible for displaying the bpmn.io project watermark that\nlinks back to https://bpmn.io as part of rendered diagrams MUST NOT be\nremoved or changed. When this software is being used in a website or application,\nthe watermark must stay fully visible and not visually overlapped by other elements.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR\nPURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE\nOR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "# bpmn-js - BPMN 2.0 for the web\n\n[![Build Status](https://github.com/bpmn-io/bpmn-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js/actions?query=workflow%3ACI)\n\nView and edit BPMN 2.0 diagrams in the browser.\n\n[![bpmn-js screencast](./resources/screencast.gif \"bpmn-js in action\")](http://demo.bpmn.io/s/start)\n\n## Installation\n\nUse the library [pre-packaged](https://github.com/bpmn-io/bpmn-js-examples/tree/main/pre-packaged)\nor include it [via npm](https://github.com/bpmn-io/bpmn-js-examples/tree/main/bundling)\ninto your node-style web-application.\n\n## Usage\n\nTo get started, create a [bpmn-js](https://github.com/bpmn-io/bpmn-js) instance\nand render [BPMN 2.0 diagrams](https://www.omg.org/spec/BPMN/2.0.2/) in the browser:\n\n```javascript\nconst xml = '...'; // my BPMN 2.0 xml\nconst viewer = new BpmnJS({\n container: 'body'\n});\n\ntry {\n const { warnings } = await viewer.importXML(xml);\n\n console.log('rendered');\n} catch (err) {\n console.log('error rendering', err);\n}\n```\n\nCheckout our [examples](https://github.com/bpmn-io/bpmn-js-examples) for many\nmore supported usage scenarios.\n\n## Resources\n\n* [Demo](http://demo.bpmn.io)\n* [Issues](https://github.com/bpmn-io/bpmn-js/issues)\n* [Examples](https://github.com/bpmn-io/bpmn-js-examples)\n* [Forum](https://forum.bpmn.io)\n* [Changelog](./CHANGELOG.md)\n\n## Build and Run\n\nPrepare the project by installing all dependencies:\n\n```sh\nnpm install\n```\n\nThen, depending on your use-case you may run any of the following commands:\n\n```sh\n# build the library and run all tests\nnpm run all\n\n# spin up a single local modeler instance\nnpm start\n\n# run the full development setup\nnpm run dev\n```\n\nYou may need to perform [additional project setup](./docs/project/SETUP.md) when\nbuilding the latest development snapshot.\n\n## Related\n\nbpmn-js builds on top of a few powerful tools:\n\n* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers\n* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit\n\nIt is an extensible toolkit, complemented by many [additional utilities](https://github.com/bpmn-io/awesome-bpmn-io).\n\n## License\n\nUse under the terms of the [bpmn.io license](http://bpmn.io/license).\n" }, { "path": "assets/bpmn-js.css", "content": ".bjs-container {\n --bjs-font-family: Arial, sans-serif;\n\n --color-grey-225-10-15: hsl(225, 10%, 15%);\n --color-grey-225-10-35: hsl(225, 10%, 35%);\n --color-grey-225-10-55: hsl(225, 10%, 55%);\n --color-grey-225-10-75: hsl(225, 10%, 75%);\n --color-grey-225-10-80: hsl(225, 10%, 80%);\n --color-grey-225-10-85: hsl(225, 10%, 85%);\n --color-grey-225-10-90: hsl(225, 10%, 90%);\n --color-grey-225-10-95: hsl(225, 10%, 95%);\n --color-grey-225-10-97: hsl(225, 10%, 97%);\n\n --color-blue-205-100-45: hsl(205, 100%, 45%);\n --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);\n --color-blue-205-100-50: hsl(205, 100%, 50%);\n --color-blue-205-100-95: hsl(205, 100%, 95%);\n\n --color-green-150-86-44: hsl(150, 86%, 44%);\n\n --color-red-360-100-40: hsl(360, 100%, 40%);\n --color-red-360-100-45: hsl(360, 100%, 45%);\n --color-red-360-100-92: hsl(360, 100%, 92%);\n --color-red-360-100-97: hsl(360, 100%, 97%);\n\n --color-white: hsl(0, 0%, 100%);\n --color-black: hsl(0, 0%, 0%);\n --color-black-opacity-05: hsla(0, 0%, 0%, 5%);\n --color-black-opacity-10: hsla(0, 0%, 0%, 10%);\n\n --breadcrumbs-font-family: var(--bjs-font-family);\n --breadcrumbs-item-color: var(--color-blue-205-100-50);\n --breadcrumbs-arrow-color: var(--color-black);\n --drilldown-fill-color: var(--color-white);\n --drilldown-background-color: var(--color-blue-205-100-50);\n}\n\n.bjs-breadcrumbs {\n position: absolute;\n display: none;\n flex-wrap: wrap;\n align-items: center;\n top: 30px;\n left: 30px;\n padding: 0px;\n margin: 0px;\n font-family: var(--breadcrumbs-font-family);\n font-size: 16px;\n line-height: normal;\n}\n\n.bjs-breadcrumbs-shown .bjs-breadcrumbs {\n display: flex;\n}\n\n.djs-palette-shown .bjs-breadcrumbs {\n left: 90px;\n}\n\n.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {\n left: 140px;\n}\n\n.bjs-breadcrumbs li {\n display: inline-flex;\n padding-bottom: 5px;\n align-items: center;\n}\n\n.bjs-breadcrumbs li a {\n cursor: pointer;\n color: var(--breadcrumbs-item-color);\n}\n\n.bjs-breadcrumbs li:last-of-type a {\n color: inherit;\n cursor: default;\n}\n\n.bjs-breadcrumbs li:not(:first-child)::before {\n content: url('data:image/svg+xml;utf8,');\n padding: 0 8px;\n color: var(--breadcrumbs-arrow-color);\n height: 1em;\n}\n\n.bjs-breadcrumbs .bjs-crumb {\n display: inline-block;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bjs-drilldown {\n width: 20px;\n height: 20px;\n\n padding: 0px;\n margin-left: -20px;\n\n cursor: pointer;\n border: none;\n border-radius: 2px;\n outline: none;\n\n fill: var(--drilldown-fill-color);\n background-color: var(--drilldown-background-color);\n}\n\n.bjs-drilldown-empty {\n display: none;\n}\n\n.selected .bjs-drilldown-empty {\n display: inherit;\n}\n\n[data-popup=\"align-elements\"] .djs-popup-results {\n display: flex;\n}\n\n[data-popup=\"align-elements\"] .djs-popup-body [data-group] + [data-group] {\n border-left: 1px solid var(--popup-border-color);\n}\n\n[data-popup=\"align-elements\"] [data-group=\"align\"] {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n\n[data-popup=\"align-elements\"] .djs-popup-body .entry {\n padding: 6px 8px;\n}\n\n[data-popup=\"align-elements\"] .djs-popup-body .entry:not(:first-child) {\n margin-top: 0;\n}\n\n[data-popup=\"align-elements\"] .djs-popup-entry-icon {\n display: block;\n margin: 0;\n height: 20px;\n width: 20px;\n}\n" }, { "path": "docs/project/SETUP.md", "content": "# Project Setup\n\nThis document describes the necessary steps to setup a `bpmn-js` development environment.\n\n## TLDR;\n\nOn Linux, OS X or Windows? [git](http://git-scm.com), [NodeJS](https://nodejs.org) and [npm](https://www.npmjs.org/doc/cli/npm.html) ready? Check out the [setup script section](#setup-via-script) below.\n\n## Manual Steps\n\nMake sure you have [git](http://git-scm.com), [NodeJS](https://nodejs.org) and [npm](https://www.npmjs.org/doc/cli/npm.html) installed before you continue.\n\n### Get Project + Dependencies\n\nThe following projects from the [bpmn-io](https://github.com/bpmn-io) project on GitHub\n\n* [bpmn-js](https://github.com/bpmn-io/bpmn-js)\n* [diagram-js](https://github.com/bpmn-io/diagram-js)\n* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle)\n\nand clone them into a common directory via\n\n```sh\ngit clone git@github.com:bpmn-io/bpmn-js.git\ngit clone git@github.com:bpmn-io/diagram-js.git\ngit clone git@github.com:bpmn-io/bpmn-moddle.git\n```\n\n### Link Projects\n\n[Link dependent projects](https://docs.npmjs.com/cli/link) between each other to pick up changes immediately.\n\n```plain\n.\n├─bpmn-js\n│ └─node_modules\n│ ├─diagram-js \n│ └─bpmn-moddle \n├─diagram-js\n├─bpmn-moddle\n```\n\n#### On OS X, Linux\n\nUse [npm-link](https://docs.npmjs.com/cli/link) or `ln -s `.\n\n#### On Windows\n\nUse `mklink /d ` [(docs)](http://technet.microsoft.com/en-us/library/cc753194.aspx).\n\n### Install Dependencies\n\nExecute `npm install` on each of the projects to grab their dependencies.\n\n### Verify Things are O.K.\n\nExecute `npm run all` on each project. Things should be fine.\n\n### Setup via Script\n\nThe whole setup can be automated through setup scripts for [Linux/OS X](./setup.sh) and [Windows](./setup.bat).\n" }, { "path": "docs/project/setup-alternative.sh", "content": "#!/bin/bash\n\n###\n# Setup script to be executed in a bpmn.io project root (some empty folder chosen by YOU). Use if you do not want to rely on npm link.\n###\n\nbase=`pwd`\n\necho cloning repositories\n\ngit clone git@github.com:bpmn-io/diagram-js.git\ngit clone git@github.com:bpmn-io/bpmn-js.git\ngit clone git@github.com:bpmn-io/bpmn-moddle.git\n\n\necho done.\n\necho setup diagram-js\n\ncd $base/diagram-js\nnpm install\n\n\necho setup bpmn-moddle\n\ncd $base/bpmn-moddle\nnpm install\n\n\necho setup bpmn-js\n\ncd $base/bpmn-js\nmkdir node_modules\nln -s $base/bpmn-moddle node_modules/bpmn-moddle\nln -s $base/diagram-js node_modules/diagram-js\nnpm install\n\n\ncd $base\n\necho all done.\n" }, { "path": "docs/project/setup.bat", "content": "@echo off\n\nrem ###\nrem # Setup script to be executed in a bpmn.io project root (some empty folder chosen by YOU)\nrem ##\n\nset BASE=%CD%\n\necho cloning repositories\n\ngit clone git@github.com:bpmn-io/diagram-js.git\ngit clone git@github.com:bpmn-io/bpmn-js.git\ngit clone git@github.com:bpmn-io/bpmn-moddle.git\n\necho done.\n\n\necho setup diagram-js\n\ncd %BASE%\\diagram-js\nnpm install\n\n\necho setup bpmn-moddle\n\ncd %BASE%\\bpmn-moddle\nnpm install\n\n\necho prepare setup bpmn-js\n\nmkdir %BASE%\\bpmn-js\\node_modules\n\nrem link bpmn-js\nmklink /D %BASE%\\bpmn-js\\node_modules\\bpmn-moddle %BASE%\\bpmn-moddle\nmklink /D %BASE%\\bpmn-js\\node_modules\\diagram-js %BASE%\\diagram-js\n\n\necho setup bpmn-js\n\ncd %BASE%\\bpmn-js\nnpm install\n\n\ncd %BASE%\n" }, { "path": "docs/project/setup.sh", "content": "#!/bin/bash\n\n###\n# Setup script to be executed in a bpmn.io project root (some empty folder chosen by YOU)\n###\n\nbase=`pwd`\n\necho cloning repositories\n\ngit clone git@github.com:bpmn-io/diagram-js.git\ngit clone git@github.com:bpmn-io/bpmn-js.git\ngit clone git@github.com:bpmn-io/bpmn-moddle.git\n\necho done.\n\n\necho setup diagram-js\n\ncd $base/diagram-js\nnpm install\n\n\necho setup bpmn-moddle\n\ncd $base/bpmn-moddle\nnpm install\n\n\necho setup bpmn-js\n\ncd $base/bpmn-js\nnpm install\nnpm link ../diagram-js\nnpm link ../bpmn-moddle\n\n\ncd $base\n\necho all done.\n" }, { "path": "docs/translations.json", "content": "[\n \"Activate create/remove space tool\",\n \"Activate global connect tool\",\n \"Activate hand tool\",\n \"Activate lasso tool\",\n \"Ad-hoc sub-process\",\n \"Ad-hoc sub-process (collapsed)\",\n \"Ad-hoc sub-process (expanded)\",\n \"Add lane above\",\n \"Add lane below\",\n \"Add text annotation\",\n \"Align elements\",\n \"Align elements bottom\",\n \"Align elements center\",\n \"Align elements left\",\n \"Align elements middle\",\n \"Align elements right\",\n \"Align elements top\",\n \"Append compensation activity\",\n \"Append conditional intermediate catch event\",\n \"Append end event\",\n \"Append gateway\",\n \"Append intermediate/boundary event\",\n \"Append message intermediate catch event\",\n \"Append receive task\",\n \"Append signal intermediate catch event\",\n \"Append task\",\n \"Append timer intermediate catch event\",\n \"Business rule task\",\n \"Call activity\",\n \"Cancel boundary event\",\n \"Cancel end event\",\n \"Change element\",\n \"Collection\",\n \"Compensation boundary event\",\n \"Compensation end event\",\n \"Compensation intermediate throw event\",\n \"Compensation start event\",\n \"Complex gateway\",\n \"Conditional boundary event\",\n \"Conditional boundary event (non-interrupting)\",\n \"Conditional flow\",\n \"Conditional intermediate catch event\",\n \"Conditional start event\",\n \"Conditional start event (non-interrupting)\",\n \"Connect to other element\",\n \"Connect using association\",\n \"Connect using data input association\",\n \"Create data object reference\",\n \"Create data store reference\",\n \"Create end event\",\n \"Create expanded sub-process\",\n \"Create gateway\",\n \"Create group\",\n \"Create intermediate/boundary event\",\n \"Create pool/participant\",\n \"Create start event\",\n \"Create task\",\n \"Data object must be placed within a pool/participant.\",\n \"Data object reference\",\n \"Data store reference\",\n \"Default flow\",\n \"Delete\",\n \"Distribute elements horizontally\",\n \"Distribute elements vertically\",\n \"Divide into three lanes\",\n \"Divide into two lanes\",\n \"Empty pool/participant\",\n \"Empty pool/participant (removes content)\",\n \"End event\",\n \"Error boundary event\",\n \"Error end event\",\n \"Error start event\",\n \"Escalation boundary event\",\n \"Escalation boundary event (non-interrupting)\",\n \"Escalation end event\",\n \"Escalation intermediate throw event\",\n \"Escalation start event\",\n \"Escalation start event (non-interrupting)\",\n \"Event sub-process\",\n \"Event-based gateway\",\n \"Exclusive gateway\",\n \"Inclusive gateway\",\n \"Intermediate throw event\",\n \"Link intermediate catch event\",\n \"Link intermediate throw event\",\n \"Loop\",\n \"Manual task\",\n \"Message boundary event\",\n \"Message boundary event (non-interrupting)\",\n \"Message end event\",\n \"Message intermediate catch event\",\n \"Message intermediate throw event\",\n \"Message start event\",\n \"Message start event (non-interrupting)\",\n \"Open {element}\",\n \"Parallel gateway\",\n \"Parallel multi-instance\",\n \"Participant multiplicity\",\n \"Receive task\",\n \"Script task\",\n \"Search in diagram\",\n \"Send task\",\n \"Sequence flow\",\n \"Sequential multi-instance\",\n \"Service task\",\n \"Signal boundary event\",\n \"Signal boundary event (non-interrupting)\",\n \"Signal end event\",\n \"Signal intermediate catch event\",\n \"Signal intermediate throw event\",\n \"Signal start event\",\n \"Signal start event (non-interrupting)\",\n \"Start event\",\n \"Sub-process\",\n \"Sub-process (collapsed)\",\n \"Sub-process (expanded)\",\n \"Task\",\n \"Terminate end event\",\n \"Timer boundary event\",\n \"Timer boundary event (non-interrupting)\",\n \"Timer intermediate catch event\",\n \"Timer start event\",\n \"Timer start event (non-interrupting)\",\n \"Toggle non-interrupting\",\n \"Transaction\",\n \"User task\",\n \"flow elements must be children of pools/participants\"\n]" }, { "path": "eslint.config.mjs", "content": "import bpmnIoPlugin from 'eslint-plugin-bpmn-io';\n\nconst files = {\n ignored: [\n 'dist',\n 'coverage'\n ],\n build: [\n 'test/config/*.js',\n 'tasks/**/*.mjs',\n '*.js',\n '*.mjs'\n ],\n test: [\n 'test/**/*.js'\n ]\n};\n\nexport default [\n {\n ignores: files.ignored\n },\n\n // build\n ...bpmnIoPlugin.configs.node.map(config => {\n\n return {\n ...config,\n files: files.build\n };\n }),\n\n // lib + test\n ...bpmnIoPlugin.configs.browser.map(config => {\n\n return {\n ...config,\n ignores: files.build\n };\n }),\n\n // test\n ...bpmnIoPlugin.configs.mocha.map(config => {\n\n return {\n ...config,\n files: files.test,\n };\n }),\n {\n languageOptions: {\n globals: {\n sinon: true,\n require: true\n }\n },\n files: files.test\n }\n];" }, { "path": "lib/BaseModeler.js", "content": "import inherits from 'inherits-browser';\n\nimport { Ids } from 'ids';\n\nimport BaseViewer from './BaseViewer';\n\n\n/**\n * @typedef {import('./BaseViewer').BaseViewerOptions} BaseViewerOptions\n * @typedef {import('./BaseViewer').ModdleElementsById} ModdleElementsById\n *\n * @typedef {import('./model/Types').ModdleElement} ModdleElement\n */\n\n/**\n * A base modeler for BPMN 2.0 diagrams.\n *\n * See {@link bpmn-js/lib/Modeler} for a fully-featured modeler.\n *\n * @template [ServiceMap=null]\n *\n * @extends BaseViewer\n *\n * @param {BaseViewerOptions} [options] The options to configure the modeler.\n */\nexport default function BaseModeler(options) {\n BaseViewer.call(this, options);\n\n // hook ID collection into the modeler\n this.on('import.parse.complete', function(event) {\n if (!event.error) {\n this._collectIds(event.definitions, event.elementsById);\n }\n }, this);\n\n this.on('diagram.destroy', function() {\n this.get('moddle').ids.clear();\n }, this);\n}\n\ninherits(BaseModeler, BaseViewer);\n\n\n/**\n * Create a moddle instance, attaching IDs to it.\n *\n * @param {BaseViewerOptions} options\n *\n * @return {Moddle}\n */\nBaseModeler.prototype._createModdle = function(options) {\n var moddle = BaseViewer.prototype._createModdle.call(this, options);\n\n // attach ids to moddle to be able to track and validated ids in the BPMN 2.0\n // XML document tree\n moddle.ids = new Ids([ 32, 36, 1 ]);\n\n return moddle;\n};\n\n/**\n * Collect IDs processed during parsing of the definitions object.\n *\n * @param {ModdleElement} definitions\n * @param {ModdleElementsById} elementsById\n */\nBaseModeler.prototype._collectIds = function(definitions, elementsById) {\n\n var moddle = definitions.$model,\n ids = moddle.ids,\n id;\n\n // remove references from previous import\n ids.clear();\n\n for (id in elementsById) {\n ids.claim(id, elementsById[ id ]);\n }\n};\n" }, { "path": "lib/BaseModeler.spec.ts", "content": "import Canvas from 'diagram-js/lib/core/Canvas';\nimport EventBus from 'diagram-js/lib/core/EventBus';\n\nimport BaseModeler from './BaseModeler';\n\nimport { testViewer } from './BaseViewer.spec';\n\nconst modeler = new BaseModeler({\n container: 'container'\n});\n\ntestViewer(modeler);\n\n\nconst otherModeler = new BaseModeler({\n container: 'container'\n});\n\nconst extendedModeler = new BaseModeler({\n container: 'container',\n alignToOrigin: false,\n propertiesPanel: {\n attachTo: '#properties-panel'\n }\n});\n\n\n// typed API usage\n\ntype FooEvent = {\n /**\n * Very cool field!\n */\n foo: string;\n};\n\ntype EventMap = {\n\n foo: FooEvent\n};\n\ntype TypeMap = {\n canvas: Canvas,\n eventBus: EventBus\n};\n\nconst typedModeler = new BaseModeler();\n\nconst bus = typedModeler.get('eventBus');\n\nconst canvas = typedModeler.get('canvas');\n\ncanvas.zoom('fit-viewport');\n\ntypedModeler.on('foo', event => {\n console.log(event.foo);\n});\n\ntypedModeler.get('eventBus').on('foo', e => console.log(e.foo));" }, { "path": "lib/BaseViewer.js", "content": "/**\n * The code in the area\n * must not be changed.\n *\n * @see http://bpmn.io/license for more information.\n */\nimport {\n assign,\n find,\n isNumber,\n omit\n} from 'min-dash';\n\nimport {\n domify,\n assignStyle,\n query as domQuery,\n remove as domRemove\n} from 'min-dom';\n\nimport {\n innerSVG\n} from 'tiny-svg';\n\nimport Diagram from 'diagram-js';\nimport { BpmnModdle } from 'bpmn-moddle';\n\nimport inherits from 'inherits-browser';\n\nimport {\n importBpmnDiagram\n} from './import/Importer';\n\n/**\n * @template T\n *\n * @typedef { import('diagram-js/lib/core/EventBus').default } EventBus\n */\n\n/**\n * @template T\n *\n * @typedef {import('diagram-js/lib/core/EventBus').EventBusEventCallback} EventBusEventCallback\n */\n\n/**\n * @typedef {import('didi').ModuleDeclaration} ModuleDeclaration\n *\n * @typedef {import('./model/Types').Moddle} Moddle\n * @typedef {import('./model/Types').ModdleElement} ModdleElement\n * @typedef {import('./model/Types').ModdleExtension} ModdleExtension\n *\n * @typedef { {\n * width?: number|string;\n * height?: number|string;\n * position?: string;\n * container?: string|HTMLElement;\n * moddleExtensions?: ModdleExtensions;\n * additionalModules?: ModuleDeclaration[];\n * } & Record } BaseViewerOptions\n *\n * @typedef {Record} ModdleElementsById\n *\n * @typedef { {\n * [key: string]: ModdleExtension;\n * } } ModdleExtensions\n *\n * @typedef { {\n * warnings: string[];\n * } } ImportXMLResult\n *\n * @typedef {ImportXMLResult & Error} ImportXMLError\n *\n * @typedef {ImportXMLResult} ImportDefinitionsResult\n *\n * @typedef {ImportXMLError} ImportDefinitionsError\n *\n * @typedef {ImportXMLResult} OpenResult\n *\n * @typedef {ImportXMLError} OpenError\n *\n * @typedef { {\n * format?: boolean;\n * preamble?: boolean;\n * } } SaveXMLOptions\n *\n * @typedef { {\n * xml?: string;\n * error?: Error;\n * } } SaveXMLResult\n *\n * @typedef { {\n * svg: string;\n * } } SaveSVGResult\n *\n * @typedef { {\n * xml: string;\n * } } ImportParseStartEvent\n *\n * @typedef { {\n * error?: ImportXMLError;\n * definitions?: ModdleElement;\n * elementsById?: ModdleElementsById;\n * references?: ModdleElement[];\n * warnings: string[];\n * } } ImportParseCompleteEvent\n *\n * @typedef { {\n * error?: ImportXMLError;\n * warnings: string[];\n * } } ImportDoneEvent\n *\n * @typedef { {\n * definitions: ModdleElement;\n * } } SaveXMLStartEvent\n *\n * @typedef {SaveXMLResult} SaveXMLDoneEvent\n *\n * @typedef { {\n * error?: Error;\n * svg: string;\n * } } SaveSVGDoneEvent\n */\n\n/**\n * @template Type\n *\n * @typedef { Type extends { eventBus: EventBus } ? X : never } EventMap\n */\n\n/**\n * A base viewer for BPMN 2.0 diagrams.\n *\n * Have a look at {@link bpmn-js/lib/Viewer}, {@link bpmn-js/lib/NavigatedViewer} or {@link bpmn-js/lib/Modeler} for\n * bundles that include actual features.\n *\n * @template [ServiceMap=null]\n *\n * @extends Diagram\n *\n * @param {BaseViewerOptions} [options] The options to configure the viewer.\n */\nexport default function BaseViewer(options) {\n\n /**\n * @type {BaseViewerOptions}\n */\n options = assign({}, DEFAULT_OPTIONS, options);\n\n /**\n * @type {Moddle}\n */\n this._moddle = this._createModdle(options);\n\n /**\n * @type {HTMLElement}\n */\n this._container = this._createContainer(options);\n\n this._init(this._container, this._moddle, options);\n\n /* */\n\n addProjectLogo(this._container);\n\n /* */\n}\n\ninherits(BaseViewer, Diagram);\n\n/**\n * Parse and render a BPMN 2.0 diagram.\n *\n * Once finished the viewer reports back the result to the\n * provided callback function with (err, warnings).\n *\n * ## Life-Cycle Events\n *\n * During import the viewer will fire life-cycle events:\n *\n * * import.parse.start (about to read model from XML)\n * * import.parse.complete (model read; may have worked or not)\n * * import.render.start (graphical import start)\n * * import.render.complete (graphical import finished)\n * * import.done (everything done)\n *\n * You can use these events to hook into the life-cycle.\n *\n * @throws {ImportXMLError} An error thrown during the import of the XML.\n *\n * @fires BaseViewer#ImportParseStartEvent\n * @fires BaseViewer#ImportParseCompleteEvent\n * @fires Importer#ImportRenderStartEvent\n * @fires Importer#ImportRenderCompleteEvent\n * @fires BaseViewer#ImportDoneEvent\n *\n * @param {string} xml The BPMN 2.0 XML to be imported.\n * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or Id of the BPMN diagram to open.\n *\n * @return {Promise} A promise resolving with warnings that were produced during the import.\n */\nBaseViewer.prototype.importXML = async function importXML(xml, bpmnDiagram) {\n\n const self = this;\n\n function ParseCompleteEvent(data) {\n return self.get('eventBus').createEvent(data);\n }\n\n let aggregatedWarnings = [];\n try {\n\n // hook in pre-parse listeners +\n // allow xml manipulation\n\n /**\n * A `import.parse.start` event.\n *\n * @event BaseViewer#ImportParseStartEvent\n * @type {ImportParseStartEvent}\n */\n xml = this._emit('import.parse.start', { xml: xml }) || xml;\n\n let parseResult;\n try {\n parseResult = await this._moddle.fromXML(xml, 'bpmn:Definitions');\n } catch (error) {\n this._emit('import.parse.complete', {\n error\n });\n\n throw error;\n }\n\n let definitions = parseResult.rootElement;\n const references = parseResult.references;\n const parseWarnings = parseResult.warnings;\n const elementsById = parseResult.elementsById;\n\n aggregatedWarnings = aggregatedWarnings.concat(parseWarnings);\n\n // hook in post parse listeners +\n // allow definitions manipulation\n\n /**\n * A `import.parse.complete` event.\n *\n * @event BaseViewer#ImportParseCompleteEvent\n * @type {ImportParseCompleteEvent}\n */\n definitions = this._emit('import.parse.complete', ParseCompleteEvent({\n error: null,\n definitions: definitions,\n elementsById: elementsById,\n references: references,\n warnings: aggregatedWarnings\n })) || definitions;\n\n const importResult = await this.importDefinitions(definitions, bpmnDiagram);\n\n aggregatedWarnings = aggregatedWarnings.concat(importResult.warnings);\n\n /**\n * A `import.parse.complete` event.\n *\n * @event BaseViewer#ImportDoneEvent\n * @type {ImportDoneEvent}\n */\n this._emit('import.done', { error: null, warnings: aggregatedWarnings });\n\n return { warnings: aggregatedWarnings };\n } catch (err) {\n let error = err;\n aggregatedWarnings = aggregatedWarnings.concat(error.warnings || []);\n addWarningsToError(error, aggregatedWarnings);\n\n error = checkValidationError(error);\n\n this._emit('import.done', { error, warnings: error.warnings });\n\n throw error;\n }\n};\n\n\n/**\n * Import parsed definitions and render a BPMN 2.0 diagram.\n *\n * Once finished the viewer reports back the result to the\n * provided callback function with (err, warnings).\n *\n * ## Life-Cycle Events\n *\n * During import the viewer will fire life-cycle events:\n *\n * * import.render.start (graphical import start)\n * * import.render.complete (graphical import finished)\n *\n * You can use these events to hook into the life-cycle.\n *\n * @throws {ImportDefinitionsError} An error thrown during the import of the definitions.\n *\n * @param {ModdleElement} definitions The definitions.\n * @param {ModdleElement|string} [bpmnDiagram] The optional diagram or ID of the BPMN diagram to open.\n *\n * @return {Promise} A promise resolving with warnings that were produced during the import.\n */\nBaseViewer.prototype.importDefinitions = async function importDefinitions(definitions, bpmnDiagram) {\n this._setDefinitions(definitions);\n const result = await this.open(bpmnDiagram);\n\n return { warnings: result.warnings };\n};\n\n\n/**\n * Open diagram of previously imported XML.\n *\n * Once finished the viewer reports back the result to the\n * provided callback function with (err, warnings).\n *\n * ## Life-Cycle Events\n *\n * During switch the viewer will fire life-cycle events:\n *\n * * import.render.start (graphical import start)\n * * import.render.complete (graphical import finished)\n *\n * You can use these events to hook into the life-cycle.\n *\n * @throws {OpenError} An error thrown during opening.\n *\n * @param {ModdleElement|string} bpmnDiagramOrId The diagram or Id of the BPMN diagram to open.\n *\n * @return {Promise} A promise resolving with warnings that were produced during opening.\n */\nBaseViewer.prototype.open = async function open(bpmnDiagramOrId) {\n\n const definitions = this._definitions;\n let bpmnDiagram = bpmnDiagramOrId;\n\n if (!definitions) {\n const error = new Error('no XML imported');\n addWarningsToError(error, []);\n\n throw error;\n }\n\n if (typeof bpmnDiagramOrId === 'string') {\n bpmnDiagram = findBPMNDiagram(definitions, bpmnDiagramOrId);\n\n if (!bpmnDiagram) {\n const error = new Error('BPMNDiagram <' + bpmnDiagramOrId + '> not found');\n addWarningsToError(error, []);\n\n throw error;\n }\n }\n\n // clear existing rendered diagram\n // catch synchronous exceptions during #clear()\n try {\n this.clear();\n } catch (error) {\n addWarningsToError(error, []);\n\n throw error;\n }\n\n // perform graphical import\n const { warnings } = await importBpmnDiagram(this, definitions, bpmnDiagram);\n\n return { warnings };\n};\n\n/**\n * Export the currently displayed BPMN 2.0 diagram as\n * a BPMN 2.0 XML document.\n *\n * ## Life-Cycle Events\n *\n * During XML saving the viewer will fire life-cycle events:\n *\n * * saveXML.start (before serialization)\n * * saveXML.serialized (after xml generation)\n * * saveXML.done (everything done)\n *\n * You can use these events to hook into the life-cycle.\n *\n * @throws {Error} An error thrown during export.\n *\n * @fires BaseViewer#SaveXMLStart\n * @fires BaseViewer#SaveXMLDone\n *\n * @param {SaveXMLOptions} [options] The options.\n *\n * @return {Promise} A promise resolving with the XML.\n */\nBaseViewer.prototype.saveXML = async function saveXML(options) {\n\n options = options || {};\n\n let definitions = this._definitions,\n error, xml;\n\n try {\n if (!definitions) {\n throw new Error('no definitions loaded');\n }\n\n // allow to fiddle around with definitions\n\n /**\n * A `saveXML.start` event.\n *\n * @event BaseViewer#SaveXMLStartEvent\n * @type {SaveXMLStartEvent}\n */\n definitions = this._emit('saveXML.start', {\n definitions\n }) || definitions;\n\n const result = await this._moddle.toXML(definitions, options);\n xml = result.xml;\n\n xml = this._emit('saveXML.serialized', {\n xml\n }) || xml;\n } catch (err) {\n error = err;\n }\n\n const result = error ? { error } : { xml };\n\n /**\n * A `saveXML.done` event.\n *\n * @event BaseViewer#SaveXMLDoneEvent\n * @type {SaveXMLDoneEvent}\n */\n this._emit('saveXML.done', result);\n\n if (error) {\n throw error;\n }\n\n return result;\n};\n\n\n/**\n * Export the currently displayed BPMN 2.0 diagram as\n * an SVG image.\n *\n * ## Life-Cycle Events\n *\n * During SVG saving the viewer will fire life-cycle events:\n *\n * * saveSVG.start (before serialization)\n * * saveSVG.done (everything done)\n *\n * You can use these events to hook into the life-cycle.\n *\n * @throws {Error} An error thrown during export.\n *\n * @fires BaseViewer#SaveSVGDone\n *\n * @return {Promise} A promise resolving with the SVG.\n */\nBaseViewer.prototype.saveSVG = async function saveSVG() {\n this._emit('saveSVG.start');\n\n let svg, err;\n\n try {\n const canvas = this.get('canvas');\n\n const contentNode = canvas.getActiveLayer(),\n defsNode = domQuery(':scope > defs', canvas._svg);\n\n const contents = innerSVG(contentNode),\n defs = defsNode ? '' + innerSVG(defsNode) + '' : '';\n\n const bbox = contentNode.getBBox();\n\n svg =\n '\\n' +\n '\\n' +\n '\\n' +\n '' +\n defs + contents +\n '';\n } catch (e) {\n err = e;\n }\n\n /**\n * A `saveSVG.done` event.\n *\n * @event BaseViewer#SaveSVGDoneEvent\n * @type {SaveSVGDoneEvent}\n */\n this._emit('saveSVG.done', {\n error: err,\n svg: svg\n });\n\n if (err) {\n throw err;\n }\n\n return { svg };\n};\n\nBaseViewer.prototype._setDefinitions = function(definitions) {\n this._definitions = definitions;\n};\n\n/**\n * Return modules to instantiate with.\n *\n * @return {ModuleDeclaration[]} The modules.\n */\nBaseViewer.prototype.getModules = function() {\n return this._modules;\n};\n\n/**\n * Remove all drawn elements from the viewer.\n *\n * After calling this method the viewer can still be reused for opening another\n * diagram.\n */\nBaseViewer.prototype.clear = function() {\n if (!this.getDefinitions()) {\n\n // no diagram to clear\n return;\n }\n\n // remove drawn elements\n Diagram.prototype.clear.call(this);\n};\n\n/**\n * Destroy the viewer instance and remove all its remainders from the document\n * tree.\n */\nBaseViewer.prototype.destroy = function() {\n\n // diagram destroy\n Diagram.prototype.destroy.call(this);\n\n // dom detach\n domRemove(this._container);\n};\n\n/**\n * @overlord\n *\n * Register an event listener for events with the given name.\n *\n * The callback will be invoked with `event, ...additionalArguments`\n * that have been passed to {@link EventBus#fire}.\n *\n * Returning false from a listener will prevent the events default action\n * (if any is specified). To stop an event from being processed further in\n * other listeners execute {@link Event#stopPropagation}.\n *\n * Returning anything but `undefined` from a listener will stop the listener propagation.\n *\n * @template T\n *\n * @param {string|string[]} events The event(s) to listen to.\n * @param {number} [priority] The priority with which to listen.\n * @param {EventBusEventCallback} callback The callback.\n * @param {any} [that] Value of `this` the callback will be called with.\n */\n/**\n * Register an event listener for events with the given name.\n *\n * The callback will be invoked with `event, ...additionalArguments`\n * that have been passed to {@link EventBus#fire}.\n *\n * Returning false from a listener will prevent the events default action\n * (if any is specified). To stop an event from being processed further in\n * other listeners execute {@link Event#stopPropagation}.\n *\n * Returning anything but `undefined` from a listener will stop the listener propagation.\n *\n * @template {keyof EventMap} EventName\n *\n * @param {EventName} events to subscribe to\n * @param {number} [priority=1000] listen priority\n * @param {EventBusEventCallback<(EventMap)[EventName]>} callback\n * @param {any} [that] callback context\n */\nBaseViewer.prototype.on = function(events, priority, callback, that) {\n return this.get('eventBus').on(events, priority, callback, that);\n};\n\n/**\n * Remove an event listener.\n *\n * @param {string|string[]} events The event(s).\n * @param {Function} [callback] The callback.\n */\nBaseViewer.prototype.off = function(events, callback) {\n this.get('eventBus').off(events, callback);\n};\n\n/**\n * Attach the viewer to an HTML element.\n *\n * @param {HTMLElement} parentNode The parent node to attach to.\n */\nBaseViewer.prototype.attachTo = function(parentNode) {\n\n if (!parentNode) {\n throw new Error('parentNode required');\n }\n\n // ensure we detach from the\n // previous, old parent\n this.detach();\n\n // unwrap jQuery if provided\n if (parentNode.get && parentNode.constructor.prototype.jquery) {\n parentNode = parentNode.get(0);\n }\n\n if (typeof parentNode === 'string') {\n parentNode = domQuery(parentNode);\n }\n\n parentNode.appendChild(this._container);\n\n this._emit('attach', {});\n\n this.get('canvas').resized();\n};\n\n/**\n * Get the definitions model element.\n *\n * @return {ModdleElement} The definitions model element.\n */\nBaseViewer.prototype.getDefinitions = function() {\n return this._definitions;\n};\n\n/**\n * Detach the viewer.\n *\n * @fires BaseViewer#DetachEvent\n */\nBaseViewer.prototype.detach = function() {\n\n const container = this._container,\n parentNode = container.parentNode;\n\n if (!parentNode) {\n return;\n }\n\n /**\n * A `detach` event.\n *\n * @event BaseViewer#DetachEvent\n * @type {Object}\n */\n this._emit('detach', {});\n\n parentNode.removeChild(container);\n};\n\nBaseViewer.prototype._init = function(container, moddle, options) {\n\n const baseModules = options.modules || this.getModules(options),\n additionalModules = options.additionalModules || [],\n staticModules = [\n {\n bpmnjs: [ 'value', this ],\n moddle: [ 'value', moddle ]\n }\n ];\n\n const diagramModules = [].concat(staticModules, baseModules, additionalModules);\n\n const diagramOptions = assign(omit(options, [ 'additionalModules' ]), {\n canvas: assign({}, options.canvas, { container: container }),\n modules: diagramModules\n });\n\n // invoke diagram constructor\n Diagram.call(this, diagramOptions);\n\n if (options && options.container) {\n this.attachTo(options.container);\n }\n};\n\n/**\n * Emit an event on the underlying {@link EventBus}\n *\n * @param {string} type\n * @param {Object} event\n *\n * @return {Object} The return value after calling all event listeners.\n */\nBaseViewer.prototype._emit = function(type, event) {\n return this.get('eventBus').fire(type, event);\n};\n\n/**\n * @param {BaseViewerOptions} options\n *\n * @return {HTMLElement}\n */\nBaseViewer.prototype._createContainer = function(options) {\n\n const container = domify('
');\n\n assignStyle(container, {\n width: ensureUnit(options.width),\n height: ensureUnit(options.height),\n position: options.position\n });\n\n return container;\n};\n\n/**\n * @param {BaseViewerOptions} options\n *\n * @return {Moddle}\n */\nBaseViewer.prototype._createModdle = function(options) {\n const moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);\n\n return new BpmnModdle(moddleOptions);\n};\n\nBaseViewer.prototype._modules = [];\n\n// helpers ///////////////\n\nfunction addWarningsToError(err, warningsAry) {\n err.warnings = warningsAry;\n return err;\n}\n\nfunction checkValidationError(err) {\n\n // check if we can help the user by indicating wrong BPMN 2.0 xml\n // (in case he or the exporting tool did not get that right)\n\n const pattern = /unparsable content <([^>]+)> detected([\\s\\S]*)$/;\n const match = pattern.exec(err.message);\n\n if (match) {\n err.message =\n 'unparsable content <' + match[1] + '> detected; ' +\n 'this may indicate an invalid BPMN 2.0 diagram file' + match[2];\n }\n\n return err;\n}\n\nconst DEFAULT_OPTIONS = {\n width: '100%',\n height: '100%',\n position: 'relative'\n};\n\n\n/**\n * Ensure the passed argument is a proper unit (defaulting to px)\n */\nfunction ensureUnit(val) {\n return val + (isNumber(val) ? 'px' : '');\n}\n\n\n/**\n * Find BPMNDiagram in definitions by ID\n *\n * @param {ModdleElement} definitions\n * @param {string} diagramId\n *\n * @return {ModdleElement|null}\n */\nfunction findBPMNDiagram(definitions, diagramId) {\n if (!diagramId) {\n return null;\n }\n\n return find(definitions.diagrams, function(element) {\n return element.id === diagramId;\n }) || null;\n}\n\n\n/* */\n\nimport {\n open as openPoweredBy,\n BPMNIO_IMG,\n LOGO_STYLES,\n LINK_STYLES\n} from './util/PoweredByUtil';\n\nimport {\n event as domEvent\n} from 'min-dom';\n\n/**\n * Adds the project logo to the diagram container as\n * required by the bpmn.io license.\n *\n * @see http://bpmn.io/license\n *\n * @param {Element} container\n */\nfunction addProjectLogo(container) {\n const img = BPMNIO_IMG;\n\n const linkMarkup =\n '' +\n img +\n '';\n\n const linkElement = domify(linkMarkup);\n\n assignStyle(domQuery('svg', linkElement), LOGO_STYLES);\n assignStyle(linkElement, LINK_STYLES, {\n position: 'absolute',\n bottom: '15px',\n right: '15px',\n zIndex: '100'\n });\n\n container.appendChild(linkElement);\n\n domEvent.bind(linkElement, 'click', function(event) {\n openPoweredBy();\n\n event.preventDefault();\n });\n}\n\n/* */\n" }, { "path": "lib/BaseViewer.spec.ts", "content": "import CommandStack from 'diagram-js/lib/command/CommandStack';\n\nimport EventBus, { Event } from 'diagram-js/lib/core/EventBus';\n\nimport BaseViewer, {\n ImportDoneEvent,\n ImportParseCompleteEvent,\n ImportParseStartEvent,\n SaveXMLDoneEvent,\n SaveXMLStartEvent\n} from './BaseViewer';\n\nimport OverlaysModule from 'diagram-js/lib/features/overlays';\nimport Canvas from 'diagram-js/lib/core/Canvas';\n\nconst viewer = new BaseViewer();\n\nconst configuredViewer = new BaseViewer({\n width: 100,\n height: 100,\n position: 'absolute',\n container: 'container',\n moddleExtensions: {\n foo: {}\n },\n additionalModules: [\n OverlaysModule\n ]\n});\n\ntestViewer(viewer);\n\nconst extendedViewer = new BaseViewer({\n container: 'container',\n alignToOrigin: false,\n propertiesPanel: {\n attachTo: '#properties-panel'\n }\n});\n\nexport function testViewer(viewer: BaseViewer) {\n viewer.importXML('', 'BPMNDiagram_1');\n\n viewer.importXML('')\n .then(({ warnings }) => {\n console.log(warnings);\n })\n .catch(error => {\n const {\n message,\n warnings\n } = error;\n\n console.log(message, warnings);\n });\n\n viewer.importDefinitions({ $type: 'bpmn:Definitions' }, 'BPMNDiagram_1');\n\n viewer.importDefinitions({ $type: 'bpmn:Definitions' })\n .then(({ warnings }) => {\n console.log(warnings);\n })\n .catch(error => {\n const {\n message,\n warnings\n } = error;\n\n console.log(message, warnings);\n });\n\n viewer.open('BPMNDiagram_1');\n\n viewer.open({ $type: 'bpmn:BPMNDiagram' })\n .then(({ warnings }) => {\n console.log(warnings);\n })\n .catch(error => {\n const {\n message,\n warnings\n } = error;\n\n console.log(message, warnings);\n });\n\n viewer.saveXML({ format: true, preamble: false })\n .then(({ xml, error }) => {\n if (error) {\n console.log(error);\n } else {\n console.log(xml);\n }\n })\n .catch(error => {\n console.log(error);\n });\n\n viewer.saveXML();\n\n viewer.saveSVG();\n\n viewer.getModules();\n\n viewer.clear();\n\n viewer.destroy();\n\n viewer.get('commandStack').undo();\n\n viewer.invoke((commandStack: CommandStack) => commandStack.undo());\n\n viewer.on('foo', () => console.log('foo'));\n\n viewer.on([ 'foo', 'bar' ], () => console.log('foo'));\n\n viewer.on('foo', 2000, () => console.log('foo'));\n\n viewer.on('foo', 2000, () => console.log('foo'), { foo: 'bar' });\n\n viewer.off('foo', () => console.log('foo'));\n\n viewer.attachTo(document.createElement('div'));\n\n viewer.getDefinitions();\n\n viewer.detach();\n\n viewer.on('import.parse.start', ({ xml }) => {\n console.log(xml);\n });\n\n viewer.on('import.parse.complete', ({\n error,\n definitions,\n elementsById,\n references,\n warnings\n }) => {\n if (error) {\n console.error(error);\n }\n\n if (warnings.length) {\n warnings.forEach(warning => console.log(warning));\n }\n\n console.log(definitions, elementsById, references);\n });\n\n viewer.on('import.done', ({ error, warnings }) => {\n if (error) {\n console.error(error);\n }\n\n if (warnings.length) {\n warnings.forEach(warning => console.log(warning));\n }\n });\n\n viewer.on('saveXML.start', ({ definitions }) => {\n console.log(definitions);\n });\n\n viewer.on('saveXML.done', ({ error, xml }) => {\n if (error) {\n console.error(error);\n } else {\n console.log(xml);\n }\n });\n\n viewer.on('detach', () => {});\n}\n\n// typed API usage\n\ntype FooEvent = {\n /**\n * Very cool field!\n */\n foo: string;\n};\n\ntype EventMap = {\n\n foo: FooEvent\n};\n\ntype TypeMap = {\n canvas: Canvas,\n eventBus: EventBus\n};\n\nconst typedViewer = new BaseViewer();\n\nconst bus = typedViewer.get('eventBus');\n\nconst canvas = typedViewer.get('canvas');\n\ncanvas.zoom('fit-viewport');\n\ntypedViewer.on('foo', event => {\n console.log(event.foo);\n});\n\ntypedViewer.get('eventBus').on('foo', e => console.log(e.foo));\n" }, { "path": "lib/Modeler.js", "content": "import inherits from 'inherits-browser';\n\nimport BaseModeler from './BaseModeler';\n\nimport Viewer from './Viewer';\nimport NavigatedViewer from './NavigatedViewer';\n\nimport KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';\nimport MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';\nimport ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';\n\nimport AlignElementsModule from './features/align-elements';\nimport AutoPlaceModule from './features/auto-place';\nimport AutoResizeModule from './features/auto-resize';\nimport AutoScrollModule from 'diagram-js/lib/features/auto-scroll';\nimport BendpointsModule from 'diagram-js/lib/features/bendpoints';\nimport ConnectModule from 'diagram-js/lib/features/connect';\nimport ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';\nimport ContextPadModule from './features/context-pad';\nimport CopyPasteModule from './features/copy-paste';\nimport CreateModule from 'diagram-js/lib/features/create';\nimport DistributeElementsModule from './features/distribute-elements';\nimport EditorActionsModule from './features/editor-actions';\nimport GridSnappingModule from './features/grid-snapping';\nimport InteractionEventsModule from './features/interaction-events';\nimport KeyboardModule from './features/keyboard';\nimport KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';\nimport LabelEditingModule from './features/label-editing';\nimport LabelLink from './features/label-link';\nimport ModelingModule from './features/modeling';\nimport ModelingFeedbackModule from './features/modeling-feedback';\nimport MoveModule from 'diagram-js/lib/features/move';\nimport PaletteModule from './features/palette';\nimport ReplacePreviewModule from './features/replace-preview';\nimport ResizeModule from 'diagram-js/lib/features/resize';\nimport SnappingModule from './features/snapping';\nimport SearchModule from './features/search';\nimport OutlineModule from './features/outline';\n\nvar initialDiagram =\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '';\n\n\n/**\n * @typedef {import('./BaseViewer').BaseViewerOptions} BaseViewerOptions\n * @typedef {import('./BaseViewer').ImportXMLResult} ImportXMLResult\n */\n\n/**\n * A modeler for BPMN 2.0 diagrams.\n *\n * ## Extending the Modeler\n *\n * In order to extend the viewer pass extension modules to bootstrap via the\n * `additionalModules` option. An extension module is an object that exposes\n * named services.\n *\n * The following example depicts the integration of a simple\n * logging component that integrates with interaction events:\n *\n *\n * ```javascript\n *\n * // logging component\n * function InteractionLogger(eventBus) {\n * eventBus.on('element.hover', function(event) {\n * console.log()\n * })\n * }\n *\n * InteractionLogger.$inject = [ 'eventBus' ]; // minification save\n *\n * // extension module\n * var extensionModule = {\n * __init__: [ 'interactionLogger' ],\n * interactionLogger: [ 'type', InteractionLogger ]\n * };\n *\n * // extend the viewer\n * var bpmnModeler = new Modeler({ additionalModules: [ extensionModule ] });\n * bpmnModeler.importXML(...);\n * ```\n *\n *\n * ## Customizing / Replacing Components\n *\n * You can replace individual diagram components by redefining them in override modules.\n * This works for all components, including those defined in the core.\n *\n * Pass in override modules via the `options.additionalModules` flag like this:\n *\n * ```javascript\n * function CustomContextPadProvider(contextPad) {\n *\n * contextPad.registerProvider(this);\n *\n * this.getContextPadEntries = function(element) {\n * // no entries, effectively disable the context pad\n * return {};\n * };\n * }\n *\n * CustomContextPadProvider.$inject = [ 'contextPad' ];\n *\n * var overrideModule = {\n * contextPadProvider: [ 'type', CustomContextPadProvider ]\n * };\n *\n * var bpmnModeler = new Modeler({ additionalModules: [ overrideModule ]});\n * ```\n *\n * @template [ServiceMap=null]\n *\n * @extends BaseModeler\n *\n * @param {BaseViewerOptions} [options] The options to configure the modeler.\n */\nexport default function Modeler(options) {\n BaseModeler.call(this, options);\n}\n\ninherits(Modeler, BaseModeler);\n\n\nModeler.Viewer = Viewer;\nModeler.NavigatedViewer = NavigatedViewer;\n\n/**\n * Create a new diagram to start modeling.\n *\n * @throws {ImportXMLError} An error thrown during the import of the XML.\n *\n * @return {Promise} A promise resolving with warnings that were produced during the import.\n */\nModeler.prototype.createDiagram = function createDiagram() {\n return this.importXML(initialDiagram);\n};\n\n\nModeler.prototype._interactionModules = [\n\n // non-modeling components\n KeyboardMoveModule,\n MoveCanvasModule,\n ZoomScrollModule\n];\n\nModeler.prototype._modelingModules = [\n\n // modeling components\n AlignElementsModule,\n AutoPlaceModule,\n AutoScrollModule,\n AutoResizeModule,\n BendpointsModule,\n ConnectModule,\n ConnectionPreviewModule,\n ContextPadModule,\n CopyPasteModule,\n CreateModule,\n DistributeElementsModule,\n EditorActionsModule,\n GridSnappingModule,\n InteractionEventsModule,\n KeyboardModule,\n KeyboardMoveSelectionModule,\n LabelEditingModule,\n LabelLink,\n ModelingModule,\n ModelingFeedbackModule,\n MoveModule,\n PaletteModule,\n ReplacePreviewModule,\n ResizeModule,\n SnappingModule,\n SearchModule,\n OutlineModule\n];\n\n\n// modules the modeler is composed of\n//\n// - viewer modules\n// - interaction modules\n// - modeling modules\n\nModeler.prototype._modules = [].concat(\n Viewer.prototype._modules,\n Modeler.prototype._interactionModules,\n Modeler.prototype._modelingModules\n);\n" }, { "path": "lib/Modeler.spec.ts", "content": "import Canvas from 'diagram-js/lib/core/Canvas';\nimport EventBus from 'diagram-js/lib/core/EventBus';\n\nimport Modeler from './Modeler';\n\nimport { testViewer } from './BaseViewer.spec';\n\nconst modeler = new Modeler({\n container: 'container'\n});\n\ntestViewer(modeler);\n\nmodeler.createDiagram();\n\n\nconst otherModeler = new Modeler({\n container: 'container'\n});\n\nconst extendedModeler = new Modeler({\n container: 'container',\n alignToOrigin: false,\n propertiesPanel: {\n attachTo: '#properties-panel'\n }\n});\n\n\n// typed API usage\n\ntype FooEvent = {\n /**\n * Very cool field!\n */\n foo: string;\n};\n\ntype EventMap = {\n\n foo: FooEvent\n};\n\ntype TypeMap = {\n canvas: Canvas,\n eventBus: EventBus\n};\n\nconst typedViewer = new Modeler();\n\nconst bus = typedViewer.get('eventBus');\n\nconst canvas = typedViewer.get('canvas');\n\ncanvas.zoom('fit-viewport');\n\ntypedViewer.on('foo', event => {\n console.log(event.foo);\n});\n\ntypedViewer.get('eventBus').on('foo', e => console.log(e.foo));" }, { "path": "lib/NavigatedViewer.js", "content": "import inherits from 'inherits-browser';\n\nimport Viewer from './Viewer';\n\nimport KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';\nimport MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';\nimport ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';\n\n/**\n * @typedef { import('./BaseViewer').BaseViewerOptions } BaseViewerOptions\n */\n\n/**\n * A viewer with mouse and keyboard navigation features.\n *\n * @template [ServiceMap=null]\n *\n * @extends Viewer\n *\n * @param {BaseViewerOptions} [options]\n */\nexport default function NavigatedViewer(options) {\n Viewer.call(this, options);\n}\n\ninherits(NavigatedViewer, Viewer);\n\n\nNavigatedViewer.prototype._navigationModules = [\n KeyboardMoveModule,\n MoveCanvasModule,\n ZoomScrollModule\n];\n\nNavigatedViewer.prototype._modules = [].concat(\n Viewer.prototype._modules,\n NavigatedViewer.prototype._navigationModules\n);" }, { "path": "lib/NavigatedViewer.spec.ts", "content": "import Canvas from 'diagram-js/lib/core/Canvas';\nimport EventBus from 'diagram-js/lib/core/EventBus';\n\nimport NavigatedViewer from './NavigatedViewer';\n\nimport { testViewer } from './BaseViewer.spec';\n\nconst viewer = new NavigatedViewer({\n container: 'container'\n});\n\ntestViewer(viewer);\n\nconst extendedViewer = new NavigatedViewer({\n container: 'container',\n alignToOrigin: false,\n propertiesPanel: {\n attachTo: '#properties-panel'\n }\n});\n\n// typed API usage\n\ntype FooEvent = {\n /**\n * Very cool field!\n */\n foo: string;\n};\n\ntype EventMap = {\n\n foo: FooEvent\n};\n\ntype TypeMap = {\n canvas: Canvas,\n eventBus: EventBus\n};\n\nconst typedViewer = new NavigatedViewer();\n\nconst bus = typedViewer.get('eventBus');\n\nconst canvas = typedViewer.get('canvas');\n\ncanvas.zoom('fit-viewport');\n\ntypedViewer.on('foo', event => {\n console.log(event.foo);\n});\n\ntypedViewer.get('eventBus').on('foo', e => console.log(e.foo));" }, { "path": "lib/Viewer.js", "content": "import inherits from 'inherits-browser';\n\nimport CoreModule from './core';\nimport DrilldownModdule from './features/drilldown';\nimport OverlaysModule from 'diagram-js/lib/features/overlays';\nimport SelectionModule from 'diagram-js/lib/features/selection';\nimport TranslateModule from 'diagram-js/lib/i18n/translate';\n\nimport BaseViewer from './BaseViewer';\n\n\n/**\n * @typedef { import('./BaseViewer').BaseViewerOptions } BaseViewerOptions\n */\n\n/**\n * A viewer for BPMN 2.0 diagrams.\n *\n * Have a look at {@link bpmn-js/lib/NavigatedViewer} or {@link bpmn-js/lib/Modeler} for bundles that include\n * additional features.\n *\n *\n * ## Extending the Viewer\n *\n * In order to extend the viewer pass extension modules to bootstrap via the\n * `additionalModules` option. An extension module is an object that exposes\n * named services.\n *\n * The following example depicts the integration of a simple\n * logging component that integrates with interaction events:\n *\n *\n * ```javascript\n *\n * // logging component\n * function InteractionLogger(eventBus) {\n * eventBus.on('element.hover', function(event) {\n * console.log()\n * })\n * }\n *\n * InteractionLogger.$inject = [ 'eventBus' ]; // minification save\n *\n * // extension module\n * var extensionModule = {\n * __init__: [ 'interactionLogger' ],\n * interactionLogger: [ 'type', InteractionLogger ]\n * };\n *\n * // extend the viewer\n * var bpmnViewer = new Viewer({ additionalModules: [ extensionModule ] });\n * bpmnViewer.importXML(...);\n * ```\n *\n * @template [ServiceMap=null]\n *\n * @extends BaseViewer\n *\n * @param {BaseViewerOptions} [options] The options to configure the viewer.\n */\nexport default function Viewer(options) {\n BaseViewer.call(this, options);\n}\n\ninherits(Viewer, BaseViewer);\n\n// modules the viewer is composed of\nViewer.prototype._modules = [\n CoreModule,\n DrilldownModdule,\n OverlaysModule,\n SelectionModule,\n TranslateModule\n];\n\n// default moddle extensions the viewer is composed of\nViewer.prototype._moddleExtensions = {};" }, { "path": "lib/Viewer.spec.ts", "content": "import Canvas from 'diagram-js/lib/core/Canvas';\nimport EventBus from 'diagram-js/lib/core/EventBus';\n\nimport Viewer from './Viewer';\n\nimport { testViewer } from './BaseViewer.spec';\n\nconst viewer = new Viewer({\n container: 'container'\n});\n\ntestViewer(viewer);\n\nconst extendedViewer = new Viewer({\n container: 'container',\n alignToOrigin: false,\n propertiesPanel: {\n attachTo: '#properties-panel'\n }\n});\n\n\n// typed API usage\n\ntype FooEvent = {\n /**\n * Very cool field!\n */\n foo: string;\n};\n\ntype EventMap = {\n\n foo: FooEvent\n};\n\ntype TypeMap = {\n canvas: Canvas,\n eventBus: EventBus\n};\n\nconst typedViewer = new Viewer();\n\nconst bus = typedViewer.get('eventBus');\n\nconst canvas = typedViewer.get('canvas');\n\ncanvas.zoom('fit-viewport');\n\ntypedViewer.on('foo', event => {\n console.log(event.foo);\n});\n\ntypedViewer.get('eventBus').on('foo', e => console.log(e.foo));" }, { "path": "lib/core/index.js", "content": "import DrawModule from '../draw';\nimport ImportModule from '../import';\n\nexport default {\n __depends__: [\n DrawModule,\n ImportModule\n ]\n};" }, { "path": "lib/draw/BpmnRenderUtil.js", "content": "import {\n has,\n some\n} from 'min-dash';\n\nimport {\n getDi\n} from '../util/ModelUtil';\n\nimport {\n componentsToPath\n} from 'diagram-js/lib/util/RenderUtil';\n\n\n/**\n * @typedef {import('../model').ModdleElement} ModdleElement\n * @typedef {import('../model').Element} Element\n *\n * @typedef {import('../model').ShapeLike} ShapeLike\n *\n * @typedef {import('diagram-js/lib/util/Types').Dimensions} Dimensions\n * @typedef {import('diagram-js/lib/util/Types').Rect} Rect\n */\n\n// re-export for compatibility\nexport {\n getDi,\n getBusinessObject as getSemantic\n} from '../util/ModelUtil';\n\n\nexport var black = 'hsl(225, 10%, 15%)';\nexport var white = 'white';\n\n// element utils //////////////////////\n\n/**\n * Checks if eventDefinition of the given element matches with semantic type.\n *\n * @param {ModdleElement} event\n * @param {string} eventDefinitionType\n *\n * @return {boolean}\n */\nexport function isTypedEvent(event, eventDefinitionType) {\n return some(event.eventDefinitions, function(definition) {\n return definition.$type === eventDefinitionType;\n });\n}\n\n/**\n * Check if element is a throw event.\n *\n * @param {ModdleElement} event\n *\n * @return {boolean}\n */\nexport function isThrowEvent(event) {\n return (event.$type === 'bpmn:IntermediateThrowEvent') || (event.$type === 'bpmn:EndEvent');\n}\n\n/**\n * Check if element is a throw event.\n *\n * @param {ModdleElement} element\n *\n * @return {boolean}\n */\nexport function isCollection(element) {\n var dataObject = element.dataObjectRef;\n\n return element.isCollection || (dataObject && dataObject.isCollection);\n}\n\n\n// color access //////////////////////\n\n/**\n * @param {Element} element\n * @param {string} [defaultColor]\n * @param {string} [overrideColor]\n *\n * @return {string}\n */\nexport function getFillColor(element, defaultColor, overrideColor) {\n var di = getDi(element);\n\n return overrideColor || di.get('color:background-color') || di.get('bioc:fill') || defaultColor || white;\n}\n\n/**\n * @param {Element} element\n * @param {string} [defaultColor]\n * @param {string} [overrideColor]\n *\n * @return {string}\n */\nexport function getStrokeColor(element, defaultColor, overrideColor) {\n var di = getDi(element);\n\n return overrideColor || di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;\n}\n\n/**\n * @param {Element} element\n * @param {string} [defaultColor]\n * @param {string} [defaultStrokeColor]\n * @param {string} [overrideColor]\n *\n * @return {string}\n */\nexport function getLabelColor(element, defaultColor, defaultStrokeColor, overrideColor) {\n var di = getDi(element),\n label = di.get('label');\n\n return overrideColor || (label && label.get('color:color')) || defaultColor ||\n getStrokeColor(element, defaultStrokeColor);\n}\n\n// cropping path customizations //////////////////////\n\n/**\n * @param {ShapeLike} shape\n *\n * @return {string} path\n */\nexport function getCirclePath(shape) {\n\n var cx = shape.x + shape.width / 2,\n cy = shape.y + shape.height / 2,\n radius = shape.width / 2;\n\n var circlePath = [\n [ 'M', cx, cy ],\n [ 'm', 0, -radius ],\n [ 'a', radius, radius, 0, 1, 1, 0, 2 * radius ],\n [ 'a', radius, radius, 0, 1, 1, 0, -2 * radius ],\n [ 'z' ]\n ];\n\n return componentsToPath(circlePath);\n}\n\n/**\n * @param {ShapeLike} shape\n * @param {number} [borderRadius]\n *\n * @return {string} path\n */\nexport function getRoundRectPath(shape, borderRadius) {\n\n var x = shape.x,\n y = shape.y,\n width = shape.width,\n height = shape.height;\n\n var roundRectPath = [\n [ 'M', x + borderRadius, y ],\n [ 'l', width - borderRadius * 2, 0 ],\n [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius ],\n [ 'l', 0, height - borderRadius * 2 ],\n [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius ],\n [ 'l', borderRadius * 2 - width, 0 ],\n [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius ],\n [ 'l', 0, borderRadius * 2 - height ],\n [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius ],\n [ 'z' ]\n ];\n\n return componentsToPath(roundRectPath);\n}\n\n/**\n * @param {ShapeLike} shape\n *\n * @return {string} path\n */\nexport function getDiamondPath(shape) {\n\n var width = shape.width,\n height = shape.height,\n x = shape.x,\n y = shape.y,\n halfWidth = width / 2,\n halfHeight = height / 2;\n\n var diamondPath = [\n [ 'M', x + halfWidth, y ],\n [ 'l', halfWidth, halfHeight ],\n [ 'l', -halfWidth, halfHeight ],\n [ 'l', -halfWidth, -halfHeight ],\n [ 'z' ]\n ];\n\n return componentsToPath(diamondPath);\n}\n\n/**\n * @param {ShapeLike} shape\n *\n * @return {string} path\n */\nexport function getRectPath(shape) {\n var x = shape.x,\n y = shape.y,\n width = shape.width,\n height = shape.height;\n\n var rectPath = [\n [ 'M', x, y ],\n [ 'l', width, 0 ],\n [ 'l', 0, height ],\n [ 'l', -width, 0 ],\n [ 'z' ]\n ];\n\n return componentsToPath(rectPath);\n}\n\n/**\n * Get width and height from element or overrides.\n *\n * @param {Dimensions|Rect|ShapeLike} bounds\n * @param {Object} overrides\n *\n * @returns {Dimensions}\n */\nexport function getBounds(bounds, overrides = {}) {\n return {\n width: getWidth(bounds, overrides),\n height: getHeight(bounds, overrides)\n };\n}\n\n/**\n * Get width from element or overrides.\n *\n * @param {Dimensions|Rect|ShapeLike} bounds\n * @param {Object} overrides\n *\n * @returns {number}\n */\nexport function getWidth(bounds, overrides = {}) {\n return has(overrides, 'width') ? overrides.width : bounds.width;\n}\n\n/**\n * Get height from element or overrides.\n *\n * @param {Dimensions|Rect|ShapeLike} bounds\n * @param {Object} overrides\n *\n * @returns {number}\n */\nexport function getHeight(bounds, overrides = {}) {\n return has(overrides, 'height') ? overrides.height : bounds.height;\n}" }, { "path": "lib/draw/BpmnRenderer.js", "content": "import inherits from 'inherits-browser';\n\nimport {\n assign,\n forEach,\n isObject\n} from 'min-dash';\n\nimport BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';\n\nimport {\n isExpanded,\n isHorizontal,\n isEventSubProcess\n} from '../util/DiUtil';\n\nimport {\n getLabel,\n isLabel\n} from '../util/LabelUtil';\n\nimport {\n is\n} from '../util/ModelUtil';\n\nimport {\n createLine\n} from 'diagram-js/lib/util/RenderUtil';\n\nimport {\n isTypedEvent,\n isThrowEvent,\n isCollection,\n getBounds,\n getDi,\n getSemantic,\n getCirclePath,\n getRoundRectPath,\n getDiamondPath,\n getRectPath,\n getFillColor,\n getStrokeColor,\n getLabelColor,\n getHeight,\n getWidth\n} from './BpmnRenderUtil';\n\nimport {\n query as domQuery\n} from 'min-dom';\n\nimport {\n append as svgAppend,\n attr as svgAttr,\n create as svgCreate,\n classes as svgClasses\n} from 'tiny-svg';\n\nimport {\n rotate,\n transform,\n translate\n} from 'diagram-js/lib/util/SvgTransformUtil';\n\nimport { Ids } from 'ids';\n\nimport { black } from './BpmnRenderUtil';\n\nvar markerIds = new Ids();\n\nvar ELEMENT_LABEL_DISTANCE = 10,\n INNER_OUTER_DIST = 3,\n PARTICIPANT_STROKE_WIDTH = 1.5,\n TASK_BORDER_RADIUS = 10,\n EXTERNAL_LABEL_BORDER_RADIUS = 4;\n\nvar DEFAULT_OPACITY = 0.95,\n FULL_OPACITY = 1,\n LOW_OPACITY = 0.25;\n\n/**\n * @typedef { Partial<{\n * defaultFillColor: string,\n * defaultStrokeColor: string,\n * defaultLabelColor: string\n * }> } BpmnRendererConfig\n *\n * @typedef { Partial<{\n * fill: string,\n * stroke: string,\n * width: string,\n * height: string\n * }> } Attrs\n */\n\n/**\n * @typedef { import('../model/Types').Element } Element\n * @typedef { import('../model/Types').Shape } Shape\n * @typedef { import('../model/Types').Connection } Connection\n */\n\n/**\n * A renderer for BPMN elements\n *\n * @param {BpmnRendererConfig} config\n * @param {import('diagram-js/lib/core/EventBus').default} eventBus\n * @param {import('diagram-js/lib/draw/Styles').default} styles\n * @param {import('./PathMap').default} pathMap\n * @param {import('diagram-js/lib/core/Canvas').default} canvas\n * @param {import('./TextRenderer').default} textRenderer\n * @param {number} [priority]\n */\nexport default function BpmnRenderer(\n config, eventBus, styles, pathMap,\n canvas, textRenderer, priority) {\n\n BaseRenderer.call(this, eventBus, priority);\n\n var defaultFillColor = config && config.defaultFillColor,\n defaultStrokeColor = config && config.defaultStrokeColor,\n defaultLabelColor = config && config.defaultLabelColor;\n\n function shapeStyle(attrs) {\n return styles.computeStyle(attrs, {\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n stroke: black,\n strokeWidth: 2,\n fill: 'white'\n });\n }\n\n function lineStyle(attrs) {\n return styles.computeStyle(attrs, [ 'no-fill' ], {\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n stroke: black,\n strokeWidth: 2\n });\n }\n\n function addMarker(id, options) {\n var {\n ref = { x: 0, y: 0 },\n scale = 1,\n element,\n parentGfx = canvas._svg\n } = options;\n\n var marker = svgCreate('marker', {\n id: id,\n viewBox: '0 0 20 20',\n refX: ref.x,\n refY: ref.y,\n markerWidth: 20 * scale,\n markerHeight: 20 * scale,\n orient: 'auto'\n });\n\n svgAppend(marker, element);\n\n var defs = domQuery(':scope > defs', parentGfx);\n\n if (!defs) {\n defs = svgCreate('defs');\n\n svgAppend(parentGfx, defs);\n }\n\n svgAppend(defs, marker);\n }\n\n function marker(parentGfx, type, fill, stroke) {\n\n\n var id = markerIds.nextPrefixed('marker-');\n\n createMarker(parentGfx, id, type, fill, stroke);\n\n return 'url(#' + id + ')';\n }\n\n function createMarker(parentGfx, id, type, fill, stroke) {\n\n if (type === 'sequenceflow-end') {\n var sequenceflowEnd = svgCreate('path', {\n d: 'M 1 5 L 11 10 L 1 15 Z',\n ...shapeStyle({\n fill: stroke,\n stroke: stroke,\n strokeWidth: 1\n })\n });\n\n addMarker(id, {\n element: sequenceflowEnd,\n ref: { x: 11, y: 10 },\n scale: 0.5,\n parentGfx\n });\n }\n\n if (type === 'messageflow-start') {\n var messageflowStart = svgCreate('circle', {\n cx: 6,\n cy: 6,\n r: 3.5,\n ...shapeStyle({\n fill,\n stroke: stroke,\n strokeWidth: 1,\n\n // fix for safari / chrome / firefox bug not correctly\n // resetting stroke dash array\n strokeDasharray: [ 10000, 1 ]\n })\n });\n\n addMarker(id, {\n element: messageflowStart,\n ref: { x: 6, y: 6 },\n parentGfx\n });\n }\n\n if (type === 'messageflow-end') {\n var messageflowEnd = svgCreate('path', {\n d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',\n ...shapeStyle({\n fill,\n stroke: stroke,\n strokeWidth: 1,\n\n // fix for safari / chrome / firefox bug not correctly\n // resetting stroke dash array\n strokeDasharray: [ 10000, 1 ]\n })\n });\n\n addMarker(id, {\n element: messageflowEnd,\n ref: { x: 8.5, y: 5 },\n parentGfx\n });\n }\n\n if (type === 'association-start') {\n var associationStart = svgCreate('path', {\n d: 'M 11 5 L 1 10 L 11 15',\n ...lineStyle({\n fill: 'none',\n stroke,\n strokeWidth: 1.5,\n\n // fix for safari / chrome / firefox bug not correctly\n // resetting stroke dash array\n strokeDasharray: [ 10000, 1 ]\n })\n });\n\n addMarker(id, {\n element: associationStart,\n ref: { x: 1, y: 10 },\n scale: 0.5,\n parentGfx\n });\n }\n\n if (type === 'association-end') {\n var associationEnd = svgCreate('path', {\n d: 'M 1 5 L 11 10 L 1 15',\n ...lineStyle({\n fill: 'none',\n stroke,\n strokeWidth: 1.5,\n\n // fix for safari / chrome / firefox bug not correctly\n // resetting stroke dash array\n strokeDasharray: [ 10000, 1 ]\n })\n });\n\n addMarker(id, {\n element: associationEnd,\n ref: { x: 11, y: 10 },\n scale: 0.5,\n parentGfx\n });\n }\n\n if (type === 'conditional-flow-marker') {\n var conditionalFlowMarker = svgCreate('path', {\n d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',\n ...shapeStyle({\n fill,\n stroke: stroke\n })\n });\n\n addMarker(id, {\n element: conditionalFlowMarker,\n ref: { x: -1, y: 10 },\n scale: 0.5,\n parentGfx\n });\n }\n\n if (type === 'conditional-default-flow-marker') {\n var defaultFlowMarker = svgCreate('path', {\n d: 'M 6 4 L 10 16',\n ...shapeStyle({\n stroke: stroke,\n fill: 'none'\n })\n });\n\n addMarker(id, {\n element: defaultFlowMarker,\n ref: { x: 0, y: 10 },\n scale: 0.5,\n parentGfx\n });\n }\n }\n\n function drawCircle(parentGfx, width, height, offset, attrs = {}) {\n\n if (isObject(offset)) {\n attrs = offset;\n offset = 0;\n }\n\n offset = offset || 0;\n\n attrs = shapeStyle(attrs);\n\n var cx = width / 2,\n cy = height / 2;\n\n var circle = svgCreate('circle', {\n cx: cx,\n cy: cy,\n r: Math.round((width + height) / 4 - offset),\n ...attrs\n });\n\n svgAppend(parentGfx, circle);\n\n return circle;\n }\n\n function drawRect(parentGfx, width, height, r, offset, attrs) {\n\n if (isObject(offset)) {\n attrs = offset;\n offset = 0;\n }\n\n offset = offset || 0;\n\n attrs = shapeStyle(attrs);\n\n var rect = svgCreate('rect', {\n x: offset,\n y: offset,\n width: width - offset * 2,\n height: height - offset * 2,\n rx: r,\n ry: r,\n ...attrs\n });\n\n svgAppend(parentGfx, rect);\n\n return rect;\n }\n\n function drawDiamond(parentGfx, width, height, attrs) {\n\n var x_2 = width / 2;\n var y_2 = height / 2;\n\n var points = [\n { x: x_2, y: 0 },\n { x: width, y: y_2 },\n { x: x_2, y: height },\n { x: 0, y: y_2 }\n ];\n\n var pointsString = points.map(function(point) {\n return point.x + ',' + point.y;\n }).join(' ');\n\n attrs = shapeStyle(attrs);\n\n var polygon = svgCreate('polygon', {\n ...attrs,\n points: pointsString\n });\n\n svgAppend(parentGfx, polygon);\n\n return polygon;\n }\n\n /**\n * @param {SVGElement} parentGfx\n * @param {Point[]} waypoints\n * @param {any} attrs\n * @param {number} [radius]\n *\n * @return {SVGElement}\n */\n function drawLine(parentGfx, waypoints, attrs, radius) {\n attrs = lineStyle(attrs);\n\n var line = createLine(waypoints, attrs, radius);\n\n svgAppend(parentGfx, line);\n\n return line;\n }\n\n /**\n * @param {SVGElement} parentGfx\n * @param {Point[]} waypoints\n * @param {any} attrs\n *\n * @return {SVGElement}\n */\n function drawConnectionSegments(parentGfx, waypoints, attrs) {\n return drawLine(parentGfx, waypoints, attrs, 5);\n }\n\n function drawPath(parentGfx, d, attrs) {\n attrs = lineStyle(attrs);\n\n var path = svgCreate('path', {\n ...attrs,\n d\n });\n\n svgAppend(parentGfx, path);\n\n return path;\n }\n\n function drawMarker(type, parentGfx, path, attrs) {\n return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));\n }\n\n function renderer(type) {\n return handlers[type];\n }\n\n function as(type) {\n return function(parentGfx, element, attrs) {\n return renderer(type)(parentGfx, element, attrs);\n };\n }\n\n var eventIconRenderers = {\n 'bpmn:MessageEventDefinition': function(parentGfx, element, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {\n xScaleFactor: 0.9,\n yScaleFactor: 0.9,\n containerWidth: attrs.width || element.width,\n containerHeight: attrs.height || element.height,\n position: {\n mx: 0.235,\n my: 0.315\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n : getFillColor(element, defaultFillColor, attrs.fill);\n\n var stroke = isThrowing\n ? getFillColor(element, defaultFillColor, attrs.fill)\n : getStrokeColor(element, defaultStrokeColor, attrs.stroke);\n\n var messagePath = drawPath(parentGfx, pathData, {\n fill,\n stroke,\n strokeWidth: 1\n });\n\n return messagePath;\n },\n 'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {\n var baseWidth = attrs.width || element.width;\n var baseHeight = attrs.height || element.height;\n\n // use a lighter stroke for event suprocess icons\n var strokeWidth = attrs.width ? 1 : 2;\n\n var circle = drawCircle(parentGfx, baseWidth, baseHeight, 0.2 * baseHeight, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: strokeWidth\n });\n\n var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {\n xScaleFactor: 0.75,\n yScaleFactor: 0.75,\n containerWidth: baseWidth,\n containerHeight: baseHeight,\n position: {\n mx: 0.5,\n my: 0.5\n }\n });\n\n drawPath(parentGfx, pathData, {\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: strokeWidth\n });\n\n for (var i = 0; i < 12; i++) {\n var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {\n xScaleFactor: 0.75,\n yScaleFactor: 0.75,\n containerWidth: baseWidth,\n containerHeight: baseHeight,\n position: {\n mx: 0.5,\n my: 0.5\n }\n });\n\n var width = baseWidth / 2,\n height = baseHeight / 2;\n\n drawPath(parentGfx, linePathData, {\n strokeWidth: 1,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'\n });\n }\n\n return circle;\n },\n 'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.5,\n my: 0.2\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs = {}) {\n var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.5,\n my: 0.222\n }\n });\n\n return drawPath(parentGfx, pathData, {\n fill: getFillColor(event, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:LinkEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_LINK', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: event.width,\n containerHeight: event.height,\n position: {\n mx: 0.57,\n my: 0.263\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_ERROR', {\n xScaleFactor: 1.1,\n yScaleFactor: 1.1,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.2,\n my: 0.722\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:CancelEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {\n xScaleFactor: 1.0,\n yScaleFactor: 1.0,\n containerWidth: event.width,\n containerHeight: event.height,\n position: {\n mx: 0.638,\n my: -0.055\n }\n });\n\n var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor, attrs.stroke) : 'none';\n\n var path = drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n rotate(path, 45);\n\n return path;\n },\n 'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.22,\n my: 0.5\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:SignalEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {\n xScaleFactor: 0.9,\n yScaleFactor: 0.9,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.5,\n my: 0.2\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n strokeWidth: 1,\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n });\n },\n 'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {\n var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {\n xScaleFactor: 1.1,\n yScaleFactor: 1.1,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.211,\n my: 0.36\n }\n });\n\n var fill = isThrowing\n ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)\n : getFillColor(event, defaultFillColor, attrs.fill);\n\n return drawPath(parentGfx, pathData, {\n fill,\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs = {}) {\n var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {\n xScaleFactor: 1.2,\n yScaleFactor: 1.2,\n containerWidth: attrs.width || event.width,\n containerHeight: attrs.height || event.height,\n position: {\n mx: 0.458,\n my: 0.194\n }\n });\n\n return drawPath(parentGfx, pathData, {\n fill: getFillColor(event, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n },\n 'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs = {}) {\n var circle = drawCircle(parentGfx, element.width, element.height, 8, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 4\n });\n\n return circle;\n }\n };\n\n function renderEventIcon(element, parentGfx, attrs = {}, proxyElement) {\n var semantic = getSemantic(element),\n isThrowing = isThrowEvent(semantic);\n\n var nodeElement = proxyElement || element;\n\n if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {\n if (semantic.get('parallelMultiple')) {\n return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n else {\n return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n }\n\n if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {\n return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {\n return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {\n return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {\n return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {\n return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {\n return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {\n return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {\n return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {\n return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {\n return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, nodeElement, attrs, isThrowing);\n }\n\n return null;\n }\n\n var taskMarkerRenderers = {\n 'ParticipantMultiplicityMarker': function(parentGfx, element, attrs = {}) {\n var width = getWidth(element, attrs),\n height = getHeight(element, attrs);\n\n var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: width,\n containerHeight: height,\n position: {\n mx: ((width / 2 - 6) / width),\n my: (height - 15) / height\n }\n });\n\n drawMarker('participant-multiplicity', parentGfx, markerPath, {\n strokeWidth: 2,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n },\n 'SubProcessMarker': function(parentGfx, element, attrs = {}) {\n var markerRect = drawRect(parentGfx, 14, 14, 0, {\n strokeWidth: 1,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n\n translate(markerRect, element.width / 2 - 7.5, element.height - 20);\n\n var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {\n xScaleFactor: 1.5,\n yScaleFactor: 1.5,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: (element.width / 2 - 7.5) / element.width,\n my: (element.height - 20) / element.height\n }\n });\n\n drawMarker('sub-process', parentGfx, markerPath, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n },\n 'ParallelMarker': function(parentGfx, element, attrs) {\n var width = getWidth(element, attrs),\n height = getHeight(element, attrs);\n\n var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: width,\n containerHeight: height,\n position: {\n mx: ((width / 2 + attrs.parallel) / width),\n my: (height - 20) / height\n }\n });\n\n drawMarker('parallel', parentGfx, markerPath, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n },\n 'SequentialMarker': function(parentGfx, element, attrs) {\n var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: ((element.width / 2 + attrs.seq) / element.width),\n my: (element.height - 19) / element.height\n }\n });\n\n drawMarker('sequential', parentGfx, markerPath, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n },\n 'CompensationMarker': function(parentGfx, element, attrs) {\n var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: ((element.width / 2 + attrs.compensation) / element.width),\n my: (element.height - 13) / element.height\n }\n });\n\n drawMarker('compensation', parentGfx, markerMath, {\n strokeWidth: 1,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n },\n 'LoopMarker': function(parentGfx, element, attrs) {\n var width = getWidth(element, attrs),\n height = getHeight(element, attrs);\n\n var markerPath = pathMap.getScaledPath('MARKER_LOOP', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: width,\n containerHeight: height,\n position: {\n mx: ((width / 2 + attrs.loop) / width),\n my: (height - 7) / height\n }\n });\n\n drawMarker('loop', parentGfx, markerPath, {\n strokeWidth: 1.5,\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeMiterlimit: 0.5\n });\n },\n 'AdhocMarker': function(parentGfx, element, attrs) {\n var width = getWidth(element, attrs),\n height = getHeight(element, attrs);\n\n var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: width,\n containerHeight: height,\n position: {\n mx: ((width / 2 + attrs.adhoc) / width),\n my: (height - 15) / height\n }\n });\n\n drawMarker('adhoc', parentGfx, markerPath, {\n strokeWidth: 1,\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n }\n };\n\n function renderTaskMarker(type, parentGfx, element, attrs) {\n taskMarkerRenderers[ type ](parentGfx, element, attrs);\n }\n\n function renderTaskMarkers(parentGfx, element, taskMarkers = [], attrs = {}) {\n attrs = {\n fill: attrs.fill,\n stroke: attrs.stroke,\n width: getWidth(element, attrs),\n height: getHeight(element, attrs)\n };\n\n var semantic = getSemantic(element);\n\n var subprocess = taskMarkers.includes('SubProcessMarker');\n\n if (subprocess) {\n attrs = {\n ...attrs,\n seq: -21,\n parallel: -22,\n compensation: -25,\n loop: -18,\n adhoc: 10\n };\n } else {\n attrs = {\n ...attrs,\n seq: -5,\n parallel: -6,\n compensation: -7,\n loop: 0,\n adhoc: -8\n };\n }\n\n if (semantic.get('isForCompensation')) {\n taskMarkers.push('CompensationMarker');\n }\n\n if (is(semantic, 'bpmn:AdHocSubProcess')) {\n taskMarkers.push('AdhocMarker');\n\n if (!subprocess) {\n assign(attrs, { compensation: attrs.compensation - 18 });\n }\n }\n\n var loopCharacteristics = semantic.get('loopCharacteristics'),\n isSequential = loopCharacteristics && loopCharacteristics.get('isSequential');\n\n if (loopCharacteristics) {\n\n assign(attrs, {\n compensation: attrs.compensation - 18,\n });\n\n if (taskMarkers.includes('AdhocMarker')) {\n assign(attrs, {\n seq: -23,\n loop: -18,\n parallel: -24\n });\n }\n\n if (isSequential === undefined) {\n taskMarkers.push('LoopMarker');\n }\n\n if (isSequential === false) {\n taskMarkers.push('ParallelMarker');\n }\n\n if (isSequential === true) {\n taskMarkers.push('SequentialMarker');\n }\n }\n\n if (taskMarkers.includes('CompensationMarker') && taskMarkers.length === 1) {\n assign(attrs, {\n compensation: -8\n });\n }\n\n forEach(taskMarkers, function(marker) {\n renderTaskMarker(marker, parentGfx, element, attrs);\n });\n }\n\n function renderLabel(parentGfx, label, attrs = {}) {\n attrs = assign({\n size: {\n width: 100\n }\n }, attrs);\n\n var text = textRenderer.createText(label || '', attrs);\n\n svgClasses(text).add('djs-label');\n\n svgAppend(parentGfx, text);\n\n return text;\n }\n\n function renderEmbeddedLabel(parentGfx, element, align, attrs = {}) {\n var semantic = getSemantic(element);\n\n var box = getBounds({\n x: element.x,\n y: element.y,\n width: element.width,\n height: element.height\n }, attrs);\n\n return renderLabel(parentGfx, semantic.name, {\n align,\n box,\n padding: 7,\n style: {\n fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)\n }\n });\n }\n\n function renderExternalLabel(parentGfx, element, attrs = {}) {\n var box = {\n width: 90,\n height: 30,\n x: element.width / 2 + element.x,\n y: element.height / 2 + element.y\n };\n\n return renderLabel(parentGfx, getLabel(element), {\n box: box,\n fitBox: true,\n style: assign(\n {},\n textRenderer.getExternalStyle(),\n {\n fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)\n }\n )\n });\n }\n\n function renderLaneLabel(parentGfx, text, element, attrs = {}) {\n var isHorizontalLane = isHorizontal(element);\n\n var textBox = renderLabel(parentGfx, text, {\n box: {\n height: 30,\n width: isHorizontalLane ? getHeight(element, attrs) : getWidth(element, attrs),\n },\n align: 'center-middle',\n style: {\n fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)\n }\n });\n\n if (isHorizontalLane) {\n var top = -1 * getHeight(element, attrs);\n transform(textBox, 0, -top, 270);\n }\n }\n\n function renderActivity(parentGfx, element, attrs = {}) {\n var {\n width,\n height\n } = getBounds(element, attrs);\n\n return drawRect(parentGfx, width, height, TASK_BORDER_RADIUS, {\n ...attrs,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n fillOpacity: DEFAULT_OPACITY,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n }\n\n function renderAssociation(parentGfx, element, attrs = {}) {\n var semantic = getSemantic(element);\n\n var fill = getFillColor(element, defaultFillColor, attrs.fill),\n stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);\n\n if (semantic.get('associationDirection') === 'One' ||\n semantic.get('associationDirection') === 'Both') {\n attrs.markerEnd = marker(parentGfx, 'association-end', fill, stroke);\n }\n\n if (semantic.get('associationDirection') === 'Both') {\n attrs.markerStart = marker(parentGfx, 'association-start', fill, stroke);\n }\n\n attrs = pickAttrs(attrs, [\n 'markerStart',\n 'markerEnd'\n ]);\n\n return drawConnectionSegments(parentGfx, element.waypoints, {\n ...attrs,\n stroke,\n strokeDasharray: '0, 5'\n });\n }\n\n function renderDataObject(parentGfx, element, attrs = {}) {\n var fill = getFillColor(element, defaultFillColor, attrs.fill),\n stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);\n\n var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.474,\n my: 0.296\n }\n });\n\n var dataObject = drawPath(parentGfx, pathData, {\n fill,\n fillOpacity: DEFAULT_OPACITY,\n stroke\n });\n\n var semantic = getSemantic(element);\n\n if (isCollection(semantic)) {\n var collectionPathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.33,\n my: (element.height - 18) / element.height\n }\n });\n\n drawPath(parentGfx, collectionPathData, {\n strokeWidth: 2,\n fill,\n stroke\n });\n }\n\n return dataObject;\n }\n\n function renderEvent(parentGfx, element, attrs = {}) {\n return drawCircle(parentGfx, element.width, element.height, {\n fillOpacity: DEFAULT_OPACITY,\n ...attrs,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n }\n\n function renderGateway(parentGfx, element, attrs = {}) {\n return drawDiamond(parentGfx, element.width, element.height, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n fillOpacity: DEFAULT_OPACITY,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n }\n\n function renderLane(parentGfx, element, attrs = {}) {\n var lane = drawRect(parentGfx, getWidth(element, attrs), getHeight(element, attrs), 0, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n fillOpacity: attrs.fillOpacity || DEFAULT_OPACITY,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1.5\n });\n\n var semantic = getSemantic(element);\n\n if (is(semantic, 'bpmn:Lane')) {\n var text = semantic.get('name');\n\n renderLaneLabel(parentGfx, text, element, attrs);\n }\n\n return lane;\n }\n\n function renderSubProcess(parentGfx, element, attrs = {}) {\n var activity = renderActivity(parentGfx, element, attrs);\n\n var expanded = isExpanded(element);\n\n if (isEventSubProcess(element)) {\n svgAttr(activity, {\n strokeDasharray: '0, 5.5',\n strokeWidth: 2.5\n });\n\n if (!expanded) {\n var flowElements = getSemantic(element).flowElements || [];\n var startEvents = flowElements.filter(e => is(e, 'bpmn:StartEvent'));\n\n if (startEvents.length === 1) {\n renderEventSubProcessIcon(startEvents[0], parentGfx, attrs, element);\n }\n }\n }\n\n renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);\n\n if (expanded) {\n renderTaskMarkers(parentGfx, element, undefined, attrs);\n } else {\n renderTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ], attrs);\n }\n\n return activity;\n }\n\n function renderEventSubProcessIcon(startEvent, parentGfx, attrs, proxyElement) {\n var iconSize = 22;\n\n // match the colors of the enclosing subprocess\n var proxyAttrs = {\n fill: getFillColor(proxyElement, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(proxyElement, defaultStrokeColor, attrs.stroke),\n width: iconSize,\n height: iconSize\n };\n\n var interrupting = getSemantic(startEvent).isInterrupting;\n var strokeDasharray = interrupting ? 0 : 3;\n\n // better visibility for non-interrupting events\n var strokeWidth = interrupting ? 1 : 1.2;\n\n // make the icon look larger by drawing a smaller circle\n var circleSize = 20;\n var shift = (iconSize - circleSize) / 2;\n var transform = 'translate(' + shift + ',' + shift + ')';\n\n drawCircle(parentGfx, circleSize, circleSize, {\n fill: proxyAttrs.fill,\n stroke: proxyAttrs.stroke,\n strokeWidth,\n strokeDasharray,\n transform\n });\n\n renderEventIcon(startEvent, parentGfx, proxyAttrs, proxyElement);\n }\n\n function renderTask(parentGfx, element, attrs = {}) {\n var activity = renderActivity(parentGfx, element, attrs);\n\n renderEmbeddedLabel(parentGfx, element, 'center-middle', attrs);\n\n renderTaskMarkers(parentGfx, element, undefined, attrs);\n\n return activity;\n }\n\n var handlers = this.handlers = {\n 'bpmn:AdHocSubProcess': function(parentGfx, element, attrs = {}) {\n if (isExpanded(element)) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n } else {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n }\n\n return renderSubProcess(parentGfx, element, attrs);\n },\n 'bpmn:Association': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderAssociation(parentGfx, element, attrs);\n },\n 'bpmn:BoundaryEvent': function(parentGfx, element, attrs = {}) {\n var { renderIcon = true } = attrs;\n\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var semantic = getSemantic(element),\n cancelActivity = semantic.get('cancelActivity');\n\n attrs = {\n strokeWidth: 1.5,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n fillOpacity: FULL_OPACITY,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n };\n\n if (!cancelActivity) {\n attrs.strokeDasharray = '6';\n }\n\n var event = renderEvent(parentGfx, element, attrs);\n\n drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {\n ...attrs,\n fill: 'none'\n });\n\n if (renderIcon) {\n renderEventIcon(element, parentGfx, attrs);\n }\n\n return event;\n },\n 'bpmn:BusinessRuleTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {\n abspos: {\n x: 8,\n y: 8\n }\n });\n\n var businessPath = drawPath(parentGfx, headerData);\n\n svgAttr(businessPath, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {\n abspos: {\n x: 8,\n y: 8\n }\n });\n\n var businessHeaderPath = drawPath(parentGfx, headerPathData);\n\n svgAttr(businessHeaderPath, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return task;\n },\n 'bpmn:CallActivity': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderSubProcess(parentGfx, element, {\n strokeWidth: 5,\n ...attrs\n });\n },\n 'bpmn:ComplexGateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var gateway = renderGateway(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {\n xScaleFactor: 0.5,\n yScaleFactor:0.5,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.46,\n my: 0.26\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return gateway;\n },\n 'bpmn:DataInput': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var arrowPathData = pathMap.getRawPath('DATA_ARROW');\n\n var dataObject = renderDataObject(parentGfx, element, attrs);\n\n drawPath(parentGfx, arrowPathData, {\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return dataObject;\n },\n 'bpmn:DataInputAssociation': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderAssociation(parentGfx, element, {\n ...attrs,\n markerEnd: marker(parentGfx, 'association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))\n });\n },\n 'bpmn:DataObject': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderDataObject(parentGfx, element, attrs);\n },\n 'bpmn:DataObjectReference': as('bpmn:DataObject'),\n 'bpmn:DataOutput': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var arrowPathData = pathMap.getRawPath('DATA_ARROW');\n\n var dataObject = renderDataObject(parentGfx, element, attrs);\n\n drawPath(parentGfx, arrowPathData, {\n strokeWidth: 1,\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n\n return dataObject;\n },\n 'bpmn:DataOutputAssociation': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderAssociation(parentGfx, element, {\n ...attrs,\n markerEnd: marker(parentGfx, 'association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))\n });\n },\n 'bpmn:DataStoreReference': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var dataStorePath = pathMap.getScaledPath('DATA_STORE', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0,\n my: 0.133\n }\n });\n\n return drawPath(parentGfx, dataStorePath, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n fillOpacity: DEFAULT_OPACITY,\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 2\n });\n },\n 'bpmn:EndEvent': function(parentGfx, element, attrs = {}) {\n var { renderIcon = true } = attrs;\n\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var event = renderEvent(parentGfx, element, {\n ...attrs,\n strokeWidth: 4\n });\n\n if (renderIcon) {\n renderEventIcon(element, parentGfx, attrs);\n }\n\n return event;\n },\n 'bpmn:EventBasedGateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var semantic = getSemantic(element);\n\n var diamond = renderGateway(parentGfx, element, attrs);\n\n drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {\n fill: getFillColor(element, 'none', attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n var type = semantic.get('eventGatewayType'),\n instantiate = !!semantic.get('instantiate');\n\n function drawEvent() {\n\n var pathData = pathMap.getScaledPath('GATEWAY_EVENT_BASED', {\n xScaleFactor: 0.18,\n yScaleFactor: 0.18,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.36,\n my: 0.44\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 2\n });\n }\n\n if (type === 'Parallel') {\n var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {\n xScaleFactor: 0.4,\n yScaleFactor: 0.4,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.474,\n my: 0.296\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n } else if (type === 'Exclusive') {\n if (!instantiate) {\n drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n }\n\n drawEvent();\n }\n\n\n return diamond;\n },\n 'bpmn:ExclusiveGateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var gateway = renderGateway(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {\n xScaleFactor: 0.4,\n yScaleFactor: 0.4,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.32,\n my: 0.3\n }\n });\n\n var di = getDi(element);\n\n if (di.get('isMarkerVisible')) {\n drawPath(parentGfx, pathData, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n }\n\n return gateway;\n },\n 'bpmn:Gateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderGateway(parentGfx, element, attrs);\n },\n 'bpmn:Group': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n\n return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1.5,\n strokeDasharray: '10, 6, 0, 6',\n fill: 'none',\n pointerEvents: 'none',\n width: getWidth(element, attrs),\n height: getHeight(element, attrs)\n });\n },\n 'bpmn:InclusiveGateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var gateway = renderGateway(parentGfx, element, attrs);\n\n drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 2.5\n });\n\n return gateway;\n },\n 'bpmn:IntermediateEvent': function(parentGfx, element, attrs = {}) {\n var { renderIcon = true } = attrs;\n\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var outer = renderEvent(parentGfx, element, {\n ...attrs,\n strokeWidth: 1.5\n });\n\n drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {\n fill: 'none',\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1.5\n });\n\n if (renderIcon) {\n renderEventIcon(element, parentGfx, attrs);\n }\n\n return outer;\n },\n 'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),\n 'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),\n 'bpmn:Lane': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n\n return renderLane(parentGfx, element, {\n ...attrs,\n fillOpacity: LOW_OPACITY\n });\n },\n 'bpmn:ManualTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {\n abspos: {\n x: 17,\n y: 15\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 0.5\n });\n\n return task;\n },\n 'bpmn:MessageFlow': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var semantic = getSemantic(element),\n di = getDi(element);\n\n var fill = getFillColor(element, defaultFillColor, attrs.fill),\n stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);\n\n var path = drawConnectionSegments(parentGfx, element.waypoints, {\n markerEnd: marker(parentGfx, 'messageflow-end', fill, stroke),\n markerStart: marker(parentGfx, 'messageflow-start', fill, stroke),\n stroke,\n strokeDasharray: '10, 11',\n strokeWidth: 1.5\n });\n\n if (semantic.get('messageRef')) {\n var midPoint = path.getPointAtLength(path.getTotalLength() / 2);\n\n var markerPathData = pathMap.getScaledPath('MESSAGE_FLOW_MARKER', {\n abspos: {\n x: midPoint.x,\n y: midPoint.y\n }\n });\n\n var messageAttrs = {\n strokeWidth: 1\n };\n\n if (di.get('messageVisibleKind') === 'initiating') {\n messageAttrs.fill = fill;\n messageAttrs.stroke = stroke;\n } else {\n messageAttrs.fill = stroke;\n messageAttrs.stroke = fill;\n }\n\n var message = drawPath(parentGfx, markerPathData, messageAttrs);\n\n var messageRef = semantic.get('messageRef'),\n name = messageRef.get('name');\n\n var label = renderLabel(parentGfx, name, {\n align: 'center-top',\n fitBox: true,\n style: {\n fill: stroke\n }\n });\n\n var messageBounds = message.getBBox(),\n labelBounds = label.getBBox();\n\n var translateX = midPoint.x - labelBounds.width / 2,\n translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;\n\n transform(label, translateX, translateY, 0);\n }\n\n return path;\n },\n 'bpmn:ParallelGateway': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var diamond = renderGateway(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {\n xScaleFactor: 0.6,\n yScaleFactor: 0.6,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.46,\n my: 0.2\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return diamond;\n },\n 'bpmn:Participant': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n\n var participant = renderLane(parentGfx, element, attrs);\n\n var expandedParticipant = isExpanded(element);\n var horizontalParticipant = isHorizontal(element);\n\n var semantic = getSemantic(element),\n name = semantic.get('name');\n\n if (expandedParticipant) {\n var waypoints = horizontalParticipant ? [\n {\n x: 30,\n y: 0\n },\n {\n x: 30,\n y: getHeight(element, attrs)\n }\n ] : [\n {\n x: 0,\n y: 30\n },\n {\n x: getWidth(element, attrs),\n y: 30\n }\n ];\n\n drawLine(parentGfx, waypoints, {\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: PARTICIPANT_STROKE_WIDTH\n });\n\n renderLaneLabel(parentGfx, name, element, attrs);\n } else {\n var bounds = getBounds(element, attrs);\n\n if (!horizontalParticipant) {\n bounds.height = getWidth(element, attrs);\n bounds.width = getHeight(element, attrs);\n }\n\n var textBox = renderLabel(parentGfx, name, {\n box: bounds,\n align: 'center-middle',\n style: {\n fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)\n }\n });\n\n if (!horizontalParticipant) {\n var top = -1 * getHeight(element, attrs);\n transform(textBox, 0, -top, 270);\n }\n }\n\n if (semantic.get('participantMultiplicity')) {\n renderTaskMarker('ParticipantMultiplicityMarker', parentGfx, element, attrs);\n }\n\n return participant;\n },\n 'bpmn:ReceiveTask' : function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var semantic = getSemantic(element);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var pathData;\n\n if (semantic.get('instantiate')) {\n drawCircle(parentGfx, 28, 28, 20 * 0.22, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {\n abspos: {\n x: 7.77,\n y: 9.52\n }\n });\n } else {\n pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {\n xScaleFactor: 0.9,\n yScaleFactor: 0.9,\n containerWidth: 21,\n containerHeight: 14,\n position: {\n mx: 0.3,\n my: 0.4\n }\n });\n }\n\n drawPath(parentGfx, pathData, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return task;\n },\n 'bpmn:ScriptTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {\n abspos: {\n x: 15,\n y: 20\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return task;\n },\n 'bpmn:SendTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: 21,\n containerHeight: 14,\n position: {\n mx: 0.285,\n my: 0.357\n }\n });\n\n drawPath(parentGfx, pathData, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getFillColor(element, defaultFillColor, attrs.fill),\n strokeWidth: 1\n });\n\n return task;\n },\n 'bpmn:SequenceFlow': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var fill = getFillColor(element, defaultFillColor, attrs.fill),\n stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);\n\n var connection = drawConnectionSegments(parentGfx, element.waypoints, {\n markerEnd: marker(parentGfx, 'sequenceflow-end', fill, stroke),\n stroke\n });\n\n var semantic = getSemantic(element);\n\n var { source } = element;\n\n if (source) {\n var sourceSemantic = getSemantic(source);\n\n // conditional flow marker\n if (semantic.get('conditionExpression') && is(sourceSemantic, 'bpmn:Activity')) {\n svgAttr(connection, {\n markerStart: marker(parentGfx, 'conditional-flow-marker', fill, stroke)\n });\n }\n\n // default marker\n if (sourceSemantic.get('default') && (is(sourceSemantic, 'bpmn:Gateway') || is(sourceSemantic, 'bpmn:Activity')) &&\n sourceSemantic.get('default') === semantic) {\n svgAttr(connection, {\n markerStart: marker(parentGfx, 'conditional-default-flow-marker', fill, stroke)\n });\n }\n }\n\n return connection;\n },\n 'bpmn:ServiceTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n drawCircle(parentGfx, 10, 10, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: 'none',\n transform: 'translate(6, 6)'\n });\n\n var pathDataService1 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {\n abspos: {\n x: 12,\n y: 18\n }\n });\n\n drawPath(parentGfx, pathDataService1, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n drawCircle(parentGfx, 10, 10, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: 'none',\n transform: 'translate(11, 10)'\n });\n\n var pathDataService2 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {\n abspos: {\n x: 17,\n y: 22\n }\n });\n\n drawPath(parentGfx, pathDataService2, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1\n });\n\n return task;\n },\n 'bpmn:StartEvent': function(parentGfx, element, attrs = {}) {\n var { renderIcon = true } = attrs;\n\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var semantic = getSemantic(element);\n\n if (!semantic.get('isInterrupting')) {\n attrs = {\n ...attrs,\n strokeDasharray: '6'\n };\n }\n\n var event = renderEvent(parentGfx, element, attrs);\n\n if (renderIcon) {\n renderEventIcon(element, parentGfx, attrs);\n }\n\n return event;\n },\n 'bpmn:SubProcess': function(parentGfx, element, attrs = {}) {\n if (isExpanded(element)) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n } else {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n }\n\n return renderSubProcess(parentGfx, element, attrs);\n },\n 'bpmn:Task': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n return renderTask(parentGfx, element, attrs);\n },\n 'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n\n var {\n width,\n height\n } = getBounds(element, attrs);\n\n var textElement = drawRect(parentGfx, width, height, 0, 0, {\n fill: 'none',\n stroke: 'none'\n });\n\n var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: width,\n containerHeight: height,\n position: {\n mx: 0.0,\n my: 0.0\n }\n });\n\n drawPath(parentGfx, textPathData, {\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)\n });\n\n var semantic = getSemantic(element),\n text = semantic.get('text') || '';\n\n renderLabel(parentGfx, text, {\n align: 'left-top',\n box: getBounds(element, attrs),\n padding: 7,\n style: {\n fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)\n }\n });\n\n return textElement;\n },\n 'bpmn:Transaction': function(parentGfx, element, attrs = {}) {\n if (isExpanded(element)) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke',\n 'width',\n 'height'\n ]);\n } else {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n }\n\n var outer = renderSubProcess(parentGfx, element, {\n strokeWidth: 1.5,\n ...attrs\n });\n\n var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 1.5\n });\n\n var expanded = isExpanded(element);\n\n if (!expanded) {\n attrs = {};\n }\n\n drawRect(\n parentGfx,\n getWidth(element, attrs),\n getHeight(element, attrs),\n TASK_BORDER_RADIUS - INNER_OUTER_DIST,\n INNER_OUTER_DIST,\n innerAttrs\n );\n\n return outer;\n },\n 'bpmn:UserTask': function(parentGfx, element, attrs = {}) {\n attrs = pickAttrs(attrs, [\n 'fill',\n 'stroke'\n ]);\n\n var task = renderTask(parentGfx, element, attrs);\n\n var x = 15;\n var y = 12;\n\n var pathDataUser1 = pathMap.getScaledPath('TASK_TYPE_USER_1', {\n abspos: {\n x: x,\n y: y\n }\n });\n\n drawPath(parentGfx, pathDataUser1, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 0.5\n });\n\n var pathDataUser2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {\n abspos: {\n x: x,\n y: y\n }\n });\n\n drawPath(parentGfx, pathDataUser2, {\n fill: getFillColor(element, defaultFillColor, attrs.fill),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 0.5\n });\n\n var pathDataUser3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {\n abspos: {\n x: x,\n y: y\n }\n });\n\n drawPath(parentGfx, pathDataUser3, {\n fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),\n strokeWidth: 0.5\n });\n\n return task;\n },\n 'label': function(parentGfx, element, attrs = {}) {\n return renderExternalLabel(parentGfx, element, attrs);\n }\n };\n\n // extension API, use at your own risk\n this._drawPath = drawPath;\n\n this._renderer = renderer;\n}\n\n\ninherits(BpmnRenderer, BaseRenderer);\n\nBpmnRenderer.$inject = [\n 'config.bpmnRenderer',\n 'eventBus',\n 'styles',\n 'pathMap',\n 'canvas',\n 'textRenderer'\n];\n\n\n/**\n * @param {Element} element\n *\n * @return {boolean}\n */\nBpmnRenderer.prototype.canRender = function(element) {\n return is(element, 'bpmn:BaseElement');\n};\n\n/**\n * Draw shape into parentGfx.\n *\n * @param {SVGElement} parentGfx\n * @param {Shape} shape\n * @param {Attrs} [attrs]\n *\n * @return {SVGElement} mainGfx\n */\nBpmnRenderer.prototype.drawShape = function(parentGfx, shape, attrs = {}) {\n var { type } = shape;\n\n var handler = this._renderer(type);\n\n return handler(parentGfx, shape, attrs);\n};\n\n/**\n * Draw connection into parentGfx.\n *\n * @param {SVGElement} parentGfx\n * @param {Connection} connection\n * @param {Attrs} [attrs]\n *\n * @return {SVGElement} mainGfx\n */\nBpmnRenderer.prototype.drawConnection = function(parentGfx, connection, attrs = {}) {\n var { type } = connection;\n\n var handler = this._renderer(type);\n\n return handler(parentGfx, connection, attrs);\n};\n\n/**\n * Get shape path.\n *\n * @param {Shape} shape\n *\n * @return {string} path\n */\nBpmnRenderer.prototype.getShapePath = function(shape) {\n\n if (isLabel(shape)) {\n return getRoundRectPath(shape, EXTERNAL_LABEL_BORDER_RADIUS);\n }\n\n if (is(shape, 'bpmn:Event')) {\n return getCirclePath(shape);\n }\n\n if (is(shape, 'bpmn:Activity')) {\n return getRoundRectPath(shape, TASK_BORDER_RADIUS);\n }\n\n if (is(shape, 'bpmn:Gateway')) {\n return getDiamondPath(shape);\n }\n\n return getRectPath(shape);\n};\n\n/**\n * Pick attributes if they exist.\n *\n * @param {Object} attrs\n * @param {string[]} keys\n *\n * @returns {Object}\n */\nfunction pickAttrs(attrs, keys = []) {\n return keys.reduce((pickedAttrs, key) => {\n if (attrs[ key ]) {\n pickedAttrs[ key ] = attrs[ key ];\n }\n\n return pickedAttrs;\n }, {});\n}" }, { "path": "lib/draw/PathMap.js", "content": "/**\n * Map containing SVG paths needed by BpmnRenderer\n */\nexport default function PathMap() {\n\n /**\n * Contains a map of path elements\n *\n *

Path definition

\n * A parameterized path is defined like this:\n * 
\n   * 'GATEWAY_PARALLEL': {\n   *   d: 'm {mx},{my} {e.x0},0 0,{e.x1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +\n          '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',\n   *   height: 17.5,\n   *   width:  17.5,\n   *   heightElements: [2.5, 7.5],\n   *   widthElements: [2.5, 7.5]\n   * }\n   *
\n *

It's important to specify a correct height and width for the path as the scaling\n * is based on the ratio between the specified height and width in this object and the\n * height and width that is set as scale target (Note x,y coordinates will be scaled with\n * individual ratios).

\n *

The 'heightElements' and 'widthElements' array must contain the values that will be scaled.\n * The scaling is based on the computed ratios.\n * Coordinates on the y axis should be in the heightElement's array, they will be scaled using\n * the computed ratio coefficient.\n * In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets.\n *

    \n *
  • The values for the y axis can be accessed in the path string using {e.y0}, {e.y1}, ....
    • \n *
  • The values for the x axis can be accessed in the path string using {e.x0}, {e.x1}, ....
    • \n *
\n * The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index.\n *

\n */\n this.pathMap = {\n 'EVENT_MESSAGE': {\n d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',\n height: 36,\n width: 36,\n heightElements: [ 6, 14 ],\n widthElements: [ 10.5, 21 ]\n },\n 'EVENT_SIGNAL': {\n d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x1},0 Z',\n height: 36,\n width: 36,\n heightElements: [ 18 ],\n widthElements: [ 10, 20 ]\n },\n 'EVENT_ESCALATION': {\n d: 'M {mx},{my} l {e.x0},{e.y0} l -{e.x0},-{e.y1} l -{e.x0},{e.y1} Z',\n height: 36,\n width: 36,\n heightElements: [ 20, 7 ],\n widthElements: [ 8 ]\n },\n 'EVENT_CONDITIONAL': {\n d: 'M {e.x0},{e.y0} l {e.x1},0 l 0,{e.y2} l -{e.x1},0 Z ' +\n 'M {e.x2},{e.y3} l {e.x0},0 ' +\n 'M {e.x2},{e.y4} l {e.x0},0 ' +\n 'M {e.x2},{e.y5} l {e.x0},0 ' +\n 'M {e.x2},{e.y6} l {e.x0},0 ' +\n 'M {e.x2},{e.y7} l {e.x0},0 ' +\n 'M {e.x2},{e.y8} l {e.x0},0 ',\n height: 36,\n width: 36,\n heightElements: [ 8.5, 14.5, 18, 11.5, 14.5, 17.5, 20.5, 23.5, 26.5 ],\n widthElements: [ 10.5, 14.5, 12.5 ]\n },\n 'EVENT_LINK': {\n d: 'm {mx},{my} 0,{e.y0} -{e.x1},0 0,{e.y1} {e.x1},0 0,{e.y0} {e.x0},-{e.y2} -{e.x0},-{e.y2} z',\n height: 36,\n width: 36,\n heightElements: [ 4.4375, 6.75, 7.8125 ],\n widthElements: [ 9.84375, 13.5 ]\n },\n 'EVENT_ERROR': {\n d: 'm {mx},{my} {e.x0},-{e.y0} {e.x1},-{e.y1} {e.x2},{e.y2} {e.x3},-{e.y3} -{e.x4},{e.y4} -{e.x5},-{e.y5} z',\n height: 36,\n width: 36,\n heightElements: [ 0.023, 8.737, 8.151, 16.564, 10.591, 8.714 ],\n widthElements: [ 0.085, 6.672, 6.97, 4.273, 5.337, 6.636 ]\n },\n 'EVENT_CANCEL_45': {\n d: 'm {mx},{my} -{e.x1},0 0,{e.x0} {e.x1},0 0,{e.y1} {e.x0},0 ' +\n '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',\n height: 36,\n width: 36,\n heightElements: [ 4.75, 8.5 ],\n widthElements: [ 4.75, 8.5 ]\n },\n 'EVENT_COMPENSATION': {\n d: 'm {mx},{my} {e.x0},-{e.y0} 0,{e.y1} z m {e.x1},-{e.y2} {e.x2},-{e.y3} 0,{e.y1} -{e.x2},-{e.y3} z',\n height: 36,\n width: 36,\n heightElements: [ 6.5, 13, 0.4, 6.1 ],\n widthElements: [ 9, 9.3, 8.7 ]\n },\n 'EVENT_TIMER_WH': {\n d: 'M {mx},{my} l {e.x0},-{e.y0} m -{e.x0},{e.y0} l {e.x1},{e.y1} ',\n height: 36,\n width: 36,\n heightElements: [ 10, 2 ],\n widthElements: [ 3, 7 ]\n },\n 'EVENT_TIMER_LINE': {\n d: 'M {mx},{my} ' +\n 'm {e.x0},{e.y0} l -{e.x1},{e.y1} ',\n height: 36,\n width: 36,\n heightElements: [ 10, 3 ],\n widthElements: [ 0, 0 ]\n },\n 'EVENT_MULTIPLE': {\n d:'m {mx},{my} {e.x1},-{e.y0} {e.x1},{e.y0} -{e.x0},{e.y1} -{e.x2},0 z',\n height: 36,\n width: 36,\n heightElements: [ 6.28099, 12.56199 ],\n widthElements: [ 3.1405, 9.42149, 12.56198 ]\n },\n 'EVENT_PARALLEL_MULTIPLE': {\n d:'m {mx},{my} {e.x0},0 0,{e.y1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +\n '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',\n height: 36,\n width: 36,\n heightElements: [ 2.56228, 7.68683 ],\n widthElements: [ 2.56228, 7.68683 ]\n },\n 'GATEWAY_EXCLUSIVE': {\n d:'m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} ' +\n '{e.x4},{e.y1} {e.x2},0 {e.x1},{e.y3} {e.x0},{e.y3} ' +\n '{e.x3},0 {e.x5},{e.y1} {e.x5},{e.y2} {e.x3},0 z',\n height: 17.5,\n width: 17.5,\n heightElements: [ 8.5, 6.5312, -6.5312, -8.5 ],\n widthElements: [ 6.5, -6.5, 3, -3, 5, -5 ]\n },\n 'GATEWAY_PARALLEL': {\n d:'m {mx},{my} 0,{e.y1} -{e.x1},0 0,{e.y0} {e.x1},0 0,{e.y1} {e.x0},0 ' +\n '0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z',\n height: 30,\n width: 30,\n heightElements: [ 5, 12.5 ],\n widthElements: [ 5, 12.5 ]\n },\n 'GATEWAY_EVENT_BASED': {\n d:'m {mx},{my} {e.x0},{e.y0} {e.x0},{e.y1} {e.x1},{e.y2} {e.x2},0 z',\n height: 11,\n width: 11,\n heightElements: [ -6, 6, 12, -12 ],\n widthElements: [ 9, -3, -12 ]\n },\n 'GATEWAY_COMPLEX': {\n d:'m {mx},{my} 0,{e.y0} -{e.x0},-{e.y1} -{e.x1},{e.y2} {e.x0},{e.y1} -{e.x2},0 0,{e.y3} ' +\n '{e.x2},0 -{e.x0},{e.y1} l {e.x1},{e.y2} {e.x0},-{e.y1} 0,{e.y0} {e.x3},0 0,-{e.y0} {e.x0},{e.y1} ' +\n '{e.x1},-{e.y2} -{e.x0},-{e.y1} {e.x2},0 0,-{e.y3} -{e.x2},0 {e.x0},-{e.y1} -{e.x1},-{e.y2} ' +\n '-{e.x0},{e.y1} 0,-{e.y0} -{e.x3},0 z',\n height: 17.125,\n width: 17.125,\n heightElements: [ 4.875, 3.4375, 2.125, 3 ],\n widthElements: [ 3.4375, 2.125, 4.875, 3 ]\n },\n 'DATA_OBJECT_PATH': {\n d:'m 0,0 {e.x1},0 {e.x0},{e.y0} 0,{e.y1} -{e.x2},0 0,-{e.y2} {e.x1},0 0,{e.y0} {e.x0},0',\n height: 61,\n width: 51,\n heightElements: [ 10, 50, 60 ],\n widthElements: [ 10, 40, 50, 60 ]\n },\n 'DATA_OBJECT_COLLECTION_PATH': {\n d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',\n height: 10,\n width: 10,\n heightElements: [],\n widthElements: []\n },\n 'DATA_ARROW': {\n d:'m 5,9 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z',\n height: 61,\n width: 51,\n heightElements: [],\n widthElements: []\n },\n 'DATA_STORE': {\n d:'m {mx},{my} ' +\n 'l 0,{e.y2} ' +\n 'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0 ' +\n 'l 0,-{e.y2} ' +\n 'c -{e.x0},-{e.y1} -{e.x1},-{e.y1} -{e.x2},0' +\n 'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0 ' +\n 'm -{e.x2},{e.y0}' +\n 'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0' +\n 'm -{e.x2},{e.y0}' +\n 'c {e.x0},{e.y1} {e.x1},{e.y1} {e.x2},0',\n height: 61,\n width: 61,\n heightElements: [ 7, 10, 45 ],\n widthElements: [ 2, 58, 60 ]\n },\n 'TEXT_ANNOTATION': {\n d: 'm {mx}, {my} m 10,0 l -10,0 l 0,{e.y0} l 10,0',\n height: 30,\n width: 10,\n heightElements: [ 30 ],\n widthElements: [ 10 ]\n },\n 'MARKER_SUB_PROCESS': {\n d: 'm{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0',\n height: 10,\n width: 10,\n heightElements: [],\n widthElements: []\n },\n 'MARKER_PARALLEL': {\n d: 'm{mx},{my} m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10',\n height: 10,\n width: 10,\n heightElements: [],\n widthElements: []\n },\n 'MARKER_SEQUENTIAL': {\n d: 'm{mx},{my} m 0,3 l 10,0 m -10,3 l 10,0 m -10,3 l 10,0',\n height: 10,\n width: 10,\n heightElements: [],\n widthElements: []\n },\n 'MARKER_COMPENSATION': {\n d: 'm {mx},{my} 7,-5 0,10 z m 7.1,-0.3 6.9,-4.7 0,10 -6.9,-4.7 z',\n height: 10,\n width: 21,\n heightElements: [],\n widthElements: []\n },\n 'MARKER_LOOP': {\n d: 'm {mx},{my} c 3.526979,0 6.386161,-2.829858 6.386161,-6.320661 0,-3.490806 -2.859182,-6.320661 ' +\n '-6.386161,-6.320661 -3.526978,0 -6.38616,2.829855 -6.38616,6.320661 0,1.745402 ' +\n '0.714797,3.325567 1.870463,4.469381 0.577834,0.571908 1.265885,1.034728 2.029916,1.35457 ' +\n 'l -0.718163,-3.909793 m 0.718163,3.909793 -3.885211,0.802902',\n height: 13.9,\n width: 13.7,\n heightElements: [],\n widthElements: []\n },\n 'MARKER_ADHOC': {\n d: 'm {mx},{my} m 0.84461,2.64411 c 1.05533,-1.23780996 2.64337,-2.07882 4.29653,-1.97997996 2.05163,0.0805 ' +\n '3.85579,1.15803 5.76082,1.79107 1.06385,0.34139996 2.24454,0.1438 3.18759,-0.43767 0.61743,-0.33642 ' +\n '1.2775,-0.64078 1.7542,-1.17511 0,0.56023 0,1.12046 0,1.6807 -0.98706,0.96237996 -2.29792,1.62393996 ' +\n '-3.6918,1.66181996 -1.24459,0.0927 -2.46671,-0.2491 -3.59505,-0.74812 -1.35789,-0.55965 ' +\n '-2.75133,-1.33436996 -4.27027,-1.18121996 -1.37741,0.14601 -2.41842,1.13685996 -3.44288,1.96782996 z',\n height: 4,\n width: 15,\n heightElements: [],\n widthElements: []\n },\n 'TASK_TYPE_SEND': {\n d: 'm {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}',\n height: 14,\n width: 21,\n heightElements: [ 6, 14 ],\n widthElements: [ 10.5, 21 ]\n },\n 'TASK_TYPE_SCRIPT': {\n d: 'm {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 ' +\n 'c -10.969894,7.01868 6.997585,8.66524 -2.968967,14.938 z ' +\n 'm -7,-12 l 5,0 ' +\n 'm -4.5,3 l 4.5,0 ' +\n 'm -3,3 l 5,0' +\n 'm -4,3 l 5,0',\n height: 15,\n width: 12.6,\n heightElements: [ 6, 14 ],\n widthElements: [ 10.5, 21 ]\n },\n 'TASK_TYPE_USER_1': {\n d: 'm {mx},{my} c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 ' +\n '-4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 ' +\n '0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 ' +\n 'h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 z' +\n 'm -8,6 l 0,5.5 m 11,0 l 0,-5'\n },\n 'TASK_TYPE_USER_2': {\n d: 'm {mx},{my} m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 ' +\n '-2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 '\n },\n 'TASK_TYPE_USER_3': {\n d: 'm {mx},{my} m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 ' +\n '4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 ' +\n '-4.20799998,3.36699999 -4.20699998,4.34799999 z'\n },\n 'TASK_TYPE_MANUAL': {\n d: 'm {mx},{my} c 0.234,-0.01 5.604,0.008 8.029,0.004 0.808,0 1.271,-0.172 1.417,-0.752 0.227,-0.898 ' +\n '-0.334,-1.314 -1.338,-1.316 -2.467,-0.01 -7.886,-0.004 -8.108,-0.004 -0.014,-0.079 0.016,-0.533 0,-0.61 ' +\n '0.195,-0.042 8.507,0.006 9.616,0.002 0.877,-0.007 1.35,-0.438 1.353,-1.208 0.003,-0.768 -0.479,-1.09 ' +\n '-1.35,-1.091 -2.968,-0.002 -9.619,-0.013 -9.619,-0.013 v -0.591 c 0,0 5.052,-0.016 7.225,-0.016 ' +\n '0.888,-0.002 1.354,-0.416 1.351,-1.193 -0.006,-0.761 -0.492,-1.196 -1.361,-1.196 -3.473,-0.005 ' +\n '-10.86,-0.003 -11.0829995,-0.003 -0.022,-0.047 -0.045,-0.094 -0.069,-0.139 0.3939995,-0.319 ' +\n '2.0409995,-1.626 2.4149995,-2.017 0.469,-0.4870005 0.519,-1.1650005 0.162,-1.6040005 -0.414,-0.511 ' +\n '-0.973,-0.5 -1.48,-0.236 -1.4609995,0.764 -6.5999995,3.6430005 -7.7329995,4.2710005 -0.9,0.499 ' +\n '-1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 ' +\n '-0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 ' +\n '0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 ' +\n '-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z'\n },\n 'TASK_TYPE_INSTANTIATING_SEND': {\n d: 'm {mx},{my} l 0,8.4 l 12.6,0 l 0,-8.4 z l 6.3,3.6 l 6.3,-3.6'\n },\n 'TASK_TYPE_SERVICE': {\n d: 'm {mx},{my} v -1.71335 c 0.352326,-0.0705 0.703932,-0.17838 1.047628,-0.32133 ' +\n '0.344416,-0.14465 0.665822,-0.32133 0.966377,-0.52145 l 1.19431,1.18005 1.567487,-1.57688 ' +\n '-1.195028,-1.18014 c 0.403376,-0.61394 0.683079,-1.29908 0.825447,-2.01824 l 1.622133,-0.01 ' +\n 'v -2.2196 l -1.636514,0.01 c -0.07333,-0.35153 -0.178319,-0.70024 -0.323564,-1.04372 ' +\n '-0.145244,-0.34406 -0.321407,-0.6644 -0.522735,-0.96217 l 1.131035,-1.13631 -1.583305,-1.56293 ' +\n '-1.129598,1.13589 c -0.614052,-0.40108 -1.302883,-0.68093 -2.022633,-0.82247 l 0.0093,-1.61852 ' +\n 'h -2.241173 l 0.0042,1.63124 c -0.353763,0.0736 -0.705369,0.17977 -1.049785,0.32371 -0.344415,0.14437 ' +\n '-0.665102,0.32092 -0.9635006,0.52046 l -1.1698628,-1.15823 -1.5667691,1.5792 1.1684265,1.15669 ' +\n 'c -0.4026573,0.61283 -0.68308,1.29797 -0.8247287,2.01713 l -1.6588041,0.003 v 2.22174 ' +\n 'l 1.6724648,-0.006 c 0.073327,0.35077 0.1797598,0.70243 0.3242851,1.04472 0.1452428,0.34448 ' +\n '0.3214064,0.6644 0.5227339,0.96066 l -1.1993431,1.19723 1.5840256,1.56011 1.1964668,-1.19348 ' +\n 'c 0.6140517,0.40346 1.3028827,0.68232 2.0233517,0.82331 l 7.19e-4,1.69892 h 2.226848 z ' +\n 'm 0.221462,-3.9957 c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +\n '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +\n '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'\n },\n 'TASK_TYPE_SERVICE_FILL': {\n d: 'm {mx},{my} c -1.788948,0.7502 -3.8576,-0.0928 -4.6097055,-1.87438 -0.7521065,-1.78321 ' +\n '0.090598,-3.84627 1.8802645,-4.59604 1.78823,-0.74936 3.856881,0.0929 4.608987,1.87437 ' +\n '0.752106,1.78165 -0.0906,3.84612 -1.879546,4.59605 z'\n },\n 'TASK_TYPE_BUSINESS_RULE_HEADER': {\n d: 'm {mx},{my} 0,4 20,0 0,-4 z'\n },\n 'TASK_TYPE_BUSINESS_RULE_MAIN': {\n d: 'm {mx},{my} 0,12 20,0 0,-12 z' +\n 'm 0,8 l 20,0 ' +\n 'm -13,-4 l 0,8'\n },\n 'MESSAGE_FLOW_MARKER': {\n d: 'm {mx},{my} m -10.5 ,-7 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6'\n }\n };\n\n /**\n * Return raw path for the given ID.\n *\n * @param {string} pathId\n *\n * @return {string} raw path\n */\n this.getRawPath = function getRawPath(pathId) {\n return this.pathMap[pathId].d;\n };\n\n /**\n * Scales the path to the given height and width.\n *

Use case

\n *

Use case is to scale the content of elements (event, gateways) based\n * on the element bounding box's size.\n *

\n *

Why not transform

\n *

Scaling a path with transform() will also scale the stroke and IE does not support\n * the option 'non-scaling-stroke' to prevent this.\n * Also there are use cases where only some parts of a path should be\n * scaled.

\n *\n * @param {string} pathId The ID of the path.\n * @param {Object} param

\n * Example param object scales the path to 60% size of the container (data.width, data.height).\n * 

\n   *   {\n   *     xScaleFactor: 0.6,\n   *     yScaleFactor:0.6,\n   *     containerWidth: data.width,\n   *     containerHeight: data.height,\n   *     position: {\n   *       mx: 0.46,\n   *       my: 0.2,\n   *     }\n   *   }\n   *
\n *
    \n *
  • targetpathwidth = xScaleFactor * containerWidth
    • \n *
  • targetpathheight = yScaleFactor * containerHeight
    • \n *
  • Position is used to set the starting coordinate of the path. M is computed:\n *
      \n *
    • position.x * containerWidth
      • \n *
    • position.y * containerHeight
      • \n *
    \n * Center of the container 
     position: {\n   *       mx: 0.5,\n   *       my: 0.5,\n   *     }
    \n * Upper left corner of the container\n * 
     position: {\n   *       mx: 0.0,\n   *       my: 0.0,\n   *     }
    \n *
    • \n *
\n *

\n *\n * @return {string} scaled path\n */\n this.getScaledPath = function getScaledPath(pathId, param) {\n var rawPath = this.pathMap[pathId];\n\n // positioning\n // compute the start point of the path\n var mx, my;\n\n if (param.abspos) {\n mx = param.abspos.x;\n my = param.abspos.y;\n } else {\n mx = param.containerWidth * param.position.mx;\n my = param.containerHeight * param.position.my;\n }\n\n var coordinates = {}; // map for the scaled coordinates\n if (param.position) {\n\n // path\n var heightRatio = (param.containerHeight / rawPath.height) * param.yScaleFactor;\n var widthRatio = (param.containerWidth / rawPath.width) * param.xScaleFactor;\n\n\n // Apply height ratio\n for (var heightIndex = 0; heightIndex < rawPath.heightElements.length; heightIndex++) {\n coordinates['y' + heightIndex] = rawPath.heightElements[heightIndex] * heightRatio;\n }\n\n // Apply width ratio\n for (var widthIndex = 0; widthIndex < rawPath.widthElements.length; widthIndex++) {\n coordinates['x' + widthIndex] = rawPath.widthElements[widthIndex] * widthRatio;\n }\n }\n\n // Apply value to raw path\n var path = format(\n rawPath.d, {\n mx: mx,\n my: my,\n e: coordinates\n }\n );\n return path;\n };\n}\n\n// helpers //////////////////////\n\n// copied and adjusted from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js\nvar tokenRegex = /\\{([^{}]+)\\}/g,\n objNotationRegex = /(?:(?:^|\\.)(.+?)(?=\\[|\\.|$|\\()|\\[('|\")(.+?)\\2\\])(\\(\\))?/g; // matches .xxxxx or [\"xxxxx\"] to run over object properties\n\nfunction replacer(all, key, obj) {\n var res = obj;\n key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {\n name = name || quotedName;\n if (res) {\n if (name in res) {\n res = res[name];\n }\n typeof res == 'function' && isFunc && (res = res());\n }\n });\n res = (res == null || res == obj ? all : res) + '';\n\n return res;\n}\n\nfunction format(str, obj) {\n return String(str).replace(tokenRegex, function(all, key) {\n return replacer(all, key, obj);\n });\n}\n" }, { "path": "lib/draw/TextRenderer.js", "content": "import { assign } from 'min-dash';\n\nimport TextUtil from 'diagram-js/lib/util/Text';\n\nvar DEFAULT_FONT_SIZE = 12;\nvar LINE_HEIGHT_RATIO = 1.2;\n\nvar MIN_TEXT_ANNOTATION_HEIGHT = 30;\n\n/**\n * @typedef { {\n * fontFamily: string;\n * fontSize: number;\n * fontWeight: string;\n * lineHeight: number;\n * } } TextRendererStyle\n *\n * @typedef { {\n * defaultStyle?: Partial;\n * externalStyle?: Partial;\n * } } TextRendererConfig\n *\n * @typedef { import('diagram-js/lib/util/Text').TextLayoutConfig } TextLayoutConfig\n *\n * @typedef { import('diagram-js/lib/util/Types').Rect } Rect\n */\n\n\n/**\n * Renders text and computes text bounding boxes.\n *\n * @param {TextRendererConfig} [config]\n */\nexport default function TextRenderer(config) {\n\n var defaultStyle = assign({\n fontFamily: 'Arial, sans-serif',\n fontSize: DEFAULT_FONT_SIZE,\n fontWeight: 'normal',\n lineHeight: LINE_HEIGHT_RATIO\n }, config && config.defaultStyle || {});\n\n var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;\n\n var externalStyle = assign({}, defaultStyle, {\n fontSize: fontSize\n }, config && config.externalStyle || {});\n\n var textUtil = new TextUtil({\n style: defaultStyle\n });\n\n /**\n * Get the new bounds of an externally rendered,\n * layouted label.\n *\n * @param {Rect} bounds\n * @param {string} text\n *\n * @return {Rect}\n */\n this.getExternalLabelBounds = function(bounds, text) {\n\n var layoutedDimensions = textUtil.getDimensions(text, {\n box: {\n width: 90,\n height: 30\n },\n style: externalStyle\n });\n\n // resize label shape to fit label text\n return {\n x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),\n y: Math.round(bounds.y),\n width: Math.ceil(layoutedDimensions.width),\n height: Math.ceil(layoutedDimensions.height)\n };\n\n };\n\n /**\n * Get the new bounds of text annotation.\n *\n * @param {Rect} bounds\n * @param {string} text\n *\n * @return {Rect}\n */\n this.getTextAnnotationBounds = function(bounds, text) {\n\n var layoutedDimensions = textUtil.getDimensions(text, {\n box: bounds,\n style: defaultStyle,\n align: 'left-top',\n padding: 5\n });\n\n return {\n x: bounds.x,\n y: bounds.y,\n width: bounds.width,\n height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))\n };\n };\n\n /**\n * Create a layouted text element.\n *\n * @param {string} text\n * @param {TextLayoutConfig} [options]\n *\n * @return {SVGElement} rendered text\n */\n this.createText = function(text, options) {\n return textUtil.createText(text, options || {});\n };\n\n /**\n * Get default text style.\n */\n this.getDefaultStyle = function() {\n return defaultStyle;\n };\n\n /**\n * Get the external text style.\n */\n this.getExternalStyle = function() {\n return externalStyle;\n };\n\n}\n\nTextRenderer.$inject = [\n 'config.textRenderer'\n];" }, { "path": "lib/draw/TextRenderer.spec.ts", "content": "import TextRenderer from './TextRenderer';\n\nnew TextRenderer({\n defaultStyle: {\n fontFamily: 'foo'\n }\n});\n\nconst textRenderer = new TextRenderer();\n\nconst externalLabelBounds = textRenderer.getExternalLabelBounds({\n x: 100,\n y: 100,\n width: 100,\n height: 100\n}, 'FOO\\nBAR\\n\\BAZ');\n\nconst textAnnotationBounds = textRenderer.getTextAnnotationBounds({\n x: 100,\n y: 100,\n width: 100,\n height: 100\n}, 'FOO\\nBAR\\n\\BAZ');\n\nlet text = textRenderer.createText('foo');\n\ntext = textRenderer.createText('foo', {\n align: 'center-top',\n padding: 10\n});\n\nconst defaultStyle = textRenderer.getDefaultStyle();\n\nconst externalStyle = textRenderer.getExternalStyle();" }, { "path": "lib/draw/index.js", "content": "import BpmnRenderer from './BpmnRenderer';\nimport TextRenderer from './TextRenderer';\n\nimport PathMap from './PathMap';\n\nexport default {\n __init__: [ 'bpmnRenderer' ],\n bpmnRenderer: [ 'type', BpmnRenderer ],\n textRenderer: [ 'type', TextRenderer ],\n pathMap: [ 'type', PathMap ]\n};\n" }, { "path": "lib/features/align-elements/AlignElementsContextPadProvider.js", "content": "import {\n assign\n} from 'min-dash';\n\nimport ICONS from './AlignElementsIcons';\n\n/**\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').default} ContextPad\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu\n * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').ContextPadEntries} ContextPadEntries\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default} ContextPadProvider\n */\n\nvar LOW_PRIORITY = 900;\n\n/**\n * A provider for the `Align elements` context pad entry.\n *\n * @implements {ContextPadProvider}\n *\n * @param {ContextPad} contextPad\n * @param {PopupMenu} popupMenu\n * @param {Translate} translate\n * @param {Canvas} canvas\n */\nexport default function AlignElementsContextPadProvider(contextPad, popupMenu, translate, canvas) {\n\n contextPad.registerProvider(LOW_PRIORITY, this);\n\n this._contextPad = contextPad;\n this._popupMenu = popupMenu;\n this._translate = translate;\n this._canvas = canvas;\n}\n\nAlignElementsContextPadProvider.$inject = [\n 'contextPad',\n 'popupMenu',\n 'translate',\n 'canvas'\n];\n\n/**\n * @param {Element[]} elements\n *\n * @return {ContextPadEntries}\n */\nAlignElementsContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {\n var actions = {};\n\n if (this._isAllowed(elements)) {\n assign(actions, this._getEntries(elements));\n }\n\n return actions;\n};\n\nAlignElementsContextPadProvider.prototype._isAllowed = function(elements) {\n return !this._popupMenu.isEmpty(elements, 'align-elements');\n};\n\nAlignElementsContextPadProvider.prototype._getEntries = function() {\n var self = this;\n\n return {\n 'align-elements': {\n group: 'align-elements',\n title: self._translate('Align elements'),\n html: `
${ICONS['align']}
`,\n action: {\n click: function(event, target) {\n var position = self._getMenuPosition(target);\n\n assign(position, {\n cursor: {\n x: event.x,\n y: event.y\n }\n });\n\n self._popupMenu.open(target, 'align-elements', position);\n }\n }\n }\n };\n};\n\nAlignElementsContextPadProvider.prototype._getMenuPosition = function(elements) {\n var Y_OFFSET = 5;\n\n var pad = this._contextPad.getPad(elements).html;\n\n var padRect = pad.getBoundingClientRect();\n\n var pos = {\n x: padRect.left,\n y: padRect.bottom + Y_OFFSET\n };\n\n return pos;\n};\n" }, { "path": "lib/features/align-elements/AlignElementsIcons.js", "content": "/**\n * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,\n * and then replace respective icons with the optimized data URIs in `./dist`.\n */\nvar icons = {\n align: `\n \n \n \n `,\n bottom: `\n \n \n \n `,\n center: `\n \n \n \n `,\n left: `\n \n \n \n `,\n right: `\n \n \n \n `,\n top: `\n \n \n \n `,\n middle: `\n \n \n \n `\n};\n\nexport default icons;\n" }, { "path": "lib/features/align-elements/AlignElementsMenuProvider.js", "content": "import ICONS from './AlignElementsIcons';\n\nimport {\n assign,\n forEach,\n} from 'min-dash';\n\n/**\n * @typedef {import('diagram-js/lib/features/align-elements/AlignElements').default} AlignElements\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu\n * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules\n * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate\n *\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuEntries} PopupMenuEntries\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenuProvider').default} PopupMenuProvider\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget\n */\n\nvar ALIGNMENT_OPTIONS = [\n 'left',\n 'center',\n 'right',\n 'top',\n 'middle',\n 'bottom'\n];\n\n/**\n * A provider for the `Align elements` popup menu.\n *\n * @implements {PopupMenuProvider}\n *\n * @param {PopupMenu} popupMenu\n * @param {AlignElements} alignElements\n * @param {Translate} translate\n * @param {Rules} rules\n */\nexport default function AlignElementsMenuProvider(popupMenu, alignElements, translate, rules) {\n\n this._alignElements = alignElements;\n this._translate = translate;\n this._popupMenu = popupMenu;\n this._rules = rules;\n\n popupMenu.registerProvider('align-elements', this);\n}\n\nAlignElementsMenuProvider.$inject = [\n 'popupMenu',\n 'alignElements',\n 'translate',\n 'rules'\n];\n\n/**\n * @param {PopupMenuTarget} target\n *\n * @return {PopupMenuEntries}\n */\nAlignElementsMenuProvider.prototype.getPopupMenuEntries = function(target) {\n var entries = {};\n\n if (this._isAllowed(target)) {\n assign(entries, this._getEntries(target));\n }\n\n return entries;\n};\n\nAlignElementsMenuProvider.prototype._isAllowed = function(target) {\n return this._rules.allowed('elements.align', { elements: target });\n};\n\n/**\n * @param {PopupMenuTarget} target\n *\n * @return {PopupMenuEntries}\n */\nAlignElementsMenuProvider.prototype._getEntries = function(target) {\n var alignElements = this._alignElements,\n translate = this._translate,\n popupMenu = this._popupMenu;\n\n var entries = {};\n\n forEach(ALIGNMENT_OPTIONS, function(alignment) {\n entries[ 'align-elements-' + alignment ] = {\n group: 'align',\n title: translate('Align elements ' + alignment),\n className: 'bjs-align-elements-menu-entry',\n imageHtml: ICONS[ alignment ],\n action: function() {\n alignElements.trigger(target, alignment);\n popupMenu.close();\n }\n };\n });\n\n return entries;\n};\n" }, { "path": "lib/features/align-elements/BpmnAlignElements.js", "content": "import inherits from 'inherits-browser';\n\nimport RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';\nimport { getParents } from 'diagram-js/lib/util/Elements';\n\nimport {\n filter\n} from 'min-dash';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n */\n\n/**\n * Rule provider for aligning BPMN elements.\n *\n * @param {EventBus} eventBus\n */\nexport default function BpmnAlignElements(eventBus) {\n RuleProvider.call(this, eventBus);\n}\n\nBpmnAlignElements.$inject = [ 'eventBus' ];\n\ninherits(BpmnAlignElements, RuleProvider);\n\nBpmnAlignElements.prototype.init = function() {\n this.addRule('elements.align', function(context) {\n var elements = context.elements;\n\n // filter out elements which cannot be aligned\n var filteredElements = filter(elements, function(element) {\n return !(element.waypoints || element.host || element.labelTarget);\n });\n\n // filter out elements which are children of any of the selected elements\n filteredElements = getParents(filteredElements);\n\n if (filteredElements.length < 2) {\n return false;\n }\n\n return filteredElements;\n });\n};\n" }, { "path": "lib/features/align-elements/index.js", "content": "import AlignElementsModule from 'diagram-js/lib/features/align-elements';\nimport ContextPadModule from 'diagram-js/lib/features/context-pad';\nimport PopupMenuModule from 'diagram-js/lib/features/popup-menu';\n\nimport AlignElementsContextPadProvider from './AlignElementsContextPadProvider';\nimport AlignElementsMenuProvider from './AlignElementsMenuProvider';\nimport BpmnAlignElements from './BpmnAlignElements';\n\nexport default {\n __depends__: [\n AlignElementsModule,\n ContextPadModule,\n PopupMenuModule\n ],\n __init__: [\n 'alignElementsContextPadProvider',\n 'alignElementsMenuProvider',\n 'bpmnAlignElements'\n ],\n alignElementsContextPadProvider: [ 'type', AlignElementsContextPadProvider ],\n alignElementsMenuProvider: [ 'type', AlignElementsMenuProvider ],\n bpmnAlignElements: [ 'type', BpmnAlignElements ]\n};\n" }, { "path": "lib/features/append-preview/AppendPreview.js", "content": "import {\n assign,\n isNil\n} from 'min-dash';\n\nconst round = Math.round;\n\n/**\n * @typedef {import('diagram-js/lib/features/complex-preview/ComplexPreview').default} ComplexPreview\n * @typedef {import('diagram-js/lib/layout/ConnectionDocking').default} ConnectionDocking\n * @typedef {import('../modeling/ElementFactory').default} ElementFactory\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../modeling/BpmnLayouter').default} BpmnLayouter\n * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules\n *\n * @typedef {import('../../model/Types').Shape} Shape\n */\n\n/**\n * A preview for appending.\n *\n * @param {ComplexPreview} complexPreview\n * @param {ConnectionDocking} connectionDocking\n * @param {ElementFactory} elementFactory\n * @param {EventBus} eventBus\n * @param {BpmnLayouter} layouter\n * @param {Rules} rules\n */\nexport default function AppendPreview(complexPreview, connectionDocking, elementFactory, eventBus, layouter, rules) {\n this._complexPreview = complexPreview;\n this._connectionDocking = connectionDocking;\n this._elementFactory = elementFactory;\n this._eventBus = eventBus;\n this._layouter = layouter;\n this._rules = rules;\n}\n\n/**\n * Create a preview of appending a shape of the given type to the given source.\n *\n * @param {Shape} source\n * @param {string} type\n * @param {Partial} options\n */\nAppendPreview.prototype.create = function(source, type, options) {\n const complexPreview = this._complexPreview,\n connectionDocking = this._connectionDocking,\n elementFactory = this._elementFactory,\n eventBus = this._eventBus,\n layouter = this._layouter,\n rules = this._rules;\n\n const shape = elementFactory.createShape(assign({ type }, options));\n\n const position = eventBus.fire('autoPlace', {\n source,\n shape\n });\n\n if (!position) {\n return;\n }\n\n assign(shape, {\n x: position.x - round(shape.width / 2),\n y: position.y - round(shape.height / 2)\n });\n\n const connectionCreateAllowed = rules.allowed('connection.create', {\n source,\n target: shape,\n hints: {\n targetParent: source.parent\n }\n });\n\n let connection = null;\n\n if (connectionCreateAllowed) {\n connection = elementFactory.createConnection(connectionCreateAllowed);\n\n connection.waypoints = layouter.layoutConnection(connection, {\n source,\n target: shape\n });\n\n connection.waypoints = connectionDocking.getCroppedWaypoints(connection, source, shape);\n }\n\n complexPreview.create({\n created: [\n shape,\n connection\n ].filter((element) => !isNil(element))\n });\n};\n\nAppendPreview.prototype.cleanUp = function() {\n this._complexPreview.cleanUp();\n};\n\nAppendPreview.$inject = [\n 'complexPreview',\n 'connectionDocking',\n 'elementFactory',\n 'eventBus',\n 'layouter',\n 'rules'\n];" }, { "path": "lib/features/append-preview/index.js", "content": "import AutoPlaceModule from '../auto-place';\nimport ComplexPreviewModule from 'diagram-js/lib/features/complex-preview';\nimport ModelingModule from '../modeling';\n\nimport AppendPreview from './AppendPreview';\n\nexport default {\n __depends__: [\n AutoPlaceModule,\n ComplexPreviewModule,\n ModelingModule\n ],\n __init__: [ 'appendPreview' ],\n appendPreview: [ 'type', AppendPreview ]\n};\n" }, { "path": "lib/features/auto-place/BpmnAutoPlace.js", "content": "import { getNewShapePosition } from './BpmnAutoPlaceUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\n */\n\n/**\n * BPMN auto-place behavior.\n *\n * @param {EventBus} eventBus\n * @param {ElementRegistry} elementRegistry\n */\nexport default function AutoPlace(eventBus, elementRegistry) {\n eventBus.on('autoPlace', function(context) {\n var shape = context.shape,\n source = context.source;\n\n return getNewShapePosition(source, shape, elementRegistry);\n });\n}\n\nAutoPlace.$inject = [ 'eventBus', 'elementRegistry' ];" }, { "path": "lib/features/auto-place/BpmnAutoPlaceUtil.js", "content": "import { is } from '../../util/ModelUtil';\n\nimport {\n isAny,\n isDirectionHorizontal\n} from '../modeling/util/ModelingUtil';\n\nimport {\n getMid,\n asTRBL,\n getOrientation\n} from 'diagram-js/lib/layout/LayoutUtil';\n\nimport {\n findFreePosition,\n generateGetNextPosition,\n getConnectedDistance\n} from 'diagram-js/lib/features/auto-place/AutoPlaceUtil';\n\nimport { isConnection } from 'diagram-js/lib/util/ModelUtil';\n\n/**\n * @typedef {import('../../model/Types').Shape} Shape\n *\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\n * @typedef {import('diagram-js/lib/util/Types').Point} Point\n * @typedef {import('diagram-js/lib/util/Types').DirectionTRBL} DirectionTRBL\n */\n\n/**\n * Get the position for given new target relative to the source it will be\n * connected to.\n *\n * @param {Shape} source\n * @param {Shape} element\n * @param {ElementRegistry} elementRegistry\n *\n * @return {Point}\n */\nexport function getNewShapePosition(source, element, elementRegistry) {\n\n var placeHorizontally = isDirectionHorizontal(source, elementRegistry);\n\n if (is(element, 'bpmn:TextAnnotation')) {\n return getTextAnnotationPosition(source, element, placeHorizontally);\n }\n\n if (isAny(element, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {\n return getDataElementPosition(source, element, placeHorizontally);\n }\n\n if (is(element, 'bpmn:FlowNode')) {\n return getFlowNodePosition(source, element, placeHorizontally);\n }\n}\n\n/**\n * Get the position for given new flow node. Try placing the flow node right/bottom of\n * the source.\n *\n * @param {Shape} source\n * @param {Shape} element\n * @param {boolean} placeHorizontally Whether to place the new element horizontally\n *\n * @return {Point}\n */\nexport function getFlowNodePosition(source, element, placeHorizontally) {\n\n var sourceTrbl = asTRBL(source);\n var sourceMid = getMid(source);\n\n var placement = placeHorizontally ? {\n directionHint: 'e',\n minDistance: 80,\n baseOrientation: 'left',\n boundaryOrientation: 'top',\n start: 'top',\n end: 'bottom'\n } : {\n directionHint: 's',\n minDistance: 90,\n baseOrientation: 'top',\n boundaryOrientation: 'left',\n start: 'left',\n end: 'right'\n };\n\n var connectedDistance = getConnectedDistance(source, {\n filter: function(connection) {\n return is(connection, 'bpmn:SequenceFlow');\n },\n direction: placement.directionHint\n });\n\n var margin = 30,\n minDistance = placement.minDistance,\n orientation = placement.baseOrientation;\n\n if (is(source, 'bpmn:BoundaryEvent')) {\n orientation = getOrientation(source, source.host, -25);\n\n if (orientation.indexOf(placement.boundaryOrientation) !== -1) {\n margin *= -1;\n }\n }\n\n var position = placeHorizontally ? {\n x: sourceTrbl.right + connectedDistance + element.width / 2,\n y: sourceMid.y + getDistance(orientation, minDistance, placement)\n } : {\n x: sourceMid.x + getDistance(orientation, minDistance, placement),\n y: sourceTrbl.bottom + connectedDistance + element.height / 2\n };\n\n var nextPosition = {\n margin: margin,\n minDistance: minDistance\n };\n\n var nextPositionDirection = placeHorizontally ? {\n y: nextPosition\n } : {\n x: nextPosition\n };\n\n return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));\n}\n\n/**\n * @param {DirectionTRBL} orientation\n * @param {number} minDistance\n * @param {{ start: DirectionTRBL, end: DirectionTRBL }} placement\n *\n * @return {number}\n */\nfunction getDistance(orientation, minDistance, placement) {\n if (orientation.includes(placement.start)) {\n return -1 * minDistance;\n } else if (orientation.includes(placement.end)) {\n return minDistance;\n } else {\n return 0;\n }\n}\n\n\n/**\n * Get the position for given text annotation. Try placing the text annotation\n * top-right of the source (bottom-right in vertical layouts).\n *\n * @param {Shape} source\n * @param {Shape} element\n * @param {boolean} placeHorizontally Whether to place the new element horizontally\n *\n * @return {Point}\n */\nexport function getTextAnnotationPosition(source, element, placeHorizontally) {\n\n var sourceTrbl = asTRBL(source);\n\n var position = placeHorizontally ? {\n x: sourceTrbl.right + element.width / 2,\n y: sourceTrbl.top - 50 - element.height / 2\n } : {\n x: sourceTrbl.right + 50 + element.width / 2,\n y: sourceTrbl.bottom + element.height / 2\n };\n\n if (isConnection(source)) {\n position = getMid(source);\n if (placeHorizontally) {\n position.x += 100;\n position.y -= 50;\n } else {\n position.x += 100;\n position.y += 50;\n }\n }\n\n var nextPosition = {\n margin: placeHorizontally ? -30 : 30,\n minDistance: 20\n };\n var nextPositionDirection = placeHorizontally ? {\n y: nextPosition\n } : {\n x: nextPosition\n };\n\n return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));\n}\n\n\n/**\n * Get the position for given new data element. Try placing the data element\n * bottom-right of the source (bottom-left in vertical layouts).\n *\n * @param {Shape} source\n * @param {Shape} element\n * @param {boolean} placeHorizontally Whether to place the new element horizontally\n *\n * @return {Point}\n */\nexport function getDataElementPosition(source, element, placeHorizontally) {\n\n var sourceTrbl = asTRBL(source);\n\n var position = placeHorizontally ? {\n x: sourceTrbl.right - 10 + element.width / 2,\n y: sourceTrbl.bottom + 40 + element.width / 2\n } : {\n x: sourceTrbl.left - 40 - element.width / 2,\n y: sourceTrbl.bottom - 10 + element.height / 2\n };\n\n var nextPosition = {\n margin: 30,\n minDistance: 30\n };\n var nextPositionDirection = placeHorizontally ? {\n x: nextPosition\n } : {\n y: nextPosition\n };\n\n return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));\n}" }, { "path": "lib/features/auto-place/index.js", "content": "import AutoPlaceModule from 'diagram-js/lib/features/auto-place';\n\nimport BpmnAutoPlace from './BpmnAutoPlace';\n\nexport default {\n __depends__: [ AutoPlaceModule ],\n __init__: [ 'bpmnAutoPlace' ],\n bpmnAutoPlace: [ 'type', BpmnAutoPlace ]\n};" }, { "path": "lib/features/auto-resize/BpmnAutoResize.js", "content": "import AutoResize from 'diagram-js/lib/features/auto-resize/AutoResize';\n\nimport inherits from 'inherits-browser';\n\nimport { is } from '../../util/ModelUtil';\n\n/**\n * @typedef {import('didi').Injector} Injector\n *\n * @typedef {import('../../model/Types').Shape} Shape\n *\n * @typedef {import('diagram-js/lib/util/Types').Rect} Rect\n */\n\n/**\n * BPMN-specific resize behavior.\n *\n * @param {Injector} injector\n */\nexport default function BpmnAutoResize(injector) {\n\n injector.invoke(AutoResize, this);\n}\n\nBpmnAutoResize.$inject = [\n 'injector'\n];\n\ninherits(BpmnAutoResize, AutoResize);\n\n/**\n * Perform BPMN-specific resizing of participants.\n *\n * @param {Shape} target\n * @param {Rect} newBounds\n * @param {Object} [hints]\n * @param {string} [hints.autoResize]\n */\nBpmnAutoResize.prototype.resize = function(target, newBounds, hints) {\n\n if (is(target, 'bpmn:Participant')) {\n this._modeling.resizeLane(target, newBounds, null, hints);\n } else {\n this._modeling.resizeShape(target, newBounds, null, hints);\n }\n};" }, { "path": "lib/features/auto-resize/BpmnAutoResizeProvider.js", "content": "import { is } from '../../util/ModelUtil';\n\nimport { isLabel } from '../../util/LabelUtil';\n\nimport inherits from 'inherits-browser';\n\nimport { forEach } from 'min-dash';\n\nimport AutoResizeProvider from 'diagram-js/lib/features/auto-resize/AutoResizeProvider';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../modeling/Modeling').default} Modeling\n *\n * @typedef {import('../../model/Types').Shape} Shape\n */\n\n/**\n * BPMN-specific provider for automatic resizung.\n *\n * @param {EventBus} eventBus\n * @param {Modeling} modeling\n */\nexport default function BpmnAutoResizeProvider(eventBus, modeling) {\n AutoResizeProvider.call(this, eventBus);\n\n this._modeling = modeling;\n}\n\ninherits(BpmnAutoResizeProvider, AutoResizeProvider);\n\nBpmnAutoResizeProvider.$inject = [\n 'eventBus',\n 'modeling'\n];\n\n\n/**\n * BPMN-specific check whether given elements can be resized.\n *\n * @param {Shape[]} elements\n * @param {Shape} target\n *\n * @return {boolean}\n */\nBpmnAutoResizeProvider.prototype.canResize = function(elements, target) {\n\n // do not resize plane elements:\n // root elements, collapsed sub-processes\n if (is(target.di, 'bpmndi:BPMNPlane')) {\n return false;\n }\n\n if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {\n return false;\n }\n\n var canResize = true;\n\n forEach(elements, function(element) {\n\n if (is(element, 'bpmn:Lane') || isLabel(element)) {\n canResize = false;\n return;\n }\n });\n\n return canResize;\n};\n" }, { "path": "lib/features/auto-resize/index.js", "content": "import BpmnAutoResize from './BpmnAutoResize';\nimport BpmnAutoResizeProvider from './BpmnAutoResizeProvider';\n\n\nexport default {\n __init__: [\n 'bpmnAutoResize',\n 'bpmnAutoResizeProvider'\n ],\n bpmnAutoResize: [ 'type', BpmnAutoResize ],\n bpmnAutoResizeProvider: [ 'type', BpmnAutoResizeProvider ]\n};\n" }, { "path": "lib/features/context-pad/ContextPadProvider.js", "content": "import {\n assign,\n forEach,\n isArray,\n every\n} from 'min-dash';\n\nimport {\n is\n} from '../../util/ModelUtil';\n\nimport {\n isExpanded,\n isHorizontal,\n isEventSubProcess\n} from '../../util/DiUtil';\n\nimport {\n isAny\n} from '../modeling/util/ModelingUtil';\n\nimport {\n getChildLanes\n} from '../modeling/util/LaneUtil';\n\nimport {\n hasPrimaryModifier\n} from 'diagram-js/lib/util/Mouse';\n\n/**\n * @typedef {import('didi').Injector} Injector\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPad').default} ContextPad\n * @typedef {import('../modeling/Modeling').default} Modeling\n * @typedef {import('../modeling/ElementFactory').default} ElementFactory\n * @typedef {import('../append-preview/AppendPreview').default} AppendPreview\n * @typedef {import('diagram-js/lib/features/connect/Connect').default} Connect\n * @typedef {import('diagram-js/lib/features/create/Create').default} Create\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu\n * @typedef {import('diagram-js/lib/features/canvas/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules\n * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').ModdleElement} ModdleElement\n *\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').default} BaseContextPadProvider\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').ContextPadEntries} ContextPadEntries\n * @typedef {import('diagram-js/lib/features/context-pad/ContextPadProvider').ContextPadEntry} ContextPadEntry\n *\n * @typedef { { autoPlace?: boolean; } } ContextPadConfig\n */\n\n/**\n * BPMN-specific context pad provider.\n *\n * @implements {BaseContextPadProvider}\n *\n * @param {ContextPadConfig} config\n * @param {Injector} injector\n * @param {EventBus} eventBus\n * @param {ContextPad} contextPad\n * @param {Modeling} modeling\n * @param {ElementFactory} elementFactory\n * @param {Connect} connect\n * @param {Create} create\n * @param {PopupMenu} popupMenu\n * @param {Canvas} canvas\n * @param {Rules} rules\n * @param {Translate} translate\n * @param {AppendPreview} appendPreview\n */\nexport default function ContextPadProvider(\n config, injector, eventBus,\n contextPad, modeling, elementFactory,\n connect, create, popupMenu,\n canvas, rules, translate, appendPreview) {\n\n config = config || {};\n\n contextPad.registerProvider(this);\n\n this._contextPad = contextPad;\n\n this._modeling = modeling;\n\n this._elementFactory = elementFactory;\n this._connect = connect;\n this._create = create;\n this._popupMenu = popupMenu;\n this._canvas = canvas;\n this._rules = rules;\n this._translate = translate;\n this._eventBus = eventBus;\n this._appendPreview = appendPreview;\n\n if (config.autoPlace !== false) {\n this._autoPlace = injector.get('autoPlace', false);\n }\n\n eventBus.on('create.end', 250, function(event) {\n var context = event.context,\n shape = context.shape;\n\n if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {\n return;\n }\n\n var entries = contextPad.getEntries(shape);\n\n if (entries.replace) {\n entries.replace.action.click(event, shape);\n }\n });\n\n eventBus.on('contextPad.close', function() {\n appendPreview.cleanUp();\n });\n}\n\nContextPadProvider.$inject = [\n 'config.contextPad',\n 'injector',\n 'eventBus',\n 'contextPad',\n 'modeling',\n 'elementFactory',\n 'connect',\n 'create',\n 'popupMenu',\n 'canvas',\n 'rules',\n 'translate',\n 'appendPreview'\n];\n\n/**\n * @param {Element[]} elements\n *\n * @return {ContextPadEntries}\n */\nContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {\n var modeling = this._modeling;\n\n var actions = {};\n\n if (this._isDeleteAllowed(elements)) {\n assign(actions, {\n 'delete': {\n group: 'edit',\n className: 'bpmn-icon-trash',\n title: this._translate('Delete'),\n action: {\n click: function(event, elements) {\n modeling.removeElements(elements.slice());\n }\n }\n }\n });\n }\n\n return actions;\n};\n\n/**\n * @param {Element[]} elements\n *\n * @return {boolean}\n */\nContextPadProvider.prototype._isDeleteAllowed = function(elements) {\n\n var baseAllowed = this._rules.allowed('elements.delete', {\n elements: elements\n });\n\n if (isArray(baseAllowed)) {\n return every(elements, el => baseAllowed.includes(el));\n }\n\n return baseAllowed;\n};\n\n/**\n * @param {Element} element\n *\n * @return {ContextPadEntries}\n */\nContextPadProvider.prototype.getContextPadEntries = function(element) {\n var contextPad = this._contextPad,\n modeling = this._modeling,\n elementFactory = this._elementFactory,\n connect = this._connect,\n create = this._create,\n popupMenu = this._popupMenu,\n autoPlace = this._autoPlace,\n translate = this._translate,\n appendPreview = this._appendPreview;\n\n var actions = {};\n\n if (element.type === 'label') {\n if (this._isDeleteAllowed([ element ])) {\n assign(actions, deleteAction());\n }\n\n return actions;\n }\n\n var businessObject = element.businessObject;\n\n function startConnect(event, element) {\n connect.start(event, element);\n }\n\n function removeElement(e, element) {\n modeling.removeElements([ element ]);\n }\n\n function deleteAction() {\n return {\n 'delete': {\n group: 'edit',\n className: 'bpmn-icon-trash',\n title: translate('Delete'),\n action: {\n click: removeElement\n }\n }\n };\n }\n\n function getReplaceMenuPosition(element) {\n\n var Y_OFFSET = 5;\n\n var pad = contextPad.getPad(element).html;\n\n var padRect = pad.getBoundingClientRect();\n\n var pos = {\n x: padRect.left,\n y: padRect.bottom + Y_OFFSET\n };\n\n return pos;\n }\n\n /**\n * Create an append action.\n *\n * @param {string} type\n * @param {string} className\n * @param {string} title\n * @param {Object} [options]\n *\n * @return {ContextPadEntry}\n */\n function appendAction(type, className, title, options) {\n\n function appendStart(event, element) {\n\n var shape = elementFactory.createShape(assign({ type: type }, options));\n\n create.start(event, shape, {\n source: element\n });\n }\n\n var append = autoPlace ? function(_, element) {\n var shape = elementFactory.createShape(assign({ type: type }, options));\n\n autoPlace.append(element, shape);\n } : appendStart;\n\n var previewAppend = autoPlace ? function(_, element) {\n\n // mouseover\n appendPreview.create(element, type, options);\n\n return () => {\n\n // mouseout\n appendPreview.cleanUp();\n };\n } : null;\n\n return {\n group: 'model',\n className: className,\n title: title,\n action: {\n dragstart: appendStart,\n click: append,\n hover: previewAppend\n }\n };\n }\n\n function splitLaneHandler(count) {\n\n return function(_, element) {\n\n // actual split\n modeling.splitLane(element, count);\n\n // refresh context pad after split to\n // get rid of split icons\n contextPad.open(element, true);\n };\n }\n\n\n if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {\n\n var childLanes = getChildLanes(element);\n\n assign(actions, {\n 'lane-insert-above': {\n group: 'lane-insert-above',\n className: 'bpmn-icon-lane-insert-above',\n title: translate('Add lane above'),\n action: {\n click: function(event, element) {\n modeling.addLane(element, 'top');\n }\n }\n }\n });\n\n if (childLanes.length < 2) {\n\n if (isHorizontal(element) ? element.height >= 120 : element.width >= 120) {\n assign(actions, {\n 'lane-divide-two': {\n group: 'lane-divide',\n className: 'bpmn-icon-lane-divide-two',\n title: translate('Divide into two lanes'),\n action: {\n click: splitLaneHandler(2)\n }\n }\n });\n }\n\n if (isHorizontal(element) ? element.height >= 180 : element.width >= 180) {\n assign(actions, {\n 'lane-divide-three': {\n group: 'lane-divide',\n className: 'bpmn-icon-lane-divide-three',\n title: translate('Divide into three lanes'),\n action: {\n click: splitLaneHandler(3)\n }\n }\n });\n }\n }\n\n assign(actions, {\n 'lane-insert-below': {\n group: 'lane-insert-below',\n className: 'bpmn-icon-lane-insert-below',\n title: translate('Add lane below'),\n action: {\n click: function(event, element) {\n modeling.addLane(element, 'bottom');\n }\n }\n }\n });\n\n }\n\n if (is(businessObject, 'bpmn:FlowNode')) {\n\n if (is(businessObject, 'bpmn:EventBasedGateway')) {\n\n assign(actions, {\n 'append.receive-task': appendAction(\n 'bpmn:ReceiveTask',\n 'bpmn-icon-receive-task',\n translate('Append receive task')\n ),\n 'append.message-intermediate-event': appendAction(\n 'bpmn:IntermediateCatchEvent',\n 'bpmn-icon-intermediate-event-catch-message',\n translate('Append message intermediate catch event'),\n { eventDefinitionType: 'bpmn:MessageEventDefinition' }\n ),\n 'append.timer-intermediate-event': appendAction(\n 'bpmn:IntermediateCatchEvent',\n 'bpmn-icon-intermediate-event-catch-timer',\n translate('Append timer intermediate catch event'),\n { eventDefinitionType: 'bpmn:TimerEventDefinition' }\n ),\n 'append.condition-intermediate-event': appendAction(\n 'bpmn:IntermediateCatchEvent',\n 'bpmn-icon-intermediate-event-catch-condition',\n translate('Append conditional intermediate catch event'),\n { eventDefinitionType: 'bpmn:ConditionalEventDefinition' }\n ),\n 'append.signal-intermediate-event': appendAction(\n 'bpmn:IntermediateCatchEvent',\n 'bpmn-icon-intermediate-event-catch-signal',\n translate('Append signal intermediate catch event'),\n { eventDefinitionType: 'bpmn:SignalEventDefinition' }\n )\n });\n } else if (isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')) {\n\n assign(actions, {\n 'append.compensation-activity':\n appendAction(\n 'bpmn:Task',\n 'bpmn-icon-task',\n translate('Append compensation activity'),\n {\n isForCompensation: true\n }\n )\n });\n } else if (!is(businessObject, 'bpmn:EndEvent') &&\n !businessObject.isForCompensation &&\n !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&\n !isEventSubProcess(businessObject)) {\n\n assign(actions, {\n 'append.end-event': appendAction(\n 'bpmn:EndEvent',\n 'bpmn-icon-end-event-none',\n translate('Append end event')\n ),\n 'append.gateway': appendAction(\n 'bpmn:ExclusiveGateway',\n 'bpmn-icon-gateway-none',\n translate('Append gateway')\n ),\n 'append.append-task': appendAction(\n 'bpmn:Task',\n 'bpmn-icon-task',\n translate('Append task')\n ),\n 'append.intermediate-event': appendAction(\n 'bpmn:IntermediateThrowEvent',\n 'bpmn-icon-intermediate-event-none',\n translate('Append intermediate/boundary event')\n )\n });\n }\n }\n\n if (!popupMenu.isEmpty(element, 'bpmn-replace')) {\n\n // Replace menu entry\n assign(actions, {\n 'replace': {\n group: 'edit',\n className: 'bpmn-icon-screw-wrench',\n title: translate('Change element'),\n action: {\n click: function(event, element) {\n\n var position = assign(getReplaceMenuPosition(element), {\n cursor: { x: event.x, y: event.y }\n });\n\n popupMenu.open(element, 'bpmn-replace', position, {\n title: translate('Change element'),\n width: 300,\n search: true\n });\n }\n }\n }\n });\n }\n\n if (is(businessObject, 'bpmn:SequenceFlow')) {\n assign(actions, {\n 'append.text-annotation': appendAction(\n 'bpmn:TextAnnotation',\n 'bpmn-icon-text-annotation',\n translate('Add text annotation')\n )\n });\n }\n\n if (is(businessObject, 'bpmn:MessageFlow')) {\n assign(actions, {\n 'append.text-annotation': appendAction(\n 'bpmn:TextAnnotation',\n 'bpmn-icon-text-annotation',\n translate('Add text annotation')\n )\n });\n }\n\n if (\n isAny(businessObject, [\n 'bpmn:FlowNode',\n 'bpmn:InteractionNode',\n 'bpmn:DataObjectReference',\n 'bpmn:DataStoreReference',\n ])\n ) {\n assign(actions, {\n 'append.text-annotation': appendAction(\n 'bpmn:TextAnnotation',\n 'bpmn-icon-text-annotation',\n translate('Add text annotation')\n ),\n 'connect': {\n group: 'connect',\n className: 'bpmn-icon-connection-multi',\n title: translate('Connect to other element'),\n action: {\n click: startConnect,\n dragstart: startConnect,\n },\n },\n });\n }\n\n if (is(businessObject, 'bpmn:TextAnnotation')) {\n assign(actions, {\n 'connect': {\n group: 'connect',\n className: 'bpmn-icon-connection-multi',\n title: translate('Connect using association'),\n action: {\n click: startConnect,\n dragstart: startConnect,\n },\n },\n });\n }\n\n if (isAny(businessObject, [ 'bpmn:DataObjectReference', 'bpmn:DataStoreReference' ])) {\n assign(actions, {\n 'connect': {\n group: 'connect',\n className: 'bpmn-icon-connection-multi',\n title: translate('Connect using data input association'),\n action: {\n click: startConnect,\n dragstart: startConnect\n }\n }\n });\n }\n\n if (is(businessObject, 'bpmn:Group')) {\n assign(actions, {\n 'append.text-annotation': appendAction(\n 'bpmn:TextAnnotation',\n 'bpmn-icon-text-annotation',\n translate('Add text annotation')\n )\n });\n }\n\n if (this._isDeleteAllowed([ element ])) {\n assign(actions, deleteAction());\n }\n\n return actions;\n};\n\n\n// helpers /////////\n\n/**\n * @param {ModdleElement} businessObject\n * @param {string} type\n * @param {string} eventDefinitionType\n *\n * @return {boolean}\n */\nfunction isEventType(businessObject, type, eventDefinitionType) {\n\n var isType = businessObject.$instanceOf(type);\n var isDefinition = false;\n\n var definitions = businessObject.eventDefinitions || [];\n forEach(definitions, function(def) {\n if (def.$type === eventDefinitionType) {\n isDefinition = true;\n }\n });\n\n return isType && isDefinition;\n}\n" }, { "path": "lib/features/context-pad/index.js", "content": "import AppendPreviewModule from '../append-preview';\nimport DirectEditingModule from 'diagram-js-direct-editing';\nimport ContextPadModule from 'diagram-js/lib/features/context-pad';\nimport SelectionModule from 'diagram-js/lib/features/selection';\nimport ConnectModule from 'diagram-js/lib/features/connect';\nimport CreateModule from 'diagram-js/lib/features/create';\nimport PopupMenuModule from '../popup-menu';\n\nimport ContextPadProvider from './ContextPadProvider';\n\nexport default {\n __depends__: [\n AppendPreviewModule,\n DirectEditingModule,\n ContextPadModule,\n SelectionModule,\n ConnectModule,\n CreateModule,\n PopupMenuModule\n ],\n __init__: [ 'contextPadProvider' ],\n contextPadProvider: [ 'type', ContextPadProvider ]\n};" }, { "path": "lib/features/copy-paste/BpmnCopyPaste.js", "content": "import {\n getBusinessObject,\n getDi,\n is\n} from '../../util/ModelUtil';\n\nimport { collectElementsAnnotations } from '../../util/AnnotationUtil';\n\nimport {\n forEach,\n isArray,\n isUndefined,\n omit,\n reduce\n} from 'min-dash';\n\nimport { isLabel } from '../../util/LabelUtil';\n\n/**\n * @typedef {import('../modeling/BpmnFactory').default} BpmnFactory\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('./ModdleCopy').default} ModdleCopy\n */\n\nfunction copyProperties(source, target, properties) {\n if (!isArray(properties)) {\n properties = [ properties ];\n }\n\n forEach(properties, function(property) {\n if (!isUndefined(source[property])) {\n target[property] = source[property];\n }\n });\n}\n\nvar LOW_PRIORITY = 750;\n\n/**\n * BPMN-specific copy & paste.\n *\n * @param {BpmnFactory} bpmnFactory\n * @param {EventBus} eventBus\n * @param {ModdleCopy} moddleCopy\n */\nexport default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {\n\n function copy(bo, clone) {\n var targetBo = bpmnFactory.create(bo.$type);\n\n return moddleCopy.copyElement(bo, targetBo, null, clone);\n }\n\n eventBus.on('copyPaste.copyElement', LOW_PRIORITY, function(context) {\n var descriptor = context.descriptor,\n element = context.element,\n businessObject = getBusinessObject(element);\n\n // do not copy business object + di for labels;\n // will be pulled from the referenced label target\n if (isLabel(element)) {\n return descriptor;\n }\n\n var businessObjectCopy = descriptor.businessObject = copy(businessObject, true);\n var diCopy = descriptor.di = copy(getDi(element), true);\n diCopy.bpmnElement = businessObjectCopy;\n\n copyProperties(businessObjectCopy, descriptor, 'name');\n copyProperties(diCopy, descriptor, 'isExpanded');\n\n // default sequence flow\n if (businessObject.default) {\n descriptor.default = businessObject.default.id;\n }\n });\n\n var referencesKey = '-bpmn-js-refs';\n\n function getReferences(cache) {\n return (cache[referencesKey] = cache[referencesKey] || {});\n }\n\n function setReferences(cache, references) {\n cache[referencesKey] = references;\n }\n\n function resolveReferences(descriptor, cache, references) {\n var businessObject = getBusinessObject(descriptor);\n\n // default sequence flows\n if (descriptor.default) {\n\n // relationship cannot be resolved immediately\n references[ descriptor.default ] = {\n element: businessObject,\n property: 'default'\n };\n }\n\n // boundary events\n if (descriptor.host) {\n\n // relationship can be resolved immediately\n getBusinessObject(descriptor).attachedToRef = getBusinessObject(cache[ descriptor.host ]);\n }\n\n return omit(references, reduce(references, function(array, reference, key) {\n var element = reference.element,\n property = reference.property;\n\n if (key === descriptor.id) {\n element.set(property, businessObject);\n\n array.push(descriptor.id);\n }\n\n return array;\n }, []));\n }\n\n eventBus.on('copyPaste.pasteElement', function(context) {\n var cache = context.cache,\n descriptor = context.descriptor,\n businessObject = descriptor.businessObject,\n di = descriptor.di;\n\n // wire existing di + businessObject for external label\n if (isLabel(descriptor)) {\n descriptor.businessObject = getBusinessObject(cache[ descriptor.labelTarget ]);\n descriptor.di = getDi(cache[ descriptor.labelTarget ]);\n\n return;\n }\n\n businessObject = descriptor.businessObject = copy(businessObject);\n\n di = descriptor.di = copy(di);\n di.bpmnElement = businessObject;\n\n copyProperties(descriptor, businessObject, [\n 'isExpanded',\n 'name'\n ]);\n\n descriptor.type = businessObject.$type;\n });\n\n // copy + paste processRef with participant\n\n eventBus.on('copyPaste.copyElement', LOW_PRIORITY, function(context) {\n var descriptor = context.descriptor,\n element = context.element;\n\n if (!is(element, 'bpmn:Participant')) {\n return;\n }\n\n var participantBo = getBusinessObject(element);\n\n if (participantBo.processRef) {\n descriptor.processRef = copy(participantBo.processRef, true);\n }\n });\n\n eventBus.on('copyPaste.pasteElement', function(context) {\n var descriptor = context.descriptor,\n processRef = descriptor.processRef;\n\n if (processRef) {\n descriptor.processRef = copy(processRef);\n }\n });\n\n eventBus.on('copyPaste.createTree', function(context) {\n var element = context.element,\n children = context.children;\n\n if (!is(element, 'bpmn:SubProcess')) {\n return;\n }\n\n // add TextAnnotations to copy the closure,\n // since by default they are children of a global process, not subprocess\n forEach(collectElementsAnnotations(children), (entry) => {\n children.push(entry.annotation);\n });\n });\n\n // resolve references\n\n eventBus.on('copyPaste.pasteElement', LOW_PRIORITY, function(context) {\n var cache = context.cache,\n descriptor = context.descriptor;\n\n // resolve references e.g. default sequence flow\n setReferences(\n cache,\n resolveReferences(descriptor, cache, getReferences(cache))\n );\n });\n\n}\n\n\nBpmnCopyPaste.$inject = [\n 'bpmnFactory',\n 'eventBus',\n 'moddleCopy'\n];" }, { "path": "lib/features/copy-paste/ModdleCopy.js", "content": "import {\n find,\n forEach,\n has,\n isArray,\n isDefined,\n isObject,\n matchPattern,\n reduce,\n sortBy\n} from 'min-dash';\n\nimport { is } from '../../util/ModelUtil';\n\nconst DISALLOWED_PROPERTIES = [\n 'artifacts',\n 'dataInputAssociations',\n 'dataOutputAssociations',\n 'default',\n 'flowElements',\n 'lanes',\n 'incoming',\n 'outgoing',\n 'categoryValue'\n];\n\nconst ALLOWED_REFERENCES = [\n 'errorRef',\n 'escalationRef',\n 'messageRef',\n 'signalRef',\n 'dataObjectRef'\n];\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../modeling/BpmnFactory').default} BpmnFactory\n * @typedef {import('../../model/Types').Moddle} Moddle\n *\n * @typedef {import('../../model/Types').ModdleElement} ModdleElement\n */\n\n/**\n * Utility for copying model properties from source element to target element.\n *\n * @param {EventBus} eventBus\n * @param {BpmnFactory} bpmnFactory\n * @param {Moddle} moddle\n */\nexport default function ModdleCopy(eventBus, bpmnFactory, moddle) {\n this._bpmnFactory = bpmnFactory;\n this._eventBus = eventBus;\n this._moddle = moddle;\n\n // copy extension elements last\n eventBus.on('moddleCopy.canCopyProperties', (context) => {\n const { propertyNames } = context;\n\n if (!propertyNames || !propertyNames.length) {\n return;\n }\n\n return sortBy(propertyNames, (propertyName) => {\n return propertyName === 'extensionElements';\n });\n });\n\n // default check whether property can be copied\n eventBus.on('moddleCopy.canCopyProperty', (context) => {\n const {\n parent,\n property,\n propertyName\n } = context;\n\n const parentDescriptor = isObject(parent) && parent.$descriptor;\n\n if (propertyName && ALLOWED_REFERENCES.includes(propertyName)) {\n\n // allow copying reference\n return property;\n }\n\n if (propertyName && DISALLOWED_PROPERTIES.includes(propertyName)) {\n\n // disallow copying property\n return false;\n }\n\n if (propertyName &&\n parentDescriptor &&\n !find(parentDescriptor.properties, matchPattern({ name: propertyName }))) {\n\n // disallow copying property\n return false;\n }\n });\n\n // do NOT allow to copy empty extension elements\n eventBus.on('moddleCopy.canSetCopiedProperty', (context) => {\n const { property } = context;\n\n if (is(property, 'bpmn:ExtensionElements') && (!property.values || !property.values.length)) {\n\n // disallow setting copied property\n return false;\n }\n });\n}\n\nModdleCopy.$inject = [\n 'eventBus',\n 'bpmnFactory',\n 'moddle'\n];\n\n/**\n * Copy model properties of source element to target element.\n *\n * @param {ModdleElement} sourceElement\n * @param {ModdleElement} targetElement\n * @param {string[]} [propertyNames]\n * @param {boolean} [clone=false]\n *\n * @return {ModdleElement}\n */\nModdleCopy.prototype.copyElement = function(sourceElement, targetElement, propertyNames, clone = false) {\n if (propertyNames && !isArray(propertyNames)) {\n propertyNames = [ propertyNames ];\n }\n\n propertyNames = propertyNames || getPropertyNames(sourceElement.$descriptor);\n\n const canCopyProperties = this._eventBus.fire('moddleCopy.canCopyProperties', {\n propertyNames: propertyNames,\n sourceElement: sourceElement,\n targetElement: targetElement,\n clone: clone\n });\n\n if (canCopyProperties === false) {\n return targetElement;\n }\n\n if (isArray(canCopyProperties)) {\n propertyNames = canCopyProperties;\n }\n\n // copy properties\n forEach(propertyNames, (propertyName) => {\n let sourceProperty;\n\n if (has(sourceElement, propertyName)) {\n sourceProperty = sourceElement.get(propertyName);\n }\n\n const copiedProperty = this.copyProperty(sourceProperty, targetElement, propertyName, clone);\n\n if (!isDefined(copiedProperty)) {\n return;\n }\n\n const canSetProperty = this._eventBus.fire('moddleCopy.canSetCopiedProperty', {\n parent: targetElement,\n property: copiedProperty,\n propertyName: propertyName\n });\n\n if (canSetProperty === false) {\n return;\n }\n\n // TODO(nikku): unclaim old IDs if ID property is copied over\n // this._moddle.getPropertyDescriptor(parent, propertyName)\n targetElement.set(propertyName, copiedProperty);\n });\n\n return targetElement;\n};\n\n/**\n * Copy model property.\n *\n * @param {any} property\n * @param {ModdleElement} parent\n * @param {string} propertyName\n * @param {boolean} [clone=false]\n *\n * @return {any}\n */\nModdleCopy.prototype.copyProperty = function(property, parent, propertyName, clone = false) {\n\n // allow others to copy property\n let copiedProperty = this._eventBus.fire('moddleCopy.canCopyProperty', {\n parent: parent,\n property: property,\n propertyName: propertyName,\n clone: clone\n });\n\n // return if copying is NOT allowed\n if (copiedProperty === false) {\n return;\n }\n\n if (copiedProperty) {\n if (isObject(copiedProperty) && copiedProperty.$type && !copiedProperty.$parent) {\n copiedProperty.$parent = parent;\n }\n\n return copiedProperty;\n }\n\n const propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);\n\n // do NOT copy references\n if (propertyDescriptor.isReference) {\n return;\n }\n\n // copy id\n if (propertyDescriptor.isId) {\n return property && this._copyId(property, parent, clone);\n }\n\n // copy arrays\n if (isArray(property)) {\n return reduce(property, (childProperties, childProperty) => {\n\n // recursion\n const copiedProperty = this.copyProperty(childProperty, parent, propertyName, clone);\n\n // copying might NOT be allowed\n if (copiedProperty) {\n return childProperties.concat(copiedProperty);\n }\n\n return childProperties;\n }, []);\n }\n\n // copy model elements\n if (isObject(property) && property.$type) {\n if (this._moddle.getElementDescriptor(property).isGeneric) {\n return;\n }\n\n copiedProperty = this._bpmnFactory.create(property.$type);\n\n copiedProperty.$parent = parent;\n\n // recursion\n copiedProperty = this.copyElement(property, copiedProperty, null, clone);\n\n return copiedProperty;\n }\n\n // copy primitive properties\n return property;\n};\n\nModdleCopy.prototype._copyId = function(id, element, clone = false) {\n if (clone) {\n return id;\n }\n\n // disallow if already taken\n if (this._moddle.ids.assigned(id)) {\n return;\n } else {\n\n this._moddle.ids.claim(id, element);\n return id;\n }\n};\n\n// helpers //////////\n\nexport function getPropertyNames(descriptor, keepDefaultProperties) {\n return reduce(descriptor.properties, (properties, property) => {\n\n if (keepDefaultProperties && property.default) {\n return properties;\n }\n\n return properties.concat(property.name);\n }, []);\n}" }, { "path": "lib/features/copy-paste/index.js", "content": "import CopyPasteModule from 'diagram-js/lib/features/copy-paste';\n\nimport BpmnCopyPaste from './BpmnCopyPaste';\nimport ModdleCopy from './ModdleCopy';\n\nexport default {\n __depends__: [\n CopyPasteModule\n ],\n __init__: [ 'bpmnCopyPaste', 'moddleCopy' ],\n bpmnCopyPaste: [ 'type', BpmnCopyPaste ],\n moddleCopy: [ 'type', ModdleCopy ]\n};\n" }, { "path": "lib/features/di-ordering/BpmnDiOrdering.js", "content": "import { getDi } from '../../util/ModelUtil';\n\nimport {\n filter,\n forEach,\n map\n} from 'min-dash';\n\nimport { selfAndAllChildren } from 'diagram-js/lib/util/Elements';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n */\n\nvar HIGH_PRIORITY = 2000;\n\n/**\n * @param {EventBus} eventBus\n * @param {Canvas} canvas\n */\nexport default function BpmnDiOrdering(eventBus, canvas) {\n\n eventBus.on('saveXML.start', HIGH_PRIORITY, orderDi);\n\n function orderDi() {\n var rootElements = canvas.getRootElements();\n\n forEach(rootElements, function(root) {\n var rootDi = getDi(root),\n elements,\n diElements;\n\n elements = selfAndAllChildren([ root ], false);\n\n // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane\n elements = filter(elements, function(element) {\n return element !== root && !element.labelTarget;\n });\n\n diElements = map(elements, getDi);\n\n rootDi.set('planeElement', diElements);\n });\n }\n}\n\nBpmnDiOrdering.$inject = [ 'eventBus', 'canvas' ];\n" }, { "path": "lib/features/di-ordering/index.js", "content": "import BpmnDiOrdering from '../di-ordering/BpmnDiOrdering';\n\nexport default {\n __init__: [\n 'bpmnDiOrdering'\n ],\n bpmnDiOrdering: [ 'type', BpmnDiOrdering ]\n};" }, { "path": "lib/features/distribute-elements/BpmnDistributeElements.js", "content": "import inherits from 'inherits-browser';\n\nimport RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';\nimport { getParents } from 'diagram-js/lib/util/Elements';\n\nimport {\n filter\n} from 'min-dash';\n\nimport {\n isAny\n} from '../modeling/util/ModelingUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n */\n\n/**\n * Registers element exclude filters for elements that currently do not support\n * distribution.\n *\n * @param {EventBus} eventBus\n */\nexport default function BpmnDistributeElements(eventBus) {\n RuleProvider.call(this, eventBus);\n}\n\nBpmnDistributeElements.$inject = [ 'eventBus' ];\n\ninherits(BpmnDistributeElements, RuleProvider);\n\nBpmnDistributeElements.prototype.init = function() {\n this.addRule('elements.distribute', function(context) {\n var elements = context.elements;\n\n elements = filter(elements, function(element) {\n var cannotDistribute = isAny(element, [\n 'bpmn:Association',\n 'bpmn:BoundaryEvent',\n 'bpmn:DataInputAssociation',\n 'bpmn:DataOutputAssociation',\n 'bpmn:Lane',\n 'bpmn:MessageFlow',\n 'bpmn:SequenceFlow',\n 'bpmn:TextAnnotation'\n ]);\n\n return !(element.labelTarget || cannotDistribute);\n });\n\n // filter out elements which are children of any of the selected elements\n elements = getParents(elements);\n\n if (elements.length < 3) {\n return false;\n }\n\n return elements;\n });\n};\n" }, { "path": "lib/features/distribute-elements/DistributeElementsIcons.js", "content": "/**\n * To change the icons, modify the SVGs in `./resources`, execute `npx svgo -f resources --datauri enc -o dist`,\n * and then replace respective icons with the optimized data URIs in `./dist`.\n */\nvar icons = {\n horizontal: `\n \n \n \n `,\n vertical: `\n \n \n \n `\n};\n\nexport default icons;\n" }, { "path": "lib/features/distribute-elements/DistributeElementsMenuProvider.js", "content": "import ICONS from './DistributeElementsIcons';\n\nimport { assign } from 'min-dash';\n\n/**\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').default} PopupMenu\n * @typedef {import('./BpmnDistributeElements').default} DistributeElements\n * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate\n * @typedef {import('diagram-js/lib/features/rules/Rules').default} Rules\n *\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenuProvider').PopupMenuEntries} PopupMenuEntries\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenuProvider').default} PopupMenuProvider\n * @typedef {import('diagram-js/lib/features/popup-menu/PopupMenu').PopupMenuTarget} PopupMenuTarget\n */\n\nvar LOW_PRIORITY = 900;\n\n/**\n * A provider for the distribute elements popup menu.\n *\n * @implements {PopupMenuProvider}\n *\n * @param {PopupMenu} popupMenu\n * @param {DistributeElements} distributeElements\n * @param {Translate} translate\n * @param {Rules} rules\n */\nexport default function DistributeElementsMenuProvider(\n popupMenu, distributeElements, translate, rules) {\n this._distributeElements = distributeElements;\n this._translate = translate;\n this._popupMenu = popupMenu;\n this._rules = rules;\n\n popupMenu.registerProvider('align-elements', LOW_PRIORITY, this);\n}\n\nDistributeElementsMenuProvider.$inject = [\n 'popupMenu',\n 'distributeElements',\n 'translate',\n 'rules'\n];\n\n/**\n * @param {PopupMenuTarget} target\n *\n * @return {PopupMenuEntries}\n */\nDistributeElementsMenuProvider.prototype.getPopupMenuEntries = function(target) {\n var entries = {};\n\n if (this._isAllowed(target)) {\n assign(entries, this._getEntries(target));\n }\n\n return entries;\n};\n\nDistributeElementsMenuProvider.prototype._isAllowed = function(elements) {\n return this._rules.allowed('elements.distribute', { elements: elements });\n};\n\nDistributeElementsMenuProvider.prototype._getEntries = function(elements) {\n var distributeElements = this._distributeElements,\n translate = this._translate,\n popupMenu = this._popupMenu;\n\n var entries = {\n 'distribute-elements-horizontal': {\n group: 'distribute',\n title: translate('Distribute elements horizontally'),\n className: 'bjs-align-elements-menu-entry',\n imageHtml: ICONS['horizontal'],\n action: function(event, entry) {\n distributeElements.trigger(elements, 'horizontal');\n popupMenu.close();\n }\n },\n 'distribute-elements-vertical': {\n group: 'distribute',\n title: translate('Distribute elements vertically'),\n imageHtml: ICONS['vertical'],\n action: function(event, entry) {\n distributeElements.trigger(elements, 'vertical');\n popupMenu.close();\n }\n },\n };\n\n return entries;\n};\n" }, { "path": "lib/features/distribute-elements/index.js", "content": "import DistributeElementsModule from 'diagram-js/lib/features/distribute-elements';\nimport PopupMenuModule from 'diagram-js/lib/features/popup-menu';\n\nimport BpmnDistributeElements from './BpmnDistributeElements';\nimport DistributeElementsMenuProvider from './DistributeElementsMenuProvider';\n\n\nexport default {\n __depends__: [\n PopupMenuModule,\n DistributeElementsModule\n ],\n __init__: [\n 'bpmnDistributeElements',\n 'distributeElementsMenuProvider'\n ],\n bpmnDistributeElements: [ 'type', BpmnDistributeElements ],\n distributeElementsMenuProvider: [ 'type', DistributeElementsMenuProvider ]\n};\n" }, { "path": "lib/features/drilldown/DrilldownBreadcrumbs.js", "content": "import { domify, classes } from 'min-dom';\nimport { find } from 'min-dash';\n\nimport { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';\nimport { getBusinessObject, is } from '../../util/ModelUtil';\nimport {\n getPlaneIdFromShape\n} from '../../util/DrilldownUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Shape} Shape\n */\n\nvar OPEN_CLASS = 'bjs-breadcrumbs-shown';\n\n\n/**\n * Adds overlays that allow switching planes on collapsed subprocesses.\n *\n * @param {EventBus} eventBus\n * @param {ElementRegistry} elementRegistry\n * @param {Canvas} canvas\n */\nexport default function DrilldownBreadcrumbs(eventBus, elementRegistry, canvas) {\n var breadcrumbs = domify('
    ');\n var container = canvas.getContainer();\n var containerClasses = classes(container);\n container.appendChild(breadcrumbs);\n\n var businessObjectParents = [];\n\n // update breadcrumbs if name or ID of the primary shape changes\n eventBus.on('element.changed', function(event) {\n var shape = event.element,\n businessObject = getBusinessObject(shape);\n\n var isPresent = find(businessObjectParents, function(element) {\n return element === businessObject;\n });\n\n if (!isPresent) {\n return;\n }\n\n updateBreadcrumbs();\n });\n\n /**\n * Updates the displayed breadcrumbs. If no element is provided, only the\n * labels are updated.\n *\n * @param {Element} [element]\n */\n function updateBreadcrumbs(element) {\n if (element) {\n businessObjectParents = getBusinessObjectParentChain(element);\n }\n\n var path = businessObjectParents.flatMap(function(parent) {\n var parentPlane =\n canvas.findRoot(getPlaneIdFromShape(parent)) ||\n canvas.findRoot(parent.id);\n\n // when the root is a collaboration, the process does not have a\n // corresponding element in the elementRegisty. Instead, we search\n // for the corresponding participant\n if (!parentPlane && is(parent, 'bpmn:Process')) {\n var participant = elementRegistry.find(function(element) {\n var businessObject = getBusinessObject(element);\n\n return businessObject && businessObject.get('processRef') === parent;\n });\n\n parentPlane = participant && canvas.findRoot(participant.id);\n }\n\n if (!parentPlane) {\n return [];\n }\n\n var title = escapeHTML(parent.name || parent.id);\n var link = domify('
  • ' + title + '
    • ');\n\n link.addEventListener('click', function() {\n canvas.setRootElement(parentPlane);\n });\n\n return link;\n });\n\n breadcrumbs.innerHTML = '';\n\n // show breadcrumbs and expose state to .djs-container\n var visible = path.length > 1;\n\n containerClasses.toggle(OPEN_CLASS, visible);\n\n path.forEach(function(element) {\n breadcrumbs.appendChild(element);\n });\n }\n\n eventBus.on('root.set', function(event) {\n updateBreadcrumbs(event.element);\n });\n\n}\n\nDrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'canvas' ];\n\n\n// helpers //////////\n\n/**\n * Returns the parents for the element using the business object chain,\n * starting with the root element.\n *\n * @param {Shape} child\n *\n * @return {Shape}\n */\nfunction getBusinessObjectParentChain(child) {\n var businessObject = getBusinessObject(child);\n\n var parents = [];\n\n for (var element = businessObject; element; element = element.$parent) {\n if (is(element, 'bpmn:SubProcess') || is(element, 'bpmn:Process')) {\n parents.push(element);\n }\n }\n\n return parents.reverse();\n}" }, { "path": "lib/features/drilldown/DrilldownCentering.js", "content": "import { is } from '../../util/ModelUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n */\n\n/**\n * Move collapsed subprocesses into view when drilling down.\n *\n * Zoom and scroll are saved in a session.\n *\n * @param {EventBus} eventBus\n * @param {Canvas} canvas\n */\nexport default function DrilldownCentering(eventBus, canvas) {\n\n var currentRoot = null;\n var positionMap = new Map();\n\n eventBus.on('root.set', function(event) {\n var newRoot = event.element;\n var currentViewbox = canvas.viewbox();\n var storedViewbox = positionMap.get(newRoot);\n\n positionMap.set(currentRoot, {\n x: currentViewbox.x,\n y: currentViewbox.y,\n zoom: currentViewbox.scale\n });\n\n currentRoot = newRoot;\n\n // Keep viewbox when replacing root elements\n if (!is(newRoot, 'bpmn:SubProcess') && !storedViewbox) {\n return;\n }\n\n storedViewbox = storedViewbox || { x: 0, y: 0, zoom: 1 };\n\n var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,\n dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;\n\n if (dx !== 0 || dy !== 0) {\n canvas.scroll({\n dx: dx,\n dy: dy\n });\n }\n\n if (storedViewbox.zoom !== currentViewbox.scale) {\n canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });\n }\n });\n\n eventBus.on('diagram.clear', function() {\n positionMap.clear();\n currentRoot = null;\n });\n\n}\n\nDrilldownCentering.$inject = [ 'eventBus', 'canvas' ];\n\n\n/**\n * ES5 Map implementation. Works.\n */\nfunction Map() {\n\n this._entries = [];\n\n this.set = function(key, value) {\n\n var found = false;\n\n for (var k in this._entries) {\n if (this._entries[k][0] === key) {\n this._entries[k][1] = value;\n\n found = true;\n\n break;\n }\n }\n\n if (!found) {\n this._entries.push([ key, value ]);\n }\n };\n\n this.get = function(key) {\n\n for (var k in this._entries) {\n if (this._entries[k][0] === key) {\n return this._entries[k][1];\n }\n }\n\n return null;\n };\n\n this.clear = function() {\n this._entries.length = 0;\n };\n\n this.remove = function(key) {\n\n var idx = -1;\n\n for (var k in this._entries) {\n if (this._entries[k][0] === key) {\n idx = k;\n\n break;\n }\n }\n\n if (idx !== -1) {\n this._entries.splice(idx, 1);\n }\n };\n}" }, { "path": "lib/features/drilldown/DrilldownOverlayBehavior.js", "content": "import inherits from 'inherits-browser';\n\nimport CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';\nimport { getBusinessObject, is } from '../../util/ModelUtil';\nimport { classes, domify } from 'min-dom';\nimport { getPlaneIdFromShape } from '../../util/DrilldownUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/features/overlays/Overlays').default} Overlays\n * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Parent} Parent\n * @typedef {import('../../model/Types').Shape} Shape\n */\n\nvar LOW_PRIORITY = 250;\nvar ARROW_DOWN_SVG = '';\n\nvar EMPTY_MARKER = 'bjs-drilldown-empty';\n\n/**\n * @param {Canvas} canvas\n * @param {EventBus} eventBus\n * @param {ElementRegistry} elementRegistry\n * @param {Overlays} overlays\n * @param {Translate} translate\n */\nexport default function DrilldownOverlayBehavior(\n canvas, eventBus, elementRegistry, overlays, translate\n) {\n CommandInterceptor.call(this, eventBus);\n\n this._canvas = canvas;\n this._eventBus = eventBus;\n this._elementRegistry = elementRegistry;\n this._overlays = overlays;\n this._translate = translate;\n\n var self = this;\n\n this.executed('shape.toggleCollapse', LOW_PRIORITY, function(context) {\n var shape = context.shape;\n\n // Add overlay to the collapsed shape\n if (self._canDrillDown(shape)) {\n self._addOverlay(shape);\n } else {\n self._removeOverlay(shape);\n }\n }, true);\n\n\n this.reverted('shape.toggleCollapse', LOW_PRIORITY, function(context) {\n var shape = context.shape;\n\n // Add overlay to the collapsed shape\n if (self._canDrillDown(shape)) {\n self._addOverlay(shape);\n } else {\n self._removeOverlay(shape);\n }\n }, true);\n\n\n this.executed([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY,\n function(context) {\n var oldParent = context.oldParent,\n newParent = context.newParent || context.parent,\n shape = context.shape;\n\n // Add overlay to the collapsed shape\n if (self._canDrillDown(shape)) {\n self._addOverlay(shape);\n }\n\n self._updateDrilldownOverlay(oldParent);\n self._updateDrilldownOverlay(newParent);\n self._updateDrilldownOverlay(shape);\n }, true);\n\n\n this.reverted([ 'shape.create', 'shape.move', 'shape.delete' ], LOW_PRIORITY,\n function(context) {\n var oldParent = context.oldParent,\n newParent = context.newParent || context.parent,\n shape = context.shape;\n\n // Add overlay to the collapsed shape\n if (self._canDrillDown(shape)) {\n self._addOverlay(shape);\n }\n\n self._updateDrilldownOverlay(oldParent);\n self._updateDrilldownOverlay(newParent);\n self._updateDrilldownOverlay(shape);\n }, true);\n\n\n eventBus.on('import.render.complete', function() {\n elementRegistry.filter(function(e) {\n return self._canDrillDown(e);\n }).map(function(el) {\n self._addOverlay(el);\n });\n });\n\n}\n\ninherits(DrilldownOverlayBehavior, CommandInterceptor);\n\n/**\n * @param {Shape} shape\n */\nDrilldownOverlayBehavior.prototype._updateDrilldownOverlay = function(shape) {\n var canvas = this._canvas;\n\n if (!shape) {\n return;\n }\n\n var root = canvas.findRoot(shape);\n\n if (root) {\n this._updateOverlayVisibility(root);\n }\n};\n\n/**\n * @param {Element} element\n *\n * @return {boolean}\n */\nDrilldownOverlayBehavior.prototype._canDrillDown = function(element) {\n var canvas = this._canvas;\n\n return is(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));\n};\n\n/**\n * Update the visibility of the drilldown overlay. If the plane has no elements,\n * the drilldown will only be shown when the element is selected.\n *\n * @param {Parent} element The collapsed root or shape.\n */\nDrilldownOverlayBehavior.prototype._updateOverlayVisibility = function(element) {\n var overlays = this._overlays;\n\n var businessObject = getBusinessObject(element);\n\n var overlay = overlays.get({ element: businessObject.id, type: 'drilldown' })[0];\n\n if (!overlay) {\n return;\n }\n\n var hasFlowElements = businessObject\n && businessObject.get('flowElements')\n && businessObject.get('flowElements').length;\n\n classes(overlay.html).toggle(EMPTY_MARKER, !hasFlowElements);\n};\n\n/**\n * Add a drilldown button to the given element assuming the plane has the same\n * ID as the element.\n *\n * @param {Shape} element The collapsed shape.\n */\nDrilldownOverlayBehavior.prototype._addOverlay = function(element) {\n var canvas = this._canvas,\n overlays = this._overlays,\n bo = getBusinessObject(element);\n\n var existingOverlays = overlays.get({ element: element, type: 'drilldown' });\n\n if (existingOverlays.length) {\n this._removeOverlay(element);\n }\n\n var button = domify(''),\n elementName = bo.get('name') || bo.get('id'),\n title = this._translate('Open {element}', { element: elementName });\n button.setAttribute('title', title);\n\n button.addEventListener('click', function() {\n canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));\n });\n\n overlays.add(element, 'drilldown', {\n position: {\n bottom: -7,\n right: -8\n },\n html: button\n });\n\n this._updateOverlayVisibility(element);\n};\n\nDrilldownOverlayBehavior.prototype._removeOverlay = function(element) {\n var overlays = this._overlays;\n\n overlays.remove({\n element: element,\n type: 'drilldown'\n });\n};\n\nDrilldownOverlayBehavior.$inject = [\n 'canvas',\n 'eventBus',\n 'elementRegistry',\n 'overlays',\n 'translate'\n];" }, { "path": "lib/features/drilldown/SubprocessCompatibility.js", "content": "\nimport { asBounds, asTRBL } from 'diagram-js/lib/layout/LayoutUtil';\nimport { is, isAny } from '../../util/ModelUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../../model/Types').Moddle} Moddle\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Shape} Shape\n *\n * @typedef {import('diagram-js/lib/core/Canvas').CanvasPlane} CanvasPlane\n *\n * @typedef {import('diagram-js/lib/util/Types').Rect} Rect\n */\n\nvar DEFAULT_POSITION = {\n x: 180,\n y: 160\n};\n\n/**\n * Hook into `import.render.start` and create new planes for diagrams with\n * collapsed subprocesses and all DI elements on the same plane.\n *\n * @param {EventBus} eventBus\n * @param {Moddle} moddle\n */\nexport default function SubprocessCompatibility(eventBus, moddle) {\n this._eventBus = eventBus;\n this._moddle = moddle;\n\n var self = this;\n\n eventBus.on('import.render.start', 1500, function(e, context) {\n self._handleImport(context.definitions);\n });\n}\n\n/**\n * @param {ModdleElement} definitions\n */\nSubprocessCompatibility.prototype._handleImport = function(definitions) {\n if (!definitions.diagrams) {\n return;\n }\n\n var self = this;\n this._definitions = definitions;\n this._processToDiagramMap = {};\n\n definitions.diagrams.forEach(function(diagram) {\n if (!diagram.plane || !diagram.plane.bpmnElement) {\n return;\n }\n\n self._processToDiagramMap[diagram.plane.bpmnElement.id] = diagram;\n });\n\n var newDiagrams = definitions.diagrams\n .filter(diagram => diagram.plane)\n .flatMap(diagram => self._createNewDiagrams(diagram.plane));\n\n newDiagrams.forEach(function(diagram) {\n self._movePlaneElementsToOrigin(diagram.plane);\n });\n};\n\n\n/**\n * Moves all DI elements from collapsed subprocesses to a new plane.\n *\n * @param {CanvasPlane} plane\n *\n * @return {ModdleElement[]} new diagrams created for the collapsed subprocesses\n */\nSubprocessCompatibility.prototype._createNewDiagrams = function(plane) {\n var self = this;\n\n var collapsedElements = [];\n var elementsToMove = [];\n\n plane.get('planeElement').forEach(function(diElement) {\n var businessObject = diElement.bpmnElement;\n\n if (!businessObject) {\n return;\n }\n\n var parent = businessObject.$parent;\n\n if (is(businessObject, 'bpmn:SubProcess') && !diElement.isExpanded) {\n collapsedElements.push(businessObject);\n }\n\n if (shouldMoveToPlane(businessObject, plane)) {\n\n // don't change the array while we iterate over it\n elementsToMove.push({ diElement: diElement, parent: parent });\n }\n });\n\n var newDiagrams = [];\n\n // create new planes for all collapsed subprocesses, even when they are empty\n collapsedElements.forEach(function(element) {\n if (!self._processToDiagramMap[ element.id ]) {\n var diagram = self._createDiagram(element);\n\n self._processToDiagramMap[element.id] = diagram;\n\n newDiagrams.push(diagram);\n }\n });\n\n elementsToMove.forEach(function(element) {\n var diElement = element.diElement;\n var parent = element.parent;\n\n // parent is expanded, get nearest collapsed parent\n while (parent && collapsedElements.indexOf(parent) === -1) {\n parent = parent.$parent;\n }\n\n // false positive, all parents are expanded\n if (!parent) {\n return;\n }\n\n var diagram = self._processToDiagramMap[ parent.id ];\n\n self._moveToDiPlane(diElement, diagram.plane);\n });\n\n return newDiagrams;\n};\n\n/**\n * @param {CanvasPlane} plane\n */\nSubprocessCompatibility.prototype._movePlaneElementsToOrigin = function(plane) {\n var elements = plane.get('planeElement');\n\n // get bounding box of all elements\n var planeBounds = getPlaneBounds(plane);\n\n var offset = {\n x: planeBounds.x - DEFAULT_POSITION.x,\n y: planeBounds.y - DEFAULT_POSITION.y\n };\n\n elements.forEach(function(diElement) {\n if (diElement.waypoint) {\n diElement.waypoint.forEach(function(waypoint) {\n waypoint.x = waypoint.x - offset.x;\n waypoint.y = waypoint.y - offset.y;\n });\n } else if (diElement.bounds) {\n diElement.bounds.x = diElement.bounds.x - offset.x;\n diElement.bounds.y = diElement.bounds.y - offset.y;\n }\n });\n};\n\n/**\n * @param {ModdleElement} diElement\n * @param {CanvasPlane} newPlane\n */\nSubprocessCompatibility.prototype._moveToDiPlane = function(diElement, newPlane) {\n var containingDiagram = findRootDiagram(diElement);\n\n // remove DI from old Plane and add it to the new one\n var parentPlaneElement = containingDiagram.plane.get('planeElement');\n\n parentPlaneElement.splice(parentPlaneElement.indexOf(diElement), 1);\n\n newPlane.get('planeElement').push(diElement);\n};\n\n/**\n * @param {ModdleElement} businessObject\n *\n * @return {ModdleElement}\n */\nSubprocessCompatibility.prototype._createDiagram = function(businessObject) {\n var plane = this._moddle.create('bpmndi:BPMNPlane', {\n bpmnElement: businessObject\n });\n\n var diagram = this._moddle.create('bpmndi:BPMNDiagram', {\n plane: plane\n });\n\n plane.$parent = diagram;\n\n plane.bpmnElement = businessObject;\n\n diagram.$parent = this._definitions;\n\n this._definitions.diagrams.push(diagram);\n\n return diagram;\n};\n\nSubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];\n\n\n// helpers //////////\n\nfunction findRootDiagram(element) {\n if (is(element, 'bpmndi:BPMNDiagram')) {\n return element;\n } else {\n return findRootDiagram(element.$parent);\n }\n}\n\n/**\n * @param {CanvasPlane} plane\n *\n * @return {Rect}\n */\nfunction getPlaneBounds(plane) {\n var planeTrbl = {\n top: Infinity,\n right: -Infinity,\n bottom: -Infinity,\n left: Infinity\n };\n\n plane.planeElement.forEach(function(element) {\n if (!element.bounds) {\n return;\n }\n\n var trbl = asTRBL(element.bounds);\n\n planeTrbl.top = Math.min(trbl.top, planeTrbl.top);\n planeTrbl.left = Math.min(trbl.left, planeTrbl.left);\n });\n\n return asBounds(planeTrbl);\n}\n\n/**\n * @param {ModdleElement} businessObject\n * @param {CanvasPlane} plane\n *\n * @return {boolean}\n */\nfunction shouldMoveToPlane(businessObject, plane) {\n var parent = businessObject.$parent;\n\n // don't move elements that are already on the plane\n if (!is(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {\n return false;\n }\n\n // dataAssociations are children of the subprocess but rendered on process level\n // cf. https://github.com/bpmn-io/bpmn-js/issues/1619\n if (isAny(businessObject, [ 'bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation' ])) {\n return false;\n }\n\n return true;\n}\n" }, { "path": "lib/features/drilldown/index.js", "content": "import OverlaysModule from 'diagram-js/lib/features/overlays';\nimport ChangeSupportModule from 'diagram-js/lib/features/change-support';\nimport RootElementsModule from 'diagram-js/lib/features/root-elements';\n\nimport DrilldownBreadcrumbs from './DrilldownBreadcrumbs';\nimport DrilldownCentering from './DrilldownCentering';\nimport SubprocessCompatibility from './SubprocessCompatibility';\nimport DrilldownOverlayBehavior from './DrilldownOverlayBehavior';\n\nexport default {\n __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],\n __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility' ],\n drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],\n drilldownCentering: [ 'type', DrilldownCentering ],\n drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],\n subprocessCompatibility: [ 'type', SubprocessCompatibility ]\n};" }, { "path": "lib/features/editor-actions/BpmnEditorActions.js", "content": "import inherits from 'inherits-browser';\n\nimport EditorActions from 'diagram-js/lib/features/editor-actions/EditorActions';\n\nimport { filter } from 'min-dash';\n\nimport { is } from '../../util/ModelUtil';\n\nimport {\n getBBox\n} from 'diagram-js/lib/util/Elements';\n\n/**\n * @typedef {import('didi').Injector} Injector\n */\n\n/**\n * Registers and executes BPMN specific editor actions.\n *\n * @param {Injector} injector\n */\nexport default function BpmnEditorActions(injector) {\n injector.invoke(EditorActions, this);\n}\n\ninherits(BpmnEditorActions, EditorActions);\n\nBpmnEditorActions.$inject = [\n 'injector'\n];\n\n/**\n * Register default actions.\n *\n * @param {Injector} injector\n */\nBpmnEditorActions.prototype._registerDefaultActions = function(injector) {\n\n // (0) invoke super method\n\n EditorActions.prototype._registerDefaultActions.call(this, injector);\n\n // (1) retrieve optional components to integrate with\n\n var canvas = injector.get('canvas', false);\n var elementRegistry = injector.get('elementRegistry', false);\n var selection = injector.get('selection', false);\n var spaceTool = injector.get('spaceTool', false);\n var lassoTool = injector.get('lassoTool', false);\n var handTool = injector.get('handTool', false);\n var globalConnect = injector.get('globalConnect', false);\n var distributeElements = injector.get('distributeElements', false);\n var alignElements = injector.get('alignElements', false);\n var directEditing = injector.get('directEditing', false);\n var searchPad = injector.get('searchPad', false);\n var modeling = injector.get('modeling', false);\n var contextPad = injector.get('contextPad', false);\n\n // (2) check components and register actions\n\n if (canvas && elementRegistry && selection) {\n this._registerAction('selectElements', function() {\n\n // select all elements except for the invisible\n // root element\n var rootElement = canvas.getRootElement();\n\n var elements = elementRegistry.filter(function(element) {\n return element !== rootElement;\n });\n\n selection.select(elements);\n\n return elements;\n });\n }\n\n if (spaceTool) {\n this._registerAction('spaceTool', function() {\n spaceTool.toggle();\n });\n }\n\n if (lassoTool) {\n this._registerAction('lassoTool', function() {\n lassoTool.toggle();\n });\n }\n\n if (handTool) {\n this._registerAction('handTool', function() {\n handTool.toggle();\n });\n }\n\n if (globalConnect) {\n this._registerAction('globalConnectTool', function() {\n globalConnect.toggle();\n });\n }\n\n if (selection && distributeElements) {\n this._registerAction('distributeElements', function(opts) {\n var currentSelection = selection.get(),\n type = opts.type;\n\n if (currentSelection.length) {\n distributeElements.trigger(currentSelection, type);\n }\n });\n }\n\n if (selection && alignElements) {\n this._registerAction('alignElements', function(opts) {\n var currentSelection = selection.get(),\n aligneableElements = [],\n type = opts.type;\n\n if (currentSelection.length) {\n aligneableElements = filter(currentSelection, function(element) {\n return !is(element, 'bpmn:Lane');\n });\n\n alignElements.trigger(aligneableElements, type);\n }\n });\n }\n\n if (selection && modeling) {\n this._registerAction('setColor', function(opts) {\n var currentSelection = selection.get();\n\n if (currentSelection.length) {\n modeling.setColor(currentSelection, opts);\n }\n });\n }\n\n if (selection && directEditing) {\n this._registerAction('directEditing', function() {\n var currentSelection = selection.get();\n\n if (currentSelection.length) {\n directEditing.activate(currentSelection[0]);\n }\n });\n }\n\n if (searchPad) {\n this._registerAction('find', function() {\n searchPad.toggle();\n });\n }\n\n if (canvas && modeling) {\n this._registerAction('moveToOrigin', function() {\n var rootElement = canvas.getRootElement(),\n boundingBox,\n elements;\n\n if (is(rootElement, 'bpmn:Collaboration')) {\n elements = elementRegistry.filter(function(element) {\n return is(element.parent, 'bpmn:Collaboration');\n });\n } else {\n elements = elementRegistry.filter(function(element) {\n return element !== rootElement && !is(element.parent, 'bpmn:SubProcess');\n });\n }\n\n boundingBox = getBBox(elements);\n\n modeling.moveElements(\n elements,\n { x: -boundingBox.x, y: -boundingBox.y },\n rootElement\n );\n });\n }\n\n if (selection && contextPad) {\n this._registerAction('replaceElement', function(event) {\n contextPad.triggerEntry('replace', 'click', event);\n });\n }\n\n};\n" }, { "path": "lib/features/editor-actions/index.js", "content": "import EditorActionsModule from 'diagram-js/lib/features/editor-actions';\n\nimport BpmnEditorActions from './BpmnEditorActions';\n\nexport default {\n __depends__: [\n EditorActionsModule\n ],\n editorActions: [ 'type', BpmnEditorActions ]\n};\n" }, { "path": "lib/features/grid-snapping/BpmnGridSnapping.js", "content": "import { isAny } from '../modeling/util/ModelingUtil';\r\n\r\n/**\r\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\r\n */\r\n\r\n/**\r\n * @param {EventBus} eventBus\r\n */\r\nexport default function BpmnGridSnapping(eventBus) {\r\n eventBus.on([\r\n 'create.init',\r\n 'shape.move.init'\r\n ], function(event) {\r\n var context = event.context,\r\n shape = event.shape;\r\n\r\n if (isAny(shape, [\r\n 'bpmn:Participant',\r\n 'bpmn:SubProcess',\r\n 'bpmn:TextAnnotation'\r\n ])) {\r\n if (!context.gridSnappingContext) {\r\n context.gridSnappingContext = {};\r\n }\r\n\r\n context.gridSnappingContext.snapLocation = 'top-left';\r\n }\r\n });\r\n}\r\n\r\nBpmnGridSnapping.$inject = [ 'eventBus' ];" }, { "path": "lib/features/grid-snapping/behavior/GridSnappingAutoPlaceBehavior.js", "content": "import { getNewShapePosition } from '../../auto-place/BpmnAutoPlaceUtil';\r\n\r\nimport { getMid } from 'diagram-js/lib/layout/LayoutUtil';\r\nimport { is } from '../../../util/ModelUtil';\r\n\r\n/**\r\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\r\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\r\n * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping\r\n *\r\n * @typedef {import('diagram-js/lib/util/Types').Axis} Axis\r\n */\r\n\r\nvar HIGH_PRIORITY = 2000;\r\n\r\n/**\r\n * @param {EventBus} eventBus\r\n * @param {GridSnapping} gridSnapping\r\n * @param {ElementRegistry} elementRegistry\r\n */\r\nexport default function GridSnappingAutoPlaceBehavior(eventBus, gridSnapping, elementRegistry) {\r\n eventBus.on('autoPlace', HIGH_PRIORITY, function(context) {\r\n var source = context.source,\r\n sourceMid = getMid(source),\r\n shape = context.shape;\r\n\r\n var position = getNewShapePosition(source, shape, elementRegistry);\r\n\r\n [ 'x', 'y' ].forEach(function(axis) {\r\n var options = {};\r\n\r\n // do not snap if x/y equal\r\n if (position[ axis ] === sourceMid[ axis ]) {\r\n return;\r\n }\r\n\r\n if (position[ axis ] > sourceMid[ axis ]) {\r\n options.min = position[ axis ];\r\n } else {\r\n options.max = position[ axis ];\r\n }\r\n\r\n if (is(shape, 'bpmn:TextAnnotation')) {\r\n\r\n if (isHorizontal(axis)) {\r\n options.offset = -shape.width / 2;\r\n } else {\r\n options.offset = -shape.height / 2;\r\n }\r\n\r\n }\r\n\r\n position[ axis ] = gridSnapping.snapValue(position[ axis ], options);\r\n\r\n });\r\n\r\n // must be returned to be considered by auto place\r\n return position;\r\n });\r\n}\r\n\r\nGridSnappingAutoPlaceBehavior.$inject = [\r\n 'eventBus',\r\n 'gridSnapping',\r\n 'elementRegistry'\r\n];\r\n\r\n// helpers //////////\r\n\r\n/**\r\n * @param {Axis} axis\r\n *\r\n * @return {boolean}\r\n */\r\nfunction isHorizontal(axis) {\r\n return axis === 'x';\r\n}" }, { "path": "lib/features/grid-snapping/behavior/GridSnappingLayoutConnectionBehavior.js", "content": "import inherits from 'inherits-browser';\n\nimport CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';\n\nimport { pointsAligned } from 'diagram-js/lib/util/Geometry';\n\nimport {\n assign\n} from 'min-dash';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping\n * @typedef {import('../../modeling/Modeling').default} Modeling\n *\n * @typedef {import('diagram-js/lib/util/Types').Point} Point\n */\n\nvar HIGH_PRIORITY = 3000;\n\n\n/**\n * Snaps connections with Manhattan layout.\n *\n * @param {EventBus} eventBus\n * @param {GridSnapping} gridSnapping\n * @param {Modeling} modeling\n */\nexport default function GridSnappingLayoutConnectionBehavior(eventBus, gridSnapping, modeling) {\n CommandInterceptor.call(this, eventBus);\n\n this._gridSnapping = gridSnapping;\n\n var self = this;\n\n this.postExecuted([\n 'connection.create',\n 'connection.layout'\n ], HIGH_PRIORITY, function(event) {\n var context = event.context,\n connection = context.connection,\n hints = context.hints || {},\n waypoints = connection.waypoints;\n\n if (hints.connectionStart || hints.connectionEnd || hints.createElementsBehavior === false) {\n return;\n }\n\n if (!hasMiddleSegments(waypoints)) {\n return;\n }\n\n modeling.updateWaypoints(connection, self.snapMiddleSegments(waypoints));\n });\n}\n\nGridSnappingLayoutConnectionBehavior.$inject = [\n 'eventBus',\n 'gridSnapping',\n 'modeling'\n];\n\ninherits(GridSnappingLayoutConnectionBehavior, CommandInterceptor);\n\n/**\n * Snap middle segments of a given connection.\n *\n * @param {Point[]} waypoints\n *\n * @return {Point[]}\n */\nGridSnappingLayoutConnectionBehavior.prototype.snapMiddleSegments = function(waypoints) {\n var gridSnapping = this._gridSnapping,\n snapped;\n\n waypoints = waypoints.slice();\n\n for (var i = 1; i < waypoints.length - 2; i++) {\n\n snapped = snapSegment(gridSnapping, waypoints[i], waypoints[i + 1]);\n\n waypoints[i] = snapped[0];\n waypoints[i + 1] = snapped[1];\n }\n\n return waypoints;\n};\n\n\n// helpers //////////\n\n/**\n * Check whether a connection has a middle segments.\n *\n * @param {Point[]} waypoints\n *\n * @return {boolean}\n */\nfunction hasMiddleSegments(waypoints) {\n return waypoints.length > 3;\n}\n\n/**\n * Check whether an alignment is horizontal.\n *\n * @param {string} aligned\n *\n * @return {boolean}\n */\nfunction horizontallyAligned(aligned) {\n return aligned === 'h';\n}\n\n/**\n * Check whether an alignment is vertical.\n *\n * @param {string} aligned\n *\n * @return {boolean}\n */\nfunction verticallyAligned(aligned) {\n return aligned === 'v';\n}\n\n/**\n * Get middle segments from a given connection.\n *\n * @param {Point[]} waypoints\n *\n * @return {Point[]}\n */\nfunction snapSegment(gridSnapping, segmentStart, segmentEnd) {\n\n var aligned = pointsAligned(segmentStart, segmentEnd);\n\n var snapped = {};\n\n if (horizontallyAligned(aligned)) {\n\n // snap horizontally\n snapped.y = gridSnapping.snapValue(segmentStart.y);\n }\n\n if (verticallyAligned(aligned)) {\n\n // snap vertically\n snapped.x = gridSnapping.snapValue(segmentStart.x);\n }\n\n if ('x' in snapped || 'y' in snapped) {\n segmentStart = assign({}, segmentStart, snapped);\n segmentEnd = assign({}, segmentEnd, snapped);\n }\n\n return [ segmentStart, segmentEnd ];\n}" }, { "path": "lib/features/grid-snapping/behavior/GridSnappingParticipantBehavior.js", "content": "import { is } from '../../../util/ModelUtil';\r\n\r\n/**\r\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\r\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\r\n * @typedef {import('diagram-js/lib/features/grid-snapping/GridSnapping').default} GridSnapping\r\n */\r\n\r\nvar HIGHER_PRIORITY = 1750;\r\n\r\n/**\r\n * @param {Canvas} canvas\r\n * @param {EventBus} eventBus\r\n * @param {GridSnapping} gridSnapping\r\n */\r\nexport default function GridSnappingParticipantBehavior(canvas, eventBus, gridSnapping) {\r\n eventBus.on([\r\n 'create.start',\r\n 'shape.move.start'\r\n ], HIGHER_PRIORITY, function(event) {\r\n var context = event.context,\r\n shape = context.shape,\r\n rootElement = canvas.getRootElement();\r\n\r\n if (!is(shape, 'bpmn:Participant') ||\r\n !is(rootElement, 'bpmn:Process') ||\r\n !rootElement.children.length) {\r\n return;\r\n }\r\n\r\n var createConstraints = context.createConstraints;\r\n\r\n if (!createConstraints) {\r\n return;\r\n }\r\n\r\n shape.width = gridSnapping.snapValue(shape.width, { min: shape.width });\r\n shape.height = gridSnapping.snapValue(shape.height, { min: shape.height });\r\n });\r\n}\r\n\r\nGridSnappingParticipantBehavior.$inject = [\r\n 'canvas',\r\n 'eventBus',\r\n 'gridSnapping'\r\n];" }, { "path": "lib/features/grid-snapping/behavior/index.js", "content": "import GridSnappingAutoPlaceBehavior from './GridSnappingAutoPlaceBehavior';\r\nimport GridSnappingParticipantBehavior from './GridSnappingParticipantBehavior';\r\nimport GridSnappingLayoutConnectionBehavior from './GridSnappingLayoutConnectionBehavior';\r\n\r\nexport default {\r\n __init__: [\r\n 'gridSnappingAutoPlaceBehavior',\r\n 'gridSnappingParticipantBehavior',\r\n 'gridSnappingLayoutConnectionBehavior',\r\n ],\r\n gridSnappingAutoPlaceBehavior: [ 'type', GridSnappingAutoPlaceBehavior ],\r\n gridSnappingParticipantBehavior: [ 'type', GridSnappingParticipantBehavior ],\r\n gridSnappingLayoutConnectionBehavior: [ 'type', GridSnappingLayoutConnectionBehavior ]\r\n};" }, { "path": "lib/features/grid-snapping/index.js", "content": "import BpmnGridSnapping from './BpmnGridSnapping';\r\nimport GridSnappingModule from 'diagram-js/lib/features/grid-snapping';\r\n\r\nimport GridSnappingBehaviorModule from './behavior';\r\n\r\nexport default {\r\n __depends__: [\r\n GridSnappingModule,\r\n GridSnappingBehaviorModule\r\n ],\r\n __init__: [ 'bpmnGridSnapping' ],\r\n bpmnGridSnapping: [ 'type', BpmnGridSnapping ]\r\n};" }, { "path": "lib/features/interaction-events/BpmnInteractionEvents.js", "content": "import { is } from '../../util/ModelUtil';\n\nimport {\n isExpanded,\n isHorizontal\n} from '../../util/DiUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/features/interaction-events/InteractionEvents').default} InteractionEvents\n *\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Shape} Shape\n */\n\nvar LABEL_WIDTH = 30,\n LABEL_HEIGHT = 30;\n\n\n/**\n * BPMN-specific hit zones and interaction fixes.\n *\n * @param {EventBus} eventBus\n * @param {InteractionEvents} interactionEvents\n */\nexport default function BpmnInteractionEvents(eventBus, interactionEvents) {\n\n this._interactionEvents = interactionEvents;\n\n var self = this;\n\n eventBus.on([\n 'interactionEvents.createHit',\n 'interactionEvents.updateHit'\n ], function(context) {\n var element = context.element,\n gfx = context.gfx;\n\n if (is(element, 'bpmn:Lane')) {\n return self._createParticipantHit(element, gfx);\n } else if (is(element, 'bpmn:Participant')) {\n if (isExpanded(element)) {\n return self._createParticipantHit(element, gfx);\n } else {\n return self._createDefaultHit(element, gfx);\n }\n } else if (is(element, 'bpmn:SubProcess')) {\n if (isExpanded(element)) {\n return self._createSubProcessHit(element, gfx);\n } else {\n return self._createDefaultHit(element, gfx);\n }\n }\n });\n\n}\n\nBpmnInteractionEvents.$inject = [\n 'eventBus',\n 'interactionEvents'\n];\n\n/**\n * @param {Element} element\n * @param {SVGElement} gfx\n *\n * @return {boolean}\n */\nBpmnInteractionEvents.prototype._createDefaultHit = function(element, gfx) {\n this._interactionEvents.removeHits(gfx);\n\n this._interactionEvents.createDefaultHit(element, gfx);\n\n // indicate that we created a hit\n return true;\n};\n\n/**\n * @param {Shape} element\n * @param {SVGElement} gfx\n *\n * @return {boolean}\n */\nBpmnInteractionEvents.prototype._createParticipantHit = function(element, gfx) {\n\n // remove existing hits\n this._interactionEvents.removeHits(gfx);\n\n // add body hit\n this._interactionEvents.createBoxHit(gfx, 'no-move', {\n width: element.width,\n height: element.height\n });\n\n // add outline hit\n this._interactionEvents.createBoxHit(gfx, 'click-stroke', {\n width: element.width,\n height: element.height\n });\n\n // add label hit\n var box = isHorizontal(element) ? {\n width: LABEL_WIDTH,\n height: element.height\n } : {\n width: element.width,\n height: LABEL_HEIGHT\n };\n\n this._interactionEvents.createBoxHit(gfx, 'all', box);\n\n // indicate that we created a hit\n return true;\n};\n\n/**\n * @param {Shape} element\n * @param {SVGElement} gfx\n *\n * @return {boolean}\n */\nBpmnInteractionEvents.prototype._createSubProcessHit = function(element, gfx) {\n\n // remove existing hits\n this._interactionEvents.removeHits(gfx);\n\n // add body hit\n this._interactionEvents.createBoxHit(gfx, 'no-move', {\n width: element.width,\n height: element.height\n });\n\n // add outline hit\n this._interactionEvents.createBoxHit(gfx, 'click-stroke', {\n width: element.width,\n height: element.height\n });\n\n // add label hit\n this._interactionEvents.createBoxHit(gfx, 'all', {\n width: element.width,\n height: LABEL_HEIGHT\n });\n\n // indicate that we created a hit\n return true;\n};" }, { "path": "lib/features/interaction-events/index.js", "content": "import BpmnInteractionEvents from './BpmnInteractionEvents';\n\nexport default {\n __init__: [ 'bpmnInteractionEvents' ],\n bpmnInteractionEvents: [ 'type', BpmnInteractionEvents ]\n};" }, { "path": "lib/features/keyboard/BpmnKeyboardBindings.js", "content": "import inherits from 'inherits-browser';\n\nimport KeyboardBindings from 'diagram-js/lib/features/keyboard/KeyboardBindings';\n\n/**\n * @typedef {import('didi').Injector} Injector\n * @typedef {import('diagram-js/lib/features/editor-actions/EditorActions').default} EditorActions\n * @typedef {import('diagram-js/lib/features/keyboard/Keyboard').default} Keyboard\n */\n\n/**\n * BPMN 2.0 specific keyboard bindings.\n *\n * @param {Injector} injector\n */\nexport default function BpmnKeyboardBindings(injector) {\n injector.invoke(KeyboardBindings, this);\n}\n\ninherits(BpmnKeyboardBindings, KeyboardBindings);\n\nBpmnKeyboardBindings.$inject = [\n 'injector'\n];\n\n\n/**\n * Register available keyboard bindings.\n *\n * @param {Keyboard} keyboard\n * @param {EditorActions} editorActions\n */\nBpmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {\n\n // inherit default bindings\n KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);\n\n /**\n * Add keyboard binding if respective editor action\n * is registered.\n *\n * @param {string} action name\n * @param {Function} fn that implements the key binding\n */\n function addListener(action, fn) {\n\n if (editorActions.isRegistered(action)) {\n keyboard.addListener(fn);\n }\n }\n\n // select all elements\n // CTRL + A\n addListener('selectElements', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.isKey([ 'a', 'A' ], event) && keyboard.isCmd(event)) {\n editorActions.trigger('selectElements');\n\n return true;\n }\n });\n\n // search labels\n // CTRL + F\n addListener('find', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.isKey([ 'f', 'F' ], event) && keyboard.isCmd(event)) {\n editorActions.trigger('find');\n\n return true;\n }\n });\n\n // activate space tool\n // S\n addListener('spaceTool', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 's', 'S' ], event)) {\n editorActions.trigger('spaceTool');\n\n return true;\n }\n });\n\n // activate lasso tool\n // L\n addListener('lassoTool', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 'l', 'L' ], event)) {\n editorActions.trigger('lassoTool');\n\n return true;\n }\n });\n\n // activate hand tool\n // H\n addListener('handTool', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 'h', 'H' ], event)) {\n editorActions.trigger('handTool');\n\n return true;\n }\n });\n\n // activate global connect tool\n // C\n addListener('globalConnectTool', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 'c', 'C' ], event)) {\n editorActions.trigger('globalConnectTool');\n\n return true;\n }\n });\n\n // activate direct editing\n // E\n addListener('directEditing', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 'e', 'E' ], event)) {\n editorActions.trigger('directEditing');\n\n return true;\n }\n });\n\n // activate replace element\n // R\n addListener('replaceElement', function(context) {\n\n var event = context.keyEvent;\n\n if (keyboard.hasModifier(event)) {\n return;\n }\n\n if (keyboard.isKey([ 'r', 'R' ], event)) {\n editorActions.trigger('replaceElement', event);\n\n return true;\n }\n });\n\n};" }, { "path": "lib/features/keyboard/index.js", "content": "import KeyboardModule from 'diagram-js/lib/features/keyboard';\n\nimport BpmnKeyboardBindings from './BpmnKeyboardBindings';\n\nexport default {\n __depends__: [\n KeyboardModule\n ],\n __init__: [ 'keyboardBindings' ],\n keyboardBindings: [ 'type', BpmnKeyboardBindings ]\n};\n" }, { "path": "lib/features/label-editing/LabelEditingPreview.js", "content": "import {\n append as svgAppend,\n attr as svgAttr,\n create as svgCreate,\n remove as svgRemove\n} from 'tiny-svg';\n\nimport {\n getDi,\n is\n} from '../../util/ModelUtil';\n\nimport {\n translate\n} from 'diagram-js/lib/util/SvgTransformUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../../draw/PathMap').default} PathMap\n */\n\nvar MARKER_HIDDEN = 'djs-element-hidden',\n MARKER_LABEL_HIDDEN = 'djs-label-hidden';\n\n/**\n * @param {EventBus} eventBus\n * @param {Canvas} canvas\n * @param {PathMap} pathMap\n */\nexport default function LabelEditingPreview(eventBus, canvas, pathMap) {\n\n var self = this;\n\n var defaultLayer = canvas.getDefaultLayer();\n\n var element, absoluteElementBBox, gfx;\n\n eventBus.on('directEditing.activate', function(context) {\n var activeProvider = context.active;\n\n element = activeProvider.element.label || activeProvider.element;\n\n // text annotation\n if (is(element, 'bpmn:TextAnnotation')) {\n absoluteElementBBox = canvas.getAbsoluteBBox(element);\n\n gfx = svgCreate('g');\n\n var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: element.height,\n position: {\n mx: 0.0,\n my: 0.0\n }\n });\n\n var path = self.path = svgCreate('path');\n\n svgAttr(path, {\n d: textPathData,\n strokeWidth: 2,\n stroke: getStrokeColor(element)\n });\n\n svgAppend(gfx, path);\n\n svgAppend(defaultLayer, gfx);\n\n translate(gfx, element.x, element.y);\n }\n\n if (is(element, 'bpmn:TextAnnotation') ||\n element.labelTarget) {\n canvas.addMarker(element, MARKER_HIDDEN);\n } else if (is(element, 'bpmn:Task') ||\n is(element, 'bpmn:CallActivity') ||\n is(element, 'bpmn:SubProcess') ||\n is(element, 'bpmn:Participant') ||\n is(element, 'bpmn:Lane')) {\n canvas.addMarker(element, MARKER_LABEL_HIDDEN);\n }\n });\n\n eventBus.on('directEditing.resize', function(context) {\n\n // text annotation\n if (is(element, 'bpmn:TextAnnotation')) {\n var height = context.height,\n dy = context.dy;\n\n var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);\n\n var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {\n xScaleFactor: 1,\n yScaleFactor: 1,\n containerWidth: element.width,\n containerHeight: newElementHeight,\n position: {\n mx: 0.0,\n my: 0.0\n }\n });\n\n svgAttr(self.path, {\n d: textPathData\n });\n }\n });\n\n eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {\n var activeProvider = context.active;\n\n if (activeProvider) {\n canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);\n canvas.removeMarker(element, MARKER_LABEL_HIDDEN);\n }\n\n element = undefined;\n absoluteElementBBox = undefined;\n\n if (gfx) {\n svgRemove(gfx);\n\n gfx = undefined;\n }\n });\n}\n\nLabelEditingPreview.$inject = [\n 'eventBus',\n 'canvas',\n 'pathMap'\n];\n\n\n// helpers //////////\n\nfunction getStrokeColor(element, defaultColor) {\n var di = getDi(element);\n\n return di.get('stroke') || defaultColor || 'black';\n}" }, { "path": "lib/features/label-editing/LabelEditingProvider.js", "content": "import {\n assign\n} from 'min-dash';\n\nimport {\n getLabel\n} from '../../util/LabelUtil';\n\nimport {\n is\n} from '../../util/ModelUtil';\n\nimport { isAny } from '../modeling/util/ModelingUtil';\n\nimport {\n isExpanded,\n isHorizontal\n} from '../../util/DiUtil';\n\nimport {\n getExternalLabelMid,\n isLabelExternal,\n hasExternalLabel,\n isLabel\n} from '../../util/LabelUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('../modeling/BpmnFactory').default} BpmnFactory\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js-direct-editing/lib/DirectEditing').default} DirectEditing\n * @typedef {import('../modeling/Modeling').default} Modeling\n * @typedef {import('diagram-js/lib/features/resize/ResizeHandles').default} ResizeHandles\n * @typedef {import('../../draw/TextRenderer').default} TextRenderer\n *\n * @typedef {import('../../model/Types').Element} Element\n *\n * @typedef { {\n * bounds: {\n * x: number;\n * y: number;\n * width: number;\n * height: number;\n * minWidth?: number;\n * minHeight?: number;\n * };\n * style: Object;\n * } } DirectEditingContext\n */\n\nvar HIGH_PRIORITY = 2000;\n\n/**\n * @param {EventBus} eventBus\n * @param {BpmnFactory} bpmnFactory\n * @param {Canvas} canvas\n * @param {DirectEditing} directEditing\n * @param {Modeling} modeling\n * @param {ResizeHandles} resizeHandles\n * @param {TextRenderer} textRenderer\n */\nexport default function LabelEditingProvider(\n eventBus, bpmnFactory, canvas, directEditing,\n modeling, resizeHandles, textRenderer) {\n\n this._bpmnFactory = bpmnFactory;\n this._canvas = canvas;\n this._modeling = modeling;\n this._textRenderer = textRenderer;\n\n directEditing.registerProvider(this);\n\n // listen to dblclick on non-root elements\n eventBus.on('element.dblclick', function(event) {\n activateDirectEdit(event.element, true);\n });\n\n // complete on followup canvas operation\n eventBus.on([\n 'autoPlace.start',\n 'canvas.viewbox.changing',\n 'drag.init',\n 'element.mousedown',\n 'popupMenu.open',\n 'root.set',\n 'selection.changed'\n ], function() {\n if (directEditing.isActive()) {\n directEditing.complete();\n }\n });\n\n eventBus.on([\n 'shape.remove',\n 'connection.remove'\n ], HIGH_PRIORITY, function(event) {\n\n if (directEditing.isActive(event.element)) {\n directEditing.cancel();\n }\n });\n\n // cancel on command stack changes\n eventBus.on([ 'commandStack.changed' ], function(e) {\n if (directEditing.isActive()) {\n directEditing.cancel();\n }\n });\n\n\n eventBus.on('directEditing.activate', function(event) {\n resizeHandles.removeResizers();\n });\n\n eventBus.on('create.end', 500, function(event) {\n\n var context = event.context,\n element = context.shape,\n canExecute = event.context.canExecute,\n isTouch = event.isTouch;\n\n // TODO(nikku): we need to find a way to support the\n // direct editing on mobile devices; right now this will\n // break for desworkflowediting on mobile devices\n // as it breaks the user interaction workflow\n\n // TODO(nikku): we should temporarily focus the edited element\n // here and release the focused viewport after the direct edit\n // operation is finished\n if (isTouch) {\n return;\n }\n\n if (!canExecute) {\n return;\n }\n\n if (context.hints && context.hints.createElementsBehavior === false) {\n return;\n }\n\n activateDirectEdit(element);\n });\n\n eventBus.on('autoPlace.end', 500, function(event) {\n activateDirectEdit(event.shape);\n });\n\n\n function activateDirectEdit(element, force) {\n if (force ||\n isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Participant' ]) ||\n isCollapsedSubProcess(element)) {\n\n directEditing.activate(element);\n }\n }\n\n}\n\nLabelEditingProvider.$inject = [\n 'eventBus',\n 'bpmnFactory',\n 'canvas',\n 'directEditing',\n 'modeling',\n 'resizeHandles',\n 'textRenderer'\n];\n\n\n/**\n * Activate direct editing for activities and text annotations.\n *\n * @param {Element} element\n *\n * @return { {\n * text: string;\n * options?: {\n * autoResize?: boolean;\n * centerVertically?: boolean;\n * resizable?: boolean;\n * }\n * } & DirectEditingContext }\n */\nLabelEditingProvider.prototype.activate = function(element) {\n\n // text\n var text = getLabel(element);\n\n if (text === undefined) {\n return;\n }\n\n var context = {\n text: text\n };\n\n // bounds\n var bounds = this.getEditingBBox(element);\n\n assign(context, bounds);\n\n var options = {};\n var style = context.style || {};\n\n // Remove background and border\n assign(style, {\n backgroundColor: null,\n border: null\n });\n\n // tasks\n if (\n isAny(element, [\n 'bpmn:Task',\n 'bpmn:Participant',\n 'bpmn:Lane',\n 'bpmn:CallActivity'\n ]) ||\n isCollapsedSubProcess(element)\n ) {\n assign(options, {\n centerVertically: true\n });\n }\n\n // external labels\n if (isLabelExternal(element)) {\n assign(options, {\n autoResize: true\n });\n\n // keep background and border for external labels\n assign(style, {\n backgroundColor: '#ffffff',\n border: '1px solid #ccc'\n });\n }\n\n // text annotations\n if (is(element, 'bpmn:TextAnnotation')) {\n assign(options, {\n resizable: true,\n autoResize: true\n });\n\n // keep background and border for text annotations\n assign(style, {\n backgroundColor: '#ffffff',\n border: '1px solid #ccc'\n });\n }\n\n assign(context, {\n options: options,\n style: style\n });\n\n return context;\n};\n\n\n/**\n * Get the editing bounding box based on the element's size and position.\n *\n * @param {Element} element\n *\n * @return {DirectEditingContext}\n */\nLabelEditingProvider.prototype.getEditingBBox = function(element) {\n var canvas = this._canvas;\n\n var target = element.label || element;\n\n var bbox = canvas.getAbsoluteBBox(target);\n\n var mid = {\n x: bbox.x + bbox.width / 2,\n y: bbox.y + bbox.height / 2\n };\n\n // default position\n var bounds = { x: bbox.x, y: bbox.y };\n\n var zoom = canvas.zoom();\n\n var defaultStyle = this._textRenderer.getDefaultStyle(),\n externalStyle = this._textRenderer.getExternalStyle();\n\n // take zoom into account\n var externalFontSize = externalStyle.fontSize * zoom,\n externalLineHeight = externalStyle.lineHeight,\n defaultFontSize = defaultStyle.fontSize * zoom,\n defaultLineHeight = defaultStyle.lineHeight;\n\n var style = {\n fontFamily: this._textRenderer.getDefaultStyle().fontFamily,\n fontWeight: this._textRenderer.getDefaultStyle().fontWeight\n };\n\n // adjust for expanded pools AND lanes\n if (is(element, 'bpmn:Lane') || isExpandedPool(element)) {\n var isHorizontalLane = isHorizontal(element);\n\n var laneBounds = isHorizontalLane ? {\n width: bbox.height,\n height: 30 * zoom,\n x: bbox.x - bbox.height / 2 + (15 * zoom),\n y: mid.y - (30 * zoom) / 2\n } : {\n width: bbox.width,\n height: 30 * zoom\n };\n\n assign(bounds, laneBounds);\n\n assign(style, {\n fontSize: defaultFontSize + 'px',\n lineHeight: defaultLineHeight,\n paddingTop: (7 * zoom) + 'px',\n paddingBottom: (7 * zoom) + 'px',\n paddingLeft: (5 * zoom) + 'px',\n paddingRight: (5 * zoom) + 'px',\n transform: isHorizontalLane ? 'rotate(-90deg)' : null\n });\n }\n\n\n // internal labels for collapsed participants\n if (isCollapsedPool(element)) {\n var isHorizontalPool = isHorizontal(element);\n\n var poolBounds = isHorizontalPool ? {\n width: bbox.width,\n height: bbox.height\n } : {\n width: bbox.height,\n height: bbox.width,\n x: mid.x - bbox.height / 2,\n y: mid.y - bbox.width / 2\n };\n\n assign(bounds, poolBounds);\n\n assign(style, {\n fontSize: defaultFontSize + 'px',\n lineHeight: defaultLineHeight,\n paddingTop: (7 * zoom) + 'px',\n paddingBottom: (7 * zoom) + 'px',\n paddingLeft: (5 * zoom) + 'px',\n paddingRight: (5 * zoom) + 'px',\n transform: isHorizontalPool ? null : 'rotate(-90deg)'\n });\n }\n\n\n // internal labels for tasks and collapsed call activities\n // and sub processes\n if (isAny(element, [ 'bpmn:Task', 'bpmn:CallActivity' ]) ||\n isCollapsedSubProcess(element)) {\n\n assign(bounds, {\n width: bbox.width,\n height: bbox.height\n });\n\n assign(style, {\n fontSize: defaultFontSize + 'px',\n lineHeight: defaultLineHeight,\n paddingTop: (7 * zoom) + 'px',\n paddingBottom: (7 * zoom) + 'px',\n paddingLeft: (5 * zoom) + 'px',\n paddingRight: (5 * zoom) + 'px'\n });\n }\n\n\n // internal labels for expanded sub processes\n if (isExpandedSubProcess(element)) {\n assign(bounds, {\n width: bbox.width,\n x: bbox.x\n });\n\n assign(style, {\n fontSize: defaultFontSize + 'px',\n lineHeight: defaultLineHeight,\n paddingTop: (7 * zoom) + 'px',\n paddingBottom: (7 * zoom) + 'px',\n paddingLeft: (5 * zoom) + 'px',\n paddingRight: (5 * zoom) + 'px'\n });\n }\n\n var width = 90 * zoom,\n paddingTop = 7 * zoom,\n paddingBottom = 4 * zoom;\n\n // external labels for events, data elements, gateways, groups and connections\n if (target.labelTarget) {\n assign(bounds, {\n width: width,\n height: bbox.height + paddingTop + paddingBottom,\n x: mid.x - width / 2,\n y: bbox.y - paddingTop\n });\n\n assign(style, {\n fontSize: externalFontSize + 'px',\n lineHeight: externalLineHeight,\n paddingTop: paddingTop + 'px',\n paddingBottom: paddingBottom + 'px'\n });\n }\n\n // external label not yet created\n if (isLabelExternal(target)\n && !hasExternalLabel(target)\n && !isLabel(target)) {\n\n var externalLabelMid = getExternalLabelMid(element);\n\n var absoluteBBox = canvas.getAbsoluteBBox({\n x: externalLabelMid.x,\n y: externalLabelMid.y,\n width: 0,\n height: 0\n });\n\n var height = externalFontSize + paddingTop + paddingBottom;\n\n assign(bounds, {\n width: width,\n height: height,\n x: absoluteBBox.x - width / 2,\n y: absoluteBBox.y - height / 2\n });\n\n assign(style, {\n fontSize: externalFontSize + 'px',\n lineHeight: externalLineHeight,\n paddingTop: paddingTop + 'px',\n paddingBottom: paddingBottom + 'px'\n });\n }\n\n // text annotations\n if (is(element, 'bpmn:TextAnnotation')) {\n assign(bounds, {\n width: bbox.width,\n height: bbox.height,\n minWidth: 30 * zoom,\n minHeight: 10 * zoom\n });\n\n assign(style, {\n textAlign: 'left',\n paddingTop: (5 * zoom) + 'px',\n paddingBottom: (7 * zoom) + 'px',\n paddingLeft: (7 * zoom) + 'px',\n paddingRight: (5 * zoom) + 'px',\n fontSize: defaultFontSize + 'px',\n lineHeight: defaultLineHeight\n });\n }\n\n return { bounds: bounds, style: style };\n};\n\n\nLabelEditingProvider.prototype.update = function(\n element, newLabel,\n activeContextText, bounds) {\n\n var newBounds,\n bbox;\n\n if (is(element, 'bpmn:TextAnnotation')) {\n\n bbox = this._canvas.getAbsoluteBBox(element);\n\n newBounds = {\n x: element.x,\n y: element.y,\n width: element.width / bbox.width * bounds.width,\n height: element.height / bbox.height * bounds.height\n };\n }\n\n if (isEmptyText(newLabel)) {\n newLabel = null;\n }\n\n this._modeling.updateLabel(element, newLabel, newBounds);\n};\n\n\n\n// helpers //////////\n\nfunction isCollapsedSubProcess(element) {\n return is(element, 'bpmn:SubProcess') && !isExpanded(element);\n}\n\nfunction isExpandedSubProcess(element) {\n return is(element, 'bpmn:SubProcess') && isExpanded(element);\n}\n\nfunction isCollapsedPool(element) {\n return is(element, 'bpmn:Participant') && !isExpanded(element);\n}\n\nfunction isExpandedPool(element) {\n return is(element, 'bpmn:Participant') && isExpanded(element);\n}\n\nfunction isEmptyText(label) {\n return !label || !label.trim();\n}" }, { "path": "lib/features/label-editing/LabelUtil.js", "content": "export {\n getLabel,\n setLabel\n} from '../../util/LabelUtil';\n" }, { "path": "lib/features/label-editing/cmd/UpdateLabelHandler.js", "content": "import {\n setLabel,\n getLabel\n} from '../../../util/LabelUtil';\n\nimport {\n getExternalLabelMid,\n isLabelExternal,\n hasExternalLabel,\n isLabel\n} from '../../../util/LabelUtil';\n\nimport {\n is\n} from '../../../util/ModelUtil';\n\nvar NULL_DIMENSIONS = {\n width: 0,\n height: 0\n};\n\n/**\n * @typedef {import('../../modeling/Modeling').default} Modeling\n * @typedef {import('../../../draw/TextRenderer').default} TextRenderer\n * @typedef {import('../../modeling/BpmnFactory').default} BpmnFactory\n *\n * @typedef {import('../../../model/Types').Element} Element\n */\n\n/**\n * A handler that updates the text of a BPMN element.\n *\n * @param {Modeling} modeling\n * @param {TextRenderer} textRenderer\n * @param {BpmnFactory} bpmnFactory\n */\nexport default function UpdateLabelHandler(modeling, textRenderer, bpmnFactory) {\n\n /**\n * Set the label and return the changed elements.\n *\n * Element parameter can be label itself or connection (i.e. sequence flow).\n *\n * @param {Element} element\n * @param {string} text\n */\n function setText(element, text) {\n\n // external label if present\n var label = element.label || element;\n\n var labelTarget = element.labelTarget || element;\n\n setLabel(label, text, labelTarget !== label);\n\n return [ label, labelTarget ];\n }\n\n function preExecute(ctx) {\n var element = ctx.element,\n businessObject = element.businessObject,\n newLabel = ctx.newLabel;\n\n if (!isLabel(element)\n && isLabelExternal(element)\n && !hasExternalLabel(element)\n && !isEmptyText(newLabel)) {\n\n // create label\n var paddingTop = 7;\n\n var labelCenter = getExternalLabelMid(element);\n\n labelCenter = {\n x: labelCenter.x,\n y: labelCenter.y + paddingTop\n };\n\n modeling.createLabel(element, labelCenter, {\n id: businessObject.id + '_label',\n businessObject: businessObject,\n di: element.di\n });\n }\n }\n\n function execute(ctx) {\n ctx.oldLabel = getLabel(ctx.element);\n return setText(ctx.element, ctx.newLabel);\n }\n\n function revert(ctx) {\n return setText(ctx.element, ctx.oldLabel);\n }\n\n function postExecute(ctx) {\n var element = ctx.element,\n label = element.label || element,\n newLabel = ctx.newLabel,\n newBounds = ctx.newBounds,\n hints = ctx.hints || {};\n\n // ignore internal labels for elements except text annotations\n if (!isLabel(label) && !is(label, 'bpmn:TextAnnotation')) {\n return;\n }\n\n if (isLabel(label) && isEmptyText(newLabel)) {\n\n if (hints.removeShape !== false) {\n modeling.removeShape(label, { unsetLabel: false });\n }\n\n return;\n }\n\n var text = getLabel(element);\n\n // resize element based on label _or_ pre-defined bounds\n if (typeof newBounds === 'undefined') {\n newBounds = textRenderer.getExternalLabelBounds(label, text);\n }\n\n // setting newBounds to false or _null_ will\n // disable the postExecute resize operation\n if (newBounds) {\n modeling.resizeShape(label, newBounds, NULL_DIMENSIONS);\n }\n }\n\n // API\n\n this.preExecute = preExecute;\n this.execute = execute;\n this.revert = revert;\n this.postExecute = postExecute;\n}\n\nUpdateLabelHandler.$inject = [\n 'modeling',\n 'textRenderer',\n 'bpmnFactory'\n];\n\n\n// helpers //////////\n\nfunction isEmptyText(label) {\n return !label || !label.trim();\n}" }, { "path": "lib/features/label-editing/index.js", "content": "import ChangeSupportModule from 'diagram-js/lib/features/change-support';\nimport ResizeModule from 'diagram-js/lib/features/resize';\nimport DirectEditingModule from 'diagram-js-direct-editing';\n\nimport LabelEditingProvider from './LabelEditingProvider';\nimport LabelEditingPreview from './LabelEditingPreview';\n\n\nexport default {\n __depends__: [\n ChangeSupportModule,\n ResizeModule,\n DirectEditingModule\n ],\n __init__: [\n 'labelEditingProvider',\n 'labelEditingPreview'\n ],\n labelEditingProvider: [ 'type', LabelEditingProvider ],\n labelEditingPreview: [ 'type', LabelEditingPreview ]\n};\n" }, { "path": "lib/features/label-link/LabelLink.js", "content": "import { queryAll as domQueryAll } from 'min-dom';\n\nimport {\n append as svgAppend,\n attr as svgAttr,\n remove as svgRemove,\n} from 'tiny-svg';\n\nimport { createLine, updateLine } from 'diagram-js/lib/util/RenderUtil';\nimport { getMid, getElementLineIntersection } from 'diagram-js/lib/layout/LayoutUtil';\nimport { getDistancePointPoint } from 'diagram-js/lib/features/bendpoints/GeometricUtil';\nimport { isLabel } from 'diagram-js/lib/util/ModelUtil';\n\nimport { isAny } from '../modeling/util/ModelingUtil';\nimport { getRoundRectPath, getCirclePath } from '../../draw/BpmnRenderUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas\n * @typedef {import('diagram-js/lib/core/GraphicsFactory').default} GraphicsFactory\n * @typedef {import('../outline/OutlineProvider').default} Outline\n * @typedef {import('diagram-js/lib/features/selection').default} Selection\n *\n * @typedef {import('diagram-js/lib/model/Types').Element} Element\n */\n\nconst ALLOWED_ELEMENTS = [ 'bpmn:Event', 'bpmn:SequenceFlow', 'bpmn:Gateway' ];\n\nconst LINE_STYLE = {\n class: 'bjs-label-link',\n stroke: 'var(--element-selected-outline-secondary-stroke-color)',\n strokeDasharray: '5, 5',\n};\n\nconst DISTANCE_THRESHOLD = 15;\nconst PATH_OFFSET = 2;\n\n/**\n * Render a line between an external label and its target element,\n * when either is selected.\n *\n * @param {EventBus} eventBus\n * @param {Canvas} canvas\n * @param {GraphicsFactory} graphicsFactory\n * @param {Outline} outline\n */\nexport default function LabelLink(eventBus, canvas, graphicsFactory, outline, selection) {\n\n const layer = canvas.getLayer('overlays');\n\n eventBus.on([ 'selection.changed', 'shape.changed' ], function() {\n cleanUp();\n });\n\n eventBus.on('selection.changed', function({ newSelection }) {\n\n const allowedElements = newSelection.filter(element => isAny(element, ALLOWED_ELEMENTS));\n\n if (allowedElements.length === 1) {\n const element = allowedElements[0];\n if (isLabel(element)) {\n createLink(element, element.labelTarget, newSelection);\n } else if (element.labels?.length) {\n createLink(element.labels[0], element, newSelection);\n }\n }\n\n // Only allowed when both label and its target are selected\n if (allowedElements.length === 2) {\n const label = allowedElements.find(isLabel);\n const target = allowedElements.find(el => el.labels?.includes(label));\n if (label && target) {\n createLink(label, target, newSelection);\n }\n }\n });\n\n eventBus.on('shape.changed', function({ element }) {\n\n if (!isAny(element, ALLOWED_ELEMENTS) || !isElementSelected(element)) {\n return;\n }\n\n if (isLabel(element)) {\n createLink(element, element.labelTarget, selection.get());\n } else if (element.labels?.length) {\n createLink(element.labels[0], element, selection.get());\n }\n });\n\n /**\n * Render a line between an external label and its target.\n *\n * @param {Element} label\n * @param {Element} target\n * @param {Element[]} selection\n */\n function createLink(label, target, selection = []) {\n\n // Create an auxiliary line between label and target mid points\n const line = createLine(\n [ getMid(target), getMid(label) ],\n LINE_STYLE\n );\n const linePath = line.getAttribute('d');\n\n // Calculate the intersection point between line and label\n const labelSelected = selection.includes(label);\n const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);\n const labelInter = getElementLineIntersection(labelPath, linePath);\n\n // Label on top of the target\n if (!labelInter) {\n return;\n }\n\n // Calculate the intersection point between line and label\n // If the target is a sequence flow, there is no intersection,\n // so we link to the middle of it.\n const targetSelected = selection.includes(target);\n const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);\n const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);\n\n // Do not draw a link if the points are too close\n const distance = getDistancePointPoint(targetInter, labelInter);\n if (distance < DISTANCE_THRESHOLD) {\n return;\n }\n\n // Connect the actual closest points\n updateLine(line, [ targetInter, labelInter ]);\n svgAppend(layer, line);\n }\n\n /**\n * Remove all existing label links.\n */\n function cleanUp() {\n domQueryAll(`.${LINE_STYLE.class}`, layer).forEach(svgRemove);\n }\n\n /**\n * Get element's slightly expanded outline path.\n *\n * @param {Element} element\n * @returns {string} svg path\n */\n function getElementOutlinePath(element) {\n const outlineShape = outline.getOutline(element);\n const outlineOffset = outline.offset;\n\n if (!outlineShape) {\n return getElementPath(element);\n }\n\n if (outlineShape.x) {\n const shape = {\n x: element.x + parseSvgNumAttr(outlineShape, 'x') - PATH_OFFSET,\n y: element.y + parseSvgNumAttr(outlineShape, 'y') - PATH_OFFSET,\n width: parseSvgNumAttr(outlineShape, 'width') + PATH_OFFSET * 2,\n height: parseSvgNumAttr(outlineShape, 'height') + PATH_OFFSET * 2\n };\n\n return getRoundRectPath(shape, parseSvgNumAttr(outlineShape, 'rx'));\n }\n\n if (outlineShape.cx) {\n const shape = {\n x: element.x - outlineOffset,\n y: element.y - outlineOffset,\n width: parseSvgNumAttr(outlineShape, 'r') * 2,\n height: parseSvgNumAttr(outlineShape, 'r') * 2,\n };\n\n return getCirclePath(shape);\n }\n }\n\n function getElementPath(element) {\n return graphicsFactory.getShapePath(element);\n }\n\n function isElementSelected(element) {\n return selection.get().includes(element);\n }\n}\n\nLabelLink.$inject = [\n 'eventBus',\n 'canvas',\n 'graphicsFactory',\n 'outline',\n 'selection'\n];\n\n/**\n * Get numeric attribute from SVG element\n * or 0 if not present.\n *\n * @param {SVGElement} node\n * @param {string} attr\n * @returns {number}\n */\nfunction parseSvgNumAttr(node, attr) {\n return parseFloat(svgAttr(node, attr) || 0);\n}\n" }, { "path": "lib/features/label-link/index.js", "content": "import SelectionModule from 'diagram-js/lib/features/selection';\nimport OutlineModule from 'diagram-js/lib/features/outline';\n\nimport LabelLink from './LabelLink';\n\nexport default {\n __depends__: [\n SelectionModule,\n OutlineModule\n ],\n __init__: [\n 'labelLink'\n ],\n labelLink: [ 'type', LabelLink ]\n};\n" }, { "path": "lib/features/modeling/BpmnFactory.js", "content": "import {\n map,\n assign,\n pick\n} from 'min-dash';\n\nimport {\n isAny\n} from './util/ModelingUtil';\n\nimport {\n is\n} from '../../util/ModelUtil';\n\n/**\n * @typedef {import('../../model/Types').Moddle} Moddle\n * @typedef {import('../../model/Types').ModdleElement} ModdleElement\n *\n * @typedef {import('diagram-js/lib/util/Types').Point} Point\n */\n\n/**\n * A factory for BPMN elements.\n *\n * @param {Moddle} moddle\n */\nexport default function BpmnFactory(moddle) {\n this._model = moddle;\n}\n\nBpmnFactory.$inject = [ 'moddle' ];\n\n/**\n * @param {ModdleElement} element\n *\n * @return {boolean}\n */\nBpmnFactory.prototype._needsId = function(element) {\n return isAny(element, [\n 'bpmn:RootElement',\n 'bpmn:FlowElement',\n 'bpmn:MessageFlow',\n 'bpmn:DataAssociation',\n 'bpmn:Artifact',\n 'bpmn:Participant',\n 'bpmn:Lane',\n 'bpmn:LaneSet',\n 'bpmn:Process',\n 'bpmn:Collaboration',\n 'bpmndi:BPMNShape',\n 'bpmndi:BPMNEdge',\n 'bpmndi:BPMNDiagram',\n 'bpmndi:BPMNPlane',\n 'bpmn:Property',\n 'bpmn:CategoryValue'\n ]);\n};\n\n/**\n * @param {ModdleElement} element\n */\nBpmnFactory.prototype._ensureId = function(element) {\n if (element.id) {\n this._model.ids.claim(element.id, element);\n return;\n }\n\n // generate semantic ids for elements\n // bpmn:SequenceFlow -> SequenceFlow_ID\n var prefix;\n\n if (is(element, 'bpmn:Activity')) {\n prefix = 'Activity';\n } else if (is(element, 'bpmn:Event')) {\n prefix = 'Event';\n } else if (is(element, 'bpmn:Gateway')) {\n prefix = 'Gateway';\n } else if (isAny(element, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ])) {\n prefix = 'Flow';\n } else {\n prefix = (element.$type || '').replace(/^[^:]*:/g, '');\n }\n\n prefix += '_';\n\n if (!element.id && this._needsId(element)) {\n element.id = this._model.ids.nextPrefixed(prefix, element);\n }\n};\n\n/**\n * Create BPMN element.\n *\n * @param {string} type\n * @param {Object} [attrs]\n *\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.create = function(type, attrs) {\n var element = this._model.create(type, attrs || {});\n\n this._ensureId(element);\n\n return element;\n};\n\n/**\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiLabel = function() {\n return this.create('bpmndi:BPMNLabel', {\n bounds: this.createDiBounds()\n });\n};\n\n/**\n * @param {ModdleElement} semantic\n * @param {Object} [attrs]\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiShape = function(semantic, attrs) {\n return this.create('bpmndi:BPMNShape', assign({\n bpmnElement: semantic,\n bounds: this.createDiBounds()\n }, attrs));\n};\n\n/**\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiBounds = function(bounds) {\n return this.create('dc:Bounds', bounds);\n};\n\n/**\n * @param {Point[]} waypoints\n *\n * @return {ModdleElement[]}\n */\nBpmnFactory.prototype.createDiWaypoints = function(waypoints) {\n var self = this;\n\n return map(waypoints, function(pos) {\n return self.createDiWaypoint(pos);\n });\n};\n\n/**\n * @param {Point} point\n *\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiWaypoint = function(point) {\n return this.create('dc:Point', pick(point, [ 'x', 'y' ]));\n};\n\n/**\n * @param {ModdleElement} semantic\n * @param {Object} [attrs]\n *\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiEdge = function(semantic, attrs) {\n return this.create('bpmndi:BPMNEdge', assign({\n bpmnElement: semantic,\n waypoint: this.createDiWaypoints([])\n }, attrs));\n};\n\n/**\n * @param {ModdleElement} semantic\n * @param {Object} [attrs]\n *\n * @return {ModdleElement}\n */\nBpmnFactory.prototype.createDiPlane = function(semantic, attrs) {\n return this.create('bpmndi:BPMNPlane', assign({\n bpmnElement: semantic\n }, attrs));\n};\n" }, { "path": "lib/features/modeling/BpmnLayouter.js", "content": "import inherits from 'inherits-browser';\n\nimport {\n assign\n} from 'min-dash';\n\nimport BaseLayouter from 'diagram-js/lib/layout/BaseLayouter';\n\nimport {\n repairConnection,\n withoutRedundantPoints\n} from 'diagram-js/lib/layout/ManhattanLayout';\n\nimport {\n getMid,\n getOrientation\n} from 'diagram-js/lib/layout/LayoutUtil';\n\nimport {\n isExpanded\n} from '../../util/DiUtil';\n\nimport { is } from '../../util/ModelUtil';\n\nimport { isDirectionHorizontal } from './util/ModelingUtil';\n\n/**\n * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry\n *\n * @typedef {import('diagram-js/lib/util/Types').Point} Point\n *\n * @typedef {import('../../model/Types').Connection} Connection\n * @typedef {import('../../model/Types').Element} Element\n *\n * @typedef {import('diagram-js/lib/layout/BaseLayouter').LayoutConnectionHints} LayoutConnectionHints\n *\n * @typedef { {\n * source?: Element;\n * target?: Element;\n * waypoints?: Point[];\n * connectionStart?: Point;\n * connectionEnd?: Point;\n * } & LayoutConnectionHints } BpmnLayoutConnectionHints\n */\n\nvar ATTACH_ORIENTATION_PADDING = -10,\n BOUNDARY_TO_HOST_THRESHOLD = 40;\n\n// layout all connection between flow elements h:h, except for\n// (1) outgoing of boundary events -> layout based on attach orientation and target orientation\n// (2) incoming/outgoing of gateways -> v:h for outgoing, h:v for incoming\n// (3) loops connect sides clockwise\nvar PREFERRED_LAYOUTS_HORIZONTAL = {\n default: [ 'h:h' ],\n fromGateway: [ 'v:h' ],\n toGateway: [ 'h:v' ],\n loop: {\n fromTop: [ 't:r' ],\n fromRight: [ 'r:b' ],\n fromLeft: [ 'l:t' ],\n fromBottom: [ 'b:l' ]\n },\n boundaryLoop: {\n alternateHorizontalSide: 'b',\n alternateVerticalSide: 'l',\n default: 'v'\n },\n messageFlow: [ 'straight', 'v:v' ],\n subProcess: [ 'straight', 'h:h' ],\n isHorizontal: true\n};\n\n// for vertical layouts, switch h and v and loop counter-clockwise\nvar PREFERRED_LAYOUTS_VERTICAL = {\n default: [ 'v:v' ],\n fromGateway: [ 'h:v' ],\n toGateway: [ 'v:h' ],\n loop: {\n fromTop: [ 't:l' ],\n fromRight: [ 'r:t' ],\n fromLeft: [ 'l:b' ],\n fromBottom: [ 'b:r' ]\n },\n boundaryLoop: {\n alternateHorizontalSide: 't',\n alternateVerticalSide: 'r',\n default: 'h'\n },\n messageFlow: [ 'straight', 'h:h' ],\n subProcess: [ 'straight', 'v:v' ],\n isHorizontal: false\n};\n\nvar oppositeOrientationMapping = {\n 'top': 'bottom',\n 'top-right': 'bottom-left',\n 'top-left': 'bottom-right',\n 'right': 'left',\n 'bottom': 'top',\n 'bottom-right': 'top-left',\n 'bottom-left': 'top-right',\n 'left': 'right'\n};\n\nvar orientationDirectionMapping = {\n top: 't',\n right: 'r',\n bottom: 'b',\n left: 'l'\n};\n\nexport default function BpmnLayouter(elementRegistry) {\n this._elementRegistry = elementRegistry;\n}\n\ninherits(BpmnLayouter, BaseLayouter);\n\n/**\n * Returns waypoints of laid out connection.\n *\n * @param {Connection} connection\n * @param {BpmnLayoutConnectionHints} [hints]\n *\n * @return {Point[]}\n */\nBpmnLayouter.prototype.layoutConnection = function(connection, hints) {\n if (!hints) {\n hints = {};\n }\n\n var source = hints.source || connection.source,\n target = hints.target || connection.target,\n waypoints = hints.waypoints || connection.waypoints,\n connectionStart = hints.connectionStart,\n connectionEnd = hints.connectionEnd,\n elementRegistry = this._elementRegistry;\n\n var manhattanOptions,\n updatedWaypoints;\n\n if (!connectionStart) {\n connectionStart = getConnectionDocking(waypoints && waypoints[ 0 ], source);\n }\n\n if (!connectionEnd) {\n connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);\n }\n\n if (is(connection, 'bpmn:Association') ||\n is(connection, 'bpmn:DataAssociation')) {\n\n if (waypoints && !isCompensationAssociation(source, target)) {\n return [].concat([ connectionStart ], waypoints.slice(1, -1), [ connectionEnd ]);\n }\n }\n\n var layout = isDirectionHorizontal(source, elementRegistry) ? PREFERRED_LAYOUTS_HORIZONTAL : PREFERRED_LAYOUTS_VERTICAL;\n\n if (is(connection, 'bpmn:MessageFlow')) {\n manhattanOptions = getMessageFlowManhattanOptions(source, target, layout);\n } else if (is(connection, 'bpmn:SequenceFlow') || isCompensationAssociation(source, target)) {\n\n if (source === target) {\n manhattanOptions = {\n preferredLayouts: getLoopPreferredLayout(source, connection, layout)\n };\n } else if (is(source, 'bpmn:BoundaryEvent')) {\n manhattanOptions = {\n preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd, layout)\n };\n } else if (isExpandedSubProcess(source) || isExpandedSubProcess(target)) {\n manhattanOptions = {\n preferredLayouts: layout.subProcess,\n preserveDocking: getSubProcessPreserveDocking(source)\n };\n } else if (is(source, 'bpmn:Gateway')) {\n manhattanOptions = {\n preferredLayouts: layout.fromGateway\n };\n } else if (is(target, 'bpmn:Gateway')) {\n manhattanOptions = {\n preferredLayouts: layout.toGateway\n };\n } else {\n manhattanOptions = {\n preferredLayouts: layout.default\n };\n }\n }\n\n if (manhattanOptions) {\n manhattanOptions = assign(manhattanOptions, hints);\n\n updatedWaypoints = withoutRedundantPoints(repairConnection(\n source,\n target,\n connectionStart,\n connectionEnd,\n waypoints,\n manhattanOptions\n ));\n }\n\n return updatedWaypoints || [ connectionStart, connectionEnd ];\n};\n\n\n// helpers //////////\n\nfunction getAttachOrientation(attachedElement) {\n var hostElement = attachedElement.host;\n\n return getOrientation(getMid(attachedElement), hostElement, ATTACH_ORIENTATION_PADDING);\n}\n\nfunction getMessageFlowManhattanOptions(source, target, layout) {\n return {\n preferredLayouts: layout.messageFlow,\n preserveDocking: getMessageFlowPreserveDocking(source, target)\n };\n}\n\nfunction getMessageFlowPreserveDocking(source, target) {\n\n // (1) docking element connected to participant has precedence\n if (is(target, 'bpmn:Participant')) {\n return 'source';\n }\n\n if (is(source, 'bpmn:Participant')) {\n return 'target';\n }\n\n // (2) docking element connected to expanded sub-process has precedence\n if (isExpandedSubProcess(target)) {\n return 'source';\n }\n\n if (isExpandedSubProcess(source)) {\n return 'target';\n }\n\n // (3) docking event has precedence\n if (is(target, 'bpmn:Event')) {\n return 'target';\n }\n\n if (is(source, 'bpmn:Event')) {\n return 'source';\n }\n\n return null;\n}\n\nfunction getSubProcessPreserveDocking(source) {\n return isExpandedSubProcess(source) ? 'target' : 'source';\n}\n\nfunction getConnectionDocking(point, shape) {\n return point ? (point.original || point) : getMid(shape);\n}\n\nfunction isCompensationAssociation(source, target) {\n return is(target, 'bpmn:Activity') &&\n is(source, 'bpmn:BoundaryEvent') &&\n target.businessObject.isForCompensation;\n}\n\nfunction isExpandedSubProcess(element) {\n return is(element, 'bpmn:SubProcess') && isExpanded(element);\n}\n\nfunction isSame(a, b) {\n return a === b;\n}\n\nfunction isAnyOrientation(orientation, orientations) {\n return orientations.indexOf(orientation) !== -1;\n}\n\nfunction getHorizontalOrientation(orientation) {\n var matches = /right|left/.exec(orientation);\n\n return matches && matches[0];\n}\n\nfunction getVerticalOrientation(orientation) {\n var matches = /top|bottom/.exec(orientation);\n\n return matches && matches[0];\n}\n\nfunction isOppositeOrientation(a, b) {\n return oppositeOrientationMapping[a] === b;\n}\n\nfunction isOppositeHorizontalOrientation(a, b) {\n var horizontalOrientation = getHorizontalOrientation(a);\n\n var oppositeHorizontalOrientation = oppositeOrientationMapping[horizontalOrientation];\n\n return b.indexOf(oppositeHorizontalOrientation) !== -1;\n}\n\nfunction isOppositeVerticalOrientation(a, b) {\n var verticalOrientation = getVerticalOrientation(a);\n\n var oppositeVerticalOrientation = oppositeOrientationMapping[verticalOrientation];\n\n return b.indexOf(oppositeVerticalOrientation) !== -1;\n}\n\nfunction isHorizontalOrientation(orientation) {\n return orientation === 'right' || orientation === 'left';\n}\n\nfunction getLoopPreferredLayout(source, connection, layout) {\n var waypoints = connection.waypoints;\n\n var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);\n\n if (orientation === 'top') {\n return layout.loop.fromTop;\n } else if (orientation === 'right') {\n return layout.loop.fromRight;\n } else if (orientation === 'left') {\n return layout.loop.fromLeft;\n }\n\n return layout.loop.fromBottom;\n}\n\nfunction getBoundaryEventPreferredLayouts(source, target, end, layout) {\n var sourceMid = getMid(source),\n targetMid = getMid(target),\n attachOrientation = getAttachOrientation(source),\n sourceLayout,\n targetLayout;\n\n var isLoop = isSame(source.host, target);\n\n var attachedToSide = isAnyOrientation(attachOrientation, [ 'top', 'right', 'bottom', 'left' ]);\n\n var targetOrientation = getOrientation(targetMid, sourceMid, {\n x: source.width / 2 + target.width / 2,\n y: source.height / 2 + target.height / 2\n });\n\n if (isLoop) {\n return getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end, layout);\n }\n\n // source layout\n sourceLayout = getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide, layout.isHorizontal);\n\n // target layout\n targetLayout = getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, layout.isHorizontal);\n\n return [ sourceLayout + ':' + targetLayout ];\n}\n\nfunction getBoundaryEventLoopLayout(attachOrientation, attachedToSide, source, target, end, layout) {\n var orientation = attachedToSide ? attachOrientation : layout.isHorizontal ? getVerticalOrientation(attachOrientation) : getHorizontalOrientation(attachOrientation),\n sourceLayout = orientationDirectionMapping[ orientation ],\n targetLayout;\n\n if (attachedToSide) {\n if (isHorizontalOrientation(attachOrientation)) {\n targetLayout = shouldConnectToSameSide('y', source, target, end) ? 'h' : layout.boundaryLoop.alternateHorizontalSide;\n } else {\n targetLayout = shouldConnectToSameSide('x', source, target, end) ? 'v' : layout.boundaryLoop.alternateVerticalSide;\n }\n } else {\n targetLayout = layout.boundaryLoop.default;\n }\n\n return [ sourceLayout + ':' + targetLayout ];\n}\n\nfunction shouldConnectToSameSide(axis, source, target, end) {\n var threshold = BOUNDARY_TO_HOST_THRESHOLD;\n\n return !(\n areCloseOnAxis(axis, end, target, threshold) ||\n areCloseOnAxis(axis, end, {\n x: target.x + target.width,\n y: target.y + target.height\n }, threshold) ||\n areCloseOnAxis(axis, end, getMid(source), threshold)\n );\n}\n\nfunction areCloseOnAxis(axis, a, b, threshold) {\n return Math.abs(a[ axis ] - b[ axis ]) < threshold;\n}\n\nfunction getBoundaryEventSourceLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {\n\n // attached to either top, right, bottom or left side\n if (attachedToSide) {\n return orientationDirectionMapping[ attachOrientation ];\n }\n\n // attached to either top-right, top-left, bottom-right or bottom-left corner\n\n var verticalAttachOrientation = getVerticalOrientation(attachOrientation),\n horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),\n verticalTargetOrientation = getVerticalOrientation(targetOrientation),\n horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);\n\n if (isHorizontal) {\n\n // same vertical or opposite horizontal orientation\n if (\n isSame(verticalAttachOrientation, verticalTargetOrientation) ||\n isOppositeOrientation(horizontalAttachOrientation, horizontalTargetOrientation)\n ) {\n return orientationDirectionMapping[ verticalAttachOrientation ];\n }\n } else {\n\n // same horizontal or opposite vertical orientation\n if (\n isSame(horizontalAttachOrientation, horizontalTargetOrientation) ||\n isOppositeOrientation(verticalAttachOrientation, verticalTargetOrientation)\n ) {\n return orientationDirectionMapping[ horizontalAttachOrientation ];\n }\n }\n\n // fallback\n return orientationDirectionMapping[ isHorizontal ? horizontalAttachOrientation : verticalAttachOrientation ];\n}\n\nfunction getBoundaryEventTargetLayout(attachOrientation, targetOrientation, attachedToSide, isHorizontal) {\n\n // attached to either top, right, bottom or left side\n if (attachedToSide) {\n if (isHorizontalOrientation(attachOrientation)) {\n\n // orientation is right or left\n\n // opposite horizontal orientation or same orientation\n if (\n isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||\n isSame(attachOrientation, targetOrientation)\n ) {\n return 'h';\n }\n\n // fallback\n return 'v';\n } else {\n\n // orientation is top or bottom\n\n // opposite vertical orientation or same orientation\n if (\n isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||\n isSame(attachOrientation, targetOrientation)\n ) {\n return 'v';\n }\n\n // fallback\n return 'h';\n }\n }\n\n // attached to either top-right, top-left, bottom-right or bottom-left corner,\n // or strictly above/below or left/right of the target. In the corner case,\n // the orientation is compared on the counter-axis to decide the layout.\n\n var verticalAttachOrientation = getVerticalOrientation(attachOrientation),\n horizontalAttachOrientation = getHorizontalOrientation(attachOrientation),\n verticalTargetOrientation = getVerticalOrientation(targetOrientation),\n horizontalTargetOrientation = getHorizontalOrientation(targetOrientation);\n\n // If the target is strictly above/below (no horizontal orientation)\n if (verticalTargetOrientation && !horizontalTargetOrientation) {\n return 'v';\n }\n\n // If the target is strictly left/right (no vertical orientation)\n if (horizontalTargetOrientation && !verticalTargetOrientation) {\n return 'h';\n }\n\n\n if (isHorizontal) {\n if (isSame(verticalAttachOrientation, verticalTargetOrientation)) {\n return 'h';\n } else {\n return 'v';\n }\n } else {\n if (isSame(horizontalAttachOrientation, horizontalTargetOrientation)) {\n return 'v';\n } else {\n return 'h';\n }\n }\n}\n\nBpmnLayouter.$inject = [ 'elementRegistry' ];\n" }, { "path": "lib/features/modeling/BpmnUpdater.js", "content": "import {\n assign,\n forEach\n} from 'min-dash';\n\nimport inherits from 'inherits-browser';\n\nimport {\n add as collectionAdd,\n remove as collectionRemove\n} from 'diagram-js/lib/util/Collections';\n\nimport {\n getBusinessObject,\n getDi,\n is\n} from '../../util/ModelUtil';\n\nimport { isAny } from './util/ModelingUtil';\n\nimport {\n getLabel,\n isLabel,\n isLabelExternal\n} from '../../util/LabelUtil';\n\nimport { isPlane } from '../../util/DrilldownUtil';\n\nimport { delta } from 'diagram-js/lib/util/PositionUtil';\n\nimport CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';\n\n/**\n * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus\n * @typedef {import('./BpmnFactory').default} BpmnFactory\n * @typedef {import('diagram-js/lib/layout/CroppingConnectionDocking').default} CroppingConnectionDocking\n *\n * @typedef {import('../../model/Types').Connection} Connection\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Shape} Shape\n * @typedef {import('../../model/Types').Parent} Parent\n * @typedef {import('../../model/Types').ModdleElement} ModdleElement\n */\n\n/**\n * A handler responsible for updating the underlying BPMN 2.0 XML & DI\n * once changes on the diagram happen.\n *\n * @param {EventBus} eventBus\n * @param {BpmnFactory} bpmnFactory\n * @param {CroppingConnectionDocking} connectionDocking\n */\nexport default function BpmnUpdater(\n eventBus,\n bpmnFactory,\n connectionDocking\n) {\n\n CommandInterceptor.call(this, eventBus);\n\n this._bpmnFactory = bpmnFactory;\n\n var self = this;\n\n\n // connection cropping //////////////////////\n\n // crop connection ends during create/update\n function cropConnection(e) {\n var context = e.context,\n hints = context.hints || {},\n connection;\n\n if (!context.cropped && hints.createElementsBehavior !== false) {\n connection = context.connection;\n connection.waypoints = connectionDocking.getCroppedWaypoints(connection);\n context.cropped = true;\n }\n }\n\n this.executed([\n 'connection.layout',\n 'connection.create'\n ], cropConnection);\n\n this.reverted([ 'connection.layout' ], function(e) {\n delete e.context.cropped;\n });\n\n\n\n // BPMN + DI update //////////////////////\n\n\n // update parent\n function updateParent(e) {\n var context = e.context;\n\n self.updateParent(context.shape || context.connection, context.oldParent);\n }\n\n function reverseUpdateParent(e) {\n var context = e.context;\n\n var element = context.shape || context.connection,\n\n // oldParent is the (old) new parent, because we are undoing\n oldParent = context.parent || context.newParent;\n\n self.updateParent(element, oldParent);\n }\n\n this.executed([\n 'shape.move',\n 'shape.create',\n 'shape.delete',\n 'connection.create',\n 'connection.move',\n 'connection.delete'\n ], ifBpmn(updateParent));\n\n this.reverted([\n 'shape.move',\n 'shape.create',\n 'shape.delete',\n 'connection.create',\n 'connection.move',\n 'connection.delete'\n ], ifBpmn(reverseUpdateParent));\n\n /*\n * ## Updating Parent\n *\n * When morphing a Process into a Collaboration or vice-versa,\n * make sure that both the *semantic* and *di* parent of each element\n * is updated.\n *\n */\n function updateRoot(event) {\n var context = event.context,\n oldRoot = context.oldRoot,\n children = oldRoot.children;\n\n forEach(children, function(child) {\n if (is(child, 'bpmn:BaseElement')) {\n self.updateParent(child);\n }\n });\n }\n\n this.executed([ 'canvas.updateRoot' ], updateRoot);\n this.reverted([ 'canvas.updateRoot' ], updateRoot);\n\n\n // update bounds\n function updateBounds(e) {\n var shape = e.context.shape;\n\n if (!is(shape, 'bpmn:BaseElement')) {\n return;\n }\n\n self.updateBounds(shape);\n }\n\n this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {\n\n // exclude labels because they're handled separately during shape.changed\n if (event.context.shape.type === 'label') {\n return;\n }\n\n updateBounds(event);\n }));\n\n this.reverted([ 'shape.move', 'shape.create', 'shape.resize' ], ifBpmn(function(event) {\n\n // exclude labels because they're handled separately during shape.changed\n if (event.context.shape.type === 'label') {\n return;\n }\n\n updateBounds(event);\n }));\n\n // Handle labels separately. This is necessary, because the label bounds have to be updated\n // every time its shape changes, not only on move, create and resize.\n eventBus.on('shape.changed', function(event) {\n if (event.element.type === 'label') {\n updateBounds({ context: { shape: event.element } });\n }\n });\n\n // attach / detach connection\n function updateConnection(e) {\n self.updateConnection(e.context);\n }\n\n this.executed([\n 'connection.create',\n 'connection.move',\n 'connection.delete',\n 'connection.reconnect'\n ], ifBpmn(updateConnection));\n\n this.reverted([\n 'connection.create',\n 'connection.move',\n 'connection.delete',\n 'connection.reconnect'\n ], ifBpmn(updateConnection));\n\n\n // update waypoints\n function updateConnectionWaypoints(e) {\n self.updateConnectionWaypoints(e.context.connection);\n }\n\n this.executed([\n 'connection.layout',\n 'connection.move',\n 'connection.updateWaypoints',\n ], ifBpmn(updateConnectionWaypoints));\n\n this.reverted([\n 'connection.layout',\n 'connection.move',\n 'connection.updateWaypoints',\n ], ifBpmn(updateConnectionWaypoints));\n\n // update conditional/default flows\n this.executed('connection.reconnect', ifBpmn(function(event) {\n var context = event.context,\n connection = context.connection,\n oldSource = context.oldSource,\n newSource = context.newSource,\n connectionBo = getBusinessObject(connection),\n oldSourceBo = getBusinessObject(oldSource),\n newSourceBo = getBusinessObject(newSource);\n\n // remove condition from connection on reconnect to new source\n // if new source can NOT have condional sequence flow\n if (connectionBo.conditionExpression && !isAny(newSourceBo, [\n 'bpmn:Activity',\n 'bpmn:ExclusiveGateway',\n 'bpmn:InclusiveGateway'\n ])) {\n context.oldConditionExpression = connectionBo.conditionExpression;\n\n delete connectionBo.conditionExpression;\n }\n\n // remove default from old source flow on reconnect to new source\n // if source changed\n if (oldSource !== newSource && oldSourceBo.default === connectionBo) {\n context.oldDefault = oldSourceBo.default;\n\n delete oldSourceBo.default;\n }\n }));\n\n this.reverted('connection.reconnect', ifBpmn(function(event) {\n var context = event.context,\n connection = context.connection,\n oldSource = context.oldSource,\n newSource = context.newSource,\n connectionBo = getBusinessObject(connection),\n oldSourceBo = getBusinessObject(oldSource),\n newSourceBo = getBusinessObject(newSource);\n\n // add condition to connection on revert reconnect to new source\n if (context.oldConditionExpression) {\n connectionBo.conditionExpression = context.oldConditionExpression;\n }\n\n // add default to old source on revert reconnect to new source\n if (context.oldDefault) {\n oldSourceBo.default = context.oldDefault;\n\n delete newSourceBo.default;\n }\n }));\n\n // update attachments\n function updateAttachment(e) {\n self.updateAttachment(e.context);\n }\n\n this.executed([ 'element.updateAttachment' ], ifBpmn(updateAttachment));\n this.reverted([ 'element.updateAttachment' ], ifBpmn(updateAttachment));\n\n\n // update BPMNLabel\n this.executed('element.updateLabel', ifBpmn(updateBPMNLabel));\n this.reverted('element.updateLabel', ifBpmn(updateBPMNLabel));\n\n function updateBPMNLabel(event) {\n const { element } = event.context,\n label = getLabel(element);\n const di = getDi(element),\n diLabel = di && di.get('label');\n\n if (isLabelExternal(element) || isPlane(element)) {\n return;\n }\n\n if (label && !diLabel) {\n di.set('label', bpmnFactory.create('bpmndi:BPMNLabel'));\n } else if (!label && diLabel) {\n di.set('label', undefined);\n }\n }\n}\n\ninherits(BpmnUpdater, CommandInterceptor);\n\nBpmnUpdater.$inject = [\n 'eventBus',\n 'bpmnFactory',\n 'connectionDocking'\n];\n\n\n// implementation //////////////////////\n\n/**\n * @param { {\n * shape: Shape;\n * host: Shape;\n * } } context\n */\nBpmnUpdater.prototype.updateAttachment = function(context) {\n\n var shape = context.shape,\n businessObject = shape.businessObject,\n host = shape.host;\n\n businessObject.attachedToRef = host && host.businessObject;\n};\n\n/**\n * @param {Element} element\n * @param {Parent} oldParent\n */\nBpmnUpdater.prototype.updateParent = function(element, oldParent) {\n\n // do not update BPMN 2.0 label parent\n if (isLabel(element)) {\n return;\n }\n\n // data stores in collaborations are handled separately by DataStoreBehavior\n if (is(element, 'bpmn:DataStoreReference') &&\n element.parent &&\n is(element.parent, 'bpmn:Collaboration')) {\n return;\n }\n\n var parentShape = element.parent;\n\n var businessObject = element.businessObject,\n di = getDi(element),\n parentBusinessObject = parentShape && parentShape.businessObject,\n parentDi = getDi(parentShape);\n\n if (is(element, 'bpmn:FlowNode')) {\n this.updateFlowNodeRefs(businessObject, parentBusinessObject, oldParent && oldParent.businessObject);\n }\n\n if (is(element, 'bpmn:DataOutputAssociation')) {\n if (element.source) {\n parentBusinessObject = element.source.businessObject;\n } else {\n parentBusinessObject = null;\n }\n }\n\n if (is(element, 'bpmn:DataInputAssociation')) {\n if (element.target) {\n parentBusinessObject = element.target.businessObject;\n } else {\n parentBusinessObject = null;\n }\n }\n\n this.updateSemanticParent(businessObject, parentBusinessObject);\n\n if (is(element, 'bpmn:DataObjectReference') && businessObject.dataObjectRef) {\n this.updateSemanticParent(businessObject.dataObjectRef, parentBusinessObject);\n }\n\n this.updateDiParent(di, parentDi);\n};\n\n/**\n * @param {Shape} shape\n */\nBpmnUpdater.prototype.updateBounds = function(shape) {\n\n var di = getDi(shape),\n embeddedLabelBounds = getEmbeddedLabelBounds(shape);\n\n // update embedded label bounds if possible\n if (embeddedLabelBounds) {\n var embeddedLabelBoundsDelta = delta(embeddedLabelBounds, di.get('bounds'));\n\n assign(embeddedLabelBounds, {\n x: shape.x + embeddedLabelBoundsDelta.x,\n y: shape.y + embeddedLabelBoundsDelta.y\n });\n }\n\n var target = isLabel(shape) ? this._getLabel(di) : di;\n\n var bounds = target.bounds;\n\n if (!bounds) {\n bounds = this._bpmnFactory.createDiBounds();\n target.set('bounds', bounds);\n }\n\n assign(bounds, {\n x: shape.x,\n y: shape.y,\n width: shape.width,\n height: shape.height\n });\n};\n\n/**\n * @param {ModdleElement} businessObject\n * @param {ModdleElement} newContainment\n * @param {ModdleElement} oldContainment\n */\nBpmnUpdater.prototype.updateFlowNodeRefs = function(businessObject, newContainment, oldContainment) {\n\n if (oldContainment === newContainment) {\n return;\n }\n\n var oldRefs, newRefs;\n\n if (is (oldContainment, 'bpmn:Lane')) {\n oldRefs = oldContainment.get('flowNodeRef');\n collectionRemove(oldRefs, businessObject);\n }\n\n if (is(newContainment, 'bpmn:Lane')) {\n newRefs = newContainment.get('flowNodeRef');\n collectionAdd(newRefs, businessObject);\n }\n};\n\n/**\n * @param {Connection} connection\n * @param {Element} newSource\n * @param {Element} newTarget\n */\nBpmnUpdater.prototype.updateDiConnection = function(connection, newSource, newTarget) {\n var connectionDi = getDi(connection),\n newSourceDi = getDi(newSource),\n newTargetDi = getDi(newTarget);\n\n if (connectionDi.sourceElement && connectionDi.sourceElement.bpmnElement !== getBusinessObject(newSource)) {\n connectionDi.sourceElement = newSource && newSourceDi;\n }\n\n if (connectionDi.targetElement && connectionDi.targetElement.bpmnElement !== getBusinessObject(newTarget)) {\n connectionDi.targetElement = newTarget && newTargetDi;\n }\n\n};\n\n/**\n * @param {ModdleElement} di\n * @param {ModdleElement} parentDi\n */\nBpmnUpdater.prototype.updateDiParent = function(di, parentDi) {\n\n if (parentDi && !is(parentDi, 'bpmndi:BPMNPlane')) {\n parentDi = parentDi.$parent;\n }\n\n if (di.$parent === parentDi) {\n return;\n }\n\n var planeElements = (parentDi || di.$parent).get('planeElement');\n\n if (parentDi) {\n planeElements.push(di);\n di.$parent = parentDi;\n } else {\n collectionRemove(planeElements, di);\n di.$parent = null;\n }\n};\n\n/**\n * @param {ModdleElement} element\n *\n * @return {ModdleElement}\n */\nfunction getDefinitions(element) {\n while (element && !is(element, 'bpmn:Definitions')) {\n element = element.$parent;\n }\n\n return element;\n}\n\n/**\n * @param {ModdleElement} container\n *\n * @return {ModdleElement}\n */\nBpmnUpdater.prototype.getLaneSet = function(container) {\n\n var laneSet, laneSets;\n\n // bpmn:Lane\n if (is(container, 'bpmn:Lane')) {\n laneSet = container.childLaneSet;\n\n if (!laneSet) {\n laneSet = this._bpmnFactory.create('bpmn:LaneSet');\n container.childLaneSet = laneSet;\n laneSet.$parent = container;\n }\n\n return laneSet;\n }\n\n // bpmn:Participant\n if (is(container, 'bpmn:Participant')) {\n container = container.processRef;\n }\n\n // bpmn:FlowElementsContainer\n laneSets = container.get('laneSets');\n laneSet = laneSets[0];\n\n if (!laneSet) {\n laneSet = this._bpmnFactory.create('bpmn:LaneSet');\n laneSet.$parent = container;\n laneSets.push(laneSet);\n }\n\n return laneSet;\n};\n\n/**\n * @param {ModdleElement} businessObject\n * @param {ModdleElement} newParent\n * @param {ModdleElement} visualParent\n */\nBpmnUpdater.prototype.updateSemanticParent = function(businessObject, newParent, visualParent) {\n\n var containment;\n\n if (businessObject.$parent === newParent) {\n return;\n }\n\n if (is(businessObject, 'bpmn:DataInput') || is(businessObject, 'bpmn:DataOutput')) {\n\n if (is(newParent, 'bpmn:Participant') && 'processRef' in newParent) {\n newParent = newParent.processRef;\n }\n\n // already in correct ioSpecification\n if ('ioSpecification' in newParent && newParent.ioSpecification === businessObject.$parent) {\n return;\n }\n }\n\n if (is(businessObject, 'bpmn:Lane')) {\n\n if (newParent) {\n newParent = this.getLaneSet(newParent);\n }\n\n containment = 'lanes';\n } else if (is(businessObject, 'bpmn:FlowElement')) {\n\n if (newParent) {\n\n if (is(newParent, 'bpmn:Participant')) {\n newParent = newParent.processRef;\n } else if (is(newParent, 'bpmn:Lane')) {\n do {\n\n // unwrap Lane -> LaneSet -> (Lane | FlowElementsContainer)\n newParent = newParent.$parent.$parent;\n } while (is(newParent, 'bpmn:Lane'));\n\n }\n }\n\n containment = 'flowElements';\n\n } else if (is(businessObject, 'bpmn:Artifact')) {\n\n while (newParent &&\n !is(newParent, 'bpmn:Process') &&\n !is(newParent, 'bpmn:SubProcess') &&\n !is(newParent, 'bpmn:Collaboration')) {\n\n if (is(newParent, 'bpmn:Participant')) {\n newParent = newParent.processRef;\n break;\n } else {\n newParent = newParent.$parent;\n }\n }\n\n containment = 'artifacts';\n } else if (is(businessObject, 'bpmn:MessageFlow')) {\n containment = 'messageFlows';\n } else if (is(businessObject, 'bpmn:Participant')) {\n containment = 'participants';\n\n // make sure the participants process is properly attached / detached\n // from the XML document\n\n var process = businessObject.processRef,\n definitions;\n\n if (process) {\n definitions = getDefinitions(businessObject.$parent || newParent);\n\n if (businessObject.$parent) {\n collectionRemove(definitions.get('rootElements'), process);\n process.$parent = null;\n }\n\n if (newParent) {\n collectionAdd(definitions.get('rootElements'), process);\n process.$parent = definitions;\n }\n }\n } else if (is(businessObject, 'bpmn:DataOutputAssociation')) {\n containment = 'dataOutputAssociations';\n } else if (is(businessObject, 'bpmn:DataInputAssociation')) {\n containment = 'dataInputAssociations';\n }\n\n if (!containment) {\n throw new Error(`no parent for <${ businessObject.id }> in <${ newParent.id }>`);\n }\n\n var children;\n\n if (businessObject.$parent) {\n\n // remove from old parent\n children = businessObject.$parent.get(containment);\n collectionRemove(children, businessObject);\n }\n\n if (!newParent) {\n businessObject.$parent = null;\n } else {\n\n // add to new parent\n children = newParent.get(containment);\n children.push(businessObject);\n businessObject.$parent = newParent;\n }\n\n if (visualParent) {\n var diChildren = visualParent.get(containment);\n\n collectionRemove(children, businessObject);\n\n if (newParent) {\n\n if (!diChildren) {\n diChildren = [];\n newParent.set(containment, diChildren);\n }\n\n diChildren.push(businessObject);\n }\n }\n};\n\n/**\n * @param {Connection} connection\n */\nBpmnUpdater.prototype.updateConnectionWaypoints = function(connection) {\n var di = getDi(connection);\n\n di.set('waypoint', this._bpmnFactory.createDiWaypoints(connection.waypoints));\n};\n\n/**\n * @param { {\n * connection: Connection;\n * parent: Parent;\n * newParent: Parent;\n * } } context\n */\nBpmnUpdater.prototype.updateConnection = function(context) {\n var connection = context.connection,\n businessObject = getBusinessObject(connection),\n newSource = connection.source,\n newSourceBo = getBusinessObject(newSource),\n newTarget = connection.target,\n newTargetBo = getBusinessObject(connection.target),\n visualParent;\n\n if (!is(businessObject, 'bpmn:DataAssociation')) {\n\n var inverseSet = is(businessObject, 'bpmn:SequenceFlow');\n\n if (businessObject.sourceRef !== newSourceBo) {\n if (inverseSet) {\n collectionRemove(businessObject.sourceRef && businessObject.sourceRef.get('outgoing'), businessObject);\n\n if (newSourceBo && newSourceBo.get('outgoing')) {\n newSourceBo.get('outgoing').push(businessObject);\n }\n }\n\n businessObject.sourceRef = newSourceBo;\n }\n\n if (businessObject.targetRef !== newTargetBo) {\n if (inverseSet) {\n collectionRemove(businessObject.targetRef && businessObject.targetRef.get('incoming'), businessObject);\n\n if (newTargetBo && newTargetBo.get('incoming')) {\n newTargetBo.get('incoming').push(businessObject);\n }\n }\n\n businessObject.targetRef = newTargetBo;\n }\n } else if (is(businessObject, 'bpmn:DataInputAssociation')) {\n\n // handle obnoxious isMsome sourceRef\n businessObject.get('sourceRef')[0] = newSourceBo;\n\n visualParent = context.parent || context.newParent || newTargetBo;\n\n this.updateSemanticParent(businessObject, newTargetBo, visualParent);\n } else if (is(businessObject, 'bpmn:DataOutputAssociation')) {\n visualParent = context.parent || context.newParent || newSourceBo;\n\n this.updateSemanticParent(businessObject, newSourceBo, visualParent);\n\n // targetRef = new target\n businessObject.targetRef = newTargetBo;\n }\n\n this.updateConnectionWaypoints(connection);\n\n this.updateDiConnection(connection, newSource, newTarget);\n};\n\n\n// helpers //////////////////////\n\nBpmnUpdater.prototype._getLabel = function(di) {\n if (!di.label) {\n di.label = this._bpmnFactory.createDiLabel();\n }\n\n return di.label;\n};\n\n\n/**\n * Call function if shape or connection is BPMN element.\n *\n * @param {Function} fn\n *\n * @return {Function}\n */\nfunction ifBpmn(fn) {\n\n return function(event) {\n\n var context = event.context,\n element = context.shape || context.connection || context.element;\n\n if (is(element, 'bpmn:BaseElement')) {\n fn(event);\n }\n };\n}\n\n/**\n * Return dc:Bounds of bpmndi:BPMNLabel if exists.\n *\n * @param {Shape} shape\n *\n * @return {ModdleElement|undefined}\n */\nfunction getEmbeddedLabelBounds(shape) {\n if (!is(shape, 'bpmn:Activity')) {\n return;\n }\n\n var di = getDi(shape);\n\n if (!di) {\n return;\n }\n\n var label = di.get('label');\n\n if (!label) {\n return;\n }\n\n return label.get('bounds');\n}" }, { "path": "lib/features/modeling/ElementFactory.js", "content": "import {\n assign,\n forEach,\n has,\n isDefined,\n isObject,\n omit\n} from 'min-dash';\n\nimport inherits from 'inherits-browser';\n\nimport {\n getBusinessObject,\n getDi,\n is\n} from '../../util/ModelUtil';\n\nimport {\n isAny\n} from '../modeling/util/ModelingUtil';\n\nimport {\n isExpanded\n} from '../../util/DiUtil';\n\nimport BaseElementFactory from 'diagram-js/lib/core/ElementFactory';\n\nimport {\n DEFAULT_LABEL_SIZE\n} from '../../util/LabelUtil';\n\nimport {\n ensureCompatDiRef\n} from '../../util/CompatibilityUtil';\n\n/**\n * @typedef {import('diagram-js/lib/util/Types').Dimensions} Dimensions\n *\n * @typedef {import('./BpmnFactory').default} BpmnFactory\n *\n * @typedef {import('../../model/Types').BpmnAttributes} BpmnAttributes\n * @typedef {import('../../model/Types').Connection} Connection\n * @typedef {import('../../model/Types').Element} Element\n * @typedef {import('../../model/Types').Label} Label\n * @typedef {import('../../model/Types').Root} Root\n * @typedef {import('../../model/Types').Shape} Shape\n * @typedef {import('../../model/Types').Moddle} Moddle\n * @typedef {import('../../model/Types').ModdleElement} ModdleElement\n */\n\n/**\n * A BPMN-specific element factory.\n *\n * @template {Connection} [T=Connection]\n * @template {Label} [U=Label]\n * @template {Root} [V=Root]\n * @template {Shape} [W=Shape]\n *\n * @extends {BaseElementFactory}\n *\n * @param {BpmnFactory} bpmnFactory\n * @param {Moddle} moddle\n */\nexport default function ElementFactory(bpmnFactory, moddle) {\n BaseElementFactory.call(this);\n\n this._bpmnFactory = bpmnFactory;\n this._moddle = moddle;\n}\n\ninherits(ElementFactory, BaseElementFactory);\n\nElementFactory.$inject = [\n 'bpmnFactory',\n 'moddle'\n];\n\nElementFactory.prototype._baseCreate = BaseElementFactory.prototype.create;\n\n/**\n * Create a root element.\n *\n * @overlord\n * @param {'root'} elementType\n * @param {Partial & Partial} [attrs]\n * @return {V}\n */\n\n/**\n * Create a shape.\n *\n * @overlord\n * @param {'shape'} elementType\n * @param {Partial & Partial} [attrs]\n * @return {W}\n */\n\n/**\n * Create a connection.\n *\n * @overlord\n * @param {'connection'} elementType\n * @param {Partial & Partial} [attrs]\n * @return {T}\n */\n\n/**\n * Create a label.\n *\n * @param {'label'} elementType\n * @param {Partial