{"_id":"@bpmn-io/diagram-js-canvas-lock","_rev":"3-66d607f19dd4d32dd70793106e454af9","name":"@bpmn-io/diagram-js-canvas-lock","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bpmn-io/diagram-js-canvas-lock","version":"0.1.0","keywords":["diagram-js","canvas","lock"],"author":{"name":"Philipp Fromme","email":"philipp.fromme@camunda.com"},"license":"MIT","_id":"@bpmn-io/diagram-js-canvas-lock@0.1.0","maintainers":[{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"},{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"vsgoulart","email":"vinicius@vsgoulart.com"},{"name":"barinali","email":"ali.barin53@gmail.com"},{"name":"jarekdanielak","email":"jarek.danielak@camunda.com"},{"name":"ev-camunda","email":"ev.bilske@camunda.com"},{"name":"alekseymanetov","email":"alekseyManetov@gmail.com"}],"dist":{"shasum":"88e2a7e81763dca530c7092786f26fe70d34e919","tarball":"https://registry.npmjs.org/@bpmn-io/diagram-js-canvas-lock/-/diagram-js-canvas-lock-0.1.0.tgz","fileCount":6,"integrity":"sha512-97sF+juqMeet4XdbU9lWUM8jWXLm7pNLBsDIcWz7+sGPqoZwAB8bQusOIMQiAPU9YGgliwj3b0o0kLP5h2jk1g==","signatures":[{"sig":"MEUCIQCyMBgTeYJ+i+HzOL1Ys19IiIJ1lIV2LQFyQYOS5cPKswIgbXUBrgyqTxt+B8B3p4eRz+CANzcrEkOcyd0xZfBRlmc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10415},"main":"lib/index.js","type":"module","module":"lib/index.js","exports":{".":"./lib/index.js","./lib/*":"./lib/*","./assets/*":"./assets/*","./package.json":"./package.json"},"gitHead":"47630db44c5228a4b53e5be303e7025482edd5fe","scripts":{"all":"run-s lint test","dev":"npm test -- --auto-watch --no-single-run","lint":"eslint .","test":"karma start karma.config.cjs","start":"cross-env SINGLE_START=modeler npm run dev"},"_npmUser":{"name":"philippfromme","email":"philippfromme@outlook.com"},"_npmVersion":"11.16.0","description":"A diagram-js plugin for locking the canvas","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^6.2.2","karma":"^6.4.4","mocha":"^11.7.5","sinon":"^22.0.0","eslint":"^9.39.4","bpmn-js":"^18.19.0","webpack":"^5.106.2","cross-env":"^10.1.0","sinon-chai":"^4.0.1","karma-mocha":"^2.0.1","babel-loader":"^10.1.1","npm-run-all2":"^9.0.2","karma-webpack":"^5.0.1","karma-coverage":"^2.2.1","karma-tldr-reporter":"^1.0.0","karma-debug-launcher":"^0.0.5","babel-plugin-istanbul":"^8.0.0","eslint-plugin-bpmn-io":"^2.2.0","karma-env-preprocessor":"^0.1.1","karma-chrome-launcher-2":"^3.3.0","mocha-test-container-support":"^0.2.0"},"peerDependencies":{"diagram-js":">= 15.16.0","diagram-js-direct-editing":">= 3.4.0"},"peerDependenciesMeta":{"diagram-js-direct-editing":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/diagram-js-canvas-lock_0.1.0_1782906566288_0.34892772305207975","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-01T11:49:26.083Z","modified":"2026-07-08T15:59:00.947Z","0.1.0":"2026-07-01T11:49:26.434Z"},"author":{"name":"Philipp Fromme","email":"philipp.fromme@camunda.com"},"license":"MIT","keywords":["diagram-js","canvas","lock"],"description":"A diagram-js plugin for locking the canvas","maintainers":[{"email":"bpmnio@camunda.com","name":"bpmn-io-admin"},{"email":"git_nikku@nixis.de","name":"nikku"},{"email":"maciejbarel@gmail.com","name":"barmac"},{"email":"philippfromme@outlook.com","name":"philippfromme"},{"email":"maximilian.trumpf@camunda.com","name":"maxtru"},{"email":"valentin.serra@camunda.com","name":"skaiir-camunda"},{"email":"vinicius@vsgoulart.com","name":"vsgoulart"},{"email":"ali.barin53@gmail.com","name":"barinali"},{"email":"ev.bilske@camunda.com","name":"ev-camunda"},{"email":"jarek.danielak@camunda.com","name":"jarekdanielak"},{"email":"alekseyManetov@gmail.com","name":"alekseymanetov"}],"readme":"# diagram-js-canvas-lock\r\n\r\n[![CI](https://github.com/bpmn-io/diagram-js-canvas-lock/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-canvas-lock/actions/workflows/CI.yml)\r\n\r\nThis module extends [diagram-js](https://github.com/bpmn-io/diagram-js)-based editors with a canvas lock feature.\r\n\r\n## Features\r\n\r\n* lock and unlock canvas programmatically\r\n\r\n## Installation\r\n\r\nInstall via npm:\r\n\r\n```sh\r\nnpm install @bpmn-io/diagram-js-canvas-lock\r\n```\r\n\r\n## Usage\r\n\r\nUse as an extension for [bpmn-js](https://github.com/bpmn-io/bpmn-js):\r\n\r\n```javascript\r\nimport CanvasLockModule from '@bpmn-io/diagram-js-canvas-lock';\r\n\r\nconst modeler = new BpmnModeler({\r\n  additionalModules: [\r\n    CanvasLockModule\r\n  ]\r\n});\r\n```\r\n\r\nLock and unlock the canvas through the `canvasLock` service:\r\n\r\n```javascript\r\nconst canvasLock = modeler.get('canvasLock');\r\n\r\ncanvasLock.lock();\r\n\r\ncanvasLock.isLocked(); // true\r\n\r\ncanvasLock.unlock();\r\n```\r\n\r\n## Integrating with diagram-js-canvas-lock\r\n\r\nBy design, this module has no knowledge of the other diagram-js plugins running\r\nalongside it. Instead it exposes a small, stable contract that any plugin can\r\nintegrate with. If your plugin adds interactive UI (pads, overlays, menus, ...),\r\nrespect the lock through one or more of the following.\r\n\r\n### 1. Query the lock state (pull)\r\n\r\nGuard your own entry points with `canvasLock.isLocked()`:\r\n\r\n```javascript\r\nMyPad.prototype.canOpen = function(target) {\r\n  if (this._canvasLock.isLocked()) {\r\n    return false;\r\n  }\r\n\r\n  // ...\r\n};\r\n```\r\n\r\n`canvasLock` is an optional dependency – resolve it via the injector so your\r\nplugin keeps working in editors without canvas lock:\r\n\r\n```javascript\r\nfunction MyPad(injector) {\r\n  this._canvasLock = injector.get('canvasLock', false);\r\n}\r\n\r\nMyPad.prototype.isLocked = function() {\r\n  return this._canvasLock && this._canvasLock.isLocked();\r\n};\r\n\r\nMyPad.$inject = [ 'injector' ];\r\n```\r\n\r\n### 2. React to lock changes (push)\r\n\r\nSubscribe to the `canvasLock.changed` event to tear down or restore UI when the\r\nlock is toggled:\r\n\r\n```javascript\r\neventBus.on('canvasLock.changed', function(event) {\r\n  if (event.locked) {\r\n    myPad.close();\r\n  }\r\n});\r\n```\r\n\r\n### 3. Make an interaction vetoable (`*.allowed` convention)\r\n\r\nFollowing the diagram-js convention, fire an `<x>.allowed` event before opening\r\nand bail if any listener returns `false`. Canvas lock (and other features) can\r\nthen veto the interaction without knowing about your plugin:\r\n\r\n```javascript\r\nMyPad.prototype.open = function(target) {\r\n  if (this._eventBus.fire('myPad.open.allowed', { target: target }) === false) {\r\n    return;\r\n  }\r\n\r\n  // ...\r\n};\r\n```\r\n\r\n### 4. Style locked state (CSS hook)\r\n\r\nWhile locked, the canvas container carries the `djs-canvas-locked` class. Use it\r\nto hide or dim plugin UI purely visually:\r\n\r\n```css\r\n.djs-canvas-locked .my-pad {\r\n  display: none;\r\n}\r\n```\r\n\r\n### Public contract summary\r\n\r\n| Surface | Type | Description |\r\n| --- | --- | --- |\r\n| `canvasLock.lock()` / `unlock()` | API | Toggle the lock. |\r\n| `canvasLock.isLocked()` | API | Query the current lock state. |\r\n| `canvasLock.changed` | Event | Fired with `{ locked }` whenever the lock toggles. |\r\n| `djs-canvas-locked` | CSS class | Added to the canvas container while locked. |\r\n\r\n## Development\r\n\r\n```sh\r\nnpm install\r\n\r\nnpm start\r\n```\r\n\r\n\r\n## License\r\n\r\nMIT","readmeFilename":"README.md"}