@jylups/cmmn-js 0.0.0-stage → 0.21.0

package/lib/features/editor-actions/CmmnEditorActions.js

@@ -0,0 +1,105 @@
+var inherits = require('inherits');
+
+var EditorActions = require('diagram-js/lib/features/editor-actions/EditorActions').default;
+
+
+/**
+ * Registers and executes CMMN specific editor actions.
+ *
+ * @param {Injector} injector
+ */
+function CmmnEditorActions(injector) {
+  injector.invoke(EditorActions, this);
+}
+
+inherits(CmmnEditorActions, EditorActions);
+
+CmmnEditorActions.$inject = [
+  'injector'
+];
+
+module.exports = CmmnEditorActions;
+
+
+/**
+ * Register default actions.
+ *
+ * @param {Injector} injector
+ */
+CmmnEditorActions.prototype._registerDefaultActions = function(injector) {
+
+  // (0) invoke super method
+
+  EditorActions.prototype._registerDefaultActions.call(this, injector);
+
+  // (1) retrieve optional components to integrate with
+
+  var canvas = injector.get('canvas', false);
+  var elementRegistry = injector.get('elementRegistry', false);
+  var selection = injector.get('selection', false);
+  var spaceTool = injector.get('spaceTool', false);
+  var lassoTool = injector.get('lassoTool', false);
+  var handTool = injector.get('handTool', false);
+  var globalConnect = injector.get('globalConnect', false);
+  var directEditing = injector.get('directEditing', false);
+  var searchPad = injector.get('searchPad', false);
+
+  // (2) check components and register actions
+
+  if (canvas && elementRegistry && selection) {
+    this._registerAction('selectElements', function() {
+      // select all elements except for the invisible
+      // root element
+      var rootElement = canvas.getRootElement();
+
+      var elements = elementRegistry.filter(function(element) {
+        return element !== rootElement;
+      });
+
+      selection.select(elements);
+
+      return elements;
+    });
+  }
+
+  if (spaceTool) {
+    this._registerAction('spaceTool', function() {
+      spaceTool.toggle();
+    });
+  }
+
+  if (lassoTool) {
+    this._registerAction('lassoTool', function() {
+      lassoTool.toggle();
+    });
+  }
+
+  if (handTool) {
+    this._registerAction('handTool', function() {
+      handTool.toggle();
+    });
+  }
+
+  if (globalConnect) {
+    this._registerAction('globalConnectTool', function() {
+      globalConnect.toggle();
+    });
+  }
+
+  if (selection && directEditing) {
+    this._registerAction('directEditing', function() {
+      var currentSelection = selection.get();
+
+      if (currentSelection.length) {
+        directEditing.activate(currentSelection[0]);
+      }
+    });
+  }
+
+  if (searchPad) {
+    this._registerAction('find', function() {
+      searchPad.toggle();
+    });
+  }
+
+};

package/lib/features/editor-actions/index.js

@@ -0,0 +1,10 @@
+var EditorActionsModule = require('diagram-js/lib/features/editor-actions').default;
+
+var CmmnEditorActions = require('./CmmnEditorActions');
+
+module.exports = {
+  __depends__: [
+    EditorActionsModule
+  ],
+  editorActions: [ 'type', CmmnEditorActions ]
+};

package/lib/features/keyboard/CmmnKeyboardBindings.js

