图表-js- canvas- lock

此模块扩展 图表-js- 有画布锁功能的基于编辑器.

特征

• 程序锁定并解锁画布

安装

通过 npm 安装 :

npm install @bpmn-io/diagram-js-canvas-lock

使用量

用作扩展名 日记数字 :

import CanvasLockModule from '@bpmn-io/diagram-js-canvas-lock';

const modeler = new BpmnModeler({
  additionalModules: [
    CanvasLockModule
  ]
});

锁定并解锁画布 canvasLock 服务 :

const canvasLock = modeler.get('canvasLock');

canvasLock.lock();

canvasLock.isLocked(); // true

canvasLock.unlock();

与图-js- Canvas- 锁结合

根据设计,本模块对运行中的其他图-js插件一无所知 并肩作战 相反,它暴露了一个小而稳定的合同,任何插件都可以 整合到一起。 如果您的插件添加了交互式的 UI( 纸片、 覆盖、 菜单, ...) , 尊重锁通过下列一个或多个.

1. 查询锁定状态( pull)

保护自己的入境点 canvasLock.isLocked()数字 :

MyPad.prototype.canOpen = function(target) {
  if (this._canvasLock.isLocked()) {
    return false;
  }

  // ...
};

canvasLock 是可选的依赖性 — 通过注射器解决它, 所以您 插件在编辑器中继续工作, 没有画布锁 :

function MyPad(injector) {
  this._canvasLock = injector.get('canvasLock', false);
}

MyPad.prototype.isLocked = function() {
  return this._canvasLock && this._canvasLock.isLocked();
};

MyPad.$inject = [ 'injector' ];

2. 对锁定变化的反应(推)

订阅 canvasLock.changed 打开或恢复用户界面的事件 锁定已切换 :

eventBus.on('canvasLock.changed', function(event) {
  if (event.locked) {
    myPad.close();
  }
});

3. 使互动具有否决权(*.allowed (公约)

在图 -js公约之后,发射 <x>.allowed 打开前的事件 如果有听众返回,则保释 false. Canvas 锁(和其他特性)可以 然后在不知道您的插件的情况下否决交互:

MyPad.prototype.open = function(target) {
  if (this._eventBus.fire('myPad.open.allowed', { target: target }) === false) {
    return;
  }

  // ...
};

4. 样式锁定状态( CSS sook)

在锁定时,帆布容器载有 djs-canvas-locked 课。 用这个 以隐藏或淡化插件 :

.djs-canvas-locked .my-pad {
  display: none;
}

公共合同摘要

发展

npm install

npm start

许可证

麻省理工学院