dmn-js-decision-table-custom-z/lib/features/simple-mode/components/SimpleModeButtonComponent.js

A decision table view for dmn-js

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import { createVNode } from "inferno";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

import { Component } from 'inferno';
import { assign } from 'min-dash';
import { closest as domClosest } from 'min-dom';
import { inject } from 'table-js/lib/components';
import { getNodeById } from '../../cell-selection/CellSelectionUtil';
import { isInput, isOutput } from 'dmn-js-shared/lib/util/ModelUtil';
var OFFSET = 4;

var SimpleModeButtonComponent = /*#__PURE__*/function (_Component) {
  _inherits(SimpleModeButtonComponent, _Component);

  function SimpleModeButtonComponent(props, context) {
    var _this;

    _classCallCheck(this, SimpleModeButtonComponent);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(SimpleModeButtonComponent).call(this, props, context));
    _this.state = {
      top: 0,
      left: 0,
      isVisible: false,
      isDisabled: false,
      selection: null
    };
    inject(_assertThisInitialized(_this));

    var _assertThisInitialize = _assertThisInitialized(_this),
        debounceInput = _assertThisInitialize.debounceInput;

    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.handleSelectionChanged = _this.handleSelectionChanged.bind(_assertThisInitialized(_this));
    _this.hideAndShowDebounced = _this.hideAndShowDebounced.bind(_assertThisInitialized(_this));
    _this.showDebounced = debounceInput(_this.showDebounced.bind(_assertThisInitialized(_this)));
    _this.updatePosition = _this.updatePosition.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(SimpleModeButtonComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var eventBus = this.eventBus;
      eventBus.on('cellSelection.changed', this.handleSelectionChanged);
      eventBus.on('commandStack.changed', this.updatePosition);
      eventBus.on('sheet.scroll', this.hideAndShowDebounced);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var eventBus = this.eventBus;
      eventBus.off('cellSelection.changed', this.handleSelectionChanged);
      eventBus.off('commandStack.changed', this.updatePosition);
      eventBus.off('sheet.scroll', this.hideAndShowDebounced);
    }
  }, {
    key: "hideAndShowDebounced",
    value: function hideAndShowDebounced() {
      this.hide();
      this.showDebounced();
    }
  }, {
    key: "showDebounced",
    value: function showDebounced() {
      this.show();
    }
  }, {
    key: "hide",
    value: function hide() {
      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      this.setState(_objectSpread({}, state, {
        isVisible: false
      }));
    }
  }, {
    key: "show",
    value: function show() {
      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      this.setState(_objectSpread({}, state, {
        isVisible: true
      }));
      this.updatePosition();
    }
  }, {
    key: "handleSelectionChanged",
    value: function handleSelectionChanged(_ref) {
      var elementId = _ref.elementId;
      var elementRegistry = this.elementRegistry,
          expressionLanguages = this.expressionLanguages,
          simpleMode = this.simpleMode;
      var selection = elementRegistry.get(elementId);

      if (!selection || !simpleMode.canSimpleEdit(selection)) {
        this.hide({
          isDisabled: false,
          selection: null
        });
        return;
      }

      var expressionLanguage = getExpressionLanguage(selection);
      var isDisabled = !isDefaultExpressionLanguage(selection, expressionLanguage, expressionLanguages);
      this.show({
        isDisabled: isDisabled,
        selection: selection
      });
    } // position button always on opposite site of context menu

  }, {
    key: "updatePosition",
    value: function updatePosition() {
      var selection = this.state.selection;
      var node = this.node;

      if (!selection || !node) {
        return;
      }

      var renderer = this.renderer;
      var container = renderer.getContainer(),
          containerBounds = container.getBoundingClientRect();
      var cellNode = getNodeById(selection.id, container);
      var cellBounds = cellNode.getBoundingClientRect();
      var nodeBounds = this.node.getBoundingClientRect();

      var _getTableContainerScr = getTableContainerScroll(node),
          scrollLeft = _getTableContainerScr.scrollLeft,
          scrollTop = _getTableContainerScr.scrollTop;

      var nodePosition = {};

      if (cellBounds.left + cellBounds.width / 2 > containerBounds.width / 2) {
        // left
        nodePosition.left = -containerBounds.left + cellBounds.left - nodeBounds.width + OFFSET + scrollLeft + 'px';
        node.classList.remove('right');
        node.classList.add('left');
      } else {
        // right
        nodePosition.left = -containerBounds.left + cellBounds.left + cellBounds.width - OFFSET + scrollLeft + 'px';
        node.classList.remove('left');
        node.classList.add('right');
      }

      if (cellBounds.top + cellBounds.height / 2 > containerBounds.height / 2) {
        // bottom
        nodePosition.top = -containerBounds.top + cellBounds.top - nodeBounds.height + OFFSET + scrollTop + 'px';
        node.classList.remove('top');
        node.classList.add('bottom');
      } else {
        // top
        nodePosition.top = -containerBounds.top + cellBounds.top - OFFSET + scrollTop + 'px';
        node.classList.remove('bottom');
        node.classList.add('top');
      }

      assign(this.node.style, nodePosition);
    }
  }, {
    key: "onClick",
    value: function onClick() {
      var eventBus = this.eventBus;
      var isDisabled = this.state.isDisabled;

      if (isDisabled) {
        return;
      }

      var selection = this.selection;
      var element = selection.get();

      if (!element) {
        return;
      }

      eventBus.fire('simpleMode.open', {
        element: element,
        node: getNodeById(element.id, this._container)
      });
      this.hide();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          isDisabled = _this$state.isDisabled,
          isVisible = _this$state.isVisible,
          top = _this$state.top,
          left = _this$state.left;
      var classes = ['simple-mode-button', 'no-deselect'];

      if (isDisabled) {
        classes.push('disabled');
      }

      return isVisible ? createVNode(1, "div", classes.join(' '), createVNode(1, "span", "dmn-icon-edit"), 2, {
        "onClick": this.onClick,
        "style": {
          top: top,
          left: left
        },
        "title": isDisabled ? 'Editing not supported for set expression language' : 'Edit'
      }, null, function (node) {
        return _this2.node = node;
      }) : null;
    }
  }]);

  return SimpleModeButtonComponent;
}(Component);

export { SimpleModeButtonComponent as default };
SimpleModeButtonComponent.$inject = ['debounceInput', 'elementRegistry', 'eventBus', 'expressionLanguages', 'renderer', 'selection', 'simpleMode']; // helpers //////////////////////

/**
 * Return set expression language if found.
 *
 * @param {Cell} cell - Cell.
 */

function getExpressionLanguage(cell) {
  return cell.businessObject.expressionLanguage;
}

function isDefaultExpressionLanguage(cell, expressionLanguage, expressionLanguages) {
  return !expressionLanguage || expressionLanguage === getDefaultExpressionLanguage(cell, expressionLanguages);
}

function getDefaultExpressionLanguage(cell, expressionLanguages) {
  if (isInput(cell.col)) {
    return expressionLanguages.getDefault('inputCell').value;
  } else if (isOutput(cell.col)) {
    return expressionLanguages.getDefault('outputCell').value;
  }
}

function getTableContainerScroll(node) {
  var tableContainer = domClosest(node, '.tjs-table-container');

  if (!tableContainer) {
    return {
      scrollTop: 0,
      scrollLeft: 0
    };
  }

  var scrollLeft = tableContainer.scrollLeft,
      scrollTop = tableContainer.scrollTop;
  return {
    scrollTop: scrollTop,
    scrollLeft: scrollLeft
  };
}
//# sourceMappingURL=SimpleModeButtonComponent.js.map