@@ -0,0 +1,159 @@
+var inherits = require('inherits');
+
+var KeyboardBindings = require('diagram-js/lib/features/keyboard/KeyboardBindings').default;
+
+
+/**
+ * CMMN specific keyboard bindings.
+ *
+ * @param {Injector} injector
+ */
+function CmmnKeyboardBindings(injector) {
+  injector.invoke(KeyboardBindings, this);
+}
+
+inherits(CmmnKeyboardBindings, KeyboardBindings);
+
+CmmnKeyboardBindings.$inject = [
+  'injector'
+];
+
+module.exports = CmmnKeyboardBindings;
+
+/**
+ * Register available keyboard bindings.
+ *
+ * @param {Keyboard} keyboard
+ * @param {EditorActions} editorActions
+ */
+CmmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActions) {
+
+  // inherit default bindings
+  KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
+
+  /**
+   * Add keyboard binding if respective editor action
+   * is registered.
+   *
+   * @param {String} action name
+   * @param {Function} fn that implements the key binding
+   */
+  function addListener(action, fn) {
+
+    if (editorActions.isRegistered(action)) {
+      keyboard.addListener(fn);
+    }
+  }
+
+  // select all elements
+  // CTRL + A
+  addListener('selectElements', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.isKey(['a', 'A'], event) && keyboard.isCmd(event)) {
+      editorActions.trigger('selectElements');
+
+      return true;
+    }
+  });
+
+  // search labels
+  // CTRL + F
+  addListener('find', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.isKey(['f', 'F'], event) && keyboard.isCmd(event)) {
+      editorActions.trigger('find');
+
+      return true;
+    }
+  });
+
+  // activate space tool
+  // S
+  addListener('spaceTool', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['s', 'S'], event)) {
+      editorActions.trigger('spaceTool');
+
+      return true;
+    }
+  });
+
+  // activate lasso tool
+  // L
+  addListener('lassoTool', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['l', 'L'], event)) {
+      editorActions.trigger('lassoTool');
+
+      return true;
+    }
+  });
+
+  // activate hand tool
+  // H
+  addListener('handTool', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['h', 'H'], event)) {
+      editorActions.trigger('handTool');
+
+      return true;
+    }
+  });
+
+  // activate global connect tool
+  // C
+  addListener('globalConnectTool', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['c', 'C'], event)) {
+      editorActions.trigger('globalConnectTool');
+
+      return true;
+    }
+  });
+
+  // activate direct editing
+  // E
+  addListener('directEditing', function(context) {
+
+    var event = context.keyEvent;
+
+    if (keyboard.hasModifier(event)) {
+      return;
+    }
+
+    if (keyboard.isKey(['e', 'E'], event)) {
+      editorActions.trigger('directEditing');
+
+      return true;
+    }
+  });
+
+};

package/lib/features/keyboard/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+  __depends__: [
+    require('diagram-js/lib/features/keyboard').default
+  ],
+  __init__: [ 'keyboardBindings' ],
+  keyboardBindings: [ 'type', require('./CmmnKeyboardBindings') ]
+};

package/lib/features/label-editing/LabelEditingProvider.js

