@dogtiti/dmn-js-drd/lib/features/drill-down/DrillDown.js

A decision requirements diagram view for dmn-js

import { is } from '@dogtiti/dmn-js-shared/lib/util/ModelUtil';
import { domify, classes as domClasses, delegate as domDelegate } from 'min-dom';
var PROVIDERS = [{
  className: 'dmn-icon-decision-table',
  matches: function matches(el) {
    var businessObject = el.businessObject;
    return is(businessObject, 'dmn:Decision') && is(businessObject.decisionLogic, 'dmn:DecisionTable');
  }
}, {
  className: 'dmn-icon-literal-expression',
  matches: function matches(el) {
    var businessObject = el.businessObject;
    return is(businessObject, 'dmn:Decision') && is(businessObject.decisionLogic, 'dmn:LiteralExpression');
  }
}];

/**
 * Displays overlays that can be clicked in order to drill
 * down into a DMN element.
 */
export default class DrillDown {
  constructor(injector, eventBus, overlays, config) {
    this._injector = injector;
    this._eventBus = eventBus;
    this._overlays = overlays;
    this._config = config || {
      enabled: true
    };
    eventBus.on(['shape.added'], _ref => {
      var element = _ref.element;
      for (var i = 0; i < PROVIDERS.length; i++) {
        var _PROVIDERS$i = PROVIDERS[i],
          matches = _PROVIDERS$i.matches,
          className = _PROVIDERS$i.className;
        var editable = matches && matches(element);
        if (editable) {
          this.addOverlay(element, className);
        }
      }
    });
  }

  /**
   * Add overlay to an element that enables drill down.
   *
   * @param {Object} element Element to add overlay to.
   * @param {string} className
   *        CSS class that will be added to overlay in order to display icon.
   */
  addOverlay(element, className) {
    var enabled = this._config.enabled !== false;
    var html = domify("\n      <div class=\"drill-down-overlay\">\n        ".concat(enabled ? "<button type=\"button\" class=\"".concat(className, "\"></button>") : "<span class=\"".concat(className, "\"></span>"), "\n      </div>\n    "));
    var overlayId = this._overlays.add(element, {
      position: {
        top: 2,
        left: 2
      },
      html
    });

    // TODO(nikku): can we remove renamed to drillDown.enabled
    if (enabled) {
      domClasses(html).add('interactive');
      this.bindEventListener(element, html, overlayId);
    }
  }

  /**
   * @param {Object} element
   * @param {Object} overlay
   * @param {string} id
   */
  bindEventListener(element, overlay, id) {
    var overlays = this._overlays,
      eventBus = this._eventBus;
    var overlaysRoot = overlays._overlayRoot;
    domDelegate.bind(overlaysRoot, '[data-overlay-id="' + id + '"]', 'click', () => {
      var triggerDefault = eventBus.fire('drillDown.click', {
        element
      });
      if (triggerDefault === false) {
        return;
      }
      this.drillDown(element);
    });
  }

  /**
   * Drill down into the specific element.
   *
   * @param  {djs.model.Base} element
   *
   * @return {boolean} whether drill down was executed
   */
  drillDown(element) {
    var parent = this._injector.get('_parent', false);

    // no parent; skip drill down
    if (!parent) {
      return false;
    }
    var view = parent.getView(element.businessObject);

    // no view to drill down to
    if (!view) {
      return false;
    }
    parent.open(view);
    return true;
  }
}
DrillDown.$inject = ['injector', 'eventBus', 'overlays', 'config.drillDown'];
//# sourceMappingURL=DrillDown.js.map