@optimajet/workflow-designer-react/dist/index.cjs.js

React Designer for Workflow Engine

'use strict';

var React = require('react');
var isEqual = require('fast-deep-equal');
var WFDesigner = require('@optimajet/workflow-designer');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
var WFDesigner__default = /*#__PURE__*/_interopDefaultLegacy(WFDesigner);

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

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

function _defineProperties(e, r) {
  for (var t = 0; t < r.length; t++) {
    var o = r[t];
    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
  }
}

function _createClass(e, r, t) {
  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
    writable: !1
  }), e;
}

function _createSuper(t) {
  var r = _isNativeReflectConstruct();

  return function () {
    var e,
        o = _getPrototypeOf(t);

    if (r) {
      var s = _getPrototypeOf(this).constructor;

      e = Reflect.construct(o, arguments, s);
    } else e = o.apply(this, arguments);

    return _possibleConstructorReturn(this, e);
  };
}

function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}

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

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

function _isNativeReflectConstruct() {
  try {
    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
  } catch (t) {}

  return (_isNativeReflectConstruct = function () {
    return !!t;
  })();
}

function ownKeys(e, r) {
  var t = Object.keys(e);

  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    r && (o = o.filter(function (r) {
      return Object.getOwnPropertyDescriptor(e, r).enumerable;
    })), t.push.apply(t, o);
  }

  return t;
}

function _objectSpread2(e) {
  for (var r = 1; r < arguments.length; r++) {
    var t = null != arguments[r] ? arguments[r] : {};
    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
      _defineProperty(e, r, t[r]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
    });
  }

  return e;
}

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

function _setPrototypeOf(t, e) {
  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
    return t.__proto__ = e, t;
  }, _setPrototypeOf(t, e);
}

function _toPrimitive(t, r) {
  if ("object" != typeof t || !t) return t;
  var e = t[Symbol.toPrimitive];

  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != typeof i) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }

  return ("string" === r ? String : Number)(t);
}

function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");

  return "symbol" == typeof i ? i : i + "";
}