@@ -0,0 +1,221 @@
+'use strict';
+
+var UpdateLabelHandler = require('./cmd/UpdateLabelHandler');
+
+var LabelUtil = require('./LabelUtil');
+
+var isCasePlanModel = require('../../util/ModelUtil').isCasePlanModel,
+    is = require('../../util/ModelUtil').is,
+    getDefinition = require('../../util/ModelUtil').getDefinition;
+
+var assign = require('min-dash').assign;
+
+var LINE_HEIGHT = 14,
+    PADDING = 6;
+
+function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
+
+  this._canvas = canvas;
+  this._commandStack = commandStack;
+
+  directEditing.registerProvider(this);
+
+  commandStack.registerHandler('element.updateLabel', UpdateLabelHandler);
+
+  // listen to dblclick on non-root elements
+  eventBus.on('element.dblclick', function(event) {
+    directEditing.activate(event.element);
+  });
+
+  // complete on followup canvas operation
+  eventBus.on([ 'element.mousedown', 'drag.init', 'canvas.viewbox.changed' ], function(event) {
+    directEditing.complete();
+  });
+
+  // cancel on command stack changes
+  eventBus.on([ 'commandStack.changed' ], function() {
+    directEditing.cancel();
+  });
+
+  eventBus.on('create.end', 500, function(event) {
+
+    var element = event.shape,
+        canExecute = event.context.canExecute,
+        isTouch = event.isTouch;
+
+    // TODO(nikku): we need to find a way to support the
+    // direct editing on mobile devices; right now this will
+    // break for desworkflowediting on mobile devices
+    // as it breaks the user interaction workflow
+
+    // TODO(nre): we should temporarily focus the edited element
+    // here and release the focused viewport after the direct edit
+    // operation is finished
+    if (isTouch) {
+      return;
+    }
+
+    if (!canExecute) {
+      return;
+    }
+
+    directEditing.activate(element);
+  });
+
+}
+
+LabelEditingProvider.$inject = [
+  'eventBus',
+  'canvas',
+  'directEditing',
+  'commandStack'
+];
+
+module.exports = LabelEditingProvider;
+
+
+/**
+ * Activate direct editing.
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} an object with properties bounds (position and size) and text
+ */
+LabelEditingProvider.prototype.activate = function(element) {
+
+  var text = LabelUtil.getLabel(element);
+
+  if (text === undefined) {
+    return;
+  }
+
+  // don't activate for root element
+  if (!element.parent) {
+    return;
+  }
+
+  var target = element.label || element;
+
+  var props = this.getEditingBBox(element);
+
+  var definition = getDefinition(element);
+
+  var options = {};
+
+  if (is(definition, 'cmmn:Task') || is(definition, 'cmmn:Milestone')) {
+    options.centerVertically = true;
+  }
+
+  if (is(element, 'cmmn:TextAnnotation')) {
+    options.autoResize = true;
+    options.resizable = true;
+  }
+
+  // external labels for event listener, case file items and connections
+  if (target.labelTarget) {
+    options.autoResize = true;
+  }
+
+  return assign({ text: text, options: options }, props);
+};
+
+
+/**
+ * Get the editing bounding box based on the element's size and position
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} an object containing information about position and size (fixed or minimum and/or maximum)
+ */
+LabelEditingProvider.prototype.getEditingBBox = function(element, maxBounds) {
+
+  var canvas = this._canvas;
+
+  var definition = getDefinition(element);
+
+  var target = element.label || element;
+
+  var bbox = this._canvas.getAbsoluteBBox(target);
+
+  var mid = {
+    x: bbox.x + bbox.width / 2,
+    y: bbox.y + bbox.height / 2
+  };
+
+  // default position
+  var bounds = { x: bbox.x, y: bbox.y };
+
+  var style = {};
+
+  var zoom = canvas.zoom();
+
+  // internal labels for case plan models
+  if (isCasePlanModel(element)) {
+    bounds.height = 50;
+    bounds.width = 200;
+    bounds.y -= 30;
+
+    style.textAlign = 'left';
+  }
+
+  // internal labels for stages and plan fragments (excluding case plan models)
+  if (is(definition, 'cmmn:PlanFragment') && !isCasePlanModel(element)) {
+    bounds.width = element.width;
+    bounds.maxHeight = 3 * LINE_HEIGHT + PADDING; // maximum 3 lines
+    bounds.y += 5;
+
+    style.textAlign = 'left';
+  }
+
+  // internal labels for tasks
+  if (is(definition, 'cmmn:Task') || is(definition, 'cmmn:Milestone')) {
+
+    // fixed size for internal labels:
+    // on high zoom levels: text box size === bbox size
+    // on low zoom levels: text box size === bbox size at 100% zoom
+    // This ensures minimum bounds at low zoom levels
+    if (zoom > 1) {
+      bounds.width = bbox.width;
+      bounds.height = bbox.height;
+    } else {
+      bounds.width = bbox.width / zoom;
+      bounds.height = bbox.height / zoom;
+    }
+
+    // centering overlapping text box size at low zoom levels
+    if (zoom < 1) {
+      bounds.x = bbox.x - (bounds.width / 2 - bbox.width / 2);
+      bounds.y = bbox.y - (bounds.height / 2 - bbox.height / 2);
+    }
+  }
+
+  if (is(element, 'cmmn:TextAnnotation')) {
+    bounds.width = bbox.width;
+    bounds.height = bbox.height;
+    bounds.minWidth = 30 * zoom;
+    bounds.minHeight = 10 * zoom;
+
+    style.textAlign = 'left';
+  }
+
+  // external labels for event listener, case file items and connections
+  if (target.labelTarget) {
+
+    bounds.width = 150;
+    bounds.minHeight = LINE_HEIGHT + PADDING; // 1 line
+    bounds.x = mid.x - bounds.width / 2;
+  }
+
+  return {
+    bounds: bounds,
+    style: style
+  };
+};
+
+
+LabelEditingProvider.prototype.update = function(element, newLabel) {
+  this._commandStack.execute('element.updateLabel', {
+    element: element,
+    newLabel: newLabel
+  });
+};

package/lib/features/label-editing/LabelUtil.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var is = require('../../util/ModelUtil').is;
+var isAny = require('../modeling/util/ModelingUtil').isAny;
+
+var getBusinessObject = require('../../util/ModelUtil').getBusinessObject;
+
+function getLabelAttr(element) {
+  if (is(element, 'cmmn:TextAnnotation')) {
+    return 'text';
+  }
+
+  return 'name';
+}
+
+function getSemantic(element) {
+  var bo = getBusinessObject(element);
+
+  if (is(bo, 'cmmndi:CMMNEdge') && bo.cmmnElementRef) {
+    bo = bo.cmmnElementRef;
+  }
+
+  return bo;
+}
+
+/**
+ * Check if the given element is of a type which has a reference to a definition.
+ * This could be either plan items or discretionary items or case file items.
+ *
+ * @param {djs.model.Base} element
+ *
+ * @return {Boolean}
+ */
+var isReferencing = function(element) {
+  return isAny(element, [
+    'cmmn:PlanItem',
+    'cmmn:DiscretionaryItem',
+    'cmmn:CaseFileItem'
+  ]);
+};
+
+function hasEditableLabel(element) {
+  return !isAny(element, [
+    'cmmn:Association',
+    'cmmn:Criterion',
+    'cmmndi:CMMNEdge'
+  ]);
+}
+
+var getLabel = function(element) {
+
+  var semantic = getSemantic(element),
+      attr = getLabelAttr(semantic);
+
+  if (!hasEditableLabel(semantic)) {
+    return;
+  }
+
+  // Get definition as semantic if
+  // * the element has no name property set
+  // * the element type has a reference to a definition
+  if (!semantic[attr] && isReferencing(element)) {
+    semantic = semantic.definitionRef;
+  }
+
+  return semantic[attr] || '';
+};
+
+module.exports.getLabel = getLabel;
+
+
+var setLabel = function(element, text, isExternal, isExclusiveRef) {
+
+  var semantic = getSemantic(element),
+      attr = getLabelAttr(semantic);
+
+  // Get definition as semantic if
+  // * the element has no name property set
+  // * the element type has a reference to a definition
+  // * the element is the only reference to a defition
+  if (!semantic[attr] && isReferencing(element) && isExclusiveRef) {
+    semantic = semantic.definitionRef;
+  }
+
+  semantic[attr] = text;
+
+  // show external label if not empty
+  if (isExternal) {
+    element.hidden = !text;
+  }
+
+  return element;
+};
+
+module.exports.setLabel = setLabel;

package/lib/features/label-editing/cmd/UpdateLabelHandler.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var LabelUtil = require('../LabelUtil');
+
+var getDefinition = require('../../../util/ModelUtil').getDefinition;
+
+/**
+ * A handler that updates the text of a CMMN element.
+ */
+function UpdateLabelHandler(itemRegistry) {
+
+  /**
+   * Set the label and return the changed elements.
+   *
+   * Element parameter can be label itself or connection (i.e. sequence flow).
+   *
+   * @param {djs.model.Base} element
+   * @param {String} text
+   */
+  function setText(element, text) {
+
+    // external label if present
+    var label = element.label || element;
+
+    var labelTarget = element.labelTarget || element;
+
+    LabelUtil.setLabel(label, text, labelTarget !== label, isExclusiveRef(element));
+
+    return [ label, labelTarget ];
+  }
+
+  /**
+   * Return a function which checks if the element is the only reference to a definition
+   *
+   * @param  {djs.model.Base} element
+   *
+   * @return {Function}
+   */
+  function isExclusiveRef(element) {
+    var definition = getDefinition(element);
+    return definition ? itemRegistry.getReferences(definition).length === 1 : true;
+  }
+
+
+  function execute(ctx) {
+    ctx.oldLabel = LabelUtil.getLabel(ctx.element);
+    return setText(ctx.element, ctx.newLabel);
+  }
+
+  function revert(ctx) {
+    return setText(ctx.element, ctx.oldLabel);
+  }
+
+  // API
+
+  this.execute = execute;
+  this.revert = revert;
+}
+
+
+UpdateLabelHandler.$inject = [ 'itemRegistry' ];
+
+module.exports = UpdateLabelHandler;

package/lib/features/label-editing/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  __depends__: [
+    require('diagram-js/lib/command').default,
+    require('diagram-js/lib/features/change-support').default,
+    require('diagram-js-direct-editing').default
+  ],
+  __init__: [ 'labelEditingProvider' ],
+  labelEditingProvider: [ 'type', require('./LabelEditingProvider') ]
+};