var WorkflowDesigner = /*#__PURE__*/function (_React$Component) {
  _inherits(WorkflowDesigner, _React$Component);

  var _super = _createSuper(WorkflowDesigner);

  function WorkflowDesigner(props) {
    var _props$designerConfig, _props$designerConfig2, _props$designerConfig3;

    var _this;

    _classCallCheck(this, WorkflowDesigner);

    _this = _super.call(this, props);
    _this.designerDivId = (_props$designerConfig = props.designerConfig.renderTo) !== null && _props$designerConfig !== void 0 ? _props$designerConfig : 'workflow-designer';
    _this.uploadFormId = (_props$designerConfig2 = props.designerConfig.uploadFormId) !== null && _props$designerConfig2 !== void 0 ? _props$designerConfig2 : 'workflow-uploadform';
    _this.uploadFileId = (_props$designerConfig3 = props.designerConfig.uploadFileId) !== null && _props$designerConfig3 !== void 0 ? _props$designerConfig3 : 'workflow-uploadfile';
    _this.innerDesigner = undefined;
    _this.uploadCallback = null;
    _this.uploadType = null;
    _this.id = null;
    _this.data = null;
    _this.resizeTimer = undefined;
    return _this;
  } // ------------------------------- Methods to use from external classes ---------------------------------------

  /**
   * Clears the designer, equivalent of creating empty scheme design
   */


  _createClass(WorkflowDesigner, [{
    key: "clearScheme",
    value: function clearScheme() {
      this.innerDesigner.create();
    }
    /**
     * Get Workflow Designer Errors
     *
     * @returns Errors in Workflow Designer
     */

  }, {
    key: "getDesignerErrors",
    value: function getDesignerErrors() {
      return this.innerDesigner.validate();
    }
    /**
     * Save Workflow scheme
     *
     * @param {function} successCallback Function which will be executed if save was successful
     * @param {function} errorCallback Function which will be executed if save operation failed
     */

  }, {
    key: "save",
    value: function save(successCallback, errorCallback) {
      this.innerDesigner.schemecode = this.props.schemeCode;
      var error = this.getDesignerErrors();

      if (error != undefined && error.length > 0) {
        errorCallback(error);
      } else {
        this.innerDesigner.save(successCallback);
      }
    }
    /**
     * Download XML file which contain Workflow Scheme description
     */

  }, {
    key: "downloadScheme",
    value: function downloadScheme() {
      this.innerDesigner.downloadscheme({
        name: this.props.schemeCode
      });
    }
    /**
     * Upload BPMN or XML file
     *
     * @param uploadType {string} Upload type, can be 'scheme' or 'bpmn'
     * @param {function} callback Function that will be executed after uploading file
     */

  }, {
    key: "upload",
    value: function upload(uploadType, callback) {
      this.uploadCallback = callback;
      this.uploadType = uploadType;
      this.triggerUploadEvent();
    }
    /**
     * Check for scheme existence by the scheme code from props
     *
     * @returns {boolean} If scheme exists true, otherwise, false
     */

  }, {
    key: "isSchemeExist",
    value: function isSchemeExist() {
      var data = {
        schemecode: this.props.schemeCode,
        processid: undefined
      };
      return this.innerDesigner.exists(data);
    }
    /**
     * Check for process existence by scheme code
     * and process id given in props
     *
     * @returns {boolean} If process exists true, otherwise, false
     */

  }, {
    key: "isProcessExist",
    value: function isProcessExist() {
      var data = {
        schemecode: this.props.schemeCode,
        processid: this.props.processId
      };
      return this.innerDesigner.exists(data);
    }
    /**
     * Refresh data in WorkflowDesigner
     */

  }, {
    key: "refresh",
    value: function refresh() {
      this.innerDesigner.refresh();
    } // ------------------------------- End of methods to use from external classes -----------------------------------

  }, {
    key: "isSchemeOrProcessExist",
    value: function isSchemeOrProcessExist(data) {
      return this.innerDesigner.exists(data);
    }
  }, {
    key: "uploadChange",
    value: function uploadChange() {
      var form = document.getElementById(this.uploadFormId);

      if (this.uploadType === 'bpmn') {
        this.innerDesigner.uploadbpmn(form, this.uploadCallback);
      } else {
        this.innerDesigner.uploadscheme(form, this.uploadCallback);
      }
    }
  }, {
    key: "triggerUploadEvent",
    value: function triggerUploadEvent() {
      var file = document.getElementById(this.uploadFileId);
      file.click();
    }
  }, {
    key: "loadScheme",
    value: function loadScheme() {
      var _this2 = this;

      var data = {
        schemecode: this.props.schemeCode,
        processid: this.props.processId,
        readonly: !!this.props.readOnly
      };

      var callback = function callback() {
        _this2.data = _this2.innerDesigner.data;

        if (_this2.props.onLoadDesigner) {
          _this2.props.onLoadDesigner();
        }
      }; // Using Promise because innerDesigner.load is async and we need
      // to call 'onLoadDesigner' after full execution of load method


      var loadData = new Promise(function (resolve, reject) {
        if (_this2.isSchemeOrProcessExist(data)) {
          _this2.innerDesigner.load(data, resolve);
        } else {
          _this2.innerDesigner.create(_this2.props.schemeCode);
        }
      });
      loadData.then(callback)["catch"](this.props.loadError);
    }
  }, {
    key: "graphSize",
    value: function graphSize() {
      var _this$props$designerC = this.props.designerConfig,
          widthDiff = _this$props$designerC.widthDiff,
          heightDiff = _this$props$designerC.heightDiff;
      return {
        width: window.innerWidth - (widthDiff !== null && widthDiff !== void 0 ? widthDiff : 0),
        height: window.innerHeight - (heightDiff !== null && heightDiff !== void 0 ? heightDiff : 0)
      };
    }
  }, {
    key: "redrawDesigner",
    value: function redrawDesigner() {
      if (this.props.schemeCode === undefined && this.props.processId === undefined) {
        return;
      }

      if (!document.getElementById(this.designerDivId)) {
        return;
      }

      var designerConfig = _objectSpread2(_objectSpread2({}, this.props.designerConfig), {}, {
        renderTo: this.designerDivId,
        graphwidth: this.graphSize().width,
        graphheight: this.graphSize().height
      });

      if (this.innerDesigner) {
        this.processExistingDesigner(designerConfig);
      } else {
        this.createNewDesigner(designerConfig);
      }
    }
  }, {
    key: "processExistingDesigner",
    value: function processExistingDesigner(designerConfig) {
      var _this$innerDesigner, _this$innerDesigner2, _this$innerDesigner3;

      var data = (_this$innerDesigner = this.innerDesigner) === null || _this$innerDesigner === void 0 ? void 0 : _this$innerDesigner.data;
      var schemecode = (_this$innerDesigner2 = this.innerDesigner) === null || _this$innerDesigner2 === void 0 ? void 0 : _this$innerDesigner2.schemecode;
      (_this$innerDesigner3 = this.innerDesigner) === null || _this$innerDesigner3 === void 0 ? void 0 : _this$innerDesigner3.destroy();
      this.innerDesigner = new WFDesigner__default['default'](designerConfig);
      this.innerDesigner.schemecode = schemecode;

      if (!data) {
        this.innerDesigner.render();
      } else {
        this.innerDesigner.data = data;
        this.innerDesigner.render();
      }
    }
  }, {
    key: "createNewDesigner",
    value: function createNewDesigner(designerConfig) {
      this.innerDesigner = new WFDesigner__default['default'](designerConfig);
      this.loadScheme();
    }
  }, {
    key: "resizeDesigner",
    value: function resizeDesigner() {
      var _this3 = this;

      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
        this.resizeTimer = undefined;
      }

      this.resizeTimer = setTimeout(function () {
        var _this3$innerDesigner;

        var _this3$graphSize = _this3.graphSize(),
            width = _this3$graphSize.width,
            height = _this3$graphSize.height;

        (_this3$innerDesigner = _this3.innerDesigner) === null || _this3$innerDesigner === void 0 ? void 0 : _this3$innerDesigner.resize(width, height);
      }, 150);
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
        id: this.designerDivId
      }), /*#__PURE__*/React__default['default'].createElement("form", {
        action: "",
        id: this.uploadFormId,
        method: "post",
        style: {
          display: "none"
        },
        encType: "multipart/form-data"
      }, /*#__PURE__*/React__default['default'].createElement("input", {
        type: "file",
        name: this.uploadFileId,
        id: this.uploadFileId,
        onChange: this.uploadChange.bind(this)
      })));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.resizeDesigner.bind(this));
      this.redrawDesigner();
      this.resizeDesigner();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (!isEqual__default['default'](prevProps.designerConfig, this.props.designerConfig)) {
        this.redrawDesigner();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.innerDesigner !== undefined) {
        this.innerDesigner.destroy();
        this.innerDesigner = undefined;
      }

      window.removeEventListener('resize', this.resizeDesigner.bind(this));
    }
  }]);

  return WorkflowDesigner;
}(React__default['default'].Component);

module.exports = WorkflowDesigner;